* {
    margin: 0em;
    padding: 0em;
    box-sizing: border-box;
    font-family: 'Lato', sans-serif;
    list-style: none;
}

header {
    display: flex;
    background-color: rgba(37, 188, 137, 0.96);
    padding: 1em;
}

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

#logo {
    display: block;
    width: 5em;
}

#llamamenu {
    background-color: transparent;
    background-image: url(../imagenes/hamburguesa.svg);
    border: none;
    outline: none;
    color: white;
    cursor: pointer;
    height: 2em;
    width: 2em;
    z-index: 9999;
    /* caja flexible */
    display: flex;
    /* centrado en la horizontal */
    justify-content:flex-end;
    /* centrado en la vertical */
    align-items:flex-end;
    margin-left: 2em;
}

header button {
    display: flex;
    right: 4%;
}


/* menu desplegable */

header nav {
    background-color: rgba(37, 188, 137, 0.96);
    color: white;
    position: absolute;
    right: -50vw;
    top: 0;
    height: 100vh;
    min-width: 50vw;
    transition: all .3s ease;
    z-index: 9998;
}

/*header nav:target,*/
.menuvisible {
    right: 0;
    transition: all .6s ease;
}

.usuario {
    margin: auto;
    text-align: center;
    font-size: 75%;
    padding: 3em 1em 1em 1em;
    border-bottom: solid 1px rgba(255,255,255,.25);
    margin-top: 1em;
}
.usuario img {
    width: 25vmin;
    height: 25vmin;
    max-width: 15em;
    max-height: 15em;
}

.antonella {
    border-radius: 50%;
    width: 100%;
}

header a img {
    width: 100%;
    padding-left: 0em;
    padding-right: 0em;
}

.botoncamiseta {
    width: 50px;
    height: 50px;
}

header nav a {
    color: rgba(255,255,255,.75);
    display: block;
    padding: .5em 1em;
    text-align: center;
    text-decoration: none;
}

header nav a:hover {
    color: white;
}

header h2 {
 display: flex;
 justify-content: center;
    font-weight: lighter;
   padding-left: 0.5em;
    color: #f8fff0;
}

.header {
    display: flex;
    align-items: center;
}


body{
    background-color: #f8fff0;
}

main section h1 {
    text-align: center;
}

main section h3 {
    text-align: center;
    font-size: 90%;
    font-weight: lighter;
}

main section h2 {
    text-align: center;
    font-size: 110%;
    color: #5cc3a0;
    margin-bottom: 0.5em;
    border-bottom-style: solid;
}

.galeria1 {
    padding-bottom: 0em;
    margin: 1em;
    max-width: 75em;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

figure a {
    display: flex;
    position: absolute;
    padding: 0.2em;
} 
 

main section {
    margin: 2em;
}

main section p {
 font-size: 80%;
    font-weight: lighter;
    margin: 1em;
    margin-bottom: 0;
}

main section img {
    display: block;
    align-items: center;
    width: 100%;
}
a {
    text-decoration: none;
}

.boton {
    background-color: #25bc89;
    color: white;
   list-style: none;
    padding: 0.5em;
    border-radius: 5px;
    width: 100%;
    text-align: center;
    border-style: none;
}

.boton1 {
    background-color: #25bc89;
    color: white;
   list-style: none;
    padding: 0.5em;
    border-radius: 5px;
    width: 80%;
    display: block;
    margin: auto;
    text-align: center;
    border-style: none;
}

main section li a {
    color: white;
}

.baila {
    display: flex;
    justify-content: center;
}

.titulos {
    text-align: left;
    font-weight: bold;
    padding-bottom: 0.5em;
    padding-top: 0.5em;
    padding-left: 1em;
}

.iconos {
    margin: 0.5em;
    list-style: none;
    background-color: #ddf5bf;
    border-radius: 5px;
    display: flex;
    align-items: flex-end;
}

.mesumo {
    color: black;
}

.imagen {
    width: 10%;
    padding: 0.1em;
}

.votacion {
    list-style: none;
    background-color: rgba(255, 255, 255, 0.29);
    margin: 0.5em;
    border-radius: 5px;
}

.negrita {
    font-weight: bold;
}

footer {
    background-color: rgba(37, 188, 137, 0.96);
    display: flex;
    justify-content: center;
   padding: 0.5em;
    color: white;
    align-items: center;
    width: 100%;
    bottom: 0;
}

.footer {
    bottom: 0;
    position: absolute;
    width: 100%;
}

footer img {
    height: 12%;
    width: 12%;
    margin-left: 1em;
}

#mapa {
    width: 100%;
    margin: auto;
   
}

div iframe {
    width: 100%;
    
}

.centrado {
    margin: 1em;
    text-align: center;
    padding: 0.8em;;
    background-color: beige;
}


.formulario {
    display: block;
    margin: auto;
    margin-top: 1em;
    width: 70%;
    margin-bottom: 1em;
}

.quecosa {
    
     display: block;
    margin: auto;
    margin-top: 1em;
    width: 70%;
    margin-bottom: 1em;
}

.formulario1 {
     display: block;
    margin: auto;
    margin-top: 1em;
    width: 70%;
    margin-bottom: 1em;
}

main section input {
    margin: 0.5em;
    padding: 0.5em;
    border-radius: 5px;
    text-align: center;
    color: gray;
}

main div li {
    padding: 0.5em;
}

.que-deportes {
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 0.5em;
    margin-top: 1.5em;
}

main div li input {
    margin-left: 0.5em;
}

.asociate {
   background-color: #25bc89;
    color: white;
   list-style: none;
    padding: 0.5em;
    border-radius: 5px;
    width: 100%;
    display: block;
    text-align: center;
}

.chiquita {
    font-size: 80%;
}

.button {
    background-color: #25bc89;
    color: white;
   list-style: none;
    padding: 0.5em;
    border-radius: 5px;
    width: 50%;
    text-align: center;
    border-style: none;
    display: block;
    margin: auto;
    margin-bottom: 1em;
    margin-top: 1em;
}

    .contenedorgaleriacompleta{
        margin: 5%;
    }
    .contenedorgaleria{
        margin: auto;
        display: flex;
        flex-wrap:wrap;
        list-style: none;
    }
    .galeria{
        width: 50%;
        display: block;
        margin: auto;
    }
    .textogaleria{
        text-align: center;
        color: #25bc89;
        padding: 1em;
        border-bottom:  #25bc89 solid;
        padding-bottom: 0.2em;
        font-size: 1.2em;
    }

.textogaleria2{
        text-align: center;
        color: #4a8bb4;
        padding: 1em;
        border-bottom: none;
        padding-bottom: 0.2em;
        font-size: 1.2em;
        font-size: 1em;
    }

* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 800px;
  position: relative;
  margin: auto;
    margin-top: 2em;
}

.imagenslide{
    display: block;
    margin: auto;

}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color:#25bc89;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  display: flex;
  align-content: center;
  color:#25bc89 ;
  font-size: 15px;
  padding: 8px 12px;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color:#25bc89;
   
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
   right: 390px; 
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}


.p{
   color:white;
    font-weight: bolder;
    font-size: 1em;
   padding: 1em;
}
.section{
        margin: auto;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
.sumar{
    font-weight: bolder;
    color:#25bc89;
    font-size: 2em;
}
/* [THE ENTIRE TAB] */
.tab {
  position: relative;
  max-width: 600px;
    width: 300px;
    display: block;
    margin: auto;
    margin-top: 0.3em;
    margin-bottom: 0.3em;
    text-align: left;
}
.tab2 {
  position: relative;
  max-width: 400px;
    width: 200px;
    display: block;
    margin: auto;
    margin-top: 0.3em;
    margin-bottom: 0.3em;
    text-align: left;
}
/* [THE LABEL] */
.tab input {
  display: none;
}
.label1 {display: block;
  background:grey ;
  color: #f8fff0;
  font-weight: bold;
  padding: 10px;
  cursor: pointer;
}
.label0{
  display: block;
  background: #25bc89;
  color: #f8fff0;
  font-weight: bold;
  padding: 10px;
  cursor: pointer;
}



.tab label::after {
  content: "\25b6";
  position: absolute;
  right: 10px;
  top: 10px;
  display: block;
  transition: all 0.4s;
}
.tab input[type=checkbox]:checked + label::after,
.tab input[type=radio]:checked + label::after {
  transform: rotate(90deg);
}

/* [THE CONTENTS] */
.tab-content {
  overflow: hidden;
  background: #f8fff0;
  /* CSS animation will not work with auto height */
  /* This is why we use max-height */
  transition: max-height 0.4s; 
  max-height: 0;
}
.cerrado {
  overflow: hidden;
  background: #f8fff0;
  /* CSS animation will not work with auto height */
  /* This is why we use max-height */
  transition: max-height 0.4s; 
  max-height: 0;
}

.tab-content p {
  margin: 20px;
}
.tab input:checked ~ .tab-content {
  /* Set the max-height to a large number */
  /* Or 100% viewport height */
  max-height: 100vh;
}
.tab input:checked ~ .cerrado {
  /* Set the max-height to a large number */
  /* Or 100% viewport height */
  max-height: 0;
}
.titulocalendario {
      text-align: center;
    font-size: 110%;
    color: #5cc3a0;
    margin-bottom: 0.5em;
    border-bottom-style: solid;
    margin-top: 2em;
    margin-bottom: 1em;
}

#marginbottom {
    margin-bottom: 2em;
}

.subcalendario {
    margin: 0.5em;
}

.alinear {
        margin-bottom: 1em;
        text-align: center;
    }
.fondito1 {
background-color: rgba(161, 240, 182, 0.31);
    padding-bottom: 1.2em;
    border-radius: 10px;
}

.fondito2 {
background-color: rgba(161, 240, 182, 0.31);
    padding-bottom: 1.2em;
    border-radius: 10px;
}

.forminicio {
    background-color: rgba(139, 235, 221, 0.45);
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    margin: 1em;
    border-radius: 10px;
}

.mesumo {
    display: flex;
    flex-direction: row;
    margin: 1em;
    margin-bottom: em;
    background-color: 
    
}

#atras {
    margin: 0em;
    margin-top: 0.2em;
}

.votaste {
    font-size: 1.5em;
    text-align: center;
    color: #4a8bb4;
    margin: 0.5em;
}

.destacar {
    color: #4a8bb4;
    font-weight: bold;
}

.verde {
    font-weight: bold;
    color: #239a72;
    font-size: 120%;
}

.negrita {
    font-weight: bold;
}

.textorecorda {
    text-align: center;
    font-size: 1.2em;
    
}

.tituloformulario {
    text-align: center;
    font-size: 1.2em;
    background-color: rgba(161, 240, 182, 0.31);
    border-radius: 10px;
    padding-top: 0.5em;
    margin-bottom: 1em;
}

.titulopagina {
    text-align: center;
    font-size: 1.2em;
    color: #239a72;
    background-color: rgba(161, 240, 182, 0.31);
    border-radius: 10px;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    margin-top: 0em;
    margin-left: 0em;
    margin-right: 0em;
    margin-bottom: 1em;
}

.corazon {
    width: 20%;
    display: block;
    margin: auto;
}

.fotonene {
    display: block;
    margin: auto;
}

.botonsubir {
    background-color: #25bc89;
    color: white;
    padding: 0.5em;
    margin: 5em;
    border-radius: 5px;
    width: 56%;
    text-align: center;
    display: block;
    margin: auto;
    margin-bottom: 1em;
    border-style: none;
}

.escribitu {
    display: block;
    margin: auto;
    margin-top: 1em;
    width: 70%;
    margin-bottom: 1em;
    border-radius: 5px;
    padding: 0.5em;
}

.foto {
    background-color: rgba(189, 224, 196, 0.51);
    width: 20em;
    height: 20em;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    text-align: center;
}


.medio {
   text-align: center;
}

    .sino {
        justify-content: center;
        align-content: center;
        text-align: center;
}

.cuantos {
        max-width: 3em;
    }

.checkboxfotos {
    display: flex;
    font-size: 0.8em;
    text-align: left;
    background-color: rgba(203, 237, 237, 0.73);
    border-radius: 5px;
    margin-top: 1em;
    padding-bottom: 1em;
    padding-left: 1em;
    margin-bottom: 1em;
}

.actividad {
    margin-left: 1em;
}

.video {
    width: 100%;
}
.parrafo{
    text-align: center;
    margin-bottom: 4em;
    margin-top: 3em;
    padding: 1em;
}

@media (min-width: 35em) {
    
    header nav {
        right: auto;
        top: auto;
        height: auto;
        min-width: auto;
        outline: none;
        position: absolute;
        right: 0;
        background-color: transparent;
    }
    
    header nav a {
        color: #f8fff0;
        font-weight: 400;
    }
    
    header nav ul {
        display: flex;
        
    }
    
    #llamamenu,
    .usuario {
        display: none;
    }
    
    main {
        margin-left: 10%;
        margin-right: 10%;
    }
    
    main section img {
    display: block;
    margin: auto;
    width: 500px;
}
    
   main section h2 {
        margin-left: 10em;
        margin-right: 10em;
        font-size: 1.3em;
    }
    
    main section {
        margin-top: 0.2em;
    }

    
    .boton {
    display: block;
    margin: auto;
     width: 24%;
    margin-top: 1em;
        border-style: none;
        
    }
     
    .button {
    display: block;
    margin: auto;
    width: 30%;
    
    }
    
    footer {
    background-color: rgba(37, 188, 137, 0.96);
    display: flex;
    justify-content: center;
    font-size: 1.5em;
}

footer img {
    height:50px;
    width: 50px;
}
    
  
    
    .asociate {
        display: block;
    margin: auto;
     width: 30%;
    }
    
    main section p {
        font-size: 1em;
        margin-left: 12em;
        margin-right: 12em;
    }
    
    main section h3 {
        font-size: 1.2em;
    }
    
    .centrado {
        display: block;
        margin: auto;
        margin-top: 1em;
        width: 50%;
    }
    

    
    .titulos {
    text-align: center;
    font-weight: bold;
    padding-bottom: 0.5em;
    padding-top: 0.5em;
}
    .banner{
    object-fit: cover;
      width: 70%;
      height: 200px;
    }
    


.galeria{ width: 20%;
        align-items: center;}
    
    .section{
        margin: auto;
        max-width: 2000px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
.p{
   color:white;
    font-weight: bolder;
    font-size: 2em;
    padding: 1em;
}

.titulocalendario {
    margin-left: 10em;
        margin-right: 10em;
        font-size: 1.3em;
}


    .flex {
        display: flex;
        flex-direction: row;
        margin: 2em;
        align-content: center;
        align-items: flex-start;
        margin-top: 0em;
    }
    
    .parrafo-responsive {
        margin-left: 1em;
        margin-right: 1em;
    }
    
    .fondito1 {
        max-width: 500px;
        max-height: 500px;
    }
    
    .forminicio {
  display: block;
        margin: auto;
        max-width: 400px;
        margin-bottom: 1em;
        padding-bottom: 0.5em;
}
    .fondito2 {
        display: block;
        margin: auto;
        max-width: 500px;
    }
    
    .textogaleria {
        max-width: 1000px;
        display: block;
        margin: auto;
    }

    .boton1 {
        width: 300px;
    }
    
    h1 {
        margin-top: 1em;
    }
    
    .titulopagina {
        max-width: 800px;
        display: block;
        margin: auto;
        margin-top: 1em;
        margin-bottom: 1em;
    }
    
    .formflex {
        display: flex;
        align-items: center;
        flex-direction: row;
        width: 750px;
        margin-right: 200px;
        margin-left: 150px;
    }
    
    .formulario1 {
        text-align: right;
        margin-left: 2em;
        margin-right: 0.5em;
    }
    
      .formulario {
    display: flex;
    margin: auto;
    margin-top: 1em;
    margin-bottom: 1em;
    max-width: 300px;
    text-align: left;
    margin-left: 0.5em;
    margin-right: 1em;
} 
    
    main section form div {
        display: block;
        margin: auto;
    }
    
    .tituloformulario {
        display: block;
        margin: auto;
        margin-top: 1em;
        margin-bottom: 1em;
        max-width: 700px;
        font-size: 1em;
    }
    
    .cuantos {
        max-width: 4em;
    }
    
  .sinoflex {
        display: flex;
        justify-content: center;
    }
    
    .sino {
        margin: 0.5em;
    }
    
    .quecosa {
    display: block;
    margin: auto;
    margin-top: 1em;
    width: 20%;
    margin-bottom: 1em;
    }
    
    .fotonene {
        width: 20%;
    }
    
    .textorecorda {
        font-size: 95%;
    }
    
    .votaste {
        margin-top: 1em;
    }
    
    .text {
        display: block;
        margin: auto;
    }
    
    .text img {
        width: 40px;
    }
    
    .escribitu {
    width: 20%;
}
    
    .botonsubir {
        width: 15%;
    }
    
    .gana {
        display: block;
        margin: auto;
        max-width: 500px;
    }
    
    .checkboxfotos {
   font-size: 1em;
    display: flex;
    justify-content: center;
    width: 500px;
    margin-left: 300px;
        padding: 0em;
}

.actividad {
  
}
    
.video{ 
    width: 500px;
    height: 250px;
    
    }
    
    }