@import url('normalize.css');
* {
    margin:0;
    padding:0;
}

html{
    font-size: 100%;
}

@media (min-width: 1200px) {
    html {
      font-size: 1.2em;
    }
}

@media (max-width: 600px) {
    html {
      font-size: 1em;
    }
}

body{
    width: 100%;
    margin: auto;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-family: 'Oswald', sans-serif;
}

/*MENU*/

header nav{
    display:block;
    list-style:none;
    overflow:hidden;
    background:#000;
    width: 100%;
    margin: auto;
    
           }

header nav ul li{
    float:left;
    
     }

header nav ul li a{
    float:left;
    margin-left:35px;
    font-size: 12px;
    color:#fffefe;
    font-family: Arial, Helvetica, sans-serif;
    display: block;
    padding:12px;
    text-decoration:none;
}


/*FIN MENU*/

/*TITULARES*/
.titulo{
    display:block;
    margin:auto;
    background:rgb(255, 255, 255);
    width:100%;
}
h1{
    font-size:2em;
    font-family: 'Open Sans Condensed', sans-serif;
    color:#5c5c5c;
    width:80%;
    margin:auto;
    text-align: center;
    padding-top:4px;
    padding-bottom:6px ;
    padding-left: 4px;
} 
/*FIN TITULARES*/

/*TEXTOS*/
.cuadro_texto{
    display:block;
    margin:auto;
    width:80%;
}

h2{
    font-size:1.1em;
    font-family: 'Inter', sans-serif;
    color:rgb(0, 0, 0);
    padding-top:1%;
    margin:auto;   
}
/*FIN TEXTOS*/

/*SUBTITULARES*/

h3{
    font-size:1.7em;
    font-family: 'Open Sans Condensed', sans-serif;
    color:#6e6e6e;
    margin:auto;
    text-align: center;
    padding-top:4px;
    padding-bottom:4px;
    padding-left: 4px;
}
.subtitular{
    display:block;
    background:rgb(255, 255, 255);
    margin:auto;
    width:100%;
    }
/*FIN SUBTITULARES*/

    .foto_principal img{
    display:block;
    width:100%;
    margin:auto;
    }

   .foto_del_index img {
    display:block;
    width:80%;
    margin:auto;      
        }


    .foto_del_index_2 img {
    display:block;
    width:50%;
    margin:auto;      
                }

.foto_relleno{
    width: 80%;
    margin:auto;
}


 .btn{
    display:block;
    width:200px;
    margin:auto;
 }       

/*GENERAL*/

.video {
display: block;
background:#666;
margin:auto;
width:70%;
}

.video_vertical video{
    display: block;
    background:rgb(218, 51, 51);
    margin:auto;
    width:30%;
    
    }

.contacto{
    display:block;
    background: rgb(19, 121, 189);
    margin:auto;
    padding:2%;
    width:100%;
}

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

.iconos{
    display:inline-block;
    padding:10px;
    width:30px;
    margin:10px;
}

.txt_contacto {
    font-size:1.0em;
    font-family: Arial, Helvetica, sans-serif;
    color:rgb(255, 255, 255);
    width:80%;
    padding-top:1%;
    margin:auto;  
}




/*GALERIAS DE FOTOS*/

.linea{
background:black;
height:5px;
width:100%;
display:block;
}    

.trescientossesenta{
    display:block;
    width:80%;
    margin:auto;
    align:center;
}


.columnas{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
    width:90%;
    margin: auto;
    grid-gap:10px;
    padding:40px 0;
    overflow:hidden;
}

.servicios {
    font-size:1.1em;
    font-family:Arial, Helvetica, sans-serif;
    display:block;
    position: relative;
    margin:auto;
    width:30%;
}

.servicio img{
    width:100%;
    vertical-align:top;
   /* height:100px;*/
    object-fit:cover;
    transition:transform 0.5s;
}

.galeria{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px,1fr));
    width:80%;
    margin: auto;
    grid-gap:10px;
    padding:40px 0;
    overflow:hidden;
}

.galeria a{
    display: block;
    position:relative;
    overflow:hidden;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 5);
}

.galeria img{
    width:100%;
    vertical-align:top;
    height:300px;
    object-fit:cover;
    transition:transform 0.5s;
}

.galeria a:hover img{
    transform:rotate(10deg) scale(1.3);
}

.columnas_personajes{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
    width:100%;
    margin: auto;
    grid-gap:10px;
    padding:40px 0;
    overflow:hidden;
}

.personaje img{
    width:100%;
    vertical-align:top;
   /* height:100px;*/
    object-fit:cover;
    transition:transform 0.5s;
}

.light-box{
position:fixed;
top:0;
left: 0;
background: rgba(0, 0, 0,.5);
transition: transform .3s ease-in-out;
width: 100%;
height:100vh;
z-index:1000;
display:flex;
justify-content:center;
align-items: center;
transform: scale(0);
}

.light-box img{
width:65vw;
/*max-height: 80vh;
*/
}

.light-box:target {
transform: scale(1);
}

.close{
display:block;
position: absolute;
top:40px;
right:40px;
background:rgba(255, 5, 5, 0.5);
color: rgba(255, 255, 255, 0.5);
text-decoration:none;
width:40px;
height:40px;
text-align:center;
line-height:40px;
border-radius:50%;
}

.next{
    display:block;
    background:rgba(255, 5, 5, 0.5);
    color: rgba(255, 255, 255, 0.5);
    height:40px;
    width:40px;
    line-height:40px;
    text-decoration:none;
    text-align:center;
}

.model-viewer{
    display:block;
    background:rgba(255, 5, 5, 0.5);
    color: rgba(255, 255, 255, 0.5);
    height:40px;
    width:40px;
    line-height:40px;
    text-decoration:none;
    text-align:center;
}