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

@font-face {
  font-family: "OpenSans-ExtraBold";
  src: url("https://s3.amazonaws.com/cdn.infografiaepoca.com.br/siteEpoca/fonts/OpenSans-ExtraBold.ttf");
  }
@font-face {
  font-family: "OpenSans-Bold";
  src: url("https://s3.amazonaws.com/cdn.infografiaepoca.com.br/siteEpoca/fonts/OpenSans-Bold.ttf");
  }
@font-face {
  font-family: "OpenSans-Semibold";
  src: url("https://s3.amazonaws.com/cdn.infografiaepoca.com.br/siteEpoca/fonts/OpenSans-Semibold.ttf");
  }
@font-face {
  font-family: "OpenSans-Regular";
  src: url("https://s3.amazonaws.com/cdn.infografiaepoca.com.br/siteEpoca/fonts/OpenSans-Regular.ttf");
  }
@font-face {
  font-family: "OpenSans-Light";
  src: url("https://s3.amazonaws.com/cdn.infografiaepoca.com.br/siteEpoca/fonts/OpenSans-Light.ttf");
  } 

@font-face{
  font-family: "Oswald-Regular";
  src: url("https://s3.amazonaws.com/cdn.infografiaepoca.com.br/siteEpoca/fonts/Oswald-Regular.ttf");
}

@font-face{
  font-family: "Knockout";
  src: url("https://s3.amazonaws.com/cdn.infografiaepoca.com.br/siteEpoca/fonts/KNOCKOUT-HTF66-FULLFLYWEIGHT.OTF");
}


#wrapperQuizCartazes {
	width: 560px;
	height: 560px;
	background-color: black;
	overflow: hidden;
	position: relative;
  margin: -8px;
}
@media screen and (max-width: 480px) {
    #wrapperQuizCartazes {
      width: 480px;
      height:480px;
    }
}
@media screen and (max-width: 375px) {
    #wrapperQuizCartazes {
      width: 360px;
      height:500px;
    }
}
@media screen and (max-width: 360px) {
    #wrapperQuizCartazes {
      width: 360px;
      height:500px;
    }
}
@media screen and (max-width: 320px) {
    #wrapperQuizCartazes {
      width: 320px;
      height:500px;
    }
}

.titulooo{
  width: 560px;
  text-align: center;
  color: #e21b22;
  font-size: 113px;
  position: absolute;
  top: -30px;
  text-transform: uppercase;
  font-family: "Knockout";
  z-index: 10000;
  line-height: 95px;
}
@media screen and (max-width: 480px) {
    .titulooo {
      width:480px;
      top:106px;
			left:125px;
    }
}
@media screen and (max-width: 360px) {
    .titulooo {
      width:360px;
      top:35px;
			left:69px;
    }
}
@media screen and (max-width: 320px) {
    .titulooo {
      width:320px;
      top:35px;
			left:62px;
			font-size:26px;
    }
}

.subtitulooo{
  width:490px;
	text-align:center;
  color:#fff;
  font-size:20px;
  position:absolute;
  top:285px;
  left:34px;
  font-family:"Oswald";
}
@media screen and (max-width: 480px) {
    .subtitulooo {
      top:164px;
			left:26px;
    }
}
@media screen and (max-width: 360px) {
    .subtitulooo {
      top:90px;
			left:20px;
			width:301px;
    }
}
@media screen and (max-width: 320px) {
    .subtitulooo {
      top:83px;
			left:12px;
			font-size:21px;
			width:270px;
    }
}

.abreee{
  width:560px;
  height:560px;
  position:absolute;
  top:0;
  left:0;
}
@media screen and (max-width: 480px) {
    .abreee {
      width: 480px;
      height:480px;
      left:-3px;
    }
}
@media screen and (max-width: 375px) {
    .abreee {
      width: 375px;
      height:375px;
      left: -6px;
    }
}
@media screen and (max-width: 360px) {
    .abreee {
      width: 360px;
      height:360px;
    }
}
@media screen and (max-width: 320px) {
    .abreee {
      width: 320px;
      height:320px;
    }
}

.resultadooo{
  width:560px;
  height:560px;
  position:absolute;
}
@media screen and (max-width: 480px) {
    .resultadooo {
      width: 480px;
      height:480px;
      top:-155px;
      left:118px;
    }
}
@media screen and (max-width: 375px) {
    .resultadooo {
      width: 375px;
      height:375px;
      top:-153px;
      left:112px;
    }
}
@media screen and (max-width: 360px) {
    .resultadooo {
      width: 360px;
      height:360px;
      top:-153px;
      left:123px;
    }
}
@media screen and (max-width: 320px) {
    .resultadooo {
      width: 320px;
      height:320px;
      top:-137px;
      left:121px;
    }
}

/* logo */

img[src="images/Logo_quiz.png"]{
	margin-left: -10px;
	z-index: 100;
}

/* /////////////////////////////// */	
/* stage 0 - inicio */
#stage0 {
	width: 560px;
	height: 560px;
	/*
  background-image:url("../images/imgAbre_cartaz.jpg");
	background-color: white;
  */
}
@media screen and (max-width: 480px) {
    #stage0 {
      width: 480px;
      height:auto;
    }
}
@media screen and (max-width: 360px) {
    #stage0 {
      width: 360px;
      height:auto;
    }
}
@media screen and (max-width: 320px) {
    #stage0 {
      width: 320px;
      height:auto;
    }
}
/*
#stage0 input#comecar{
	padding: 420px 191px 231px;
}
@media screen and (max-width: 480px) {
    #stage0 input#comecar {
      padding: 350px 216px 34px 196px;
    }
}
@media screen and (max-width: 360px) {
    #stage0 input#comecar {
      padding: 354px 125px 15px 125px;
    }
}
@media screen and (max-width: 320px) {
    #stage0 input#comecar {
      padding: 353px 100px 15px 100px;
    }
}
*/
#stage0 input#comecar{
  position:absolute;
  top:443px;
  left:189px;
  z-index:10000;
}
@media screen and (max-width: 480px) {
    #stage0 input#comecar {
      width:32%;
      height:auto;
      top:380px;
      left:160px;
    }
}
@media screen and (max-width: 375px) {
    #stage0 input#comecar {
      width:32%;
      height:auto;
      top:296px;
      left:123px;
    }
}
@media screen and (max-width: 360px) {
    #stage0 input#comecar {
      width:32%;
      height:auto;
      top:285px;
      left:119px;
    }
}
@media screen and (max-width: 320px) {
    #stage0 input#comecar {
      width:32%;
      height:auto;
      top:253px;
      left:105px;
    }
}

/* /////////////////////////////// */	
/* stage 1 - perguntas */

#stage1 img{
	float: left;
  width: 309px;
  height:auto;
  position: relative;
  top: 289px;
  left: 18px;
}
@media screen and (max-width: 480px) {
    #stage1 img {
      width: 258px;
      height: auto;
      top: 294px;
      left: 18px;
    }
}
@media screen and (max-width: 375px) {
    #stage1 img {
      width: 290px;
      height:auto;
      top: 289px;
      left: 18px;
    }
}
@media screen and (max-width: 360px) {
    #stage1 img {
      width: 241px;
      height: auto;
      top: 318px;
      left: 21px;
    }
}
@media screen and (max-width: 320px) {
    #stage1 img {
      width: 219px;
      height: auto;
      top: 333px;
      left: 21px;
    }
}


#stage1Texto {
	/*
	background-image:url("../images/imgGeral_cartaz.jpg");
	background-repeat:no-repeat;
	*/
	background-color:#000;
	width: 48%;
	height: 100%;
	float: left;
	padding-left: 12px;
}
.txtWhite{
	font-size: 12px;
	font-family: "Helvetica", Arial !important;
}

#respostaComentario {
	font-family: "Helvetica", Arial !important;
	font-size: 10px !important;
	margin-top: 0;
	margin-right: 14px;
	display:none;
}

#stage1 table{
	color: white;
	font-size: 20px;
	border-collapse:collapse;
	width: 450px;
}

#stage1 table, #stage1 th, #stage1 td {
  width:252px;
  height:42px;
  text-align:center;
  text-transform:uppercase;
  padding:11px 0 0 0;
  /*
  color:#000;
  background-color:#ccc;
  border-bottom: 1px dotted #333;
	border-top: 1px dotted #333;
	padding: 4px;
  */
}

@media screen and (max-width: 480px) {
    #stage1 table, #stage1 th, #stage1 td {
      width:430px;
    }
}
@media screen and (max-width: 375px) {
    #stage1 table, #stage1 th, #stage1 td {
      width:320px;
    }
}
@media screen and (max-width: 360px) {
    #stage1 table, #stage1 th, #stage1 td {
      width:310px;
    }
}
@media screen and (max-width: 320px) {
    #stage1 table, #stage1 th, #stage1 td {
      width:275px;
    }
}


#stage1 tr{
	cursor: pointer;
}

#rbRespostas{
	position: absolute;
	top: 420px;
}
@media screen and (max-width: 320px) {
    #rbRespostas {
      top: 280px;
    }
}

.labelResposta{
  font-family:"OpenSans-Extrabold";
  background-color:#ccc;
  color:#000;
}

#labelResposta0{
  position:absolute;
  top:-201px;
  left:6px;
}
@media screen and (max-width: 480px) {
   #labelResposta0 {
      top:-279px;
      left:7px;
    }
}
@media screen and (max-width: 360px) {
    #labelResposta0 {
      top:-276px;
      left:7px;
    }
}
@media screen and (max-width: 320px) {
    #labelResposta0 {
      top:-145px;
      left:7px;
    }
}

#labelResposta1{
  position:absolute;
  top:-201px;
  left:269px;
}
@media screen and (max-width: 480px) {
   #labelResposta1 {
      top:-214px;
      left:7px;
    }
}
@media screen and (max-width: 360px) {
    #labelResposta1 {
      top:-209px;
      left:7px;
    }
}
@media screen and (max-width: 320px) {
    #labelResposta1 {
      top:-80px;
      left:7px;
    }
}

#continuar{
	position: absolute;
	top: 495px;
	left: 494px;
}
@media screen and (max-width: 480px) {
    #continuar {
      top: 421px;
			left: 403px;
    }
}
@media screen and (max-width: 375px) {
    #continuar {
      top: 437px;
      left: 294px;
    }
}
@media screen and (max-width: 360px) {
    #continuar {
      top: 442px;
			left: 293px;
    }
}
@media screen and (max-width: 320px) {
    #continuar {
      top: 442px;
			left: 250px;
    }
}

#showResultadoResposta{
	position: absolute;
	top: 262px;
  left: 382px;
  width: 150px;
  text-align:right;
	font-family: "OpenSans-Regular", Arial, sans-serif;
	font-size: 18px;
  color:#fff;
}
@media screen and (max-width: 480px) {
    #showResultadoResposta {
    	width:150px;
      top: 262px;
      left: 299px;
      font-size: 17px;
    }
}
@media screen and (max-width: 375px) {
    #showResultadoResposta {
      width:339px;
      top: 240px;
      left: 18px;
      font-size: 14px;
      text-align: left
    }
}
@media screen and (max-width: 360px) {
    #showResultadoResposta {
      width: 320px;
      top: 251px;
      left: 19px;
      font-size: 14px;
      text-align: left;
    }
}
@media screen and (max-width: 320px) {
    #showResultadoResposta {
    	width:274px;
      top: 245px;
			left: 20px;
			font-size:14.5px;
      text-align:left;
    }
}

#numeroPergunta {
  font-family:"OpenSans-Regular";
	font-size:20px;
	position:absolute;
	top:-13px;
	left:18px;
}
@media screen and (max-width: 480px) {
    #numeroPergunta {
  		top: -7px;
  		left: 18px;
    }
}
@media screen and (max-width: 360px) {
    #numeroPergunta {
  		top: -7px;
  		left: 18px;
    }
}
@media screen and (max-width: 320px) {
    #numeroPergunta {
  		top: -9px;
  		left: 18px;
    }
}

#numeroPergunta2 {
  font-family:"OpenSans-Regular";
  font-size:20px;
  position:absolute;
  top:-13px;
  left:41px;
}
@media screen and (max-width: 480px) {
    #numeroPergunta2 {
      top: -7px;
      left: 44px;
    }
}
@media screen and (max-width: 375px) {
    #numeroPergunta2 {
      top: -7px;
      left: 44px;
    }
}
@media screen and (max-width: 360px) {
    #numeroPergunta2 {
      top: -7px;
      left: 44px;
    }
}
@media screen and (max-width: 320px) {
    #numeroPergunta2 {
      top: -9px;
      left: 44px;
    }
}

.respostaCerta {
	color: #fff;
  background-color:green;
}
.respostaErrada {
	color: #fff;
  background-color:red;
  opacity:0.30;
  -moz-opacity: 0.30;
  filter: alpha(opacity=30);
}

label.labelResposta {
	clear:both;
	float: none;
	font-size: 16px;
	cursor: pointer;
}
input.rbResposta {
	clear:both;
	float: none;
	cursor: pointer;
  background-color:grey;
}

img[src="images/Logo_quiz.png"] {
	position: absolute;
	top: 10px;
	left: 274px;
}

.imgResultado{
  margin:0;
  display:block;
}


/* /////////////////////////////// */	
/* stage 2 - final */
#stage2 {
	width: 560px;
	height: 440px;
	/* background-image:url("../images/imgFecha_cartaz2.jpg");*/
	background-color: black;
}
#stage2 h4#resultadoScore {
	position: absolute;
	top: 176px;
	left: 54px;
	font-size: 28px;
	text-align: center;
	color: white;
}
#stage2 input#recomecar {
	position:absolute;
	top:456px;
	left:175px;
}
@media screen and (max-width: 480px) {
    #stage2 input#recomecar {
      width:32%;
      height:auto;
      top:391px;
			left:159px;
    }
}
@media screen and (max-width: 375px) {
    #stage2 input#recomecar {
      width:32%;
      height:auto;
      top:307px;
      left:122px;
    }
}
@media screen and (max-width: 360px) {
    #stage2 input#recomecar {
      width:32%;
      height:auto;
      top:296px;
			left:122px;
    }
}
@media screen and (max-width: 320px) {
    #stage2 input#recomecar {
      width:32%;
      height:auto;
      top:279px;
			left:101px;
    }
}

/* botoes stage 2 */
#btnsstage2 {
	padding-top: 387px;
	margin-left: 25%;
}

#final_score{
	width:300px;
  font-family:"Oswald-Regular";
  font-size:1.9em;
	text-align:center;
	position:absolute;
	top:17px;
	left:70px;
  z-index:10000;
}
@media screen and (max-width: 480px) {
    #final_score {
      top:-21px;
			left:32px;
    }
}
@media screen and (max-width: 375px) {
    #final_score {
      top: -68px;
      left: -18px;
    }
}
@media screen and (max-width: 360px) {
    #final_score {
      top: -70px;
      left: -28px;
      font-size: 44px;
    }
}
@media screen and (max-width: 320px) {
    #final_score {
      top:-67px;
			left:-54px;
      font-size:37px;
    }
}

#final_score_text{
	width:300px;
  font-family:"Oswald-Regular";
  font-size:1.9em;
	text-align:center;
	position:absolute;
	top:-210px;
	left:-204px;
}
@media screen and (max-width: 480px) {
    #final_score_text {
      width:400px;
			top:-57px;
			left:-172px;
			font-size:25px;
    }
}
@media screen and (max-width: 360px) {
    #final_score_text {
      width:285px;
			top:-57px;
			left:-177px;
			font-size:25px;
    }
}
@media screen and (max-width: 320px) {
    #final_score_text {
      width:230px;
			top:-57px;
			left:-180px;
			font-size:23px;
    }
}


/* gerais */

div.stage h4#dataPergunta{
  height: 40px;
  width: 515px;
  position: absolute;
  top: -152px;
  left: 18px;
  font-size: 15px;
  color:#fff;
  line-height:1.0em;
  text-transform:uppercase;
}

div.stage h4#frasePergunta{
  font-family:"Oswald-Regular";
  font-weight: 400;
  width: 515px;
  height: 40px;
  position: absolute;
  top: -153px;
  left: 18px;
  font-size: 38px;
  color:#fff;
  line-height:1.1em;
  letter-spacing:0;
}
@media screen and (max-width: 480px) {
    div.stage h4#frasePergunta {
      height: 40px;
  		width: 450px;
  		top: -130px;
  		left: 18px;
      font-size:23px;
    }
}
@media screen and (max-width: 375px) {
    div.stage h4#frasePergunta {
      height: 40px;
      width: 338px;
      top: -128px;
      left: 18px;
      font-size:20px;
    }
}
@media screen and (max-width: 360px) {
    div.stage h4#frasePergunta {
      height: 40px;
  		width: 338px;
  		top: -128px;
  		left: 18px;
      font-size:20px;
    }
}
@media screen and (max-width: 320px) {
    div.stage h4#frasePergunta {
      height: 40px;
  		width: 280px;
  		top: -129px;
  		left: 18px;
  		font-size:19px;
    }
}

div.stage div.stageTexto h4{
	padding: 148px 10px 0 0;
}

div.stage div.stagetexto p {
	padding: 5px 10px 0 0; 
}

.txtWhite{
	color: #fff;
}

.simClickEvents {
	cursor: pointer;
}
.noClickEvents {
	pointer-events: none;
	cursor: auto;
}


@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-Semibold";
  src: url("https://s3.amazonaws.com/cdn.infografiaepoca.com.br/siteEpoca/founders/FoundersGrotesk-Semibold.otf");
}
  
@font-face {
  font-family: "FoundersGrotesk-Regular";
  src: url("https://s3.amazonaws.com/cdn.infografiaepoca.com.br/siteEpoca/founders/FoundersGrotesk-Regular.otf");
}