@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;}

#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:51%;top:0;bottom:0;left:0;right:0;margin:auto;}


#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%);}
.inicio{position:absolute;width:21%;right:auto;left:26%;bottom:19%;margin:auto;cursor:pointer;}
.como{position:absolute;width:21%;left:auto;right:26%;bottom:19%;margin:auto;cursor:pointer;}
.duvida{position:absolute;width:6%;top:2%;left:1%;margin:auto;z-index:3000;}
.stop{position:absolute;width:6%;top:2%;left:7%;margin:auto;z-index:3000;}
.sair{position:absolute;width:6%;top:2%;right:1%;margin:auto;z-index:3000;}


.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;}

/*.stop{position:absolute;width:5%;bottom:3%;left:3%;margin:auto;z-index:3000;}*/

.pagina{position:relative;height:100%;margin:0 auto;top:50%;transform:translateY(-50%);display:none;}
.grupo{position:absolute;width:100%;height:100%;display:none;}
.grupo1{display:block;}
.palavra{position:absolute;width:11%;}
.palavra1{top:18%;left:2%;}
.palavra2{top:42%;left:2%;}
.palavra3{top:66%;left:2%;}
.palavra4{top:18%;right:2%;}
.palavra5{top:42%;right:2%;}
.palavra6{top:66%;right:2%;}

.palavra7{top:18%;left:2%;}
.palavra8{top:42%;left:2%;}
.palavra9{top:66%;left:2%;}
.palavra10{top:18%;right:2%;}
.palavra11{top:42%;right:2%;}
.palavra12{top:66%;right:2%;}

.palavra13{top:18%;left:2%;}
.palavra14{top:42%;left:2%;}
.palavra15{top:66%;left:2%;}
.palavra16{top:18%;right:2%;}
.palavra17{top:42%;right:2%;}
.palavra18{top:66%;right:2%;}

.cena{position:absolute;width:66%;height:max-content;top:0;bottom:0;right:0;left:0;margin:auto;}
.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:auto;bottom:38%;left:0;right:0;margin:auto;color:#F57AB1;font-size:4em;}
.txtNegativo span{color:#549ABC;}
.feedbackBtn{position:absolute;bottom:9%;z-index:10;cursor:pointer;}
.novamenteFeed{width:23%;left:24%;}
.sairFeed{width:20%;right:24%;}
.proximo{width:20%;right:24%;bottom:24%;}

.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); */
}
/*.area img{width:auto;height:100%;}*/
#gato{width:9%;height:19%;top:62%;right:19%;}
#bateria{width:13%;height:19%;top:49%;left:30%;}
#bicicleta{width:14%;height:20%;top:49%;right:37%;}
#sorvete{width:9%;height:19%;top:59%;left:1%;}
#aranha{width:9%;height:20%;top:24%;right:6%;}
#panela{width:9%;height:17%;top:22%;right:23%;}

#vassoura{width:17%;height:70%;top:6%;left:0%;}
#camera{height:27%;top:7%;left:21%;width:10%;}
#tartaruga{height:14%;top:74%;left:1%;width:10%;}
#chinelo{top:1%;right:9%;width:10%;height:17%;}
#aviao{top:21%;right:28%;width:10%;height:20%;}
#bola{top:60%;right:20%;width:10%;height:20%;}

#repolho{width:8%;height:17%;top:56%;right:0%;}
#pincel{width:11%;height:20%;top:21%;left:17%;}
#prancha{width:25%;height:17%;top:75%;left:52%;}
#violao{width:10%;height:29%;top:50%;left:18%;}
#radio{width:10%;height:17%;top:18%;right:0%;}
#carro{width:11%;height:17%;top:20%;left:28%;}

.area img{position:absolute;width:40%;top:0;bottom:0;right:0;left:0;margin:auto;}
.area#vassoura img{top:15%;bottom:auto;}
.area#prancha img{width:21%;}

.container {
    position: absolute;
    width: 100%;
    top: auto;
	bottom:5%;
	right: auto;
	left: auto;
	margin:auto;
    text-align: center;
}
.container .progress {
  margin: 0 auto;
  width: 34%;
  border:9px solid #549abc;
  border-radius:2em;
}

.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 #549abc;
  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: #f57ab1;
}

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



@media screen and (max-width: 1024px) and (orientation: portrait) {
	.inicio{width:37%;left:9%;bottom:24%;}
	.como{width:37%;right:9%;bottom:24%;}
	.duvida{width:12%;left:1%;}
	.stop{width:12%;left:14%;}
	.sair{width:12%;right:1%;}
	.dica{width:75%;}
	
	.cena{width:95%;bottom:auto;top:20%;}	
	.container {bottom:auto;top:60%;}
	.container .progress {width: 74%;}
	
	.palavra{width:20%;top:auto;}
	.palavra1{bottom:21%;left:3%;}
	.palavra2{bottom:21%;left:0;right:0;margin:auto;}
	.palavra3{bottom:21%;left:auto;right:3%;}
	.palavra4{bottom:6%;left:3%;}
	.palavra5{bottom:6%;left:0;right:0;margin:auto;}
	.palavra6{bottom:6%;left:auto;right:3%;}
	
	.palavra7{bottom:21%;left:3%;}
	.palavra8{bottom:21%;left:0;right:0;margin:auto;}
	.palavra9{bottom:21%;left:auto;right:3%;}
	.palavra10{bottom:6%;left:3%;}
	.palavra11{bottom:6%;left:0;right:0;margin:auto;}
	.palavra12{bottom:6%;left:auto;right:3%;}
	
	.palavra13{bottom:21%;left:3%;}
	.palavra14{bottom:21%;left:0;right:0;margin:auto;}
	.palavra15{bottom:21%;left:auto;right:3%;}
	.palavra16{bottom:6%;left:3%;}
	.palavra17{bottom:6%;left:0;right:0;margin:auto;}
	.palavra18{bottom:6%;left:auto;right:3%;}
	
	#bicicleta{height:21%;}
	#aranha{width:9%;height:21%;}
	#tartaruga{width:10%;}
	#camera{width:13%;}
	#chinelo{width:11%;height:18%;}
	#aviao{width:11%;height:18%;}
	#bola{width:11%;height:18%;}
	#pincel{height:20%;}
	#carro{width:13%;top:23%;left:28%;}
	#radio{width:11%;top:22%;}
	#repolho{width:11%;top:58%;}
	#prancha{height:20%;}
	#violao{width:9%;}
	
	.final.novamente{width:38%;left:3%;bottom:33%;}
	.final.sair{width:31%;left:50%;bottom:33%;}
	
	.proximo{bottom:37%;}	
	.novamenteFeed{width:34%;left:11%;bottom:28%;}
	.sairFeed{width:29%;right:11%;bottom:28%;}
	.txtNegativo{bottom:43%;font-size:3em;}
	

	/*.stop{width:8%;bottom:3%;}*/
	.area{width:19%;height:12%;}
	.negativo{width:90%;}
	.positivo{width:90%;}
}

@media screen and (max-width: 600px) and (orientation: portrait) {
	.inicio{bottom:28%;}
	.como{bottom:28%;}
	.duvida{width:15%;left:3%;}
	.stop{width:15%;left:16%;}
	.sair{width:15%;right:3%;}
	.dica{width:95%;}
	
	.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%;}
	.txtNegativo{font-size:2em;}
	
}
@media screen and (max-width: 330px) and (orientation: portrait) {
	.txtNegativo{font-size:1.2em;}
}