@media only screen and (max-width: 1920px) {
    html {
        font-size: 16px;
    }
}


@media only screen and (max-width: 1480px) {
    html {
        font-size: 14px;
    }
}

@media only screen and (max-width: 1280px) {
    html {
        font-size: 12px;
    }
}

@media only screen and (max-width: 1024px) {
    html {
        font-size: 11px;
    }
}

@media only screen and (max-width: 900px) {
    html {
        font-size: 10px;
    }
}

@media only screen and (max-width: 750px) {
    html {
        font-size: 9px;
    }
}

@media only screen and (max-width: 600px) {
    html {
        font-size: 8px;
    }
}

@media only screen and (max-width: 480px) {
    html {
        font-size: 6px;
    }
}

@media only screen and (max-width: 300px) {
    html {
        font-size: 4px;
    }
}

@media only screen and (max-width: 200px) {
    html {
        font-size: 2px;
    }
}

.trigger-animation-still {
    animation: animate-element-still 1s linear;
    opacity: 1;
    transition: opacity 1s ease, transform 1s ease;
}

.trigger-animation-x-reverse {
    animation: animate-element-x-reverse 1s linear;
    opacity: 1;
    transition: opacity 1s ease-in, transform 1s ease-in;
}


.trigger-animation-y {
    animation: animate-element-y 1s linear;
    opacity: 1;
    transition: opacity 1s ease, transform 1s ease;
}

.trigger-animation-x {
    animation: animate-element-x 1s linear;
    opacity: 1;
    transition: opacity 1s ease-in, transform 1s ease-in;
}

@keyframes animate-element-y {
    0% {
        transform: translateY(20%);
    }

    100% {
        transform: translateY(0%);
    }
}

@keyframes animate-element-x {
    0% {
        transform: translateX(-20%);
    }

    100% {
        transform: translateX(0%);
    }
}

@keyframes animate-element-x-reverse {
    0% {
        transform: translateX(20%);
    }    

    100% {
        transform: translateX(0%);
    }
}