@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barrio&display=swap');


/*----------GLOBAL RESET----------*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;

}
/*-------------------------MOBILE FIRST-------------------------*/
/*----------COLORES Y ESTILOS----------*/

/* verde:    #6dc0aa;
   violeta:  #534a99;
   amarillo: #fed502;
*/

html{
    
/*  !!! 1rem será 10px (16/100*62,5) !!!*/
  font-size: 1rem; 
  background-color: snow;
}

body{
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size:1.8rem;
    flex-wrap:wrap; 
    margin: 0 1rem;
    margin-left: 1.5rem;
    margin-right: 1.5rem;
}

h1,h2{
    font-family: "Barrio", sans-serif;
    font-size:2rem;
    color:#534a99;
    margin: 1.5rem auto 1.5rem auto;
       

}

.index_h1{
    font-size:4rem;
    color:#6dc0aa;
    margin: auto;
    margin-top: 1.5rem;
    display:block;
    text-align: center;
}

h2{
    margin-top:4rem;
}

h3 {
    padding-bottom: 0.5rem;
}


.boton {
    flex-basis: 100%;
    background-color: #6dc0aa;
    padding: 1rem;
    margin: 1.5rem auto 2rem auto;
    text-align: center;
    box-shadow: -5px 5px 1px #534a99;
    color: white;
    color:#fff;
    text-decoration:none;
    display: block;
}

.formulariodonar { display: block;
    background-color: #fed502;
    margin: 2rem 0rem;
    padding: 0.5rem;

}

.requerido {
    font-size: 1rem;
}

.botondonar { flex-basis: 100%;
    background-color: #6dc0aa;
    padding: 1rem;
    margin: 1.5rem;
    text-align: center; 
    color:#fff;
    text-decoration:none;
    display: block;
}

#tituloformulario { text-align: center;
    margin:auto;
margin-top: 1rem;
    }

/* Header */

#logo a img {
    width: 3.8rem;
    position: relative;
    top: 0.2em;
    left: 0.2em;
}
#iconos-menu div {
    display: inline-block;
    position: relative;
    right: 0.1em;
    top: 0.2em;
}

/* Sobrepuesto */
#sobrepuesto, #calendario {
    height: 100%;
    width: 0;
    position: fixed;
    top: 0;
    right: 0;
    background-color: rgba(83, 74, 153, 0.9);
    color: #fff;
    transition: 0.5s;
    z-index: 1;
}
.cerrar {
    text-align: right;
    font-size: 36px;
}
#sobrepuesto #redes_menu_desplegable img {
    width: 2.5rem;
    margin-right: 0.6rem;
}
#sobrepuesto #redes_menu_desplegable {
    position: fixed;
    bottom: 5px;
    padding-left: 1rem;
    width: 13rem;
}

#sobrepuesto h3 {
    text-transform: uppercase;
}

nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.5rem;
}

nav #sobrepuesto ul li, nav #calendario ul li {
  border-bottom: 1px solid #fed502;
  padding: 1rem;
  list-style-type: none;
}

nav a {
    color: #fff;
    text-decoration: none;
}

#nav_visita{
color: #fed502;
}

#menu_icono img {
    cursor: pointer;
}

.foto{
    
    width:100%;
    height:auto;
}

.formulario{
    background-color:#6dc0aa;
    padding: 2rem 2.5rem 0rem 2.5rem;
    max-width:100%;
    overflow:hidden;
    margin: 1.5rem 0;

}

.formulario input {
    width: 100%;
    padding: 0.7rem;
}



.formulario .boton {
    background-color: #534a99;
    box-shadow: none;
    font-size: 1.8rem;
    font-family: 'Montserrat', sans-serif;
    border: 0;
}

.formulario p { margin-bottom: 1.5rem;

    
}    
    
.icono{
    padding: 1rem;
    max-height:auto;
}

.responsive_iframe{
height: 0;
overflow: hidden;
padding-bottom: 56%;
position: relative;
}

.responsive_iframe iframe {
height: 100%;
left: 0;
top: 0;
position: absolute;
width: 100%;
}

.footer_contenido { 
      flex-basis:100%;
    margin: 2rem auto;
    text-align:center;

}

footer h3{
    font-size:2rem;
    font-weight:700;
    color:#6dc0aa;
    text-transform: uppercase;
    
}

#legales{
    background-color: #6dc0aa;
    color:#fff;
    padding: 1rem;
    font-size: 0.8rem;
}


/*----------POSICIONES----------*/

h1{
   flex-basis:100%;
}



/*----------IMAGENES Y VIDEOS----------*/

header{
    background-image: url(http://diazcortez.com.ar/acumar/museo/jt24/webapp/imagenes/header_fondo_chapas.svg);
    background-repeat: no-repeat;
    background-size: cover;
    
}



#visitas_guiadas figure{
    width: 100%;
}

#visitas_guiadas figure picture img, #visitas_guiadas figure picture source {
    margin-top: 0.3rem;
    margin-bottom: 2rem; 
    display:block;
    max-width: 100%;
    height: auto;
}

#ventana{
    position:relative;
    background-image: url(../imagenes/ventana_principal_celular.png);
    background-size:100% 100%;
    background-repeat: no-repeat;
    height:29.35rem;
    width:100%;
    overflow:hidden;
}

#slider{
    position:relative;
    top:1.25rem;
    left:12.17%;
    width: 76.4%;
    height:90%;
    overflow:hidden;
}

#slider .slide img{
    margin:auto;
    height: auto;
    width: 100%;
    position: relative;
}

#slider .slide{visibility: hidden; position: absolute;
  top: 0; left: 0; animation: 12s autoplay infinite}

@keyframes autoplay {
  0% {visibility: visible}
  33.33% {visibility: hidden}
}

#slider > *:nth-child(1) {animation-delay: 0s}
#slider > *:nth-child(2) {animation-delay: 4s}
#slider > *:nth-child(3) {animation-delay: 8s}


figure{
    position:relative;
    margin-bottom:0.5rem;
    width: 100%;
}

figure picture img{
    position:relative;
    margin-bottom:0.5rem;
    width: 100%;
}

figcaption{
display:flex;
flex-wrap:wrap;
background-color: rgba(83, 74, 153, 0.8);
color:#fff;
position:absolute;
width:100%;
height:7rem;
    bottom:0;
padding:0.5rem 1rem;
    overflow:hidden;
    
}

figure:first-of-type figcaption{
bottom:0;
    height:9rem;
    
}

figure img{
position:relative;
    top:0.5rem;
}

figure:first-of-type figcaption .boton{
    width:auto;
    margin-right:0;
    flex-basis: 100%;
}

figcaption p{
    flex-basis: 14rem;
    margin-bottom:1rem;
}

figcaption .boton{
    display: block;
    margin-right:1rem;
    flex-basis:4rem;
    float:right;
    align-content: center;
    position:relative;
    bottom:0.5rem;

}

#actividades_isla{
    display:flex;
    flex-wrap:wrap;
    justify-content: space-between;
}




.actividad{
    box-sizing: border-box;
    display:flex;
    flex-direction:column;
    justify-content: space-between;
    position:absolute;
    height:0%;
    top:100%;
    left:0;
    right:0;
    bottom:5rem;
    background-color: rgba(83, 74, 153, 0.8);
    color:#fff;
    z-index:999;
    transition: 0.5s;
    overflow: scroll;
    padding:0;

    
}


.actividad div img{
    display:block;
    padding-top:2rem;
    margin:auto;
    max-width:2rem;
}

.actividad p { 
    font-size: 1.3rem;
    }


.imagenes figure{
    width: 100%;
    height: auto;
}

.imagenes figure picture img{
    margin:auto;
    max-width: 100%;
    height: auto;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem; 
}

.videoresponsive_accesos_secundarios video {
    width: 100%;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    
}

.videoresponsive{
    position:relative;
    margin: 0 auto;
    height: 0;
    padding-bottom: 56.25%;
    margin-top: 1.5rem;
}

.videoresponsive iframe{
    position:absolute;
    margin: 0 auto;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
}


#footer_contenido{
    display: flex;
}

/*-------------------------ESTILOS CALENDARIO-------------------------*/
#calendario-tabla {
    width: 100%;
    border: 1px solid #FFFFFF;
    border-collapse: collapse;
    font-family: "Signika", sans-serif;
}
#calendario-tabla th {
    border: 1px solid #FFFFFF;
    font-size: 1.2rem;
    text-align: center;
    text-transform: uppercase;
}
#calendario-tabla td {
    border: 1px solid #FFFFFF;
    padding: 5px;
    vertical-align: top;
}
#calendario-tabla caption {
    font-size: 2rem;
    font-family: "Barrio", sans-serif;
    margin-bottom: 1rem;
}
#calendario-tabla .day {
    text-align: right;
}
#calendario-tabla .evento {
    border: 1px solid white;
    border-radius: 20px;
    padding: 0.1rem;
}

/*-------------------------MEDIA QUERIES DISPOSITIVOS DESDE 800PX DE ANCHO-------------------------*/

@media only screen and (min-width: 800px){
.videoresponsive{
max-width: 65rem;     
    }
figcaption .boton{
        min-height:5rem;
        min-width:5rem;
    }
main, footer{
        max-width: 65rem;
        margin: auto;
    }
    
h1, .index_h1, h2{
        margin: 3rem 0 1rem 0;
    }
    
#actividades_isla figure{
    flex-basis:49%;
}
    
    .boton{max-width: 20rem;}
    .formulariodonar{
    max-width:40rem;
    margin:3rem auto;}
    
#ventana{

    background-image: url(../imagenes/ventana_principal_computadora.png);
    background-size:100% 100%;
    background-repeat: no-repeat;
    height:40rem;
    width:100%;
    overflow:hidden;
}

#slider{
    position:relative;
    top:2rem;
    left:9.5%;
    width: 82%;
    height:89%;
    overflow:hidden;
}    
    
}