.ctn-preloader {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: default;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 9000
}

    .ctn-preloader .animation-preloader {
        z-index: 1000
    }

        .ctn-preloader .animation-preloader .logo {
            -webkit-animation: logo 2s infinite linear;
            animation: logo  2s infinite linear;
            border-radius: 50%;
            /* border: 3px solid rgba(0, 0, 0, .2);*/
            border-top-color: #01185c;
            height: 9em;
            margin: 0 auto 3.5em auto;
            width: 9em;
        }

        .ctn-preloader .animation-preloader .txt-loading {
            font: bold 7em Poppins, sans-serif;
            text-align: center;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none
        }

            .ctn-preloader .animation-preloader .txt-loading .letters-loading {
                color: rgba(0, 0, 0, .2);
                position: relative
            }

                .ctn-preloader .animation-preloader .txt-loading .letters-loading:before {
                    -webkit-animation: letters-loading 4s infinite;
                    animation: letters-loading 4s infinite;
                    color: #01185c;
                    content: attr(data-text-preloader);
                    left: 0;
                    opacity: 0;
                    font-family: Poppins, sans-serif;
                    position: absolute;
                    top: -3px;
                    -webkit-transform: rotateY(-90deg);
                    transform: rotateY(-90deg)
                }

                .ctn-preloader .animation-preloader .txt-loading .letters-loading.letters_loding_skyblue:before {
                    color: #f6921e
                }

                .ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(2):before {
                    -webkit-animation-delay: .2s;
                    animation-delay: .2s
                }

                .ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(3):before {
                    -webkit-animation-delay: .4s;
                    animation-delay: .4s
                }

                .ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(4):before {
                    -webkit-animation-delay: .6s;
                    animation-delay: .6s
                }

                .ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(5):before {
                    -webkit-animation-delay: .8s;
                    animation-delay: .8s
                }

                .ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(6):before {
                    -webkit-animation-delay: 1s;
                    animation-delay: 1s
                }

                .ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(7):before {
                    -webkit-animation-delay: 1.2s;
                    animation-delay: 1.2s
                }

                .ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(8):before {
                    -webkit-animation-delay: 1.4s;
                    animation-delay: 1.4s
                }

    .ctn-preloader.dark .animation-preloader .logo {
        border-color: rgba(255, 255, 255, .2);
        border-top-color: #fff
    }

    .ctn-preloader.dark .animation-preloader .txt-loading .letters-loading {
        color: rgba(255, 255, 255, .2)
    }

        .ctn-preloader.dark .animation-preloader .txt-loading .letters-loading:before {
            color: #fff
        }

    .ctn-preloader p {
        font-size: 14px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 8px;
        color: #00aae0
    }

    .ctn-preloader .loader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        font-size: 0;
        z-index: 1;
        pointer-events: none
    }

        .ctn-preloader .loader .row {
            height: 100%
        }

        .ctn-preloader .loader .loader-section {
            padding: 0
        }

            .ctn-preloader .loader .loader-section .bg {
                background-color: #fff;
                height: 100%;
                left: 0;
                width: 100%;
                -webkit-transition: all .8s cubic-bezier(.77, 0, .175, 1);
                -o-transition: all .8s cubic-bezier(.77, 0, .175, 1);
                transition: all .8s cubic-bezier(.77, 0, .175, 1)
            }

        .ctn-preloader .loader.dark_bg .loader-section .bg {
            background: #111339
        }

    .ctn-preloader.loaded .animation-preloader {
        opacity: 0;
        -webkit-transition: .3s ease-out;
        -o-transition: .3s ease-out;
        transition: .3s ease-out
    }

    .ctn-preloader.loaded .loader-section .bg {
        width: 0;
        -webkit-transition: .7s .3s allcubic-bezier(.1, .1, .1, 1);
        -o-transition: .7s .3s allcubic-bezier(.1, .1, .1, 1);
        transition: .7s .3s allcubic-bezier(.1, .1, .1, 1)
    }

@-webkit-keyframes logo {
    /*to {
        -webkit-transform: rotateZ(360deg);
        transform: rotateZ(360deg)
    }*/
}

@keyframes logo {
    0% {
        transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
    }

    50% {
        transform: scale(-1, 1);
        -webkit-transform: scale(-1, 1);
        -moz-transform: scale(-1, 1);
        -o-transform: scale(-1, 1);
        -ms-transform: scale(-1, 1);
    }

    100% {
        transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
    }
}
@keyframes dollar {
    0% {
        transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
    }

    50% {
        transform: scale(-1, 1);
        -webkit-transform: scale(-1, 1);
        -moz-transform: scale(-1, 1);
        -o-transform: scale(-1, 1);
        -ms-transform: scale(-1, 1);
    }

    100% {
        transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
    }
}

@-webkit-keyframes letters-loading {
    0%, 100%, 75% {
        opacity: 0;
        -webkit-transform: rotateY(-90deg);
        transform: rotateY(-90deg)
    }

    25%, 50% {
        opacity: 1;
        -webkit-transform: rotateY(0);
        transform: rotateY(0)
    }
}

@keyframes letters-loading {
    0%, 100%, 75% {
        opacity: 0;
        -webkit-transform: rotateY(-90deg);
        transform: rotateY(-90deg)
    }

    25%, 50% {
        opacity: 1;
        -webkit-transform: rotateY(0);
        transform: rotateY(0)
    }
}

@media screen and (max-width:767px) {
    .ctn-preloader .animation-preloader .logo {
        height: 8em;
        width: 8em
    }

    .ctn-preloader .animation-preloader .txt-loading {
        font: bold 3.5em Poppins-Bold, sans-serif
    }
}

@media screen and (max-width:500px) {
    .ctn-preloader .animation-preloader .logo {
        height: 7em;
        width: 7em
    }

    .ctn-preloader .animation-preloader .txt-loading {
        font: bold 2em Poppins-Bold, sans-serif
    }
}

.dollar {
    -webkit-animation: logo 2s infinite linear;
    animation: logo 2s infinite linear;
    border-radius: 50%;
    border-top-color: #01185c;
    width: 2em;
    display:inline-block;
}