/* CSS DO OED, DEVE SER ALTERADO */
#contFade { position:absolute; width:800px; height:600px; background-color:#000; z-index:1000; display:none;}
#interatividade .abs{
	width:800px;
	height:600px;
	background-color:none;
}
#interface {z-index:100;}

#interatividade #inicio {background:url(img/bg_inicio.png); z-index:50;}
#interatividade #inicio .btInicio{position:absolute; width:133px; height:68px; cursor:pointer; background-image:url('img/bt_inicio.png'); left:0; right:0; margin:auto; top:266px;}

#atividade{position:absolute; display:none; width:800px; height:600px; background-color:#f9ead5;}
#atividade .bgs{position:absolute; width:800px; height:600px;}
#atividade.fase1 .bgs, #atividade.fase2 .bgs, #atividade.fase4 .bgs{background-image:url(img/bg_cafe.jpg);}
#atividade.fase3 .bgs, #atividade.fase5 .bgs{background-image:url(img/bg_almoco.jpg);}

#atividade #fase {width:242px; height:266px; position:absolute; margin:auto; top:0; right:0; left:0; bottom:0;}
#atividade.fase1 #fase{background-image:url(img/tit_fase1.png);}
#atividade.fase2 #fase{background-image:url(img/tit_fase2.png);}
#atividade.fase3 #fase{background-image:url(img/tit_fase3.png);}
#atividade.fase4 #fase{background-image:url(img/tit_fase2.png);}
#atividade.fase5 #fase{background-image:url(img/tit_fase4.png);}

#atividade .btOpcao {position:absolute; margin:auto; top:0; right:0; left:0; bottom:0; cursor:pointer; font-size:42px; text-align:center; line-height:300px;}
#atividade.fase1 .btOpcao, #atividade.fase2 .btOpcao, #atividade.fase4 .btOpcao{width:300px; height:300px}
#atividade.fase1 #bt1, #atividade.fase2 #bt1, #atividade.fase4 #bt1{top:-30px; bottom:auto;}
#atividade.fase1 #bt2, #atividade.fase2 #bt2, #atividade.fase4 #bt2{right:0; left:auto;}
#atividade.fase1 #bt3, #atividade.fase2 #bt3, #atividade.fase4 #bt3{bottom:-30px; top:auto;}
#atividade.fase1 #bt4, #atividade.fase2 #bt4, #atividade.fase4 #bt4{left:0; right:auto;}

#atividade.fase3 .btOpcao, #atividade.fase5 .btOpcao{width:400px; height:300px; margin:0}
#atividade.fase3 #bt1, #atividade.fase5 #bt1{right:auto; bottom:auto; background-position:-20px 0;}
#atividade.fase3 #bt2, #atividade.fase5 #bt2{left:auto; bottom:auto; background-position:20px 0;}
#atividade.fase3 #bt3, #atividade.fase5 #bt3{right:auto; top:auto; background-position:-20px 20px;}
#atividade.fase3 #bt4, #atividade.fase5 #bt4{left:auto; top:auto; background-position:20px 20px;}

#atividade .bgResposta {position:absolute; display:none}
#atividade.fase1 #bg1, #atividade.fase2 #bg1, #atividade.fase4 #bg1{background-image:url(img/bg_resposta1.png); width:600px; height:300px; left:100px}
#atividade.fase1 #bg2, #atividade.fase2 #bg2, #atividade.fase4 #bg2{background-image:url(img/bg_resposta2.png); width:400px; height:600px; right:0}
#atividade.fase1 #bg3, #atividade.fase2 #bg3, #atividade.fase4 #bg3{background-image:url(img/bg_resposta3.png); width:600px; height:300px; left:100px; bottom:0}
#atividade.fase1 #bg4, #atividade.fase2 #bg4, #atividade.fase4 #bg4{background-image:url(img/bg_resposta4.png); width:400px; height:600px;}

#atividade.fase3 .bgResposta, #atividade.fase5 .bgResposta{width:400px; height:300px; background-image:url(img/bg_resposta5.png); }
#atividade.fase3 #bg1, #atividade.fase5 #bg1{top:0; left:0;}
#atividade.fase3 #bg2, #atividade.fase5 #bg2{top:0; right:0;}
#atividade.fase3 #bg3, #atividade.fase5 #bg3{bottom:0; left:0;}
#atividade.fase3 #bg4, #atividade.fase5 #bg4{bottom:0; right:0;}

#atividade #placar {width:452px; height:64px; position:absolute; margin:auto; top:auto; right:0; left:0; bottom:-80px; background-image:url(img/bg_placar.png); box-shadow:0 0 10px rgba(71,2,2,.25)}
#atividade #placar .frutas {width:40px; height:64px; float:left; background-image:url(img/frutas_placar.png);}

#atividade #respostas 			{position:absolute; width:800px; height:600px; background-image:url(img/bg_pontuacao.jpg); display:none}
#atividade #respostas .icone		{width:342px; height:300px; position:absolute; margin:auto; top:auto; right:0; left:0; top:100px; background-image:url(img/img1_pontuacao.png); background-repeat:no-repeat; background-position:center;}
#atividade #respostas .placar 	{width:555px; height:108px; position:absolute; margin:auto; right:0; left:0; bottom:30px; background-image:url(img/bg_ponto.png);}
#atividade #respostas .frutas 	{width:555px; height:108px; float:left; background-image:url(img/frutas_ponto.png);}
#atividade #respostas .confere 	{float:right; font-size:20px}

.fechar {z-index:100;}
#home .ops{
	position:absolute;	
	font-family: 'font2B';
	font-size:25pt;
	text-transform:uppercase;
	transition: color .5s, text-shadow .5s, top .5s;
	opacity:0;
	cursor:pointer;	
	text-shadow:#333 1px 1px 1px;
}
#home .ops:hover{
	color:#eee;
	text-shadow: 0 1px 0 hsl(174,5%,80%), 0 2px 0 hsl(174,5%,75%), 0 3px 0 hsl(174,5%,70%), 0 4px 0 hsl(174,5%,66%), 0 5px 0 hsl(174,5%,64%), 0 6px 0 hsl(174,5%,62%), 0 7px 0 hsl(174,5%,61%), 0 8px 0 hsl(174,5%,60%), 0 0 5px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.2), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.2), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.3);
}
#home .op1{
	left:400px;
	top:110px;
	color:#e00076;
}
#home .op1:hover{ top:100px; }
#home .op2{
	left:350px;
	top:190px;
	color:#ffcb05;	
}
#home .op2:hover{ top:180px; }
#home .op3{
	left:300px;
	top:270px;
	color:#73b54c;
}
#home .op3:hover{ top:260px; }
#home .op4{
	left:250px;
	top:350px;
	color:#0091cb;
}
#home .op4:hover{ top:340px; }