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


@font-face {
  font-family: "NoticiaText-Regular";
  src: url("http://s3.amazonaws.com/cdn.infografiaepoca.com.br/siteEpoca/fonts/NoticiaText-Regular.ttf");
}
  
@font-face {
  font-family: "FoundersGrotesk-Bold";
  src: url("https://s3.amazonaws.com/cdn.infografiaepoca.com.br/siteEpoca/founders/FoundersGrotesk-Bold.otf");
}
  
@font-face {
  font-family: "FoundersGrotesk-Regular";
  src: url("https://s3.amazonaws.com/cdn.infografiaepoca.com.br/siteEpoca/founders/FoundersGrotesk-Regular.otf");
}

@font-face {
  font-family: "FoundersGrotesk-Light";
  src: url("https://s3.amazonaws.com/cdn.infografiaepoca.com.br/siteEpoca/founders/FoundersGrotesk-Light.otf");
}

@font-face {
  font-family: "FoundersGroteskCond-Light";
  src: url("https://s3.amazonaws.com/cdn.infografiaepoca.com.br/siteEpoca/founders/FoundersGroteskCond-Lt.otf");
}

*{margin:0;padding:0}

#fundo{
	width:560px;
}

@media screen and (max-width: 360px) {
    #fundo {
      width: 300px;
    }
}

@media screen and (max-width: 320px) {
    #fundo {
      width: 300px;
    }
}

.fundooo{
	z-index:-1;
	position:absolute;
	top:-62px;
	left:0;
	display:block;
}
@media screen and (max-width: 360px) {
    .fundooo {
      display:none;
    }
}
@media screen and (max-width: 320px) {
   	.fundooo {
   		display:none;
    }
}

.fundooo2{
	display:none;
}
@media screen and (max-width: 360px) {
    .fundooo2 {
      display:block;
      width: 320px;
      height:2400px;
      z-index:-1;
      position:absolute;
      top:-138px;
      left:0;
    }
}
@media screen and (max-width: 320px) {
   	.fundooo2 {
   		display:block;
      width: 320px;
      height:2400px;
      z-index:-1;
			position:absolute;
			top:-138px;
			left:0;
    }
}

.alternativass{
	font-family: "FoundersGrotesk-Light";
	font-size:20px;
	line-height:1.0em;
	z-index:1000;
	color:#fff;
	position:absolute;
	top:112px;
	left:16px;
}
@media screen and (max-width: 360px) {
   	.alternativass {
   		font-size:18px;
      width: 320px;
      top:137px;
      left:5px;
    }
}
@media screen and (max-width: 320px) {
   	.alternativass {
   		font-size:17px;
      width: 300px;
      top:123px;
      left:3px;
    }
}

.alternativasss{
	font-family: "FoundersGroteskCond-Light";
	list-style-type:upper-alpha;
	font-size:20px;
	line-height:1.0em;
	z-index:1000;
	color:#fff;
	position:absolute;
	top:137px;
	left:35px;
	width:300px;
}
@media screen and (max-width: 360px) {
   	.alternativasss {
   		font-size:19px;
      width: 450px;
      top:160px;
      left:25px;
    }
}
@media screen and (max-width: 320px) {
   	.alternativasss {
   		font-size:19px;
      width: 450px;
      top:151px;
      left:25px;
    }
}

.float{
	float:left;
	font-family:"Arial Black", Helvetica, Arial, sans-serif;
	font-size:12px;
	color:#666;
}


#quiz{
	margin:236px auto;
	width:525px;
}
@media screen and (max-width: 360px) {
    #quiz {
      width:300px;
      height:auto;
    }
}
@media screen and (max-width: 320px) {
   	#quiz {
   		width:300px;
   		height:auto;
    }
}

.titulo{
	text-align:center;
	font-family: "FoundersGrotesk-Bold", Helvetica, Arial, sans-serif;
	font-size:30px;
	color:#fff;
	z-index:1000;
	width:560px;
	position:absolute;
	top:17px;
	left:0;
}
@media screen and (max-width: 480px) {
    .titulo {
      width: 460px;
    }
}
@media screen and (max-width: 360px) {
    .titulo {
      width: 326px;
      font-size:27px;
      line-height:0.9em;
      top:11px;
    }
}
@media screen and (max-width: 320px) {
    .titulo {
      width: 284px;
      font-size:24px;
      line-height:0.9em;
      top:11px;
    }
}

.linha-fina{
	text-align:center;
	font-family: "FoundersGrotesk-Light", Helvetica, Arial, sans-serif;
	font-size:24px;
	color:#fff;
	z-index:1000;
	width:449px;
	position:absolute;
	top:54px;
	left:53px;
	line-height:0.9em;
}
@media screen and (max-width: 480px) {
    .linha-fina {
      width: 460px;
    }
}
@media screen and (max-width: 360px) {
    .linha-fina {
      font-size:22px;
      width: 308px;
      line-height:0.9em;
      top:68px;
			left:15px;
    }
}
@media screen and (max-width: 320px) {
    .linha-fina {
    	font-size:20px;
      width: 271px;
      line-height:0.9em;
      top:54px;
			left:6px;
    }
}


.resultado{
	width:154px;
	height:157px;
	margin:273px 15px 0 15px;
}
.mostra_resultado{
	background:url(../images/img_final.png)  no-repeat;
	width:400px;
	height:90px;
	margin:-131px auto 0 135px;
	padding:0;
}
@media screen and (max-width: 320px) {
   	.mostra_resultado {
   		background:url(../images/img_final2.png)  no-repeat;
   		width:300px;
   		height:66px;
   		margin:-58px auto 0 -88px;
   		z-index:-1;
    }
}

#escrita_final{
	clear:both;
}
#escrita_final{
	margin:-12px 0 12px 5px;
	font-family: Helvetica, Arial, sans-serif;
	font-size:14px;
	float:left;
	width:542px;
}
@media screen and (max-width: 320px) {
   	#escrita_final {
   		width:279px;
   		margin:-11px 0 12px 5px;
    }
}

#valor_fnal{
	font-family: Helvetica, Arial, sans-serif;
	font-size:25px;
	top:10px;
	width:46px;
	height:37px;
	text-align:center;
	padding:10px 0 0 0;
	border:5px solid #999;
	color:#63c19d;
	margin:-87px 29px;
	float:left;
  z-index:10000;
}
@media screen and (max-width: 320px) {
   	#valor_fnal {
   		margin:92px 79px;
    }
}

#perguntas{
	width:500px;
}

.canvas_pergunta{
	color:#57afe0;
	font-family: Helvetica, Arial, sans-serif;
	font-size:14px;
}

.escolha{
	text-align:center;
	color:#333;
	width:60px;
	cursor:pointer;
	border-bottom:1px #333 dotted;
}
@media screen and (max-width: 320px) {
   	.escolha {
   		position:relative;
   		top:0;
   		left:5px;
   		border-bottom:none;
    }
}


.pergunta{
	background:url(../images/seta.png) no-repeat right;
	/*border-bottom:1px #333 dotted;*/
}

.escolhido{
	text-align:center;
	color:#333;
	width:60px;
	cursor:pointer;
	border-bottom:1px #333 dotted;
}
@media screen and (max-width: 320px) {
   	.escolhido {
   		border-bottom:none;
    }
}


#soma{
	display:none;
}
#lista{
	display:none;
}

#fundo_final{
	display:none;
	width:560px;
	position:absolute;
	top:1345px;
}
@media screen and (max-width: 320px) {
   	#fundo_final {
   		position:relative;
   		top:1589px;
      left:10px;
    }
}


.imagem{
	background:url(../images/final.png) no-repeat;
	width:560px;
	height:57px;
}


.result_class{
	background:#000;
}

#retorno{
	color:#FFF;
	text-align:center;
	font-family: Arial, Helvetica, sans-serif;
	font-size:14px;
	z-index:20;
	cursor:pointer;
	width:140px;
	height:22px;
	padding:8px 0 0 0;	
	position:absolute;
	top:1530px;
	left:182px;
}

#texto_resultado{
	margin:10px 0 0 0;
	width:560px;
	text-align:center;
	font-family: Helvetica, Arial, sans-serif;
	font-size:18px;
}

.ao_lado_numero{
	font-family: "Arial Black", Helvetica, Arial, sans-serif;
	font-size:18px;
	width:24px;
	height:24px;
	color:#666;
	position:relative;
	top:1px;
	left:0;
	z-index:1001;
}
@media screen and (max-width: 320px) {
    .ao_lado_numero {
    	left:7px;
    }
}

.ao_lado_texto{
	font-family: "FoundersGrotesk-Regular";
	font-size:19px;
	width:316px;
	padding:10px 5px 10px 32px;
	color:#333;
	line-height:0.9em;
	position:relative;
	top:-24px;
	left:-6px;
	border-radius: 10px;
	background-color:#82d49f;
	margin-bottom:-14px;
	z-index:1000;
}
@media screen and (max-width: 320px) {
    .ao_lado_texto {
    	font-size:16.5px;
			width:108px;
			top:-24px;
			left:2px;
			margin-bottom:-13px;
    }
}

#tabelaaa{
	position:absolute;
	top:232px;
	left:17px;
}
@media screen and (max-width: 320px) {
    #tabelaaa {
    	width:150px;
    	height:1300px;
    	top:228px;
			left:4px;
    }
}


#fonte{
	text-align:left;
	font-family: "FoundersGrotesk-Regular", Helvetica, Arial, sans-serif;
	font-size:17px;
	color:#666;
	z-index:1000;
	width:540px;
	position:absolute;
	top:1132px;
	left:10px;
}
@media screen and (max-width: 320px) {
    #fonte {
    	width:280px;
    	/*top:1535px;*/
      top:1715px;
    }
}

.refazer{
	display:block;
	position:absolute;
	top:-1349px;
	left:-180px;
	width:540px;
	height:45px;
}
@media screen and (max-width: 320px) {
    .refazer {
    	display:none;
    }
}

.refazer2{
	display:none;
}
@media screen and (max-width: 320px) {
    .refazer2 {
    	display:block;
    	width:300px;
    	height:45px;
    	position:absolute;
    	top:-1123px;
    	left:-191px;
    }
}


.pontuacao_final{
	float:left;
	width:10px;
	height:10px;
	margin:5px 23px 0 6px;
}
@media screen and (max-width: 320px) {
    .pontuacao_final {
    	margin:5px 13px 0 6px;
    }
}

.verde1{
	color:#baef1a;
	font-weight:bold;
}
.verde2{
	color:#9abc33;
	font-weight:bold;
}
.verde3{
	color:#6f8824;
	font-weight:bold;
}

.mostra_resultado_um{
  width:500px;
  height:250px;
  margin:40px 40px 0 40px;
  display:none;
}

.voceee{
  font-family: Helvetica, Arial, sans-serif;
  font-size:25px;
  position:absolute;
  top:-79px;
  left:49px;
  width:98px;
  height:37px;
  color:#63c19d;
  z-index:10000;
}
@media screen and (max-width: 320px) {
    .voceee {
      font-size:22px;
      top:111px;
      left:5px;
    }
}
.pontosss{
  font-family: Helvetica, Arial, sans-serif;
  font-size:25px;
  position:absolute;
  top:10px;
  left:58px;
  width:46px;
  height:37px;
  color:#63c19d;
  z-index:10000;
}
@media screen and (max-width: 320px) {
    .pontosss {
      font-size:22px;
      top:111px;
      left:193px;
    }
}

.vocee{
  font-family: Helvetica, Arial, sans-serif;
  font-size:25px;
  position:absolute;
  top:-79px;
  left:48px;
  width:98px;
  height:37px;
  color:#63c19d;
  z-index:10000;
}
@media screen and (max-width: 320px) {
    .vocee {
      top:105px;
      left:11px;
    }
}

.ponto{
  font-family: Helvetica, Arial, sans-serif;
  font-size:25px;
  position:absolute;
  top:10px;
  left:65px;
  width:46px;
  height:37px;
  color:#63c19d;
  z-index:10000;
}
@media screen and (max-width: 320px) {
    .ponto {
      font-size:22px;
      top:105px;
      left:186px;
    }
}

.resultadooo{
  text-align:left;
  font-family: "FoundersGrotesk-Regular", Helvetica, Arial, sans-serif;
  font-size:18px;
  color:#cc0000;
  width:300px;
  height:50px;
  position:absolute;
  top:-70px;
  left:207px;
}
@media screen and (max-width: 320px) {
    .resultadooo {
      top:161px;
      left:1px;
    }
}

.mostra_resultado_dois{
  /*background:url(../images/finalizacao_2.jpg) no-repeat;*/
  width:151px;
  height:130px;
  margin:40px 40px 0 40px;
  display:none;
}
.mostra_resultado_tres{
  /*background:url(../images/finalizacao_3.jpg) no-repeat;*/
  width:151px;
  height:130px;
  margin:40px 40px 0 40px;
  display:none;
}

#showResultadoResposta{
  position: absolute;
  top: 1213px;
  left:235px;
  width: 276px;
  text-align: left;
  font-family: "Helvetica", Arial, sans-serif;
  font-size: 14px;
}


/*

@media screen and (max-width: 320px) {
    .ummm {
			position:relative;
			top:-10px;
			width:300px;
    }
}

@media screen and (max-width: 320px) {
    .doisss {
			position:relative;
			top:94px;
			width:300px;
    }
}

@media screen and (max-width: 320px) {
    .tresss {
			position:relative;
			top:157px;
			width:300px;
    }
}

@media screen and (max-width: 320px) {
    .quatrooo {
			position:relative;
			top:220px;
			width:300px;
    }
}

@media screen and (max-width: 320px) {
    .cincooo {
			position:relative;
			top:281px;
			width:300px;
    }
}

@media screen and (max-width: 320px) {
    .seisss {
			position:relative;
			top:344px;
			width:300px;
    }
}

@media screen and (max-width: 320px) {
    .seteee {
			position:relative;
			top:405px;
			width:300px;
    }
}

@media screen and (max-width: 320px) {
    .oitooo {
			position:relative;
			top:467px;
			width:300px;
    }
}

@media screen and (max-width: 320px) {
    .noveee {
			position:relative;
			top:529px;
			width:300px;
    }
}

@media screen and (max-width: 320px) {
    .dezzz {
			position:relative;
			top:592px;
			width:300px;
    }
}
*/

@media screen and (max-width: 320px) {
    .circulo-ok {
			position:relative;
			top:0;
			left:-9px;
    }
}


#zero{
	position:absolute;
	left:132px;
  z-index:100;
}
@media screen and (max-width: 320px) {
    #zero {
			top:-64px;
			left:34px;
      z-index:100;
    }
}

#one{
	position:absolute;
	left:170px;
  z-index:100;
}
@media screen and (max-width: 320px) {
    #one {
			top:-64px;
			left:63px;
      z-index:100;
    }
}

#two{
	position:absolute;
	left:208px;
  z-index:100;
}
@media screen and (max-width: 320px) {
    #two {
			top:-64px;
			left:89px;
      z-index:100;
    }
}

#three{
	position:absolute;
	left:246px;
  z-index:100;
}
@media screen and (max-width: 320px) {
    #three {
			top:-64px;
			left:117px;
      z-index:100;
    }
}

#four{
	position:absolute;
	left:283px;
  z-index:100;
}
@media screen and (max-width: 320px) {
    #four {
			top:-64px;
			left:144px;
      z-index:100;
    }
}

#five{
	position:absolute;
	left:321px;
  z-index:100;
}
@media screen and (max-width: 320px) {
    #five {
			top:-64px;
			left:172px;
      z-index:100;
    }
}


#six{
	position:absolute;
	left:359px;
  z-index:100;
}
@media screen and (max-width: 320px) {
    #six {
			top:-64px;
			left:200px;
      z-index:100;
    }
}


#seven{
	position:absolute;
	left:397px;
  z-index:100;
}
@media screen and (max-width: 320px) {
    #seven {
			top:-64px;
			left:228px;
      z-index:100;
    }
}


#eight{
	position:absolute;
	left:434px;
  z-index:100;
}
@media screen and (max-width: 320px) {
    #eight {
			top:-64px;
			left:255px;
      z-index:100;
    }
}


#nine{
	position:absolute;
	left:472px;
  z-index:100;
}
@media screen and (max-width: 320px) {
    #nine {
			top:-64px;
			left:283px;
      z-index:100;
    }
}


#ten{
	position:absolute;
	left:510px;
  z-index:100;
}
@media screen and (max-width: 320px) {
    #ten {
			top:-64px;
			left:301px;
      z-index:100;
    }
}