.rotating-text {
    font-weight: 600;
    font-size: 36px;
    color: white;
    transform: translateX(-80px);
}

.rotating-text p {
    display: inline-flex;
    margin: 0;
    vertical-align: top;
    justify-content: flex-end;
    padding-left: 3.5rem;
    margin-right: -5rem;
}

.rotating-text p .word {
    position: absolute;
    display: flex;
    opacity: 0;
}

.rotating-text p .word .letter {
    transform-origin: center center 25px;
}

.rotating-text p .word .letter.out {
    transform: rotateX(90deg);
    transition: 0.32s cubic-bezier(0.6, 0, 0.7, 0.2);
}

.rotating-text p .word .letter.in {
    transition: 0.38s ease;
}

.rotating-text p .word .letter.behind {
    transform: rotateX(-90deg);
}

.animation-text-block {
    display: flex;
    justify-content: flex-end;
    margin-top: -2.9rem;
    margin-left: 3rem;
}

@media only screen and (max-width: 1400px) {
    .animation-text-block {
        display: flex;
        justify-content: flex-end;
        margin-top: -1.9rem;
        margin-left: 3rem;
    }

    .rotating-text p {
        padding-left: 4.5rem;
    }
}

@media only screen and (max-width: 1200px) {
    .animation-text-block {
        margin-top: -2.1rem;
    }

    .f-18 span {
        font-size: 20px;
    }
}

@media only screen and (max-width: 800px) {
    .animation-text-block {
        margin-top: -1.7rem;
    }
}

@media only screen and (max-width: 600px) {
    .animation-text-block {
        margin-top: -0.7rem;
    }

    .rotating-text p {

        margin-right: -3rem;
    }

    .f-18 span {
        font-size: 14px;
    }

    .rotating-text p {
        padding-left: 3rem;
    }
}

@media only screen and (max-width: 390px) {

    .rotating-text p {
        padding-left: 4rem;
        margin-right: -4rem;
    }
}