@import url(https://fonts.googleapis.com);
@import url(https://fonts.gstatic.com);
@import url(https://fonts.googleapis.com/css2?family=Quicksand&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Ms+Madi&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Sacramento&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Fascinate&family=Sacramento&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Rubik+Moonrocks&display=swap);
/*@import url(https://fonts.googleapis.com/css2?family=Titillium+Web&display=swap); font-family: 'Titillium Web', sans-serif;*/


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


/*Estilo de la página*/
body{
    font-family: 'Quicksand', sans-serif;
    background-color: #ffd2c2;
}

p{
    font-size: 1vmax;
}


/*header*/
.encabezado{
    display: flex;
    justify-content: center;
    position: fixed;
    padding: 1vh;
    width: 100%;
    top: 0;
    margin-bottom: 1vh;
    font-size: 1vmax;
    font-family: 'Bebas Neue', cursive;
    text-transform: uppercase;
    background-color: #ffd2c2;
}


/*Cuerpo de la página*/
.contenido{
    display: flex;
    flex-direction: row;
    padding-top: 6vh;
    padding-bottom: 1vh;
}


/*menu*/
.navbar{
    width: 15%;
    background-color: #f7bd01;
}

.botonera{
    position: fixed;
    margin: 3vh 2vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.bot{
    margin-top: 2vh;
    margin-bottom: 2vh;
}

a{
    text-decoration: none;
    color: black;
    font-family: 'Bebas Neue', cursive;
    font-size: 2vmax;
}


/*Secciones*/
.contenido{
    display: flex;
    flex-direction: row;
    padding-top: 6vh;
    padding-bottom: 1vh;
}

.landing-page{
    width: 85%;
    align-self: flex-end;
}

.divisiones{
    display: flex;
    flex-direction: column;
}

.seccion{
    width: 100%;
    height: 95vh;
    padding: 0;
}


/*Presentación*/
.presentacion{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f91866;
}

.titulo{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: 'Sacramento', cursive;
    font-size: 10vmax;
}

.titulo span {
    animation: animate 5s linear infinite;
    -webkit-animation: animate 5s linear infinite;
}

.titulo span:nth-child(1) {animation-delay: 0s;}

.titulo span:nth-child(2) {animation-delay: 0.15s;}

.titulo span:nth-child(3) {animation-delay: 0.3s;}
  
.titulo span:nth-child(4) {animation-delay: 0.45s;}
  
.titulo span:nth-child(5) {animation-delay: 1s;}
  
.titulo span:nth-child(6) {animation-delay: 1.15s;}
  
.titulo span:nth-child(7) {animation-delay: 1.3s;}
  
.titulo span:nth-child(8) {animation-delay: 1.45s;}

.titulo span:nth-child(9) {animation-delay: 2s;}

.titulo span:nth-child(10) {animation-delay: 2.15s;}

.titulo span:nth-child(11) {animation-delay: 2.3s;}

.titulo span:nth-child(12) {animation-delay: 2.45s;}

.titulo span:nth-child(13) {animation-delay: 3s;}
  
@keyframes animate {0%, 100% {
        color: #ffd2c2;
        filter: blur(2px);
        -webkit-filter: blur(2px);
        text-shadow: 0 0 10px #f7bd01, 0 0 20px #f7bd01, 0 0 40px #f7bd01, 0 0 80px #f7bd01, 0 0 120px #f7bd01, 0 0 200px #f7bd01, 0 0 300px #f7bd01, 0 0 400px #f7bd01;
    } 25%, 75% {
        color: #000;
        filter: blur(0px);
        -webkit-filter: blur(0px);
        text-shadow: none;
    } 
}


/*Conociendome*/
.preguntas{
    padding-top: 3vh;
    padding-bottom: 3vh;
    background-color: #00414f;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: space-between;
}

.padre_titulo_preguntas{
    width: 100%;
    height: 10vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #3ae4b3;
}

.titulo_preguntas{
    font-family: 'Fascinate', 'Sacramento', cursive;
    font-size: 3vmax;
    color: #3ae4b3;
    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, -2px 2px 0 #000, 2px 2px 0 #000, 1px 1px #000, 2px 2px #000, 3px 3px #000, 4px 4px #000, 5px 5px #000, 6px 6px #000, 7px 7px #000, 8px 8px #000, 9px 9px #000;
}

.titulo_preguntas:hover{
    transform: scaleX(3);
    transform: scaleY(0,2);
    color: #f91866;
    text-shadow: -1px 0 #ffd2c2, 0 1px #ffd2c2, 1px 0 #ffd2c2, 0 -1px #ffd2c2, -2px 2px 0 #ffd2c2, 2px 2px 0 #ffd2c2, 1px 1px #ffd2c2, 2px 2px #ffd2c2, 3px 3px #ffd2c2, 4px 4px #ffd2c2, 5px 5px #ffd2c2, 6px 6px #ffd2c2, 7px 7px #ffd2c2, 8px 8px #ffd2c2, 9px 9px #ffd2c2;
}

.parent{
    width: 85%;
    height: 85%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-column-gap: 2vh;
    grid-row-gap: 2vh;
}

.cell{
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.2vh solid #ffd2c2;
    border-radius: 1vh;
    box-shadow: 10px 5px 5px black;
    background-color: #3ae4b3;
}

.inicial{
    font-size: 1.5vmax;
    text-align: center;
    font-family: 'Rubik Moonrocks', cursive;
}

.final{
    display: none;
    font-size: 1vmax;
    text-align: center;
    font-family: 'Rubik Moonrocks', cursive;
}

.cell:hover{
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
    background-color: #f91866;
    cursor: pointer;
}

.cell:hover .inicial{
    display: none;
    cursor: pointer;
}

.cell:hover .final{
    display: block;
    cursor: pointer;
}


/*Paso por el Illia*/
.illia{
    padding-top: 3vh;
    padding-bottom: 3vh;
    background-color: #F21B07;
}

.padre_titulo_illia{
    padding-top: 3vh;
    padding-bottom: 3vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: space-between;
    background-color: #277357;
}

.titulo_illia{
    font-family: 'Fascinate', 'Sacramento', cursive;
    font-size: 5vmin;
    color: #277357;
    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, -2px 2px 0 #000, 2px 2px 0 #000, 1px 1px #000, 2px 2px #000, 3px 3px #000, 4px 4px #000, 5px 5px #000, 6px 6px #000, 7px 7px #000, 8px 8px #000, 9px 9px #000;
}


.contenedor_galeria{
    width: 100%;
    display: flex;
    padding-bottom: 3vh;
    padding-top: 3vh;
}

.slide {
    cursor: pointer;
    height: 75vmin;
    flex: 1;
    margin: 1vh;
    border-radius: 2vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    transition: .5s;
}

.slide.active {
    flex: 20;
}
  


/*Amor/Odio*/
.preferencias{
    background-color: #1b8bb1;
}


/*Viendo al futuro*/
.futuro{
    padding-top: 3vh;
    padding-bottom: 3vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    align-self: center;
    justify-content: space-between;
    background-color: #a12373;
}

.padre_titulo_futuro{
    width: 100%;
    padding-top: 3vh;
    padding-bottom: 3vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: space-between;
    background-color: #d561ff;

}

.titulo_futuro{
    font-family: 'Fascinate', 'Sacramento', cursive;
    font-size: 5vmin;
    color: #d561ff;
    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, -2px 2px 0 #000, 2px 2px 0 #000, 1px 1px #000, 2px 2px #000, 3px 3px #000, 4px 4px #000, 5px 5px #000, 6px 6px #000, 7px 7px #000, 8px 8px #000, 9px 9px #000;
}

.contenedor_collage{
    width: 70%;
    padding-top: 3vh;
    padding-bottom: 3vh;
    margin: auto;
}

.collage_v, .collage_h{
    display: none;
    width: 100%;
    margin: auto;
  /*   position: relative; */
}

.collage_v img{
    width: 100%;
}

.collage_h img{
    width: 100%;
}

@media (orientation:landscape){
    .collage_h{
        display: block;
    }
}

@media (orientation:portrait){
    .collage_v{
        display: block;
    }
}


/*Pie de página*/

.footer{
    display: flex;
    justify-content: center;
    padding: 1vh;
    width: 100%;
    margin-top: 1vh;
    background-color: #ffd2c2;
    font-family: 'Bebas Neue', cursive;
    text-transform: uppercase;
    font-size: 1vmax;
    bottom: 0;
    position: fixed;
}