@-webkit-keyframes preloader-cloud-left {
    from {
        -webkit-transform: translateX(-8%) translateY(50%);
                transform: translateX(-8%) translateY(50%);
    }
    to {
        -webkit-transform: translateX(calc(-8% + 50px)) translateY(50%);
                transform: translateX(calc(-8% + 50px)) translateY(50%);
    }
}
@keyframes preloader-cloud-left {
    from {
        -webkit-transform: translateX(-8%) translateY(50%);
                transform: translateX(-8%) translateY(50%);
    }
    to {
        -webkit-transform: translateX(calc(-8% + 50px)) translateY(50%);
                transform: translateX(calc(-8% + 50px)) translateY(50%);
    }
}
@-webkit-keyframes preloader-cloud-right {
    from {
        -webkit-transform: translateX(20%)  translateY(-20%);
                transform: translateX(20%)  translateY(-20%);
    }
    to {
        -webkit-transform: translateX(calc(20% - 50px))  translateY(-20%);
                transform: translateX(calc(20% - 50px))  translateY(-20%);
    }
}
@keyframes preloader-cloud-right {
    from {
        -webkit-transform: translateX(20%)  translateY(-20%);
                transform: translateX(20%)  translateY(-20%);
    }
    to {
        -webkit-transform: translateX(calc(20% - 50px))  translateY(-20%);
                transform: translateX(calc(20% - 50px))  translateY(-20%);
    }
}


@-webkit-keyframes preloader-content {
    0% {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    
    25%, 75% {
        top: 14.7vh;
        right: calc(15px + (362 - 15) * ((100vw - 375px) / (1920 - 375)));
        left:  calc(15px + (362 - 15) * ((100vw - 375px) / (1920 - 375)));
        bottom: 16.3vh;
    }
    100% {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
}


@keyframes preloader-content {
    0% {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    
    25%, 75% {
        top: 14.7vh;
        right: calc(15px + (362 - 15) * ((100vw - 375px) / (1920 - 375)));
        left:  calc(15px + (362 - 15) * ((100vw - 375px) / (1920 - 375)));
        bottom: 16.3vh;
    }
    100% {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
}

@media(min-width: 1920px){
    @-webkit-keyframes preloader-content {
        0% {
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
        25%, 75% {
            top: 14.7vh;
            right: 362px;
            left: 362px;
            bottom: 16.3vh;
        }
        100% {
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
    }
    @keyframes preloader-content {
        0% {
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
        25%, 75% {
            top: 14.7vh;
            right: 362px;
            left: 362px;
            bottom: 16.3vh;
        }
        100% {
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
    }
}
@media(max-width: 375px){
    @-webkit-keyframes preloader-content {
        0% {
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
        25%, 75% {
            top: 14.7vh;
            right: 15px;
            left: 15px;
            bottom: 16.3vh;
        }
        100% {
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
    }
    @keyframes preloader-content {
        0% {
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
        25%, 75% {
            top: 14.7vh;
            right: 15px;
            left: 15px;
            bottom: 16.3vh;
        }
        100% {
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
    }
}


@-webkit-keyframes preloader-image{
    0% {
        opacity: 0;
        -webkit-transform: translateY(-50%) translateX(calc(375px + (153.6 - 375) * ((100vw - 375px) / (1920 - 375))));
                transform: translateY(-50%) translateX(calc(375px + (153.6 - 375) * ((100vw - 375px) / (1920 - 375))));
    }
    20%,70% {
        opacity: 1;
    }
    100% {
        -webkit-transform: translateY(-100%) translateX(calc((375px + (153.6 - 375) * ((100vw - 375px) / (1920 - 375))) - 80%));
                transform: translateY(-100%) translateX(calc((375px + (153.6 - 375) * ((100vw - 375px) / (1920 - 375))) - 80%));
    }
}


@keyframes preloader-image{
    0% {
        opacity: 0;
        -webkit-transform: translateY(-50%) translateX(calc(375px + (153.6 - 375) * ((100vw - 375px) / (1920 - 375))));
                transform: translateY(-50%) translateX(calc(375px + (153.6 - 375) * ((100vw - 375px) / (1920 - 375))));
    }
    20%,70% {
        opacity: 1;
    }
    100% {
        -webkit-transform: translateY(-100%) translateX(calc((375px + (153.6 - 375) * ((100vw - 375px) / (1920 - 375))) - 80%));
                transform: translateY(-100%) translateX(calc((375px + (153.6 - 375) * ((100vw - 375px) / (1920 - 375))) - 80%));
    }
}
@media(min-width: 1920px){
    @-webkit-keyframes preloader-image{
        0% {
            opacity: 0;
            -webkit-transform: translateY(-50%) translateX(153.6px);
                    transform: translateY(-50%) translateX(153.6px);
        }
        20%,70% {
            opacity: 1;
        }
        100% {
            -webkit-transform: translateY(-100%) translateX(calc(153.6px - 80%));
                    transform: translateY(-100%) translateX(calc(153.6px - 80%));
        }
    }
    @keyframes preloader-image{
        0% {
            opacity: 0;
            -webkit-transform: translateY(-50%) translateX(153.6px);
                    transform: translateY(-50%) translateX(153.6px);
        }
        20%,70% {
            opacity: 1;
        }
        100% {
            -webkit-transform: translateY(-100%) translateX(calc(153.6px - 80%));
                    transform: translateY(-100%) translateX(calc(153.6px - 80%));
        }
    }

}
@media(max-width: 375px){
    @-webkit-keyframes preloader-image{
        0% {
            opacity: 0;
            -webkit-transform: translateY(-50%) translateX(375px);
                    transform: translateY(-50%) translateX(375px);
        }
        20%,70% {
            opacity: 1;
        }
        100% {
            -webkit-transform: translateY(-100%) translateX(calc(375px - 80%));
                    transform: translateY(-100%) translateX(calc(375px - 80%));
        }
    }
    @keyframes preloader-image{
        0% {
            opacity: 0;
            -webkit-transform: translateY(-50%) translateX(375px);
                    transform: translateY(-50%) translateX(375px);
        }
        20%,70% {
            opacity: 1;
        }
        100% {
            -webkit-transform: translateY(-100%) translateX(calc(375px - 80%));
                    transform: translateY(-100%) translateX(calc(375px - 80%));
        }
    }
}

@-webkit-keyframes preloader{
    14%, 86%{
        visibility: visible;
        opacity: 1;
    }
}

@keyframes preloader{
    14%, 86%{
        visibility: visible;
        opacity: 1;
    }
}


@-webkit-keyframes preloader-text-span{
    0% {
        -webkit-transform: translateY(70%);
                transform: translateY(70%);
    }
    10%, 60%{
        opacity: 1;
    }
    90%{
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        opacity: 0;
    }
}


@keyframes preloader-text-span{
    0% {
        -webkit-transform: translateY(70%);
                transform: translateY(70%);
    }
    10%, 60%{
        opacity: 1;
    }
    90%{
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        opacity: 0;
    }
}