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

/*///// BASICS ///////////////////////////////////////////
//////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////
////////////////////////////////////////////////////////*/

html{
	height:100%;
}

body{
	width:100%;
	height:100%;	
	margin:0;
	font-weight:300;
	font-family: 'Bangers', cursive;
	color:#000;
	background:#FF0;
}

img{
	border:none;
}

input:focus, textarea:focus, select:focus{
	outline:none;
}

a{
	text-decoration:none;
	color:inherit;
	cursor:pointer;
}

p.paragrafo {
    text-indent: 2em;
	text-align:justify;
}

#base{
	position:relative;
	display:block;
	width:100%;
	height:100%;
	max-height:100%;
	margin:0;
}

input[type=radio]{
	position:absolute;
	opacity:0;
	z-index:-1;
}
























/*///// HEADER ///////////////////////////////////////////
//////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////
////////////////////////////////////////////////////////*/

#header{
	position:fixed;
	display:block;
	top:0;
	width:100%;
	z-index:200;
	background:rgba(51,51,51,.2);
	text-align:center;
}

#header #menu{
	position:relative;
	display:inline-block;
	vertical-align:middle;
}

#header #menu ul{
	margin:0;
	padding:20px;
	list-style:none;
}

#header #menu li{
	position:relative;
	display:inline-block;
	margin:0 14px;
	font-size:28px;
}

























/*///// BODY ///////////////////////////////////////////
//////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////
////////////////////////////////////////////////////////*/

#body{
	position:relative;
	display:block;
	width:100%;
	min-width:1000px;
	min-height:100%;
	height:100%;
}

#design{
	position:relative;
	display:table;
	width:100%;
	height:100%;
	background:url(../images/background_02.png) no-repeat;
	background-position:center;
}

#personagem{
	position:relative;
	display:table;
	width:400px;
	margin:0 auto;
	margin-top:120px;
	text-align:center;
}

#identidade{
	position:absolute;
	
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;
	
	-webkit-box-align-items: center;      /* OLD - iOS 6-, Safari 3.1-6 */
	-moz-box-align-items: center;         /* OLD - Firefox 19- */
	-webkit-align-items: center;          /* Chrome */
	-ms-align-items: center;
	align-items: center;
	
	-webkit-box-justify-content: center;      /* OLD - iOS 6-, Safari 3.1-6 */
	-moz-box-justify-content: center;         /* OLD - Firefox 19- */
	-webkit-justify-content: center;          /* Chrome */
	-ms-justify-content: center;
	justify-content: center;
	
	width:100%;
	height:100%;
	top:0;
	left:0;
	background:#9DCCC5;
}

#identidade #item{
	position:relative;
	display:table;
	text-align:center;
	margin:4px auto;
}

#identidade input[type=text]{
	padding:4px 8px;
	background:rgba(255,255,255,.3);
	font-family: 'Indie Flower', cursive;
	color:rgba(0,0,0,.7);
	font-size:22px;
	text-align:center;
	border:none;
	border-radius:4px;
	width:300px;
}

#identidade label.select{
	position:relative;
	display:table;
	margin:0 auto;
	min-width:80px;
	min-height:46px;
	z-index:10;
	cursor:pointer;
}

#identidade input[type=text].select{
	position:absolute;
	top:0;
	left:50%;
	margin-left:-38px;
	width:60px;
	cursor:pointer;
}

#identidade #age_selector{
	position:absolute;
	display:none;
	top:46px;
	left:50%;
	width:300px;
	text-align:center;
	margin:2px 0;
	margin-left:-158px;
	padding:4px 8px;
	color:rgba(0,0,0,.7);
	background:#EDEDED;
	border-radius:4px;
	box-shadow:1px 1px 3px rgba(0,0,0,.05);
	list-style:none;
	z-index:10;
}

#identidade #age_selector:before{
	position:absolute;
	content:'';
	top:-10px;
	left:50%;
	margin-left:-10px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 10px 10px 10px;
	border-color: transparent transparent #EDEDED transparent;
}

#identidade #age_selector:after{
	position:absolute;
	content:'';
	top:-10px;
	left:50%;
	margin-left:-40px;
	width:80px;
	height:10px;
}

#identidade #age_selector li{
	position:relative;
	display:inline-table;
	margin:4px 0;
	padding:4px 5px;
	border-radius:2px;
	cursor:pointer;
	transition:all .2s;
}

#identidade #age_selector li:hover{
	background:rgba(153,153,153,.5);
}

#identidade label.radio{
	position:relative;
	display:inline-table;
	font-size:18px;
	margin:0 4px;
	margin-bottom:10px;
	padding:8px 12px;
	border-radius:4px;
	cursor:pointer;
	transition:all .2s;
}

#identidade input[type=radio]:checked + label{
	background:rgba(0,0,0,.2);
}

#identidade ::-webkit-input-placeholder {
   color:#069;
}

#identidade span.editar{
	position:relative;
	display:table;
	padding:8px;
	margin:10px auto;
	margin-bottom:0;
	background:rgba(255,255,255,.8);
	font-size:18px;
	cursor:pointer;
	border-radius:4px;
}

#identidade :-moz-placeholder { /* Firefox 18- */
   color:#036;  
}

#identidade ::-moz-placeholder {  /* Firefox 19+ */
   color:#036;  
}

#identidade :-ms-input-placeholder {  
   color:#036; 
}

#card{
	position:relative;
	display:table;
	padding:40px 50px;
	background:rgba(0,102,153,.9);
	border-radius:5px;
	box-shadow:5px 5px 10px rgba(0,0,0,.3);
}

#menino{
	position:absolute;
	display:table;
	height:512px;
	width:202px;
	left:50%;
	margin-left:-101px;
	z-index:2;
}

#menino_base{
	position:absolute;
	display:table;
	height:512px;
	width:202px;
	left:50%;
	margin-left:-101px;
	z-index:1;
	background:url(../images/personagem_base.png) no-repeat;
	background-position:center top;
}

#personagem label{
	transition:all .2s;
}

#personagem label:hover{
	border-color:#FFF;
}
























/*///// CAMISA ///////////////////////////////////////////
//////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////
////////////////////////////////////////////////////////*/

#camisa{
	position:absolute;
	display:table;
	z-index:4;
	top:112px;
	left:50%;
	margin-left:-90px;
	width:180px;
	height:180px;
	text-align:center;
}

#camisa:after{
	position:absolute;
	display:table;
	content:'';
	top:0;
	left:0;
	width:180px;
	height:180px;
	background:url(../images/pecas/camisa_detalhes.png);
	background-repeat:no-repeat;
	background-position:center;
}

#camisa.inverno:after{
	background-image:url(../images/pecas/detalhe_s_02.png);
}

#camisa.colant:after{
	background-image:url(../images/pecas/detalhe_s_03.png);
}

#camisa input[type=color]{
	opacity:0;
}

#camisa label{
	position:absolute;
	top:0;
	right:-200px;
	width:120px;
	height:40px;
	border-radius:30px;
	background:#4b906a;
	color:#000;
	text-align:center;
	border:#000 solid 2px;
}

#camisa label:before{
	content:'Cor da Camisa';
	position:absolute;
	top:12px;
	left:12px;
	white-space:nowrap;
}

#camisa label:after{
	content:'';
	position:absolute;
	left:-24px;
	top:11px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 20px 10px 0;
	border-color: transparent #000 transparent transparent;
}

#traje{
	margin-bottom:20px;
	background:#39C;
	border:rgba(0,0,0,.3) solid 2px;
	border-radius:5px;
	padding:20px 0;
}

#traje h3{
	font-weight:normal;
	margin:0;
	margin-bottom:10px;
	padding:0;
}

label.traje{
	margin:10px;
	cursor:pointer;
	color:rgba(0,0,0,.5);
}

#traje input[type=radio]:checked + label{
	color:rgba(0,0,0,1);
}
























/*///// CALÇAS ///////////////////////////////////////////
//////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////
////////////////////////////////////////////////////////*/

#calca{
	position:absolute;
	display:table;
	z-index:3;
	top:275px;
	left:50%;
	margin-left:-90px;
	width:180px;
	height:220px;
}

#calca:after{
	position:absolute;
	display:table;
	content:'';
	top:0;
	left:0;
	width:180px;
	height:220px;
	background:url(../images/pecas/detalhe_p_01.png);
	background-repeat:no-repeat;
	background-position:center;
}

#calca.inverno:after{
	background-image:url(../images/pecas/detalhe_p_02.png);
}

#calca.colant:after{
	background-image:url(../images/pecas/detalhe_p_03.png);
}

#calca input[type=color]{
	opacity:0;
}

#calca label{
	position:absolute;
	top:86px;
	right:-240px;
	width:160px;
	height:40px;
	border-radius:30px;
	background:#4b906a;
	color:#000;
	text-align:center;
	border:#000 solid 2px;
}

#calca label:before{
	content:'Cor da Bermuda/ Calça';
	position:absolute;
	top:12px;
	left:12px;
	white-space:nowrap;
}

#calca label:after{
	content:'';
	position:absolute;
	left:-24px;
	top:11px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 20px 10px 0;
	border-color: transparent #000 transparent transparent;
}

























/*///// SUNGA ///////////////////////////////////////////
//////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////
////////////////////////////////////////////////////////*/

#calcao{
	position:absolute;
	display:table;
	z-index:5;
	top:275px;
	left:50%;
	margin-left:-55px;
	width:110px;
	height:90px;
	background-position:center;
}

#calcao:after{
	position:absolute;
	display:table;
	content:'';
	top:0;
	left:0;
	width:110px;
	height:90px;
	background:url(../images/pecas/detalhe_sunga.png);
	background-repeat:no-repeat;
	background-position:center;
}

#calcao input[type=color]{
	opacity:0;
}

#calcao label{
	position:absolute;
	top:34px;
	right:-200px;
	width:110px;
	height:40px;
	border-radius:30px;
	background:#4b906a;
	color:#000;
	text-align:center;
	border:#000 solid 2px;
}

#calcao label:before{
	content:'Cor do Calção';
	position:absolute;
	top:12px;
	left:12px;
	white-space:nowrap;
}

#calcao label:after{
	content:'';
	position:absolute;
	left:-24px;
	top:11px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 20px 10px 0;
	border-color: transparent #000 transparent transparent;
}

#ativar_calcao{
	position:relative;
	display:table;
	text-align:center;
	margin:5px;
}

#ativar_calcao h3{
	font-weight:normal;
	margin:0;
	padding:8px;
	padding-left:70px;
}

label.off{
	position:absolute;
	width:60px;
	height:36px;
	top:0;
	left:0;
	background:url(../images/icones/on.png) no-repeat;
	cursor:pointer;
}

label.on{
	position:absolute;
	display:none;
	width:60px;
	height:36px;
	top:0;
	left:0;
	background:url(../images/icones/off.png) no-repeat;
	cursor:pointer;
}
























/*///// CINTO ///////////////////////////////////////////
//////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////
////////////////////////////////////////////////////////*/

#cinto{
	position:absolute;
	display:table;
	z-index:5;
	top:270px;
	left:50%;
	margin-left:-55px;
	width:110px;
	height:25px;
}

#cinto:after{
	position:absolute;
	display:table;
	content:'';
	top:0;
	left:0;
	width:110px;
	height:25px;
	background:url(../images/pecas/detalhe_cinto.png);
	background-repeat:no-repeat;
	background-position:top center;
}

#cinto input[type=color]{
	opacity:0;
	position:absolute;
}

#cinto label{
	position:absolute;
	top:-10px;
	right:-230px;
	width:100px;
	height:40px;
	border-radius:30px;
	background:#4b906a;
	color:#000;
	text-align:center;
	border:#000 solid 2px;
}

#cinto label:before{
	content:'Cor do Cinto';
	position:absolute;
	top:12px;
	left:12px;
	white-space:nowrap;
}

#cinto label:after{
	content:'';
	position:absolute;
	left:-24px;
	top:11px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 20px 10px 0;
	border-color: transparent #000 transparent transparent;
}

#ativar_cinto{
	position:relative;
	display:table;
	text-align:center;
	margin:5px;
}

#ativar_cinto h3{
	font-weight:normal;
	margin:0;
	padding:8px;
	padding-left:70px;
}

























/*///// CAPA ///////////////////////////////////////////
//////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////
////////////////////////////////////////////////////////*/

#capa{
	position:absolute;
	display:table;
	z-index:0;
	top:10px;
	left:50%;
	margin-left:-150px;
	width:300px;
	height:400px;
}

#capa_detalhe{
	position:absolute;
	display:table;
	z-index:5;
	top:10px;
	left:50%;
	margin-left:-150px;
	background:url(../images/pecas/capa_detalhe.png) no-repeat;
	width:300px;
	height:400px;
	background-position:center;
}

#capa:after{
	position:absolute;
	display:table;
	content:'';
	top:0;
	left:0;
	width:300px;
	height:400px;
	background:url(../images/pecas/detalhe_capa_01.png);
	background-repeat:no-repeat;
	background-position:top center;
}

#capa input[type=color]{
	opacity:0;
	position:absolute;
}

#capa label{
	position:absolute;
	top:54px;
	right:-200px;
	width:98px;
	height:40px;
	border-radius:30px;
	background:#ff9c00;
	color:#000;
	text-align:center;
	border:#000 solid 2px;
}

#capa label:before{
	content:'Cor da Capa';
	position:absolute;
	top:12px;
	left:12px;
	white-space:nowrap;
}

#capa label:after{
	content:'';
	position:absolute;
	left:-24px;
	top:11px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 20px 10px 0;
	border-color: transparent #000 transparent transparent;
}

#ativar_capa{
	position:relative;
	display:table;
	text-align:center;
	margin:5px;
}

#ativar_capa h3{
	font-weight:normal;
	margin:0;
	padding:8px;
	padding-left:70px;
}

























/*///// MÁSCARA ///////////////////////////////////////////
//////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////
////////////////////////////////////////////////////////*/

#mascara{
	position:absolute;
	display:table;
	z-index:10;
	top:-16px;
	left:50%;
	margin-left:-130px;
	width:260px;
	height:144px;
	background-position:center;
}

#mascara img.masc_left{
	position:absolute;
	left:0;
	top:30px;
	opacity:.8;
	transition:all .3s;
	cursor:pointer;
}

#mascara img.masc_left:hover, #mascara img.masc_right:hover{
	opacity:1;
}

#mascara img.masc_right{
	position:absolute;
	right:0;
	top:30px;
	opacity:.8;
	transition:all .3s;
	cursor:pointer;
}

#mascara input[type=color]{
	opacity:0;
}

#mascara label{
	position:absolute;
	top:30px;
	right:-200px;
	width:120px;
	height:40px;
	border-radius:30px;
	background:#4b906a;
	color:#000;
	text-align:center;
	border:#000 solid 2px;
}

#mascara label:before{
	content:'Cor da Máscara';
	position:absolute;
	top:12px;
	left:12px;
	white-space:nowrap;
}

#mascara label:after{
	content:'';
	position:absolute;
	left:-24px;
	top:11px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 20px 10px 0;
	border-color: transparent #000 transparent transparent;
}

























/*///// PULSEIRAS ///////////////////////////////////////////
//////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////
////////////////////////////////////////////////////////*/

#pulseiras{
	position:absolute;
	display:table;
	z-index:5;
	top:204px;
	left:50%;
	margin-left:-100px;
	width:200px;
	height:80px;
	background-position:center;
}

#pulseiras:after{
	position:absolute;
	display:table;
	content:'';
	top:0;
	left:0;
	width:200px;
	height:80px;
	background:url(../images/pecas/detalhe_pulseiras.png);
	background-repeat:no-repeat;
	background-position:top center;
}

#pulseiras input[type=color]{
	opacity:0;
	position:absolute;
}

#pulseiras label{
	position:absolute;
	top:8px;
	right:-230px;
	width:188px;
	height:40px;
	border-radius:30px;
	background:#4b906a;
	color:#000;
	text-align:center;
	border:#000 solid 2px;
}

#pulseiras label:before{
	content:'Cor dos Protetores de Pulso';
	position:absolute;
	top:12px;
	left:12px;
	white-space:nowrap;
}

#pulseiras label:after{
	content:'';
	position:absolute;
	left:-24px;
	top:11px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 20px 10px 0;
	border-color: transparent #000 transparent transparent;
}

#ativar_pulseiras{
	position:relative;
	display:table;
	text-align:center;
	margin:5px;
}

#ativar_pulseiras h3{
	font-weight:normal;
	margin:0;
	padding:8px;
	padding-left:70px;
}
























/*///// LOGO HERO ///////////////////////////////////////////
//////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////
////////////////////////////////////////////////////////*/
#logo_hero{
	position:absolute;
	display:table;
	z-index:4;
	top:150px;
	left:50%;
	margin-left:-40px;
	width:80px;
	height:80px;
	background-position:center;
}

#logo_hero input[type=color]{
	opacity:0;
	position:absolute;
}

#logo_hero label{
	position:absolute;
	top:10px;
	right:-280px;
	width:160px;
	height:40px;
	border-radius:30px;
	background:#4b906a;
	color:#000;
	text-align:center;
	border:#000 solid 2px;
}

#logo_hero label:before{
	content:'Cor do Super Símbolo';
	position:absolute;
	top:12px;
	left:12px;
	white-space:nowrap;
}

#logo_hero label:after{
	content:'';
	position:absolute;
	left:-24px;
	top:11px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 20px 10px 0;
	border-color: transparent #000 transparent transparent;
}























/*///// SÍMBOLO ///////////////////////////////////////////
//////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////
////////////////////////////////////////////////////////*/

#simbolo{
	position:absolute;
	display:none;
	width:600px;
	height:400px;
	left:50%;
	margin-left:-320px;
	background:#DEDEDE;
	padding:20px;
	z-index:800;
	overflow:auto;
	border-radius:6px;
	box-shadow:3px 3px 0 rgba(0,0,0,.3), 3px 3px 20px rgba(0,0,0,.2);
}

#simbolo #menu_s{
	position:relative;
	display:table;
	margin:10px auto;
	margin-bottom:20px;
	background:rgba(0,0,0,.2);
	border-radius:20px;
	padding:10px;
}

#menu_s span{
	margin:2px 10px;
	padding:5px 10px;
	border-radius:20px;
	cursor:pointer;
}

#menu_s span.selected{
	background:rgba(255,255,255,.5);
}

#simbolo #close{
	position:absolute;
	width:30px;
	height:30px;
	top:20px;
	right:20px;
	background:url(../images/icones/close.png) no-repeat;
	background-size:contain;
	cursor:pointer;
}

#simbolo ul{
	padding:0;
	margin:0;
	text-align:center;
}

#simbolo li{
	display:inline-block;
	margin:4px;
	list-style:none;
}

#simbolo img{
	width:100px;
	cursor:pointer;
	opacity:.8;
	transition:all .3s;
}

#simbolo img:hover{
	opacity:1;
}

#simbolo #letras{
	display:none;
}























































/*///// OPCIONAIS ///////////////////////////////////////////
//////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////
////////////////////////////////////////////////////////*/

#opcionais{
	position:absolute;
	left:-200px;
	z-index:40;
}

#opcionais #traje input[type=radio]{
	position:absolute;
	display:table;
	width:0;
	height:0;
}

#super_simbolo{
	position:relative;
	display:table;
	width:150px;
	height:150px;
	background:url(../images/icones/super_simbolo.png) no-repeat;
	background-size:contain;
	cursor:pointer;
	margin:10px;
}

#letras input[type=text]{
	width:40px;
	text-align:center;
	font-size:30px;
	font-family: 'Bangers', cursive;
	text-transform:uppercase;
	background:rgba(0,51,102,.7);
	border:none;
	border-radius:4px;
	padding:5px;
}

#letras h5{
	font-weight:lighter;
	color:rgba(0,0,0,.5);
	margin:0 auto;
	margin-bottom:20px;
	font-size:20px;
}
























/*///// COLOR PICKER ///////////////////////////////////////////
//////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////
////////////////////////////////////////////////////////*/

#colorpicker{
	position:absolute;
	display:none;
	width:136px;
	z-index:999;
	padding:10px;
	margin:0;
	list-style:none;
	text-align:center;
	background:rgba(240,240,240,.9);
	box-shadow:0 0 2px rgba(0,0,0,.3), 4px 4px 15px rgba(0,0,0,.1);
	border-radius:4px;
}

#colorpicker li{
	position:relative;
	display:inline-table;
	margin:3px;
	width:20px;
	height:20px;
	background:url(../images/colorpicker.png) no-repeat;
	border:rgba(0,0,0,.3) solid thin;
	border-radius:2px;
}

span.fechar_cp{
	position:absolute;
	width:20px;
	height:18px;
	padding-top:2px;
	top:-8px;
	right:-8px;
	background:#999;
	color:#FFF;
	text-align:center;
	border-radius:10px;
	cursor:pointer;
	box-shadow:1px 1px 0 rgba(0,0,0,.3);
	font-weight:lighter;
}



























/*///// HOME ///////////////////////////////////////////
//////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////
////////////////////////////////////////////////////////*/

#home{
	position:relative;
	display:table;
	width:100%;
	height:100%;
}

#slider, #slide{
	position:absolute;
	width:100%;
	height:100%;
	top:0;
}

#slide img{
	display:none;
}

#slide{
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
	background-attachment:fixed;
}