/* @import url('https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,400i,600,700,800'); */

/* Initial loader */

.initial-loader {
    font-family: 'Nunito Sans, sans-serif';
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: center;
    padding: 2rem;
}

.initial-loader p {
    font-size: 15px;
    margin-bottom: 1rem;
}

.initial-loader svg {
    stroke: var(--primary-color);
}

.initial-loader .spinner {
    -webkit-animation: rotation 1.35s linear infinite;
    animation: rotation 1.35s linear infinite;
}

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

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

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

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

.initial-loader .circle {
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    -webkit-animation: turn 1.35s ease-in-out infinite;
    animation: turn 1.35s ease-in-out infinite;
    transition-property: stroke;
    animation-duration: 4s;
    animation-timing-function: cubic-bezier(.35, 0, .25, 1);
    animation-iteration-count: infinite;
}

@-webkit-keyframes turn {

    0% {
        stroke-dashoffset: 59.6903;
        transform: rotate(0deg);
    }

    12.5% {
        stroke-dashoffset: 12.5664;
        transform: rotate(0deg);
    }

    12.5001% {
        stroke-dashoffset: 12.5664;
        transform: rotateX(180deg) rotate(72.5deg);
    }

    25% {
        stroke-dashoffset: 59.6903;
        transform: rotateX(180deg) rotate(72.5deg);
    }

    25.0001% {
        stroke-dashoffset: 59.6903;
        transform: rotate(270deg);
    }

    37.5% {
        stroke-dashoffset: 12.5664;
        transform: rotate(270deg);
    }

    37.5001% {
        stroke-dashoffset: 12.5664;
        transform: rotateX(180deg) rotate(161.5deg);
    }

    50% {
        stroke-dashoffset: 59.6903;
        transform: rotateX(180deg) rotate(161.5deg);
    }

    50.0001% {
        stroke-dashoffset: 59.6903;
        transform: rotate(180deg);
    }

    62.5% {
        stroke-dashoffset: 12.5664;
        transform: rotate(180deg);
    }

    62.5001% {
        stroke-dashoffset: 12.5664;
        transform: rotateX(180deg) rotate(251.5deg);
    }

    75% {
        stroke-dashoffset: 59.6903;
        transform: rotateX(180deg) rotate(251.5deg);
    }

    75.0001% {
        stroke-dashoffset: 59.6903;
        transform: rotate(90deg);
    }

    87.5% {
        stroke-dashoffset: 12.5664;
        transform: rotate(90deg);
    }

    87.5001% {
        stroke-dashoffset: 12.5664;
        transform: rotateX(180deg) rotate(341.5deg);
    }

    100% {
        stroke-dashoffset: 59.6903;
        transform: rotateX(180deg) rotate(341.5deg);
    }
}

@keyframes turn {

    0% {
        stroke-dashoffset: 59.6903;
        transform: rotate(0deg);
    }

    12.5% {
        stroke-dashoffset: 12.5664;
        transform: rotate(0deg);
    }

    12.5001% {
        stroke-dashoffset: 12.5664;
        transform: rotateX(180deg) rotate(72.5deg);
    }

    25% {
        stroke-dashoffset: 59.6903;
        transform: rotateX(180deg) rotate(72.5deg);
    }

    25.0001% {
        stroke-dashoffset: 59.6903;
        transform: rotate(270deg);
    }

    37.5% {
        stroke-dashoffset: 12.5664;
        transform: rotate(270deg);
    }

    37.5001% {
        stroke-dashoffset: 12.5664;
        transform: rotateX(180deg) rotate(161.5deg);
    }

    50% {
        stroke-dashoffset: 59.6903;
        transform: rotateX(180deg) rotate(161.5deg);
    }

    50.0001% {
        stroke-dashoffset: 59.6903;
        transform: rotate(180deg);
    }

    62.5% {
        stroke-dashoffset: 12.5664;
        transform: rotate(180deg);
    }

    62.5001% {
        stroke-dashoffset: 12.5664;
        transform: rotateX(180deg) rotate(251.5deg);
    }

    75% {
        stroke-dashoffset: 59.6903;
        transform: rotateX(180deg) rotate(251.5deg);
    }

    75.0001% {
        stroke-dashoffset: 59.6903;
        transform: rotate(90deg);
    }

    87.5% {
        stroke-dashoffset: 12.5664;
        transform: rotate(90deg);
    }

    87.5001% {
        stroke-dashoffset: 12.5664;
        transform: rotateX(180deg) rotate(341.5deg);
    }

    100% {
        stroke-dashoffset: 59.6903;
        transform: rotateX(180deg) rotate(341.5deg);
    }
}