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

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

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



/* Browser Resets */
.flex-container a:active,
.flexslider a:active {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none; z-index:100000;} 

/* FlexSlider Necessary Styles
*********************************/ 
.flexslider {
  width: 560px; 
  height:557px; 
  margin: 0; 
  padding: 0; 
  z-index:100000
}
@media screen and (max-width: 480px) {
    .flexslider {
      width: 320px; 
      height:700px;
    }
}
@media screen and (max-width: 360px) {
    .flexslider {
      width: 320px; 
      height:700px;
    }
}
@media screen and (max-width: 320px) {
    .flexslider {
      width: 320px; 
      height:700px;
    }
}
.flexslider .slides > li {display: none;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {
  max-width: 59%; 
  display: block; 
  border:12px solid #d2232a; 
  position:relative; 
  top:-33px; 
  left:14px;
}
@media screen and (max-width: 480px) {
    .flexslider .slides img {
      max-width: 76%;
    }
}
@media screen and (max-width: 360px) {
    .flexslider .slides img {
      max-width: 75%;
    }
}
@media screen and (max-width: 320px) {
    .flexslider .slides img {
      max-width: 75%;
    }
}
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} 
html[xmlns] .slides {display: block;} 
* html .slides {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}


/* FlexSlider Default Theme
*********************************/
.flexslider {background: #000; /*border: 4px solid #fff;*/ position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; zoom: 1;}
.flexslider .slides {zoom: 1;}
.flexslider .slides > li {position: relative;}
/* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */
.flex-container {zoom: 1; position: relative; background:#000;}

/* Caption style */
/* IE rgba() hack */
.flex-caption {background:none; -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); zoom: 1;}
.flex-caption {width: 96%; padding: 2%; position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,.3); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); font-size: 14px; line-height: 18px;}

/* Direction Nav */
.flex-direction-nav li a {
  width: 50px; 
  height: 50px; 
  margin: -11px 0 0; 
  display: block; 
  background: url(../images/bg_direction_nav.png) no-repeat 0 0; 
  position: absolute; 
  top: 45%; 
  cursor: pointer; 
  text-indent: -9999px;
}
/*

@media screen and (max-width: 480px) {
    .flex-direction-nav li a {
      margin: -11px 0 0;
    }
}
@media screen and (max-width: 360px) {
    .flex-direction-nav li a {
      margin: -11px 0 0;
    }
}
@media screen and (max-width: 320px) {
    .flex-direction-nav li a {
      margin: -11px 0 0;
    }
}
*/

.flex-direction-nav li a.next {
  /*
  background-position: -55px 0; 
  right: -2px;
  */
  background:url('../images/next.png');
  position:absolute;
  top:473px;
  left:428px;
}
@media screen and (max-width: 480px) {
    .flex-direction-nav li a.next {
      background:url('../images/next.png');
  position:absolute;
      left: 238px;
      top:420px;
    }
}
@media screen and (max-width: 360px) {
    .flex-direction-nav li a.next {
      background:url('../images/next.png');
  position:absolute;
      left: 238px;
      top:420px;
    }
}
@media screen and (max-width: 320px) {
    .flex-direction-nav li a.next {
      background:url('../images/next.png');
  position:absolute;
      left: 238px;
      top:420px;
    }
}

.flex-direction-nav li a.prev {
  /*
  background-position: 0 0; 
  left: -4px;
  */
  background:url('../images/prev.png');
  position:absolute;
  top:473px;
  left:375px;
}
@media screen and (max-width: 480px) {
    .flex-direction-nav li a.prev {
      left: 12px;
      top:420px;
    }
}
@media screen and (max-width: 360px) {
    .flex-direction-nav li a.prev {
      left: 12px;
      top:420px;
    }
}
@media screen and (max-width: 320px) {
    .flex-direction-nav li a.prev { 
      left: 12px;
      top:420px;
    }
}

.flex-direction-nav li a.disabled {opacity: .3; filter:alpha(opacity=30); cursor: default;}

.imagemmm{
  width:560px;
  height:auto;
  position:absolute;
  top:20px;
  left:20px;
  z-index:100000;
}
@media screen and (max-width: 480px) {
    .imagemmm {
      width:470px;
      height:auto;
    }
}
@media screen and (max-width: 360px) {
    .imagemmm {
      width:350px;
      height:auto;
    }
}
@media screen and (max-width: 320px) {
    .imagemmm {
      width:310px;
      height:auto;
    }
}

.diaaa{
  font-family:'Oswald';
  font-size:1.2em;
  color:#d2232a;
  padding-left:7px;
  position:relative;
  top:8px;
  left:376px;
  z-index:1000000;
}
@media screen and (max-width: 480px) {
    .diaaa {
    font-size:1.2em;
  top:402px;
  left:70px;
  width:106px;
}
}
@media screen and (max-width: 360px) {
    .diaaa {
    font-size:1.2em;
  top:402px;
  left:70px;
  width:106px;
}
}
@media screen and (max-width: 320px) {
    .diaaa {
    font-size:1.2em;
  top:402px;
  left:70px;
  width:106px;
}
}

.barraaa{
  width:158px;
  height:10px;
  background-color:#d2232a;
  z-index:100000;  
  margin:0;
  position:absolute;
  top:58px;
  left:384px;
}
@media screen and (max-width: 480px) {
    .barraaa {
    width:158px;
  height:10px;
  top:58px;
  left:384px;
}
}
@media screen and (max-width: 360px) {
    .barraaa {
    width:158px;
  height:10px;
  top:58px;
  left:384px;
}
}
@media screen and (max-width: 320px) {
    .barraaa {
    width:158px;
  height:10px;
  top:58px;
  left:384px;
}
}

body{
  background-color:#fff;
  width:560px;
  height:auto;
}
@media screen and (max-width: 480px) {
    body {
    width:320px;
    height:auto;
}
}

@media screen and (max-width: 360px) {
    body {
    width:320px;
    height:auto;
}
}

@media screen and (max-width: 320px) {
    body {
    width:320px;
    height:auto;
}
}


.textooo{
  font-family:'Oswald';
  font-size:1.1em;
  line-height:1.3em;
  color:#fff;
  z-index:100000;
  position:absolute;
  top:60px;
  left:384px;
  width:165px;
}
@media screen and (max-width: 480px) {
    .textooo {
    font-size:1.1em;
  line-height:1.3em;
  top:450px;
  left:337px;
  width:265px;
}
}
@media screen and (max-width: 360px) {
    .textooo {
    font-size:1.1em;
  line-height:1.3em;
  top:450px;
  left:337px;
  width:265px;
}
}
@media screen and (max-width: 320px) {
    .textooo {
    font-size:1.1em;
  line-height:1.3em;
  top:450px;
  left:337px;
  width:265px;
}
}


.numerooo{
  font-family:'Oswald';
  font-size:1.1em;
  background-color:#d2232a;
  color:#fff;
  z-index:100000;
  position:absolute;
  top:450px;
  left:488px;
  width:40px;
  text-align:center;
  padding:5px;
}
@media screen and (max-width: 480px) {
    .numerooo {
    font-size:1.1em;
    top:400px;
  left:502px;
}
}
@media screen and (max-width: 360px) {
    .numerooo {
    font-size:1.1em;
    top:400px;
  left:502px;
}
}
@media screen and (max-width: 320px) {
    .numerooo {
    font-size:1.1em;
    top:400px;
  left:502px;
}
}

.fundooo{
  z-index:-1;
  margin:0;
}

.titleee{
  font-family:'Oswald';
  font-size:2.2em;
  margin:0;
  width:560px;
  padding-bottom:15px;
  line-height:1.0em;
}
@media screen and (max-width: 480px) {
    .titleee {
    width: 320px;
    height: auto;
    font-size:1.2em;
}
}
@media screen and (max-width: 360px) {
    .titleee {
    width: 320px;
    height: auto;
    font-size:1.2em;
}
}
@media screen and (max-width: 320px) {
    .titleee {
    width: 320px;
    height: auto;
    font-size:1.2em;
}
}

/* Control Nav */
/*

.flex-control-nav {width: 100%; position: absolute; bottom: -30px; text-align: center;}
.flex-control-nav li {margin: 0 0 0 5px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-nav li:first-child {margin: 0;}
.flex-control-nav li a {width: 13px; height: 13px; display: block; background: url(../images/bg_control_nav.png) no-repeat 0 0; cursor: pointer; text-indent: -9999px;}
.flex-control-nav li a:hover {background-position: 0 -13px;}
.flex-control-nav li a.active {background-position: 0 -26px; cursor: default;}

*/