@charset "UTF-8";

/***** Fonts */
@font-face {
	font-family:'AvenirNextLTPro-HeavyCn';
	src: url('fonts/AvenirNext-Bold_gdi.eot');
	src: url('fonts/AvenirNext-Bold_gdi.eot?#iefix') format('embedded-opentype'),
		url('fonts/AvenirNext-Bold_gdi.woff') format('woff'),
		url('fonts/AvenirNext-Bold_gdi.ttf') format('truetype'),
		url('fonts/AvenirNext-Bold_gdi.svg#AvenirNextLTPro-HeavyCn') format('svg');
	font-weight: 900;
	font-style: normal;
	font-stretch: normal;
	unicode-range: U+0-10FFFF;
}
@font-face {
	font-family:'CenturyGothic-Regular';
	src: url('fonts/CenturyGothic_gdi.eot');
	src: url('fonts/CenturyGothic_gdi.eot?#iefix') format('embedded-opentype'),
		url('fonts/CenturyGothic_gdi.woff') format('woff'),
		url('fonts/CenturyGothic_gdi.ttf') format('truetype'),
		url('fonts/CenturyGothic_gdi.svg#CenturyGothic-Regular') format('svg');
	font-weight: 400;
	font-style: normal;
	font-stretch: normal;
	unicode-range: U+0020-25CA;
}

*   { margin:0; padding:0; }
body{ font-family:Arial; background:#85bdd2; }

html,body{
	overflow:hidden;
}

a { text-decoration:none; color:#618ea4; }
h1{ font-size:32px; font-family:'fonts/FranklinGothic-DemiCond'; font-weight:normal; }
p { font-family:'CenturyGothic-Regular'; }

.hide { display:none; }

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }


.floatleft { float:left; }
.floatright{ float:right; }
.ds-block  { display:block; }

#loading { 
	position:absolute; 
	top:50%; left:50%; 
	margin:-33px 0 0 -33px;
}


main .content { 
	position:absolute;
	top:50%; left:50%;
	margin:-284px 0 0 -464px;
	width:920px; height:560px;
	/*background:#e9cd51;*/
	background:#F3D954;
	overflow:hidden;
	border:4px dashed #c7535f;
}

aside {
	float:left;
	width:135px; height:560px;
}

	aside nav {
		width:135px;
		margin:0 0 0 10px;
	}

		nav ul{ margin:90px 0 0 20px; }

			nav ul li{ 
				margin:0; padding:0;
				list-style:none;
				width:67px;

				-webkit-transition: all 600ms ease-out;
			   	   -moz-transition: all 600ms ease-out;
			       		transition: all 600ms ease-out;
			}
			nav ul li.ativa{ 
				width:97px; height:97px;
				margin:15px 0 !important;
			}
			nav ul li.menu-obj1{ margin-left:35px; }
			nav ul li.menu-obj3{ margin-left:35px; }
			nav ul li.menu-obj5{ margin-left:35px; }
				
				nav ul li a{
					width:67px; height:67px;
					border-radius:100%;
					background:#c7535f;
					color:#FFFFFF;
					font-weight:bold;
					font-size:35px;
					text-align:center;
					display:table-cell;
					vertical-align:middle;
				    
				    -webkit-transform: translateZ(0);
				    		transform: translateZ(0);
				    /*-webkit-backface-visibility: hidden;
				    		backface-visibility: hidden;
				    -moz-osx-font-smoothing: grayscale;*/
				    -webkit-transition-duration: 0.4s;
				     		transition-duration: 0.4s;
					
				}
				
				nav ul li.ativa a{
					width:97px; height:97px;
				    font-size:65px;

				    -webkit-transform: scale(1.2);
				    		transform: scale(1.2);
				    -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
				    		transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
				}

/*setas*/
.obj-up,
.obj-down {
	position:absolute;
	left:50%;
	margin-left:-12px;
}
.obj-up	  { top:5px; }
.obj-down { bottom:5px; 
	-webkit-animation: bounce 2s 2;
    -moz-animation: bounce 2s 2;
    -o-animation: bounce 2s 2;
}
@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 
    40% {-webkit-transform: translateY(-30px);}
    60% {-webkit-transform: translateY(-15px);}
}
 
@-moz-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
    40% {-moz-transform: translateY(-30px);}
    60% {-moz-transform: translateY(-15px);}
}
 
@-o-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
    40% {-o-transform: translateY(-30px);}
    60% {-o-transform: translateY(-15px);}
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-30px);}
    60% {transform: translateY(-15px);}
}
/* setas */

.objects { 
	float:left;
	width:785px; height:560px;
}
	.objects .obj-item{ 
		height:560px; 

		-webkit-transition: all 600ms ease-out;
	   	   -moz-transition: all 600ms ease-out;
	       		transition: all 600ms ease-out;
	}

	.objects #obj1,
	#obj1.ativa{
		text-align: center;
		width:630px;
		margin:100px 0 0 50px;
	} 
		#obj1 .chamada {
			font-family:'AvenirNextLTPro-HeavyCn';
			text-transform:uppercase;
			letter-spacing:-1px;
			font-weight:bold;
			line-height:50px;
		}
		#obj1 .chamada .cinza {
			color:#5f5f5f;
			font-size:38px;
		}
		#obj1 .chamada .azul {
			color:#578ead;
			font-size:58px;
		}
		#obj1 .chamada .rosa {
			color:#c7535f;
			font-size:58px;
		}

		#obj1 .control {
			width:340px; height:70px;
			background:url(../img/controls.png) no-repeat right;
			text-align:left;
			margin:50px auto 0 auto;
		}
			#obj1 .control p {
			padding-top:5px;
			display: block;
			width:70%;
			color:#000;
			font-family:'CenturyGothic-Regular';
			}

	#obj2, #obj2.ativa {
		width:665px;
		margin:150px 0 0 50px;
	}
		#obj2 .text {
			width:380px;
		}
			#obj2 .text p {
				font-family:'CenturyGothic-Regular';
				font-size:20px;
				padding-top:20px;
			}

		#obj2 .obj2-imgDiv {
			width:275px; height:276px;
			background:url(../img/obj2-img.png) no-repeat;
		}


	#obj3, #obj3.ativa {
		width:645px;
		margin:150px 0 0 50px;
	}
		#obj3 .text {
			width:300px;
			
		}
			#obj3 .text p {
				font-family:'CenturyGothic-Regular';
				font-size:17px;
				padding-top:40px;
			}

		#obj3 .obj3-imgDiv {
			width:376px; height:291px;
			margin-right:-50px;
			/*background:url(../img/obj3-img.gif) no-repeat;*/
		}
		.obj3-imgDiv .control { margin:-35px 0 0 180px; }

	#obj4, #obj4.ativa {
		width:705px;
		margin:40px 0 0 30px;
	}

		#obj4 .text {
			
		}

			#obj4 .text p, 
			#obj5 .text p { font-size:22px; margin-bottom:10px; }
			#obj4 .text p:first-child{ line-height:25px;  }

				#obj4 .text p span,
				#obj5 .text p span { font-weight:bold; }
		
		#obj4 .animacao {
			width:190px;
			margin:30px 0 0 0;
			padding:0 20px 10px 20px;
			border-right:2px solid #000;
		}
		#obj4 .animacao:last-child { border-right:0 none; }

			#obj4 .animacao p { text-align:center; }


	#obj5, #obj5.ativa { width:690px; margin:60px 0 0 80px !important; }

		#obj5 .text p     { letter-spacing:-1px; }
			#obj5 .text p span{ display:block; }

		#obj5 .expressoes{ margin:60px 0 0 0; }
			#obj5 .expressoes span{
			 	display:block;
			 	float:left;
			 	margin:0 35px 35px 0; 
			 	text-align:center;
			 	font-family:'CenturyGothic-Regular';
			 	font-size:14px;
			}
				#obj5 .expressoes span img{ display:block; }

		.control {
			width:23px; height:18px;
			
			position:absolute;
			margin:-20px 0 0 85px;
		}
		.control a{
			display:block;
			width:23px; height:18px;
			text-indent:-9999px;
			background:url(../gifs/play.png) no-repeat;
		}
		.control a.pause{
			background:url(../gifs/pause.png) no-repeat;
		}

#obj1.posicao-top,
#obj2.posicao-top,
#obj3.posicao-top,
#obj4.posicao-top,
#obj5.posicao-top{ margin-top:-560px; }

#obj1.posicao-bottom,
#obj2.posicao-bottom,
#obj3.posicao-bottom,
#obj4.posicao-bottom,
#obj5.posicao-bottom{ margin-bottom:-560px !important; }