@font-face {
  font-family: "Rose";
  src: url(fontsInfinita/RedRose-VariableFont_wght.ttf);
}
@font-face {
	font-family: "Faustina";
	src: url(fontsInfinita/Faustina/Faustina-Italic-VariableFont_wght.ttf);
	scr: url(fontsInfinito/Faustina/Faustina-VariableFont_wght.ttf);
  }
  @font-face{
    font-family: "Montserrat";
    src: url(fontsInfinita/Montserrat/Montserrat-Bold.ttf);
    src: url(fontsInfinita/Montserrat/Montserrat-Regular.ttf);
  }

  @font-face {
    font-family: "Oswald";
    src: url(fontsInfinita/Oswald/Oswald-VariableFont_wght.ttf);
  }


*{
  margin: auto;
  font-family: "Montserrat";
  align-items: center;
}

#bloqueo{
opacity:1;
}


.letrasmoviles{
  background-color: transparent;
}
.rotulonegro{
margin-top: 45vh;
background-color: black;
  padding: 0.2vw 4vw 0.2vw 4vw;
text-align: center; 
color: white;
  font-style: italic;
  opacity: 0;
  animation-name: banda;
  animation-delay: 5s;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

.titPortada{
  width: 20vw;
  height: 5vh;
  margin-top: 2vh;
font-family: "Montserrat";
font-size: 1.4vw;
text-align: center;
font-weight: bold;
opacity: 0;
animation-name: banda;
animation-delay: 6s;
animation-duration: 2.5s;
animation-fill-mode: forwards;
}

.textPortada{
width: 60%;
height: 20vh;
margin-top: 2vh;
font-family: "Montserrat";
text-align: justify;
font-size: 1vw;
opacity: 0;
  align-items:baseline;
	animation-name: banda;
	animation-delay: 6.2s;
	animation-duration: 4s;
	animation-fill-mode: forwards;
  transition: all 0.5s ease-out;
}

.textPortada:hover{
  transform: scale(1.1,1.1);
}

.mano{
width: 2vw;
height: 6vh;
margin-top: 3vh;
}

.mano img{
	background-size: auto;
  opacity: 0;
  width: 4vw;
  margin-left: 0.5vw;
  animation-name: banda;
	animation-delay: 6.5s;
	animation-duration: 3s;
	animation-fill-mode: forwards;
  transition: 0.5s ease-out;
}

.mano img:hover{
filter: drop-shadow(2px 2px 5px black);
}

.letras {
  font-size: 6vw;
  color: white;
  animation-name: cambioColor;
  animation-duration: 10s;
  animation-fill-mode: forwards;
}

.letrasSup{
  top: 15vh;
}
.letrasInf{
  top: 26vh;
}
.letra-l1 {
  position: absolute;
  left: 36vw;
  animation-name: vuelo1;
  animation-delay: 300ms;
  animation-duration: 3s;
}
.letra-a1 {
  position: absolute;
  left: 37.5vw;
  animation-name: vuelo2;
  animation-delay: 500ms;
  animation-duration: 4s;
}
.letra-l2 {
  position: absolute;
  left: 42.5vw;
  animation-name: vuelo3;
  animation-delay: 200ms;
  animation-duration: 4s;
}

.letra-e {
  position: absolute;
  left: 44vw;
  animation-name: vuelo4;
  animation-delay: 100ms;
  animation-duration: 3s;
}

.letra-c {
  position: absolute;
  left: 47.3vw;
  animation-name: vuelo5;
  animation-delay: 400ms;
  animation-duration: 2s;
}

.letra-t1 {
  position: absolute;
  left: 50.7vw;
  animation-name: vuelo6;
  animation-delay: 200ms;
  animation-duration: 4s;
}

.letra-u {
  position: absolute;
  left: 53.2vw;
  animation-name: vuelo1;
  animation-delay: 300ms;
  animation-duration: 3s;
}
.letra-r {
  position: absolute;
  left: 56.8vw;
  animation-name: vuelo2;
  animation-delay: 500ms;
  animation-duration: 1s;
}
.letra-a2 {
  position: absolute;
  left: 59.4vw;
  animation-name: vuelo3;
  animation-delay: 200ms;
  animation-duration: 2s;
}
.letra-i1 {
  position: absolute;
  left: 39.5vw;
  animation-name: vuelo4;
  animation-delay: 100ms;
  animation-duration: 3s;
}
.letra-n1 {
  position: absolute;
  left: 40.9vw;
  animation-name: vuelo5;
  animation-delay:400ms;
  animation-duration: 2s;
}

.letra-f {
  position: absolute;
  left: 44.5vw;
  animation-name: vuelo6;
  animation-delay: 500ms;
  animation-duration: 4s;
}

.letra-i2 {
  position: absolute;
  left: 46.9vw;
  animation-name: vuelo1;
  animation-delay: 300ms;
  animation-duration: 2s;
}

.letra-n2 {
  position: absolute;
  left: 48.3vw;
  animation-name: vuelo2;
  animation-delay: 500ms;
  animation-duration: 3s;
}
.letra-i3 {
  position: absolute;
  left: 51.8vw;
  animation-name: vuelo3;
  animation-delay: 200ms;
  animation-duration: 1s;
}
.letra-t2 {
  position: absolute;
  left: 53.2vw;
  animation-name: vuelo4;
  animation-delay: 100ms;
  animation-duration: 2s;
}
.letra-a3 {
  position: absolute;
  left: 55.7vw;
  animation-name: vuelo5;
  animation-delay: 400ms;
  animation-duration: 4s;
}


@keyframes cambioColor {
  0% {
    color: white;
  }
  100% {
    color: rgba(163, 73, 164);
  }
}
@keyframes banda {
  0% {opacity: 0; }
100% {opacity: 1; }}

@keyframes vuelo1 {
  0% {
    transform: translateY(-10vh) translateX(40vw);
  }
}

@keyframes vuelo2 {
  0% {
    transform: translateY(-10vh) translateX(40vw);
  }
}

@keyframes vuelo3 {
  0% {
    transform: translateY(-20vh) translateX(-40vw);
  }
}

@keyframes vuelo4 {
  0% {
    transform: translateY(-10vh) translateX(-30vw);
}
}
@keyframes vuelo5{

  0% {
    transform: translateY(50vh) translateX(40vw);
  }
}
@keyframes vuelo6 {
  0% {transform: translateY(50vh) translateX(1vw);}
}

@media (max-width: 1300px){


  .rotulonegro{
    margin-top: 43vh;
    }

  .textPortada{
text-align: left;
width: 80vw;
font-size: 1.2vw;  }  
}
.mano{
  margin-top: 2vh;
  }
  .letrasSup{
    top: 10vh;
  }
  .letrasInf{
    top: 22vh;
  }