﻿.loader {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.texto {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .texto .titulo1 {
        font-size: 34em;
        color: #1c6cd4;
    }

    .texto .titulo2 {
        font-size: 34em;
        color: #106eea;
        animation: text2 12s ease-in-out forwards infinite;
    }

@keyframes text2 {
    10% {
        font-size: 44;
    }

    11% {
        font-size: 34;
    }

    40% {
        font-size: 44;
    }

    41% {
        font-size: 34;
    }

    70% {
        font-size: 44;
    }

    71% {
        font-size: 34;
    }
}

.texto .titulo3 {
    font-size: 34;
    color: #106eea;
    animation: text3 12s ease-in-out forwards infinite;
}

@keyframes text3 {
    20% {
        font-size: 44;
    }

    21% {
        font-size: 34;
    }

    50% {
        font-size: 44;
    }

    51% {
        font-size: 34;
    }

    80% {
        font-size: 44;
    }

    81% {
        font-size: 34;
    }
}

.texto .titulo4 {
    font-size: 34;
    color: #106eea;
    animation: text4 12s ease-in-out forwards infinite;
}

@keyframes text4 {
    30% {
        font-size: 44;
    }

    31% {
        font-size: 34;
    }

    60% {
        font-size: 44;
    }

    61% {
        font-size: 34;
    }

    90% {
        font-size: 44;
    }

    91% {
        font-size: 34;
    }
}

.car__body {
    -webkit-animation: shake 0.2s ease-in-out infinite alternate;
    animation: shake 0.2s ease-in-out infinite alternate;
}

.car__line {
    transform-origin: center right;
    stroke-dasharray: 22;
    -webkit-animation: line 0.8s ease-in-out infinite;
    animation: line 0.8s ease-in-out infinite;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.car__line--top {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}

.car__line--middle {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

.car__line--bottom {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}

@-webkit-keyframes shake {
    0% {
        transform: translateY(-1%);
    }

    100% {
        transform: translateY(3%);
    }
}

@keyframes shake {
    0% {
        transform: translateY(-1%);
    }

    100% {
        transform: translateY(1%);
    }
}

@-webkit-keyframes line {
    0% {
        stroke-dashoffset: 22;
    }

    25% {
        stroke-dashoffset: 22;
    }

    50% {
        stroke-dashoffset: 0;
    }

    51% {
        stroke-dashoffset: 0;
    }

    80% {
        stroke-dashoffset: -22;
    }

    100% {
        stroke-dashoffset: -22;
    }
}

@keyframes line {
    0% {
        stroke-dashoffset: 22;
    }

    25% {
        stroke-dashoffset: 22;
    }

    50% {
        stroke-dashoffset: 0;
    }

    51% {
        stroke-dashoffset: 0;
    }

    80% {
        stroke-dashoffset: -22;
    }

    100% {
        stroke-dashoffset: -22;
    }
}
/**/
