/* ******************************
:: 5.0 PRELOADER AREA CSS
****************************** */
.preloader-main {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 99999;
}

.preloader-main .preloader-wapper {
    height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.preloader-main .loader-section {
    position: fixed;
    top: 0;
    height: 100%;
    width: calc(50% + 1px);
    background-color: #fff;
}

.preloader-main .loader-section.section-left {
    left: 0;
}

.preloader-main .loader-section.section-right {
    right: 0;
}

.preloader-main .preloader {
    position: relative;
    display: block;
    height: 80px;
    width: 170px;
    top: -40px;
    z-index: 99;
}

.preloader-main .loaded .section-right {
    -webkit-transform: translateX(101%);
    transform: translateX(101%);
    -webkit-transition: 0.3s 0.1s all cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: 0.3s 0.1s all cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.preloader-main .loaded .section-left {
    -webkit-transform: translateX(-101%);
    transform: translateX(-101%);
    -webkit-transition: 0.3s 0.1s all cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: 0.3s 0.1s all cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.preloader-main .loaded .preloader {
    -webkit-transition: 0.3s ease-out;
    transition: 0.3s ease-out;
    visibility: hidden;
    opacity: 0;
}

.preloader-main circle.dot:nth-of-type(1) {
    -webkit-animation: slide 2s ease infinite;
    animation: slide 2s ease infinite;
}

.preloader-main circle.dot:nth-of-type(2) {
    -webkit-transform: translateX(55px);
    transform: translateX(55px);
    -webkit-animation: slide 2s ease infinite;
    animation: slide 2s ease infinite;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

@-webkit-keyframes slide {
    0%,
    100% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
    }

    50% {
        -webkit-transform: translateX(70px);
        transform: translateX(70px);
    }
}

@keyframes slide {
    0%,
    100% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
    }

    50% {
        -webkit-transform: translateX(70px);
        transform: translateX(70px);
    }
}