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

#franca{
  width:560px;
  height:4482px;
  overflow: hidden;
  padding:0;
  margin:0;
  background:#fff;
}
@media screen and (max-width: 480px) {
    #franca {
      width:480px;
      height:3780px;
    }
}
@media screen and (max-width: 414px) {
    #franca {
      width:414px;
      height:3265px;
    }
}
@media screen and (max-width: 375px) {
    #franca {
      width:375px;
      height:2938px;
    }
}
@media screen and (max-width: 360px) {
    #franca {
      width:360px;
      height:2815px;
    }
}
@media screen and (max-width: 320px) {
    #franca {
      width:320px;
      height:2505px;
    }
}


@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: "Kina-Bold";
  src: url("https://s3.amazonaws.com/cdn.infografiaepoca.com.br/siteEpoca/founders/Kina-Bold.otf");
}

@font-face {
  font-family: "Oswald";
  src: url("http://fonts.googleapis.com/css?family=Oswald");
}
  
@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: "FoundersGroteskCondensed-Semibold";
  src: url("https://s3.amazonaws.com/cdn.infografiaepoca.com.br/siteEpoca/founders/FoundersGroteskCond-SmBd.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: "Knockout";
  src: url("https://s3.amazonaws.com/cdn.infografiaepoca.com.br/siteEpoca/fonts/KNOCKOUT-HTF66-FULLFLYWEIGHT.OTF");
}

  

.thumbs{
  float:left;
  cursor: pointer;
  display: inline-block;
  margin-left:28px;
  position:relative;
  top:1389px;
  z-index:10000;
}
@media screen and (max-width: 480px) {
    .thumbs {
      margin-left:23px;
      top:1180px;
      left:0;
    }
}
@media screen and (max-width: 414px) {
    .thumbs {
      margin-left:9px;
      top: 1016px;
      left: -3px;
    }
}
@media screen and (max-width: 375px) {
    .thumbs {
      margin-left:5px;
      top: 912px;
      left: -5px;
    }
}
@media screen and (max-width: 360px) {
    .thumbs {
      margin-left:5px;
      top: 876px;
      left: -8px;
    }
}
@media screen and (max-width: 320px) {
    .thumbs {
      margin-left:0;
      top:772px;
      left: 0;
    }
}


.btn-thumbs-1, .btn-thumbs-2, .btn-thumbs-3, .btn-thumbs-4{
  width:148px;
  height:44px;
  z-index:10000;
  position:relative;
}

@media screen and (max-width: 480px) {
    .btn-thumbs-1, .btn-thumbs-2, .btn-thumbs-3, .btn-thumbs-4{
      width:122px;
      height:auto;
      /*margin:10px 0 10px 15px;*/
    }
}
@media screen and (max-width: 414px) {
    .btn-thumbs-1, .btn-thumbs-2, .btn-thumbs-3, .btn-thumbs-4{
      width:122px;
      height:auto;
      /*margin:10px 0 10px 15px;*/
    }
}
@media screen and (max-width: 375px) {
    .btn-thumbs-1, .btn-thumbs-2, .btn-thumbs-3, .btn-thumbs-4{
      width:116px;
      height:auto;
    }
}
@media screen and (max-width: 360px) {
    .btn-thumbs-1, .btn-thumbs-2, .btn-thumbs-3, .btn-thumbs-4{
      width:114px;
      height:auto;
    }
}
@media screen and (max-width: 320px) {
    .btn-thumbs-1, .btn-thumbs-2, .btn-thumbs-3, .btn-thumbs-4{
      width:100px;
      height:auto;
    }
}

#um, #dois, #tres {
  display:block;
  position:absolute;
  top:2180px;
  left:5px;
  z-index: 100;
}
@media screen and (max-width: 480px) {
    #um, #dois, #tres {
      width: 470px;  
      top:1855px;
      margin-left: -6px;
    }
}
@media screen and (max-width: 414px) {
    #um, #dois, #tres {
      width: 404px; 
      top:1607px;
      margin-left: -6px;
    }
}
@media screen and (max-width: 375px) {
    #um, #dois, #tres {
      width: 365px; 
      top:1440px;
      margin-left: -8px;
    }
}
@media screen and (max-width: 360px) {
    #um, #dois, #tres {
      width: 350px; 
      top:1384px;
      margin-left: -8px;
    }
}
@media screen and (max-width: 320px) {
    #um, #dois, #tres {
      width: 310px; 
      top:1230px;
      margin-left: -6px;
    }
}

.imagemmm-abre {
  position: relative;
  top: 0;
  width:560px;
  height:auto;
}
@media screen and (max-width: 480px) {
    .imagemmm-abre {  
      width:470px;
      height:auto;
    }
}
@media screen and (max-width: 414px) {
    .imagemmm-abre {  
      width:404px;
      height:auto;
    }
}
@media screen and (max-width: 375px) {
    .imagemmm-abre { 
      width:365px;
      height:auto;
    }
}
@media screen and (max-width: 360px) {
    .imagemmm-abre { 
      width:350px;
      height:auto;
    }
}
@media screen and (max-width: 320px) {
    .imagemmm-abre { 
      width:310px;
      height:auto;
    }
}

.imagemmm {
  width:560px;
  height:auto;
}
@media screen and (max-width: 480px) {
    .imagemmm {  
      width:470px;
    }
}
@media screen and (max-width: 414px) {
    .imagemmm {  
      width:404px;
    }
}
@media screen and (max-width: 375px) {
    .imagemmm { 
      width:365px;
    }
}
@media screen and (max-width: 360px) {
    .imagemmm { 
      width:350px;
    }
}
@media screen and (max-width: 320px) {
    .imagemmm { 
      width:310px;
    }
}

.imagemmm0 {
  position: absolute;
  top: 1330px;
  width:560px;
  height:auto;
}
@media screen and (max-width: 480px) {
    .imagemmm0 {  
      width:470px;
      top: 1135px;
      left: -3px;
    }
}
@media screen and (max-width: 414px) {
    .imagemmm0 {  
      width:404px;
      top: 980px;
      left: -3px;
    }
}
@media screen and (max-width: 375px) {
    .imagemmm0 { 
      width:365px;
      top: 876px;
      left: -2px;
    }
}
@media screen and (max-width: 360px) {
    .imagemmm0 { 
      width:350px;
      top: 844px;
      left: -3px;
    }
}
@media screen and (max-width: 320px) {
    .imagemmm0 { 
      width:310px;
      top: 744px;
      left: -4px;
    }
}



.imagemmm1 {
  width:560px;
  height:auto;
  position: relative;
  top: 2070px;
  left: 0;
}
@media screen and (max-width: 480px) {
    .imagemmm1 {
      top:1757px;  
      width:470px;
    }
}
@media screen and (max-width: 414px) {
    .imagemmm1 {
      top:1522px;  
      width:404px;
    }
}
@media screen and (max-width: 375px) {
    .imagemmm1 {
      top:1358px; 
      width:365px;
    }
}
@media screen and (max-width: 360px) {
    .imagemmm1 {
      top:1301px; 
      width:350px;
    }
}
@media screen and (max-width: 320px) {
    .imagemmm1 {
      top:1160px; 
      width:310px;
    }
}

.imagemmm2 {
  width: 560px;
  height: auto;
  position: relative;
  top: 3627px;
  left: 1px;
  z-index: 10000;
}
@media screen and (max-width: 480px) {
    .imagemmm2 {
      margin-top:600px;  
      width:470px;
    }
}
@media screen and (max-width: 414px) {
    .imagemmm2 {
      margin-top:510px;  
      width:404px;
    }
}
@media screen and (max-width: 375px) {
    .imagemmm2 {
      margin-top:480px; 
      width:365px;
    }
}
@media screen and (max-width: 360px) {
    .imagemmm2 {
      margin-top:480px; 
      width:350px;
    }
}
@media screen and (max-width: 320px) {
    .imagemmm2 {
      margin-top:405px; 
      width:310px;
    }
}




/*

.titleee{
  font-family:"FoundersGrotesk-Bold", Arial;
  font-size: 200%;
  text-transform: uppercase;
  line-height: 25px;
  color: #000;
  width: 560px;
  padding:20px 0 0 0;
  text-align:center;
}
@media screen and (max-width: 480px) {
    .titleee {
      width: 393px;
      margin-left:20px;
    }
}
@media screen and (max-width: 360px) {
    .titleee {
      width: 335px;
      margin-left:-8px;
    }
}
@media screen and (max-width: 320px) {
    .titleee {
      font-size: 120%;
      width: 300px;
      margin-left:-10px;
    }
}

.subtitleee{
  font-family:"FoundersGrotesk-Light", Arial;
  font-size: 140%;
  line-height: 1em;
  color: #000;
  width: 534px;
  padding:10px;
  text-align:center;
}
@media screen and (max-width: 480px) {
    .subtitleee {
      font-size: 140%;
      width: 440px;
    }
}
@media screen and (max-width: 360px) {
    .subtitleee {
      font-size: 140%;
      width: 300px;
    }
}
@media screen and (max-width: 320px) {
    .subtitleee {
      font-size: 120%;
      width: 269px;
    }
}

.textooo{
  font-family:"FoundersGrotesk-Light", Arial;
  font-size: 110%;
  letter-spacing: -0.1px;
  line-height: 20px;
  color: #58595b;
  margin: -6px 5px 10px -2px;
  width: 505px;
  padding:10px;
  border-style: dotted;
  border-bottom-width: 2px;
  border-top-width: 0;
  border-right-width: 0;
  border-left-width: 0;
  border-color: #ccc;
}
@media screen and (max-width: 480px) {
    .textooo {
      margin: 10px 10px 10px 3px;
      width: 404px;
    }
}
@media screen and (max-width: 360px) {
    .textooo {
      margin: 10px 10px 10px -2px;
      width: 292px;
    }
}
@media screen and (max-width: 320px) {
    .textooo {
      margin: 10px 10px 10px -2px;
      width: 237px;
    }
}

#quatro{
  display:none;
  position:absolute;
  top:518px;
  left:5px;
  padding:10px;
  background:#fff;
  border:1px solid #ccc;
  width:525px;
  height:787px;
  z-index: 10000;
}
@media screen and (max-width: 480px) {
    #quatro{
      width: 430px; 
      height: 990px; 
      top:500px;
    }
}
@media screen and (max-width: 360px) {
    #quatro{
      width: 310px; 
      height: 1200px;
      top:573px;
    }
}
@media screen and (max-width: 320px) {
    #quatro{
      width: 254px; 
      height: 1386px; 
      top:500px;
    }
}



#fechar_um, #fechar_dois, #fechar_tres, #fechar_quatro{
  position:absolute;
  top:6px;
  left:519px;
  cursor:pointer;
}
@media screen and (max-width: 480px) {
    #fechar_um, #fechar_dois, #fechar_tres, #fechar_quatro{  
      left:424px;
    }
}
@media screen and (max-width: 360px) {
    #fechar_um, #fechar_dois, #fechar_tres, #fechar_quatro{ 
      left:304px;
    }
}
@media screen and (max-width: 320px) {
    #fechar_um, #fechar_dois, #fechar_tres, #fechar_quatro{ 
      left:248px;
    }
}
*/