@charset "utf-8";


/*-----------------body------------------*/
*{
    box-sizing: border-box;
    
}

main {margin: 1em; 
     min-height: 30em;
}

img{
    max-width: 100%;
	
	
}
body{
    margin:0;
    font-family: 'montserrat', sans-serif;
    padding: 0;
    display: flex;
    flex-direction: column; 
    
   
}
/*----------------slide------------------*/

.slider li img{
	width:100%;
    height: auto;
    
}


/*----------------------------------
 modificaciones al css del plugin
----------------------------------*/

.bx-wrapper{
    z-index:0;
}

/*-----------------menu------------------*/



li{
    list-style: none;
    
    
}

/*-----------------navegador-----------------*/
.usuario {
    margin: 0;
    text-align: center;
    font-size: 75%;
    color: #d8c2c2;
}
.usuario img {
    border-radius: 50%;
    width: 25vmin;
    height: 25vmin;
    max-width: 15em;
    max-height: 15em;
    border: 4px solid #ff0000;
    box-shadow: 0 .35em .5em rgba(0, 0, 0, .25) inset, 0 .35em .5em rgba(0, 0, 0, .25);
}

#menu ul li{
    margin-top: 1em;
       
}
 

#menu { 
    text-transform: uppercase;
    background-color: #000000;
    margin-left: 100rem;
    padding: 1em;
   

    }

#menu ul{
    padding:0;
    margin:0;
}
#menu ul li h3{
    border-top: 0.1em solid;
    color: white;
    
    
}

#menu ul li a{
    color:white;
    text-decoration: none;
    text-transform: uppercase; 
}

#menu ul li a:hover{
    color:firebrick;

}
 
    
.desplegable {
    
    margin-left: -2.5rem;
    display: none;
    margin-top:0;
    position: relative;
	

    }


nav{
   position: fixed;
   top:4rem;
    transition: all .3s ease;
    right: -140vw;
}
#menuicono {
    
    background-color: rgba(199, 10, 10, 0);
    width:40%;
    border:0;
    cursor: pointer;
    
}

.active{
    right: 0vw;
}
.desplegaractive{
    margin-top: 0em;
    position: relative;
   
}


header{
   position: sticky;
    width: 100%;
    top: 0;
    z-index: 9999;
    background-color: #000000;
    padding-left: .5em;
    padding-right: .5em;
    padding-top: .5em;
}

header section{
    padding: 0.3rem;
    color: white;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  
    }

#logo{
    max-width:60%;
    height: auto;

    }


--------botonsocio----------------*/

    
.botonsocios {
    max-width: 100%;
    display: flex;
    justify-content: center;
    margin: auto;
   
}
.socios {
    background-color: firebrick;
    color: #f0f0f0;
    border: .2em solid black;
    
    text-align: center;
    
    font-size: 1em;
    font-weight: 700;
    padding-top:1em;
    padding-bottom:1em;
    padding-left:1em;
    padding-right:1em;
    border-radius:8em;
    

     
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    top: 1em;
    z-index: 99999;
}
.botonsocios a {
    color: #f0f0f0;
    text-decoration: none;
   
}

/*
----------------
explorar
----------------
*/

.soc {
    background-color: firebrick;
    border-style: solid;
    
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    width: 2.8em;
    height: 2.8em;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 9990;
    
    align-content: center;
    justify-content: center;
}

.soc i{
	justify-content: center;
    align-items: center;
    margin: 0.2em;
    padding: 0em;
	margin-top: 0.2em;
    font-size: 1.9rem;

	color: aliceblue;
	
}


/*----------------contenidos----------------*/

main {

    /* crece para "llenar" la caja contenedora,
    aun con poco contenido */
    flex-grow: 1;
}





/*----------------video----------------*/
.videoresponsive{
    text-align: center;
	width: 100%;
	height: auto;
   
}


.texto h1{
    margin:0;
    font-size: 1.5em;
    text-align: center;
}
.texto h2{ 
   font-size: 1.2em;
    font-weight: 800;
    padding: 0em 0em 0.3rem 1em;
    color: firebrick;
    margin-top: 1.5em;
    border-bottom: 1px solid firebrick;

}
/*videos*/

.vistagaleria2 h4 {
    line-height: 1rem;
    margin-top: .3rem;
    text-align: left;
}

.vistagaleria2 .nolink p {
    color: black;
}



.galeriavideos > div {
    margin-bottom: 3rem;
}
.fecha1 {
    font-size: 1rem;
    background-color: rgb(17, 17, 17);
    color: white;
    padding: 0.1rem 0.3rem;
    border-radius: 0.2rem;
}




/*----------------noticias----------------*/
.marcadornoticia {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-transform: uppercase;
    font-size: .8rem;
}

.marcadornoticia:before {
    content: "";
    background-color: firebrick;
    height: 1rem;
    width: 3px;
    margin-right: .2rem;
}
.noticias {
    background-color: rgb(232, 231, 231);
    padding: 1em;
    border-radius: .6em;
    margin-bottom: 1em;

}

.foto{
    max-width: 100%; 
}

.texto h1{
    margin-bottom: .5em;
    font-size: 1.5em;
    text-align: center;
}
.noticias h4 {
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
    font-size: 0.8em; 
    margin-top:.5em;
    margin-bottom: .5em;
}

.noticias h5{ 
    margin:0;
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
    color: #b92e2e;
    text-decoration: underline;
   
    font-size: 1.4em;
 

  
}

p#texto{
    font-family: 'Open Sans', sans-serif;
    color: black;
    line-height: 1.2em;
   
}

p.fecha{ 
    font-size: 0.7em;
    
}



/*----------------notindividual----------------*/


.etiquetas {
    margin: 1rem 0rem 1rem;
}

.etiquetas > div {
    display: flex;
}



.etiquetas ul {
    display: flex;
    flex-flow: row wrap;
    flex: 1auto;
    text-align: center;
    padding:0;
   
}

.etiquetas ul a {
    display: block;
    background-color:rgb(88, 75, 75); 
    opacity: .3;
    text-decoration: none;
    padding: 0.5rem;
    margin-right: .3rem;
    margin-bottom: .3rem;
    border-radius: 5px;
    color: #fff;
}




/*----------------notindividual----------------*/

.noticia {
    background-color: rgb(232, 231, 231);
    padding: 1em;
    border-radius: .6em;
    margin-bottom: 1em;

}


.noticia h5{
      margin:0;
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
    color: #b92e2e;
    font-size: 1.45em;
}


.areasubnoticia 
{  display: flex;
   margin-top: 0em;
   background:#e5e3e3;
border-radius: em;
   
    
}


p#spac
{  font-size: 0.75em;
   font-weight: 500;
    color: black;
    margin: 1em;
	text-decoration:underline;
	text-decoration-color:rgb(232, 231, 231);

}


p#subtitulo{  font-size: 0.9em;
   font-weight: 600; 
   text-align: left;
   margin-left: 0.6em;
   color: firebrick;
	text-decoration: underline;
  
}



.areasubnoticia img
{  width: 9em;
    height: 6em;
}    

.botonsecundario
{  
   background-color: firebrick;
   height: 2.2em;
   
   display: flex;
   justify-content: center;
   
   margin:1.5em;
    
   padding-left: 1em;
   padding-right: 1em;
   border-radius: 20px;
   text-decoration:none; 
}

.botonsecundario p
{  font-size: 0.7em;
   color: white;
   font-weight: 400;
}



 .tags-container {
  display: flex;
  margin-top: 1rem;
}
.timeline-tag {
  padding: 0.3rem;

  border: 1px solid firebrick;
  border-radius: 25px;
  font-size: 0.6rem;
  white-space: nowrap;
  margin: 0 0.2rem;
  text-transform: uppercase;
}

.timeline-tag a{
  color:firebrick;
  text-decoration: none;
}

/*----------------redes----------------*/

.seguinos {
   text-align: center;
}

#seguinos{
    font-size: 1em;
    margin: 0em;
    
}
    
.redes {
    display: flex;
    margin: auto; 
    justify-content: center; 
    padding-bottom: .5em;
}

.redes img {
    height: auto;
    width: 1.5em;
    margin: .5em; 
}

/*----------------pie----------------*/




footer{
    background-color: black;
    color: white;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 1rem;
    padding-top: 0.5rem;
    font-size: 1em;
    
  }


footer {
    color: white;
    padding: 1em;
}

p#pie{
    font-size: .9em;
    color: white;
   
}



/*----------------deportes---------------*/
div.botonprendido li {
   background: #c72727; padding: .5em;
    border-radius: 100%;
}

#deportemenu ul {
    display:flex;
    justify-content: space-around;
    list-style-type: disc;
    margin:1em;
    padding:0;

}


li#deporte {
    padding: .5em;
    border-radius: 100%;
    background-color: black;
}

#deportemenu ul li i{
    text-align:justify;
    margin: .2em;
    color: white;
}

#deportemenu ul li:hover{
   background-color:brown;
}

p.profe{ font-weight: 600;
	
}

i.name{ font-weight: 200;
	
}

.texto h2{
    text-decoration: capitalize;
}
/*----------------horarios---------------*/
table {   
  width: 100%; 
  border-collapse: collapse;

}
.table {width: 100%;
 margin: auto;
background-color: firebrick;
color: white;
text-align: center;
padding: .5em 0 .5em 0;}
/* Zebra striping */
tr:nth-of-type(odd) { 
  background: #a5a5a5; 
}
.num {text-align: center;}
tr { 
  background: #9d9d9d; 
  color: #efefef; 
  font-weight: bold; 
}
td, th { font-weight: 400;
  padding: 6px; 
  border: 1px solid white; 
  text-align: left; 

}

iframe { width: 100%; 
height: 27em;
}



/*deportes*/

.tab {
    cursor: pointer;
    background-color: black;
	margin: 0.1em;
	padding: 0em;
}

.tabtitulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
   
}

.flechadeportes {
    color: white;
    font-size: 1.2rem;
    padding-left: 1rem;
    padding-right: 1rem;
    transform: rotate(90deg);
    line-height: 0;
}

.girar {
    transform: rotate(-90deg);
    padding-bottom: .5rem;
}

.tabtitulo h2 {
    font-size: 1rem;
    
    color: white;
    text-transform: uppercase;
    padding-left: .5rem;
    transition: all 0.3s ease;

    &:hover {
        cursor: pointer;
    }
}

.content-block {
    padding: .5rem;
    display: none;
    background-color: white;
    border-radius: 0 0 .3rem .3rem;
}

.content-block p {
    color: #111111;
}

.upperbold {
    font-weight: bold;
    text-transform: uppercase;
}

.categoriadeportes {
    margin-bottom: 1rem;
}

.categoriadeportes h4 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-transform: uppercase;
    margin-bottom: .1rem;
}

.categoriadeportes h4:before {
    display: block;
    content: "";
    background-color: firebrick;
    height: 1rem;
    width: 3px;
    margin-right: .2rem;
}




/*----------------historia.html---------------*/

img#Saenzpe{
    max-width: 100%;
    border-radius: 100em;
    display: block;
     box-shadow: 0 .35em .5em rgba(0, 0, 0, .35);
    
}

#historia h1{
    margin:0;
    margin-bottom: .5em;
    font-size: 1.5em;
    text-align: center;
}

/*-----------contacto.html----------*/


.contacto iframe{
    width:90%;
    height: 100;
    margin-left:5vw;
    
}
.contacto h1{
    margin:0;
    margin-bottom: .5em;
    font-size: 1.5em;
    text-align: center;
}

div#datosclub{ font-size: 1em;
    font-family: 'Open Sans', sans-serif;
    
    color: black;
    margin:1.5em;
}




/*---------------------------------------seccionsocio----------*/

.msoc{
    background-color: rgba(199, 10, 10, 0.83);
  
}

/*----------------socioform----------------*/

#entrar{
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    text-align: center;
    margin:3em;
}


#log h2{
    font-size: 1.3em;
    font-weight: 500;
    margin-bottom: .5em;
    
     font-weight: 500;
   
    
}

#log input{
    padding:1em;
    border-radius: 2em;
   
    
    border-style: solid;
    border-color: black;
    text-align: center;
}

#entrarb { 
    margin-top: 1em;
    background-color: black;
    padding: .5em; 
    border-radius: 8em;
 
}

#entrarb a{
    color:white;
    text-decoration: none; 
    font-weight: 600;
    text-align: center
}

#registro a{
    color:white;
   
}

#registro p{
    margin-bottom: .2em;
    margin-top:1.5em;
}
#registro h4{
   margin:0;
}

/*----------------socioformderegistro----------------*/

#formregistro{
    display: flex;
    flex-direction: column;
    justify-content: fle;
   
    text-align: center;

}

#formregistro h1{
    margin-bottom:0;
}

#formregistro p{
    margin:0;
}
#regsoc{
   
    margin-bottom: 2em;
}

 #regsoc h2{
    font-size: 1em;
    font-weight: 600;
    margin-bottom: .5em;
     
     
   
    
}
#regsoc input{
    padding:1em;
    border-radius: 2em;
   
    
    border-style: solid;
    border-color: black;
    text-align: center;

}

#regis{
    margin-top: 2em;
    margin-left: 5em;
    margin-right: 5em;
    
    padding: .5em;
    border-radius: 20em;
    background-color: black;
    
}

#regis a{
    text-decoration: none;
    color:white;
    font-weight: 600;
}

#formregistrook{
    margin: 2em;
}

#formregistrook h1{
    text-align: center;
    
}

#check{
    text-align: center;

}
#check i{
	font-size: 200px;
	
}

#verificar{
    line-height: 1.5em;

}


#regis{
    text-align: center;
    margin-top: 3em;
}


/*----------------menusocio----------------*/


#hsoc{
    background-color:black;
}

#menusocio ul{
    display:flex;
    justify-content: space-around;
    margin-top: .5em;
    padding: 0; 
}

li#socc{
    padding: .7em;
    border-radius: 100%;
    background-color: black;
   
}

.boton{
	 padding: .7em;
    border-radius: 100%;
    background-color: #842222;
}

#menusocio ul li i{
    text-align:justify;
    margin: .2em;
    color: white;
}

#menusocio ul li:hover{
   background-color:brown;
}


/*-----------principalsocio----------*/

#perfilmain img{
  width: 70%;
  border-radius: 20em;
 }

#perfilmain {
    display: flex;
    flex-direction: column;
     
    margin-top: 2em;
    margin-bottom: 2em;
    align-items: center;    
}

#bienvenido{
    text-align: center;
    font-size: 1em;
    margin:0;
}

/*----------------socioperfil----------------*/

#perfil img{
    border-radius: 20em;
    width: 8em;
    margin: .5em;
    }

#perfil {
    display: flex;
    flex-direction: column;
     
    margin-top: .5em;
    margin-bottom: 1em;
    align-items: center;
    
}

li{
    color:black;
    
}
#infoperfil {
    margin: 1em;
    line-height: 1.5em;
}

#infoperfil span{
    font-weight: 700 
}


#infoperfil h2{
    margin-bottom:.5em;
    font-size: .5em;
    font-size: 1.2em;

}

#datospersonales ul{
    background-color: rgba(255, 255, 255, 0.90);
    padding: .5em;
    
}

#datosdecuenta h2{
    margin-top: 1em;
    margin-bottom:.5em;
}
#datosdecuenta ul{
    background-color: rgba(255, 255, 255, 0.90);
    padding: .5em;
}

#infodepagos h2{
    margin-top: 1em;
    margin-bottom:.5em;
}

#infodepagos ul{
    background-color: rgba(255, 255, 255, 0.90);
    padding: .5em;
}

#editar {
    margin-top: 1em;
    margin-bottom: 1em;
    width: 6em;
    background-color: black;
    padding: .5em;
    border-radius: 8em;
    
    display:flex;
    justify-content: center;
}

#editar a{
    color:white;
    text-decoration: none; 
    font-weight: 400;
}


#form{
   margin: 1em;    
}

#form ul li{
    line-height: 1.5em;
    margin-top: .5em;
    margin-bottom: .5em;
   
}

#form h2{
    font-size: 1.2em;
}
#form span{
    font-weight: 700;
}

#form input{
   padding: .5em;
   border-radius: 3em;
   font-weight: 300;
   border-style: solid;
   width:11em;

}

/*----------------sociopagos----------------*/

#datosdeplan{
    background-color: rgba(255, 255, 255, 0.90);
}

#infopagos {
    margin: 1em;
    line-height: 1.5em;
}

#infopagos h2{
    margin-bottom:.5em;
    font-size: 1.2em;
}

#infopagos span {
    font-weight: 700;
}

#infopagos ul{
    padding: .5em;
}

#infopagos h2{
     margin-bottom: .5em;
     margin-top: 1em;
}


.infocuota{
    display: flex;
    justify-content: space-between;
    font-weight: 700;
   
    background-color: black;
    padding: .5em; 
    margin-bottom: .2em;
}

.infocuota li{
    color:white;
}


.cuotas{
    display: flex;
    justify-content: space-between;
    margin-top: .2em;
    margin-bottom: .2em;
   
    background-color: rgba(255, 255, 255, 0.90);
  
}

/*----------------socioactividades----------------*/
#misactividades {
    margin: 1em;
    line-height: 1.5em;
}

#inscripta span {
    font-weight: 700;
}

#misactividades ul{
    padding: .5em;
    background-color: rgba(255, 255, 255, 0.90);
}
#misactividades h2{
     margin-bottom: .5em;
     margin-top: 1em;
     font-size: 1.2em;
}

#misactividades p{
    font-size: .9em;
    margin-bottom: 1em

}

#actividades {
    display:flex;
    flex-direction: column;
    background-color: rgba(255, 255, 255, 0.90);
    padding: .5em;
}

#actividades label{
    margin-bottom: .5em;
    margin-top: .5em;   
}

#actividades button{
    margin-top: 2em;
    margin-bottom: 1em;
    width: 8em;
    background-color: black;
    color: white;
    padding: 1em;
    border-radius: 80em;
    
}

#actividades button:hover{
    background-color: brown;
}
#actividades a{
    color: white;
    font-size: 1.2em;
    text-decoration: none;
}

/*----------------socioalquileres----------------*/

#alquileres {
    margin: 1em;
    line-height: 1.5em;
}


#alquileres h1{
     margin-bottom: .5em;
     margin-top: 1em;
}

#alquileres p{
    font-size: .9em;
    margin-bottom: 1em
}

#alquilerform {
    display:flex;
    flex-direction: column;
    background-color: rgba(255, 255, 255, 0.90);
    padding: .5em;
    
}

#alquilerform label{ 
    margin-top: .5em;
}

#alquilerform input, select{
    margin-bottom: .5em;
    margin-top: .5em;
    border-radius: .5em;
    height: 2em;
    font-size: 1em;
    font-weight: 200;
   
    
}

#alquilerform button{
    margin-top: 2em;
    margin-bottom: 1em;
    width: 8em;
    background-color: black;
    color: white;
    padding: 1em;
    border-radius: 80em;
}

#alquilerform button:hover{
    background-color: brown;
}
#alquilerform a{
    color: white;
    font-size: 1.2em;
    text-decoration: none;
}

























/*------------------"mediaqueries" ----------------*/



/*-----------560px de ancho--------------*/



@media (min-width: 560px) {
    #sociomain main{
        max-width: 50rem;
        margin: 0 auto;
    }
    
    /* se ocultan los "botones" que
    muestran o esconden el menu */
    #menu-toggle,
    #menu-toggle:checked + #llamamenu,
    #menu-toggle:not(:checked) + #llamamenu,
    #menu-toggle:checked + #llamamenu + #ocultamenu,
    #menu-toggle:not(checked) + #llamamenu + #ocultamenu {
        display: none;
    }
    
    /* se muestran el menu horizontal */
    #menu-toggle:not(:checked) + #llamamenu + #ocultamenu + ul,
    #menu-toggle:checked + #llamamenu + #ocultamenu + ul {
        display: flex;
        flex-wrap: nowrap;
        background: none;
        flex-basis: 25%;

        
        /* para que el menú vuelva al "fondo" */
        position: relative;
        top: auto;
        left: auto;
        height: auto;
        width: 100%;
        padding-top: 0;
        font-size: .85em;
        flex-wrap: nowrap;
    }
    #menuicono{
        width: 5em;
    }
   
    .socios{
        top: auto;
        bottom: 1em;
        right: 1em;
        left: auto;
    }
    #menu{
        position: fixed;
        min-height: 60vh;
        min-width: 30vw;
        margin-right: 1em;
    }
    #menu .active{
        right: 0vw;
    }
    #videos > main{
        min-width: 50rem;
        margin: 0 auto;
    }
    #perfilmain img{
        width: 15em;
    }
    #infoperfil, #infopagos, #misactividades, #alquileres, #registrook, #formregistrook {
        max-width: 50rem;
        margin: 0 auto;
    }
    img#Saenzpe{
        margin: 0 auto;
    }
      .noticiasgral{
        display: flex;
        flex-direction: row;
          flex-wrap: wrap;
    }
    .noticias{
        margin: .5em;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
	
#logo{
    max-width:20%;
    height: auto;

    }
#menuicono {
    width:3%;
   
	
		}

}

}



/*---------640px de ancho--------*/
@media (min-width: 640px) {
    #menu-toggle:not(:checked) + #llamamenu + #ocultamenu + ul,
    #menu-toggle:checked + #llamamenu + #ocultamenu + ul {
        font-size: .99em;
    }
    #menu{
        position: fixed;
        min-height: 60vh;
        min-width: 30vw;
        margin-right: 1em;
    }
    #menu .active{
        right: 0vw;
    }
	
	
.videoresponsive{
	position: relative;
	
	padding-bottom: 56.25%;
}
 .videoresponsive iframe{
	position:absolute;
	height: 100%;
	width: 100%;
	top: 0px;
	left: 0px;
}
	#logo{
    max-width:20%;
    height: auto;

    }
	#menuicono {
    width:3%;
   
	
		}

}

    
}


/*----------------780px de ancho----------------*/

@media (min-width: 780px) {
    #menu-toggle:not(:checked) + #llamamenu + #ocultamenu + ul,
    #menu-toggle:checked + #llamamenu + #ocultamenu + ul {
        display: flex;
        flex-wrap: nowrap;
    }
    #menu{
        position: fixed;
        min-height: 60vh;
        min-width: 30vw;
        margin-right: 1em;
    }
    #menu .active{
        right: 0vw;
    }
    .noticiasgral{
        display: flex;
        flex-direction: row;
          flex-wrap: nowrap;
    }
	

#logo{
    max-width:20%;
    height: auto;

    }
#menuicono {
    width:3%;
   
	
		}

}


	
}
    


/*-------------1000px de ancho----------------------*/


@media (min-width: 1000px) {
    body{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    #menu{
        position: fixed;
        min-height: 60vh;
        min-width: 20vw;
        margin-right: 1em;
    }
    #menu .active{
        right: 0vw;
		
    }
	#logo{
    max-width:20%;
    height: auto;

    }

#menuicono {
    width:3%;
   
	
		}

}