/* 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:#4CAF50;
        }

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

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

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

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

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

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

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

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

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