/*
	CSS Document
	Theme Name: Endo Metabólica Mogi
	Theme URI: http://www.endometabolica.com
	Author: Shelley Macedo 
	Description: Estilização padrão para o site ENDO Metabólica Mogi
	Tags: shelley, macedo, frontend, css, desenvolvimento
	
	Developer: Shelley Macedo (shelley.macedo@hotmail.com)
	Version: 1.0 -> 12 Janeiro 2015 /*** geral *** /
*/

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


/* PADRONIZAÇÃO ======================================================================== */
@font-face {
    font-family: 'FuturaStd';
    src: url('../fonts/FuturaStd.eot');
    src: url('../fonts/FuturaStd.eot?#iefix') format('embedded-opentype'),
         url('../fonts/FuturaStd.woff') format('woff'),
         url('../fonts/FuturaStd.ttf') format('truetype'),
         url('../fonts/FuturaStd.svg#FuturaStd') 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:10px; } /* 1 */
::-webkit-scrollbar-track-piece { background-color:#f0f0f0; -webkit-box-shadow:inset 1px 1px 30px 1px #e3e3e3; -moz-box-shadow: inset 1px 1px 30px 1px #e3e3e3; box-shadow: inset 1px 1px 30px 1px #e3e3e3; } /* 2 */
::-webkit-scrollbar-thumb:horizontal { width:5px; background-color:#fbc010; -webkit-border-radius:2px; } /* 3 */
::-webkit-scrollbar-thumb:vertical { height:5px; background-color:#fbc010; -webkit-border-radius:2px; -webkit-box-shadow: inset 1px 1px 50px 1px #f5951d; -moz-box-shadow: inset 1px 1px 50px 1px #f5951d; box-shadow: inset 1px 1px 50px 1px #f5951d; } /* 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 */
.oculto { visibility:hidden; display: none; }

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




/* All ================================================================================== */
header, section, .nav, footer { width:100%; min-width:100%; }
body { background-color: #FFF; font-family: "FuturaStd", sans-serif; color: #666; font-size: 16px; line-height: 28px; }
	#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:#818285; -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:#f37721; filter:alpha(opacity=100); -moz-opacity:1; opacity:1; cursor:pointer; }
img:hover { filter:alpha(opacity=80); -moz-opacity:0.8; opacity:0.8; 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-weight: bold; color: #FFF; font-size: 40px; text-transform: uppercase; letter-spacing: 5px; line-height: 30px; }
h2 { font-size: 30px; text-transform: uppercase; color: #f37221; font-weight: bolder; letter-spacing: -1px;   line-height: 30px; }
h3 { font-size:24px; text-transform:uppercase; font-weight:bolder; line-height:30px; }
h4 { background: url(../images/icones/ico_logo.png) no-repeat left 0; font-size: 30px; text-transform: uppercase; color: #f37221; font-weight: bolder; letter-spacing: 2px; line-height: 30px; padding-left: 45px; }
h5 { background: url(../images/icones/ico_telefone.png) no-repeat left 8px; font-family: "Arial", sans-serif; color: #f5951d; font-weight: bolder; font-size: 15px; float: left; padding-left: 15px;  margin-left: 30px; }
h6 { font-size:30px; text-transform:uppercase; color:#A15744; font-weight:bolder; letter-spacing:2px; line-height:45px; }
h1, h2, h3, h4, h5, h6 { font-family: "FuturaStd", "Arial", "Helvetica", sans-serif; }

.bloco { min-height:20px; padding:19px; 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:96% }
	.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:#3A5795 }

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; }

.btns.btns-contato button { border: 1px solid orange; padding: 6px 12px;  text-transform: uppercase; letter-spacing: 1px; margin-left: 10px; }
		
/* 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 { font-size:14px; clear:both; min-width:45%; display:inline-table; position:relative; float:right; border-radius:5px; border:1px solid #e6e6e6; padding:5px 0; margin-top:-5%; }
nav ul { margin:0; padding:0; }
	nav li { float:left; margin-right:15px; list-style:none; display:inline-block; padding: 5px 0; }
	nav li.active a { color:#f37721!important; }
	nav li:first-child { padding-left:15px }
	nav li a { padding:5px; text-decoration:none; line-height:100%; }

	/* Submenu */
	nav li:hover ul { display:block }
	nav li.active ul li a, nav li ul li a { color:#FFF!important; }
	nav li.active ul li a:hover, nav li ul li a:hover { color:#68FDBD!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:0; margin-top:2em; }		
	.btn { 
		background: #ffb600; 
		background: -moz-linear-gradient(top, #ffb600 0%, #f37721 100%); 
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb600), color-stop(100%,#f37721)); 
		background: -webkit-linear-gradient(top,  #ffb600 0%,#f37721 100%); 
		background: -o-linear-gradient(top,  #ffb600 0%,#f37721 100%); 
		background: -ms-linear-gradient(top,  #ffb600 0%,#f37721 100%); 
		background: linear-gradient(to bottom,  #ffb600 0%,#f37721 100%); 
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb600', endColorstr='#f37721',GradientType=0 ); 
		color: #FFF!important;
		text-decoration:none!important;
		padding: 6px;
		font-size: 13px;
		border-radius: 3px; 
	}	
	.btn:hover { 
		background: #cece00; 
		background: -moz-linear-gradient(top,  #cece00 0%, #8fc400 100%); 
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cece00), color-stop(100%,#8fc400)); 
		background: -webkit-linear-gradient(top,  #cece00 0%,#8fc400 100%); 
		background: -o-linear-gradient(top,  #cece00 0%,#8fc400 100%); 
		background: -ms-linear-gradient(top,  #cece00 0%,#8fc400 100%); 
		background: linear-gradient(to bottom,  #cece00 0%,#8fc400 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cece00', endColorstr='#8fc400',GradientType=0 );
	}	

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




/* Header ================================================================================ */
header { border-bottom:3px solid #a1563f; }
	#logo { display:table; float:left; margin:1em 0 0; width:300px; height:80px; margin-top:15px;  }
	#logo h1 { text-indent:-9999px; font-size:0; height:0; }
	
	.contato  { float:right; display:inline-table; margin:15px 5px; color:#f5951d; font-weight:bolder; font-size:15px; }
		.contato sup { font-size:8px; margin-right:0; top:-0.6em; padding-left:5px;  }

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




/* Content =============================================================================== */
#banners { border-bottom:1px solid #C3C3C3; max-width:100%!important; }
	#banners img { max-width:100% }
#titulo { background-color:#f5951d; padding:0 3%; text-align:center; border-bottom:3px solid #a1563f; margin:0; text-shadow:0 2px 8px red; }
	
.meio { margin:0 2%; width:50% }

aside { clear:both; margin-top:2.5em; margin-bottom:2em; }
	.bloco-chamada { font-size:12px; line-height:20px; box-shadow:0 2px 10px -2px #90C300; padding:18px; margin-bottom:20px; background-color:#f5f5f5; border:1px solid #e3e3e3; border-radius:4px; line-height: 20px; }
	.bloco-chamada img { float:left; margin-right:10px; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); }
		.bloco-chamada img:hover, .bloco-chamada:hover img { -webkit-filter: grayscale(0); -moz-filter: grayscale(0); -ms-filter: grayscale(0); -o-filter: grayscale(0); filter: grayscale(0); }
	.bloco-chamada h3 { font-weight:bold; font-size:13px; margin-bottom:8px; }
	.bloco-chamada p { padding-right:1em; text-align:center; margin:0; clear:none; font-size:13px; }
	.bloco-chamada address { text-align:center }
	
.bloco-destaque { width:31%!important; padding:0!important; font-family:"FuturaStd", Arial, sans-serif; }
.bloco-destaque.meio { margin:0 3%!important }
	.bloco-destaque img { width:100%; height:135px; }
	.bloco-destaque p { margin-top: 0.3em; font-size: 14px; line-height: 24px; height:120px; }
	.bloco-destaque .btn { margin:0 }
	.bloco-destaque a { color:#606062 }
	.bloco-destaque h4 { font-weight: bold; font-size: 16px; color: #A15643; }

	
article { border-top:1px solid; border-bottom:1px 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:"FuturaStd", "Arial", "Helvetica", sans-serif; }
.metade { display:table; clear:none; margin:5em 0; }

#convenios .bx-wrapper { margin:5% auto; padding: 0 5px; height: 90px; width: 100%; border: 1px solid #f2f2f2; }
#convenios .bx-wrapper img { filter: grayscale(1); -webkit-filter: grayscale(1); -moz-filter: grayscale(1); -filter: grayscale(1); -ms-filter: grayscale(1); }
#convenios .bx-wrapper img:hover { filter: grayscale(0); -webkit-filter: grayscale(0); -moz-filter: grayscale(0); -o-filter: grayscale(0); -ms-filter: grayscale(0); }
#convenios .bx-controls.bx-has-controls-direction, #galeria .bx-controls.bx-has-controls-direction { display:none!important }

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

#mapa { border:1px dotted #5CC6D0; padding:0.2em 0.2em 0; margin-right:3em; }
	#mapa iframe { border:1px solid #BCD05C; }
#endereco { display:table; margin:3em auto; padding:0.5em; text-align:center; }
	
section, #convenios, .galeria-todas, #destaques { display:table; width:100%; }
#convenios { width:99%; }

.grupo3 { display:inline-block; width:28%; float:left; }
.verde { color:#BCD05C }
.borda-verde { border-color:#BCD05C }
.borda-laranja { border-top:3px solid #F79D1A; border-bottom:3px solid #F79D1A; }

#galeria .bx-wrapper { border-top:5px solid orange; border-bottom:5px solid orange; background-color:#f0f0f0; padding:20px; margin:1.5% auto; }
#galeria .bx-wrapper img { border-radius: 20px; border:1px solid orange; height:165px; }

.galeria-todas ul {}
.galeria-todas li { float:left; width: 25%; border-radius: 5px; border: 1px solid #CCC; padding: 3%; background-color: #FFF; margin:3% 0 }
.galeria-todas li:nth-child(even+2) { margin:3%; }
.galeria-todas img { width:100%; border:1px solid #F79D1A; height:150px }

#equipe { margin:5% 0 10% 0; }
#equipe img { width:200px!important; border-radius:100px; margin:10px auto 20px; display:table; border: 2px solid #f37221; }
#equipe img:hover { box-shadow: 0 0 20px 10px orange }
#equipe li { display:table; margin:5% auto; width:auto; padding:1%; }
#equipe li a { text-align:center; }
#equipe li h6 { font-size:18px; line-height:28px; }
#equipe li ul { display:none; clear:both; text-align:center; }

.info { display:block; padding:5% 0; margin:3% auto; }
.info img { width:150px!important; float:left; margin-right:50px; margin-bottom:50px; }
.info img:hover { filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0; cursor:default; }
.info h6, .info p { display:table; clear:none;}


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




/* Footer ================================================================================ */
#facebook { margin:0 auto; display:table; clear:both; text-align:center; }
#facebook .fb_iframe_widget { margin:0 auto; border:1px solid orange; }

footer { background:url(../images/banners/bg_banner.jpg) no-repeat 0 0; width:100%; height:80px; padding:5px 0;     border-top: 1px dotted #CCC; }
#copy { display:block; width:100%; text-align:center; font-size:14px; }
#redes{ border:1px solid #CCC; background-color:#FFF; display:table; margin:8px auto; border-radius:8px;-moz-box-shadow: 0 0 5px #ccc; -webkit-box-shadow: 0 0 5px #ccc; box-shadow:0 0 5px #ccc; }
	#redes li { float:left; margin:0; border-right:1px solid #CCC; padding:3px 8px 0; }
	#redes li:last-child { border:none; }
	

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

/* Hacks / Responsive ==================================================================== */
/* Menu Responsivo */
@media screen and (max-width: 800px) 
{
	.limite { width:98%; margin-left:-50%; }
	.galeria-todas ul img { height:auto; }
	.btns { margin-right:0; }
	
	
	/* menu */
	nav { display:inline-block; width:100%; border:none!important }	
	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; display: table; margin: 0 auto; }
	nav{ margin-top:5em; }
	nav ul { width:90%; min-height:40px; }
	article { width:95%; }
	aside .grupo3, #destaques .grupo3 { display: inline-block; width: 86%!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: 82%; 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%; }
	#convenios .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; }
	#convenios { 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; }
	#convenios .bx-wrapper { height:auto!important }
	#facebook { margin-top:50px }
}

/* 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 */
}

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