body { margin: 0; padding: 0; width: 100%; background: linear-gradient(100deg, #000339 -0.53%, #022770 13%, #000339 26.53%, #022770 46.83%, #000339 74.38%, #022770 100%); font-size: 16px; color: #fff; font-family: "Montserrat", sans-serif; }

.container { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; max-width: 100%; margin: 0 auto; }
.content { display: flex; flex-direction: column; align-items: center; }
h1, h2 { font-weight: 400; text-transform: uppercase; margin: 0 0 1rem 0; animation: textIn 1s ease-in-out forwards; opacity: 0; text-align: center; }
h1 { animation-delay: 2s; }
h2 { animation-delay: 3s; }
.text { animation: fadeIn 1s ease-in-out forwards; animation-delay: 4s; opacity: 0; }
.text p { text-align: center;}
sup { font-size: .75rem; }
.ikonok { margin: 2rem 0 0 0; display: flex; justify-content: center; opacity: 0; animation: iconIn .5s ease-in-out forwards; animation-delay: 5s; }
.ikonok a { background-repeat: no-repeat; background-position: center; background-size: 50px 50px; width: 50px; height: 50px; margin: 0 1rem; transition: .5s; }
.ikonok a:hover { transform: scale(1.25); transition: .5s; opacity: .75; }
.ikonok a.facebook { background-image: url('images/facebook.svg'); }
.ikonok a.insta { background-image: url('images/insta.svg'); animation-delay: 5.5s; }

/***** ANIMÁCIÓK *****/
.logo { width: 459px; height: 90px; margin: 0 0 2rem 0; }
.logo svg { width: 459px; height: 96px; }
#letter-1, #letter-2, #letter-3 { opacity: 0; }
#brand-name-paths path { opacity: 0; }
.is-visible { animation: fadeInLetter 0.4s ease forwards; }
#line { fill: none; stroke: url(#master-gradient); stroke-width: 1.33; stroke-dasharray: 96; stroke-dashoffset: 96; }
.fade-in-animation { animation: fadeIn 0.5s ease-out forwards; }
.draw-line-animation { animation: drawLine 1s ease-in-out forwards; }

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}


@keyframes drawLine {
    to {
        stroke-dashoffset: 0;
    }
}


@keyframes fadeInLetter {
    to {
        opacity: 1;
    }
}

@keyframes textIn {
    0% { transform: translateX(-100%); opacity: 0; }
    100% { transform: translateX(0%); opacity: 1; }
}

@keyframes iconIn {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@media (max-width: 768px) {
    .container { max-width: 90%; }
    .logo, .logo svg { width: 300px; height: 59px; }
}