@charset "UTF-8";
/* CSS Document */

#startScreen {
	display: none;
}

#index {
    background-image: url(../images/bgHome.png);
	background-color: #91BB50;
	height: 1480px;
}

/*Section Animation */
@keyframes playClaudio {
   100% { background-position: -2839px; }
}

@-webkit-keyframes playClaudio {
	100% { background-position: -2839px; }
}

@keyframes playLuna {
   100% { background-position: -5760px; }
}

@-webkit-keyframes playLuna {
	100% { background-position: -5760px; }
}

@keyframes playJupiter {
   100% { background-position: -3000px; }
}

@-webkit-keyframes playJupiter {
	100% { background-position: -3000px; }
}

#index section.animation {
    top: 350px;
	left: 50%;
	margin-left: -405px;
}

#index section.animation aside.funny1 {
	background:url(../images/animationClaudio.png) left center;
	background-repeat: no-repeat;
	display:block;
	width: 218px;
	height: 273px;
	margin-top: 247px;
	animation: playClaudio 1.2s steps(13) infinite;
	-webkit-animation: playClaudio 1.2s steps(13) infinite;
	-moz-animation: playClaudio 1.2s steps(13) infinite;
	-o-animation: playClaudio 1.2s steps(13) infinite;
}

#index section.animation aside.funny2 {
	background: url(../images/animationLuna.png) left center;
	background-repeat: no-repeat;
	display:block;
	width: 480px;
	height: 560px;
	animation: playLuna 1.2s steps(12) infinite;
	-webkit-animation: playLuna 1.2s steps(12) infinite;
	-moz-animation: playLuna 1.2s steps(12) infinite;
	-o-animation: playLuna 1.2s steps(12) infinite;
}

#index section.animation aside.funny3 {
	background: url(../images/animationJupiter.png) left center;
	background-repeat: no-repeat;
	display:block;
	width: 250px;
	height: 275px;
	margin-top: 240px;
	animation: playJupiter 1.1s steps(12) infinite;
	-webkit-animation: playJupiter 1.1s steps(12) infinite;
	-moz-animation: playJupiter 1.1s steps(12) infinite;
	-o-animation: playJupiter 1.1s steps(12) infinite;
}

/*Media Queries */ 
@media screen and (max-width: 1800px) {

	#index section.animation {
	top: 250px;
	margin-left: -420px;
	transform: scale(0.9);
	-webkit-transform: scale(0.9);
	-moz-transform: scale(0.9);
	-o-transform: scale(0.9);
	-ms-transform: scale(0.9);
    }

}

@media screen and (max-width: 1550px) {
	
	#index {
    background-image: url(../images/bgHome_1580.png);
    }
	
	
	#index section.animation {
	margin-top: -50px;
	margin-left: -420px;
	transform: scale(0.75);
	-webkit-transform: scale(0.75);
	-moz-transform: scale(0.75);
	-o-transform: scale(0.75);
	-ms-transform: scale(0.75);
    }
	
}

@media screen and (max-width: 1370px) {
	
	
	#index section.animation {
	top: 180px;
	margin-left: -420px;
	transform: scale(0.7);
	-webkit-transform: scale(0.7);
	-moz-transform: scale(0.7);
	-o-transform: scale(0.7);
	-ms-transform: scale(0.7);
    }

	
}

@media screen and (max-width: 1290px) {
	
	#index { 
    background-image: url(../images/bgHome_1300.png);
	}
	
	
	#index section.animation {
	transform: scale(0.55);
	-webkit-transform: scale(0.55);
	-moz-transform: scale(0.55);
	-o-transform: scale(0.55);
	-ms-transform: scale(0.55);
    }

	
}

@media screen and (max-width: 1090px) {
	
	
	#index section.animation {
	width: 980px;
	top: 120px;
	margin-left: -470px;
    }

	
}

@media screen and (max-width: 980px) {
	
	
	#index section.animation {
	top: 65px;
	margin-left: -450px;
    }
	
}

@media screen and (max-width: 875px) {
	
	#index section.animation {
	top: 50px;
	transform: scale(0.4);
	-webkit-transform: scale(0.4);
	-moz-transform: scale(0.4);
	-o-transform: scale(0.4);
	-ms-transform: scale(0.4);
    }
	
}



@media screen and (max-width: 770px) {
	
	#index { 

    }
	
	#index section.animation {
	top: 0px;
	transform: scale(0.35);
	-webkit-transform: scale(0.35);
	-moz-transform: scale(0.35);
	-o-transform: scale(0.35);
	-ms-transform: scale(0.35);
		
    }
}