/*
    robot.loader.css v1.0.1
    Author : Asiri Dissanayaka
    Owner : Robot Industries
    Last Modification : Asiri Dissanayaka on 2019-08-16
*/

#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
}

#loader-wrapper img {
        display: block;
        position: relative;
        left: 50%;
        top: 50%;
        width: 108px;
        height: 108px;
        margin: -129px 0 0 -54px;
        z-index: 1001;
    }

#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px dashed #006876;
    -webkit-animation: spin 2s linear infinite; /*prevent middle image from spinning*/
    animation: spin 2s linear infinite;
    z-index: 1001;
    box-shadow: 0 0 10px #000000;
    box-shadow: 0 0 10px rgba(0,0,0,0.25);
}

    #loader:before {
        content: "";
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        border-radius: 50%;
        border: 3px dashed #006876;
        -webkit-animation: spin 3s linear infinite;
        animation: spin 3s linear infinite;
        box-shadow: 0 0 10px #000000;
        box-shadow: 0 0 10px rgba(0,0,0,0.25);
    }

    #loader:after {
        content: "";
        position: absolute;
        top: 15px;
        left: 15px;
        right: 15px;
        bottom: 15px;
        border-radius: 50%;
        border: 3px dashed #006876;
        -webkit-animation: spin 1.5s linear infinite;
        animation: spin 1.5s linear infinite;
        box-shadow: 0 0 10px #000000;
        box-shadow: 0 0 10px rgba(0,0,0,0.25);
    }

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg); /* IE 9 */
        transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
    }

    100% {
        -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg); /* IE 9 */
        transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg); /* IE 9 */
        transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
    }

    100% {
        -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg); /* IE 9 */
        transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */
    }
}

#loader-wrapper .loader-section {
    position: fixed;
    top: 0;
    width: 50%;
    height: 100%;
    background: #FFFFFF;
    opacity: 0.5;
    z-index: 1000;
}

    #loader-wrapper .loader-section.section-left {
        left: 0;
    }

    #loader-wrapper .loader-section.section-right {
        right: 0;
    }

/* Loaded styles */

.loaded #loader-wrapper .loader-section.section-left {
    -webkit-transform: translateX(-100%); /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: translateX(-100%); /* IE 9 */
    transform: translateX(-100%); /* Firefox 16+, IE 10+, Opera */
    -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6  */
    transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+  */
}

.loaded #loader-wrapper .loader-section.section-right {
    -webkit-transform: translateX(100%); /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: translateX(100%); /* IE 9 */
    transform: translateX(100%); /* Firefox 16+, IE 10+, Opera */
    -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6  */
    transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+  */
}

.loaded #loader {
    opacity: 0;
    -webkit-transform: translateY(100%); /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: translateY(100%); /* IE 9 */
    transform: translateY(-100%); /* Chrome, Opera 15+, Safari 3.1+ */
    -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6  */
    transition: all 0.3s ease-out; /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+  */
}

.loaded #loader-wrapper {
    visibility: hidden;
    -webkit-transform: translateY(-100%); /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: translateY(-100%); /* IE 9 */
    transform: translateY(-100%); /* Firefox 16+, IE 10+, Opera */
    -webkit-transition: all 0.3s 1s ease-out; /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6  */
    transition: all 0.3s 1s ease-out; /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+  */
}

/*unloading*/
.unload #loader-wrapper .loader-section.section-left {
    -webkit-transform: translateX(0); /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: translateX(0); /* IE 9 */
    transform: translateX(0); /* Firefox 16+, IE 10+, Opera */
    transition: all 0.3s 0.7s ease-in; /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+  */
}

.unload #loader-wrapper .loader-section.section-right {
    -webkit-transform: translateX(0); /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: translateX(0); /* IE 9 */
    transform: translateX(0); /* Firefox 16+, IE 10+, Opera */
    transition: all 0.3s 0.7s ease-in; /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+  */
}

.unload #loader {
    opacity: 1;
    -webkit-transition: all 0.3s ease-in; /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6  */
    transition: all 0.3s ease-in; /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+  */
}

.unload #loader-wrapper {
    visibility: visible;
    transform: translateY(0); /* Firefox 16+, IE 10+, Opera */
    transition: all 0.3s 0.7s ease-in; /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+  */
}
/*unloading*/

/*working*/
.working #loader-wrapper {
    opacity: 1;
    transform: translateY(0); /* Firefox 16+, IE 10+, Opera */
    -webkit-transition: all 0.3s ease-in; /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6  */
    transition: all 0.3s ease-in; /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+  */
}

.working .loader-section {
    opacity: 0;
}

.working #loader-wrapper .loader-section.section-left {
    /*visibility: hidden;*/
    transform: translateX(0); /* Firefox 16+, IE 10+, Opera */
    transition: all 0.3s 0.7s ease-in; /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+  */
}

.working #loader-wrapper .loader-section.section-right {
    /*visibility: hidden;*/
    transform: translateX(0); /* Firefox 16+, IE 10+, Opera */
    transition: all 0.3s 0.7s ease-in; /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+  */
}
/*working*/

/*done*/
.done #loader-wrapper {
    visibility: hidden;
    transform: translateY(-100%); /* Firefox 16+, IE 10+, Opera */
    transition: all 0.3s ease-in; /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+  */
}

.done .loader-section.loader-section.section-left {
    opacity: 0;
    transform: translateX(-100%); /* Firefox 16+, IE 10+, Opera */
}

.done .loader-section.loader-section.section-right {
    opacity: 0;
    transform: translateX(100%); /* Firefox 16+, IE 10+, Opera */
}
/*done*/