@font-face {
	font-family: 'font3';
	src: url('fontes/arnold21.eot');
	src: url('fontes/arnold21.ttf');
}

#interface {z-index:10;}
#interatividade .abs{width:800px; height:600px; background-color:none;}

#interatividade {background-color:#FFF;}
#interatividade .vinheta{background-image:url('img/ativ_bg.png'); background-position:top center; background-repeat:no-repeat; text-align:center;  top:-600px}
#interatividade .vinheta .atv{background-image:url('img/ativ_1.png'); width:224px; height:208px; margin:225px 0 0 276px;}
#interatividade .grid{background-image:url('img/box_tit_grid.png'); text-align:center; top:-600px}
#interatividade .grid .enunciado{color: #fff; font-family: font3; font-size: 21px; margin: 50px auto; width: 430px;}
#interatividade .grid .enunciado span {font-family: Verdana;}
#interatividade .bg{background-image:url('img/bg_laterais.png');}
#interatividade .base{background-image:url('img/bg_base.png'); width:800px; height:67px; position:absolute; top:auto; bottom:0px;}

#interatividade .controles{background-image:url('img/bg_bt_seta.png'); width:291px; height:90px; position:absolute; top:auto; bottom:-200px; left:0; right:0; margin:auto; z-index:10}
#interatividade .controles #left{background-image:url('img/bt_seta_dir.png'); width:93px; height:84px; float:left; margin:-20px 0 0 20px; cursor:pointer;}
#interatividade .controles #right{background-image:url('img/bt_seta_esq.png'); width:93px; height:84px; float:left; margin:-20px 0 0; cursor:pointer;}
#interatividade .controles #ok{background-image:url('img/bt_ok.png'); width:93px; height:84px; float:left; margin:13px -15px 0; cursor:pointer;}

#atividade #btConfirmar{background-image:url('img/bt_confirmar.png'); width:159px; height:72px; position:absolute; top:auto; bottom:36px; left:auto; right:130px; cursor:pointer; display:none;}
#atividade #mudafase{background-image:url('img/bt_confirmar.png'); width:159px; height:72px; position:absolute; top:auto; bottom:21px; left:0;  cursor:pointer; display:block;}


#sombraPecas {opacity:0.3}
.t1{z-index:0;}
.t2{z-index:1;}


.fase{display:none}
.peca{cursor:pointer} 
.quadrado{width:62px; height:62px; border:1px solid #18668C; left:115px; top:180px; position:absolute; transform-origin:32px 32px 0;} 
.retangulo{width:127px; height:62px; border:1px solid #18668C; left:115px; top:180px; position:absolute; transform-origin:32px 32px 0;} 
.triangulo{left:245px; top:245px; position:absolute;  transform-origin:32px 32px 0;}
.triangulo::before{content:''; border-top:64px solid transparent;  border-left:64px solid #18668C; display:block; position:absolute;}

#fase1 .triangulo::after, #fase6 .triangulo::after{content:''; border-top:61px solid transparent;  border-left:61px solid #E56262; display:block; position:absolute; top:2px; left:1px;}
#fase2 .triangulo::after, #fase7 .triangulo::after{content:''; border-top:61px solid transparent;  border-left:61px solid #E5A862; display:block; position:absolute; top:2px; left:1px;}
#fase3 .triangulo::after, #fase8 .triangulo::after{content:''; border-top:61px solid transparent;  border-left:61px solid #5FDEC5; display:block; position:absolute; top:2px; left:1px;}
#fase4 .triangulo::after, #fase9 .triangulo::after{content:''; border-top:61px solid transparent;  border-left:61px solid #836EB5; display:block; position:absolute; top:2px; left:1px;}
#fase5 .triangulo::after, #fase10 .triangulo::after{content:''; border-top:61px solid transparent; border-left:61px solid #DE5FDE; display:block; position:absolute; top:2px; left:1px;}

#atividade .peca.on{z-index:10} 
#atividade .quadrado.on{width:58px; height:58px; border:3px solid #fff;} 
#atividade .retangulo.on{width:123px; height:58px; border:3px solid #fff;} 
#atividade .triangulo.on::before{content:''; border-top:64px solid transparent;  border-left:64px solid #fff; display:block; position:absolute;}

#fase1 .triangulo.on::after, #fase6   .triangulo.on::after{content:''; border-top:53px solid transparent; border-left:53px solid #E56262; display:block; position:absolute; top:8px; left:3px;}
#fase2 .triangulo.on::after, #fase7   .triangulo.on::after{content:''; border-top:53px solid transparent; border-left:53px solid #E5A862; display:block; position:absolute; top:8px; left:3px;}
#fase3 .triangulo.on::after, #fase8   .triangulo.on::after{content:''; border-top:53px solid transparent; border-left:53px solid #5FDEC5; display:block; position:absolute; top:8px; left:3px;}
#fase4 .triangulo.on::after, #fase9   .triangulo.on::after{content:''; border-top:53px solid transparent; border-left:53px solid #836EB5; display:block; position:absolute; top:8px; left:3px;}
#fase5 .triangulo.on::after, #fase10 .triangulo.on::after{content:''; border-top:53px solid transparent; border-left:53px solid #DE5FDE; display:block; position:absolute; top:8px; left:3px;}

#fb {background-color:rgba(255,255,255,0.8); text-align:center;}
#fb #proximaFase{background-image:url(img/bt_proximaativ.png); width:283px; height:262px; cursor:pointer; top:0; bottom:auto; left:0; right:0; margin:auto; position:absolute;}
#fb #tenteNovamente{background-image:url(img/bt_tentenovamente.png); width:283px; height:262px; cursor:pointer; top:auto; bottom:0; left:0; right:0; margin:auto;  position:absolute;}

#final {background-color:#fff; background-image:url('img/bg_laterais.png'); display:none}
#final .topCompletas{background-image:url(img/bt_completas.png); width:242px; height:136px; top:0; bottom:auto; left:auto; right:310px; margin:auto; position:absolute;}
#final .topTentativas{background-image:url(img/bt_tentativas.png); width:242px; height:136px; top:0; bottom:auto; left:auto; right:110px; margin:auto;  position:absolute;}
#final ul{width:450px; height:470px; top:130px; left:110px; position:absolute;}
#final li{border-bottom:2px solid #d8b0ca; height:42px; font-family: font3; font-size: 21px; color:#1D72A8; list-style:none; padding:0;}
#final li .atividades{display:block; width:230px; height:30px; margin:10px 0 0 10px; float:left; }
#final li .tentativas{display:block; width:30px; height:30px; margin:10px 0 0 10px; float:right; font-size: 21px; }
#final .reiniciar{background-image:url(img/bt_reiniciar.png); width:179px; height:121px; top:auto; bottom:0; left:auto; right:30px; margin:auto;  position:absolute; cursor:pointer}
#final .certo{background-image:url(img/certo_errado.png); width:40px; height:40px;float:left;}