/* 
    Document   : spinners
    Created on : Aug 22, 2013, 12:32:27 PM
    Author     : dimitar
    Company    : 158ltd.com
    Description: Follow article "http://tympanus.net/codrops/2012/11/14/creative-css-loading-animations/"
*/

/*********************** Spinner Type 3 ****************/
.spinner-type-3 {
    /* Size and position */
    position: relative;
    
    display: block;
    margin: .15em auto .15em auto;
    height: 1em;
    width: 1em;
    
    font-size: 100px; /* 1em */
    
    /* Styles */
    list-style: none;
    
    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
            
    /* Subtle line circling the dots */        
    /* border: .01em solid rgba(150, 150, 150, .1); */
}

.spinner-type-3 > li {
    /* Size and position */
    position: absolute;
    
    display: block;
    height: .2em;
    width: .2em;
    
    /* Styles */
    border-radius: 50%;
}

.spinner-type-3 > li:nth-child(1) {
    /* Size and position */
    top: 0;
    left: 50%;
    
    margin-left: -.1em; /* Width/2 */
    
    /* Styles */
    background-color: #d0f08b;
    
    /* Animation */
    -webkit-transform-origin: 50% 250%;
       -moz-transform-origin: 50% 250%;    
        -ms-transform-origin: 50% 250%;
         -o-transform-origin: 50% 250%;
            transform-origin: 50% 250%;
            
    -webkit-animation: 
        animationrotation 1.13s linear infinite,
        animationopacity 3.67s ease-in-out infinite alternate;
    -moz-animation: 
        animationrotation 1.13s linear infinite,
        animationopacity 3.67s ease-in-out infinite alternate;
    -ms-animation: 
        animationrotation 1.13s linear infinite,
        animationopacity 3.67s ease-in-out infinite alternate;
    -o-animation: 
        animationrotation 1.13s linear infinite,
        animationopacity 3.67s ease-in-out infinite alternate; 
    animation: 
        animationrotation 1.13s linear infinite,
        animationopacity 3.67s ease-in-out infinite alternate;
}

.spinner-type-3 > li:nth-child(2) {
    /* Size and position */
    top: 50%;
    right: 0;
    
    margin-top: -.1em;
    
    /* Style */
    background: #f5ef9e;
    
    /* Animation */
    -webkit-transform-origin: -150% 50%; 
       -moz-transform-origin: -150% 50%;    
        -ms-transform-origin: -150% 50%; 
         -o-transform-origin: -150% 50%; 
            transform-origin: -150% 50%; 

    -webkit-animation: 
        animationrotation 1.86s linear infinite,
        animationopacity 4.29s ease-in-out infinite alternate;
    -moz-animation: 
        animationrotation 1.86s linear infinite,
        animationopacity 4.29s ease-in-out infinite alternate;
    -ms-animation: 
        animationrotation 1.86s linear infinite,
        animationopacity 4.29s ease-in-out infinite alternate;
    -o-animation: 
        animationrotation 1.86s linear infinite,
        animationopacity 4.29s ease-in-out infinite alternate; 
    animation: 
        animationrotation 1.86s linear infinite,
        animationopacity 4.29s ease-in-out infinite alternate;            
}

.spinner-type-3 > li:nth-child(3) {
    /* Size and position */
    bottom: 0;
    left: 50%;
    
    margin-left: -.1em; /* Width/2 */
    
    /* Style */
    background: #fdca8f;
    
    /* Animation */
    -webkit-transform-origin: 50% -150%;
       -moz-transform-origin: 50% -150%; 
        -ms-transform-origin: 50% -150%;
         -o-transform-origin: 50% -150%; 
            transform-origin: 50% -150%;     

    -webkit-animation: 
        animationrotation 1.45s linear infinite,
        animationopacity 5.12s ease-in-out infinite alternate;
    -moz-animation: 
        animationrotation 1.45s linear infinite,
        animationopacity 5.12s ease-in-out infinite alternate;
    -ms-animation: 
        animationrotation 1.45s linear infinite,
        animationopacity 5.12s ease-in-out infinite alternate;
    -o-animation: 
        animationrotation 1.45s linear infinite,
        animationopacity 5.12s ease-in-out infinite alternate; 
    animation: 
        animationrotation 1.45s linear infinite,
        animationopacity 5.12s ease-in-out infinite alternate;
}

.spinner-type-3 > li:nth-child(4) {
    /* Size and position */
    top: 50%;
    left: 0;
    
    margin-top: -.1em; /* Height/2 */
    
    /* Style */
    background: #cbc9c8;
    
    /* Animation */
    -webkit-transform-origin: 250% 50%;
       -moz-transform-origin: 250% 50%;
        -ms-transform-origin: 250% 50%;
         -o-transform-origin: 250% 50%; 
            transform-origin: 250% 50%;  

    -webkit-animation: 
        animationrotation 1.72s linear infinite,
        animationopacity 5.25s ease-in-out infinite alternate;
    -moz-animation: 
        animationrotation 1.72s linear infinite,
        animationopacity 5.25s ease-in-out infinite alternate;
    -ms-animation: 
        animationrotation 1.72s linear infinite,
        animationopacity 5.25s ease-in-out infinite alternate;
    -o-animation: 
        animationrotation 1.72s linear infinite,
        animationopacity 5.25s ease-in-out infinite alternate; 
    animation: 
        animationrotation 1.72s linear infinite,
        animationopacity 5.25s ease-in-out infinite alternate;   
}

/*** Keyframes Type 3 ***/
/*** Keyframe Rotation ***/
@-webkit-keyframes animationrotation {
    to { -webkit-transform: rotate(360deg); }
}

@-moz-keyframes animationrotation {
    to { -moz-transform: rotate(360deg); }
}

@-ms-keyframes animationrotation {
    to { -ms-transform: rotate(360deg); }
}

@-o-keyframes animationrotation {
    to { -o-transform: rotate(360deg); }
}

@keyframes animationrotation {
    to { transform: rotate(360deg); }
}
/*** Keyframe Rotation ***/

/*** Keyframe Opacity ***/
@-webkit-keyframes animationopacity {
    12.0% { opacity: 0.80; }
    19.5% { opacity: 0.88; }
    37.2% { opacity: 0.64; }
    40.5% { opacity: 0.52; }
    52.7% { opacity: 0.69; }
    60.2% { opacity: 0.60; }
    66.6% { opacity: 0.52; }
    70.0% { opacity: 0.63; }
    79.9% { opacity: 0.60; }
    84.2% { opacity: 0.75; }
    91.0% { opacity: 0.87; }
}

@-moz-keyframes animationopacity {
    12.0% { opacity: 0.80; }
    19.5% { opacity: 0.88; }
    37.2% { opacity: 0.64; }
    40.5% { opacity: 0.52; }
    52.7% { opacity: 0.69; }
    60.2% { opacity: 0.60; }
    66.6% { opacity: 0.52; }
    70.0% { opacity: 0.63; }
    79.9% { opacity: 0.60; }
    84.2% { opacity: 0.75; }
    91.0% { opacity: 0.87; }
}

@-ms-keyframes animationopacity {
    12.0% { opacity: 0.80; }
    19.5% { opacity: 0.88; }
    37.2% { opacity: 0.64; }
    40.5% { opacity: 0.52; }
    52.7% { opacity: 0.69; }
    60.2% { opacity: 0.60; }
    66.6% { opacity: 0.52; }
    70.0% { opacity: 0.63; }
    79.9% { opacity: 0.60; }
    84.2% { opacity: 0.75; }
    91.0% { opacity: 0.87; }
}

@-o-keyframes animationopacity {
    12.0% { opacity: 0.80; }
    19.5% { opacity: 0.88; }
    37.2% { opacity: 0.64; }
    40.5% { opacity: 0.52; }
    52.7% { opacity: 0.69; }
    60.2% { opacity: 0.60; }
    66.6% { opacity: 0.52; }
    70.0% { opacity: 0.63; }
    79.9% { opacity: 0.60; }
    84.2% { opacity: 0.75; }
    91.0% { opacity: 0.87; }
}

@keyframes animationopacity {
    12.0% { opacity: 0.80; }
    19.5% { opacity: 0.88; }
    37.2% { opacity: 0.64; }
    40.5% { opacity: 0.52; }
    52.7% { opacity: 0.69; }
    60.2% { opacity: 0.60; }
    66.6% { opacity: 0.52; }
    70.0% { opacity: 0.63; }
    79.9% { opacity: 0.60; }
    84.2% { opacity: 0.75; }
    91.0% { opacity: 0.87; }
}
/*** Keyframe Opacity ***/

/*********************** Spinner Type 3 ****************/