div.base {
	  _background-image: url(/_img/empresa-perfil.jpg);
	  background-repeat: no-repeat;
	  background-position: center 65px;
	  padding-bottom:75px;
}

div.base p { line-height: 1.8em!important; }

div.base section { overflow:hidden; position:relative }

div.base section.intro span.left{ 
	width:610px;
	height:350px;
	display:block;
}

div.video {
	width:557px;
	height:313px;
	background-color: var(--blue);
	background-image: url(/_img/video.jpg);
	background-repeat: no-repeat;
	position:absolute;
	top:0;
	left:0;
}

div.base section.intro div.right{ 
	width:210px;
	height:auto
}

div.base section.intro {
	margin-top:50px
}

div.base section.intro div.right{ 
	width:595px;
}

div.base section.intro p {
	line-height: 2em;
	padding-right:50px
}

div.base section p strong{
	margin-top:-3px; line-height: inherit; 
}

div.base section.padrao{ margin-top:75px;  }

div.base section.padrao p{ padding-right: 50px;  }

div.base section.padrao div.img{ 
	height: 440px;
	background-image: url(/_img/estrategia.jpg);
	background-repeat: no-repeat;
	background-position: center 0;
    clear:both; 
	margin-top:120px!important;
}

div.base.en section.padrao div.img{ 
	background-image: url(/en/_img/estrategia.jpg);
}

section.timeline header {
  position: relative;
  width: 1225px;
  margin:0 auto
}

section.timeline header span.tip {
  position: absolute;
  background-color: var(--blue-avg);
  color:white;
  padding: 10px 30px;
  font-size: 14px; 
	left:190px;
  top:0px;
  display:none;
}

section.timeline:hover header span.tip {
  display:block;
}

section.timeline .time {
  width: 100%;
  overflow: auto;
  height: 680px;
  margin-top: 18px;

}

section.timeline .time .in {
  padding-left: 18px;
  height: 610px!important;
  overflow: hidden;
}

section.timeline .time .in .ruler {
  width:98%;
  position: absolute;
  height: 4px;
  background-color: #777;
  top:47%
}

section.timeline .time .in .ruler:before {
  content: '';
  width:18px;
  position: absolute;
  height: 18px;
  background-color: #777;
  top:-7px;
  left:0
}

section.timeline .time .in .ruler:after {
  content: '';
  width:18px;
  position: absolute;
  height: 18px;
  background-color: #777;
  top:-7px;
  right:0
}

section.timeline .time .in .tm {
  width:150px; float:left;
  height: 625px;
  position: relative;
}

section.timeline .time .in .tm a.in {
  width: 200px;
	display: block;
  position: absolute;
  left:0;
  height: 300px!important;
  padding: 0;
  bottom:315px;
	overflow: visible
}

section.timeline .time .in .tm:hover a.in {
	 background-color: var(--blue-lgt);
	 text-decoration: none
}

section.timeline .time .in .tm:first-child .in {
  margin-left:0
}

section.timeline .time .in .tm:nth-child(even) .in{
  bottom:0;
}

section.timeline .time .in .tm span {
   background-color: var(--blue-avg);
   color:white;
   padding:5px 10px;
   display: block;
   margin:10px auto;
  font-size: 16px;
  width: 90px;
	position: absolute;
	z-index: 1;
	left: 50%;
	margin-left: -45px;
	bottom:40px
}



section.timeline .time .in .tm span:after {
	 content: '';
   background-color: inherit;
	 position: absolute;
	width:2px;
	height: 25px;
	bottom:-25px;
	left:50%;
	margin-left:-2px
}

section.timeline .time .in .tm:nth-child(even) span{
  bottom:auto;
	top:-19px;
}

body section.timeline .time .in .tm:nth-child(even) .img{
  margin-top:35px!important;
}

section.timeline .time .in .tm:nth-child(even) span:after{
  bottom:auto;
	top:-25px;
}


section.timeline .time .in .tm:nth-child(10n + 1) .in span {
	background-color: rgb(0, 166, 81);
}

section.timeline .time .in .tm:nth-child(10n + 2) .in span {
	background-color: rgb(80, 184, 72);
}

section.timeline .time .in .tm:nth-child(10n + 3) .in span {
	background-color: rgb(11, 110, 178);
}

section.timeline .time .in .tm:nth-child(10n + 4) .in span {
	background-color: rgb(153, 188, 203);
}

section.timeline .time .in .tm:nth-child(10n + 5) .in span {
	background-color: rgb(131, 139, 104);
}

section.timeline .time .in .tm:nth-child(10n + 6) .in span {
	background-color: rgb(255, 194 ,14);
}

section.timeline .time .in .tm:nth-child(10n + 7) .in span {
	background-color: rgb(203, 219, 42);
}

section.timeline .time .in .tm:nth-child(10n + 8) .in span {
	background-color: rgb(0, 174, 239);
}

section.timeline .time .in .tm:nth-child(10n + 9) .in span {
	background-color: orange;
}

section.timeline .time .in .tm:nth-child(10n + 10) .in span {
	background-color: grey;
}

section.timeline .time .in .tm .img {
  width:160px;
  height: 120px;
  margin:15px auto!important;
  margin-bottom:7px!important;
  background-image: none;
  background-size:100%;
  background-color: #eee
}

section.timeline .time .in .tm p {
  font-size: 12px;
  line-height: 130%!important;
  text-align: center;
  padding: 0
}

/* historia html ///////////////////////////////////////////////////////////////////////// */

/* div info ///////////////////////////////////////////////////////////////////////// */
  div.info {
		 background-color: #ccc;
		 width:1200px!important;;
		 height:auto;
		 top:0;
		 position: absolute;
		 display:none;
		 padding:0;
		left:50%!important;
		margin-left:-600px!important;
		z-index: 1;
		border: 2px solid white;
		box-shadow: 20px 20px 0 rgba(0,0,0,.1)!important;
	}

 div.info.wimg {
		 width:100%;
		left:0;
		margin:0;
	}

div.info.wimg  p{
		width:340px; float:right
	}

div.info img { display:none }


  div.info div.in {
		padding:25px; padding-bottom:75px; width:100%;
	}


 div.info.wimg div.in {
		padding:25px;
	}

  div.info div.in * {
	  color:white;
	}
	
	div.info header {
	  margin-bottom:5px;
	  overflow: hidden;
	}
	
	div.info header *{
	  float:left; margin:0
	}
	
	div#info header h3{
	  float:left;
	  font-size:6em;
	  margin-top:-10px;
	  margin-right:15px
	}
	
	div.info header h4{
	  float:left;
	  width:480px;
	  margin-top: 0;
	  font-size:2em;
		line-height: 1.5em;
		letter-spacing: 0.09em
	}
	
	div.info div#img {
	  float:left;
	  margin-right: 25px;
		width:790px; height:550px;
		display:block;
		background-color: white;
		background-repeat: no-repeat;
		background-position: center
	}
	
	div.info p {
	  	line-height: 1.7em;
	 	padding-right:10px;
		font-size: 2.2em!important;
	}
	
	div.info button.close {
	  position: absolute;
	  top:0px;
	  right:0px;
	  font-weight: bolder;
	  font-size: 2.5em;
	  background-color: transparent;
	  font-family: 'open-sans-bld'
	}

@media screen and (max-width: 660px) {	
	div.base section.intro span.left{ 
		width:100%;
		height:auto;
	}

	div.video {
		width:100%;
		height:auto;
		background-color: transparent;
		position:relative;
	}
	
	div.base section.intro {
		padding:0;
	}
	
	div.base section.intro div.left{ 
		width:100%;
		height:auto;
	}
	
	div.video {
		width:100%;
		height:203px;
		background-size: 100%;
		float:none;
	}
	
	div.base section.intro {
		margin-top:0px
	}
	
	div.base section.intro div.right{ 
		width:100%;
		height:auto
	}

	div.base section.intro p {
		line-height: 2em;
		padding:10px 20px;
		margin-bottom:25px;
		
		font-size: 2em;
	}
	
	div.base section p strong{
		display:inline;
	}
	
	div.base section.padrao{ 
		  margin-top:10px;
		  padding-bottom: 50px!important;
	
	}

	div.base section.padrao p{ 
		padding: 10px 20px;
		font-size: 2em;
	}

	div.base section.padrao div.img{ 
	   height: 300px;
	   background-size:100%;   
	}

	div.base section.padrao div.left{ 
		padding:0;
		width:100%;
	}
	
	div.base section.padrao div.left h3{ 
		padding:0; margin:0;
	}
		
	section.timeline header {
  width: 100%;
}

section.timeline header span.tip {
  position: relative;
  top:10px;
	left:0;
  display:block;
}

section.timeline .time {
  height: auto;

}

section.timeline .time .in {
  padding-left: 50px;
  height: auto!important;
  overflow: hidden;
}

section.timeline .time .in .ruler {
  width: 4px;
	height: 96%;
  position: absolute;
  height: 98.5%;
  background-color: #777;
  top:30px;
	left:20px
}

section.timeline .time .in .ruler:before {
  top:0;
  left:-7px
}

section.timeline .time .in .ruler:after {
  width:18px;
	top: auto;
  bottom: 0;
  left:-7px
}

section.timeline .time .in .tm {
  width:100%; float:none;
  height: auto;
  position: relative;
}

section.timeline .time .in .tm a.in {
  position: relative;
  height: auto!important;
  padding: 10px 0;
  bottom:auto;
	overflow: visible
}

	section.timeline .time .in .tm:hover a.in {
	 background-color: transparent;
}
	
	section.timeline .time .in .tm:nth-child(even) .in{
  bottom:auto;
}

section.timeline .time .in .tm span {
  margin:10px auto;
	position: relative;
	left: auto;	
	bottom:auto
}
section.timeline .time .in .tm span:after {
	width:85px;
	height: 2px;
	bottom:15px;
	left:-85px;
	margin-left:auto
}

section.timeline .time .in .tm:nth-child(even) span{
  bottom:auto;
	top:auto;
}

section.timeline .time .in .tm:nth-child(even) span:after{
  bottom:auto;
	top:15px;
}

	div.info  {
		height:100%;
		width:100%!important;
		margin:0!important;
		left:0!important;
		position: fixed;
		overflow: auto
	}

	div.info header {
	  margin:10px;
	}
	
	div.info button.close {
		width: auto
	}
	
	div.info header *{
	  float:none;
	}
	
	div.info div#img {
	  float:none;
	  margin-right: 0;
		width:100%; height:198px;
		background-size:100%;
	}
	
	div.info p {
	 	padding:0px;
		padding-left: 5px;
	}
}