/*Loader 1- Spinning */

#preloader {
    position: fixed;
    z-index: 99999999999999;
}

.loader-container {
    animation: fade 5s;
}

#preloader.fade-out {
    -webkit-animation: fade-out 0.5s forwards;
    -moz-animation: fade-out 0.5s forwards;
    -o-animation: fade-out 0.5s forwards;
    animation: fade-out 0.5s forwards;
}

#loader-1 #loader{
    height: 20vw;
    width: 20vw;
    border: 3px solid transparent;
    border-top-color: #eeeeee;
    border-bottom-color: #eeeeee;
    border-radius: 50%;
    z-index: 2;
    -webkit-animation: spin 5s linear infinite, fade 1s  both;
    -moz-animation: spin 5s linear infinite, fade 1s  both;
    -o-animation: spin 5s linear infinite, fade 1s  both;
    animation: spin 5s linear infinite, fade 1s  both;
}

#loader-1 img {
    position: absolute;
    display: block;

    height: 15vw;
    width: 15vw;

    opacity: 1;
}

#loader-1 #loader:before{
    content: "";
    position: absolute;
    top:2%;
    bottom: 2%;
    left: 2%;
    right: 2%;
    border: 3px solid transparent;
    z-index: 2;
    border-top-color: #8a8a8a;
    border-radius: 50%;
    -webkit-animation: spin 7s linear infinite, fade 2s  both 0.5s;
    -moz-animation: spin 7s linear infinite, fade 2s  both 0.5s;
    -o-animation: spin 7s linear infinite, fade 2s  both 0.5s;
    animation: spin 7s linear infinite, fade 2s  both 0.5s;

}

#loader-1 #loader:after{
    content: "";
    position: absolute;
    top:5%;
    bottom: 5%;
    left: 5%;
    right: 5%;
    border: 3px solid transparent;
    border-top-color: #4f4f4f;
    z-index: 2;
    border-radius: 50%;
    -webkit-animation: spin 3s linear infinite, fade 2s  both 1s;
    -moz-animation: spin 3s linear infinite, fade 2s  both 1s;
    -o-animation: spin 3s linear infinite, fade 2s  both 1s;
    animation: spin 3s linear infinite, fade 2s both 1s;

}

/*Keyframes for spin animation */

@-webkit-keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }

    50% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(180deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}


@-moz-keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }

    50% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(180deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}

@-o-keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }

    50% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(180deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}

@keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }

    50% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(180deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}

@keyframes fade {
    0%   {
        opacity: 0;
    }

    100% {
       opacity: 1;
    }
}

@keyframes fade-out {
    0%   {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes pulse {
    0% {
        transform: scale(0.75);
    }

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