/*
    Desenvolvido por Artweb Design Digital
    http://www.artwebdigital.com.br/
    criacao2@artwebdigital.com.br
*/

@font-face {
    font-family: 'openSansSemiBoldItalic';
    src: url('../fontes/openSansSemiBoldItalic/OpenSans-SemiboldItalic-webfont.eot');
    src: url('../fontes/openSansSemiBoldItalic/OpenSans-SemiboldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fontes/openSansSemiBoldItalic/OpenSans-SemiboldItalic-webfont.woff2') format('woff2'),
         url('../fontes/openSansSemiBoldItalic/OpenSans-SemiboldItalic-webfont.woff') format('woff'),
         url('../fontes/openSansSemiBoldItalic/OpenSans-SemiboldItalic-webfont.ttf') format('truetype'),
         url('../fontes/openSansSemiBoldItalic/OpenSans-SemiboldItalic-webfont.svg#open_sanssemibold_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'openSansItalic';
    src: url('../fontes/openSansItalic/OpenSans-Italic-webfont.eot');
    src: url('../fontes/openSansItalic/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fontes/openSansItalic/OpenSans-Italic-webfont.woff2') format('woff2'),
         url('../fontes/openSansItalic/OpenSans-Italic-webfont.woff') format('woff'),
         url('../fontes/openSansItalic/OpenSans-Italic-webfont.ttf') format('truetype'),
         url('../fontes/openSansItalic/OpenSans-Italic-webfont.svg#open_sansitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

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

@font-face {
    font-family: 'openSansLight';
    src: url('../fontes/openSansLight/OpenSans-Light-webfont.eot');
    src: url('../fontes/openSansLight/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fontes/openSansLight/OpenSans-Light-webfont.woff2') format('woff2'),
         url('../fontes/openSansLight/OpenSans-Light-webfont.woff') format('woff'),
         url('../fontes/openSansLight/OpenSans-Light-webfont.ttf') format('truetype'),
         url('../fontes/openSansLight/OpenSans-Light-webfont.svg#open_sanslight') format('svg');
    font-weight: normal;
    font-style: normal;
}

body,h1,h2,h3,p,a,ul,li,select,option,input,textarea,table,th,td,blockquote,hr,button,div{
	margin:0;
	padding:0;
	font-weight:normal;
} 

body{
    font-family:'openSansItalic', tahoma;
	background:#FFF;
}

html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}

a{
	text-decoration: none;
}

a:hover{
	text-decoration:none;
}

img{
	border:none;
}

button{
	border:none;
	cursor:pointer;
}

.limpa{clear:both;}
.limpa30{clear:both; height:30px;}

input, select, textarea{
    font-family:'openSansItalic', tahoma;
	font-size:15px;
	color:#FFF;
	-webkit-transition: all 600ms linear;
	-moz-transition: all 600ms linear;
	-ms-transition: all 600ms linear;
	-o-transition: all 600ms linear;
	transition: all 600ms linear;
}

/* header */
#bgHeader{
	background:url(../img/bg-header.png) repeat-x;
	height:120px;
	width:100%;
}

#header{
    height:120px;
    margin:0 auto;
}

#logo{
	background:url(../img/logo-zappi-stands.png) no-repeat;
	width:240px;
	height:99px;
	float:left;
	margin:0px 0 0 87px;
}

#headerDireita{
	float:right;
}

#telefoneTopo{
	float:right;
	color:#ffffff;
	font-size:14px;
	margin-top:20px;
	margin-right:10px;
	height:40px;
}

#telefoneTopo span.textoCentral{
	font-size:12px;
    font-family: 'openSansSemiBoldItalic';
	float:right;
}

#telefoneTopo span.dddTopo{
	font-size:14px;
	float:right;
}

.telefoneEsquerda{
	margin:5px 5px 0 0;
	float:left;
	line-height:16px;
}

#telefoneTopo strong{
	font-weight:normal;
	font-size:36px;
	float:right;
	line-height:40px;
}

#menu{
	float:right;
	margin:28px 0 0 0;
}

#menu a{
	padding:0 10px 0 44px;
	margin-left:34px;
	float:left;
	line-height:25px;
	border-left:1px solid #efefef;
    color:#006c8b;
	font-size:14px;
    font-family: 'openSansSemiBoldItalic';
}

#menu a.semBorda{
	border:none;
}

#menu a:hover{
	color:#D60000;
}

/* BANNER */
#caixaBanner{
	border-bottom:3px solid #ed3237;
	width:100%;
	height:500px;
	overflow:hidden;
	position:relative;
}

#bannerSuperior{
	width:100%;
	height:100%;
}

.bannerIndividual{
	width:100%;
	height:100%;
	display:none;
	position:relative;
	background-position:center;
	background-repeat:no-repeat;
}

.mascaraBanner{
/*	background:url(../img/mascara-banner.png) repeat;*/
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
}

.textoBanner{
	color:#FFF;
	width:900px;
	left:50%;
	margin-left:-450px;
	position:absolute;
	bottom:86px;
}

.textoBanner h2{
	font-size:42px;
    font-family: 'openSansBold';
	text-transform:uppercase;
	line-height:46px;
}

.textoBanner h3{
	line-height:46px;
	font-size:38px;
	text-transform:uppercase;
    font-family: 'openSansLight';
	margin-bottom:13px;
}

.textoBanner a{
	background:url(../img/botao-saiba-mais.png) no-repeat center #ed3237;
	width:150px;
	height:25px;
	float:left;
}

.textoBanner a:hover{
	background-color:#006c8b;
}

.alinhaNavBanner{
	position:absolute;
	width:1180px;
	left:50%;
	margin-left:-590px;
	bottom:14px;
	z-index:100;
}

.navBanner{
	float:right;
}

.navBanner a{
	background:url(../img/nav-banner.png) no-repeat;
	width:8px;
	height:8px;
	float:left;
	margin-left:8px;
}

.navBanner a.activeSlide{
	background:url(../img/nav-banner-ativo.png) no-repeat;
}

/* content */
#content{
	margin:40px auto 55px;
}

#conteudoPaginas{
	padding:30px;
}

#conteudoPaginas, #conteudoPaginas p{
	font-size:15px;
	color:#666;
	text-align:left;
	line-height:22px;
}

#conteudoPaginas strong{
	color:#006c8b;
	font-weight:normal;
    font-family: 'openSansSemiBoldItalic';
}

#conteudoPaginas a{
	color:#45a5ae;
}

#conteudoPaginas a:hover{
	color:#666666;
}

#conteudoPaginas h2{
	font-weight:bold;
	line-height:30px;
	font-size:22px;
	color:#006c8b;
    font-family: 'openSansSemiBoldItalic';
	font-style:normal;
	text-transform:uppercase;
	margin-bottom:30px;
}

/* home home */
#homeCimaEsquerda{
	float:left;
	width:360px;
	margin-left:10px;
}

#homeCimaEsquerda h3{
	font-weight:bold;
	line-height:30px;
	font-size:24px;
	color:#006c8b;
    font-family: 'openSansSemiBoldItalic';
	margin-bottom:15px;
	font-style:normal;
}

#homeCimaEsquerda, #homeCimaEsquerda p{
	font-size:14px;
    font-family: 'openSansLight';
	line-height:17px;
	color:#808285;
	font-style:italic;
}

#homeCimaEsquerda strong{
	font-size:20px;
	color:#0d7983;
	font-weight:normal;
    font-family: 'openSansSemiBoldItalic';
	line-height:24px;
	font-style:normal;
}

#homeCimaDireita{
	float:right;
	width:780px;
	margin-right:10px;
}

.tituloCimaDireita{
	height:30px;
	position:relative;
	width:100%;
	margin-bottom:20px;
}

#homeCimaDireita h2{
	font-weight:bold;
	line-height:30px;
	font-size:22px;
	color:#006c8b;
    font-family: 'openSansSemiBoldItalic';
	font-style:normal;
	float:left;
	text-transform:uppercase;
}

.linkTodosProjetos{
	line-height:30px;
	font-size:12px;
	color:#006c8b;
	float:right;
}

.tracoTituloDireita{
	width:458px;
	height:1px;
	background:#ececec;
	position:absolute;
	top:16px;
	right:85px;
}

.projetoIndividual{
	width:324px;
	height:240px;
	float:left;
	margin:0 32px;
	text-align:center;
}

#conteudoPaginas .projetoIndividual{
	margin:30px 28px 0;
}

.imagemProjetos{
	border:2px solid #ececec;
	width:320px;
	height:170px;
	display:block;
	overflow:hidden;
	position:relative;
}

.hoverProjetos{
	-webkit-transition: all 600ms linear;
	-moz-transition: all 600ms linear;
	-ms-transition: all 600ms linear;
	-o-transition: all 600ms linear;
	transition: all 600ms linear;
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:url(../img/hover-produtos.png) no-repeat center;
	z-index:10;
	-moz-opacity: 0.00;
	-khtml-opacity: 0.00;
	opacity: 0.00;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=0);
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
	filter:alpha(opacity=0);
}

.projetoIndividual:hover .hoverProjetos{
	-moz-opacity: 1;
	-khtml-opacity: 1;
	opacity: 1;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100);
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
	filter:alpha(opacity=100);
}

.tituloProjetoIndividual{
	font-size:14px;
	color:#45a5ae;
    font-family:'openSansSemiBoldItalic';
	line-height:20px;
	margin:15px 0 0;
	display:block;
}

.faixaClientes{
	min-width:980px;
	background:url(../img/traco-clientes-cima.png) repeat-x center top;
	height:90px;
	width:100%;
	padding-top:1px;
}

.faixaClientes h3{
	margin-left:10px;
	line-height:90px;
	color:#45a5ae;
	font-size:11px;
	float:left;
}

.alinhaClienteIndividual{
	width:170px;
	height:60px;
	float:left;
	margin:15px 8px 0;
}

.clienteIndividual{
	width:170px;
	height:60px;
	display:table-cell;
	vertical-align:middle;
	text-align:center;
	-webkit-transition:all 600ms ease;
	-moz-transition:all 600ms ease;
	-ms-transition:all 600ms ease;
	-o-transition:all 600ms ease;
	transition:all 600ms ease;
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+ */  
	filter: gray; /* IE6-9 */  
	-webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */  
	-webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */  
	-webkit-backface-visibility: hidden; /* Fix for transition flickering */  
	-moz-opacity: 0.30;
	-khtml-opacity: 0.30;
	opacity: 0.30;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=30);
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30);
	filter:alpha(opacity=30);
}

.clienteIndividual img{
	max-width:170px;
	max-height:60px;
}

#conteudoPaginas .alinhaClienteIndividual{
	margin:30px 10px;
}

.alinhaClienteIndividual:hover .clienteIndividual{
	filter:none; /* Firefox 10+ */  
	filter:none; /* IE6-9 */  
	-webkit-filter:none; /* Chrome 19+ & Safari 6+ */  
	-webkit-transition:none; /* Fade to color for Chrome and Safari */  
	-webkit-backface-visibility: hidden; /* Fix for transition flickering */  
	-moz-opacity: 1;
	-khtml-opacity: 1;
	opacity: 1;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100);
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
	filter:alpha(opacity=100);
}


/* footer */
#rodapeFixo{
	padding-bottom:267px;
}

#rodapeTodo{
	min-width:980px;
	background:url(../img/bg-rodape.png) repeat-x center;
	width:100%;
	height:267px;
	margin-top:-267px;
	position:relative;
	clear:both;
}

#footer{
	height:224px;
}

#footer h3{
	background:url(../img/faixa-rodape.png) repeat-x left bottom;
	font-size:20px;
	color:#ffffff;
    font-family: 'openSansSemiBoldItalic';
	line-height:38px;
	margin-bottom:10px;
	padding-top:38px;
}

#rodape1{
	float:left;
	margin-left:10px;
	width:345px;
}

.menuRodape{
	float:left;
	width:170px;
}

.menuRodape a{
	display:block;
    font-family: 'openSansLight';
	padding-left:40px;
	font-size:12px;
	line-height:36px;
	color:#FFF;
	text-transform:uppercase;
}

.menuRodape a:hover{
	color:#ed3237;
}

#rodape2{
	float:left;
	width:345px;
	margin-left:55px;
}

.caixaNews{
	padding-left:40px;
}

.caixaNews p{
	margin-top:25px;
	font-size:11px;
	color:#FFF;
    font-family: 'openSansItalic';
	line-height:14px;
}

#footer input{
	background:#1a919c;
	margin-top:11px;
	width:220px;
	height:25px;
	padding:5px 15px;
	border:none;
    font-family:'openSansItalic';
	color:#FFF;
	font-size:12px;
	float:left;
}

#footer button{
	background:url(../img/botao-news.png) no-repeat;
	width:34px;
	height:32px;
	margin-top:13px;
	float:left;
}

#mensagemNews{
	color:#FFF;
	font-size:11px;
	line-height:22px;
}

#rodape3{
	float:right;
	width:345px;
	margin-right:45px;
}

.caixaEndereco{
	padding-left:40px;
	padding-top:10px;
}

#rodape3 p{
	color:#FFF;
	font-size:12px;
	line-height:16px;
}

#rodape3 a{
	line-height:40px;
	color:#FFF;
}

.iconeInstagram{
	background:url(../img/icone-instagram.png) no-repeat;
	width:18px;
	height:18px;
	float:left;
	margin:13px 0 0 15px;
}

.iconeFacebook{
	background:url(../img/icone-facebook.png) no-repeat;
	width:18px;
	height:18px;
	float:left;
	margin:13px 0 0 10px;
}

.rodapeBaixo{
	float:left;
	padding-top:8px;
	line-height:30px;
	color:#88e2ea;
	font-size:12px;
	margin-left:20px;
}

.artweb{
	margin-top:26px;
	float:right;
    display: block;
    height:13px;
    width:50px;
	text-align:left;
	overflow:hidden;
}

/* contato */
.divBox{
	float:left;
	width:360px;
	height:80px;
	margin:0 10px 10px;
}

.divBoxMsg{
	margin:0 10px;
}

.divBoxNome{
	float:left;
	line-height:30px;
}

.divBoxErro{
	font-size:13px;
	color:#F00;
	display:none;
	float:right;
	line-height:30px;
}

#formContato input{
	padding:10px 20px;
	width:318px;
	height:28px;
	background:#F5F5F5;
	border:1px solid #0D7A89;
}

#formContato textarea{
	background:#F5F5F5;
	border:1px solid #0D7A89;
	width:1078px;
	height:150px;
	padding:10px 20px;
}

#formContato textarea:focus, #formContato input:focus{
	background:#45A5AE;
}

#formContato button{
	background:#0D7A89;
	width:160px;
	height:50px;
	float:right;
	margin:20px 10px 0 0;
	color:#fff;
}

#formContato button:hover{
	background:#1397AA;
}

/* tamanhos tamanhos */
.tamanhoTela{
	width:1200px;
	margin:0 auto;
}

@media(max-width: 1230px) {
	.tamanhoTela{width:980px;}
	#conteudoPaginas{padding:20px;}
	#bgHeader, #caixaBanner{min-width:980px;}
	#logo{margin:1px 0 0;}
	#menu a{padding:0 28px; margin-left:0;}
	#telefoneTopo{margin-right:25px;}
	.divBox{margin:0 10px 10px; width:293px;}
	#formContato input{width:251px;}
	.divBoxMsg{margin:0 10px;}
	#formContato textarea{width:878px;}
	#formContato button{margin:20px 10px 0 0;}
	#homeCimaDireita{width:620px; margin-right:5px;}
	.tracoTituloDireita{width:308px;}
	#homeCimaEsquerda{width:320px; margin-left:5px;}
	#homeCimaEsquerda strong{font-size:18px;}
	.projetoIndividual{width:300px; margin:0 5px;}
	.projetoIndividual .imagemProjetos{width:296px; height:155px;}
	.projetoIndividual .imagemProjetos img{max-width:100%;}
	.alinhaClienteIndividual{width:133px;}
	.clienteIndividual{width:133px;}
	.clienteIndividual img{max-width:133px; max-height:50px;}
	#rodape3{width:280px; margin-right:10px;}
	#rodape2{margin-left:20px; width:320px;}
	#rodape1{width:320px;}
	.menuRodape{width:160px;}
	.menuRodape a{padding-left:20px;}
	.caixaNews{padding-left:20px;}
	#footer input{width:200px;}
	.caixaEndereco{padding-left:20px;}
	#conteudoPaginas .projetoIndividual{margin:30px 6px 0;}
}