.preloader {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 9999;
background: #fff;
}

.preloader_page {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 9999;
    background: rgba(18, 39, 71);
}


/*index loading*/
.pageload-container {
left: 50%;
top: 50%;
position: absolute;
transform: translate(-50%, -50%);
}

.loading_logo {
    height: 90px;
    display: table;
    margin: 0 auto 2rem;
}

.pageload {
background-color: rgb(229, 233, 235);
height: 2px;
position: relative;
width: 30em;
}

.pageload-bar {
background-size: 30em 2px;
height: 100%;
position: relative;
background-image: linear-gradient(to right, rgb(214, 214, 214), rgba(199, 199, 199, 0.98), rgb(104, 161, 199),
rgb(0, 114, 190), rgb(0, 114, 190), rgb(12, 63, 138));
background-image: -o-linear-gradient(to right, rgb(214, 214, 214), rgba(199, 199, 199, 0.98), rgb(104, 161, 199),
rgb(0, 114, 190), rgb(0, 114, 190), rgb(12, 63, 138));
background-image: -ms-linear-gradient(to right, rgb(214, 214, 214), rgba(199, 199, 199, 0.98), rgb(104, 161, 199),
rgb(0, 114, 190), rgb(0, 114, 190), rgb(12, 63, 138));
background-image: -webkit-linear-gradient(to right, rgb(214, 214, 214), rgba(199, 199, 199, 0.98),
rgb(104, 161, 199), rgb(0, 114, 190), rgb(0, 114, 190), rgb(12, 63, 138));
background-image: -moz-linear-gradient(to right, rgb(214, 214, 214), rgba(199, 199, 199, 0.98), rgb(104, 161, 199),
rgb(0, 114, 190), rgb(0, 114, 190), rgb(12, 63, 138));
animation: cssload-width 1.5s cubic-bezier(0.45, 0, 1, 1) forwards;
-o-animation: cssload-width 1.5s cubic-bezier(0.45, 0, 1, 1) forwards;
-ms-animation: cssload-width 1.5s cubic-bezier(0.45, 0, 1, 1) forwards;
-webkit-animation: cssload-width 1.5s cubic-bezier(0.45, 0, 1, 1) forwards;
-moz-animation: cssload-width 1.5s cubic-bezier(0.45, 0, 1, 1) forwards;
}

.pageload-shadow {
height: 4em;
position: absolute;
top: 100%;
width: 100%;
transform: skew(45deg);
-o-transform: skew(45deg);
-ms-transform: skew(45deg);
-webkit-transform: skew(45deg);
-moz-transform: skew(45deg);
transform-origin: 0 0;
-o-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
background-image: linear-gradient(to bottom, rgb(242, 242, 242), transparent);
background-image: -o-linear-gradient(to bottom, rgb(242, 242, 242), transparent);
background-image: -ms-linear-gradient(to bottom, rgb(242, 242, 242), transparent);
background-image: -webkit-linear-gradient(to bottom, rgb(242, 242, 242), transparent);
background-image: -moz-linear-gradient(to bottom, rgb(242, 242, 242), transparent);
}



@keyframes cssload-width {

0%,
100% {
transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
}

0% {
width: 0;
}

100% {
width: 100%;
}
}

@-o-keyframes cssload-width {

0%,
100% {
-o-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
}

0% {
width: 0;
}

100% {
width: 100%;
}
}

@-ms-keyframes cssload-width {

0%,
100% {
-ms-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
}

0% {
width: 0;
}

100% {
width: 100%;
}
}

@-webkit-keyframes cssload-width {

0%,
100% {
-webkit-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
}

0% {
width: 0;
}

100% {
width: 100%;
}
}

@-moz-keyframes cssload-width {

0%,
100% {
-moz-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
}

0% {
width: 0;
}

100% {
width: 100%;
}
}

@media (max-width:575px) {
    .pageload{
        width: 80vw;
    }
    .loading_logo {
        height: 50px;
        margin: 0 auto 2rem;
    }
}


/*page loading*/
.cssload-spinner {
            position: absolute;
            width: 32px;
            height: 32px;
            left: 50%;
            top: 50%;
            margin-left: -16px;
            margin-top: -16px;
        }

        .cssload-spinner:after,
        .cssload-spinner:before {
            position: absolute;
            content: "";
            border: 1px solid rgb(184, 165, 127);
            width: 30px;
            height: 30px;
        }

        .cssload-spinner:after {
            animation: cssload-spinner1 2.5s linear infinite;
            -o-animation: cssload-spinner1 2.5s linear infinite;
            -ms-animation: cssload-spinner1 2.5s linear infinite;
            -webkit-animation: cssload-spinner1 2.5s linear infinite;
            -moz-animation: cssload-spinner1 2.5s linear infinite;
        }

        .cssload-spinner:before {
            width: 42px;
            height: 42px;
            margin-left: -6.5px;
            margin-top: -6.5px;
            animation: cssload-spinner2 2.5s linear infinite;
            -o-animation: cssload-spinner2 2.5s linear infinite;
            -ms-animation: cssload-spinner2 2.5s linear infinite;
            -webkit-animation: cssload-spinner2 2.5s linear infinite;
            -moz-animation: cssload-spinner2 2.5s linear infinite;
        }



        @keyframes cssload-spinner1 {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        @-o-keyframes cssload-spinner1 {
            from {
                -o-transform: rotate(0deg);
            }

            to {
                -o-transform: rotate(360deg);
            }
        }

        @-ms-keyframes cssload-spinner1 {
            from {
                -ms-transform: rotate(0deg);
            }

            to {
                -ms-transform: rotate(360deg);
            }
        }

        @-webkit-keyframes cssload-spinner1 {
            from {
                -webkit-transform: rotate(0deg);
            }

            to {
                -webkit-transform: rotate(360deg);
            }
        }

        @-moz-keyframes cssload-spinner1 {
            from {
                -moz-transform: rotate(0deg);
            }

            to {
                -moz-transform: rotate(360deg);
            }
        }

        @keyframes cssload-spinner2 {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(-360deg);
            }
        }

        @-o-keyframes cssload-spinner2 {
            from {
                -o-transform: rotate(0deg);
            }

            to {
                -o-transform: rotate(-360deg);
            }
        }

        @-ms-keyframes cssload-spinner2 {
            from {
                -ms-transform: rotate(0deg);
            }

            to {
                -ms-transform: rotate(-360deg);
            }
        }

        @-webkit-keyframes cssload-spinner2 {
            from {
                -webkit-transform: rotate(0deg);
            }

            to {
                -webkit-transform: rotate(-360deg);
            }
        }

        @-moz-keyframes cssload-spinner2 {
            from {
                -moz-transform: rotate(0deg);
            }

            to {
                -moz-transform: rotate(-360deg);
            }
        }