/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */

/* #Page Styles
================================================== */

/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
		#wraper { width: 708px; }
		
		.header nav ul li { margin-right: 16px; }
		.header nav ul li.first { margin-right: 16px; } 
		
		.slider ul {  height: 310px; }
		
		.logo_3d { top: -20px; }
		.slider ul li p { padding: 30px 40px 30px 30px; }
		p.conheca_produtos { left: -30px; padding-right: 40px; width: 115px; }
		.produtos { width: 290px; }
		ul.produtos li { width: 165px; padding-left: 105px; }
		
		.img_fade { width: 195px; }
		.container .new.columns { width: 246px; }
		.link { padding-right: 10px; }
		.localizacao { background: url('../imagens/mini_map2.jpg?1231') 56px 80px no-repeat; } 
		.eventos_mini { background: url('../imagens/bg_eventos.png') 160px 55px no-repeat; }
		.central_vendas { background-position: -38px top; }
		
		.column_one, .column_two, .column_three, .column_four, .column_five { padding-left:  20px; }
		.column_one { width: 110px; border-left: none; }
		.column_two { width: 70px; }
		.column_three { width: 130px; }
		.column_four { width: 155px; }
		.column_five { width: 85px; border-right: none; }
		
		.address { width: 768px; }
		.logo_bottom { margin-right: 207px; }
		
		/* INTERNAS */
		
		.logo_3d_interna { width: 400px; }
		.sidebar .central_vendas { background-position: -10px top; }
		.sidebar .localizacao { background-position: 55px 80px; }
		
		.produto_interna { width: 118px; text-decoration: none; color: white; font-size: 18px; display: inline-block; padding: 6px 40px 7px 65px; }
		.blue_interna { left: -220px; top: 115px; background: url('../imagens/alloxy_blue.jpg') left center no-repeat, #14bede url('../imagens/arrow_right.png') 235px center no-repeat;}
		.green_interna { left: 267px; top: 115px; background: url('../imagens/alloxy_green.jpg?1231') right center no-repeat, #b5d65e url('../imagens/arrow_right.png') 25px center no-repeat; }
		
		.ilustration { width: 200px; top: 5px; right: -26px; }
		#acido_peracetico .ten p, #acido_peracetico .ten h1, #acido_peracetico .ten .back, #acido_peracetico .ten h5, #acido_peracetico .ten h4 { padding-left: 30px; padding-right: 50px; }
		
		.buttons img { width: 220px; }
		
		
		
		input.percent_40 { width: 24%; margin-right: 10px; float: left; }
		input.percent_60 { width: 61%; margin-right: 10px; float: left; }
		.percent_20 { width: 19%; float: left; margin-right: 10px; }
		.percent_30 { width: 24%; float: left;}
		input.percent_10 { width: 8%; margin-right: 10px; float: left; padding: 6px 5px; }
		
		.mapa-local { width: 350px; margin-left: 50px; }
		
		.central_vendas span a { letter-spacing: 0px; }
		
		#contato input[type="text"], textarea { width: 87%;  }
		
		#peroxido_hidrogenio p.inicio { padding-right: 0; }
		
		ul.certificacoes li { padding: 0; }
		ul.galeria { width: 280px; }
		
		.ambiente { display:  block; }  
		.meio_ambiente_bg { display: none; }
		.p_1, .p_2, .p_3  { width: auto; margin: 45px 0; }
		
		.column_five ul li img { width: 120%; }
	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		#wraper { width: 360px; } 
		.header .four { text-align: center; }
		
		.slider ul {  height: 169px; }
		
		.logo_3d { width: 310px; left: -190px; top: -10px; }
		
		.slider ul li { overflow: visible; }
		.slider ul li p { padding: 0; background: none; font-size: 18px; position: relative; top: 0; float: right; }
		.slider ul li p span.description { display: none; font-size: 18px; text-transform: none; font-weight: normal; color: #0d7f99; margin-top: 5px; margin-left: 0; }
		
		.bem-vindo { border: none;  }
		.bem_vindo { background: url('../imagens/separator.png') right bottom no-repeat; margin-bottom: 30px; border-bottom: 1px solid #e1e1e1; padding-bottom: 15px; }
	  	ul.produtos { float: none; margin: 0;}
		ul.produtos li { width: 235px; }
		p.conheca_produtos { position: relative; top: 0; left: 0; width: 290px; background: url('../imagens/seta_down.png') right center no-repeat; }
		.produtos_lista { background: url('../imagens/separator.png') right bottom no-repeat; border-bottom: 1px solid #e1e1e1; padding-bottom: 15px;}
		
		.img_fade { width: 360px;}
		.nossa_estrutura, .meio_ambiente { border: none; }
		.meio_ambiente, .certificacoes { padding-left: 0; }
		.meio_ambiente { padding-right: 0; }
		#acido_peracetico p.inicio { padding-right: 0; }
		
		.container .new.columns { width: 420px; }  
		
		.certificacoes { padding-bottom: 70px; background: url('../imagens/separator.png') right bottom no-repeat; border-bottom: 1px solid #e1e1e1; }
		.localizacao { background-position: 63px 78px; border-right: none; border-bottom: 1px solid #e1e1e1; padding-bottom: 25px; } 
		.eventos_mini { border-bottom: 1px solid #e1e1e1; padding-bottom: 25px; } 
		
		.meio_ambiente, .distribuidor_autorizado { padding-left: 0; padding-right: 0; border-right: none; }
		.distribuidor_autorizado { padding-bottom: 30px; padding-top: 20px; border-bottom: 1px solid #e1e1e1; }
		.central_vendas { padding-top: 25px; background-position: left 23px }
		
		.column_one { width: 100%; text-align: center; padding-left: 0; padding-right: 0; border: none; height: 110px; }
		.column_two { width: 100%; text-align: center; padding-left: 0; padding-right: 0; border: none; height: 70px;} 
		.column_three { width: 100%; text-align: center; padding-left: 0; padding-right: 0; border: none; } 
		.column_four { width: 100%; text-align: center; padding-left: 0; padding-right: 0; border: none; }
		.column_five{ width: 100%; text-align: center; padding-left: 0; padding-right: 0; border: none; height: 80px;}
		
		.address { width: 420px; }
		.address .three, .address .four, .address .eight { width: 100%; text-align: center; margin-bottom: 20px; }
		.bem_vindo { padding-right: 0; }
		
		/* INTERNAS */
		
		.logo_3d_interna { display: none; }
		#empresa .sidebar, #contato .sidebar, #cotacoes .sidebar, #localizacao .sidebar, #nossa_estrutura .sidebar, #meio_ambiente .sidebar, #licencas_certificacoes .sidebar, #eventos .sidebar { display: none; }
		#localizacao .ten img { width: 355px; }
		#empresa .ten p, #empresa .ten h1, #empresa .ten h2, #empresa .ten .back, #empresa .ten h3 { padding: 0 0; }
		#eventos .ten p, #eventos .ten h1, #eventos .ten h2, #eventos .ten .back, #eventos .ten h3 { padding: 0 0; }
		ul.default { padding: 0 20px; }
		#contato .ten p, #contato .ten h1, #contato .ten form, #contato .ten .back { padding: 0 0; }
		#cotacoes .ten p, #cotacoes .ten h1, #cotacoes .ten form, #cotacoes .ten .back { padding: 0 0; }
		#licencas_certificacoes .ten p, #licencas_certificacoes .ten h1, #licencas_certificacoes .ten form, #licencas_certificacoes .ten .back { padding: 0 0; }
		input[type="text"], textarea { width: 90%; }
		
		.produtos { width: 360px; }
		
		.produtos { width: 335px; margin: 30px auto; position: relative; }
		#produtos .back { position: relative; top: 0; }
		#produtos .sidebar { position: relative; top: 0; left: 0; }
		#produtos .distribuidor_autorizado { margin-top: 190px; }
		p.right { position: relative; top: 0; left: 0; }
		
		.ilustration { display: none; }
		
		#produtos .distribuidor_autorizado { display: none; }
		#acido_peracetico .distribuidor_autorizado, #acido_peracetico .buttons { display: none; }
		
		.blue_interna { position: relative; left: 0; top: 0; margin-bottom: 20px;}
		.green_interna { position: relative; left: 0; top: 0; margin-top: 20px;}
		.produto_interna { width: 170px; text-decoration: none; color: white; font-size: 18px; display: inline-block; padding: 6px 60px 7px 85px; }
		
		#acido_peracetico .ten p, #acido_peracetico .ten h1, #acido_peracetico .ten .back, #acido_peracetico .ten h4, #acido_peracetico .ten h5, #acido_peracetico .ten h6 { padding-left: 0; padding-right: 0; }
		#localizacao .ten p, #localizacao .ten h1, #localizacao .ten .back, #localizacao .ten h4, #localizacao .ten h5 { padding-left: 0; padding-right: 0; }
		#nossa_estrutura .ten p, #nossa_estrutura .ten h1, #nossa_estrutura .ten .back, #nossa_estrutura .ten h4, #nossa_estrutura .ten h5 { padding-left: 0; padding-right: 0; }
		#meio_ambiente .ten p, #meio_ambiente .ten h1, #meio_ambiente .ten .back, #meio_ambiente .ten h4, #meio_ambiente .ten h5 { padding-left: 0; padding-right: 0; }
		
		ul.galeria { margin-left: 0; width: 340px; }
		ul.galeria li ~ img { width: 162px; }
		
		#acido_peracetico .sidebar_menu { border-right: none; margin-bottom: 40px; }
		#peroxido_hidrogenio .sidebar_menu { border-right: none; margin-bottom: 40px; }
		.sidebar_menu { padding-bottom: 35px; background: url('../imagens/separator.png') right bottom no-repeat; border-bottom: 1px solid #e1e1e1; } 
		.sidebar_menu li { padding: 10px 10px; margin-bottom: 0; border-bottom: 1px solid #e1e1e1; width: 95%; }
		#acido_peracetico .sidebar .nossa_estrutura, #acido_peracetico .sidebar .localizacao, #acido_peracetico .sidebar .buttons, #acido_peracetico .sidebar .distribuidor_autorizado { display: none; }
		#peroxido_hidrogenio .sidebar .nossa_estrutura, #peroxido_hidrogenio .sidebar .localizacao, #peroxido_hidrogenio .sidebar .buttons, #peroxido_hidrogenio .sidebar .distribuidor_autorizado { display: none; }
		
		input.percent_40 { width: 27%; margin-right: 10px; float: left; }
		input.percent_60 { width: 63%; margin-right: 10px; float: left; }
		.percent_20 { width: 19%; float: left; margin-right: 10px; }
		.percent_30 { width: 24%; float: left;}
		input.percent_10 { width: 8%; margin-right: 10px; float: left; padding: 6px 5px; }
		
		#empresa .ten, #contato .ten, #cotacoes .ten { margin-top: 0; }
		
		.mapa-local { width: 350px; margin-left: 0; }
		
		#home .nossa_estrutura, #home .meio_ambiente { margin-bottom: 60px; }
		
		img.fade { display: none; }
		#contato select { width: 95%; }
		ul.certificacoes { margin-left: 0; border: none; background: none; width: 360px; }
		ul.certificacoes li img {  width: 178px; }
		
		ul.galeria { width: 280px; }
		.ambiente { width: 355px; }
		
		.column_five ul li img { width: 40%; }
	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
		#wraper { width: 240px; } 
		
		.slider ul {  height: 121px; }
		.logo_3d { width: 255px; left: -165px; top: -20px; }
		
		.slider ul li { overflow: visible; }
		.slider ul li img { width: 240px; }
		.slider ul li p { padding: 0; background: none; font-size: 15px; }
		.slider ul li p span.description { display: none; font-size: 15px; text-transform: none; font-weight: normal; color: #0d7f99; margin-top: 5px; margin-left: 0; }
		
		.header select { display: inline-block; }
		.header .nine { display: none; float: none; }
		.header .four { margin-bottom: 20px;}
		.bem_vindo { padding-right: 0; }
		ul.produtos li { width: 170px; padding-left: 50px; }
		
		.localizacao { background-position: 58px 78px; }
		
		.img_fade, .container .new.columns { width: 240px; }
		
		#localizacao .ten img { width: 240px; }
		
		.column_one { width: 100%; text-align: center; border-right: none; height: 110px; }
		.column_two { width: 100%; text-align: center; padding-left: 0; height: 70px;} 
		.column_three { width: 100%; text-align: center; border-right: none; } 
		.column_four { width: 100%; text-align: center; padding-left: 0; }
		.column_five{ width: 100%; text-align: center; }
		
		.footer select { display: block; width: 100%; }
		.address { width: 300px; }
		
		/* INTERNAS */
		
		.produtos { width: 240px; }
		.produto_interna { width: 135px; text-decoration: none; color: white; font-size: 18px; display: inline-block; padding: 6px 40px 7px 50px; }
		
		#acido_peracetico .ten p, #acido_peracetico .ten h1, #acido_peracetico .ten .back, #acido_peracetico .ten h4, #acido_peracetico .ten h6 { padding-left: 0; padding-right: 0; }
		
		.header_blue { height: 119px; background-position: -15px top; position: relative; }
		
		.sidebar_menu li { width: 91%; }
		input[type="text"], textarea { width: 85%; }
		input.percent_40 { width: 85%; }
		input.percent_60 { width: 85%; ; }
		.percent_20 { width: 100%; }
		.percent_30 { width: 100%; }
		input.percent_10 { width: 95%;  }
		
		.mapa-local { width: 240px; margin-left: 0; }
		
		p.conheca_produtos { width: 195px; background: url('../imagens/seta_down.png') right center no-repeat; }
		#contato select { width: 100%; }
		
		
		ul.certificacoes { margin-left: 0; border: none; background: none; width: 240px; }
		ul.certificacoes li img {  width: 119px; }
		
		ul.galeria { width: 220px; }
		ul.galeria li { width: 210px; height: 153px; }
		ul.galeria li img.foto { width: 210px; }  
		ul.galeria li span { top: 60px; left: 90px; }
		
		.ambiente { width: auto; }
		
		.column_five ul li img { width: 75%; }
		
	}


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/