/*----------------------------------------------------------------------------------------------------
 Slides
 
@font-face{font-family:Vtks;src:url("Vtks.eot")}
@font-face{font-family:Vtks;src:url("Vtks.ttf")}
----------------------------------------------------------------------------------------------------*/

@font-face{font-family: "Comfortaa"; src:url("./Comfortaa.eot")}
@font-face{font-family: "Comfortaa"; src:url("./Comfortaa.ttf") format("truetype"); font-weight: normal; font-style: normal;}

@font-face{font-family: "Tw Cen MT Condensed Extra Bold"; src:url("./Tw_Cen_MT_Condensed_Extra_Bold.eot")}
@font-face{font-family: "Tw Cen MT Condensed Extra Bold"; src:url("./Tw_Cen_MT_Condensed_Extra_Bold.ttf") format("truetype"); }

@font-face{font-family: "Tw Cen MT Condensed"; src:url("./Tw_Cen_MT_Condensed.eot")}
@font-face{font-family: "Tw Cen MT Condensed"; src:url("./Tw_Cen_MT_Condensed.ttf") format("truetype"); }

.light	{	font-family:"Tw Cen MT Condensed Extra Bold" !important; font-size:40px !important; font-weight:bold; }
.slogan	{  font-weight:normal;}
	
.pin {
	position: absolute;
	width: 313px;
	height: 209px;
	top: 10px;
	right: 25px;;
	padding: 30px 40px 0 40px;	
	line-height: 32pt;
	font-family:"Tw Cen MT Condensed" !important; 
	font-size:46px !important; 
	font-weight:normal;
	text-transform: uppercase;	} 

.slogan-blue {
	color: #ffffff;
	background: url(../imagens/pin-slogan-blue.png) no-repeat;	}


/*----------------------------------------------------------------------------------------------------
 Botões
----------------------------------------------------------------------------------------------------*/

.btn-go {
	float: left;
	color: #FFFFFF !important;
	margin: 20px 0 0;
	padding: 5px 27px 5px 10px;
	border-radius: 4px;
	background: #00aced url(../imagens/seta-dir.png) right center no-repeat;	}
	
	.btn-go:hover{
		background: #0298d1 url(../imagens/seta-dir.png) right center no-repeat;	}
	
	a .btn-go, .btn-go a {
		color: #ffffff !important;
		text-decoration:none;	}
	


/*----------------------------------------------------------------------------------------------------
 Basic
----------------------------------------------------------------------------------------------------*/

.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;	}
	


.hide {	display: none;	}
.left {	float: left;}
.right {float: right;}



/*----------------------------------------------------------------------------------------------------
 Slider
----------------------------------------------------------------------------------------------------*/
#sliderSegmentos {
	position: relative;
	width:896px;
	height: 521px;
	margin-bottom: 50px;
	margin-top: 20px;
	}

#sliderSegmentos .canvas {
	z-index: 2; }

#sliderSegmentos #slideBg {
	position: absolute;
	top: 0; left: 40px;
	width: 100%;
	height: 521px;
	text-align: center;
	overflow: hidden;	
	z-index: 0; }

#sliderSegmentos #slideBg #img1,
#sliderSegmentos #slideBg #img2 {
	float: left;
	width:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:10;	}
	
#sliderSegmentos #slideBg #img1 {
	z-index:20;	}

#sliderSegmentos .segmentos {
	position: absolute;
	top: 388px;	
	left: 12px; }

#sliderSegmentos .segmentos img {
	float: left;
	position: absolute;
	text-align: center;
	width:210px;	}

.canvas {
	position: relative;
	width: 940px;
	margin: 0 auto;
	padding: 0;
	text-align: left;	}


.grid2 {
	display: inline;
	float: left;
	position: relative;
	margin: 0 0 0 24px;
	padding: 0 0 0 0;
	min-height: 20px;
	width: 160px;	}

.grid2 p { width:135px; margin-top:4px; font-family: "Calibri"; font-size:15px;   }

.title { width:180px; font-family: "Calibri"; font-size:26px;   }		

#sliderSegmentos .segmentos .grid2 {
	z-index: auto;	}

#sliderSegmentos .segmentos .grid2:hover {
	z-index: 5;	}

#sliderSegmentos .segmentos .grid2 .icone {
	/*float: left;*/
	width: 110px;
	height: 95px;
	position: relative;
	clear: both;	}
	#sliderSegmentos .segmentos .hoverBox .icone {
		width: 100%;	}
	
#sliderSegmentos .segmentos .grid2 .icone img {
	position: absolute; 
	clip:rect(0px 90px 95px 0px);	}
#sliderSegmentos .segmentos .hoverBox .icone img {
	clip:rect(auto auto auto auto);	}

#sliderSegmentos .segmentos .hoverBox {
	display: none;
	float: left;
	width: 300px;
	height: 256px;
	padding: 20px;
	position: absolute;
	top: -24px;
	/*left: -24px;*/
	/*border-radius: 5px;*/	
	border: 4px solid #FFFFFF;
	background-color: #f2f2f2;
	
	box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, .5);
	
	z-index: 1;	}

#sliderSegmentos .segmentos .hoverBox p { width: 100%; }
#sliderSegmentos .segmentos .hoverBox.right { float: right; right: -24px;	}	
#sliderSegmentos .segmentos .hoverBox.left { float: left; left: -24px;	}

#sliderSegmentos .segmentos a { color:inherit; }
	

#sliderSegmentos .segmentos .hoverBox .btn-go {
	position: absolute;
	right: 20px;
	bottom: 20px; }