@charset "utf-8";
/* CSS Document */
*{padding:0;margin:0}

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

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

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

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

#fundo{
	/*background:url("../images/fundo-grafico.jpg") no-repeat;*/
	width:560px;
	height:auto;
	z-index:1000;
	overflow:hidden;
}
@media screen and (max-width: 320px) {
    #fundo {
        width:300px;
				height:auto;
				z-index:1000;
				overflow:hidden;
    }
}

@media screen and (max-width: 360px) {
    #fundo {
        width:300px;
				height:auto;
				z-index:1000;
				overflow:hidden;
    }
}

.cem-porcento{
	position:absolute;
	top:390px;
	left:50px;
	z-index:10;
}
@media screen and (max-width: 320px) {
    .cem-porcento {
        top:365px;
				left:25px;
				width:50px;
    }
}
@media screen and (max-width: 360px) {
    .cem-porcento {
        top:365px;
				left:25px;
				width:50px;
    }
}

.fundo-graficooo{
	margin:0;
	position:absolute;
	top:421px;
	left:0;
	z-index:1;
}
@media screen and (max-width: 320px) {
    .fundo-graficooo {
        width:300px;
        margin:0;
        top:387px;
				left:0;
    }
}
@media screen and (max-width: 360px) {
    .fundo-graficooo {
        width:300px;
        margin:0;
        top:387px;
				left:0;
    }
}

.clique-lojas{
	position:absolute;
	top:128px;
	left:478px;
	z-index:1;
}
@media screen and (max-width: 320px) {
    .clique-lojas {
        left:236px;
    }
}
@media screen and (max-width: 360px) {
    .clique-lojas {
        left:236px;
    }
}

.creditooo{
	font-size:80%;
	font-family:"Founders Regular", Arial;
	position:absolute;
	top:830px;
	left:40px;
}
@media screen and (max-width: 320px) {
    .creditooo {
        left:24px;
        top:610px;
    }
}
@media screen and (max-width: 360px) {
    .creditooo {
        left:24px;
        top:610px;
    }
}

.title-lojas{
	font-size:150%;
	font-family:"Founders Bold", Arial;
	font-weight:bold;
	color:#000;
	margin:10px 5px 5px 50px;
	line-height:1.0em;
	width:455px;
	text-transform: uppercase;
	text-align:center;
}
@media screen and (max-width: 360px) {
    .title-lojas {
        width: 300px;
        font-size:120%;
        margin:6px 5px 6px 2px;
    }
}

.subtitle-lojas{
	font-size:150%;
	font-family:"Founders Light", Arial;
	line-height:1.0em;
	color:#000;
	text-align:center;
}
@media screen and (max-width: 320px) {
    .subtitle-lojas {
        width: 250px;
        font-size:120%;
        margin:4px 5px 10px 26px;
    }
}
@media screen and (max-width: 360px) {
    .subtitle-lojas {
        width: 250px;
        font-size:120%;
        margin:4px 5px 10px 26px;
    }
}

.tableee{
	position:absolute;
	top:109px;
	left:-8px;
}
@media screen and (max-width: 320px) {
    .tableee {
    	display:none;
    }
}
@media screen and (max-width: 360px) {
    .tableee {
    	display:none;
    }
}

.menuuu{
	display:none;
}
@media screen and (max-width: 320px) {
    .menuuu {
    	display:block;
    	background-image:url("images/menu.png");
    	background-repeat:no-repeat;
    	position:absolute;
    	top:132px;
    	left:54px;
    	z-index:1;
    }
}
@media screen and (max-width: 360px) {
    .menuuu {
    	display:block;
    	background-image:url("images/menu.png");
    	background-repeat:no-repeat;
    	position:absolute;
    	top:132px;
    	left:54px;
    	z-index:1;
    }
}

hr{
	border:3px solid #000;
	position:absolute;
	top:815px;
	left:41px;
	z-index:1;
	width:143px;
}
@media screen and (max-width: 360px) {
    hr {
    		top:600px;
    		border:2px solid #000;
				left:25px;
				width:143px;
    }
}

li{
	margin: 10px 0 10px 92px;
	font-family: "Kina Bold";
	font-size:150%;
	list-style-type:none;
}
@media screen and (max-width: 320px) {
    li {
    		font-size:120%;
        margin:11px 5px 1px 62px !important;
    }
}

.texto{
	font-size:17px;
	font-weight:bold;
	color:#fff;
	z-index:1;
}
.numeri_bold{
	color:#fff;
	font-weight:bold;
}
.thumbs{
	float:left;
	cursor: pointer;
	
  z-index:2;
  position:absolute;  
}


@-webkit-keyframes umPulse {
    from { background-color: #bed73b; -webkit-box-shadow: 0 0 5px #ccc; }
    50% { background-color: #aec826; -webkit-box-shadow: 0 0 5px #bed73b; }
    to { background-color: #bed73b; -webkit-box-shadow: 0 0 5px #ccc; }
  }

@-webkit-keyframes doisPulse {
    from { background-color: #d18745; -webkit-box-shadow: 0 0 9px #ccc; }
    50% { background-color: #e33100; -webkit-box-shadow: 0 0 9px #d18745; }
    to { background-color: #d18745; -webkit-box-shadow: 0 0 9px #ccc; }
  }


@-webkit-keyframes tresPulse {
    from { background-color: #bc330d; -webkit-box-shadow: 0 0 9px #333; }
    50% { background-color: #e33100; -webkit-box-shadow: 0 0 9px #cc0000; }
    to { background-color: #bc330d; -webkit-box-shadow: 0 0 9px #333; }
  }

@-webkit-keyframes quatroPulse {
    from { background-color: #bc330d; -webkit-box-shadow: 0 0 9px #333; }
    50% { background-color: #e33100; -webkit-box-shadow: 0 0 9px #cc0000; }
    to { background-color: #bc330d; -webkit-box-shadow: 0 0 9px #333; }
  }

@-webkit-keyframes cincoPulse {
    from { background-color: #bc330d; -webkit-box-shadow: 0 0 9px #333; }
    50% { background-color: #e33100; -webkit-box-shadow: 0 0 9px #cc0000; }
    to { background-color: #bc330d; -webkit-box-shadow: 0 0 9px #333; }
  }

@-webkit-keyframes seisPulse {
    from { background-color: #bc330d; -webkit-box-shadow: 0 0 9px #333; }
    50% { background-color: #e33100; -webkit-box-shadow: 0 0 9px #cc0000; }
    to { background-color: #bc330d; -webkit-box-shadow: 0 0 9px #333; }
  }

/*clicks*/

#click_um, #click_dois, #click_tres, #click_quatro, #click_cinco, #click_seis, #click_sete{	
  display: block;
  position:absolute;
	left:51px;	
	border-radius: 50%;
  height: 22px;
  width: 22px;
	cursor: pointer;
	z-index:3;
}
@media screen and (max-width: 320px) {
    #click_um, #click_dois, #click_tres, #click_quatro, #click_cinco, #click_seis, #click_sete {
				border-radius: 50%;
				left:27px;
  			height: 18px;
  			width: 18px;
    }
}
@media screen and (max-width: 360px) {
    #click_um, #click_dois, #click_tres, #click_quatro, #click_cinco, #click_seis, #click_sete {
				border-radius: 50%;
				left:27px;
  			height: 18px;
  			width: 18px;
    }
}

#click_um{
	top:119px;
  border:3px solid #bdd73c;
}
@media screen and (max-width: 320px) {
    #click_um {
    		top:134px;
    }
}
@media screen and (max-width: 360px) {
    #click_um {
    		top:134px;
    }
}

#click_dois{
	top:157px;
  border:3px solid #8279a5;
}
@media screen and (max-width: 320px) {
    #click_dois {
    		top:169px;
    }
}
@media screen and (max-width: 360px) {
    #click_dois {
    		top:169px;
    }
}

#click_tres{
	top:194px;
  border:3px solid #b0605b;
}
@media screen and (max-width: 320px) {
    #click_tres {
    		top:200px;
    }
}
@media screen and (max-width: 360px) {
    #click_tres {
    		top:200px;
    }
}

#click_quatro{
	top:230px;
  border:3px solid #e29956;
}
@media screen and (max-width: 320px) {
    #click_quatro {
    		top:234px;
    }
}
@media screen and (max-width: 360px) {
    #click_tres {
    		top:200px;
    }
}

#click_cinco{
	top:267px;
  border:3px solid #007347;
}
@media screen and (max-width: 320px) {
    #click_cinco {
    		top:267px;
    }
}
@media screen and (max-width: 360px) {
    #click_tres {
    		top:200px;
    }
}

#click_seis{
	top:304px;
  border:3px solid #25a0c3;
}
@media screen and (max-width: 320px) {
    #click_seis {
    		top:300px;
    }
}
@media screen and (max-width: 360px) {
    #click_seis {
    		top:300px;
    }
}

#click_sete{
	top:340px;
	border:3px solid #000;
	background-color:#000;
}
@media screen and (max-width: 320px) {
    #click_sete{
    		top:333px;
    		background-color:#000;
    }
}
@media screen and (max-width: 360px) {
    #click_sete{
    		top:333px;
    		background-color:#000;
    }
}


@media screen and (max-width: 320px) {
    .imagem-graficooo{
    		width:300px;
    		position:absolute;
    		top:61px;
    		left:0;
    }
}
@media screen and (max-width: 360px) {
    .imagem-graficooo{
    		width:300px;
    		position:absolute;
    		top:61px;
    		left:0;
    }
}


/*
#click_oito{
	cursor: pointer;
	position:absolute;
	top:371px;
	left:529px;
	width:24px;
	height:26px;
	z-index:2;
}
#click_nove{
	cursor: pointer;
	position:absolute;
	top:432px;
	left:500px;
	width:24px;
	height:26px;
	z-index:2;
}
#click_dez{
	cursor: pointer;
	position:absolute;
	top:504px;
	left:460px;
	width:24px;
	height:26px;
	z-index:2;
}
#click_nao_usar{
	cursor: pointer;
	position:absolute;
	top:492px;
	left:43px;
	width:321px;
	height:47px;
	z-index:2;
}

*/



/*display none*/

#um{
	display:none;
	position:absolute;
	top:421px;
	left:0px;
	width:330px;
	z-index: 2;
}
@media screen and (max-width: 360px) {
    #um{
    	width:300px;
    	top:326px;
    }
}

#dois{
	display:none;
	position:absolute;
	top:421px;
	left:0px;
	width:370px;
	z-index: 1;
}
@media screen and (max-width: 360px) {
    #dois{
    		width:300px;
    	top:326px;
    }
}

#tres{
	display:none;
	position:absolute;
	top:421px;
	left:0px;;
	width:370px;
	z-index: 1;
}
@media screen and (max-width: 360px) {
    #tres{
    		width:300px;
    	top:326px;
    }
}

#quatro{
	display:none;
	position:absolute;
	top:421px;
	left:0px;
	width:370px;
	z-index: 1;

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

#cinco{
	display:none;
	position:absolute;
	top:421px;
	left:0px;
	width:370px;
	z-index: 1;
}
@media screen and (max-width: 360px) {
    #cinco{
    		width:300px;
    	top:326px;
    }
}

#seis{
	display:none;
	position:absolute;
	top:421px;
	left:0px;
	width:370px;
	z-index: 1;
}
@media screen and (max-width: 360px) {
    #seis{
    		width:300px;
    	top:326px;
    }
}

#sete{
	display:none;
	position:absolute;
	top:421px;
	left:0px;
	width:370px;
	z-index: 1;
}
@media screen and (max-width: 360px) {
    #sete{
    		width:300px;
    	top:326px;
    }
}
/*
#oito{
	display:none;
	position:absolute;
	top:0px;
	left:0px;;
	width:370px;
	z-index: 1;
}
#nove{
	display:none;
	position:absolute;
	top:0px;
	left:0px;
	width:370px;
	z-index: 1;
}
#dez{
	display:none;
	position:absolute;
	top:0px;
	left:0px;
	width:370px;
	z-index: 1;
}
#nao_usar{
	display:none;
	position:absolute;
	top:0px;
	left:0px;
	width:370px;
	z-index: 1;
}
*/

#fechar{
	text-align:right;
}