.animate {
    margin: 100px 0 0;
}

.animate span {
    display: inline-block;
}

.animate span:nth-of-type(1) {
    animation-delay: 1s;
}

.animate span:nth-of-type(2) {
    animation-delay: 1.02s;
}

.animate span:nth-of-type(3) {
    animation-delay: 1.04s;
}

.animate span:nth-of-type(4) {
    animation-delay: 1.06s;
}

.animate span:nth-of-type(5) {
    animation-delay: 1.08s;
}

.animate span:nth-of-type(6) {
    animation-delay: 1.1s;
}

.animate span:nth-of-type(7) {
    animation-delay: 1.12s;
}

.animate span:nth-of-type(8) {
    animation-delay: 1.14s;
}

.animate span:nth-of-type(9) {
    animation-delay: 1.16s;
}

.animate span:nth-of-type(10) {
    animation-delay: 1.18s;
}

.animate span:nth-of-type(11) {
    animation-delay: 1.2s;
}

.animate span:nth-of-type(12) {
    animation-delay: 1.22s;
}

.animate span:nth-of-type(13) {
    animation-delay: 1.24s;
}

.animate span:nth-of-type(14) {
    animation-delay: 1.26s;
}

.animate span:nth-of-type(15) {
    animation-delay: 1.28s;
}

.animate span:nth-of-type(16) {
    animation-delay: 1.3s;
}

.animate span:nth-of-type(17) {
    animation-delay: 1.32s;
}

.animate span:nth-of-type(18) {
    animation-delay: 1.34s;
}

.animate span:nth-of-type(19) {
    animation-delay: 1.36s;
}

.animate span:nth-of-type(20) {
    animation-delay: 1.38s;
}

.animate span:nth-of-type(21) {
    animation-delay: 1.4s;
}

.animate span:nth-of-type(22) {
    animation-delay: 1.42s;
}

.animate span:nth-of-type(23) {
    animation-delay: 1.44s;
}

.animate span:nth-of-type(24) {
    animation-delay: 1.46s;
}

.animate span:nth-of-type(25) {
    animation-delay: 1.48s;
}

.animate span:nth-of-type(26) {
    animation-delay: 1.5s;
}

.animate span:nth-of-type(27) {
    animation-delay: 1.52s;
}

.animate span:nth-of-type(28) {
    animation-delay: 1.54s;
}

.animate span:nth-of-type(29) {
    animation-delay: 1.56s;
}

.animate span:nth-of-type(30) {
    animation-delay: 1.58s;
}

.animate span:nth-of-type(31) {
    animation-delay: 1.60s;
}

.animate span:nth-of-type(32) {
    animation-delay: 1.62s;
}

.animate span:nth-of-type(33) {
    animation-delay: 1.64s;
}

.animate span:nth-of-type(34) {
    animation-delay: 1.66s;
}

.animate span:nth-of-type(35) {
    animation-delay: 1.68s;
}

.animate span:nth-of-type(36) {
    animation-delay: 1.7s;
}

.animate span:nth-of-type(37) {
    animation-delay: 1.72s;
}

.animate span:nth-of-type(38) {
    animation-delay: 1.74s;
}

.animate span:nth-of-type(39) {
    animation-delay: 1.76s;
}

.animate span:nth-of-type(40) {
    animation-delay: 1.78s;
}

.seven span {
    color: #fff;
    opacity: 0;
    transform: translate(-150px, 0) scale(.3);
    animation: leftRight 1s forwards;
}

@keyframes leftRight {
    40% {
        transform: translate(50px, 100px) scale(.7);
        opacity: 0;
        color: #fff;
    }

    80% {
        transform: translate(0) scale(5);
        opacity: 0;
    }

    100% {
        transform: translate(0) scale(1);
        opacity: 1;
    }
}

.blur {
    display: block;
    margin: 0 auto;
    width: 10vw;
    min-width: 140px;

    filter: blur(100px);
    animation: blur-move 1.7s forwards ease-out;
}

@keyframes blur-move {
    0% {
        transform: translate(0, 11vh)
    }

    50% {
        filter: blur(0);
        transform: translate(0, 11vh)
    }

    86% {
        transform: translate(0, 11vh)
    }

    100% {
        filter: blur(0);
        transform: translate(0)
    }
}

.f3 {
    font-weight: 300;
}

#top-cover-black {
    width: 100%;
    height: 100%;
    background: #222;
    animation: bl-del .5s forwards ease-out;
    position: absolute;
    animation-delay: 2.6s;
}

#logo {
    animation-delay: 2.9s;
}

#icons {
    animation-delay: 3.1s;
}

.menu-btn {
    animation-delay: 3.2s;
}

@keyframes bl-del {
    100% {
        height: 0;
    }
}