@charset "utf-8";

* {
    font-family: 'Montserrat', sans-serif;
    list-style: none;
    text-decoration: none;
    box-sizing: border-box;
    margin: 0pt;
    padding: 0pt;
}

ul { list-style: none; }

header {
    background-color: #191818;
    padding: 1em;
}
header > ul {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

#logonombre {
    display: flex;
    color: #FDFB72;
    font-size: 1em;
    align-items: center;
    justify-content: space-between;
    width: 10em;
}
#logonombre p {
    padding: 0;
    font-size: 0.9em;
    font-weight: 600;
}
#nombreclub {
     padding: 0;
    font-size: 0.9em;
    font-weight: 600;
}
header ul li a{
    color: #f0f0f0;
    text-decoration: none;
    display: flex;
    align-items: center;
    font-weight: 600;
}
header nav {
    background-color: #191818;
    color: #f0f0f0;
    position: fixed;
    right: -50vw;
    top: 0;
    height: 100vh;
    width: 45vw;
    transition: all .5s ease;
    z-index: 999;  
    transition: all .5s ease;
    padding-top: 0.8em;
}
header nav:target {
    right: 0;

}
  
#botonsociomenu {
    background-color: yellow;
    color: black;
    text-align: center;
    font-size: 1em;
    font-weight: 600;
    padding-top:15px 40px 15px 40px;
   
    justify-content: center;
    margin: 1em 1em 1.5em 1em;
}
#botonsociomenu a {
    color: #f0f0f0;
    
}
header nav a {
    color: #f0f0f0;
    display: block;
    padding: 0.7em 1em;
    text-decoration: none;
    font-size: 0.9em;
    font-weight: 500;
    letter-spacing: 0.04em;
}
header nav a:hover {
    color: red;    
}
#x {
    padding-left: 13.5em;
    margin-bottom: 2em;
}
.atras i{
    margin-right: 1em;
}
#iconright{
    margin-left: 0.8em;
}


.container {
  position:relative;
    width:100%; 
    height: 100%;
    margin: auto;
}


.mySlides {
  display: none;
}



.cursor {
  cursor: pointer;
}


.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}


.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}


.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}



.caption-container {
  text-align: center;
  background-color: #222;
  padding: 2px 16px;
  color: white;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}


.column {
  float: left;
  width: 16.66%;
}


.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}
.contregistrarse{
    font-family: 'Montserrat', sans-serif;
    text-transform: capitalize;
    background-color: #494949;
    display: flex;
    justify-content: space-between;
    letter-spacing: .1em;
    margin: 1em;
    padding: .8em;
    height: 7.2em;
    }
.flecha{
    width: 10px;
}


/* Footer */
#pie{
    background-color: #333;
    padding: 3%;  
}
.creditos{
    width: 60%;
    text-align: center;
    font-size: 12px;
    color:white;
   margin-left: 20%;
}

/* Iconos del footer */
.redes{  display: flex;
    max-width: 100%;
    font-size: 25px;
  justify-content: center;
    align-items: center;}

    .fab {
      color: white;
      padding: 5px;
    }




/* Noticias del INDEX */
    .noticias {
    width: 90%;
    padding-bottom: 2em;
    max-width: 75em;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

}

.noticias h3 {
    width: 100%;
    padding: 1em;
    text-align: center;
    margin-top: 3em;
}

.noticias figure {
    width: 45vmin;
    margin: 1em;
    position: relative;
    overflow: hidden;
}

.noticias img {
    display: block;
}

.noticias figcaption {
    background-color: rgba(0,0,0,.5);
    color: white;
    padding: .5em;
    line-height: 1em;
    position: absolute;
    height: 100%;
    top: calc(100% - 3em);
    transition: all .5s ease;
    
}

.noticias figure:hover figcaption {
    background-color: rgba(0,0,0,.5);
    top: 35%;
    transition: all .5s ease;
    padding: 1em;
}

.noticias figcaption span {
    display: block;
    font-size: .68em;
    line-height: 1.4em;
    color: #ddd;
}

.noticias a{
  color: white;
  text-decoration: none;
}



/* Video INDEX */
.video {
  margin-right: auto;
  margin-left: auto;
  width: 65%;
}
    

/* PANTALLA DE INICIO */

    
    .inicio{
      margin-right: auto;
      margin-left: auto;
      align-items: center;
    }

    .inicio img{
      width: 30%;
      margin-left: 30%;
      margin-bottom: 40px;
    }

    .inicio h1{
      margin-top: 40px;
      text-align: center;
    }

  .inicio a{
    display:flex;
    justify-content: center;
    text-align: center;
    background-color: black;
    color:yellow;
    font-size: 2em;
    padding:2%;

      }

      /* PANTALLA DE INICIO */
      .historia{
        width: 100%;
        height: 100%;
        }

        .historia img{
          width: 100%;
        }

        .historia h2{
          padding: 3%;
          margin-top: 2%;
          margin-bottom: 3%;
        }

        .historia p{
          padding: 3%;
          font-size: 18px;
        }



/* CONTACTO */  

.contacto iframe{
    width: 50vw;
    height: auto;
    margin-left: 25vw;
    margin-top: 1em;
    margin-bottom: 3em;
}
.contacto h4{
    font-weight: 200;
    font-size: .9em;
    text-align: center;
    margin-top: 1.5em;
    margin-bottom: 1em;
    
}

.contacto label{
    
    font-size: .8em;
    margin-bottom: 1em;
    
}
.oblig{
     color:red;
    font-size: .8em;
    text-align: center;
}
.dir{
  
    font-size: .8em;
    margin: .5em;
    text-align: center;
    
}
.textarea{
    width: 50%;
    height:10em;

}
.contacto .boton{
    background-color:yellow;
    padding:1%;}

    .form{

     text-align: center;
     margin-bottom: 2em;

    }

    .contacto h2 {
      text-align: center;
      margin-top: 2em;
    }

  
/* Deportes */

.cuerpo {
    background-color: white;
    
}
.conoce{
    text-align: center;
    margin-left: auto;
    margin-right: auto;

}

.logogimnacia {

margin-left: auto;
    margin-right: auto;
    width:150px; height:150px;
    padding-top:15px;
padding-bottom:15px;
padding-left:40px;
padding-right:40px;
    background-size: cover;
 background-position: center;
 border: none;
 transition: all 0.5s;
 cursor: pointer;
 cursor: pointer;
padding: 15px;
    display: block;
    
}

.titulodeporte {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.deportes1{
    display: block;
     border: 5px solid black;
    margin-left:50px;
    margin-right: 50px;
  height: 100%;
    background-color: yellow;
    position: relative;
    overflow: hidden;
    
}
/* gimancia */

.containergim {
    position:relative;
    box-shadow: 0 0 5px #ccc;
    border: 5px solid #fff;
    background: #fff;
}


.mySlides {
  display: none;
}



.cursor {
  cursor: pointer;
}


.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}


.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}


.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}


.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
    padding: 20px;
}


.caption-container {
  text-align: center;
  background-color: red;
  padding: 2px 16px;
  color: white;
    font-weight:600;
font-size:15px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}


.column {
  float: left;
  width: 16.66%;
}


.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}
.contregistrarse{
    text-transform: capitalize;
    background-color: red;
    display: flex;
    justify-content: space-between;
    letter-spacing: .1em;
    border-radius: .2em;
    margin: 1em;
    padding: .8em;
    height: 7.2em;
    }
.flecha{
    width: 10px;
}
.gimnasia {
   font-weight: 100;
font-weight: 700;
    color: yellow;
    text-align: center;
    display: flex;
    justify-content: center;
    background-color: #333;
    margin: .5em 0em;
    padding: .5em
}
 
    
.hoy {
    width: 80%;
    margin-left: auto;
     margin-right: auto;
    padding: 0;
    margin-bottom: 60px;
    justify-content: center;
}
.cuerpo{
    background-color:white;
}
.objetivos{
     
     margin-right: 2em;
}
.objetivo{
    display: flex;
    color: red;
}
.actividades{
    display: flex;
    color: red;
}

.gimhoy {
    
}
hr {
  height: 7px;
  background-color: red;
}
.contactanos {
    text-decoration:none;
font-weight:600;
font-size:15px;
color:black;
padding-top:10px;
padding-bottom:10px;
padding-left:50px;
padding-right:50px;
background-color:yellow;
}

.registrarte {
   text-decoration:none;
    text-align: center;
    padding-top:10px;
padding-bottom:10px;
padding-left:40px;
padding-right:40px;
    margin-left: auto;
    margin-right: auto;
    background-color:red;
    color:white;
    margin: 2em;
    padding: 1em;
    width: 30%;

}
  
.galeria {
    display: flex;
     width:80%;
    min-height: 400px;
    margin-left: auto;
    margin-right: auto;
}


.secuencia {
    width: 100%;
}

.objetivoactividad{
    background-color: gainsboro;
    margin-left: 25px;
    margin-right: 25px;
    padding-top:10px;
padding-bottom:10px;
padding-left:40px;
padding-right:40px;
}

.videogim{
    display: flex;
    justify-content: center;
    margin-right: auto;
  margin-left: auto;
    width: 65%;
}

.titulovideo{
    display: flex;
    justify-content: center;
   text-align: center;
}

/* futsal */


.inicio {
    position:relative;
    box-shadow: 0 0 5px #ccc;
    border: 5px solid #fff;
    background: #fff;

}

.galeriafutsal {
    display: flex;
     width:80%;
    min-height: 400px;
    margin-left: auto;
    margin-right: auto;
}

.formarparte{
    background-color: gainsboro;
    margin-left: 25px;
    margin-right: 25px;
    padding-top:10px;
padding-bottom:10px;
padding-left:40px;
padding-right:40px;
}
.queres{
    display: flex;
    color: red;
}
.hr1{
    height: 3px;
  background-color: black;
}
.videofutsal{
    
    display: flex;
    justify-content: center;
   text-align: center;

}


/* natacion */

.natacion{
   width: 100px; height: 100px; 
}

.beneficios {
    display: block;
    border:  5px solid yellow;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 100px;
}

ol {
list-style-type: none;
counter-reset: lista-personalizada;
margin: 20px;
}

ol li {
position: relative;
font-weight: bold;
font-size: 20px;
line-height: 30px;
padding: 4px 0 10px 50px;
margin-bottom: 10px;
background:#f5f5f5;
}

ol li:before {
content: counter(lista-personalizada);
counter-increment: lista-personalizada;
position: absolute;
left: 0;
top: 0;
font-weight: bold;
font-size: 40px;
padding: 8px 8px 8px 5px;
color: red;
height: 45px;
}

.leyendo {
    display: block;
   text-decoration:none;
    text-align: center;
    padding-top:10px;
padding-bottom:10px;
padding-left:10px;
padding-right:10px;
    margin-left: auto;
    margin-right: auto;
    background-color: yellow;
    color:black;
    margin: 2em;
    padding: 1em;
}

.listado {
    list-style: circle;
font-weight: bolder;
}

.hr2{
     height: 5px;
  margin-left: 20%;
  margin-right: 20%;
  background-color: yellow;
}

.registrartenatacion {
 
   text-decoration:none;
    text-align: center;
    padding-top:10px;
padding-bottom:10px;
padding-left:40px;
padding-right:40px;
  
    background-color:red;
    color:white;
    margin: 2em;
    padding: 1em;
    width: 30%;
      margin-left: 50px;
    margin-right: 40px;
}

/* 
----------------------------------------

INSCRIPCIÓN DEPORTES

----------------------------------------
*/


.inscripcionafutsal {
    font-family: 'Montserrat', sans-serif; 
    font-weight: 100;
    text-align: center;
    display: flex;
    justify-content: center;
    background-color: #333;
    margin: .5em 0em;
    padding: .5em
}
.spaninscripciona { 
color:white;
}
.spandeporte {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color:yellow;
    margin: 0em 0.3em ;    
}


.nombreyapellido {
    font-family: 'Montserrat', sans-serif; 
    font-weight: 400;
    color: gray;
    background-color:yellow;
    border-color: gray;
    border-width: .1em;
    border-radius: 1em;
    padding: .7em;
    margin: .5em;
}

.edad {
    font-family: 'Montserrat', sans-serif; 
    font-weight: 400;
    color: grey;
    background-color:yellow;
    border-color: grey;
    border-width: .1em;
    border-radius: 1em;
    padding: .5em;
    margin: .5em;
}
.sexos{
    font-family: 'Montserrat', sans-serif; 
    font-weight: 400;
    font-size: 15px;
    background: yellow;
    color: grey;
    text-align:left;
    border-width: .1em;
    border-radius: 1em;
    
    padding: .5em;
    margin: .5em;   
}
.sexofemenino {
    position: relative;
    top:-2.2em;
    left:15em;
    
}
.sexomasculino {
    position: relative;
    top:-2.2em;
    left:15em;
    
}
.division {
    font-family: 'Montserrat', sans-serif; 
    font-weight: 400;
    color: grey;
    background-color:yellow;
    border-color: grey;
    border-width: .1em;
    border-radius: 1em;
    padding: .6em;
    margin: .5em;

    
}
.buttonenviar {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    background-color: black;
    color: white;
    border-width: .1em;
    border-radius: 1em;
    padding: 0.7em;
    margin: 1.5em .5em .5em .5em;
    
}

.datosincripcion {
    background-color: white;
    opacity: .9;
    border-radius: 1em ;
    padding: .5em;
    display:flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    width: 50%;
    margin:auto}
    

/* 
----------------------------------------

ANOTARSE

----------------------------------------
*/    

.spanfelicitaciones {
    font-family: 'Montserrat', sans-serif; 
    font-weight: 900;
    color: black;
    display: flex;
    justify-content: center;
}
.yaestasinscripto{
    padding: .1em;
   font-family: 'Montserrat', sans-serif; 
    font-weight:700;
    color: black;
    display: flex;
    justify-content: center;    
}
.imagenanotarse {
    display: flex;
    margin: auto;
    width: 60%;
    padding: 1em;}

.volverainicio { 
    font-family: 'Montserrat', sans-serif;
    text-decoration: none;
    font-weight: 700;
    background-color: #333;
    color:yellow;

    display:flex;
    justify-content: center;
    margin: 1.5em .5em .5em .5em;
    position: relative;
    top: -1em;
}
.inicio { 
list-style: none;}


/* 
----------------------------------------

NOTICIAS

----------------------------------------
*/

.imagennoticia1 {
    width: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
    padding: 1em;
    
}
.titulosnoticias { 
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 20pt;
    background-color: black;
    color:yellow;
    padding: 1em;
    text-align: center;
    margin: auto;
    display: flex;
    justify-content: center;
    margin: auto;
    position: relative;
    top:-3em;
    margin: .5em .5em .5em .5em;
}
.textonoticias { 
    font-family: 'Montserrat', sans-serif;
    font-weight: 100;
    font-size: 10pt;
    display: flex;
    flex-direction:column;
    margin: 1em 1em 1em 1em;
    background-color: yellow;
    padding: 3em;
    position: relative;
    top: -4em
}
  


---------------------------------------
/* lo que sube jona*/
---------------------------------------
-------------------------------------------
/*css de formulario para hacerse socio*/
-------------------------------------------

body { 
    background-size:auto;}
    

.inscripcionafutsal {
    font-family: 'Roboto', sans-serif; 
    font-weight: 100;
    text-align: center;
    display: flex;
    justify-content: center;
    background-color: black;    
}
.spaninscripciona { 
color:white;
}
.spanfustal {
    font-weight: 700;
    color:yellow;
    margin: 0em 0.3em ;    
}


.nombreyapellido {
    font-family: 'Roboto', sans-serif; 
    font-weight: 400;
    color: gray;
    background-color:yellow;
    border-color: gray;
    border-width: .1em;
    border-radius: 1em;
    padding: .5em;
    margin: .5em;
}

.edad {
    font-family: 'Roboto', sans-serif; 
    font-weight: 400;
    color: gray;
    background-color:yellow;
    border-color: grey;
    border-width: .1em;
    border-radius: 1em;
    padding: .5em;
    margin: .5em;
}
.sexos{
    font-family: 'Roboto', sans-serif; 
    font-weight: 400;
    font-size: 15px;
    background: yellow;
    color: gray;
    text-align:left;
    border-width: .1em;
    border-radius: 1em;
    padding: .5em;
    margin: .5em;   
}
.sexofemenino {
    position: relative;
    top:-2.5em;
    left:15em;
}
.sexomasculino {
    position: relative;
    top:-2.5em;
    left:15em;
}
.division {
    font-family: 'Roboto', sans-serif; 
    font-weight: 400;
    color: gray;
    background-color:yellow;
    border-color: grey;
    border-width: .1em;
    border-radius: 1em;
    padding: .6em;
    margin: .5em;

    
}
.buttonenviar { 
    font-weight: 700;
    background-color: black;
    color:white;
    border-width: .1em;
    border-radius: 1em;
    padding: 0.7em;
    margin: 1.5em 0.5em 0em 0.5em;
    
}

.datosincripcion {
    background-color: white;
    opacity: .9;
    border-radius: 1em ;
    padding: .5em;
    display:flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    width: 50%;
    margin: auto}
    
-------------------------------------
/*css para confirmación de socio*/
-------------------------------------

.inscripcionafutsal {
    font-family: 'Roboto', sans-serif; 
    font-weight: 100;
    text-align: center;
    display: flex;
    justify-content: center;
    background-color: black;    
}
.spaninscripciona { 
color:white;
}
.spanfustal {
    font-weight: 700;
    color:yellow;
    margin: 0em 0.3em ;    
}
.spanfelicitaciones2 {
    padding:.4em;
    font-size:2em;
    font-family: 'Roboto', sans-serif; 
    font-weight: 7700;
    color: red;
    display: flex;
    justify-content: center;
}
.yaestasinscripto2 {
    font-size:1.5em;
    padding: .1em;
    font-family: 'Roboto', sans-serif; 
    font-weight:7700;
    color: black;
    display: flex;
    justify-content: center;    
}

.escudomediano{
    display: flex;
    justify-content: center;
    margin: auto;
    height: 9cm;
    width:auto;


}

.volverainicio2 { 
   font-family: 'Montserrat', sans-serif;
    text-decoration: none;
    font-weight: 700;
    background-color: #333;
    color:yellow;

    display:flex;
    justify-content: center;
    margin: 1.5em .5em .5em .5em;
    position: relative;
    top: -1em;
}
.inicio { list-style: none;}  

-----------------------------------
/*css para el login*/
-----------------------------------

#fondo{ 
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    font-family: "oswald", sanes-serif;
    color: white;
  }



#central {display: flex;
justify-content: space-around;
align-items: center;
width: 70%;    
margin-left: auto;
margin-right: auto;
margin-top: 10%;
background-color: yellow;
padding: 1em;    
}



#mensaje { display: block;
text-align: left;
margin-left:-5rem;  
font-size: 20px;    
}

#mensaje h1 {font-size: 2em;
}

#botones {margin-top: 1rem;
          display: flex;
          justify-content: space-between;
          width: 450px;}



 #central {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 70%;
    height: 80%;
    margin-bottom: 2em;
    margin-top:1em;;}
    
    #mensaje {text-align: center;
    font-size: .8em;
    margin-left: 0;
    font-size: 12px;
    }
    
    #botones {display: flex;
    flex-direction: column;
    align-items: center;}
    
    
    
.sociosunite {
    text-decoration:none;
    text-align: center;
    padding-top:10px;
padding-bottom:10px;
padding-left:40px;
padding-right:40px;
    margin-left: auto;
    margin-right: auto;
    background-color:red;
    color:white;
    margin: 2em;
    padding: 1em;
    width: 30%;
}
  
.bienvenidos{
    text-align: center;
    color: red;
}
    
----------------------------------
/*css para torneo-eventos*/
----------------------------------
.estreno{

    
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


#cuerpotorneo{
    flex-grow: 1;
    
    display: flex;
    
    flex-direction: column;
}

.finalsection{
display: flex;
    justify-content: center;
    align-content: center;
    font-size: 1em;
    margin: auto;
    text-align: center;
    padding: 1em;
    background-color: yellow;

}

.primertexto{
    display: flex;
    text-align: center;
    justify-content: center;
    font-size: 1.5em;
    margin: auto;
    padding: 0.2em;
    font-style: italic;
    background-color: yellow;

}

.peuno{
    display: flex;
    justify-content: center;
    align-content: center;
    font-size: 0.9em;
    margin: auto;
    text-align: center;
    padding: 1em;
    background-color: yellow;

}

.bxslider  li{
    
    display: flex;
    align-content: center;
    justify-content: center;
    background-color: yellow;
    }

----------------------------------
/*css para galeria*/
----------------------------------

.mano{
    background-color:yellow;

    flex-grow: 1;
    
    display: flex;
    
    flex-direction: column;
}

.galeria {
    padding-bottom: 2em;
    max-width: 75em;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-color:yellow;
    
}

.tituloc{

    justify-content: center;
    padding-bottom: 3em;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-wrap: wrap;
    background-color:yellow;
    font size:2em;
}

.titulod{
    justify-content: center;
    padding-bottom: 1em;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-wrap: wrap;
    background-color:yellow;
    font size:1em;
}




.galeria h3 {
    width: 100%;
    padding: 1em;
}

.galeria figure {
    width: 90vmin;
    margin: .125em;
    position: relative;
    overflow: hidden;
}

.galeria img {
    display: block;
}

.galeria figcaption {
    background-color: rgba(255, 0, 0, 0.38);
    color: white;
    padding: .5em;
    line-height: 1em;
    

    position: absolute;
    height: 100%;

    top: calc(100% - 1.5em);
    transition: all .5s ease;
    
}


.galeria figure:hover figcaption {
    background-color: rgba(255, 0, 0, 0.38);
    top: 50%;
    transition: all .7s ease;
}

.galeria figcaption span {
    display: block;
    font-size: .75em;
    color: #ddd;
}

.masinfo {
    font-size: 1em;
    color: white;
}

.joni{
    background-color: yellow;
}

.imagenesjoni{
    width: 100%;
}

.imagenesjoni1{
    display: flex;
    height: none;
    width: 100%;
}