/*
	CSS Document
	Theme Name: ABLPlast.
	Theme URI: http://www.ablplast.com.br
	Author: Superteia Soluções para Internet 
	Author URI: http://www.superteia.com.br/
	Description: Estilização padrão para o site ABLPlast.
	Tags: superteia, shelley macedo, frontend, css, desenvolvimento
	
	Developer: Shelley Macedo (shelley.macedo@hotmail.com)
	Version: 1.0 -> 16 Julho 2015 /*** geral *** /
*/

/* CSS Document */
@charset "utf-8";
@import url(reset.css);


/* PADRONIZAÇÃO ======================================================================== */
@font-face {
    font-family: 'TwCenMT-Regular';
    src: url('../fonts/TwCenMT-Regular.eot');
    src: url('../fonts/TwCenMT-Regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/TwCenMT-Regular.woff') format('woff'),
         url('../fonts/TwCenMT-Regular.ttf') format('truetype'),
         url('../fonts/TwCenMT-Regular.svg#TwCenMT-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* 
 * BARRA DE ROLAGEM
 * 1. tamanho 
 * 2. cor de fundo de onde a barra percorre
 * 3. definição da barra horizontal
 * 4. definição da barra vertical
*/ 
::-webkit-scrollbar { width:10px; height:10px; -webkit-border-radius:18px; } /* 1 */
::-webkit-scrollbar-track-piece { background-color:#e3d8c4; -webkit-box-shadow:inset 1px 1px 30px 1px #c2b485; -moz-box-shadow: inset 1px 1px 30px 1px #c2b485; box-shadow: inset 1px 1px 30px 1px #c2b485; } /* 2 */
::-webkit-scrollbar-thumb:horizontal { width:5px; background-color:#BCD05C; -webkit-border-radius:2px; } /* 3 */
::-webkit-scrollbar-thumb:vertical { height:5px; background-color:#BCD05C; -webkit-box-shadow: inset 1px 1px 50px 1px #BCD05C; -moz-box-shadow: inset 1px 1px 50px 1px #BCD05C; box-shadow: inset 1px 1px 50px 1px #BCD05C; } /* 4 */


/* ====================================================================================== */



/* FERRAMENTAS ========================================================================== */
.hidden { display:block !important; border:0 !important; margin:0 !important; padding:0 !important; font-size:0 !important; line-height:0 !important; width:0 !important; height:0 !important; overflow:hidden !important; }
.a-left { text-align:left !important; }
.a-center { text-align:center !important; }
.a-right { text-align:right !important; }
.f-left, .left { float:left !important; }
.f-right, .right { float:right !important; }
.f-none { float:none !important; }
.no-display { display:none!important; visibility:hidden!important }
.no-margin { margin:0 !important; }
.no-padding { padding:0 !important; }
.no-bg { background:none !important; }
.no-border { border:0 !important }
.upper { text-transform:uppercase!important }
.clear { clear:both!important; height:15px!important; display:block!important; }
.sem-efeito:hover, .contato img:hover, #banners img:hover { filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0; }
.sem-borda { border:0 }
.large { font-size:24px }

.loading { width:50px; height:50px; display:block; margin:auto; background:url(../images/icones/loading.gif) no-repeat 0 0; display:none; }
#resposta { display:none; }
	#resposta > * { text-align:center; }

/* Ocultos */
.contato { visibility:hidden; display: none; }

/* ====================================================================================== */




/* All ================================================================================== */
header, section, .nav, footer { width:100%; min-width:100%; }
body { background-color:#FFFFFF; font-family:"TwCenMT-Regular", "Arial", "Helvetica", sans-serif; color:#606062; font-size:16px; line-height:18px; }
	#tudo { height:100%; width:100%; position:relative; min-height:100%; min-width:100%; }
		.limite { width:960px; display:table; margin-left:-490px; left:50%; position:relative; padding:10px; }
* html #tudo { padding:0; margin:0; height:100%; }

a:link, a:visited { text-decoration:none; color:#5CC6D0; -webkit-transition:color 0.5s ease-out; -moz-transition:color 0.5s ease-out; -o-transition:color 0.5s ease-out; -ms-transition:color 0.5s ease-out; } 
a:hover, a:focus { text-decoration:none; color:#BCD05C; filter:alpha(opacity=100); -moz-opacity:1; opacity:1; cursor:pointer; }
a.leia-mais { margin:-1em 1em 1em; }
img:hover { filter:alpha(opacity=80); -moz-opacity:0.8; opacity:0.8; }
p { text-align:justify; clear:both; }


hr { height:1px; border:none; background-color:#ccc; display:block; clear:both; margin:10px auto; width:100% }

h1 { font-family: "TwCenMT-Regular", "Arial", "Helvetica", sans-serif; font-size: 3.2em; text-transform: uppercase; letter-spacing:0; padding: 0.3em 1em; font-weight: bold; background: url(../images/icones/titulo.png) no-repeat left center; text-shadow:-2px -1px #606062; color:#FFF; }
h2 { font-family:"TwCenMT-Regular", "Arial", "Helvetica", sans-serif; font-size:30px; line-height:28px; }
h3 { font-family:"Arial", "Helvetica", sans-serif; font-size:20px; text-transform:uppercase; line-height:20px; padding:0.6em 0; }
h4 { font-family: "TwCenMT-Regular", "Arial", "Helvetica", sans-serif; font-size:20px; text-transform:uppercase; padding:10px 0; background:url(../images/linha.png) no-repeat left bottom; }
h5 { font-family:"TwCenMT-Regular", "Arial", "Helvetica", sans-serif; font-size:24px; font-weight:bold; font-style:italic; }
h6 { font-family:"TwCenMT-Regular", "Arial", "Helvetica", sans-serif; font-size:.9em; }

.bloco { min-height:20px; padding:1em; margin-bottom:20px; background-color:#f5f5f5; border:1px solid #e3e3e3; border-radius:4px; -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.05); box-shadow:inset 0 1px 1px rgba(0,0,0,.05); display:inline-table; width:100%; }
	.bloco p { clear:none; }

figure { width:40%; margin:0 auto; }
figure img { border:3px solid #BCD05C; max-width:100%; width:100%; }
figure figcaption { font-size:12px; color:#5CC6D0; }


	
/* Forms */
form { display:block; margin:5em 0; }
	form div { display: block; margin-bottom:.5em; }
		label { width:20%; font-weight:400; font-family:Arial, sans-serif; display:inline-block; text-align:right; padding-right:2%; vertical-align:top; margin-top:10px; }
		input[type="text"], input[type="email"], input[type="tel"], input[type="password"], select, textarea { padding: 1em; border: 1px solid #CCC; border-radius: 5px; width: 60%; color:#606062; }
		select { width:35% }
		textarea { height:120px; }
		
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="password"]:focus, select:focus, textarea:focus { background-color:#FDF6EA; border:1px solid rgb(223, 183, 0); font-style:italic; color:#34A4DA; }

label.error { background-color:#FFE7E7; font-size: 12px; position: absolute; border-radius: 5px; border: 1px dashed #FD0000; width: auto; text-align: center; padding: .25% .5%; clear: both; margin-top: 13px; right: 3%; color: #777; text-transform: uppercase; font-weight: bold; }

		
/* Listas */ 
.lista-simbolo { margin:2em; }
	.lista-simbolo li { list-style-image:url(../images/icones/reciclagem.png); font-size:1.3em; min-height:20px; margin-bottom:20px; }
	
.lista-plast { margin:2em; }
	.lista-plast li { list-style-image:url(../images/icones/simbolo.png); font-size:1.3em; min-height:20px; padding:1em 0.3em; margin-bottom:20px; }


/* Menu */
nav { text-transform:uppercase; font-size:1em; display:table; position:absolute; right:0; bottom:0; padding:0; font-weight:300; }
nav ul { margin:0; padding:0; }
	nav li { float:left; margin-right:15px; list-style:none; display:inline-block; padding:0.5em 0; }
	nav li a { padding:5px; text-decoration:none; line-height:100%; color:#606062!important; }
	nav li:hover a { color:#BCD05C!important; }
	
	nav li.ativo, nav li:hover { border-bottom:3px solid #5CC6D0; }
	nav li.ativo a { color:#BCD05C!important; }
	nav li:hover ul { display:block }
	nav li:first-child { }

	nav li.ativo ul li a, nav li ul li a { }
	nav li.ativo ul li a:hover, nav li ul li a:hover { color:#BCD05C!important; }
	nav li ul { border-radius:10px; display: none; color: #FFF; font-weight: 600; position: absolute; z-index: 9999; margin-left: -25px; }
		nav li ul li { clear:both; background:none; text-transform:none; text-shadow: -1px 1px 2px #327a5b; padding:5px 0; width:100%; background-color:#47af82; }
		nav li ul li a { border-bottom: 1px solid #327a5b; margin-left: 5px; display: block; width: 85%; padding: 0 5px 3px 5px; }
		nav li ul li:first-child { background-image: none; margin-top: 13px; background-color: #47af82; border-radius: 10px 10px 0 0; padding:5px 0 0 0; } 
		nav li ul li:last-child { background-image: none; background-color: #47af82; border-radius: 0 0 10px 10px; padding:0 0 5px 0; }  
		nav li ul li:last-child a { border:none }  


/* Botões */
.btns { display:table; float:right; margin-right:8em; }		
	.btn { 
		color:#FFF!important;
		background: #5CC6D0; /* geral */
		background: linear-gradient(to bottom, #009EC3, #5CC6D0);
		background: -ms-linear-gradient(to bottom, #009EC3, #5CC6D0);
		background: -o-linear-gradient(to bottom, #009EC3, #5CC6D0);
		background: -moz-linear-gradient(to bottom, #009EC3, #5CC6D0);
		background: -webkit-linear-gradient(to bottom, #009EC3, #5CC6D0);
		border-radius: 3px;
		padding: .3em .6em;
		border: 1px solid #5CC6D0;
		margin-right: .5em;
	}	
	.btn:hover {
		background: #BCD05C; /* geral */
		background: linear-gradient(to bottom, #BCD05C, #CDEB8B);
		background: -ms-linear-gradient(to bottom, #BCD05C, #CDEB8B);
		background: -o-linear-gradient(to bottom, #BCD05C, #CDEB8B);
		background: -moz-linear-gradient(to bottom, #BCD05C, #CDEB8B);
		background: -webkit-linear-gradient(to bottom, #BCD05C, #CDEB8B);
		border: 1px solid #BCD05C;
		color: #606062!important;
	}

	
/* ====================================================================================== */




/* Header ================================================================================ */
header { border-top:5px solid #BCD05C; border-bottom:1px solid #5CC6D0; }
	#logo { display:table; float:left; margin:1em 0 0; width:220px; height:70px; }
	#logo h1 { text-indent:-9999px; font-size:0; height:0; }
	
.contato { float:right; margin-right:0.5em; margin-top:0.5em; }
	.contato span { color:#5CC6D0; vertical-align:super; }
	.contato span sup { top:-0.2em; letter-spacing:-3px; }


/* ======================================================================================= */




/* Content =============================================================================== */
#banners { border-bottom:1px solid #C3C3C3; }
#titulo { background:url(../images/bg_titulo.jpg) no-repeat 0 0; height:130px; border-bottom:5px solid #5CC6D0; margin:0 0 1.5em; }
	
aside { clear:both; margin-top:2.5em; }
	.bloco-chamada img { float:left; margin-right:10px; }
	.bloco-chamada h3 { text-transform:none }
	.bloco-chamada p { padding-right:1em; text-align:justify; }
	.bloco-chamada address { text-align:center; }
	
.bloco-destaque { width:31%!important }
.bloco-destaque:nth-child(odd) { padding:0 3.33% }
	.bloco-destaque img { border:3px solid #5CC6D0; border-radius:15px; height:auto; width:100%; min-height:195px; }
	.bloco-destaque img:hover { box-shadow:0 0 10px 2px #BCD05C; }
	.bloco-destaque p { margin-top:0.3em; }
	.bloco-destaque .btn { margin:0 }
	.bloco-destaque a { color:#606062 }
	
article { border-top:5px solid; border-bottom:5px solid; clear:both; padding:1em 0; text-align:center; font-size:22px; line-height:28px; font-style:italic; color:#999; font-weight:100; font-family:"TwCenMT-Regular", "Arial", "Helvetica", sans-serif; }
.metade { display:table; clear:none; margin:5em 0; }

#clientes .bx-wrapper img { filter: grayscale(1); -webkit-filter: grayscale(1); -moz-filter: grayscale(1); -filter: grayscale(1); -ms-filter: grayscale(1); }
#clientes .bx-wrapper img:hover { filter: grayscale(0); -webkit-filter: grayscale(0); -moz-filter: grayscale(0); -o-filter: grayscale(0); -ms-filter: grayscale(0); }

.bloco .img { border:1px solid #e6e6e6; float:left; margin:1em 1.5em .95em 0; border-radius:5px; width:215px; }

.titulo-pontilhado { display:flex; background:url(../images/pontilhado.png) repeat-x left center; margin:2em 0; }
	.titulo-pontilhado span { display: table; padding: 5px 15px 5px 10px; border-left: 5px solid #5CC6D0; text-transform: uppercase; background-color: #FFF; font-size: 1.5em; }

#mapa { border:1px dotted #5CC6D0; padding:0.2em 0.2em 0; width:100%; margin-bottom:3em; }
	#mapa iframe { border:1px solid #BCD05C; width:99.8%; height:650px; }
.endereco { display:table; margin:3em auto; padding:0.5em; text-align:center; }
	
section, #clientes, .produtos, #destaques { display:table; width:100%; }

.grupo3 { display:inline-block; width:33.33%; float:left; }
.azul { color:#5CC6D0 }
.borda-azul { border-color:#5CC6D0 }
.verde { color:#BCD05C }
.borda-verde { border-color:#BCD05C }

.titulo-noticia h1 { font-size:2.25em; padding:0 1.25em; line-height:100%; }


/* ======================================================================================= */




/* Footer ================================================================================ */
footer { background:url(../images/bg_footer.jpg) repeat-x 0 0; height:80px; }
	.copy { display:table; font-size:16px; margin:1.5em 0 0; }
	.redes { margin:1.5em 0 0; text-align:center; }
		.redes a:hover img { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter:grayscale(100%); filter: grayscale(100%); }
	.superteia { float:right; margin: .5em 0 0; }
		.superteia a { display:table; float:right; margin:0; }
		.superteia h6 { text-indent:-9999px; }

	.redes { display:none!important }

/* ======================================================================================= */

/* Hacks / Responsive ==================================================================== */
/* Menu Responsivo */
@media screen and (max-width: 800px) 
{
	.limite { width:98%; margin-left:-50%; }
	.produtos .bx-wrapper img { height:auto; }
	.btns { margin-right:0; }
	
	
	/* menu */
	nav { display:inline-block; width:100% }	
	nav li { display:table; clear:none }	
	nav { position:relative; min-height:0; }	
	nav ul { width:45%; padding:0 10px; position:absolute; top:-3em; right:10px; border:solid 1px #F1F1F1; background:#FFFFFF url(../images/icones/ico_menu.png) no-repeat 3% center; border-radius:5px; box-shadow:0 0 5px 0 rgba(0,0,0,.25); z-index:999; }
	nav li { display: none; margin: 0; float:none; clear:both; padding-left: 15px; }
	nav li:first-child { background-image:none; }
	nav .ativo { display: block; }
	nav a { display: table; padding: 5px 5px 5px 32px; text-align: left; 	}
	nav .ativo a { background:none; color:#666; }
	nav li.ativo, nav li:hover { border-bottom:0; }
	 
	/* submenu */
	nav li ul { border-radius: 0; background:rgba(255, 255, 255, 0); border: none; display: none; color: #444; font-weight: 300; position: relative; z-index: 0; margin-left: 0; box-shadow: none; }
	nav li ul li:first-child, nav li ul li:last-child { background-image: none; margin-top: 0; background-color:rgba(255, 255, 255, 0); border-radius: 0; padding: 0; }
	nav li ul li { clear: both; background: none; text-transform: none; text-shadow: none; padding: 0; width: 100%; background-color:rgba(255, 255, 255, 0); }
	nav li ul li:hover a { background-color: #FAFAE8; }
	nav li ul li a { border-bottom: none; margin-left: 0; display: block; width: 85%; padding:3px 0; }
	nav li.ativo ul li a, nav li ul li a { color: #073290!important; }
	nav li.ativo ul li a:hover, nav li ul li a:hover { color:#009052!important; }

	/* on nav hover */
	nav ul:hover { background-image: none; }
	nav ul:hover li { display: block; margin: 0 0 5px; }
	nav ul:hover .ativo, nav ul li:hover { background: url(../images/icones/ico_check.png) no-repeat 0 center; }
	
}

/* Baixa Resolução */ 
@media screen and (max-width: 480px) 
{
	#logo { display: table; float: none; margin: 1em auto; }
	h1 { font-size:2.3em; line-height:1; }
	.contato { float: none; font-size: 1.4em; clear: both; text-align: center; }
	nav{ margin-top:5em; }
	nav ul { width:90% }
	article { width:95%; }
	aside .grupo3, #destaques .grupo3 { display: inline-block; width: 96%!important; clear: both; margin: 0 0 1.5em 0; background: url(../images/linha.png) no-repeat left bottom; }
	.bloco-chamada address { text-align:justify; display:inline-block; margin-bottom:1.3em; }
	.bloco-destaque { padding-bottom:.5em; }
	#destaques h4 { background:none; }
	.bloco-destaque img { height: auto; width: 100%; float: none; margin-right: .5em; margin-bottom:.5em; }
	section { width:98%; min-width:0; text-align:justify; }
	section img { width:80%; }
	.copy { font-size:12px; line-height:12px; }
	.superteia img { width:90%; }
	#clientes .bx-wrapper li { margin-right:0!important; width:100px!important; }
	input[type="text"], input[type="email"], input[type="tel"], input[type="password"], select, textarea { padding: 1em; border: 1px solid #CCC; border-radius: 5px; width: 86%; color: #606062; clear: both; display: block; }
	select { width:98%!important; }
	#clientes { margin-bottom:-4em }
	iframe { width:100%!important; height:100%!important }
	.bloco { max-width:85%; }
	#mapa { width:96%; height:350px }
		.bloco-destaque:nth-child(odd) { padding:0; }
}

/* Smartphones */ 
@media screen and (min-width: 481px) and (max-width: 768px) 
{
	#logo { display: table; float: none; margin: 1em auto; }
	.contato { float:left; font-size:1.1em; clear:both }
	aside .grupo3, #destaques .grupo3 { display: inline-block; width: 100%; clear:none; margin: 0 0 1.5em 0; background: url(../images/linha.png) no-repeat left bottom; }
	.bloco-chamada address { text-align:justify; display:inline-block; margin-bottom:1.3em; }
	#destaques h4 { background:none; }
	.bloco-destaque img { height: auto; width: 100%; float: none; margin-right: .5em; margin-bottom:.5em; min-height:auto; }
	section { width:98%; min-width:0; text-align:justify; }
	.copy { font-size:12px }
	.superteia img { width:90%; }
	
}

/* Tablets e Netbooks */ 
@media screen and (min-width: 769px) and (max-width: 1024px) 
{
	.limite { width:98%; margin-left:-50%; }
	.bloco-chamada img { float:none; margin:0 auto; display:table; }
	.bloco-chamada h3 { clear:both; text-align:center; }

}

/* Notebooks e Desktops */ 
@media screen and (min-width: 1025px)
{
	/* Definido no Estilo Padrão */
}

/* ======================================================================================= */