@font-face {
    font-family: 'daxmedium';
    src: url('css/dax-medium-webfont.eot');
    src: url('css/dax-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('css/dax-medium-webfont.woff') format('woff'),
         url('css/dax-medium-webfont.ttf') format('truetype'),
         url('css/dax-medium-webfont.svg#daxmedium') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'daxlight';
    src: url('css/daxwide-light.eot');
    src: url('css/daxwide-light.eot?#iefix') format('embedded-opentype'),
         url('css/daxwide-light.woff') format('woff'),
         url('css/daxwide-light.ttf') format('truetype'),
         url('css/daxwide-light.svg#daxlight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'daxbold';
    src: url('css/dax-bold-webfont.eot');
    src: url('css/dax-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('css/dax-bold-webfont.woff') format('woff'),
         url('css/dax-bold-webfont.ttf') format('truetype'),
         url('css/dax-bold-webfont.svg#daxbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'calibribold';
    src: url('css/calibrib-webfont.eot');
    src: url('css/calibrib-webfont.eot?#iefix') format('embedded-opentype'),
         url('css/calibrib-webfont.woff') format('woff'),
         url('css/calibrib-webfont.ttf') format('truetype'),
         url('css/calibrib-webfont.svg#calibribold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'calibrilight';
    src: url('css/calibril-webfont.eot');
    src: url('css/calibril-webfont.eot?#iefix') format('embedded-opentype'),
         url('css/calibril-webfont.woff') format('woff'),
         url('css/calibril-webfont.ttf') format('truetype'),
         url('css/calibril-webfont.svg#calibrilight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'daxwide';
    src: url('css/daxwide-light.eot');
    src: url('css/daxwide-light.eot?#iefix') format('embedded-opentype'),
         url('css/daxwide-light.woff') format('woff'),
         url('css/daxwide-light.ttf') format('truetype'),
         url('css/daxwide-light.svg#daxwide_lightregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

.clearfix:before,
.clearfix:after {
   content: " ";
   display: table;
}

.clearfix:after, .clear {
   clear: both;
}

.clearfix {
   *zoom: 1;
}

*, *:before, *:after {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

body, html{
	font-family: calibrilight, verdana, helvetica, sans-serif;
	font-weight: lighter;
}

h2{
	font-family: calibribold, verdana, helvetica, sans-serif;
	font-weight: lighter;
	font-size: 28px;
}

ul{
	list-style: none;
  margin: 0;
  padding: 0;
}

*:focus
{
    outline: none;
}

a {
  color:inherit;
  text-decoration:none;
}

a:visited, a:link {
  color:inherit
}

fieldset{
  border: none;
  margin: 0;
  padding: 0;
}

.m-l-no{
	margin-left: 0 !important;
}

hr{
	clear: both;
	border: none;
}

#timeline{
	background: url(images/bg.jpg) no-repeat center top #000;
	width: 100%;
	height: 100%;
	min-width: 1178px;
}

/* Menu */
.navbar{
	width: 1000px;
	min-width: 1000px;
	margin: 0 auto;
	color: white;
	text-transform: uppercase;
	padding: 20px 0 0 0;
	z-index: 9999;
	top: 0;
	font: 13px verdana, helvetica, sans-serif;
}

.navitens{
	overflow: hidden;
	width: 620px;
	margin: 0 auto;
	height: 25px;
}

.navitem{
	float: left;
	margin-left: 20px;
}

.navitem:hover{
	float: left;
	margin-left: 20px;
	padding-bottom: 5px;
	border-bottom: 2px solid #ffcb08;
}

.item-ativo{
	padding-bottom: 5px;
	border-bottom: 2px solid #ffcb08;
}

.logo{
	width: 373px;
	height: 69px;
	background: url(images/assets.png) left top no-repeat;
	margin: 30px auto 0 auto;
}



/* Linha */
.frame {
	width: 1178px;
	height: 520px;
	padding: 0;
	position: absolute;
	top: 40px;
	left: 0; right: 0; margin: 120px auto 0 auto;
}
.frame .slidee { margin: 0; padding: 0; height: 100%; list-style: none; }
.frame .slidee li {
	float: left;
	margin: 0;
	padding: 0;
	width: 1178px;
	height: 100%;
	background:url(images/linha.png) repeat-x center 336px;
}

.bullet{
	width: 134px;
	height: 153px;
	background: url(images/assets.png) -400px 0 no-repeat;
	float: left;
	margin-top: 330px;
	position: relative;
	margin-left: 100px;
	cursor: pointer;
}

.one{
	margin-top: 300px;
}

.two{
	margin-top: 310px;
}

.three{
	margin-top: 295px;
}

.four{
	margin-top: 325px;
}

.intersect{
	margin-top: 300px;
}

.bullet:first-child{
	margin-left: -65px;
}

.balao{
	width: 233px;
	height: 284px;
	background: url(images/balao.png) center no-repeat;
	display: inline-block;
	position: absolute;
	bottom: 120px;
	left: -47px;
	display: none;
	text-align: center;
	padding-top: 110px;
	color: white;
}

.ativo{
	display: block;
}

.balao a{
	display: block;
}


.bullet:hover .balao{
	/* display: block; */
}

.prevtime{
	background: url(images/mask_left.png) no-repeat center;
	width: 180px;
	height: 164px;
	position: absolute;
	top: 300px;
	left: 0;
	text-indent: -9999px;
	cursor: pointer;
}

.nexttime{
	background: url(images/mask_right.png) no-repeat center;
	width: 180px;
	height: 164px;
	position: absolute;
	top: 300px;
	right: 0;
	text-indent: -9999px;
	cursor: pointer;
}

.year{
	color: white;
	font: 30px daxbold, verdana, helvetica, sans-serif;
	text-align: center;
	width: 100%;
	position: absolute;
	bottom: 0;
}


/* Lightbox */

.lightbox{
	background: #fff;
	width: 100%;
	min-width: 1178px;
	height: auto;
	overflow: hidden;
	position: absolute;
	top: 0;
}

.header{
	background: url(images/bg_header.jpg) center top repeat-x;
}

.lightbox-nav{
	width: 1000px;
	margin: 0 auto;
	overflow: hidden;
}

.ano{
	float: left;
	background: url(images/assets.png) no-repeat -539px 0;
	width: 98px;
	height: 98px;
	text-align: center;
	font: bold 36px daxbold, verdana, helvetica, sans-serif;
	color: #fff;
	padding: 30px 0 0 0;
	font-weight: bold;
}

.close{
	float: right;
	background: url(images/assets.png) no-repeat -644px 0;
	text-indent: -9999px;
	width: 98px;
	height: 34px;
	text-align: center;
	cursor: pointer;
	margin: 50px 0 0 0;
}

#uniform-tempo{
	margin-top: 55px;
}

div.selector span{
	text-shadow: none !important;
	color: white !important;
}


.select{
	float: left;
	margin-left: 50px;
}



 .select select {
	-webkit-appearance: none;
	-moz-appearance:none;
	appearance: none;
	background: url(images/arrow.png) no-repeat right #0a1438;
	width: 238px;
	text-indent: 0.9px;
 	text-overflow: "";
	padding: 5px 25px 5px 5px;
	font-size: 16px;
	line-height: 1;
	border: 0;
	border-radius: 0;
	height: 34px;
	overflow: hidden;
	cursor: pointer;
	outline: none;
	display: inline-block;
	margin: 50px 0 0 10px;
}



select::-ms-expand { display: none; }


@media screen and (-webkit-min-device-pixel-ratio:0) {
    select {padding-right:18px}
}

.select label{
  	color: #0073ae;
  	font: lighter 18px daxmedium, verdana, helvetica, sans-serif;
  	display: inline-block;
  	vertical-align: top;
	margin-top: 57px;
}

.lightbox-content{
	width: 1000px;
	margin: 80px auto 80px auto;
	padding: 0 120px 0 100px;
	position: relative;
	min-height: 475px;
}

.lightbox-content .horizontal{
	margin-top: 10px;
}

.legenda {
	width: 100%;
	padding: 10px;
	color: white;
	background: #0073ae;
	display: block;
	font-size: 12px;
	margin: -10px 0 15px 0;
}


.lightbox-content .vertical{
	float: left;
	margin-right: 40px;
	margin-top: 10px;
	margin-bottom: 100px;
	width: 320px;
}

.lightbox-content h2{
	font-size: 28px;
	font-weight: bold;
	margin-top: 0;
	color: #0073ae;
}

.lightbox-content p{
	font-size: 16px;
	margin-top: 20px;
	line-height: 24px;
	color: #666666;
}


.banner { position: relative; overflow: auto; min-height: 700px !important; width: 100% !important; }
    .banner li { list-style: none; min-width: 780px; }
        .banner ul li { float: left; }

.prev{
	width: 52px;
	height: 52px;
	background: url(images/assets.png) no-repeat 0 -72px;
	display: block;
	text-indent: -9999px;
	position: absolute;
	left: 0;
	top: 205px;
}

.next{
	width: 52px;
	height: 52px;
	background: url(images/assets.png) no-repeat -53px -72px;
	text-indent: -9999px;
	display: block;
	position: absolute;
	right:0;
	top: 205px;
}

.icon{
	height: 47px;
	float: left;
	margin-top: 43px;
	background: url(images/assets.png) no-repeat;
	font: lighter 34px daxlight, verdana, helvetica, sans-serif;
	color: #fff;
	padding: 5px 0 0 60px;
}

.quem{
	background-position: 0 -128px;
}

/* Quem somos */

.quem-somos, .ccee-hoje{
	padding: 0;	
	overflow: hidden;
}

.quem-somos img{
	float: left;
	padding: 0 0 10px 0;
	margin: 0;
}

.quem-somos .sede{
	overflow: hidden;
	width: 735px;
	float: left;
}

.quem-somos .legenda{
	padding: 12px 10px;
}

.col{
	width: 490px;
	float: left;
	margin-left: 20px;
	margin-top: 20px;
	overflow: hidden;
}

/* CCEE Hoje */

.hoje{
	margin-left: 20px !important;
}

.ccee-hoje{
	margin-top: 40px;
}

.ccee-hoje img{
	padding: 0;
	margin: 30px 0 20px 0;
}

.graficos{
	clear: both;
	overflow: hidden;
	width: 100%;
	height: 50px;
	background: #1d6cae;
	border-bottom: 5px solid #115095;
	margin-top: 40px;
}

.graficos li{
	float: left;
	padding: 10px 38px;
	color: white;
	text-transform: uppercase;
	font: bold 18px calibribold, verdana, helvetica, sans-serif;
	cursor: pointer;
}

.graficos li:hover{
	background: #15599d;
}

/* Narrativas */

.narrativas{
	float: right;
}

.narrativa{
	background-position: 0 -222px;
}

.col-narrativa{
	width: 380px;
	float: left;
	margin-left: 20px;
	margin-top: 0;
	overflow: hidden;
}

.col-narrativa .start{
	margin-top: 20px;
}

.col-narrativa img{
	margin:30px 0 0 0;
}

.col-narrativa .legenda{
	color: white;
	text-align: left;
	padding: 10px;
}

.col-narrativa blockquote{
	padding: 0;
	margin: 0;
	color: #0073ae;
	font: bold 22px calibribold, verdana, helvetica, sans-serif;
}

.col-narrativa span{
	display: block;
	width: 100%;
	text-align: right;
	color: #0073ae;
	font-size: 14px;
	padding: 10px 0;
}

/* Galerias */

.galeria{
	background-position: 0 -269px;
}

.galerias{
	padding: 0;
}

/* ---- isotope ---- */

.isotope {
	width: 100%;
	margin-left: -8px;
}

/* clear fix */
.isotope:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .element-item ---- */

.element-item {
  position: relative;
  float: left;
  width: 245px;
  height: 245px;
  margin-left: 5px;
  margin-bottom: 5px;
  background: #888;
  color: #262524;
  overflow: hidden;
}

.element-item img{
  width: 245px;
  height: 245px;
}

.double{
	width: 495px;
	height: 495px;
}

.double img{
	width: 495px;
	height: 495px;
}

.element-item > * {
  margin: 0;
  padding: 0;
}

.element-item .name {
  position: absolute;

  left: 10px;
  top: 60px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: normal;
}

.element-item .symbol {
  position: absolute;
  left: 10px;
  top: 0px;
  font-size: 42px;
  font-weight: bold;
  color: white;
}

.element-item .number {
  position: absolute;
  right: 8px;
  top: 5px;
}

.element-item .weight {
  position: absolute;
  left: 10px;
  top: 76px;
  font-size: 12px;
}

.element-item.alkali          { background: #F00; background: hsl(   0, 100%, 50%); }
.element-item.alkaline-earth  { background: #F80; background: hsl(  36, 100%, 50%); }
.element-item.lanthanoid      { background: #FF0; background: hsl(  72, 100%, 50%); }
.element-item.actinoid        { background: #0F0; background: hsl( 108, 100%, 50%); }
.element-item.transition      { background: #0F8; background: hsl( 144, 100%, 50%); }
.element-item.post-transition { background: #0FF; background: hsl( 180, 100%, 50%); }
.element-item.metalloid       { background: #08F; background: hsl( 216, 100%, 50%); }
.element-item.diatomic        { background: #00F; background: hsl( 252, 100%, 50%); }
.element-item.halogen         { background: #F0F; background: hsl( 288, 100%, 50%); }
.element-item.noble-gas       { background: #F08; background: hsl( 324, 100%, 50%); }

.play{
	background: url(images/video-play.png) center no-repeat;
	position: absolute;
	width: 191px;
	height: 191px;
	display: block;
	top: 50%;
	left: 50%;
	margin: -95px 0 0 -95px;
}

.depoimentos{
	background-position: 0 -316px;
}

.depoente{
	width: 100%;
	text-align: center;
}

.bdepoimentos{
	min-height: 250px !important;
}