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

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

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

@font-face {
  font-family: "Oswald-Light";
  src: url("https://s3.amazonaws.com/cdn.infografiaepoca.com.br/siteEpoca/fonts/Oswald-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: "Oswald-Bold";
  src: url("https://s3.amazonaws.com/cdn.infografiaepoca.com.br/siteEpoca/fonts/Oswald-Bold.ttf");
}

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

	


body{
	font-size:15px;
  width:560px;
  height:1000px;
  background-color:#000;
}
@media screen and (max-width: 480px) {
body{
  width:480px;
  height:auto;
  }
}
@media screen and (max-width: 375px) {
body{
  width:375px;
  height:667px;
  }
}
@media screen and (max-width: 360px) {
body{
  width:360px;
  height:643px;
  }
}
@media screen and (max-width: 320px) {
body{
  width:320px;
  height:auto;
  }
}


* { margin: 0; padding: 0 }
    /* I've used a hard CSS reset above, but you should consider a more sophisticated reset, such as this one: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */
    
    p { text-align: left; margin: 15px 0 }
    
    p, ul { font-size: 13px; line-height: 1.4em }
    
    /*p1 {font-size: 13px; line-height: 1.4em; text-align:left; margin:15px 0; font-weight:bold } */
    
    p a, li a { color: #39c; text-decoration: none }
    
    p.intro { border-bottom: 1px solid #ccc; margin-bottom: 20px; padding: 20px 0 30px 0; text-align: center; width: 95% }
    
    p#cross-links { text-align: center }
    
    p#cross-links { border-bottom: 1px solid #ccc; margin-bottom: 30px; padding-bottom: 30px }
    
    noscript p, noscript ol { color: #a00; font-size: 13px; line-height: 1.4em; text-align: left }
    noscript a { color: #a00; text-decoration: underline }
    noscript ol { margin-left: 25px; }
    
    a:focus { outline:none }
    
    img { border: 0 }
    
    h3 { border-bottom: 1px solid silver; margin-bottom: 5px; padding-bottom: 3px; text-align: left }
    


.titleee{
	font-family:"Oswald-Bold";
	font-size:3.0em;
	text-align:center;
  text-transform:uppercase;
	color:#fff;
	width: 88%;
  margin: 0 auto;
  position: relative;
  top: 121px;
  line-height:1.15em;
}
@media screen and (max-width: 480px) {
.titleee{
  width: 99%;
  font-size: 2.4em;
  top: 94px;
  left: -5px;
  }
}
@media screen and (max-width: 375px) {
.titleee{
  width: 89%;
  font-size: 1.8em;
  top: 76px;
  left: -19px;
  }
}
@media screen and (max-width: 360px) {
.titleee{
  width: 89%;
  font-size: 1.8em;
  top: 76px;
  left: -2px;
  }
}
@media screen and (max-width: 320px) {
.titleee{
  width: 100%;
  font-size: 1.7em;
  top: 60px;
  left:-8px;
  }
}

.aquiii{
  font-family: "Oswald-Bold";
  font-size: 1.1em;
  text-align: center;
  text-transform: uppercase;
  color: #000;
  background-color: #949599;
  width: 113px;
  height: 27px;
  padding-top: 3px;
  position: relative;
  top: 139px;
  left: 372px;
  z-index:1000;
}
@media screen and (max-width: 480px) {
.aquiii{
  font-size: 1.1em;
  width: 113px;
  height: 27px;
  padding-top: 3px;
  position: relative;
  top: 89px;
  left: 319px;
  }
}
@media screen and (max-width: 375px) {
.aquiii{
  font-size: 1.1em;
  width: 105px;
  height: 23px;
  padding-top: 0px;
  position: relative;
  top: 74px;
  left: 230px;
  }
}
@media screen and (max-width: 360px) {
.aquiii{
  font-size: 1.1em;
  width: 105px;
  height: 23px;
  padding-top: 0px;
  position: relative;
  top: 74px;
  left: 223px;
  }
}
@media screen and (max-width: 320px) {
.aquiii{
  font-size: 0.8em;
  width: 91px;
  height: 19px;
  padding-top: 3px;
  position: relative;
  top: 53px;
  left: 198px;
  }
}

.setaaa{
  position:absolute;
  top:282px;
  left:388px;
  z-index: 10;
}
@media screen and (max-width: 480px) {
.setaaa{
  top: 212px;
  left: 331px;
  width: 5%;
  height: auto;  
  }
}
@media screen and (max-width: 375px) {
.setaaa{
  top: 172px;
  left: 239px;
  width: 5%;
  height: auto;
  }
}
@media screen and (max-width: 360px) {
.setaaa{
  top: 172px;
  left: 230px;
  width: 5%;
  height: auto;
  }
}
@media screen and (max-width: 320px) {
.setaaa{
  top:145px;
  left:207px;
  }
}

.fundooo{
  margin:0;
  background-color:#000;
  z-index:-1;
  position: absolute;
  top: 0;
  width:560px;
  height:994px;
}
@media screen and (max-width: 480px) {
.fundooo{
  width:480px;
  height:auto;
  }
}
@media screen and (max-width: 375px) {
.fundooo{
  width:339px;
  height:auto;
  }
}
@media screen and (max-width: 360px) {
.fundooo{
  width:339px;
  height:auto;
  }
}
@media screen and (max-width: 320px) {
.fundooo{
  width:300px;
  height:auto;
  }
}

.imagemmm{
  width:526px;
  height:600px;
  position:relative;
  top:-10px;
  left:-11px;
}
@media screen and (max-width: 480px) {
.imagemmm{
  width:450px;
  height:auto;
  top:-10px;
  left:-10px;
  }
}
@media screen and (max-width: 375px) {
.imagemmm{
  width:337px;
  height:auto;
  }
}
@media screen and (max-width: 360px) {
.imagemmm{
  width:337px;
  height:auto;
  }
}
@media screen and (max-width: 320px) {
.imagemmm{
  width:280px;
  height:auto;
  left:-10px;
  }
}
    
    .stripViewer .panelContainer .panel ul {
      text-align: left;
      margin: 0 25px 0 30px;
    }
    
    .slider-wrap { /* This div isn't entirely necessary but good for getting the side arrows vertically centered */
      margin: 20px 0;
      position: relative;
      width: 100%;
      top:132px;
    }
    @media screen and (max-width: 480px) {
      .slider-wrap{
        top:88px;
      }
    }
    @media screen and (max-width: 375px) {
      .slider-wrap{
        top: 45px;
        left: -4px;
      }
    }
    @media screen and (max-width: 360px) {
      .slider-wrap{
        top: 45px;
        left: -4px;
      }
    }
    @media screen and (max-width: 320px) {
      .slider-wrap{
        top:23px;
        left:0;
      }
    }


    /* These 2 lines specify style applied while slider is loading */
    .csw {width: 560px; height: 500px; background: #fff; overflow: scroll}
    .csw .loading {margin: 200px 0 300px 0; text-align: center}

    .stripViewer { /* This is the viewing window */
      position: relative;
      overflow: hidden;
      /* border: 2px solid #ccc; */
      margin: auto;
      width: 525px;
      height: 600px;
      clear: both;
      /* margin-left: 5; */
      /* margin-top: -1px; */
      position: absolute;
      background: #fff;
      top: 76px;
      left: 18px;
    }
    @media screen and (max-width: 480px) {
      .stripViewer{
        top: 65px;
        left: 15px;
        width: 450px;
        height:509px;
      }
    }
    @media screen and (max-width: 375px) {
      .stripViewer{
        top: 72px;
        left: 10px;
        width: 326px;
        height:382px;
      }
    }
    @media screen and (max-width: 360px) {
      .stripViewer{
        top: 70px;
        left: 10px;
        width: 326px;
        height:382px;
      }
    }
    @media screen and (max-width: 320px) {
      .stripViewer{
        top: 70px;
        left: 10px;
        width: 280px;
        height:340px;
      }
    }

    
    .stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
      position: relative;
      left: 0; top: 0;
      width: 100%;
      list-style-type: none;
      /* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */
    }
    
    .stripViewer .panelContainer .panel { /* Aqui vai a caixa de texto ---------  Each panel is arranged end-to-end */
      float:left;
      height: 100%;
      position: relative;
      width: 520px; /* Also specified in  .stripViewer  above */
    }
    @media screen and (max-width: 320px) {
      .stripViewer .panelContainer .panel {
        width: 300px;
        height:340px;
      }
    }
    
    .stripViewer .panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */
      padding: 10px;
    }
    
    .stripNav { /* This is the div to hold your nav (the UL generated at run time) */
      margin: auto;
    }
    
    .stripNav ul { /* The auto-generated set of links */
      list-style: none;
      width: 540px;
    }
    
    .stripNav ul li {
      float: left;
      margin-right: 2px; /* If you change this, be sure to adjust the initial value of navWidth in coda-slider.1.1.1.js */
    }
    
    .stripNav a { /* The nav links */
      font-size: 3.2em;
      font-family:"Oswald-Light";
      text-align: center;
      background: #ccc;
      /*border:1px solid #fff;*/
      color: #000;
      display: block;
      padding: 0 11px;
      padding-top: 25px;
      margin-left: 4px;
      position: relative;
      left: -1px;
    }
    @media screen and (max-width: 480px) {
      .stripNav a {
        font-size: 3.2em;
        padding: 0 11px;
        padding-top: 16px;
        margin-left: 2.7px;
      }
    }
    @media screen and (max-width: 375px) {
      .stripNav a {
        font-size: 2.2em;
        padding: 0px 10px;
        padding-top: 13px;
        margin-left: 1.8px;
        position: relative;
        top:22px;
        left: 0;
      }
    }
    @media screen and (max-width: 360px) {
      .stripNav a {
        font-size: 2.2em;
        padding: 0px 10px;
        padding-top: 13px;
        margin-left: 1.8px;
        position: relative;
        top:22px;
        left: 0;
      }
    }
    @media screen and (max-width: 320px) {
      .stripNav a {
        font-size: 2.2em;
        padding: 0px 10px;
        padding-top: 13px;
        margin-left: 1.8px;
        position: relative;
        top:22px;
        left: 0;
      }
    }
    
    .stripNav li.tab1 a, .stripNav li.tab2 a, .stripNav li.tab3 a, .stripNav li.tab4 a, .stripNav li.tab5 a,
    .stripNav li.tab6 a, .stripNav li.tab7 a, .stripNav li.tab8 a, .stripNav li.tab9 a { 
      background: #949599; 
      /*border:1px solid #fff;*/ 
      width:31px; 
      height:41px; 
    }
    @media screen and (max-width: 480px) {
      .stripNav li.tab1 a, .stripNav li.tab2 a, .stripNav li.tab3 a, .stripNav li.tab4 a, .stripNav li.tab5 a,
      .stripNav li.tab6 a, .stripNav li.tab7 a, .stripNav li.tab8 a, .stripNav li.tab9 a {
        width: 24px;
        height: 40px;
        position: relative;
        left: 0;
      }
    }
    @media screen and (max-width: 375px) {
      .stripNav li.tab1 a, .stripNav li.tab2 a, .stripNav li.tab3 a, .stripNav li.tab4 a, .stripNav li.tab5 a,
      .stripNav li.tab6 a, .stripNav li.tab7 a, .stripNav li.tab8 a, .stripNav li.tab9 a {
        width: 12.4px;
        height: 31px;
        position: relative;
        left: -9px;
      }
    }
    @media screen and (max-width: 360px) {
      .stripNav li.tab1 a, .stripNav li.tab2 a, .stripNav li.tab3 a, .stripNav li.tab4 a, .stripNav li.tab5 a,
      .stripNav li.tab6 a, .stripNav li.tab7 a, .stripNav li.tab8 a, .stripNav li.tab9 a {
        width: 12.4px;
        height: 31px;
        position: relative;
        left: -9px;
      }
    }
    @media screen and (max-width: 320px) {
      .stripNav li.tab1 a, .stripNav li.tab2 a, .stripNav li.tab3 a, .stripNav li.tab4 a, .stripNav li.tab5 a,
      .stripNav li.tab6 a, .stripNav li.tab7 a, .stripNav li.tab8 a, .stripNav li.tab9 a {
        width:7.8px; 
        height:29px;
        position:relative;
        left:-10px;
      }
    }
    
    
    .stripNav li a:hover {
      background: #ccc;
    }
    
    .stripNav li a.current {
      background: #f15a23;
      color: #000;
      height: 52px;
      
      margin-bottom:15px;
    }
    
    /* aqui vão as setas de próximo e anterior */

    .stripNavL, .stripNavR { 
      position: absolute;
      top: 230px;
      text-indent: -9000em;
      z-index:10;
      display:none;
    }
/*
    
    .stripNavL a, .stripNavR a {
      display: block;
      height: 40px;
      width: 40px;
    }
    
    .stripNavL {
      left: 0;
    }
    
    .stripNavR {
      right: 0;
    }

    .stripNavL {
      background: url("http://epoca.globo.com/infograficos/714_ensino_distancia/images/arrow-left.jpg") no-repeat center;
    }
    
    .stripNavR {
      background: url("http://epoca.globo.com/infograficos/714_ensino_distancia/images/arrow-right.jpg") no-repeat center;
    }
    */