/* Font-face */
@font-face {
font-family: 'Trebuchet MS';
font-style: normal;
font-weight: normal;
src: local('Trebuchet MS'), url('fonts/trebuc.woff') format('woff');
}

/* Definições de estilo */
*{margin: 0; padding: 0; box-sizing: border-box;}

.figcaption{color: #ffffff;}
section.timeline{
  position: relative ;
  float: left;
  background-image: url('fundo_linha_do_tempo.png');
  background-size: contain;
  background-repeat: no-repeat;
  width: 755px;
  height: 430px;
}

section.timeline .navigation{
  float: left;
  position: relative;
  width: 76px;
  height: 93%;
  /*background-color: #000;*/
  margin: 25px 30px;
  color: #fff;
}

section.timeline .navigation dd{
  float: left;
  position: relative;
  /*background-color: #7094BD;*/
  width: 76px;
  height: 76px;
  /*border: 2px solid #395F90;*/
  border-radius: 10px;
  z-index: 0;
  opacity: 0.6;
}

section.timeline .navigation .box{
  float: left;
  position: relative;
  width: 100%;
  height: 94%;
  overflow: hidden;
}

section.timeline .navigation .item_btn{
  cursor: pointer;
}

.arrow_up_content{
  z-index: 9999;
  position: absolute;
  top: 95px;
  left: 250px;
  background-image: url("timeline-down-arrow.png");
  width: 76px;
  height: 20px;

  -moz-transform: scaleY(-1);
  -o-transform: scaleY(-1);
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
  filter: FlipV;
  -ms-filter: "FlipV";
}

.arrow_down_content{
  z-index: 9999;
  position: absolute;
  bottom: 0;
  left: 250px;
  background-image: url("timeline-down-arrow.png");
  width: 76px;
  height: 20px;
}

section.timeline .navigation .arrow_up{
  float: left;
  position: absolute;
  width: 100%;
  height: 20px;
  top: -20px;
  z-index: 3;
  background-image: url("timeline-down-arrow.png");
  cursor: pointer;

  -moz-transform: scaleY(-1);
  -o-transform: scaleY(-1);
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
  filter: FlipV;
  -ms-filter: "FlipV";
}

section.timeline .navigation .arrow_down{
  float: left;
  position: absolute;
  width: 100%;
  height: 20px;
  background-image: url("timeline-down-arrow.png");
  bottom: 3px;
  z-index: 3;
  cursor: pointer;
}

section.timeline .navigation dd[data-toggle=true]{
  /*background-color: #395F90;
  border: 2px solid #5A99C5;*/
  opacity: 1;
  z-index: 2;
}

section.timeline .navigation dd:hover{
  /*background-color: #395F90;
  border: 2px solid #5A99C5;*/
  opacity: 1;
  z-index: 2;
}

section.timeline .navigation dd img{
  float: left;
  width: 100%;
}

section.timeline .content{
  float: left;
  position: relative;
  padding: 25px 0;
  width: 580px;
  height: 100%;
}

section.timeline .content article{
  float: left;
  position: relative;
  width: 100%;
  height: 100%;
  border: 2px solid #3DC8E8;
  background-color: #10739E;
  border-radius: 30px;
}

section.timeline .content article dd{
  float: left;
  position: relative;

  height: 100%;
  padding: 0 10px;
}

section.timeline .content article dd.firstchild{
  text-align:center;
  display: table;
  border: 0;
  width: 40%;
}

section.timeline .content article dd.lastchild{
  width: 60%;
  padding: 25px 10px 0 0;
}

section.timeline .content article dd .texto{
  overflow: hidden;
  height: 66%;
}

section.timeline .content article dd figure{
  width: 100%;
  display: table-cell;
  vertical-align:middle;
  height:75px;
  float: none;
  border: 0;
}

section.timeline .content article dd figure img{
  float: left;
  width: 100%;
  height: auto;
}

section.timeline .content article dd h1{
  font-family: 'Trebuchet MS';
  color: #FFF;
  font-size: 26px;
  font-weight: bold;
  margin: 0px 0 65px 0;
}

section.timeline .content article dd h1 small{
  color: #67D9F4;
  font-size: 26px;
  font-weight: normal;
  width: 100%;
  float: left;
}

section.timeline .content article dd p{
  font-family: 'Trebuchet MS';
  color: #FFF;
  font-size: 16px;
  font-weight: normal;
}