#preloader-background {
    background: #fff none repeat scroll 0 0;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99999;
}

#preloader-background .preloader-wrapper {
    left: 50%;
    position: absolute;
    top: 50%;
    -webkit-transform:  translate(-50%, -50%);
    -moz-transform:  translate(-50%, -50%);
    -ms-transform:  translate(-50%, -50%);
    -o-transform:  translate(-50%, -50%);
    transform:  translate(-50%, -50%);
}
/******************************************************************************************
***************                           SINGLE 1                          ***************
*******************************************************************************************/

.single1ball {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background-color: #EC644B;
    -webkit-animation: single1animation 4s infinite linear;
    animation: single1animation 4s infinite linear; 
}

@-webkit-keyframes single1animation {
    0%, 9%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    
    10%, 19%, 90%, 99% {
        -webkit-transform: scale(.2);
        transform: scale(.2);
    }
    
    20%, 29%, 80%, 89% {
        -webkit-transform: scale(.4);
        transform: scale(.4);
    }
    
    30%, 39%, 70%, 79% {
        -webkit-transform: scale(.6);
        transform: scale(.6);
    }
    
    40%, 49%, 60%, 69% {
        -webkit-transform: scale(.8);
        transform: scale(.8);
    }
    
    50%, 59% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes single1animation {
    0%, 9%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    
    10%, 19%, 90%, 99% {
        -webkit-transform: scale(.2);
        transform: scale(.2);
    }
    
    20%, 29%, 80%, 89% {
        -webkit-transform: scale(.4);
        transform: scale(.4);
    }
    
    30%, 39%, 70%, 79% {
        -webkit-transform: scale(.6);
        transform: scale(.6);
    }
    
    40%, 49%, 60%, 69% {
        -webkit-transform: scale(.8);
        transform: scale(.8);
    }
    
    50%, 59% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}


/******************************************************************************************
***************                           SINGLE 2                          ***************
*******************************************************************************************/

.spinningCircle {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    border: 4px solid rgba(255,255,255,0);
    border-top-color: 4px solid #7fc4d1;
    border-right-color: 4px solid #7fc4d1;
    -webkit-animation: single2 4s infinite linear;
    animation: single2 4s infinite linear;
}

@-webkit-keyframes single2 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        border-top-color: #7fc4d1;
        border-right-color: #7fc4d1;
    }
    
    50% {
        border-top-color: #1f4f58;
        border-right-color: #1f4f58;
    }
    
    100% {
        -webkit-transform: rotate(720deg);
        transform: rotate(720deg);
        border-top-color: #7fc4d1;
        border-right-color: #7fc4d1;
    }
}

@keyframes single2 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        border-top-color: #7fc4d1;
        border-right-color: #7fc4d1;
    }
    
    50% {
        border-top-color: #1f4f58;
        border-right-color: #1f4f58;
    }
    
    100% {
        -webkit-transform: rotate(720deg);
        transform: rotate(720deg);
        border-top-color: #7fc4d1;
        border-right-color: #7fc4d1;
    }
}


/******************************************************************************************
***************                           SINGLE 3                          ***************
*******************************************************************************************/

.single3 {
    height: 30px;
    width: 30px;
    background-color: #EC644B;
    border-radius: 50%;
    -webkit-animation: single3 2s infinite ease-in-out;
    animation: single3 2s infinite ease-in-out;
}

@-webkit-keyframes single3 {
    0%, 20%, 40%, 60%, 100% {
        -webkit-transform: scale(.2);
        transform: scale(.2);
        opacity: 0;
    }
    
    10%, 30%, 50% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes single3 {
    0%, 20%, 40%, 60%, 100% {
        -webkit-transform: scale(.2);
        transform: scale(.2);
        opacity: 0;
    }
    
    10%, 30%, 50% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}


/******************************************************************************************
***************                           SINGLE 4                          ***************
*******************************************************************************************/

.single4 {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 6px solid #EEEEEE;
    border-top-color: #90C948;
    border-bottom-color: #90C948;
    -webkit-animation: single4 2.5s infinite ease-in-out;
    animation: single4 2.5s infinite ease-in-out;
}

@-webkit-keyframes single4 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    
    100% {
        -webkit-transform: rotate(540deg);
        transform: rotate(540deg);
    }
}

@keyframes single4 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    
    100% {
        -webkit-transform: rotate(540deg);
        transform: rotate(540deg);
    }
}


/******************************************************************************************
***************                           SINGLE 5                          ***************
*******************************************************************************************/

.single5 {
    height: 50px;
    width: 50px;
    background-color: pink;
    -webkit-animation: single5 5s infinite linear;
    animation: single5 5s infinite linear;
}

@-webkit-keyframes single5 {
    0% { 
        -webkit-transform: perspective(180px) rotateX(0deg) rotateY(0deg);
        background-color: #F4D03F;
    }
    
    25% { 
        -webkit-transform: perspective(180px) rotateX(-180.1deg) rotateY(0deg);
        background-color: #52B3D9;
    }
    
    50% { 
        -webkit-transform: perspective(180px) rotateX(-180deg) rotateY(179.9deg);
        background-color: #EC644B;
    }
    
    75% { 
        -webkit-transform: perspective(180px) rotateX(-360deg) rotateY(179.9deg);
        background-color: #68C3A3;
    }
    
    100% { 
        -webkit-transform: perspective(180px) rotateX(-360deg) rotateY(360deg);
        background-color: #F4D03F;
    }
}

@keyframes single5 {
    0% { 
        transform: perspective(180px) rotateX(0deg) rotateY(0deg);
        -webkit-transform: perspective(180px) rotateX(0deg) rotateY(0deg);
        background-color: #F4D03F;
    }
    
    25% { 
        transform: perspective(180px) rotateX(-180.1deg) rotateY(0deg);
        -webkit-transform: perspective(180px) rotateX(-180.1deg) rotateY(0deg);
        background-color: #52B3D9;
    }
    
    50% { 
        transform: perspective(180px) rotateX(-180deg) rotateY(179.9deg);
        -webkit-transform: perspective(180px) rotateX(-180deg) rotateY(179.9deg);
        background-color: #EC644B;
    }
    
    75% { 
        transform: perspective(180px) rotateX(-180deg) rotateY(179.9deg);
        -webkit-transform: perspective(180px) rotateX(-360deg) rotateY(179.9deg);
        background-color: #68C3A3;
    }
    
    100% { 
        transform: perspective(180px) rotateX(0deg) rotateY(360deg);
        -webkit-transform: perspective(180px) rotateX(-360deg) rotateY(360deg);
        background-color: #F4D03F;
    }
}


/******************************************************************************************
***************                           SINGLE 6                          ***************
*******************************************************************************************/

.single6 {
    height: 60px;
    width: 60px;
    border-radius: 50%;
    background-color: #90C695;
    -webkit-animation: single6 1s infinite ease-in;
    animation: single6 1s infinite ease-in;
}

@-webkit-keyframes single6 {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }
    
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0;
    }
}

@keyframes single6 {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }
    
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0;
    }
}


/******************************************************************************************
***************                           SINGLE 6                          ***************
*******************************************************************************************/

.single7 {
    height: 12px;
    width: 12px;
    border-radius: 50%;
    -webkit-animation: single7 4s infinite linear;
    animation: single7 4s infinite linear;
}

@-webkit-keyframes single7 {
    0%, 20%, 100% {
        -webkit-transform: translate(-15px, 150px);
        transform: translate(-15px, -15px);
        background-color: #F5D76E;
    }
    25%, 45% {
        -webkit-transform: translate(15px, -15px);
        transform: translate(15px, -15px);
        background-color: #4183D7;
    }
    50%, 70% {
        -webkit-transform: translate(15px, 15px);
        transform: translate(15px, 15px);
        background-color: #D64541;
    }
    75%, 95% {
        -webkit-transform: translate(-15px, 15px);
        transform: translate(-15px, 15px);
        background-color: #26A65B;
    }
}

@keyframes single7 {
    0%, 20%, 100% {
        -webkit-transform: translate(-15px, 150px);
        transform: translate(-15px, -15px);
        background-color: #F5D76E;
    }
    25%, 45% {
        -webkit-transform: translate(15px, -15px);
        transform: translate(15px, -15px);
        background-color: #4183D7;
    }
    50%, 70% {
        -webkit-transform: translate(15px, 15px);
        transform: translate(15px, 15px);
        background-color: #D64541;
    }
    75%, 95% {
        -webkit-transform: translate(-15px, 15px);
        transform: translate(-15px, 15px);
        background-color: #26A65B;
    }
}


/******************************************************************************************
***************                           SINGLE 8                          ***************
*******************************************************************************************/

.single8 {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 10px solid red;
    -webkit-animation: single8 8s infinite linear;
    animation: single8 8s infinite linear;
}

@-webkit-keyframes single8 {
    0%, 100%{
        border: solid 20px #68C3A3;
    }
    6.25% {
        border: solid 2px #68C3A3;
    }
    12.5% {
        border: solid 2px #52B3D9;
    }
    18.75% {
        border: solid 20px #52B3D9;
    }
    25% {
        border: solid 20px #52B3D9;
    }
    31.25% {
        border: solid 2px #52B3D9;
    }
    37.5% {
        border: solid 2px #F4D03F;
    }
    43.75% {
        border: solid 20px #F4D03F;
    }
    50% {
        border: solid 20px #F4D03F;
    }
    56.25% {
        border: solid 2px #F4D03F;
    }
    62.5% {
        border: solid 2px #D24D57;
    }
    68.75% {
        border: solid 20px #D24D57;
    }
    75% {
        border: solid 20px #D24D57;
    }
    81.25% {
        border: solid 2px #D24D57;
    }
    87.5% {
        border: solid 2px #68C3A3;
    }
    93.75% {
        border: solid 20px #68C3A3;
    }
}

@keyframes single8 {
    0%, 100%{
        border: solid 20px #68C3A3;
    }
    6.25% {
        border: solid 2px #68C3A3;
    }
    12.5% {
        border: solid 2px #52B3D9;
    }
    18.75% {
        border: solid 20px #52B3D9;
    }
    25% {
        border: solid 20px #52B3D9;
    }
    31.25% {
        border: solid 2px #52B3D9;
    }
    37.5% {
        border: solid 2px #F4D03F;
    }
    43.75% {
        border: solid 20px #F4D03F;
    }
    50% {
        border: solid 20px #F4D03F;
    }
    56.25% {
        border: solid 2px #F4D03F;
    }
    62.5% {
        border: solid 2px #D24D57;
    }
    68.75% {
        border: solid 20px #D24D57;
    }
    75% {
        border: solid 20px #D24D57;
    }
    81.25% {
        border: solid 2px #D24D57;
    }
    87.5% {
        border: solid 2px #68C3A3;
    }
    93.75% {
        border: solid 20px #68C3A3;
    }
}

/******************************************************************************************
***************                           SINGLE 9                          ***************
*******************************************************************************************/

.single9 {
    height: 6px;
    width: 75px;
    background-color: #d8d7d7;
    position: relative;
}

.single9:before {
    content: '';
    height: 6px;
    width: 10px;
    position: absolute;
    left: 0;
    background-color: #EC644B;
    -webkit-animation: single9anim 4s infinite ease-in-out;
    animation: single9anim 4s infinite ease-in-out;
}

@-webkit-keyframes single9anim {
    0%, 100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    50% {
        -webkit-transform: translateX(65px);
        transform: translateX(65px);
    }
}

@keyframes single9anim {
    0%, 100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    50% {
        -webkit-transform: translateX(65px);
        transform: translateX(65px);
    }
}