/* Modern */
@media screen and (max-width: 640px) {
    .loaderBloc {
        margin-left: -17vw;    
        margin-top: 13vh;
    }
    
    .loaderImg {
        max-width:85vw;
    }
    
    #spinning{
	position:relative;
	width:255px;
	height:31px;
        margin-top: 2vh;
        margin-left: 7vw;
    }

    .spinning{
	position:absolute;
	top:0;
	background-color:rgb(255,255,255);
	width:31px;
	height:31px;
	animation-name:bounce_spinning;
		-o-animation-name:bounce_spinning;
		-ms-animation-name:bounce_spinning;
		-webkit-animation-name:bounce_spinning;
		-moz-animation-name:bounce_spinning;
	animation-duration:1.3s;
		-o-animation-duration:1.3s;
		-ms-animation-duration:1.3s;
		-webkit-animation-duration:1.3s;
		-moz-animation-duration:1.3s;
	animation-iteration-count:infinite;
		-o-animation-iteration-count:infinite;
		-ms-animation-iteration-count:infinite;
		-webkit-animation-iteration-count:infinite;
		-moz-animation-iteration-count:infinite;
	animation-direction:normal;
		-o-animation-direction:normal;
		-ms-animation-direction:normal;
		-webkit-animation-direction:normal;
		-moz-animation-direction:normal;
	transform:scale(.3);
		-o-transform:scale(.3);
		-ms-transform:scale(.3);
		-webkit-transform:scale(.3);
		-moz-transform:scale(.3);
    }
    
    #spinning_1{
        left:0;
        animation-delay:0.52s;
                -o-animation-delay:0.52s;
                -ms-animation-delay:0.52s;
                -webkit-animation-delay:0.52s;
                -moz-animation-delay:0.52s;
    }

    #spinning_2{
        left:32px;
        animation-delay:0.65s;
                -o-animation-delay:0.65s;
                -ms-animation-delay:0.65s;
                -webkit-animation-delay:0.65s;
                -moz-animation-delay:0.65s;
    }

    #spinning_3{
        left:64px;
        animation-delay:0.78s;
                -o-animation-delay:0.78s;
                -ms-animation-delay:0.78s;
                -webkit-animation-delay:0.78s;
                -moz-animation-delay:0.78s;
    }

    #spinning_4{
        left:95px;
        animation-delay:0.91s;
                -o-animation-delay:0.91s;
                -ms-animation-delay:0.91s;
                -webkit-animation-delay:0.91s;
                -moz-animation-delay:0.91s;
    }

    #spinning_5{
        left:127px;
        animation-delay:1.04s;
                -o-animation-delay:1.04s;
                -ms-animation-delay:1.04s;
                -webkit-animation-delay:1.04s;
                -moz-animation-delay:1.04s;
    }

    #spinning_6{
        left:159px;
        animation-delay:1.17s;
                -o-animation-delay:1.17s;
                -ms-animation-delay:1.17s;
                -webkit-animation-delay:1.17s;
                -moz-animation-delay:1.17s;
    }

    #spinning_7{
        left:191px;
        animation-delay:1.3s;
                -o-animation-delay:1.3s;
                -ms-animation-delay:1.3s;
                -webkit-animation-delay:1.3s;
                -moz-animation-delay:1.3s;
    }

    #spinning_8{
        left:223px;
        animation-delay:1.43s;
                -o-animation-delay:1.43s;
                -ms-animation-delay:1.43s;
                -webkit-animation-delay:1.43s;
                -moz-animation-delay:1.43s;
    }
}

/* Classic */
@media screen and (min-width: 640px) {
    .loaderImg {
        max-width:50vw;
    }
    
    /* Loader */
    
    #spinning{
	position:relative;
	width:510px;
	height:62px;
        margin-top: 2vh;
        margin-left: 8vw;
    }

    .spinning{
	position:absolute;
	top:0;
	background-color:rgb(255,255,255);
	width:62px;
	height:62px;
	animation-name:bounce_spinning;
		-o-animation-name:bounce_spinning;
		-ms-animation-name:bounce_spinning;
		-webkit-animation-name:bounce_spinning;
		-moz-animation-name:bounce_spinning;
	animation-duration:1.3s;
		-o-animation-duration:1.3s;
		-ms-animation-duration:1.3s;
		-webkit-animation-duration:1.3s;
		-moz-animation-duration:1.3s;
	animation-iteration-count:infinite;
		-o-animation-iteration-count:infinite;
		-ms-animation-iteration-count:infinite;
		-webkit-animation-iteration-count:infinite;
		-moz-animation-iteration-count:infinite;
	animation-direction:normal;
		-o-animation-direction:normal;
		-ms-animation-direction:normal;
		-webkit-animation-direction:normal;
		-moz-animation-direction:normal;
	transform:scale(.3);
		-o-transform:scale(.3);
		-ms-transform:scale(.3);
		-webkit-transform:scale(.3);
		-moz-transform:scale(.3);
    }
    
    #spinning_1{
        left:0;
        animation-delay:0.52s;
                -o-animation-delay:0.52s;
                -ms-animation-delay:0.52s;
                -webkit-animation-delay:0.52s;
                -moz-animation-delay:0.52s;
    }

    #spinning_2{
        left:64px;
        animation-delay:0.65s;
                -o-animation-delay:0.65s;
                -ms-animation-delay:0.65s;
                -webkit-animation-delay:0.65s;
                -moz-animation-delay:0.65s;
    }

    #spinning_3{
        left:128px;
        animation-delay:0.78s;
                -o-animation-delay:0.78s;
                -ms-animation-delay:0.78s;
                -webkit-animation-delay:0.78s;
                -moz-animation-delay:0.78s;
    }

    #spinning_4{
        left:191px;
        animation-delay:0.91s;
                -o-animation-delay:0.91s;
                -ms-animation-delay:0.91s;
                -webkit-animation-delay:0.91s;
                -moz-animation-delay:0.91s;
    }

    #spinning_5{
        left:255px;
        animation-delay:1.04s;
                -o-animation-delay:1.04s;
                -ms-animation-delay:1.04s;
                -webkit-animation-delay:1.04s;
                -moz-animation-delay:1.04s;
    }

    #spinning_6{
        left:319px;
        animation-delay:1.17s;
                -o-animation-delay:1.17s;
                -ms-animation-delay:1.17s;
                -webkit-animation-delay:1.17s;
                -moz-animation-delay:1.17s;
    }

    #spinning_7{
        left:383px;
        animation-delay:1.3s;
                -o-animation-delay:1.3s;
                -ms-animation-delay:1.3s;
                -webkit-animation-delay:1.3s;
                -moz-animation-delay:1.3s;
    }

    #spinning_8{
        left:446px;
        animation-delay:1.43s;
                -o-animation-delay:1.43s;
                -ms-animation-delay:1.43s;
                -webkit-animation-delay:1.43s;
                -moz-animation-delay:1.43s;
    }
}

@keyframes bounce_spinning{
        0%{
                transform:scale(1);
                background-color:#4b8fde;
        }

        100%{
                transform:scale(.3) rotate(90deg);
                background-color:rgb(255,255,255);
        }
}

@-o-keyframes bounce_spinning{
        0%{
                -o-transform:scale(1);
                background-color:#4b8fde;
        }

        100%{
                -o-transform:scale(.3) rotate(90deg);
                background-color:rgb(255,255,255);
        }
}

@-ms-keyframes bounce_spinning{
        0%{
                -ms-transform:scale(1);
                background-color:#4b8fde;
        }

        100%{
                -ms-transform:scale(.3) rotate(90deg);
                background-color:rgb(255,255,255);
        }
}

@-webkit-keyframes bounce_spinning{
        0%{
                -webkit-transform:scale(1);
                background-color:#4b8fde;
        }

        100%{
                -webkit-transform:scale(.3) rotate(90deg);
                background-color:rgb(255,255,255);
        }
}

@-moz-keyframes bounce_spinning{
        0%{
                -moz-transform:scale(1);
                background-color:#4b8fde;
        }

        100%{
                -moz-transform:scale(.3) rotate(90deg);
                background-color:rgb(255,255,255);
        }
}

/*
 * SPINNER
 * 3 BOULES
 */

/* Modern */
@media screen and (max-width: 640px) {
    .spinner {
        width: 140px;
        text-align: center;
    }

    .spinner > div {
        width: 18px;
        height: 18px;

        border-radius: 100%;
        display: inline-block;
        -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
        animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    }

    .loaderImg {
        max-width:85vw;
    }
}

/* Classic */
@media screen and (min-width: 640px) {
    .spinner {
        width: 140px;
        text-align: center;
    }

    .spinner > div {
        width: 36px;
        height: 36px;
        background-color: #4b8fde;

        border-radius: 100%;
        display: inline-block;
        -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
        animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    }

    .loaderImg {
        max-width:50vw;
    }
}

.spinner .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.spinner .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

@keyframes sk-bouncedelay {
    0%, 80%, 100% { 
        -webkit-transform: scale(0);
        transform: scale(0);
    } 
    40% { 
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }
}

@keyframes pulse{
    25%  {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }
    75%  {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
}

.spinner_1 {
    background-color: #4b8fde !important;
}

.spinner_2 {
    background-color: #4b8fde !important;
}

.spinner_3 {
    background-color: #4b8fde !important;
}