/* Fuentes a utilizar */ 
@import url('https://fonts.googleapis.com/css2?family=Gentium+Plus&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@1,400;1,600;1,700&family=Gentium+Plus&display=swap'); 


*{
    background-color: #F2DDBB ;
    color: #755238;
    margin:0%;
 
    }
    
  .titulo{
     font-family: 'Crimson Text', serif;
     font-size:	40px;
     text-align: center; 
     color:	#755238;
     background-color:	#F2DDBB;
     text-decoration: underline; 

    }

  .cabecera{
     width: 100vw;
     min-height:2.5vh;
     background-color:#755238	;
     color:#F2DDBB	;
     position: fixed;
     top: 0vh;
     text-align: center;
     z-index: 150;
    }
    
 .botonera{
    width: 100%;
    margin:auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /* background-color: transparent; */
    }
  
.ingresar{
      background-color: transparent;
     }
  
.volver{
         background-color: transparent;
     }
    
 .pie{
     width:	100vw;
     height:3vh ;
     background-color:#755238	;
     color:	#D2B48C;
     position: fixed;
     bottom:0%;
    text-align: center;
    }

  .contenido{
    width: 90vw;
    margin: auto;
    padding-top: 10vh;
    display: flex;
    flex-direction: column; 
}
    
  .seccion{
    width: 100%	;
    min-height:	80vh;
    padding: 0%	;
    }
    
    .last-name{
      /* Centramos el contenido de la sección y determinamos el color de fondo */
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      background-color: rgb(36, 35, 35);
      background-size: .2em 100%;
      font: 10.5em/1 Open Sans, Impact;   
      margin-top: 10%;
      
 }
 
 .text {
   /* Establecemos las características del texto */
   fill: none;
   stroke-width: 6;
   stroke-linejoin: round;
   stroke-dasharray: 70 330;
   stroke-dashoffset: 0;
    /* Establecemos la animación */
   -webkit-animation: stroke 6s infinite linear;
   animation: stroke 6s infinite linear;
   font-family: 'Times New Roman';
 }
 
 .text:nth-child(5n + 1) {
   stroke: #755238;
   -webkit-animation-delay: -1.2s;
   animation-delay: -1.2s;
 }
 .text:nth-child(5n + 2) {
   stroke: #804b2e;
   -webkit-animation-delay: -2.4s;
   animation-delay: -2.4s;
 }
 
 .text:nth-child(5n + 3) {
   stroke: #D7A86E;
   -webkit-animation-delay: -3.6s;
   animation-delay: -3.6s;
 }
 
 .text:nth-child(5n + 4) {
   stroke: #3C2317;
   -webkit-animation-delay: -4.8s;
   animation-delay: -4.8s;
 }
 
 .text:nth-child(5n + 5) {
   stroke: #be9155;
   -webkit-animation-delay: -6s;
   animation-delay: -6s;
 }
 
 @-webkit-keyframes stroke {
   100% {
     stroke-dashoffset: -400;
   }
 }
 
 @keyframes stroke {
   100% {
     stroke-dashoffset: -400;
   }
 }
 
 .text:nth-child(5n + 1) {
   stroke: #755238;
   -webkit-animation-delay: -1.2s;
   animation-delay: -1.2s;
 }
 .text:nth-child(5n + 2) {
   stroke: #804b2e;
   -webkit-animation-delay: -2.4s;
   animation-delay: -2.4s;
 }
 
 .text:nth-child(5n + 3) {
   stroke: #D7A86E;
   -webkit-animation-delay: -3.6s;
   animation-delay: -3.6s;
 }
 
 .text:nth-child(5n + 4) {
   stroke: #3C2317;
   -webkit-animation-delay: -4.8s;
   animation-delay: -4.8s;
 }
 
 .text:nth-child(5n + 5) {
   stroke: #be9155;
   -webkit-animation-delay: -6s;
   animation-delay: -6s;
 }
 
 @-webkit-keyframes stroke {
   100% {
     stroke-dashoffset: -400;
   }
 }
 
 @keyframes stroke {
   100% {
     stroke-dashoffset: -400;
   }
 }
    
  .preguntas{
    background-color: #755238;
    width: 100%;
    }

   .preguntas img{
     width: 100%;
   }
    
  .illia{
    background-color:	#755238;
    }
    
 .preferencias{
    background-color:	#755238;
    }
    
  .futuro{
    background-color: #755238;
    margin-bottom: 5vh;
    }
    
    .collage_v,.collage_h{
      display: none;
      width: 90%;
      margin: auto;
  
  }
  .collage_v img{
      width: 100%
  }
  .collage_h img{
      width:100%
  }
  
  @media(orientation:landscape){
      .collage_h{
          display: block;
      }
  }
  @media (orientation:portrait){
      .collage_v{
    display: block;
      }
    
  
  }
  
  .fotop{
    width: 50%;
  }