/*
	Agência: DA-DPA
	Layout: 
	Front-End: Rafael Freire (contato@rafaelfreire.com.br)
	Back-End: Rojonas Egon
*/

@import url("jscrollpane.css");
@import url("reset.css");
@import url("stylesheet.css");
@import url("component.css");
@import url("frontmodel.css");


/*Classes*/
.background-black-9{ background: rgba(0,0,0,0.9); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#90000000, endColorstr=#90000000)"; }
.background-black-8{ background: rgba(0,0,0,0.8); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000, endColorstr=#80000000)"; }
.background-black-85{ background: rgba(0,0,0,0.85); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#85000000, endColorstr=#85000000)"; }
.background-red-9{ background: rgba(128,0,0,0.8); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#90800000, endColorstr=#90800000)"; }
.background-white-1{ background: rgba(255,255,255,0.1); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#10ffffff, endColorstr=#10ffffff)"; }
.box-black-9{ float: left; width: 100%; padding: 8px 0; background: rgba(0,0,0,0.9); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; }
.space-defaul{ padding: 15px; }
.mobile-view{ display: none; }
.scroll-pane,
.pages-content{ outline: none; }
.clear{ clear: both; }
/*Align vertical*/
.table { width: 100%; height: 100%; display: table; }
.table .cell { vertical-align: middle; display: table-cell; _position: absolute; _top: 50%; }
.table .cell .align{ _position: relative; _top: -50%; }
.table .cell .align.horizontal{ margin: auto; }

#progress{ position: absolute; top: 0; z-index: 99; }


/*Base*/
/*----------------------------------*/
body,html{ width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; }
.container-fluid{ width: 100%; height: 100%; overflow: hidden; }
.content{ position: absolute; top: 0; left: 0; z-index: 0; height: 100%; }


/*Coluna direita*/
aside{ float: right; top: 0; right: 0; height: 45%; clear: both; }

aside nav.main{ position: relative; float: left; width: 100%; height: 100%; }
aside nav.main ul{ position: absolute; display: block; bottom: 46px; width: 100%; }
aside nav.main ul li{ float: left; width: 100%; margin: 1px 0; }
aside nav.main ul li a{ font-family: "antoniolight"; font-size: 14px; text-transform: uppercase; letter-spacing: 2px; }
/*aside nav.main ul li a.active-main{ color: red; }*/
aside nav.main ul li a span{ font-size: 12px; }
aside nav.main ul li ul{ position: inherit; margin: 0 0 0 8px; width: auto; }
aside nav.main ul li ul a:hover,
aside nav.main ul li ul a.active{ color: #aeaeae; }

.dl-menuwrapper ul li a.submenu-seta{ background: url(../img/submenu-seta-next.png) 96% 20px no-repeat; }
.dl-menuwrapper ul li a.submenu-seta:hover{ background: rgba(255,248,213,0.1) url(../img/submenu-seta-next.png) 96% 20px no-repeat; }


aside .redes { position: absolute; bottom: 0; width: 100%; }
aside .redes a{ text-align: center; display: block; float: left; width: 22px; margin: 0 4px; font-size: 18px; font-family: 'fontawesome'; }
aside .redes a img{ height: 15px; }

aside .informacoes{ position: relative; float: left; width: 100%; height: 100%; margin-top: 0px; }
aside .informacoes h5{ float: left; padding: 0 0 0 18px; margin: 6px 15px; background: url(../img/informacoes-tit.jpg) center left no-repeat; cursor: pointer; }
aside .informacoes .banner-thumb{ float: left; width: 100%; }
aside .informacoes .banner-thumb img{ display: block; float: left; width: 25%; height: 60px; cursor: pointer; opacity: 0.3 }
aside .informacoes .banner-thumb img:hover{ opacity: 0.5; }
aside .informacoes .banner-thumb img.cycle-pager-active{ opacity: 1; }

.centro{ position: relative; z-index: 999; float: right; width: 100%; height: 80px; }
.centro h1.logo{ display: block; width: 180px; height: 100%; position: absolute; left: 0; z-index: 999; margin: 0; background: rgba(224,1,9,0.9) url(../img/logo.png) center no-repeat; clear: both; cursor: pointer; }
.centro h1.logo2{ display: none; width: 100%; height: 100%; z-index: 999; margin: 0; background: rgba(128,0,0,0.9) url(../img/logo.png) center no-repeat; clear: both; cursor: pointer; }



/*Banner*/
.banner{ display: block; position: absolute !important; top: 0; z-index: -2; width: 100%; height: 100% !important; overflow: hidden; }
.banner .cycle-slideshow { height: 100%; }
.banner img{ position: absolute; height: 100%; top: 0; left: 50% !important; margin-left: -50%; }

.centro{ clear: both; }
.centro .banner-box{ position: relative; float: right; width: 40%; height: 100%; }
.centro .banner-box .banner-tit{ float: right; width: 78%; height: 100%; background: rgba(224,1,9,0.9); }
.centro .banner-box .banner-tit h3{ position: absolute; margin: 10px 15px 5px 15px; line-height: 120%;  }
.centro .banner-box .banner-legend{ width: 96%; margin: 14px 2%; line-height: 120%; font-size: 22px; font-family: "antoniolight"; color: white; text-rendering: optimizelegibility; text-transform: uppercase; }
.centro .banner-box .banner-nav{ float: right; width: 22%; height: 100%; }
.centro .banner-box .banner-nav a{ display: block; float: left; width: 100%; height: 50%; }
.centro .banner-box .banner-nav a#banner-prev{ background: rgba(224,1,9,0.7) url(../img/banner-nav-up.png) center no-repeat; }
.centro .banner-box .banner-nav a#banner-next{ background: rgba(224,1,9,0.7) url(../img/banner-nav-down.png) center no-repeat; }
.centro .banner-box .banner-nav a#banner-prev:hover{ background: rgba(224,1,9,0.8) url(../img/banner-nav-up.png) center no-repeat; cursor: pointer; }
.centro .banner-box .banner-nav a#banner-next:hover{ background: rgba(224,1,9,0.8) url(../img/banner-nav-down.png) center no-repeat; cursor: pointer; }

aside .informacoes .banner-info{ display: none; float: left; width: 100%; height: 100%; background: rgba(255,255,255,0.7); }
aside .informacoes .banner-info p{ font-size: 12px; padding: 15px; font-family: Tahoma; letter-spacing: 0.5px; }


#banner-list{ display: none; width: 100%; float: left; }
#banner-list ul li{ display: block; width: 100%; float: left; margin: 20px 0; }
#banner-list ul li img{ width: 100%; }
#banner-list ul li h2,
#banner-list ul li h3{ width: 96%; float: left; margin-left: 2%; margin-bottom: 0; color: #000; }
#banner-list ul li h3{ color: #ccc }
#banner-list ul li p{ width: 96%; float: left; margin-left: 2% }



/*Pages*/
/*------------------------------------*/
.pages .pages-content{ display: block; float: left; }

.pages-content{ width: 100%; height: 100%; overflow: hidden; }
.pages-content .jspVerticalBar{ width: 5px; opacity: 0.3; }
.pages-content .jspTrack{ background: #f0f0f0; }
.pages-content .jspDrag{ background: #aeaeae; }

/*Empresa - DA-DPA*/
/* #empresa-dpa{ position: relative; display: none; width: 45%; top: 0; bottom: 0; height: 100%; margin-left: 180px; background: rgba(255,255,255,0.9); } */
#empresa-dpa{ position: relative; display: none; width: 45%; height: 560px; margin-left: 180px; background: rgba(255,255,255,0.9); }
#empresa-dpa .pages-content{ position: absolute; width: auto; height: auto; min-height: 345px; top: 30px; right: 30px; left: 30px; bottom: 30px; }
#empresa-dpa .pages-content p{ width: 95%; margin-bottom: 8px; }
#empresa-dpa .pages-content h2{ color: #aeaeae; margin: 0 0 20px 0; }
#empresa-dpa .pages-content h2 span{ color: #cd202c !important; }

/*Empresa - Área de atuação*/
#empresa-area{ position: relative; display: none; width: 45%; height: 560px; margin-left: 180px; background: rgba(94,94,94,0.9); }
#empresa-area .pages-content{ position: absolute; width: auto; height: auto; min-height: 345px; top: 30px; right: 30px; left: 30px; bottom: 30px; }
#empresa-area .pages-content p{ width: 95%; color: #fff; margin-bottom: 8px; }
#empresa-area .pages-content h2{ color: #fff; margin: 0 0 20px 0; }
#empresa-area .pages-content h2 span{ color: #aeaeae !important; }

/*Empresa - Equipe*/
#empresa-equipe{ position: relative; display: none; width: 45%; height: 560px; margin-left: 180px; background: rgba(0,0,0,0.9); }
#empresa-equipe .pages-content{ position: absolute; width: auto; height: auto; min-height: 345px; top: 30px; right: 30px; left: 30px; bottom: 30px; }
#empresa-equipe .pages-content p{ width: 95%; color: #fff; margin-bottom: 8px; }
#empresa-equipe .pages-content h2{ color: #fff; margin: 0 0 20px 0; font-size: 25px !important; }
#empresa-equipe .pages-content h2 span{ color: #ca0202 !important; }
/*#empresa-equipe .pages-content { float: left; width: 90%; margin: 0 2% 0 0; }*/

/*Portfólio*/
#portfolio{ display: none; width: 100%; height: 100%; }
#portfolio ul li{ float: left; }
#portfolio ul li img{ width: 100%; margin-left: auto; margin-right: auto; display: block; background: url('../img/362-1.GIF') no-repeat center center; }

#portfolio .scroll-pane{ width: 100%; height: 100%; overflow: hidden; }
#portfolio .scroll-pane .jspVerticalBar{ display: none }

#portfolio .port-nav-up,
#portfolio .port-nav-down{ position: absolute; z-index: 999; width: 10%; height: 50px; left: 50%; margin-left: -5%; cursor: pointer; }
#portfolio .port-nav-up{ top: 0; background: rgba(128,0,0,0.9) url(../img/banner-nav-up.png) center no-repeat; }
#portfolio .port-nav-down{ bottom: 0; background: rgba(128,0,0,0.9) url(../img/banner-nav-down.png) center no-repeat; }
#portfolio .port-nav-up:hover{ top: 0; background: rgba(128,0,0,0.7) url(../img/banner-nav-up.png) center no-repeat; }
#portfolio .port-nav-down:hover{ bottom: 0; background: rgba(128,0,0,0.7) url(../img/banner-nav-down.png) center no-repeat; }

.portfolio-bg{ position: absolute; z-index: 999; top: 0px; left: 0px; width: 100%; height: 100%; background: #d4d4d4;  }
#portfolio-single{ position: relative; width: 101%; height: 100%; }


#portfolio-single .port-img-next,
#portfolio-single .port-img-prev{ position: absolute; top: 50%; z-index: 99999; width: 24px; height: 60px; margin-top: -30px; background: url(../img/prod-seta-carousel.png); cursor: pointer; }
#portfolio-single .port-img-next{ right: 3%; background-position: right; }
#portfolio-single .port-img-prev{ left: 2%; background-position: left; }

.owl-wrapper-outer,
.owl-wrapper,
.owl-item{ height: 100%; }


#portfolio-single .port-img{ position: relative; float: left; width: 100%; height: 100%; overflow: hidden; text-align: center; }
/*#portfolio-single .port-img img{ position: absolute; left: 50%; height: 100%; }*/
#portfolio-single .port-img img{ height: 100%; }
#portfolio-single .port-img .prod-seta-carousel-prev,
#portfolio-single .port-img .prod-seta-carousel-next { position: absolute; top: 50%; }
#portfolio-single .port-info{ display: none; position: absolute; bottom: 0; z-index: 999; width: 96%; height: 90px; padding: 2%; }
#portfolio-single .port-info .port-box{ width: auto; height: auto; }


#portfolio-single .port-info .port-info-fechar{ position: absolute; top: -40px; left: 0; width: 200px; height: 40px; cursor: pointer; }
#portfolio-single .port-info .port-info-fechar .port-info-fechar-seta{ float: left; width: 50px; height: 100%; background: #000 url(../img/prod-fechar-legenda.png) center bottom no-repeat; }
#portfolio-single .port-info .port-info-fechar .port-info-fechar-text{ float: left; width: 140px; height: 100%; padding: 12px 0 0 5px; font-size: 12px; text-transform: uppercase; color:#fff; }

#portfolio-single .port-info-mostrar{ position: absolute; z-index: 9999; bottom: 0px; left: 0; width: 200px; height: 40px; cursor: pointer; }
#portfolio-single .port-info-mostrar .port-info-mostrar-seta{ float: left; width: 50px; height: 100%; background: #000 url(../img/prod-fechar-legenda.png) center top no-repeat; }
#portfolio-single .port-info-mostrar .port-info-mostrar-text{ float: left; width: 140px; height: 100%; padding: 12px 0 0 5px; font-size: 12px; text-transform: uppercase; color:#fff; }


#portfolio-single .port-info .sep{ float: left; width: 2%; height: 50px; margin: 25px 2% 25px 0; border-right: 1px solid #fff; }
#portfolio-single .port-info-tit{ line-height:150px; float: left; width: 20%; height: 50px; margin: 25px 2% 25px 0; text-transform: uppercase; font: 18px/25px "antoniolight"; color: #fff; }
#portfolio-single .port-info-text{ float: left; width: 35%; height: 100%; color: #fff; }
#portfolio-single .port-info-text p{ margin: 0; font-size: 13px; }
#portfolio-single .port-info-thumb{ float: right; width: 34%; }
#portfolio-single .port-info-thumb img{ display: block; float: right; width: 90px; height: 80px; margin: 5px; opacity: 0.4; background: #fff;}
#portfolio-single .port-info-thumb img:hover{ opacity: 1; }
#portfolio-single .port-info-thumb img:active{ opacity: 1; }
#portfolio-single .portfolio-close{ position: absolute; top: 2px; right: 15px; color: #fff; font-size: 20px;  }

#portfolio-exibir{ display: none; }

/*#portfolio-single{ position: relative; width: 920px; margin: 0 auto;  background: #545454; }
#portfolio-single .port-img{ float: left; width: 700px; height: 400px; overflow: hidden; background: url(../img/port-bg.jpg) no-repeat; text-align: center; }
#portfolio-single .port-img a{ display: block; width: 100%; height: 100%; }
#portfolio-single .port-img img{ height: 100%; margin: 0 auto; }
#portfolio-single .port-info{ position: relative; float: right; width: 200px; height: 100%; padding: 0 10px;  background: #545454; }
#portfolio-single .port-info-tit{ float: left; width: 98%; margin: 35px 0 10px 0; padding: 5px 0; text-transform: uppercase; font: 18px/25px "antoniolight"; color: #fff; border-top: 1px solid #666; border-bottom: 1px solid #666; }
#portfolio-single .port-info-text{ float: left; width: 98%; color: #fff; }
#portfolio-single .port-info-thumb{ float: left; margin: 10px 0; }
#portfolio-single .port-info-thumb img{ display: block; float: left; width: 40px; height: 40px; margin: 5px; opacity: 0.4; background: #fff;}
#portfolio-single .port-info-thumb img:hover{ opacity: 1; }
#portfolio-single .port-info-thumb img:active{ opacity: 1; }
#portfolio-single .portfolio-close{ position: absolute; top: 2px; right: 15px; color: #fff; font-size: 20px;  }
.portfolio-bg{ position: absolute; z-index: 999; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(255,255,255,0.9);  }

#portfolio-exibir{ display: none; }*/

/*Contatos*/
.contatos-bg{ display: none; position: absolute; width: 100%; height: 100%; top: 0px; bottom: 0; z-index: -1; text-align: center; overflow: hidden; }
.contatos-bg img{ height: 100%; }

#contatos{ display: none; position: absolute !important; top: 0; left: 0; z-index: 9999; width: 100%; height: 100% !important; text-align: center; overflow: hidden; }

img.contatos-desktop{ display: block; }
img.contatos-tablet{ display: none; }

#contatos .contatos-base{ position: absolute; top: 0; left: 5%; z-index: 999; width:730px; height: 100%; color:#fff; }
#contatos .contatos-email,
#contatos .contatos-trabalhe{ float: left; width:44%; padding: 2% 2%; }
#contatos .contatos-trabalhe{ margin-top: 165px; }

#contatos .contatos-base h2{ font-size: 30px; float: left;}
#contatos .contatos-base p{ font-size: 14px; float: left; text-align: left;}
#contatos .contatos-base input,
#contatos .contatos-base textarea{
	width: 96%;
	margin: 4px 0;
	padding: 2%;
	font: 16px 'source_sans_prolight';
	text-transform: uppercase;
	color: #fff;
	border: none;
	background: rgba(255,255,255,0.1);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#10ffffff, endColorstr=#10ffffff)";
}
#contatos .contatos-base textarea{ height: 100px; }
#contatos .contatos-base input[type="submit"]{ width: 100%; color: #fff; background: #000; }
#contatos .contatos-trabalhe{ top:none !important; bottom: 0px; left: 365px; }

#contatos .contatos-trabalhe input[type="submit"]{ float: right; width: 32%; }

#contatos .contatos-trabalhe .file{ position: relative; float: left; width: 65%; height: 38px; overflow: hidden; }
#contatos .contatos-trabalhe #upload_target{ position:absolute; top: 0; left: 0; z-index: 999999; width:0px; height:0px; border:0px; overflow: hidden; }

#contatos .contatos-trabalhe .realupload{ position: absolute; top: -10%; left: -10%; width: 120%; height: 120%;  z-index: 999; opacity:0; -moz-opacity:0; filter:alpha(opacity::0); }
#contatos .contatos-trabalhe .curriculum{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0 6px; z-index: 99; }


/*Mobile*/
header{ display: none; position: relative; z-index: 99999; height: 48px; background: rgb(128,0,0); }
.logo-mobile{ position: relative; width: 180px; height: 100%;  text-indent: -999999em; background: rgba(128,0,0,0.9) url(../img/logo.png) center no-repeat; }


/*Media Query*/
/*------------------------------------*/
/*Phone*/
@media (max-width: 760px){

	#portfolio .scroll-pane .jspVerticalBar,
	.port-nav-up,
	.port-nav-down{ display: none; }
	
	.mobile-view{ display: block; }

	.grid-defaul{ width: 50%; }
	.content{ width: 100%; }
	header{ display: block; }
	aside,
	.centro{ display: none; }

	.banner{ display: none !important; }
	#banner-list{ display: block; }

	/*Pages*/
	#empresa-equipe .pages-content .empresa-equipe-col{ width: 100%; }
	#empresa-dpa { left: 2%; width: 94% !important; }
	#empresa-dpa .pages-content{ top: 278px !important; }

	#empresa-dpa,
	#empresa-area,
	#empresa-equipe{ position: absolute; top: 0px; width: 96%; height: 100%; margin-left: 2%; }
	#empresa-dpa .pages-content,
	#empresa-area .pages-content,
	#empresa-equipe .pages-content{ position: absolute; top: 58px; right: 20px; bottom: 10px; left: 20px; height: auto; }
	.pages-content p{ width: auto !important; }

	#portfolio ul li{ width: 50%; }

	#portfolio-single .port-info{ height: auto; }
	#portfolio-single .port-info .sep{ display: none; }
	#portfolio-single .port-info-tit{ line-height:100%; width: 100%; margin-bottom: 5px; height: auto; }
	#portfolio-single .port-info-text{ width: 100%; height: auto; margin-bottom: 5px; }
	#portfolio-single .port-info-thumb{ float: left; width: 100%; margin-bottom: 5px; }
	#portfolio-single .port-info-thumb img{ float: left; }

	.fancybox-close { top: 5px; right: 5px; }


	#contatos .contatos-base{ width:90%; margin-top: 50px; }
	#contatos .contatos-base p{ clear: both; }
	#contatos .contatos-email,
	#contatos .contatos-trabalhe{ float: left; width:96%; padding: 2% 2%; }
	#contatos .contatos-trabalhe{ margin-top: 0px; }



}

/*Tablet vertical*/
@media (min-width: 760px) and (max-width: 980px){
	
	.grid-defaul{ width: 33.33%; }
	.content{ width: 66.67%; }
	
	.centro{ width: 33.33%; }
	.centro h1.logo{ width: 100% !important; }
	.centro .banner-box{ width: 100% !important; margin-top: 80px !important;  background: rgba(128,0,0.5); }
	.centro .banner-box .banner-nav{ width: 22%; }
	
	.banner-tit{ background: rgba(100,0,0,0.9) !important; }

	.informacoesMarginTop{ margin-top: 80px !important; }
	
	/*Pages*/
	#empresa-dpa{ width: 80%; height: 550px; margin-left: 0px; }
	#empresa-dpa .pages-content{ right: 50px; }

	#empresa-area{ width: 80%; height: 550px; margin-left: 0px; }
	#empresa-area .pages-content{ right: 50px; }

	#empresa-equipe{ width: 80%; height: 550px; margin-left: 0px; }
	#empresa-equipe .pages-content{ right: 50px; }
	#empresa-equipe .pages-content .empresa-equipe-col{ width: 90%; }

	#portfolio ul li{ width: 50%; }
	#portfolio-single .port-img img{ height: auto; width: 100%; }
	.owl-wrapper-outer,
	.owl-wrapper,
	.owl-item{ height: auto; width: 100%; }

	img.contatos-desktop{ display: none; }
	img.contatos-tablet{ display: block; }

	#contatos .contatos-base{ width:420px; }
	#contatos .contatos-email,
	#contatos .contatos-trabalhe{ float: left; width:96%; padding: 2% 2%; }
	#contatos .contatos-trabalhe{ margin-top: 0px; }

	.centro .banner-box .banner-legend{ font-size: 18px; }


}

/*Tablet horizontal*/
@media (min-width: 980px) and (max-width: 1280px){
	.grid-defaul{ width: 25%; }
	.content{ width: 75%; }

	/*Pages*/
	#empresa-dpa{ width: 50%; }
	#empresa-dpa .pages-content{ }

	#empresa-area{ width: 50%; }
	#empresa-area .pages-content{  }
	
	#empresa-equipe{ width: 50%; }

	#portfolio ul li{ width: 33.33%; }

	img.contatos-desktop{ display: none; }
	img.contatos-tablet{ display: block; }
}

/*Desktop*/
@media (min-width: 1280px) and (max-width: 1600px){
	.grid-defaul{ width: 20%; }
	.content{ width: 80%; }
	#portfolio ul li{ width: 25%; }
}
@media (min-width: 1600px) and (max-width: 1940px){
	.grid-defaul{ width: 16.666%; }
	.content{ width: 83.334%; }
	#portfolio ul li{ width: 20%; }
}
@media (min-width: 1940px) and (max-width: 2540px){
	.grid-defaul{ width: 12.5%; }
	.content{ width: 87.5%; }
	#portfolio ul li{ width: 14.28%; }
}
@media (min-width: 2540px){
	.grid-defaul{ width: 12.5%; }
	.content{ width: 87.5%; }
	#portfolio ul li{ width: 14.28%; }
}