html.no-scroll {
    /*overflow:hidden;*/
}

.no-scroll body {
    /*position: fixed;
    overflow-y: scroll;
    width:100%;*/
}

.logo {
    animation: animate-down  1s forwards;
    animation-timing-function: ease-in-out;
    animation-delay:10s;
    opacity:0;
}

.menu {
    animation: animate-down  1s forwards;
    animation-timing-function: ease-in-out;
    animation-delay:10s;
    opacity:0;
}

.intro-wrapper {
    overflow:hidden;
    height:100vh;
    width:100%;
    margin:0;
    position:absolute;
    top:0;
    left:0;
    background:#0d141f;
    z-index:99999;
}

.intro-wrapper.active {
    animation: slide-up ease 2s forwards;
    animation-delay: 4s;
}

.intro-wrapper img {
    opacity:0;
}

.counter-wrapper {
    animation: counter-wrapper  1.5s forwards;
    animation-timing-function: ease-in-out;
    animation-delay:6s;
    overflow:visible;
    margin:0;
    z-index:9;
}

#yearCounter {
    display:none;
}

.blur-in {
    animation: blur-in 1.5s forwards;
    transform:translate(-50%,-50%);
    position:absolute;
    top:50%;
    left:50%;
    z-index:99;
    width:100%;
    text-align: center;
}

.blur-out.active {
    animation: blur-out 1s forwards;
    opacity:1;
}

.transition-text {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:100%;
    opacity: 0;
}

.transition-text.active {
    animation: blur-in 1s forwards;
}

.bg-white {
    background: #D5DBE4;
    opacity:1;
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:100%;
}

.headline h1 {
    opacity:1;
    /*animation: blur-in 1s forwards;
    animation-delay: 10s;*/
}

.intro-wrapper .progress-line {
    max-width:400px;
    width:80%;
    height:4px;
    bottom:25%;
    transform: translate(-50%,0);
}

.intro-wrapper .progress-line .progress-inner {
    width:0;
    height:100%;
    transition: ease all 0.5s;
}

.progress-inner.active {
    animation: progress linear 3s forwards;
}

.progress-loop {
    animation: progress-loop 3s infinite;
    animation-delay:13s;
    position:absolute;
}


@keyframes progress {
    0% {
        width:0;
    }
    100% {
        width:100%;
    }
}

.subline {
    color:#fff;
    font-size:1rem;
    margin-top:-2rem;
    opacity:0;
    animation: animate-down  .5s forwards;
    animation-timing-function: ease-in-out;
    animation-delay:4.25s;
}

.floating-image-1 {
    animation: blur-in 1s forwards;
    animation-delay:11s;
}

.floating-image-2 {
    animation: blur-in 1s forwards;
    animation-delay:11.5s;
}

.floating-image-3 {
    animation: blur-in 1s forwards;
    animation-delay:11.75s;
}

.floating-image-4 {
    animation: blur-in 1s forwards;
    animation-delay:12s;
    mix-blend-mode: darken;
}

.intro-images {
    transition: all 0.25s ease-in-out;
}

.intro-images.show {
    opacity: 1;
    animation: image-fade 0.5s forwards;
}

#circle path {
    stroke: #004C96;
    stroke-opacity: 1;
    stroke-width: 1;

}


#circle path:nth-of-type(1) {
    stroke-dasharray: 1697.88, 1697.88;
    stroke-dashoffset: 1697.88;
    animation: offset 4s ease-in-out forwards;
    animation-delay: 12.75s;
}


#circle path:nth-of-type(2) {
    stroke-dasharray: 1697.88, 1697.88;
    stroke-dashoffset: 1697.88;
    animation: offset 4s ease-in-out forwards;
    animation-delay: 11.5s;
}

@keyframes slide-up {
    0% {
        top:0;
    }
    100% {
        top:-200vh;
    }
}