html{
   overflow-x: hidden;
  scroll-behavior: smooth;
}

body{
  background-image:url("https://i0.wp.com/hyperallergic-newspack.s3.amazonaws.com/uploads/2017/09/Twardowicz-81.027.007.jpg?resize=720%2C910&quality=100&ssl=1");
  background-repeat:repeat-y;
  background-size:100vw;
}

section{
  height: 130vh;
}

#pf{
  background-color: #e9311a;
  text-align: center;
  position: absolute;
  left:30%; 
  width:25%;
  top: 10%; 
  padding: 0.5vw;
  }

#paso{
  background-color: #ed6335;
  text-align: center;
  position: absolute;
  left:30%; 
  width:25%;
  top: 20%;  
  padding: 0.5vw;
}

#ft{
  background-color: #ecae7d;
  text-align: center;
  position: absolute;
  left:30%; 
  width:25%;
  top: 30%;  
  padding: 0.5vw;
}

#rm{
  background-color: #8db4ad;
  text-align: center;
  position: absolute;
  left:30%;  
  width:25%;
  top: 40%;
  padding: 0.5vw;
}

#gl{
  background-color: #026c80;
  text-align: center;
  position: absolute;
  left:30%; 
  width:25%;
  top: 50%; 
  padding: 0.5vw;
}

#volvercurso{
  background-color: #064c72;
  text-align: center;
  position: absolute;
  left:30%; 
  width:25%;
  top: 60%;  
  padding: 0.5vw;
}

#volver{
  position:fixed;
  left:75vw;
  bottom:33.5vw;
  background-color:#bfbfbf;
  border-radius: 30vw;
  margin:15vh;
  padding:0.5;
  width:10%;
  z-index:2;
}

.boton{
  font-size: 2vw;
 text-align: center; 
  border-style: none;
  border-radius: 30vw;
  margin:15vh;
  transition: 1s;
  font-family: 'Abril Fatface', cursive;
 
}
.boton:hover{
 transform: scale(1.1);
  font-size: 2.6vw; 
  
  
/*  transition: 1s;*/
  
}
a{
  text-decoration:none;
  color:white;
}

ul{
  font-family: 'Zen Old Mincho', serif;
  font-size:4vh;
  margin-left:2vw;
}

#p1{
  margin-top: 5vw;
  margin-right: 30vw;
  margin-left:2vw;
  font-family: 'Zen Old Mincho', serif;
  font-size:4vh;
  text-align: justify;
}
#p2{
  margin-top: 5vw;
 font-family: 'Zen Old Mincho', serif;
}
#p3{
  margin-top: -3vw;
  margin-left:50.5vw;
  margin-right:3.5vw;
  margin-bottom:3vw;
  font-family: 'Zen Old Mincho', serif; 
  position:absolute;
  font-size:3.5vh;
  text-align: justify;
  line-height: 1.4;
}
#p3b{
  margin-top: 7vw;
  margin-bottom:3vw;
  margin-left:50.5vw;
  margin-right:3.5vw;
  font-family: 'Zen Old Mincho', serif; 
  position:absolute;
  font-size:3.5vh;
  text-align: justify;
   line-height: 1.4;
}
#p4{
  margin-top: 5vw;
  font-family: 'Zen Old Mincho', serif;
}
#p5{
  margin-top: 5vw;
  font-family: 'Zen Old Mincho', serif;
}

#renata{
  font-family: 'Shrikhand', cursive;
  position:absolute;
  left:28.5vw;
  font-size:12vh;
  top:-2vw;
}
#tituloperfil{
  font-family: 'Shrikhand', cursive;
  font-size:10vh;
  position:relative;
  top:2vw;
  left:8vw;
}
#titulopaso{
  font-family: 'Shrikhand', cursive;
  font-size:10vh;
  position:relative;
  top:2vw;
  left:8vw;
}
#titulofuturo{
  font-family: 'Shrikhand', cursive;
  font-size:10vh;
  position:relative;
  top:2vw;
  left:5vw;
}
#tituloplaylist{
  font-family: 'Shrikhand', cursive;
  font-size:10vh;
  position:relative;
  top:2vw;
  left:8vw;
}
#titulogaleria{
  font-family: 'Shrikhand', cursive;
  font-size:10vh;
  position:relative;
  top:2vw;
  left:8vw;
}

#yo{
  position: absolute;
  width: 23%;
  left:71%;
  padding:0.5vw;
  z-index:-1;
}
#aero{
  position: absolute;
  width: auto;
  height: 73%;
  left:3%;
  margin-top:-2vw;
  padding:0.5vw;
  z-index:-1;
}

div#carousel { 
  perspective: 1200px;  
  padding-top: 3%;
  padding-left: 3%;
  font-size:0; 
  margin-bottom: 3rem; 
  overflow: hidden; 
}
figure#spinner { 
  transform-style: preserve-3d; 
  height: 100vh; 
  transform-origin: 50% 50% -500px; 
  transition: 1s; 
} 
figure#spinner img { 
  width: 40%; max-width: 425px; 
  position: absolute; left: 30%;
  transform-origin: 50% 50% -500px;
  outline:1px solid transparent;
}
figure#spinner img:nth-child(1) { transform:rotateY(0deg); 
}
figure#spinner img:nth-child(2) { transform: rotateY(-45deg); }
figure#spinner img:nth-child(3) { transform: rotateY(-90deg); }
figure#spinner img:nth-child(4) { transform: rotateY(-135deg); }
figure#spinner img:nth-child(5){ transform: rotateY(-180deg); }
figure#spinner img:nth-child(6){ transform: rotateY(-225deg); }
figure#spinner img:nth-child(7){ transform: rotateY(-270deg); }
figure#spinner img:nth-child(8){ transform: rotateY(-315deg); }
div#carousel ~ span { 
  color: #fff; 
  margin: 5%; 
  display: inline-block; 
  text-decoration: none; 
  font-size: 7vw; 
  transition: 0.6s color; 
  position: relative; 
  margin-top: -80vh; 
  border-bottom: none; 
  line-height: 0; }
div#carousel ~ span:hover { color: #888; cursor: pointer; }

div#carousel2 { 
  perspective: 1200px;  
  padding-top: 3%;
  padding-left: 3%;
  font-size:0; 
  margin-bottom: 3rem; 
  overflow: hidden; 
}
figure#spinner2 { 
  transform-style: preserve-3d; 
  height: 100vh; 
  transform-origin: 50% 50% -500px; 
  transition: 1s; 
} 
figure#spinner2 img { 
  width: 40%; max-width: 425px; 
  position: absolute; left: 30%;
  transform-origin: 50% 50% -500px;
  outline:1px solid transparent;
}
figure#spinner2 img:nth-child(1) { transform:rotateY(0deg); 
}
figure#spinner2 img:nth-child(2) { transform: rotateY(-45deg); }
figure#spinner2 img:nth-child(3) { transform: rotateY(-90deg); }
figure#spinner2 img:nth-child(4) { transform: rotateY(-135deg); }
figure#spinner2 img:nth-child(5){ transform: rotateY(-180deg); }
figure#spinner2 img:nth-child(6){ transform: rotateY(-225deg); }
figure#spinner2 img:nth-child(7){ transform: rotateY(-270deg); }
figure#spinner2 img:nth-child(8){ transform: rotateY(-315deg); }
div#carousel2 ~ span { 
  color: #fff; 
  margin: 5%; 
  display: inline-block; 
  text-decoration: none; 
  font-size: 7vw; 
  transition: 0.6s color; 
  position: relative; 
  margin-top: -80vh; 
  border-bottom: none; 
  line-height: 0; }
div#carousel2 ~ span:hover { color: #888; cursor: pointer; }