@-webkit-keyframes spinAround {
    from {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

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

@keyframes spinAround {
    from {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

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

.pageloader {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0
}

.pageloader {
    position: fixed;
    padding-top: 2em;
    /*background: #00d1b2;*/
    background: linear-gradient(90deg, white 0%, #E9692B 100%);
    z-index: 999998;
    transition: transform .35s ease-out,-webkit-transform .35s ease-out;
    will-change: transform
}

    .pageloader.is-white {
        background-color: #fff;
        background: #fff
    }

        .pageloader.is-white::after {
            border-color: #0a0a0a;
            -webkit-animation: loader-figure-white 1.15s infinite cubic-bezier(.215,.61,.355,1);
            animation: loader-figure-white 1.15s infinite cubic-bezier(.215,.61,.355,1)
        }

        .pageloader.is-white .title {
            color: #0a0a0a
        }

    .pageloader.is-black {
        background-color: #0a0a0a;
        background: #0a0a0a
    }

        .pageloader.is-black::after {
            border-color: #fff;
            -webkit-animation: loader-figure-black 1.15s infinite cubic-bezier(.215,.61,.355,1);
            animation: loader-figure-black 1.15s infinite cubic-bezier(.215,.61,.355,1)
        }

        .pageloader.is-black .title {
            color: #fff
        }

    .pageloader.is-light {
        background-color: #f5f5f5;
        background: #f5f5f5
    }

        .pageloader.is-light::after {
            border-color: #363636;
            -webkit-animation: loader-figure-light 1.15s infinite cubic-bezier(.215,.61,.355,1);
            animation: loader-figure-light 1.15s infinite cubic-bezier(.215,.61,.355,1)
        }

        .pageloader.is-light .title {
            color: #363636
        }

    .pageloader.is-dark {
        background-color: #363636;
        background: #363636
    }

        .pageloader.is-dark::after {
            border-color: #f5f5f5;
            -webkit-animation: loader-figure-dark 1.15s infinite cubic-bezier(.215,.61,.355,1);
            animation: loader-figure-dark 1.15s infinite cubic-bezier(.215,.61,.355,1)
        }

        .pageloader.is-dark .title {
            color: #f5f5f5
        }

    .pageloader.is-primary {
        background-color: #00d1b2;
        background: #00d1b2
    }

        .pageloader.is-primary::after {
            border-color: #fff;
            -webkit-animation: loader-figure-primary 1.15s infinite cubic-bezier(.215,.61,.355,1);
            animation: loader-figure-primary 1.15s infinite cubic-bezier(.215,.61,.355,1)
        }

        .pageloader.is-primary .title {
            color: #fff
        }

    .pageloader.is-link {
        background-color: #3273dc;
        background: #3273dc
    }

        .pageloader.is-link::after {
            border-color: #fff;
            -webkit-animation: loader-figure-link 1.15s infinite cubic-bezier(.215,.61,.355,1);
            animation: loader-figure-link 1.15s infinite cubic-bezier(.215,.61,.355,1)
        }

        .pageloader.is-link .title {
            color: #fff
        }

    .pageloader.is-info {
        background-color: #209cee;
        background: #209cee
    }

        .pageloader.is-info::after {
            border-color: #fff;
            -webkit-animation: loader-figure-info 1.15s infinite cubic-bezier(.215,.61,.355,1);
            animation: loader-figure-info 1.15s infinite cubic-bezier(.215,.61,.355,1)
        }

        .pageloader.is-info .title {
            color: #fff
        }

    .pageloader.is-success {
        background-color: #23d160;
        background: #23d160
    }

        .pageloader.is-success::after {
            border-color: #fff;
            -webkit-animation: loader-figure-success 1.15s infinite cubic-bezier(.215,.61,.355,1);
            animation: loader-figure-success 1.15s infinite cubic-bezier(.215,.61,.355,1)
        }

        .pageloader.is-success .title {
            color: #fff
        }

    .pageloader.is-warning {
        background-color: #ffdd57;
        background: #ffdd57
    }

        .pageloader.is-warning::after {
            border-color: rgba(0,0,0,.7);
            -webkit-animation: loader-figure-warning 1.15s infinite cubic-bezier(.215,.61,.355,1);
            animation: loader-figure-warning 1.15s infinite cubic-bezier(.215,.61,.355,1)
        }

        .pageloader.is-warning .title {
            color: rgba(0,0,0,.7)
        }

    .pageloader.is-danger {
        background-color: #ff3860;
        background: #ff3860
    }

        .pageloader.is-danger::after {
          
            border-color: #fff;
            -webkit-animation: loader-figure-danger 1.15s infinite cubic-bezier(.215,.61,.355,1);
            animation: loader-figure-danger 1.15s infinite cubic-bezier(.215,.61,.355,1)
        }

        .pageloader.is-danger .title {
            color: #fff
        }

    .pageloader:not(.is-bottom-to-top) {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }

    .pageloader.is-bottom-to-top {
        -webkit-transform: translateY(100%);
        transform: translateY(100%)
    }

    .pageloader.is-left-to-right {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }

    .pageloader.is-right-to-left {
        -webkit-transform: translateX(100%);
        transform: translateX(100%)
    }

    .pageloader.is-active:not(.is-left-to-right), .pageloader.is-active:not(.is-right-to-left) {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    .pageloader.is-active.is-left-to-right, .pageloader.is-active.is-right-to-left {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    .pageloader::after {
        background: url("../Img/img.png");
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        border-radius: 100%;
        content: '';
        z-index: 9999;
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        width: 0;
        height: 0;
        box-sizing: border-box;
        border: 0 solid #fff;
        -webkit-animation: loader-figure 1.15s infinite cubic-bezier(.215,.61,.355,1);
        animation: loader-figure 1.15s infinite cubic-bezier(.215,.61,.355,1)
    }

    .pageloader .title {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        margin: 2em 0 0 0;
        font-size: .875em;
        letter-spacing: .1em;
        line-height: 1.5em;
        color: #fff;
        white-space: nowrap
    }

@-webkit-keyframes loader-figure {
    0% {
        height: 0;
        width: 0;
        background-color: #fff
    }

    29% {
        background-color: #fff
    }

    30% {
        height: 2em;
        width: 2em;
        background-color: transparent;
        border-width: 1em;
        opacity: 1
    }

    100% {
        height: 2em;
        width: 2em;
        border-width: 0;
        opacity: 0;
        background-color: transparent
    }
}

@keyframes loader-figure {
    0% {
        height: 0;
        width: 0;
        background-color: #fff
    }

    29% {
        background-color: #fff
    }

    30% {
        height: 2em;
        width: 2em;
        background-color: transparent;
        border-width: 1em;
        opacity: 1
    }

    100% {
        height: 2em;
        width: 2em;
        border-width: 0;
        opacity: 0;
        background-color: transparent
    }
}

@-webkit-keyframes loader-figure-white {
    0% {
        height: 0;
        width: 0;
        background-color: #0a0a0a
    }

    29% {
        background-color: #0a0a0a
    }

    30% {
        height: 2em;
        width: 2em;
        background-color: transparent;
        border-width: 1em;
        opacity: 1
    }

    100% {
        height: 2em;
        width: 2em;
        border-width: 0;
        opacity: 0;
        background-color: transparent
    }
}

@keyframes loader-figure-white {
    0% {
        height: 0;
        width: 0;
        background-color: #0a0a0a
    }

    29% {
        background-color: #0a0a0a
    }

    30% {
        height: 2em;
        width: 2em;
        background-color: transparent;
        border-width: 1em;
        opacity: 1
    }

    100% {
        height: 2em;
        width: 2em;
        border-width: 0;
        opacity: 0;
        background-color: transparent
    }
}

@-webkit-keyframes loader-figure-black {
    0% {
        height: 0;
        width: 0;
        background-color: #fff
    }

    29% {
        background-color: #fff
    }

    30% {
        height: 2em;
        width: 2em;
        background-color: transparent;
        border-width: 1em;
        opacity: 1
    }

    100% {
        height: 2em;
        width: 2em;
        border-width: 0;
        opacity: 0;
        background-color: transparent
    }
}

@keyframes loader-figure-black {
    0% {
        height: 0;
        width: 0;
        background-color: #fff
    }

    29% {
        background-color: #fff
    }

    30% {
        height: 2em;
        width: 2em;
        background-color: transparent;
        border-width: 1em;
        opacity: 1
    }

    100% {
        height: 2em;
        width: 2em;
        border-width: 0;
        opacity: 0;
        background-color: transparent
    }
}

@-webkit-keyframes loader-figure-light {
    0% {
        height: 0;
        width: 0;
        background-color: #363636
    }

    29% {
        background-color: #363636
    }

    30% {
        height: 2em;
        width: 2em;
        background-color: transparent;
        border-width: 1em;
        opacity: 1
    }

    100% {
        height: 2em;
        width: 2em;
        border-width: 0;
        opacity: 0;
        background-color: transparent
    }
}

@keyframes loader-figure-light {
    0% {
        height: 0;
        width: 0;
        background-color: #363636
    }

    29% {
        background-color: #363636
    }

    30% {
        height: 2em;
        width: 2em;
        background-color: transparent;
        border-width: 1em;
        opacity: 1
    }

    100% {
        height: 2em;
        width: 2em;
        border-width: 0;
        opacity: 0;
        background-color: transparent
    }
}

@-webkit-keyframes loader-figure-dark {
    0% {
        height: 0;
        width: 0;
        background-color: #f5f5f5
    }

    29% {
        background-color: #f5f5f5
    }

    30% {
        height: 2em;
        width: 2em;
        background-color: transparent;
        border-width: 1em;
        opacity: 1
    }

    100% {
        height: 2em;
        width: 2em;
        border-width: 0;
        opacity: 0;
        background-color: transparent
    }
}

@keyframes loader-figure-dark {
    0% {
        height: 0;
        width: 0;
        background-color: #f5f5f5
    }

    29% {
        background-color: #f5f5f5
    }

    30% {
        height: 2em;
        width: 2em;
        background-color: transparent;
        border-width: 1em;
        opacity: 1
    }

    100% {
        height: 2em;
        width: 2em;
        border-width: 0;
        opacity: 0;
        background-color: transparent
    }
}

@-webkit-keyframes loader-figure-primary {
    0% {
        height: 0;
        width: 0;
        background-color: #fff
    }

    29% {
        background-color: #fff
    }

    30% {
        height: 2em;
        width: 2em;
        background-color: transparent;
        border-width: 1em;
        opacity: 1
    }

    100% {
        height: 2em;
        width: 2em;
        border-width: 0;
        opacity: 0;
        background-color: transparent
    }
}

@keyframes loader-figure-primary {
    0% {
        height: 0;
        width: 0;
        background-color: #fff
    }

    29% {
        background-color: #fff
    }

    30% {
        height: 2em;
        width: 2em;
        background-color: transparent;
        border-width: 1em;
        opacity: 1
    }

    100% {
        height: 2em;
        width: 2em;
        border-width: 0;
        opacity: 0;
        background-color: transparent
    }
}

@-webkit-keyframes loader-figure-link {
    0% {
        height: 0;
        width: 0;
        background-color: #fff
    }

    29% {
        background-color: #fff
    }

    30% {
        height: 2em;
        width: 2em;
        background-color: transparent;
        border-width: 1em;
        opacity: 1
    }

    100% {
        height: 2em;
        width: 2em;
        border-width: 0;
        opacity: 0;
        background-color: transparent
    }
}

@keyframes loader-figure-link {
    0% {
        height: 0;
        width: 0;
        background-color: #fff
    }

    29% {
        background-color: #fff
    }

    30% {
        height: 2em;
        width: 2em;
        background-color: transparent;
        border-width: 1em;
        opacity: 1
    }

    100% {
        height: 2em;
        width: 2em;
        border-width: 0;
        opacity: 0;
        background-color: transparent
    }
}

@-webkit-keyframes loader-figure-info {
    0% {
        height: 0;
        width: 0;
        background-color: #fff
    }

    29% {
        background-color: #fff
    }

    30% {
        height: 2em;
        width: 2em;
        background-color: transparent;
        border-width: 1em;
        opacity: 1
    }

    100% {
        height: 2em;
        width: 2em;
        border-width: 0;
        opacity: 0;
        background-color: transparent
    }
}

@keyframes loader-figure-info {
    0% {
        height: 0;
        width: 0;
        background-color: #fff
    }

    29% {
        background-color: #fff
    }

    30% {
        height: 2em;
        width: 2em;
        background-color: transparent;
        border-width: 1em;
        opacity: 1
    }

    100% {
        height: 2em;
        width: 2em;
        border-width: 0;
        opacity: 0;
        background-color: transparent
    }
}

@-webkit-keyframes loader-figure-success {
    0% {
        height: 0;
        width: 0;
        background-color: #fff
    }

    29% {
        background-color: #fff
    }

    30% {
        height: 2em;
        width: 2em;
        background-color: transparent;
        border-width: 1em;
        opacity: 1
    }

    100% {
        height: 2em;
        width: 2em;
        border-width: 0;
        opacity: 0;
        background-color: transparent
    }
}

@keyframes loader-figure-success {
    0% {
        height: 0;
        width: 0;
        background-color: #fff
    }

    29% {
        background-color: #fff
    }

    30% {
        height: 2em;
        width: 2em;
        background-color: transparent;
        border-width: 1em;
        opacity: 1
    }

    100% {
        height: 2em;
        width: 2em;
        border-width: 0;
        opacity: 0;
        background-color: transparent
    }
}

@-webkit-keyframes loader-figure-warning {
    0% {
        height: 0;
        width: 0;
        background-color: rgba(0,0,0,.7)
    }

    29% {
        background-color: rgba(0,0,0,.7)
    }

    30% {
        height: 2em;
        width: 2em;
        background-color: transparent;
        border-width: 1em;
        opacity: 1
    }

    100% {
        height: 2em;
        width: 2em;
        border-width: 0;
        opacity: 0;
        background-color: transparent
    }
}

@keyframes loader-figure-warning {
    0% {
        height: 0;
        width: 0;
        background-color: rgba(0,0,0,.7)
    }

    29% {
        background-color: rgba(0,0,0,.7)
    }

    30% {
        height: 2em;
        width: 2em;
        background-color: transparent;
        border-width: 1em;
        opacity: 1
    }

    100% {
        height: 2em;
        width: 2em;
        border-width: 0;
        opacity: 0;
        background-color: transparent
    }
}

@-webkit-keyframes loader-figure-danger {
    0% {
        height: 0;
        width: 0;
        background-color: #fff
    }

    29% {
        background-color: #fff
    }

    30% {
        height: 2em;
        width: 2em;
        background-color: transparent;
        border-width: 1em;
        opacity: 1
    }

    100% {
        height: 2em;
        width: 2em;
        border-width: 0;
        opacity: 0;
        background-color: transparent
    }
}

@keyframes loader-figure-danger {
    0% {
        height: 0;
        width: 0;
        background-color: #fff
    }

    29% {
        background-color: #fff
    }

    30% {
        height: 2em;
        width: 2em;
        background-color: transparent;
        border-width: 1em;
        opacity: 1
    }

    100% {
        height: 2em;
        width: 2em;
        border-width: 0;
        opacity: 0;
        background-color: transparent
    }
}