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

#assistir {
    background-image: url(../images/bgAssistir.png);
	background-color: #89af39;
	height: 1084px;
}

/*Section Animation */
@-webkit-keyframes flying {
     0% { top:300px; }
    50% { top: 0px; }
	100% { top:300px; }
}

@keyframes flying {
     0% { top:300px; }
    50% { top: 0px; }
	100% { top:300px; }
}

@-webkit-keyframes flyingLow {
     0% { top:217px; }
    50% { top: 0px; }
	100% { top:217px; }
}

@keyframes flyingLow {
     0% { top:217px; }
    50% { top: 0px; }
	100% { top:217px; }
}

#assistir section.animation {
	top: 200px;
	left: 50%;
	width: 1700px;
	margin-left: -840px;
	transform: scale(0.8);
}

#assistir section.animation aside.funny1 {
	position: relative;
	background-image: url(../images/assistirLuna.png);
	width: 251px;
	height: 348px;
    animation: flying 5s infinite  normal ease-out;
	-webkit-animation: flying 5s infinite  normal ease-out;
	-moz-animation: flying 5s infinite  normal ease-out;
	-o-animation: flying 5s infinite  normal ease-out;
	-ms-animation: flying 5s infinite  normal ease-out;
}

#assistir section.animation aside.funny2 {
	background-image: url(../images/assistirTv.png);
	width: 1231px;
	height: 688px;
}

#assistir section.animation aside.funny2 div#btnBack {
	background-image: url(../images/assistirBtnBack.png);
	background-size: contain;
	position: absolute;
	left: 0px;
	top: 40%;
	width: 125px;
	height: 125px;
}

#assistir section.animation aside.funny2 div#btnGo {
    background-image: url(../images/assistirBtnGo.png);
	background-size: contain;
	position: absolute;
	right: 0px;
	top: 40%;
	width: 125px;
	height: 125px;
}

#assistir section.animation aside.funny2 ul {
	display: block;
	width: 1050px;
	height: 600px;
	margin-top: 50px;
	margin-left: 70px;
	list-style: none;
}


#assistir section.animation aside.funny2 ul li {
	float: left;
	margin-right: 15px;
	margin-top: 50px;
	margin-bottom: 50px;
	opacity: 1;
}

#assistir section.animation aside.funny2 ul li:hover {
	opacity:0.8;
}

#assistir section.animation aside.funny2 ul li a img {
	border-radius: 25px;
}

#assistir section.animation aside.funny2 ul li h2{
	position: absolute;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 20px;
	color: #f2631b;
	margin-top: 5px;
	padding-left: 0px;
	width: 320px;
	text-align: center;
}

#assistir section.animation aside.funny3 {
	position: relative;
	width: 185px;
	height: 435px;
	float: right;
	
	animation: flyingLow 4s infinite  normal ease-out;
	-webkit-animation: flyingLow 4s infinite  normal ease-out;
	-moz-animation: flyingLow 4s infinite  normal ease-out;
	-o-animation: flyingLow 4s infinite  normal ease-out;
	-ms-animation: flyingLow 4s infinite  normal ease-out;
}

#assistir section.animation aside.funny3 a.jupiter {
	background-image: url(../images/assistirJupiter.png);
	position: absolute;
	height:186px;
	width: 182px;
}

#assistir section.animation aside.funny3 a.claudio {
	background-image: url(../images/assistirClaudio.png);
	position: absolute;
	height:168px;
	width: 182px;
	bottom: 0;
}


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

@media screen and (max-width: 1550px) {

    #assistir {
    background-image: url(../images/bgAssistir_1580.png);
    }
	
	#assistir section.animation {
	top: 100px;
	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) {
	
	#assistir section.animation {
	top: 50px;
	transform: scale(0.65);
	-webkit-transform: scale(0.65);
	-moz-transform: scale(0.65);
	-o-transform: scale(0.65);
	-ms-transform: scale(0.65);
	
    }

	
}

@media screen and (max-width: 1290px) {
	#assistir {
    background-image: url(../images/bgAssisitr_1300.png);
    }
	
    #assistir section.animation {
	top: 10px;
	transform: scale(0.6);
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	-o-transform: scale(0.6);
	-ms-transform: scale(0.6);
    }
	
}

@media screen and (max-width: 1090px) {
	
	#assistir section.animation {
	top: 0px;
    }
	
}

@media screen and (max-width: 980px) {
	
	#assistir 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: 875px) {
	
	#assistir section.animation {
	top: -120px;
	transform: scale(0.3);
	-webkit-transform: scale(0.3);
	-moz-transform: scale(0.3);
	-o-transform: scale(0.3);
	-ms-transform: scale(0.3);
    }

	
}



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