// BEGIN PAGELOADER
#preloader {
    button.show_demo {
        display: block;
        margin: auto;
    }
    .spinner {
        background: @brand-primary;
        height: 200px;
        &.demo {
            position: fixed;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            z-index: 1000;
        }
    }
    #container {
        margin: -45px -60px;
        width: 120px;
        height: 90px;
        position: absolute;
        top: 50%;
        left: 50%;
    }
    #dot {
        background: #FFF;
        border-radius: 50%;
        width: 30px;
        height: 30px;
        position: absolute;
        bottom: 30px;
        left: 27px;
        transform-origin: center bottom;
        -webkit-animation: dot .6s ease-in-out infinite;
    }
    @-webkit-keyframes dot {
        0% {
            transform: scale(1, .7)
        }
        20% {
            transform: scale(.7, 1.2)
        }
        40% {
            transform: scale(1, 1)
        }
        50% {
            bottom: 100px;
        }
        46% {
            transform: scale(1, 1)
        }
        80% {
            transform: scale(.7, 1.2)
        }
        90% {
            transform: scale(.7, 1.2)
        }
        100% {
            transform: scale(1, .7)
        }
    }
    .step {
        position: absolute;
        width: 30px;
        height: 30px;
        border-top: 2px solid #FFF;
        top: 0;
        right: 0;
    }
    @-webkit-keyframes anim {
        0% {
            opacity: 0;
            top: 0;
            right: 0;
        }
        50% {
            opacity: 1;
        }
        100% {
            top: 90px;
            right: 90px;
            opacity: 0;
        }
    }
    #s1 {
        -webkit-animation: anim 1.8s linear infinite;
    }
    #s2 {
        -webkit-animation: anim 1.8s linear infinite -.6s;
    }
    #s3 {
        -webkit-animation: anim 1.8s linear infinite -1.2s;
    }
}
// preloader 2
#pageloader2 {
    .spinner {
        background: -webkit-linear-gradient(rgb(30, 30, 33), rgb(23, 23, 27));
        background: -o-linear-gradient(rgb(30, 30, 33), rgb(23, 23, 27));
        background: linear-gradient(rgb(30, 30, 33), rgb(23, 23, 27));
    }
    .center {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
    .bouncywrap {
        position: relative;
    }
    .dotcon {
        display: block;
        float: left;
        width: 50px;
        position: absolute;
    }
    .dc1 {
        -webkit-animation: bouncy1 1.5s infinite;
        left: -40px;
        animation: bouncy1 1.5s infinite;
    }
    .dc2 {
        -webkit-animation: bouncy2 1.5s infinite;
        animation: bouncy2 1.5s infinite;
        left: 0;
    }
    .dc3 {
        -webkit-animation: bouncy3 1.5s infinite;
        animation: bouncy3 1.5s infinite;
        left: 40px;
    }
    .dot {
        height: 10px;
        width: 10px;
        border-radius: 50%;
        background: rgba(150, 160, 180, 0.8);
    }
    @-webkit-keyframes bouncy1 {
        0% {
            -webkit-transform: translate(0px, 0px) rotate(0deg);
        }
        50% {
            -webkit-transform: translate(0px, 0px) rotate(180deg);
        }
        100% {
            -webkit-transform: translate(40px, 0px) rotate(-180deg);
        }
    }
    @keyframes bouncy1 {
        0% {
            transform: translate(0px, 0px) rotate(0deg);
        }
        50% {
            transform: translate(0px, 0px) rotate(180deg);
        }
        100% {
            transform: translate(40px, 0px) rotate(-180deg);
        }
    }
    @-webkit-keyframes bouncy2 {
        0% {
            -webkit-transform: translateX(0px);
        }
        50% {
            -webkit-transform: translateX(-40px);
        }
        100% {
            -webkit-transform: translateX(-40px);
        }
    }
    @keyframes bouncy2 {
        0% {
            transform: translateX(0px);
        }
        50% {
            transform: translateX(-40px);
        }
        100% {
            transform: translateX(-40px);
        }
    }
    @-webkit-keyframes bouncy3 {
        0% {
            -webkit-transform: translateX(0px);
        }
        50% {
            -webkit-transform: translateX(0px);
        }
        100% {
            -webkit-transform: translateX(-40px);
        }
    }
    @keyframes bouncy3 {
        0% {
            transform: translateX(0px);
        }
        50% {
            transform: translateX(0px);
        }
        100% {
            transform: translateX(-40px);
        }
    }
}
// pageloader3
#pageloader3 {
    .spinner {
        background: #111;
    }
    .loader {
        position: relative;
        padding-top: 0px;
        width: 40px;
        margin: auto;
        position: absolute;
        top: 35%;
        left: 47%%;
        .circle {
            position: absolute;
            width: 38px;
            height: 38px;
            opacity: 0;
            transform: rotate(225deg);
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-name: orbit;
            -webkit-animation-duration: 5.5s;
            &:after {
                content: '';
                position: absolute;
                width: 5px;
                height: 5px;
                border-radius: 5px;
                background: #fff;
                /* Pick a color */
            }
            &:nth-child(2) {
                -webkit-animation-delay: 240ms;
            }
            &:nth-child(3) {
                -webkit-animation-delay: 480ms;
            }
            &:nth-child(4) {
                -webkit-animation-delay: 720ms;
            }
            &:nth-child(5) {
                -webkit-animation-delay: 960ms;
            }
        }
    }
    @-webkit-keyframes orbit {
        0% {
            transform: rotate(225deg);
            opacity: 1;
            animation-timing-function: ease-out;
        }
        7% {
            transform: rotate(345deg);
            animation-timing-function: linear;
        }
        30% {
            transform: rotate(455deg);
            animation-timing-function: ease-in-out;
        }
        39% {
            transform: rotate(690deg);
            animation-timing-function: linear;
        }
        70% {
            transform: rotate(815deg);
            opacity: 1;
            animation-timing-function: ease-out;
        }
        75% {
            transform: rotate(945deg);
            animation-timing-function: ease-out;
        }
        76% {
            transform: rotate(945deg);
            opacity: 0;
        }
        100% {
            transform: rotate(945deg);
            opacity: 0;
        }
    }
}
#pageloader4 {
    .spinner {
        padding: 80px 0;
        background: #252525;
        text-align: center;
    }
    .spinftw {
        border-radius: 100%;
        display: inline-block;
        position: absolute;
        top: 35%;
        left: 47%%;
        height: 30px;
        width: 30px;
        -webkit-animation: loader infinite 4s;
        -moz-animation: loader infinite 4s;
        animation: loader infinite 4s;
        box-shadow: 25px 25px #3498db, -25px 25px #9b59b6, -25px -25px #e74c3c, 25px -25px #2ecc71;
    }
    @-webkit-keyframes loader {
        0%, 100% {
            box-shadow: 25px 25px #3498db, -25px 25px #9b59b6, -25px -25px #e74c3c, 25px -25px #2ecc71;
        }
        25% {
            box-shadow: -25px 25px #3498db, -25px -25px #9b59b6, 25px -25px #e74c3c, 25px 25px #2ecc71;
        }
        50% {
            box-shadow: -25px -25px #3498db, 25px -25px #9b59b6, 25px 25px #e74c3c, -25px 25px #2ecc71;
        }
        75% {
            box-shadow: 25px -25px #3498db, 25px 25px #9b59b6, -25px 25px #e74c3c, -25px -25px #2ecc71;
        }
    }
    @-moz-keyframes loader {
        0%, 100% {
            box-shadow: 25px 25px #3498db, -25px 25px #9b59b6, -25px -25px #e74c3c, 25px -25px #2ecc71;
        }
        25% {
            box-shadow: -25px 25px #3498db, -25px -25px #9b59b6, 25px -25px #e74c3c, 25px 25px #2ecc71;
        }
        50% {
            box-shadow: -25px -25px #3498db, 25px -25px #9b59b6, 25px 25px #e74c3c, -25px 25px #2ecc71;
        }
        75% {
            box-shadow: 25px -25px #3498db, 25px 25px #9b59b6, -25px 25px #e74c3c, -25px -25px #2ecc71;
        }
    }
    @keyframes loader {
        0%, 100% {
            box-shadow: 25px 25px #3498db, -25px 25px #9b59b6, -25px -25px #e74c3c, 25px -25px #2ecc71;
        }
        25% {
            box-shadow: -25px 25px #3498db, -25px -25px #9b59b6, 25px -25px #e74c3c, 25px 25px #2ecc71;
        }
        50% {
            box-shadow: -25px -25px #3498db, 25px -25px #9b59b6, 25px 25px #e74c3c, -25px 25px #2ecc71;
        }
        75% {
            box-shadow: 25px -25px #3498db, 25px 25px #9b59b6, -25px 25px #e74c3c, -25px -25px #2ecc71;
        }
    }
}
#pageloader5 {
    .spinner {} main {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
    }
    .spinner-inline {
        position: relative;
    }
    .spinner-inline:before,
    .spinner-inline:after {
        content: "";
        position: relative;
        display: block;
    }
    .spinner-inline:before {
        -webkit-animation: spinner 2.5s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
        width: 50px;
        height: 50px;
        background-color: #fff;
    }
    .spinner-inline:after {
        -webkit-animation: shadow 2.5s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
        bottom: -1.5em;
        height: .25em;
        border-radius: 50%;
        background-color: #e9341a;
    }
    @-webkit-keyframes spinner {
        50% {
            border-radius: 50%;
            -webkit-transform: scale(0.5) rotate(360deg);
        }
        100% {
            -webkit-transform: scale(1) rotate(720deg);
        }
    }
    @-webkit-keyframes shadow {
        50% {
            -webkit-transform: scale(0.5);
            background-color: #ec4931;
        }
    }
}
#pageloader6 {
    .spinner {
        overflow-x: hidden;
        overflow-y: hidden;
        width: 100%;
    }
    .bar {
        position: relative;
        height: 2px;
        width: 100%;
        margin: 0 auto;
        background: #fff;
        margin-top: 150px;
    }
    .circle {
        position: absolute;
        top: -30px;
        margin-left: -30px;
        height: 60px;
        width: 60px;
        left: 0;
        background: #fff;
        border-radius: 30%;
        -webkit-animation: move 5s infinite;
    }
    p {
        position: absolute;
        top: -35px;
        right: -85px;
        text-transform: uppercase;
        color: #347fc3;
        font-family: helvetica, sans-serif;
        font-weight: bold;
    }
    @-webkit-keyframes move {
        0% {
            left: 0;
        }
        50% {
            left: 100%;
            -webkit-transform: rotate(450deg);
            width: 150px;
            height: 150px;
        }
        75% {
            left: 100%;
            -webkit-transform: rotate(450deg);
            width: 150px;
            height: 150px;
        }
        100 {
            right: 100%;
        }
    }
}
// pageloader7
#pageloader7 {
    .spinner {
        margin: 0;
        padding: 0;
        background: #191f27;
    }
    .container {
        margin: -45px -60px;
        width: 120px;
        height: 90px;
        position: absolute;
        top: 35%;
        left: 50%;
    }
    .ball {
        width: 10px;
        height: 10px;
        margin: 10px auto;
        border-radius: 50px;
    }
    .ball:nth-child(1) {
        background: #ff005d;
        -webkit-animation: right 1s infinite ease-in-out;
        -moz-animation: right 1s infinite ease-in-out;
        animation: right 1s infinite ease-in-out;
    }
    .ball:nth-child(2) {
        background: #35ff99;
        -webkit-animation: left 1.1s infinite ease-in-out;
        -moz-animation: left 1.1s infinite ease-in-out;
        animation: left 1.1s infinite ease-in-out;
    }
    .ball:nth-child(3) {
        background: #008597;
        -webkit-animation: right 1.05s infinite ease-in-out;
        -moz-animation: right 1.05s infinite ease-in-out;
        animation: right 1.05s infinite ease-in-out;
    }
    .ball:nth-child(4) {
        background: #ffcc00;
        -webkit-animation: left 1.15s infinite ease-in-out;
        -moz-animation: left 1.15s infinite ease-in-out;
        animation: left 1.15s infinite ease-in-out;
    }
    .ball:nth-child(5) {
        background: #2d3443;
        -webkit-animation: right 1.1s infinite ease-in-out;
        -moz-animation: right 1.1s infinite ease-in-out;
        animation: right 1.1s infinite ease-in-out;
    }
    .ball:nth-child(6) {
        background: #ff7c35;
        -webkit-animation: left 1.05s infinite ease-in-out;
        -moz-animation: left 1.05s infinite ease-in-out;
        animation: left 1.05s infinite ease-in-out;
    }
    .ball:nth-child(7) {
        background: #4d407c;
        -webkit-animation: right 1s infinite ease-in-out;
        -moz-animation: right 1s infinite ease-in-out;
        animation: right 1s infinite ease-in-out;
    }
    @-webkit-keyframes right {
        0% {
            -webkit-transform: translate(-15px);
        }
        50% {
            -webkit-transform: translate(15px);
        }
        100% {
            -webkit-transform: translate(-15px);
        }
    }
    @-webkit-keyframes left {
        0% {
            -webkit-transform: translate(15px);
        }
        50% {
            -webkit-transform: translate(-15px);
        }
        100% {
            -webkit-transform: translate(15px);
        }
    }
    @-moz-keyframes right {
        0% {
            -moz-transform: translate(-15px);
        }
        50% {
            -moz-transform: translate(15px);
        }
        100% {
            -moz-transform: translate(-15px);
        }
    }
    @-moz-keyframes left {
        0% {
            -moz-transform: translate(15px);
        }
        50% {
            -moz-transform: translate(-15px);
        }
        100% {
            -moz-transform: translate(15px);
        }
    }
    @keyframes right {
        0% {
            transform: translate(-15px);
        }
        50% {
            transform: translate(15px);
        }
        100% {
            transform: translate(-15px);
        }
    }
    @keyframes left {
        0% {
            transform: translate(15px);
        }
        50% {
            transform: translate(-15px);
        }
        100% {
            transform: translate(15px);
        }
    }
}
#pageloader-img {
    img {
        margin-right: 15px;
        max-width: 32px;
    }
}