/* -- reset -- */
*{
	padding: 0;
	margin: 0;
	
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	
	-webkit-tap-highlight-color: transparent;
}

@font-face {
	font-family: ArialRound;
	src: url('../media/arlrdbd.ttf');
}

/* -- fim reset -- */

/* -- loading -- */
.sk-cube-grid {
    width: 402px;
    height: 288px;
    margin: 217px auto;
}

.sk-cube-grid .sk-cube {
	width: 134px;
    height: 96px;
	float: left;
	-webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
	animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; 
}

.sk-cube-grid .sk-cube1 {
	background-image: url(../media/loading1.png);
	background-size: contain;
	background-repeat: no-repeat;
	
	-webkit-animation-delay: 0.2s;
	animation-delay: 0.2s;
}

.sk-cube-grid .sk-cube2 {
	background-image: url(../media/loading2.png);
	background-size: contain;
	background-repeat: no-repeat;
	
	-webkit-animation-delay: 0.3s;
	animation-delay: 0.3s;
}

.sk-cube-grid .sk-cube3 {
	background-image: url(../media/loading3.png);
	background-size: contain;
	background-repeat: no-repeat;
	
	-webkit-animation-delay: 0.4s;
	animation-delay: 0.4s;
}

.sk-cube-grid .sk-cube4 {
	background-image: url(../media/loading4.png);
	background-size: contain;
	background-repeat: no-repeat;
	
	-webkit-animation-delay: 0.1s;
	animation-delay: 0.1s;
}

.sk-cube-grid .sk-cube5 {
	background-image: url(../media/loading5.png);
	background-size: contain;
	background-repeat: no-repeat;
	
	-webkit-animation-delay: 0.2s;
	animation-delay: 0.2s;
}

.sk-cube-grid .sk-cube6 {
	background-image: url(../media/loading6.png);
	background-size: contain;
	background-repeat: no-repeat;
	
	-webkit-animation-delay: 0.3s;
	animation-delay: 0.3s;
}

.sk-cube-grid .sk-cube7 {
	background-image: url(../media/loading7.png);
	background-size: contain;
	background-repeat: no-repeat;
	
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
}

.sk-cube-grid .sk-cube8 {
	background-image: url(../media/loading8.png);
	background-size: contain;
	background-repeat: no-repeat;
	
	-webkit-animation-delay: 0.1s;
	animation-delay: 0.1s;
}

.sk-cube-grid .sk-cube9 {
	background-image: url(../media/loading9.png);
	background-size: contain;
	background-repeat: no-repeat;
	
	-webkit-animation-delay: 0.2s;
	animation-delay: 0.2s;
}

@-webkit-keyframes sk-cubeGridScaleDelay {
	0%, 70%, 100% {
		-webkit-transform: scale3D(1, 1, 1);
		transform: scale3D(1, 1, 1);
	}
	35%{
		-webkit-transform: scale3D(0, 0, 1);
		transform: scale3D(0, 0, 1); 
	}
}

@keyframes sk-cubeGridScaleDelay {
	0%, 70%, 100% {
		-webkit-transform: scale3D(1, 1, 1);
		transform: scale3D(1, 1, 1);
	}
	35%{
		-webkit-transform: scale3D(0, 0, 1);
		transform: scale3D(0, 0, 1);
	}
}
/* -- global --*/


html{
	width: 100%;
	height: 100%;
	background: #212121;
}

body{
	width: 1280px;
	height: 720px;
	margin-left: auto;
	margin-right: auto;
	font-family: Georgia;
}
/* -- fim global -- */


/* -- point of view -- */
.loading{
	position: relative;
	width: 1280px;
	height: 720px;
	overflow: hidden;
}

.screen{
	position: relative;
	width: 1280px;
	height: 720px;
	overflow: hidden;
	opacity: 0;
}

.frame{
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	outline: 2px solid #F8CA03;
    outline-offset: -15px;
}

.loading{
	background-color: #212121;
	z-index: 1000;
}

.frame1bg_short{
	-webkit-transition: 1000ms;
	transition: 1000ms;
	
	-webkit-transition-timing-function: ease-in-out;
	transition-timing-function: ease-in-out;
}

.frame1bg_intro{
	-webkit-transition: 5000ms;
	transition: 5000ms;
	
	-webkit-transition-timing-function: linear;
	transition-timing-function: linear;
}

.bgs_intro_off{
	float: left;
	width: 0px;
	height: 100%;
	-webkit-transition: 2000ms;
	transition: 2000ms;
}

.bg_intro_on{
	width: 213px;
}

.bg_intro_out{
	-webkit-transition: 500ms;
	transition: 500ms;
	height: 0px;
}

.florestamini_bg{
	background-image: url(../media/floresta-bg.jpg);
    background-repeat: no-repeat;
    background-position: -100px 50%;
}

.floresta1_bg{
	background-image: url(../media/floresta-bg.jpg);
    background-repeat: no-repeat;
    background-position: -1px 0px;
}

.floresta2_bg{
	background-image: url(../media/floresta-bg.jpg);
    background-repeat: no-repeat;
    background-position: -300px 50%;
}

.floresta_bg{
	background-image: url(../media/floresta-bg.jpg);
    background-repeat: no-repeat;
    background-position: -100px 50%;
}

.beirario_bg{
	background-image: url(../media/beirario-bg.jpg);
    background-repeat: no-repeat;
    background-position: -200px 50%;
}

.campo1_bg{
	background-image: url(../media/campo-bg.jpg);
    background-repeat: no-repeat;
	background-position: -130px -350px;
}

.campo2_bg{
	background-image: url(../media/campo-bg.jpg);
    background-repeat: no-repeat;
	background-position: -430px -140px;
}

.deserto_bg{
	background-image: url(../media/deserto-bg.jpg);
    background-repeat: no-repeat;
    background-position: -10px 40%;
}

.fundomar_bg{
	background-image: url(../media/fundomar-bg.jpg);
    background-repeat: no-repeat;
    background-position: -250px 50%;
}

.gelo_bg{
	background-image: url(../media/gelo-bg.jpg);
    background-repeat: no-repeat;
    background-position: -10px 50%;
}

.animalfabeto{
	position: absolute;
    top: 90px;
    left: 240px;
    width: 800px;
    height: 568px;
	display: none;
}

.bt_creditos{
	position: absolute;
	top: 25px;
	right: 25px;
	width: 50px;
	height: 50px;
	cursor: pointer;
	-webkit-transition: 500ms;
	transition: 500ms;
}

.bt_creditos_off{
	opacity: 0;
}

.bt_avancar{
	position: absolute;
	bottom: 25px;
	right: 25px;
    width: 101px;
    height: 89px;
	cursor: pointer;
	-webkit-transition: 500ms;
	transition: 500ms;
}

.bt_avancar_left{
	right: 75px;
}

.bt_avancar_right{
	right: -110px;
}

.bt_voltar{
	position: absolute;
	bottom: 25px;
	left: 25px;
    width: 101px;
    height: 89px;
	cursor: pointer;
	-webkit-transition: 500ms;
	transition: 500ms;
}

.bt_voltar_right{
	left: 75px;
}

.bt_voltar_left{
	left: -110px;
}

.sombra:hover{
	-webkit-filter: drop-shadow(-5px 5px 10px #000000);
	filter: drop-shadow(-5px 5px 10px #000000);
}

.caixa:hover{
	box-shadow: -5px 5px 10px #000000;
}

.creditos{
	background-color: rgba(255, 255, 255, 0.8);
	display: none;
}

.creditos_p{
	font-family: ArialRound;
}

.creditos_p_branco{
	font-family: ArialRound;
	line-height: 70px;
    font-size: 30px;
    color: #ffffff;
    padding-left: 20px;
}

.creditos_p_colorido{
	font-family: ArialRound;
	line-height: 70px;
    font-size: 26px;
    padding-left: 20px;
}

.creditos_wrapper{
	position: absolute;
	top: 30px;
	left: 490px;
	width: 300px;
	height: 100px;
	background-color: #DC4F7F;
	border-radius: 15px;
}

#credito_header{
	line-height: 100px;
    font-size: 55px;
    color: #ffffff;
    text-align: center;
}

.wrapper_credito {
	position: absolute;
	border-radius: 15px;
	overflow: hidden;
	
	-webkit-transition: 500ms;
	transition: 500ms;
}

.desenvolvimento_wrapper{
	top: 150px;
	left: 100px;
	width: 0px;
	height: 70px;
	background-color: #0079AE;
}

.programacao_wrapper{
	top: 250px;
	left: 100px;
	width: 0px;
	height: 70px;
	background-color: #D13829;
}

.layout_wrapper{
	top: 350px;
	left: 100px;
	width: 0px;
	height: 70px;
	background-color: #8C4691;
}

.ilustracao_wrapper{
	top: 450px;
	left: 100px;
	width: 0px;
	height: 70px;
	background-color: #F39619;
}

.locucao_wrapper{
	top: 550px;
	left: 100px;
	width: 0px;
	height: 70px;
	background-color: #1C3B4E;
}

.desenvolvimento_nome_wrapper{
	top: 150px;
	left: 420px;
	width: 0px;
	height: 70px;
	color: #0079AE;
	background-color: rgba(255, 255, 255, 0.85);
}

.programacao_nome_wrapper{
	top: 250px;
	left: 420px;
	width: 0px;
	height: 70px;
	color: #D13829;
	background-color: rgba(255, 255, 255, 0.85);
}

.layout_nome_wrapper{
	top: 350px;
	left: 420px;
	width: 0px;
	height: 70px;
	color: #8C4691;
	background-color: rgba(255, 255, 255, 0.85);
}

.ilustracao_nome_wrapper{
	top: 450px;
	left: 420px;
	width: 0px;
	height: 70px;
	color: #F39619;
	background-color: rgba(255, 255, 255, 0.85);
}

.locucao_nome_wrapper{
	top: 550px;
	left: 420px;
	width: 0px;
	height: 70px;
	color: #1C3B4E;
	background-color: rgba(255, 255, 255, 0.85);
}

.creditos300{
	width: 300px;
}

.creditos450{
	width: 450px;
	
	-webkit-transition-delay: 500ms;
	transition-delay: 500ms;
}

#menu{
	display: none;
}

.letra{
	position: absolute;
	width: 120px;
	height: 120px;
	overflow: hidden;
	border-radius: 15px;
	cursor: pointer;
	
	-webkit-transition: 1000ms;
	transition: 1000ms;
}

.thumb_alvo{
	position: absolute;
	width: 120px;
	height: 120px;
	overflow: hidden;
	border-radius: 15px;
	cursor: pointer;
	
	-webkit-transition: 1000ms;
	transition: 1000ms;
}

.letra_p{
	font-size: 110px;
	text-align: center;
	line-height: 120px;
	text-transform: uppercase;
	color: #fff;
	font-family: ArialRound;
}

.verde{
	background-color: #00977D;
}

.azul{
	background-color: #0079AE;
}

.vermelho{
	background-color: #D13829;
}

.roxo{
	background-color: #8C4691;
}

.laranja{
	background-color: #F39619;
}

.azulescuro{
	background-color: #1C3B4E;
}

.rosa{
	background-color: #BD1551;
}

.marrom{
	background-color: #936241;
}

.verde_i{
	background-color: #8B9C1D;
}

.verde_j{
	background-color: #10574D;
}

.azul_l{
	background-color: #0093BA;
}

.vermelho_m{
	background-color: #DB645B;
}

.rosa_q{
	background-color: #DC4F7F;
}

.amarelo_r{
	background-color: #CDB12E;
}

.verde_s{
	background-color: #44471A;
}

.roxo_z{
	background-color: #32173A;
}

.desativado{
	background-color: #aaaaaa;
}

.linha1{
	top: 20%;
}

.linha2{
	top: 40%;
}

.linha3{
	top: 60%;
}

.coluna1{
	left: 3%;
}

.coluna2{
	left: 17%;
}

.coluna3{
	left: 31%;
}

.coluna4{
	left: 45%;
}

.coluna5{
	left: 59%;
}

.coluna6{
	left: 73%;
}

.coluna7{
	left: 87%;
}

.coluna2a{
	left: 15%;
}

.coluna3a{
	left: 27%;
}

.coluna4a{
	left: 39%;
}

.coluna5a{
	left: 51%;
}

.coluna6a{
	left: 63%;
}

.coluna7a{
	left: 75%;
}

.pos_1{
	top: -20%;
	left: -25%;
}

.pos_2{
	top: -20%;
	left: 0%;
}

.pos_3{
	top: -20%;
	left: 25%;
}

.pos_4{
	top: -20%;
	left: 50%;
}

.pos_5{
	top: -20%;
	left: 75%;
}

.pos_6{
	top: -20%;
	left: 100%;
}

.pos_7{
	top: -20%;
	left: 125%;
}

.pos_8{
	top: 0%;
	left: -10%;
}

.pos_9{
	top: 25%;
	left: -10%;
}

.pos_10{
	top: 50%;
	left: -10%;
}

.pos_11{
	top: 75%;
	left: -10%;
}

.pos_12{
	top: 0%;
	left: 110%;
}

.pos_13{
	top: 25%;
	left: 110%;
}

.pos_14{
	top: 50%;
	left: 110%;
}

.pos_15{
	top: 75%;
	left: 110%;
}

.pos_16{
	top: 110%;
	left: -25%;
}

.pos_17{
	top: 110%;
	left: 0%;
}

.pos_18{
	top: 110%;
	left: 25%;
}

.pos_19{
	top: 110%;
	left: 50%;
}

.pos_20{
	top: 110%;
	left: 75%;
}

.pos_21{
	top: 110%;
	left: 100%;
}

.pos_22{
	top: 110%;
	left: 125%;
}

.frame_letra{
	position: absolute;
	left: 4%;
    top: -20%;
	width: 92px;
	height: 100px;
	
	-webkit-transition: 1000ms;
	transition: 1000ms;
}

.frame_letra_on{
	left: 4%;
    top: 50px;
}

.frame_barra{
	position: absolute;
	left: 365px;
    top: 50px;
	width: 610px;
	height: 0px;
	border-radius: 15px;
	overflow: hidden;
	
	-webkit-transition: 1000ms;
	transition: 1000ms;
}

.frame_barra_on{
	height: 100px;
}

.barra_texto{
	position: absolute;
	left: 0%;
	top: 100%;
	width: 610px;
	font-size: 75px;
	text-align: center;
	line-height: 100px;
	color: #fff;
	font-family: ArialRound;
	cursor: pointer;
	z-index: 1;
	
	-webkit-transition: 1000ms;
	transition: 1000ms;
}

.barra_texto_on{
	top: 0%;
}

.bt_som1{
	position: absolute;
    top: 30px;
    right: 50px;
    width: 30px;
    height: 40px;
	display: none;
}

.bt_som2{
	position: absolute;
    top: 36px;
    right: 35px;
    width: 10px;
    height: 28px;
	display: none;
}

.bt_som3{
	position: absolute;
    top: 27px;
    right: 20px;
    width: 14px;
    height: 46px;
	display: none;
}

.bt_som2_on{
	-webkit-animation-duration: 1000ms;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-name: som2;
	
	animation-duration: 1000ms;
    animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-name: som2;
}

.bt_som3_on{
	-webkit-animation-duration: 1000ms;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-name: som2;
	
	animation-duration: 1000ms;
    animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-name: som3;
}

@-webkit-keyframes som2{
    0% 	{opacity: 0;}
    50%{opacity: 1;}
    100%{opacity: 0;}
} 

@keyframes som2{
    0% 	{opacity: 0;}
    50%{opacity: 1;}
    100%{opacity: 0;}
}

@-webkit-keyframes som3{
    0% 	{opacity: 0;}
    100%{opacity: 1;}
} 

@keyframes som3{
    0% 	{opacity: 0;}
    100%{opacity: 1;}
}

.thumb_img{
	position: absolute;
    width: 100px;
    height: 80px;
    top: 20px;
    left: 10px;
	opacity: 0.7;
	
	-webkit-transition: 1000ms;
	transition: 1000ms;
}

.img_grande{
    position: absolute;
    top: 750px;
    left: 365px;
    width: 610px;
    height: 450px;
	
	-webkit-transition: 1000ms;
	transition: 1000ms;
	-webkit-perspective: 550px;
	perspective: 550px;
}

.img_grande_on{
	top: 200px;
}

.imgs_flip{
	position: absolute;
	top: 120%;
	left: 0%;
	width: 610px;
	height: 450px;
	
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
  
	-webkit-transition: 500ms;
	transition: 500ms;
}

.imgs_flip_on{
	top: 0%;
	left: 0%;
}

.frente{
}

.verso{
	transform: rotateX(180deg);
}

.imgs_flip_X_180{	
	-webkit-transform: rotateX(-180deg);
	transform: rotateX(-180deg);
}

.img_animal{
	position: absolute;
	
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.opacidade1{
	opacity: 1;
}

.thumb1_off{
	top: -20%;
	left: 3%;
}

.thumb2_off{
	top: -20%;
	left: 3%;
}

.thumb3_off{
	top: -20%;
	left: 3%;
}

.thumb1_on{
	top: 25%;
	left: 3%;
}

.thumb2_on{
	top: 45%;
	left: 3%;
}

.thumb3_on{
	top: 65%;
	left: 3%;
}

.frame_alfabeto_out{
	position: absolute;
	left: -100%;
	outline: none;
	
	-webkit-transition: 1000ms;
	transition: 1000ms;
	
	/*background-color: rgba(255, 255, 255, 0.6);*/
}

.frame_alfabeto_in{
	left: 0%;
}

.verso_animal{
	top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;
}

/* IMAGEM ANIMAIS */
.ilustra_abelha{
	top: 10px;
    left: 30px;
    width: 550px;
    height: 438px;
}

.ilustra_arara{
	top: 10px;
    left: 90px;
    width: 430px;
    height: 438px;
}

.ilustra_borboleta{
	top: 10px;
    left: 126px;
    width: 358px;
    height: 438px;
}

.ilustra_beijaflor{
    top: 10px;
    left: 5px;
    width: 600px;
    height: 390px;
}

.ilustra_cachorro{
	top: 10px;
    left: 30px;
    width: 550px;
    height: 438px;
}

.ilustra_coelho{
	top: 10px;
    left: 25px;
    width: 560px;
    height: 440px;
}

.ilustra_coruja{
	top: 92px;
    left: 0px;
    width: 610px;
    height: 266px;
}