@font-face {
    font-family: "Twentieth Century Bold";
    src: url("https://db.onlinewebfonts.com/t/90cb7bb668481e6489432e687533592a.eot");
    src: url("https://db.onlinewebfonts.com/t/90cb7bb668481e6489432e687533592a.eot?#iefix")format("embedded-opentype"),
        url("https://db.onlinewebfonts.com/t/90cb7bb668481e6489432e687533592a.woff2")format("woff2"),
        url("https://db.onlinewebfonts.com/t/90cb7bb668481e6489432e687533592a.woff")format("woff"),
        url("https://db.onlinewebfonts.com/t/90cb7bb668481e6489432e687533592a.ttf")format("truetype"),
        url("https://db.onlinewebfonts.com/t/90cb7bb668481e6489432e687533592a.svg#Twentieth Century Bold")format("svg");
}

body {
    margin: 0;
    font-family: "Open Sans", sans-serif;
    font-family: "Twentieth Century Bold";
}

.logo-text-inner .letter {
    text-transform: uppercase;
    font-weight: bold;
    display: inline-block;
}

.animation-container {
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    font-size: 40px;
}

/* Grey letters fade in after 1s */
/* .grey-animation {
    color: black;
    animation: turnGrey 0.5s ease-in forwards;
    animation-delay: 0.1s;
} */

@keyframes turnGrey {
    0% {
        color: black;
    }

    100% {
        color: grey;
    }
}

@keyframes fadeGrey {
    to {
        opacity: 0;
    }
}

.logo-text-inner {
    width: 310px;
    position: relative;
}

.grey-animation:not(.letter-6) {
    animation:
        turnGrey 0.5s ease-in 0.4s forwards,
        fadeGrey 0.6s ease-in 1s forwards,
        show-letter-black 0.5s ease-in 3.7s forwards;
}

.letter.letter-1 {
    animation: letter-1-anim 0.5s ease-in 1.5s forwards,
        hide-letter 0.5s ease-in 2s forwards,
        show-letter-new 0.5s ease-in 3.7s forwards;

}

.letter.letter-6 {
    animation: letter-6-anim 0.5s ease-in 1.5s forwards,
        hide-letter 0.5s ease-in 2s forwards,
        show-letter-new 0.5s ease-in 3.7s forwards;

}

.logo-svg-container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    animation: move-left-153 0.5s ease-out 3.5s forwards;
}

.logo-right-text-container {
    position: relative;
    animation: move-left-80 0.5s ease-out 3.7s forwards;
}

@keyframes move-left-80 {
    0% {
        left: 0;
    }

    100% {
        left: 52px;
    }
}

@keyframes move-left-153 {
    0% {
        margin-left: 0;
    }

    100% {
        margin-left: -128px;
    }
}

@keyframes letter-1-anim {
    0% {
        transform: translate(0) scale(1);
    }

    100% {
        transform: translate(120px, 0) scale(2.5);
    }
}

@keyframes letter-6-anim {
    0% {
        transform: translate(0) scale(1);
    }

    100% {
        transform: translate(-27px, 0px) scale(2) scaleY(0.6);
    }
}

@keyframes hide-letter {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes show-letter {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
@keyframes show-letter-black {
    0% {
        opacity: 0;
        color: #000;
    }

    100% {
        opacity: 1;
        color: #000;
    }
}

@keyframes show-letter-new {
    0% {
        opacity: 0;
        transform: translate(0) scale(1);
    }

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

.logo-icon-1-svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    margin-left: -24px;
    opacity: 0;
    animation: show-letter 0.5s ease-in 2s forwards;
}

.logo-icon-1-svg svg {
    width: 70px;
    height: auto;
    margin-left: 20px;
}

.logo-icon-1-svg g.element-1 {
    opacity: 0;
    animation: show-letter 0.5s ease-in 2.5s forwards
}
.logo-icon-1-svg g.element-1 rect,
.logo-icon-1-svg g.element-2 rect{
    animation: show-color 0.5s ease-in-out 4s forwards;
}
@keyframes show-color {
    from {
        fill: rgb(167, 169, 172);
    }

    to {
       fill: #7db4d8;
    }
}
.logo-icon-1-svg g.element-2 {
    opacity: 0;
    animation: show-letter 0.5s ease-in 2.5s forwards;
}

.logo-icon-2-svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    opacity: 0;
    animation: show-letter 0.5s ease-in 3s forwards;
}

.logo-icon-2-svg svg {
    width: 66px;
    height: auto;
    margin-left: -28px;
    opacity: 0.4;
    stroke: #7db4d8;
    filter: grayscale(1);
    animation: removeGrey 0.4s ease-in-out 4s forwards;
}
.logo-right-text-container .small-circle {
    position: absolute;
    width: 21px;
    left: 4px;
    top: 11px;
    fill: #7db4d8;
    transform: scale(0);
    transform-origin: center;
    animation: scaleto100 0.5s ease-out 4s forwards;
}
@keyframes scaleto100 {
    0% {
        transform: scale(0);
    }
    50%{
        transform: scale(1.5);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes removeGrey {
    from {
        filter: grayscale(1);
    }

    to {
        filter: grayscale(0);
    }
}
.circle-container {
    width: 120px;
    height: 120px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -47px;
}

.animated-circle circle {
    fill: none;
    stroke: #939598;
    stroke-width: 1px;
    stroke-linecap: round;
    stroke-dasharray: 314;
    stroke-dashoffset: 314;
    transform: rotate(26deg);
    animation: drawCircle 0.4s ease-in-out 4s forwards;
    transform-origin: center;
}

@keyframes drawCircle {
    from {
        stroke-dashoffset: 314;
    }

    to {
        stroke-dashoffset: 47;
    }
}
.logo-small-text-container {
    position: absolute;
    font-weight: 300;
    white-space: nowrap;
    font-size: 12px;
    text-transform: uppercase;
    color: #939598;
    font-family: "Open Sans", sans-serif;
    opacity: 0;
    left: 16px;
    letter-spacing: 5.5px;
    margin-top: -3px;
    animation: show-letter 0.5s ease-in 4.5s forwards;
}