@charset "utf-8";

/* CSS Document */

* {margin:0; padding:0;font-family: 'Fira Sans', sans-serif;}
html {height:100%;}
body {margin:0;width:100%;height:100%;padding:0;text-align:center;color:#333;font-size:62.5%;font-family:Fira Sans;}
div.clear {clear:both;}
img{width:100%;height:auto;}

.imgBase{position:absolute;left:0;top:0;bottom:0;right:0;margin:auto;z-index:-1;}
.imgFinal{position:absolute;left:0;top:0;bottom:0;right:0;margin:auto;z-index:-1;}

#wrap {position:relative;width:100%;height:100%;}

.modal{position:fixed;top:0;left:0;width:100%;height:100%;display:none;background-color:rgba(0,0,0,.8);z-index:5000;}
.dica{position:absolute;width:70%;top:0;bottom:0;left:0;right:0;margin:auto;}

.placar{position:absolute;width:5%;top:4%;left:3%;margin:auto;z-index:3000;}
.txtErros{position:absolute;width:7%;top:4%;left:7%;margin:auto;z-index:3000;}
.titTela{position:absolute;width:17%;top:4%;right:18%;margin:auto;z-index:3000;}
.seta{cursor:pointer;display:none;}
.volta{position:absolute;width:5%;top:4%;right:10%;margin:auto;z-index:3000;}
.avanca{position:absolute;width:5%;top:4%;right:3%;margin:auto;z-index:3000;}
.stop{position:absolute;width:5%;bottom:3%;left:3%;margin:auto;z-index:3000;}

#intro{position:relative;height:100%;margin:0 auto;top:50%;transform:translateY(-50%);}
#capa{position:relative;width:100%;height:auto;margin:0 auto;top:50%;transform:translateY(-50%);}
.btnInicio{position:absolute;top:auto;bottom:5%;}
.inicio{position:absolute;width:25%;right:auto;left:15%;bottom:29%;margin:auto;cursor:pointer;}
.btnDuvia{position:absolute;top:auto;bottom:5%;}
.duvida{position:absolute;width:25%;right:auto;left:15%;bottom:8%;margin:auto;cursor:pointer;}

.pagina{position:relative;height:100%;margin:0 auto;top:50%;transform:translateY(-50%);display:none;
}

.feedback{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.8);z-index:5000;
display:none;
}
.negativo{position:absolute;width:60%;top:0;bottom:0;left:0;right:0;margin:auto;}
.positivo{position:absolute;width:60%;top:0;bottom:0;left:0;right:0;margin:auto;}
.txtNegativo{position:absolute;height:max-content;top:0;bottom:0;left:0;right:0;margin:auto;color:#fff;font-size:3em;}
.feedbackBtn{position:absolute;bottom:14%;z-index:10;cursor:pointer;}
.novamenteFeed{width:23%;left:24%;}
.sairFeed{width:20%;right:24%;}
.cena{position:absolute;width:95%;height:max-content;top:0;bottom:0;right:0;left:0;margin:auto;display:none;}
.cena1{display:block;}
.contemArea{position:absolute;width:100%;height:100%;top:0;bottom:0;right:0;left:0;margin:auto;
/* background-color:rgba(255,0,0,.5); */
}
.area{position:absolute;width:9%;height:19%;border-radius:50%;
/* background-color:rgba(0,0,255,.5); */
}
#area11{top:0;right:7%;}
#area12{top:32%;right:23%;}
#area13{top:49%;right:44%;}
#area14{top:40%;right:6%;}
#area15{top:60%;right:32%;}
#area16{top:55%;right:19%;}
#area17{top:77%;right:1%;}
#area21{top:19%;right:12%;}
#area22{top:34%;right:21%;}
#area23{top:40%;right:39%;}
#area24{top:51%;right:11%;}
#area25{top:15%;right:27%;}
#area26{top:64%;right:20%;}
#area27{top:69%;right:8%;}
#area31{top:4%;right:10%;}
#area32{top:36%;right:20%;}
#area33{top:33%;right:41%;}
#area34{top:84%;right:32%;}
#area35{top:46%;right:28%;}
#area36{top:80%;right:21%;}
#area37{top:82%;right:9%;}
#area41{top:0%;right:19%;}
#area42{top:24%;right:5%;}
#area43{top:44%;right:38%;}
#area44{top:46%;right:0%;}
#area45{top:11%;right:26%;}
#area46{top:71%;right:30%;}
#area47{top:56%;right:7%;}
#area51{top:4%;right:3%;}
#area52{top:23%;right:23%;}
#area53{top:46%;right:42%;}
#area54{top:30%;right:14%;}
#area55{top:-4%;right:32%;}
#area56{top:80%;right:20%;}
#area57{top:37%;right:-2%;}
.area img{position:absolute;width:40%;top:0;bottom:0;right:0;left:0;margin:auto;}

.container {
    position: absolute;
    width: 100%;
    top: auto;
	bottom:5%;
	right: auto;
	left: auto;
	margin:auto;
  /*margin: 80px auto;*/
    text-align: center;
}
.container .progress {
  margin: 0 auto;
  width: 34%;
  border:4px solid #fff;
  border-radius:1em;
 /* float:left;*/
}

.progress { 
  padding: 4px;
  background:#282844;
  border-radius: 6px;
  /*
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
  */
    box-shadow:
    inset 0 0 0 6px #215bad;
  overflow:hidden;/*para quando ganhar 15 segundos, mesmo que ultrapasse nao sera visto*/
}

.progress-bar {	 
  position: relative;
  height: 16px;
  border-radius: 4px;
  -webkit-transition: 0.4s linear;
  -moz-transition: 0.4s linear;
  -o-transition: 0.4s linear;
  transition: 0.4s linear;
  -webkit-transition-property: width, background-color;
  -moz-transition-property: width, background-color;
  -o-transition-property: width, background-color;
  transition-property: width, background-color;
  -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);  
  }
.progress-bar:before, .progress-bar:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.progress-bar:before {
  bottom: 0;
  border-radius: 4px 4px 0 0;
}
.progress-bar:after {
  z-index: 2;
  bottom: 45%;
  border-radius: 4px;
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
}

.progress > .progress-bar {
  width: 100%;
  background-color: #e12f54;
}

.final{position:absolute;bottom:14%;z-index:10;cursor:pointer;}
.novamente{width:23%;left:24%;}
.sair{width:20%;right:24%;}




@media screen and (max-width: 1024px) and (orientation: portrait) {
	.sair{width:49%;bottom:14%;right:0;left:0;margin:auto;}
	.novamente{width:49%;bottom:32%;right:0;left:0;margin:auto;}
	.dica{width:92%;}
	.home{width:8%;top:0%;right:18%;}
	.audio{width:8%;top:0%;left:5%;}
	.inicio{width:46%;right:0;left:0;bottom:19%;}
	.duvida{width:46%;right:0;left:0;bottom:8%;}
	.placar{width:8%;top:2%;}
	.txtErros{width:13%;top:1%;left:10%;}	
	.titTela{width:32%;top:2%;right:0;left:0;}
	.volta{width:10%;top:1%;right:16%;}
	.avanca{width:10%;top:1%;}
	.stop{width:8%;bottom:3%;}
	.cena{width:75%;}
	.container {bottom:4%;}
	.container .progress {width: 74%;}
	.resposta{width:48%;padding-top:3%;}
	.segunda{margin-right:0%;}
	.area{width:19%;height:12%;}
	#area11{top:48%;right:12%;}
	#area12{top:60%;right:40%;}
	#area13{top:80%;left:18%;}
	#area14{top:77%;right:39%;}
	#area15{top:74%;left:-6%;}
	#area16{top:70%;right:11%;}
	#area17{top:89%;right:0%;}
	#area21{top:81%;left:41%;}
	#area22{top:56%;right:54%;}
	#area23{top:65%;right:41%;}
	#area24{top:58%;right:24%;}
	#area25{top:69%;left:3%;}
	#area26{top:85%;right:15%;}
	#area27{top:74%;right:19%;}
	#area31{top:66%;left:1%;}
	#area32{top:67%;right:39%;}
	#area33{top:91%;left:17%;}
	#area34{top:88%;right:42%;}
	#area35{top:52%;right:22%;}
	#area36{top:72%;right:55%;}
	#area37{top:90%;right:18%;}
	#area41{top:54%;right:53%;}
	#area42{top:76%;right:15%;}
	#area43{top:48%;right:38%;}
	#area44{top:72%;right:-3%;}
	#area45{top:83%;left:21%;}
	#area46{top:70%;left:5%;}
	#area47{top:56%;right:9%;}
	#area51{top:60%;right:46%;}
	#area52{top:64%;right:28%;}
	#area53{top:46%;right:63%;}
	#area54{top:51%;right:8%;}
	#area55{top:71%;left:0%;}
	#area56{top:88%;right:40%;}
	#area57{top:66%;right:-2%;}
	.negativo{width:90%;}
	.positivo{width:90%;}
	.feedbackBtn{bottom:30%;}
	.novamenteFeed{width:34%;left:11%;}
	.sairFeed{width:29%;right:11%;}
}

@media screen and (max-width: 600px) and (orientation: portrait) {
	.inicio{bottom:14%;}
	.duvida{bottom:2%;}
	.cena{width:85%}
	.titTela{top:3%;}
	.volta{top:3%;}
	.avanca{top:3%;}
	.container {bottom:3%;}
	.txtNegativo{font-size:1.7em;}
	.feedbackBtn{bottom:32%;}
	.container .progress {width: 66%;}
	
}
@media screen and (max-width: 330px) and (orientation: portrait) {
	.txtNegativo{font-size:1.2em;}
}