@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Roboto:wght@300;400;500&display=swap');
h2{
    font-size: 1.2rem;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    color: #0078cd;
    left: -300px;
    -webkit-animation: slide 0.5s forwards;
    -webkit-animation-delay: 1s;
    animation: slide 0.5s forwards;
    animation-delay: 1s;
}
p{
    color: #686868;
    font-size: .9rem;
    line-height: 1rem;
    left: -300px;
    -webkit-animation: slide2 0.5s forwards;
    -webkit-animation-delay: 2s;
    animation: slide2 0.5s forwards;
    animation-delay: 2s;
}
button{
    margin-left: 12px;
    margin-bottom: 12px;
    -webkit-animation: opacity 1s forwards;
    -webkit-animation-delay: 1.4s;
    animation: opacity 1s forwards;
    animation-delay: 1.4s;
    opacity: 0;
    font-size: 3.5vw !important;
}

.verde{
    color:#28a745;
    font-weight: 900;
}
.content{
    display: block;
    margin: 0 auto;
    overflow: hidden;
}
.encima {
    position: absolute;
    top: 25%;
    z-index: 999;
    
}
.logo{

    -webkit-animation: opacity2 1s forwards;
    -webkit-animation-delay: 2.5s;
    animation: opacity2 1s forwards;
    animation-delay: 2.5s;
    opacity: 0;

}
@-webkit-keyframes slide {
    100% { left: 0px; }
}

@keyframes slide {
    100% { left: 0px; }
}
@-webkit-keyframes slide2 {
    100% { left: 0px; }
}

@keyframes slide2 {
    100% { left: 0px; }
}
@-webkit-keyframes opacity {
    0%{opacity: 0;}
    100% { opacity: 1; }
}

@keyframes opacity {
    0%{opacity: 0;}
    100% { opacity: 1; }
}
@keyframes opacity2 {
    0%{opacity: 0;}
    100% { opacity: 1; }
}


@media (max-width:767px) {
    h2{
        font-size: 4.2vw;
    }
    p{
        font-size: 4vw;
        line-height: 5vw; 
    }

  }


  @media (max-width:421px) {
    .encima{
        top:12%;
    }

  }