.text-logo-container {
    width: 100%;
    margin: auto;
}

.text-logo-container img {
    width: 100%;
}

.logo-container {
    display: block;
    position: relative;
    width: 49%;
    padding-top: 49%;
    margin: 8.5% auto;
}

.logo-holder {
    width: 100px;
    margin: auto;
}

.blue-circle {
    position: absolute;
    background-color: #00a5f2;
    border-radius: 50%;
    width: 80%;
    height: 80%;
    opacity: 1;
    bottom: 3%;
    right: 3%;
    animation: circle-spin 1s;
}

.white-circle {
    width: 80%;
    position: absolute;
    bottom: 10%;
    right: 10%;
    background-color: #FFF;
    border-radius: 50%;
    height: 80%;
    animation: fade-in 2s;
}

.t-top {
    width: 58%;
    background-color: #000;
    top: 27%;
    height: 18%;
    position: absolute;
    left: 21%;
    animation: drawTtop 2s;
}

.t-line {
    width: 20%;
    left: 40%;
    background-color: #000;
    top: 30%;
    height: 54%;
    position: absolute;
    animation: drawTline 3s;
}

.orange-circle {
    position: absolute;
    background-color: #ed932c;
    border-radius: 50%;
    width: 80%;
    height: 80%;
    opacity: 1;
    top: 3%;
    left: 3%;
    animation: circle-spin2 1s;
}

@keyframes circle-spin {
    0% {
        width: 0%;
        height: 0%;
        opacity: 0;
        bottom: 100%;
        right: 100%;
    }
    70% {
        width: 80%;
        height: 80%;
        opacity: .5;
        bottom: -10%;
        right: -10%;
    }
    100% {
        width: 80%;
        height: 80%;
        opacity: 1;
        bottom: 3%;
        right: 3%;
    }
}

@keyframes fade-in {
    0% {
        transform: rotate(-900deg);
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    100% {
        transform: rotate(0deg);
        opacity: 1;
    }
}

@keyframes circle-spin2 {
    0% {
        width: 0%;
        height: 0%;
        opacity: 0;
        top: 100%;
        left: 100%;
    }
    70% {
        width: 80%;
        height: 80%;
        opacity: .5;
        top: -10%;
        left: -10%;
    }
    100% {
        width: 80%;
        height: 80%;
        opacity: 1;
        top: 3%;
        left: 3%;
    }
}

@keyframes drawTtop {
    0% {
        width: 0%;
        opacity: 0;
    }
    60% {
        width: 0%;
        opacity: .4;
    }
    100% {
        width: 58%;
        opacity: 1;
    }
}

@keyframes drawTline {
    0% {
        height: 0%;
    }
    60% {
        height: 0%;
    }
    100% {
        height: 54%;
    }
}