/* fuentes importadas*/
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap'); 
@import url('https://fonts.googleapis.com/css2? family= Roboto+Slab & family= Sansita+Swashed:wght@300 & display=swap');
@import url('https://fonts.googleapis.com/css2?family=Arvo&display=swap');

* { 
    background-color: black;
    font-family: 'Roboto Slab', serif; 
    }
    

    .cabecera {
        background-color: #77215d;
        text-align: center;
        color: rosybrown;
        font-size: xx-large;
        margin-bottom: 0.5cm;
        font-family: 'Arvo', serif;
        width: 100%;
        position: fixed;
        top: 0;
        z-index: 100;
    }

    /*secciones general*/
    .seccion{
        width: 100%;
        height: 100vh;
        padding: 0;
        
    }
    .presentacion{ 
        display: flex;
        align-items: center;
        justify-content: center;
        height: 80vh;
    }

    .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: bisque;
        background-size: .2em 100%;
        font: 10.5em/1 Open Sans, Impact;   
   }
   
   .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;
   } 

   .text:nth-child(5n + 1) {
    stroke: #F2385A;
    -webkit-animation-delay: -1.2s;
    animation-delay: -1.2s;
  }
  .text:nth-child(5n + 2) {
    stroke: #c22a44;
    -webkit-animation-delay: -2.4s;
    animation-delay: -2.4s;
  }
  
  .text:nth-child(5n + 3) {
    stroke: #77215d;
    -webkit-animation-delay: -3.6s;
    animation-delay: -3.6s;
  }
  
  .text:nth-child(5n + 4) {
    stroke: #5c2668;
    -webkit-animation-delay: -4.8s;
    animation-delay: -4.8s;
  }
  
  .text:nth-child(5n + 5) {
    stroke: #f36185;
    -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: #F2385A;
    -webkit-animation-delay: -1.2s;
    animation-delay: -1.2s;
  }
  .text:nth-child(5n + 2) {
    stroke: #c22a44;
    -webkit-animation-delay: -2.4s;
    animation-delay: -2.4s;
  }
  
  .text:nth-child(5n + 3) {
    stroke: #77215d;
    -webkit-animation-delay: -3.6s;
    animation-delay: -3.6s;
  }
  
  .text:nth-child(5n + 4) {
    stroke: #5c2668;
    -webkit-animation-delay: -4.8s;
    animation-delay: -4.8s;
  }
  
  .text:nth-child(5n + 5) {
    stroke: #f36185;
    -webkit-animation-delay: -6s;
    animation-delay: -6s;
  }
  
  @-webkit-keyframes stroke {
    100% {
      stroke-dashoffset: -400;
    }
  }
  
  @keyframes stroke {
    100% {
      stroke-dashoffset: -400;
    }
  }
  
  svg {
    position: absolute;
    width: 80%;
  
  }

    .titulo{ 
        /* font-size: 8vmin; */
        text-align: center;
        /* color:#c22a44; */
    }

    /*contenedor principal*/
    .contenido{
        width: 90vw;
        margin: auto;
        padding-top: 10vh;
        display: flex;
        flex-direction: column;
        text-align: center;
    }

    h2{
        color:#c22a44;
    }

    /*cada seccion*/
    .preguntas{
        color: #c22a44;
        width: 100%;
    }

    .derecha{
        text-align: right;
        margin-right: 5%;
        margin-left: 5%;
        padding-right: 5%;
    }

    .derecha::after{
       content: "🐱";
       padding-left: 2%;
       color: #c22a44;
    }

    .izquierda{
        text-align: left;
        margin-left: 5%;
        margin-right: 5%;
        padding-left: 5%;
    }

    .izquierda::before{
        content: "😸";
        padding-right: 2%;
        color: #77215d;
    }

    .respuesta{
        color: #77215d;
    }    

    .illia{
      color: #77215d;
    }

    .container {
      width: 100%;
      display: flex;
      padding: 0 20px;
    }
    
    .slide {
      position: relative;
      cursor: pointer;
      height: 80vh;
      flex: 1;
      margin: 10px;
      border-radius: 20px;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      transition: .5s
    }
    
    .foto1{
      background-image: url(../img/team.jpeg);
    } 
     
    .foto2{
      background-image: url(../img/brava19.jpeg);
    }

    .foto3{
      background-image: url(../img/famiglia.JPG);
    }

    .foto4{
      background-image: url(../img/somimida.jpeg);
    }

    .foto5{
      background-image: url(../img/vida21.jpeg);
    }

    .foto6{
      background-image: url(../img/upddes.jpeg);
    }

    .foto7{
      background-image: url(../img/brava22lu.jpeg);
    }

    .foto8{
      background-image: url(../img/brava22.jpeg);
    }

    .foto9{
      background-image: url(../img/fotoacomp22.JPG);
    }

    .foto10{
      background-image: url(../img/paititi.jpeg);
    }

    .slide > img {
      width: 100%;
      height: 100%;
    }
    
    .slide > h3 {
      position: absolute;
      color: #fff;
      bottom: 10px;
      left: 10px;
      opacity: 0;
      transition: .5s
      
    }
    
    .slide.active {
      flex: 10;
    }
    
    .slide.active > h3{
      opacity: 1
    }

    .preferencias{
      color: #77215d;
      height: fit-content;
    }

.container
{
	width: 100%;
	margin: 0px auto;
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
 
}
.container .box
{
	position: relative;
	width: 300px;
	height: 300px;
	background: black;
	margin: 10px;
	box-sizing: border-box;
	display: inline-block;
}
.container .box .imgBox
{
	position: relative;
	overflow: hidden;
}
.container .box .imgBox img
{
	max-width: 100%;
	transition: transform 2s;
}
.container .box:hover .imgBox img
{
	transform: scale(1.2);
}
.container .box .details
{
	position: absolute;
	top: 10px;
	left: 10px;
	bottom: 10px;
	right: 10px;
	background: transparent;
	transform: scaleY(0);
	transition: transform .5s;
}
.container .box:hover .details
{
	transform: scaleY(1);
}
.container .box .details .content
{
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	text-align: center;
	padding: 15px;
	color: #fff;
}
.container .box .details .content h1
{
	margin: 0;
	padding: 0;
	font-size: 20px;
	color: white;
}
.container .box .details .content p
{
	margin: 10px 0 0;
	padding: 0;
}

@media screen and (max-width: 768px) {
	.container {
		padding: 0;
	}
	.container .box {
	margin: 0;
	}

	}

    .futuro{
      color: #77215d;
    }

    .collage_v, .collage_h{ /*mostrar o no capas según viewport*/
        display: none;
        margin: auto;
        width: 80%;
    }
     
    /*imagenes en capas*/
    .collage_h img{
        width: 100%;
    }

    .collage_v img{
        width: 100%;
    }

    /*mostrar la capa correspondiente*/
    
    /*horizontal*/ 
    @media (orientation:landscape){ /* si es horizontal, hacer visible*/
        .collage_h{
            display: block;
        }
    }

    /*vertical*/
    @media (orientation:portrait){ /* si es vertica, hacer visible*/
        .collage_v{
            display: block;
        }
    }

    .pie{
      font-size: 3vw;
      font-family: 'Arvo', serif;
      width: 100vw;
      position: fixed;
      margin: 0;
      display: flex;
      flex-direction: row;
      bottom: 0vh;
      height: 5vw;
      background-color: #77215d;
      color: rosybrown;
      justify-content: center;
  }

  .cierre{
    background-color: #77215d;
  }

    .iconos{
      background-color: #77215d;
    }

    .iconos img{
      width: 5vw;
      height: 5vw;
      background-color: #77215d;
    }