@charset "UTF-8";
/* ----- LOADER ----- 
*
* General properties of loader
* definition of values for the properties
* position and size of loader general
*/
.loader{
    position: absolute;
    min-height: 100%;
    min-width: 100%;
    z-index: 1000;
}
.loader-i {
    bottom: 0;
    height: 220px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 290px;
}
.organic {
    bottom: 0;
    filter: url('#organic');
    height: 220px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 290px;
}
/**
* Loader Logo
* size and position of logo loader
* add for position on page before load successful page
* include size and position of logo in loader page
*
*/
.loader-logo {
    height: 22px;
    left: 50%;
    width: 22px;
    margin-left: -11px;
    margin-top: -12px;
    position: absolute;
    top: 50%;
    z-index: 200;
    fill: white;
}
/**
* Dots
* animation of loader logo
* position , size and velocity of animation.
* it also contains the dots of the loader.
*/
.dot {
    height: 0;
    left: 50%;
    position: absolute;
    top: 50%;
    width: 0;
}
.dot:before {
    background: #ec0000;
    border-radius: 50px;
    content: '';
    height: 22px;
    left: 50%;
    margin-left: -11px;
    margin-top: -11px;
    position: absolute;
    transform: translateY(0) rotate(0deg);
    width: 22px; 
}
/**
* Animation Dots
* Contains properties for show animation 
* of dots in loader
*/
@keyframes dot-move {
    0% {
        transform: translateY(0); 
    }
    18%, 22% {
        transform: translateY(-45px);
    }
    40%, 100% {
        transform: translateY(0);
    }
}
.dot:nth-child(5):before {
    z-index: 100;
    width: 43px;
    height: 43px;
    margin-left: -21.5px;
    margin-top: -21.5px;
    animation: dot-colors 5s ease infinite;
}
@keyframes dot-rotate-1 {
    0% {
        transform: rotate(-105deg); 
    }
    100% {
        transform: rotate(270deg);
    } 
}
.dot:nth-child(1) {
    animation: dot-rotate-1 5s 0s linear infinite;
}
.dot:nth-child(1):before {
    animation: dot-move 5s 0s ease infinite;
}
@keyframes dot-rotate-2 {
    0% {
        transform: rotate(165deg);
    }
    100% {
        transform: rotate(540deg); 
    }
}
.dot:nth-child(2) {
    animation: dot-rotate-2 5s 1.25s linear infinite;
}
.dot:nth-child(2):before {
    animation: dot-move 5s 1.25s ease infinite;
}
@keyframes dot-rotate-3 {
    0% {
        transform: rotate(435deg);
    }
    100% {
        transform: rotate(810deg);
    }
}
.dot:nth-child(3) {
    animation: dot-rotate-3 5s 2.5s linear infinite;
}
.dot:nth-child(3):before {
    animation: dot-move 5s 2.5s ease infinite;
}
@keyframes dot-rotate-4 {
    0% {
        transform: rotate(705deg);
    }
    100% {
        transform: rotate(1080deg);
    }
}
.dot:nth-child(4) {
    animation: dot-rotate-4 5s 3.75s linear infinite;
}
.dot:nth-child(4):before {
    animation: dot-move 5s 3.75s ease infinite;
}