.-.-.-.-.-

.flex-content {
    overflow: hidden;
}
@keyframes slide-down {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0);
    }
}
@keyframes slide-up {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-100%);
    }
}
@-webkit-keyframes animate-svg-stroke-1 {
    0% {
        stroke-dashoffset: 201.11935424804688px;
        stroke-dasharray: 201.11935424804688px;
    }

100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 201.11935424804688px;
    }
}
@keyframes animate-svg-stroke-1 {
    0% {
        stroke-dashoffset: 201.11935424804688px;
        stroke-dasharray: 201.11935424804688px;
    }

100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 201.11935424804688px;
    }
}
@-webkit-keyframes animate-svg-fill-1 {
    0% {
        fill: #EAEEF6;
    }

100% {
        fill: rgb(32, 69, 144);
    }
}
//@keyframes animate-svg-fill-1 {
//    0% {
//        fill: transparent;
//    }
//
//    100% {
//        fill: rgb(32, 69, 144);
//    }
//}
//
//.sticky [class*="svg-logo-1"] {
//    -webkit-animation: animate-svg-stroke-1 0.2s linear 0s both,
//    animate-svg-fill-1 0.5s linear 0.2s both;
//    animation: animate-svg-stroke-1 0.2s linear 0s both,
//    animate-svg-fill-1 0.5s linear 0.2s both;
//}

//@-webkit-keyframes animate-svg-stroke-2 {
//    0% {
//        stroke-dashoffset: 191.61660766601562px;
//        stroke-dasharray: 191.61660766601562px;
//    }
//
//    100% {
//        stroke-dashoffset: 0;
//        stroke-dasharray: 191.61660766601562px;
//    }
//}

//@keyframes animate-svg-stroke-2 {
//    0% {
//        stroke-dashoffset: 191.61660766601562px;
//        stroke-dasharray: 191.61660766601562px;
//    }
//
//    100% {
//        stroke-dashoffset: 0;
//        stroke-dasharray: 191.61660766601562px;
//    }
//}

//@-webkit-keyframes animate-svg-fill-2 {
//    0% {
//        fill: transparent;
//    }
//
//    100% {
//        fill: rgb(254, 254, 254);
//    }
//}

//@keyframes animate-svg-fill-2 {
//    0% {
//        fill: transparent;
//    }
//
//    100% {
//        fill: rgb(254, 254, 254);
//    }
//}

//.sticky [class*="svg-logo-2"] {
//    -webkit-animation: animate-svg-stroke-2 0.2s linear 0.1s both,
//    animate-svg-fill-2 0.5s linear 0.30000000000000004s both;
//    animation: animate-svg-stroke-2 0.2s linear 0.1s both,
//    animate-svg-fill-2 0.5s linear 0.30000000000000004s both;
//}

//@-webkit-keyframes animate-svg-stroke-3 {
//    0% {
//        stroke-dashoffset: 191.61660766601562px;
//        stroke-dasharray: 191.61660766601562px;
//    }
//
//    100% {
//        stroke-dashoffset: 0;
//        stroke-dasharray: 191.61660766601562px;
//    }
//}
//
//@keyframes animate-svg-stroke-3 {
//    0% {
//        stroke-dashoffset: 191.61660766601562px;
//        stroke-dasharray: 191.61660766601562px;
//    }
//
//    100% {
//        stroke-dashoffset: 0;
//        stroke-dasharray: 191.61660766601562px;
//    }
//}
//
//.sticky [class*="svg-logo-3"] {
//    -webkit-animation: animate-svg-stroke-3 0.2s linear 0.2s both,
//    animate-svg-fill-3 0.5s linear 0.4s both;
//    animation: animate-svg-stroke-3 0.2s linear 0.2s both,
//    animate-svg-fill-3 0.5s linear 0.4s both;
//}

//@-webkit-keyframes animate-svg-stroke-4 {
//    0% {
//        stroke-dashoffset: 180.68008422851562px;
//        stroke-dasharray: 180.68008422851562px;
//    }
//
//    100% {
//        stroke-dashoffset: 0;
//        stroke-dasharray: 180.68008422851562px;
//    }
//}
//
//@keyframes animate-svg-stroke-4 {
//    0% {
//        stroke-dashoffset: 180.68008422851562px;
//        stroke-dasharray: 180.68008422851562px;
//    }
//
//    100% {
//        stroke-dashoffset: 0;
//        stroke-dasharray: 180.68008422851562px;
//    }
//}
//
//@-webkit-keyframes animate-svg-fill-4 {
//    0% {
//        fill: transparent;
//    }
//
//    100% {
//        fill: rgb(32, 69, 144);
//    }
//}

//@keyframes animate-svg-fill-4 {
//    0% {
//        fill: transparent;
//    }
//
//    100% {
//        fill: rgb(32, 69, 144);
//    }
//}
//
//.sticky [class*="svg-logo-4"] {
//    -webkit-animation: animate-svg-stroke-4 0.1s linear 0.0s both,
//    animate-svg-fill-4 0.1s linear 0.0s both;
//    animation: animate-svg-stroke-4 0.2s linear 0.0s both,
//    animate-svg-fill-4 0.1s linear 0.0s both;
//}

@-webkit-keyframes animate-svg-stroke-5 {
    0% {
        stroke-dashoffset: 153.92247009277344px;
        stroke-dasharray: 153.92247009277344px;
    }

100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 153.92247009277344px;
    }
}

@keyframes animate-svg-stroke-5 {
    0% {
        stroke-dashoffset: 153.92247009277344px;
        stroke-dasharray: 153.92247009277344px;
    }

100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 153.92247009277344px;
    }
}

@-webkit-keyframes animate-svg-fill-5 {
    0% {
        fill: transparent;
    }

100% {
        fill: rgb(254, 254, 254);
    }
}

@keyframes animate-svg-fill-5 {
    0% {
        fill: transparent;
    }

100% {
        fill: rgb(254, 254, 254);
    }
}

.sticky [class*="svg-logo-5"] {
    -webkit-animation: animate-svg-stroke-5 0.5s linear 0.0s both,
    animate-svg-fill-5 0.5s linear 0.0s both;
    animation: animate-svg-stroke-5 0.5s linear 0.0s both,
    animate-svg-fill-5 0.5s linear 0.0s both;
}

@-webkit-keyframes animate-svg-stroke-6 {
    0% {
        stroke-dashoffset: 77.3070068359375px;
        stroke-dasharray: 77.3070068359375px;
    }

100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 77.3070068359375px;
    }
}

@keyframes animate-svg-stroke-6 {
    0% {
        stroke-dashoffset: 77.3070068359375px;
        stroke-dasharray: 77.3070068359375px;
    }

100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 77.3070068359375px;
    }
}

@-webkit-keyframes animate-svg-fill-6 {
    0% {
        fill: #EAEEF6;
    }

100% {
        fill: rgb(32, 69, 144);
    }
}

@keyframes animate-svg-fill-6 {
    0% {
        fill: transparent;
    }

100% {
        fill: rgb(32, 69, 144);
    }
}

.sticky [class*="svg-logo-6"] {
    -webkit-animation: animate-svg-stroke-6 0.2s linear 0.1s both,
    animate-svg-fill-6 0.5s linear 0.1s both;
    animation: animate-svg-stroke-6 0.2s linear 0.1s both,
    animate-svg-fill-6 0.5s linear 0.1s both;
}

@-webkit-keyframes animate-svg-stroke-7 {
    0% {
        stroke-dashoffset: 19.26448631286621px;
        stroke-dasharray: 19.26448631286621px;
    }

100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 19.26448631286621px;
    }
}

@keyframes animate-svg-stroke-7 {
    0% {
        stroke-dashoffset: 19.26448631286621px;
        stroke-dasharray: 19.26448631286621px;
    }

100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 19.26448631286621px;
    }
}

@-webkit-keyframes animate-svg-fill-7 {
    0% {
        fill: transparent;
        transform: scale(0.8) rotate(360deg);
    }

100% {
        fill: rgb(254, 254, 254);
        transform: scale(1) rotate(0deg);
    }
}

@keyframes animate-svg-fill-7 {
    0% {
        fill: transparent;
        transform: scale(0);
    }

100% {
        fill: rgb(254, 254, 254);
        transform: scale(1);
    }
}

.sticky [class*="svg-logo-7"] {
    -webkit-animation: animate-svg-stroke-7 0.2s linear 0.0s both,
    animate-svg-fill-7 0.5s linear 0.0s both;
    animation: animate-svg-stroke-7 0.2s linear 0.0s both,
    animate-svg-fill-7 0.5s linear 0.0s both;
}

@-webkit-keyframes animate-svg-stroke-8 {
    0% {
        stroke-dashoffset: 101.44457244873047px;
        stroke-dasharray: 101.44457244873047px;
    }

100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 101.44457244873047px;
    }
}

@keyframes animate-svg-stroke-8 {
    0% {
        stroke-dashoffset: 101.44457244873047px;
        stroke-dasharray: 101.44457244873047px;
    }

100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 101.44457244873047px;
    }
}

@-webkit-keyframes animate-svg-fill-8 {
    0% {
        fill: #EAEEF6;
    }

100% {
        fill: rgb(32, 69, 144);
    }
}

@keyframes animate-svg-fill-8 {
    0% {
        fill: #EAEEF6;
    }

100% {
        fill: rgb(32, 69, 144);
    }
}

.sticky [class*="svg-logo-8"] {
    -webkit-animation: animate-svg-stroke-8 0.2s linear 0.1s both,
    animate-svg-fill-8 0.5s linear 0.1s both;
    animation: animate-svg-stroke-8 0.2s linear 0.1s both,
    animate-svg-fill-8 0.5s linear 0.1s both;
}

@-webkit-keyframes animate-svg-stroke-9 {
    0% {
        stroke-dashoffset: 55.11680603027344px;
        stroke-dasharray: 55.11680603027344px;
    }

100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 55.11680603027344px;
    }
}

@keyframes animate-svg-stroke-9 {
    0% {
        stroke-dashoffset: 55.11680603027344px;
        stroke-dasharray: 55.11680603027344px;
    }

100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 55.11680603027344px;
    }
}

@-webkit-keyframes animate-svg-fill-9 {
    0% {
        fill: #EAEEF6;
    }

100% {
        fill: rgb(32, 69, 144);
    }
}

@keyframes animate-svg-fill-9 {
    0% {
        fill: #EAEEF6;
    }

100% {
        fill: rgb(32, 69, 144);
    }
}

.sticky [class*="svg-logo-9"] {
    -webkit-animation: animate-svg-stroke-9 0.2s linear 0.2s both,
    animate-svg-fill-9 0.5s linear 0.2s both;
    animation: animate-svg-stroke-9 0.2s linear 0.2s both,
    animate-svg-fill-9 0.5s linear 0.2s both;
}

@-webkit-keyframes animate-svg-stroke-10 {
    0% {
        stroke-dashoffset: 106.07046508789062px;
        stroke-dasharray: 106.07046508789062px;
    }

100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 106.07046508789062px;
    }
}

@keyframes animate-svg-stroke-10 {
    0% {
        stroke-dashoffset: 106.07046508789062px;
        stroke-dasharray: 106.07046508789062px;
    }

100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 106.07046508789062px;
    }
}

@-webkit-keyframes animate-svg-fill-10 {
    0% {
        fill: #EAEEF6;
    }

100% {
        fill: rgb(32, 69, 144);
    }
}

@keyframes animate-svg-fill-10 {
    0% {
        fill: #EAEEF6;
    }

100% {
        fill: rgb(32, 69, 144);
    }
}

.sticky [class*="svg-logo-10"] {
    -webkit-animation: animate-svg-stroke-10 0.2s linear 0.3s both,
    animate-svg-fill-10 0.5s linear 0.3s both;
    animation: animate-svg-stroke-10 0.2s linear 0.3s both,
    animate-svg-fill-10 0.5s linear 0.3s both;
}

@-webkit-keyframes animate-svg-stroke-11 {
    0% {
        stroke-dashoffset: 101.84962463378906px;
        stroke-dasharray: 101.84962463378906px;
    }

100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 101.84962463378906px;
    }
}

@keyframes animate-svg-stroke-11 {
    0% {
        stroke-dashoffset: 101.84962463378906px;
        stroke-dasharray: 101.84962463378906px;
    }

100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 101.84962463378906px;
    }
}

@-webkit-keyframes animate-svg-fill-11 {
    0% {
        fill: #EAEEF6;
    }

100% {
        fill: rgb(32, 69, 144);
    }
}

@keyframes animate-svg-fill-11 {
    0% {
        fill: #EAEEF6;
    }

100% {
        fill: rgb(32, 69, 144);
    }
}

.sticky [class*="svg-logo-11"] {
    -webkit-animation: animate-svg-stroke-11 0.2s linear 0.4s both,
    animate-svg-fill-11 0.5s linear 0.4s both;
    animation: animate-svg-stroke-11 0.2s linear 0.4s both,
    animate-svg-fill-11 0.5s linear 0.4s both;
}

@-webkit-keyframes animate-svg-stroke-12 {
    0% {
        stroke-dashoffset: 94.69810485839844px;
        stroke-dasharray: 94.69810485839844px;
    }

100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 94.69810485839844px;
    }
}

@keyframes animate-svg-stroke-12 {
    0% {
        stroke-dashoffset: 94.69810485839844px;
        stroke-dasharray: 94.69810485839844px;
    }

100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 94.69810485839844px;
    }
}

@-webkit-keyframes animate-svg-fill-12 {
    0% {
        fill: #EAEEF6;
    }

100% {
        fill: rgb(32, 69, 144);
    }
}

@keyframes animate-svg-fill-12 {
    0% {
        fill: #EAEEF6;
    }

100% {
        fill: rgb(32, 69, 144);
    }
}

.sticky [class*="svg-logo-12"] {
    -webkit-animation: animate-svg-stroke-12 0.2s linear 0.5s both,
    animate-svg-fill-12 0.5s linear 0.5s both;
    animation: animate-svg-stroke-12 0.2s linear 0.5s both,
    animate-svg-fill-12 0.5s linear 0.5s both;
}

@-webkit-keyframes animate-svg-stroke-13 {
    0% {
        stroke-dashoffset: 69.75379943847656px;
        stroke-dasharray: 69.75379943847656px;
    }

100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 69.75379943847656px;
    }
}

@keyframes animate-svg-stroke-13 {
    0% {
        stroke-dashoffset: 69.75379943847656px;
        stroke-dasharray: 69.75379943847656px;
    }

100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 69.75379943847656px;
    }
}

@-webkit-keyframes animate-svg-fill-13 {
    0% {
        fill: #EAEEF6;
    }

100% {
        fill: rgb(32, 69, 144);
    }
}

@keyframes animate-svg-fill-13 {
    0% {
        fill: #EAEEF6;
    }

100% {
        fill: rgb(32, 69, 144);
    }
}

.sticky [class*="svg-logo-13"] {
    -webkit-animation: animate-svg-stroke-13 0.2s linear 0.6s both,
    animate-svg-fill-13 0.5s linear 1.4000000000000001s both;
    animation: animate-svg-stroke-13 0.2s linear 0.6s both,
    animate-svg-fill-13 0.5s linear 0.6s both;
}

@-webkit-keyframes animate-svg-stroke-14 {
    0% {
        stroke-dashoffset: 96.4815902709961px;
        stroke-dasharray: 96.4815902709961px;
    }

100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 96.4815902709961px;
    }
}

@keyframes animate-svg-stroke-14 {
    0% {
        stroke-dashoffset: 96.4815902709961px;
        stroke-dasharray: 96.4815902709961px;
    }

100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 96.4815902709961px;
    }
}

@-webkit-keyframes animate-svg-fill-14 {
    0% {
        fill: #EAEEF6;
    }

100% {
        fill: rgb(32, 69, 144);
    }
}

@keyframes animate-svg-fill-14 {
    0% {
        fill: #EAEEF6;
    }

100% {
        fill: rgb(32, 69, 144);
    }
}

.sticky [class*="svg-logo-14"] {
    -webkit-animation: animate-svg-stroke-14 0.2s linear 0.7s both,
    animate-svg-fill-14 0.5s linear 0.7s both;
    animation: animate-svg-stroke-14 0.2s linear 0.7s both,
    animate-svg-fill-14 0.5s linear 0.7s both;
}

@-webkit-keyframes animate-svg-stroke-15 {
    0% {
        stroke-dashoffset: 109.27169036865234px;
        stroke-dasharray: 109.27169036865234px;
    }

100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 109.27169036865234px;
    }
}

@keyframes animate-svg-stroke-15 {
    0% {
        stroke-dashoffset: 109.27169036865234px;
        stroke-dasharray: 109.27169036865234px;
    }

100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 109.27169036865234px;
    }
}

@-webkit-keyframes animate-svg-fill-15 {
    0% {
        fill: #EAEEF6;
    }

100% {
        fill: rgb(32, 69, 144);
    }
}

@keyframes animate-svg-fill-15 {
    0% {
        fill: #EAEEF6;
    }

100% {
        fill: rgb(32, 69, 144);
    }
}

.sticky [class*="svg-logo-15"] {
    -webkit-animation: animate-svg-stroke-15 0.2s linear 0.8s both,
    animate-svg-fill-15 0.5s linear 0.8s both;
    animation: animate-svg-stroke-15 0.2s linear 0.8s both,
    animate-svg-fill-15 0.5s linear 0.8s both;
}

@-webkit-keyframes animate-svg-stroke-16 {
    0% {
        stroke-dashoffset: 88.2460708618164px;
        stroke-dasharray: 88.2460708618164px;
    }

100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 88.2460708618164px;
    }
}

@keyframes animate-svg-stroke-16 {
    0% {
        stroke-dashoffset: 88.2460708618164px;
        stroke-dasharray: 88.2460708618164px;
    }

100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 88.2460708618164px;
    }
}

@-webkit-keyframes animate-svg-fill-16 {
    0% {
        fill: #EAEEF6;
    }

100% {
        fill: rgb(32, 69, 144);
    }
}

@keyframes animate-svg-fill-16 {
    0% {
        fill: #EAEEF6;
    }

100% {
        fill: rgb(32, 69, 144);
    }
}

.sticky [class*="svg-logo-16"] {
    -webkit-animation: animate-svg-stroke-16 0.2s linear 0.9s both,
    animate-svg-fill-16 0.5s linear  0.9s both;
    animation: animate-svg-stroke-16 0.2s linear 0.9s both,
    animate-svg-fill-16 0.5s linear 0.9s both;
}
.step:hover {
    .step-arrow-first {
        animation: animate-step-arrow-first 1s linear 0s infinite;
    }
    .step-arrow-last {
        animation: animate-step-arrow-last 1s linear 0s infinite;
    }
}

@keyframes animate-step-arrow-first {
    0% {
        transform: translateX(0px);
        opacity: 1;
    }
    100% {
        transform: translateX(20px);
        opacity: 0;
    }
}
@keyframes animate-step-arrow-last {
    0% {
        transform: translateX(0px);
        opacity: 1;
    }
    100% {
        transform: translateX(30px);
        opacity: 0;
        fill: #3b73dd;
    }
}
@keyframes animate-banner-image {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@mixin nth-ani-delay($delay_items: 7, $delay_time: 0.2s){
    @for $i from 1 through $delay_items {
        &:nth-child(#{$i}) {
            animation-delay: $delay_time * $i;
        }
    }
}
body.entry-section-home {
    section.banner {
        .title {
            max-width: 790px;
        }
    }
}
@keyframes animate-banner-lights {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.7;
    }
}
@keyframes animate-banner-info-box {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}
@keyframes animate-post {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}
@media (min-width: 1200px) {
    section.banner:not(.banner-post) {
        &.animate {
            .title {
                opacity: 1;
            }
        }

.image {
            animation: animate-banner-image 2s linear 0s;
        }

@keyframes description-glow {
            0% {
                opacity: 0;
                transform: translateX(20px)
            }
            100% {
                opacity: 1;
                transform: translateX(0)
            }
        }
        @keyframes button-glow {
            0% {
                opacity: 0;
                transform: translateX(20px)
            }
            100% {
                opacity: 1;
                transform: translateX(0)
            }
        }

.title {
            opacity: 0;
            animation: description-glow 1s 0s ease both;
        }

.description {
            opacity: 0;
            animation: description-glow 1s 0s ease both;
            animation-delay: 0.2s;
        }

.button-holder {
            .button-custom {
                animation: button-glow 1s 0s ease both;

&:nth-child(1) {
                    animation-delay: 0.4s;
                }

&:nth-child(2) {
                    animation-delay: 0.5s;
                }

&:nth-child(3) {
                    animation-delay: 0.6s;
                }
            }
        }
    }
    section.banner .info-box {
        animation: animate-banner-info-box 0.5s 0.5s linear both;
    }
    section.banner .lights {
        animation: animate-banner-lights 1s 1s linear both;

.light {
            position: absolute;
            width: 0px;
            background-color: white;
            box-shadow: #e9f1f1 0px 0px 20px 2px;
            opacity: 0;
            top: 100vh;
            bottom: 0px;
            left: 0px;
            right: 0px;
            margin: auto;
        }

.x1 {
            -webkit-animation: floatUp 4s infinite linear;
            -moz-animation: floatUp 4s infinite linear;
            -o-animation: floatUp 4s infinite linear;
            animation: floatUp 4s infinite linear;
            -webkit-transform: scale(1.0);
            -moz-transform: scale(1.0);
            -o-transform: scale(1.0);
            transform: scale(1.0);
        }

.x2 {
            -webkit-animation: floatUp 7s infinite linear;
            -moz-animation: floatUp 7s infinite linear;
            -o-animation: floatUp 7s infinite linear;
            animation: floatUp 7s infinite linear;
            -webkit-transform: scale(1.6);
            -moz-transform: scale(1.6);
            -o-transform: scale(1.6);
            transform: scale(1.6);
            left: 15%;
        }

.x3 {
            -webkit-animation: floatUp 2.5s infinite linear;
            -moz-animation: floatUp 2.5s infinite linear;
            -o-animation: floatUp 2.5s infinite linear;
            animation: floatUp 2.5s infinite linear;
            -webkit-transform: scale(1.5);
            -moz-transform: scale(1.5);
            -o-transform: scale(1.5);
            transform: scale(1.5);
            left: -15%;
        }

.x4 {
            -webkit-animation: floatUp 4.5s infinite linear;
            -moz-animation: floatUp 4.5s infinite linear;
            -o-animation: floatUp 4.5s infinite linear;
            animation: floatUp 4.5s infinite linear;
            -webkit-transform: scale(1.2);
            -moz-transform: scale(1.2);
            -o-transform: scale(1.2);
            transform: scale(1.2);
            left: -34%;
        }

.x5 {
            -webkit-animation: floatUp 8s infinite linear;
            -moz-animation: floatUp 8s infinite linear;
            -o-animation: floatUp 8s infinite linear;
            animation: floatUp 8s infinite linear;
            -webkit-transform: scale(1.2);
            -moz-transform: scale(1.2);
            -o-transform: scale(1.2);
            transform: scale(1.2);
            left: -57%;
        }

.x6 {
            -webkit-animation: floatUp 3s infinite linear;
            -moz-animation: floatUp 3s infinite linear;
            -o-animation: floatUp 3s infinite linear;
            animation: floatUp 3s infinite linear;
            -webkit-transform: scale(.8);
            -moz-transform: scale(.8);
            -o-transform: scale(.8);
            transform: scale(.8);
            left: -81%;
        }

.x7 {
            -webkit-animation: floatUp 5.3s infinite linear;
            -moz-animation: floatUp 5.3s infinite linear;
            -o-animation: floatUp 5.3s infinite linear;
            animation: floatUp 5.3s infinite linear;
            -webkit-transform: scale(3.2);
            -moz-transform: scale(3.2);
            -o-transform: scale(3.2);
            transform: scale(3.2);
            left: 37%;
        }

.x8 {
            -webkit-animation: floatUp 4.7s infinite linear;
            -moz-animation: floatUp 4.7s infinite linear;
            -o-animation: floatUp 4.7s infinite linear;
            animation: floatUp 4.7s infinite linear;
            -webkit-transform: scale(1.7);
            -moz-transform: scale(1.7);
            -o-transform: scale(1.7);
            transform: scale(1.7);
            left: 62%;
        }

.x9 {
            -webkit-animation: floatUp 4.1s infinite linear;
            -moz-animation: floatUp 4.1s infinite linear;
            -o-animation: floatUp 4.1s infinite linear;
            animation: floatUp 4.1s infinite linear;
            -webkit-transform: scale(0.9);
            -moz-transform: scale(0.9);
            -o-transform: scale(0.9);
            transform: scale(0.9);
            left: 85%;
        }

button:focus {
            outline: none;
        }

@-webkit-keyframes floatUp {
            0% {
                top: 100vh;
                opacity: 0;
            }
            25% {
                opacity: 1;
            }
            50% {
                top: 0vh;
                opacity: .8;
            }
            75% {
                opacity: 1;
            }
            100% {
                top: -100vh;
                opacity: 0;
            }
        }
        @-moz-keyframes floatUp {
            0% {
                top: 100vh;
                opacity: 0;
            }
            25% {
                opacity: 1;
            }
            50% {
                top: 0vh;
                opacity: .8;
            }
            75% {
                opacity: 1;
            }
            100% {
                top: -100vh;
                opacity: 0;
            }
        }
        @-o-keyframes floatUp {
            0% {
                top: 100vh;
                opacity: 0;
            }
            25% {
                opacity: 1;
            }
            50% {
                top: 0vh;
                opacity: .8;
            }
            75% {
                opacity: 1;
            }
            100% {
                top: -100vh;
                opacity: 0;
            }
        }
        @keyframes floatUp {
            0% {
                top: 100vh;
                opacity: 0;
            }
            25% {
                opacity: 1;
            }
            50% {
                top: 0vh;
                opacity: .8;
            }
            75% {
                opacity: 1;
            }
            100% {
                top: -100vh;
                opacity: 0;
            }
        }

.header {
            position: absolute;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-family: 'Roboto', sans-serif;
            font-weight: 200;
            color: white;
            font-size: 2em;
        }

#head1, #head2, #head3, #head4, #head5 {
            opacity: 0;
        }

#head1 {
            -webkit-animation: fadeOut 1 5s ease-in;
            -moz-animation: fadeOut 1 5s ease-in;
            -o-animation: fadeOut 1 5s ease-in;
            animation: fadeOut 1 5s ease-in;
        }

#head2 {
            -webkit-animation: fadeOut 1 5s ease-in;
            -moz-animation: fadeOut 1 5s ease-in;
            -o-animation: fadeOut 1 5s ease-in;
            animation: fadeOut 1 5s ease-in;
            -webkit-animation-delay: 6s;
            -moz-animation-delay: 6s;
            -o-animation-delay: 6s;
            animation-delay: 6s;
        }

#head3 {
            -webkit-animation: fadeOut 1 5s ease-in;
            -moz-animation: fadeOut 1 5s ease-in;
            -o-animation: fadeOut 1 5s ease-in;
            animation: fadeOut 1 5s ease-in;
            -webkit-animation-delay: 12s;
            -moz-animation-delay: 12s;
            -o-animation-delay: 12s;
            animation-delay: 12s;
        }

#head4 {
            -webkit-animation: fadeOut 1 5s ease-in;
            -moz-animation: fadeOut 1 5s ease-in;
            -o-animation: fadeOut 1 5s ease-in;
            animation: fadeOut 1 5s ease-in;
            -webkit-animation-delay: 17s;
            -moz-animation-delay: 17s;
            -o-animation-delay: 17s;
            animation-delay: 17s;
        }

#head5 {
            -webkit-animation: finalFade 1 5s ease-in;
            -moz-animation: finalFade 1 5s ease-in;
            -o-animation: finalFade 1 5s ease-in;
            animation: finalFade 1 5s ease-in;
            -webkit-animation-fill-mode: forwards;
            -moz-animation-fill-mode: forwards;
            -o-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
            -webkit-animation-delay: 22s;
            -moz-animation-delay: 22s;
            -o-animation-delay: 22s;
            animation-delay: 22s;
        }

@-webkit-keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

@-moz-keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

@-o-keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

@keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

@-webkit-keyframes fadeOut {
            0% {
                opacity: 0;
            }
            30% {
                opacity: 1;
            }
            80% {
                opacity: .9;
            }
            100% {
                opacity: 0;
            }
        }

@-moz-keyframes fadeOut {
            0% {
                opacity: 0;
            }
            30% {
                opacity: 1;
            }
            80% {
                opacity: .9;
            }
            100% {
                opacity: 0;
            }
        }

@-o-keyframes fadeOut {
            0% {
                opacity: 0;
            }
            30% {
                opacity: 1;
            }
            80% {
                opacity: .9;
            }
            100% {
                opacity: 0;
            }
        }

@keyframes fadeOut {
            0% {
                opacity: 0;
            }
            30% {
                opacity: 1;
            }
            80% {
                opacity: .9;
            }
            100% {
                opacity: 0;
            }
        }

@-webkit-keyframes finalFade {
            0% {
                opacity: 0;
            }
            30% {
                opacity: 1;
            }
            80% {
                opacity: .9;
            }
            100% {
                opacity: 1;
            }
        }

@-moz-keyframes finalFade {
            0% {
                opacity: 0;
            }
            30% {
                opacity: 1;
            }
            80% {
                opacity: .9;
            }
            100% {
                opacity: 1;
            }
        }

@-o-keyframes finalFade {
            0% {
                opacity: 0;
            }
            30% {
                opacity: 1;
            }
            80% {
                opacity: .9;
            }
            100% {
                opacity: 1;
            }
        }

@keyframes finalFade {
            0% {
                opacity: 0;
            }
            30% {
                opacity: 1;
            }
            80% {
                opacity: .9;
            }
            100% {
                opacity: 1;
            }
        }
    }
    section.featured-news {
        .video-holder {
            &.animate {
                .image-holder {
                    .image {
                        transform: scale(1);
                    }
                }

.image-clip {
                    overflow: visible;
                    transform: skewY(0);

img {
                        transform: scale(1);
                    }
                }
            }

.image-clip {
                transition: 1.5s ease-out;

img {
                    transform: scale(1);
                    transition: 1.5s ease-out;
                }
            }

.image-holder {
                overflow: hidden;
            }
        }
    }
    section.image-boxes {
        overflow: hidden;

.image-box {
            &.image-box-small {
                .image-holder .image {
                    transform: scale(1);
                }
            }

&.animate {
                .image-clip {
                    clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
                    overflow: visible;
                    transform: skewY(0);

img {
                        transform: scale(1);
                    }
                }

.content-holder {
                    opacity: 1;
                }

.position-left {
                    .content-holder {
                        transform: translateX(0px);
                    }

.decor {
                        opacity: 1;
                        transform: translateX(0px);
                    }
                }

.position-right {
                    .content-holder {
                        transform: translateX(0px);
                    }

.decor {
                        opacity: 1;
                        transform: translateX(0px);
                    }
                }

.image-holder {
                    overflow: hidden;

.image {
                        transform: scale(1);
                    }
                }
            }

.position-left {
                .content-holder {
                    transform: translateX(50px);
                    transition: 1s ease-out;
                }

.decor {
                    transform: translateX(-40px);
                }
            }

.position-right {
                .content-holder {
                    transform: translateX(-50px);
                    transition: 1s ease-out;
                }

.decor {
                    transform: translateX(40px);
                }
            }

.content-holder {
                opacity: 0;
                transition: 1s ease-out;
            }

.decor {
                transition: 1s ease-out;
            }

.image-holder {
                overflow: hidden;
            }

.image-clip {
                transition: 1.5s ease-out;

img {
                    transform: scale(1.1);
                    transition: 1.5s ease-out;
                }
            }
        }
    }
    section.services-section {
        .services-preview {
            .service-holder {
                opacity: 0;
                transition: 0.5s ease-out;
                transform: translateX(-50px);

&:nth-child(2) {
                    transition-delay: 0.3s;
                }

&:nth-child(3) {
                    transition-delay: 0.6s;
                }
            }
        }

.image-holder {
            .image {
                filter: grayscale(1);
                transition: 1.5s ease-out;

}
        }

.image-clip {
            transition: 1.5s ease-out;

img {
                transform: scale(1.1);
                transition: 1.5s ease-out;
            }
        }

&.animate {
            .image-clip {
                img {
                    transform: scale(1);
                }
            }

.service-holder {
                opacity: 1;
                transform: translateX(0px);
            }
        }
    }
    section.blog {
        .posts {
            .post {
                opacity: 0;
                transform: translateY(50px);
                margin-bottom: 30px;

&.animate {
                    animation: animate-post 1s 0s ease both;
                }
            }
        }
    }
    .custom-boxes {
        .box-holder {
            transition: all linear 0.7s;
            opacity: 0;
            transform: translateY(50px);

.box {
                transition: all linear 1s;
            }

&.animate {
                opacity: 1;
                transform: translateY(0px);

.box {

}
            }
        }
    }
}
.map-holder {
    &.empty.active {
        .loader-holder {
            opacity: 1;
            background: transparent;
            .loader {
                display: none;
            }
            .loader-empty {
                transition: all ease 1s;
                opacity: 1;
                transform: scale(1);
            }
        }
        .map-wrapper {
            opacity: 1;
            transition: all ease 1s;
        }
    }
    .map-wrapper {
        opacity: 0;
        transition: all ease 1s;
    }
    &.active {
        .loader-holder {
            opacity: 0;
        }
        .map-wrapper {
            opacity: 1;
        }
    }
    .loader-holder {
        overflow: hidden;
        z-index: 10;
        height: 100%;
        width: 100%;
        position: absolute;
        pointer-events: none;
        left: 0;
        right: 0;
        top: 0;
        background: #F3F7FF;
        border: 1px solid #E0DDDD;
        border-radius: 5px;
        transition: all ease 1s;
    }
    .loader-empty {
        display: flex;
        opacity: 0;
        pointer-events: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 45%;
        transform: scale(0);
        z-index: 2;
        margin: 0 auto;
        width: 108px;
        justify-content: space-between;
    }
    .loader-empty::after , .loader-empty::before  {
        content: '';
        display: inline-block;
        width: 48px;
        height: 48px;
        background-color: #fff;
        background-image:  radial-gradient(circle 14px, #0d161b 100%, transparent 0);
        background-repeat: no-repeat;
        border-radius: 50%;
        animation: eyeMove 10s infinite , blink 10s infinite;
    }
    @keyframes eyeMove {
        0%  , 10% {     background-position: 0px 0px}
        13%  , 40% {     background-position: -15px 0px}
        43%  , 70% {     background-position: 15px 0px}
        73%  , 90% {     background-position: 0px 15px}
        93%  , 100% {     background-position: 0px 0px}
    }
    @keyframes blink {
        0%  , 10% , 12% , 20%, 22%, 40%, 42% , 60%, 62%,  70%, 72% , 90%, 92%, 98% , 100%
        { height: 48px}
        11% , 21% ,41% , 61% , 71% , 91% , 99%
        { height: 18px}
    }
    .loader {
        position: absolute;
        left: 0;
        right: 0;
        top: 45%;
        z-index: 2;
        margin: 0 auto;
        width: 48px;
        height: 48px;
        border: 5px solid #204590;
        border-bottom-color: #FF3D00;
        border-radius: 50%;
        display: inline-block;
        box-sizing: border-box;
        animation: rotation 1s linear infinite;
    }

@keyframes rotation {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

}
.button-custom {
    .loader-button {
        opacity: 0;
        pointer-events: none;
    }
}
.loader-button {
    position: absolute;
    display: inline-block;
    width: 16px;
    height: 16px;
    top: 19px;
    margin: 0 auto;
    left: 0;
    right: 0;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 15px 0 #fff, -32px 0 #fff;
    animation: flash 0.5s ease-out infinite alternate;
    @keyframes flash {
        0% {
            background-color: #FFF2;
            box-shadow: 32px 0 #FFF2, -32px 0 #FFF;
        }
        50% {
            background-color: #FFF;
            box-shadow: 32px 0 #FFF2, -32px 0 #FFF2;
        }
        100% {
            background-color: #FFF2;
            box-shadow: 32px 0 #FFF, -32px 0 #FFF2;
        }
    }
}

/srv/users/craft4/apps/craft4-newsite-space/public/f7c78/../assets/./css/animations.scss