.pageloader {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    z-index: 99999;
    background-color: $color-template-primary;
    color: $color-template-primary-text;
    @extend .transition-05;
}

.loader-logo {
    @extend .transition-05;

    .logo {
        background-color: lighten($color-template-primary, 15%);
        height: 80px;
        width: 80px;
        line-height: 80px;
        font-size: 50px;
        font-weight: 600;
        border-radius: 50px;
        display: inline-block;
        color: $color-template-primary-text;
        vertical-align: middle;
        margin-right: 20px;
        text-align: center;
        vertical-align: middle;
        position: relative;
        @extend .transition-05;

        .loader-roller {
            display: inline-block;
            width: 80px;
            height: 80px;
            position: absolute;
            left: 0;

            div {
                &:after {
                    width: 5px;
                    height: 5px;
                    background: rgba($color-template-primary-text, 0.6);
                }
            }
        }

        & > span {
            position: absolute;
            top: 0;
            line-height: 25px;
            vertical-align: middle;
            left: auto;
            right: -5px;
            margin: 0 auto;
            font-size: 12px;
            border-radius: 15px;
            width: 24px;
            background-color: $color-template-primary-text;
            color: $color-template-primary;
            ;
        }

        & > span:nth-child(2) {
            position: absolute;
            top: 0;
            line-height: 25px;
            vertical-align: middle;
            left: auto;
            right: -5px;
            margin: 0 auto;
            font-size: 12px;
            border-radius: 15px;
            width: 24px;
            background-color: $color-template-primary-text;
            color: $color-template-primary;
            animation: opacityhide 5s infinite linear;
            -webkit-animation: opacityhide 5s infinite linear;
            -moz-animation: opacityhide 5s infinite linear;
            -ms-animation: opacityhide 5s infinite linear;
        }
    }

    .logo-text {
        text-align: left;
        display: inline-block;
        vertical-align: middle;
        font-size: 30px;
        line-height: 1;
        margin: -4px 0 0 0;
        font-weight: 400;
        @extend .transition-05;

        span {
            font-size: 40px;
            line-height: 1;
            display: block;
        }

        small {
            font-size: 20px;
            line-height: 1;
            opacity: 0.6;
        }
    }
}

.loader-roller {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;

    div {
        animation: loader-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
        -webkit-animation: loader-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
        -moz-animation: loader-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
        -ms-animation: loader-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
        transform-origin: 40px 40px;

        &:after {
            content: " ";
            display: block;
            position: absolute;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: $color-template-primary-text;
            margin: -4px 0 0 -4px;
        }

        &:nth-child(1) {
            animation-delay: -0.036s;
            -webkit-animation-delay: -0.036s;
            -moz-animation-delay: -0.036s;
            -ms-animation-delay: -0.036s;

            &:after {
                top: 63px;
                left: 63px;
            }
        }

        &:nth-child(2) {
            animation-delay: -0.072s;
            -webkit-animation-delay: -0.072s;
            -moz-animation-delay: -0.072s;
            -ms-animation-delay: -0.072s;

            &:after {
                top: 68px;
                left: 56px;
            }
        }

        &:nth-child(3) {
            animation-delay: -0.108s;
            -webkit-animation-delay: -0.108s;
            -moz-animation-delay: -0.108s;
            -ms-animation-delay: -0.108s;

            &:after {
                top: 71px;
                left: 48px;
            }
        }

        &:nth-child(4) {
            animation-delay: -0.144s;
            -webkit-animation-delay: -0.144s;
            -moz-animation-delay: -0.144s;
            -ms-animation-delay: -0.144s;

            &:after {
                top: 72px;
                left: 40px;
            }
        }

        &:nth-child(5) {
            animation-delay: -0.18s;
            -webkit-animation-delay: -0.18s;
            -moz-animation-delay: -0.18s;
            -ms-animation-delay: -0.18s;

            &:after {
                top: 71px;
                left: 32px;
            }
        }

        &:nth-child(6) {
            animation-delay: -0.216s;
            -webkit-animation-delay: -0.216s;
            -moz-animation-delay: -0.216s;
            -ms-animation-delay: -0.216s;

            &:after {
                top: 68px;
                left: 24px;
            }
        }

        &:nth-child(7) {
            animation-delay: -0.252s;
            -webkit-animation-delay: -0.252s;
            -moz-animation-delay: -0.252s;
            -ms-animation-delay: -0.252s;

            &:after {
                top: 63px;
                left: 17px;
            }
        }

        &:nth-child(8) {
            animation-delay: -0.288s;
            -webkit-animation-delay: -0.288s;
            -moz-animation-delay: -0.288s;
            -ms-animation-delay: -0.288s;

            &:after {
                top: 56px;
                left: 12px;
            }
        }

    }
}


@keyframes loader-roller {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes loader-roller {
    0% {
        -webkit-transform: rotate(0deg);
    }

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

@-moz-keyframes loader-roller {
    0% {
        -moz-transform: rotate(0deg);
    }

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

@-ms-keyframes loader-roller {
    0% {
        -ms-transform: rotate(0deg);
    }

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


.loader-ellipsis {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;

    div {
        position: absolute;
        top: 33px;
        width: 13px;
        height: 13px;
        border-radius: 50%;
        background: #fff;
        animation-timing-function: cubic-bezier(0, 1, 1, 0);

        &:nth-child(1) {
            left: 8px;
            animation: loader-ellipsis1 0.6s infinite;
        }

        &:nth-child(2) {
            left: 8px;
            animation: loader-ellipsis2 0.6s infinite;
        }

        &:nth-child(3) {
            left: 32px;
            animation: loader-ellipsis2 0.6s infinite;
        }

        &:nth-child(4) {
            left: 56px;
            animation: loader-ellipsis3 0.6s infinite;
        }
    }

    &.small {
        width: 50px;
        height: 40px;

        div {
            background: $color-template-primary;
            width: 10px;
            height: 10px;
            top: 15px;

            &:nth-child(1) {
                left: 0px;
            }

            &:nth-child(2) {
                left: -8px;
            }

            &:nth-child(3) {
                left: 6px;
            }

            &:nth-child(4) {
                left: 30px;
            }
        }
    }
}


@keyframes loader-ellipsis1 {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes loader-ellipsis3 {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

@keyframes loader-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(24px, 0);
    }
}


.loader-ring {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;

    div {
        box-sizing: border-box;
        display: block;
        position: absolute;
        width: 64px;
        height: 64px;
        margin: 8px;
        border: 4px solid #fff;
        border-radius: 50%;
        display: inline-block;
        vertical-align: middle;
        animation: loader-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
        border-color: $color-template-primary transparent transparent transparent;

        &:nth-child(1) {
            animation-delay: -0.45s;
        }

        &:nth-child(2) {
            animation-delay: -0.3s;
        }

        &:nth-child(3) {
            animation-delay: -0.15s;
        }

    }

    &.small {
        height: 30px;
        width: 30px;

        div {
            height: 30px;
            width: 30px;
            margin: 0px;
        }
    }
}


@keyframes loader-ring {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}