/* General Styles
==================================================*/
html,body {height: 100%;}
.footerput {min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -210px;}
.footerclr {height: 210px; clear: both;}


body {background-color:#FFF; font-family: 'Open Sans', Calibri, Arial, Helvetica, sans-serif; font-weight: 400; font-size: 95%;}
h1, h2,	h3, h4, h5, h6 { font-family: 'Open Sans', Calibri, Arial, Helvetica; font-weight: 300;}
h1{font-size: 2.60em; margin: 0.55em 0 0.50em 0}
h2{font-size: 1.80em; margin: 0.83em 0; line-height:1.5em}
h3{font-size: 1.30em; margin: 1.00em 0 0.50em 0; font-weight:400}
h4{font-size: 1.00em; margin: 1.33em 0}
h5{font-size: 0.83em; margin: 1.67em 0}
h6{font-size: 0.75em; margin: 2.33em 0}

a:hover, a:focus {text-decoration: underline;}
a:active, a.active {color:#663399}
p a, p a:visited, button, .button { line-height: inherit}


input[type="text"], input[type="tel"], input[type="password"], input[type="email"], textarea, select
{ -webkit-box-sizing:border-box; -ms-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; 
	display:block; width:100%; max-width:100%; 
	padding:5px 8px; margin:5px 0; 
	color:#666; outline:none; 

	border:0;
	border-bottom: 2px solid #999;
	-webkit-border-radius:1px; -moz-border-radius:1px; border-radius:1px; -webkit-appearance:none; background:#FFF;
}

textarea {border:2px solid #666; min-height: 150px}


input:focus, textarea:focus, select:focus 
	{border-bottom:2px solid #000; color:#000; -webkit-box-shadow:0px 0px 1px #CCC; -moz-box-shadow:0px 0px 1px #CCC; box-shadow:0px 0px 1px #CCC}

button, a.button, .button 
{ -webkit-box-sizing:border-box; -ms-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
	
	text-align:center;
	color:#FFF;
	background-color:#000;

	border:1px solid #000;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
	
	display:inline-block;
	padding:8px 24px;
	text-decoration:none;
	
	cursor:pointer;
	min-width:180px; 
}

button:hover, a.button:hover, .button:hover, button:focus, a.button:focus, .button:focus 
	{ text-decoration:none !important; background-color:#333;}

button:active, a.button:active, .button:active 
	{ position:relative; top:1px;}

button.lead, a.button.lead, .button.lead 
	{padding: 24px 34px}

button.secondary, a.button.secondary, .button.secondary 
	{background:#FFF; color:#000; text-shadow:none; line-height:1em}

button.secondary:hover, a.button.secondary:hover, .button.secondary:hover 
	{color:#333}

label, .label {display:block; position:relative; color:#333; margin-bottom:10px; font-size:0.9em; letter-spacing:0.1em}
	legend, .legend {display:block; width:100%; margin:15px 0; font-size:1.4em; line-height:1em;}
	label.error, .label.error {position:absolute; right:0; top:3px; font-size:.8em; color:#F00; padding:0; margin:0; width:auto !important;}
	input.error, select.error, textarea.error {border-color:#FF0000}

::placeholder {color:#FFF}

 .lazyimg {opacity:0; -webkit-transition:opacity 900ms; -moz-transition:opacity 900ms; -ms-transition:opacity 900ms; transition:opacity 900ms}
	.lazyimg.loaded {opacity:1}

.messagereturn {padding: 20px;background: #f1f1f1;margin: 15px 0;}

.main-content {margin-top: 50px;}

.tabela {width: 100%}

.text-justify {text-align:justify;}

.rel {position:relative;}

.oonm {display:none !important;}

.desenvolvedor {width:140px;margin:0 auto}
	.desenvolvedor img {max-width:100%}

/* Site Styles
==================================================*/
#logo {margin: 40px 0; float: left;}
#logo a { width: 120px; height: 60px; background: url(../img/logo-topo.png) no-repeat center; background-size: contain; margin: 0 auto;}


section.main-header {}
	section.main-header a {color: #999; text-decoration: none;letter-spacing: 0.22em;}

	.navi-top {font-size: 0.85em;margin-top: 20px;margin-bottom: 10px;}
		.navi-top a:hover {text-decoration: none; color:#000}
		.navi-top ul {}
		.navi-top ul li {float: left; display: inline-block;}
			.navi-left {float: left;}
			.navi-left li {margin-right: 15px;}
			.navi-right {float: right;}
			.navi-right li {margin-left: 20px;}
			.navi-right .cart {}
			.navi-right a {display:inline-block; padding-right: 23px;}
			.navi-right .cart a {background: url(../img/ico-bag.png) no-repeat right; background-size: contain;}
			.navi-right .user a {background: url(../img/ico-account.png) no-repeat right; background-size: contain;}

	.main-categories {float: left;width: 100%; border-top: 1px solid #CCC; border-bottom: 1px solid #CCC; font-size: 0.95em;}
		.main-categories ul {text-align: center;}
		.main-categories li {display: inline-block; margin: 0 30px;}
		.main-categories a {display: block;padding: 10px 20px;}
		.main-categories a:hover {color:#000 !important}

		.main-categories .search {}

	.dd-header-menu {}
		.dd-header-menu:hover {background-color:#FFF}
		.dd-header-menu:hover .dd-header-menu-container {visibility:visible;opacity:0.99}
		.dd-header-menu-container {position:absolute;z-index:9;font-size:1em;padding:30px 20px 5px;right:130px;left:130px;background-color:#FFF; background-color:rgba(255, 255, 255, 0.98); border-bottom-right-radius:5px; border-bottom-left-radius:5px;font-weight:normal;border-right:1px solid #000;border-bottom:1px solid #000;border-left:1px solid #000;visibility:hidden; -webkit-transition: opacity 300ms, visibility 300ms; transition: opacity 300ms, visibility 300ms;opacity:0}
			.dd-header-menu-container ul { padding:10px 0; float:left; width:25%;}
			.dd-header-menu-container li {line-height:1em;overflow:hidden;border:0;margin:5px 3px;text-align:center;display:block;font-size:0.92em;}
			.dd-header-menu-container li:hover {border-radius:1px;}
			
			.dd-header-menu-container li a {border:0; color:#999; display:inline-block; padding:10px 5px;}
			.dd-header-menu-container li.mainlevel {font-size:1em;text-transform:uppercase;}
			.dd-header-menu-container li.nextlevel {margin:5px;}
			.dd-header-menu-container li.nextlevel a {padding:5px 3px;color:#666;}

			.dd-header-menu-container li.thirdlevel {margin:2px; display:none;}
			.dd-header-menu-container li.thirdlevel a {color:#a9a398;padding:3px;}

			/*.dd-header-menu-container li.nextlevel:hover + ul .thirdlevel {display:block;}*/

			.rel.cont .dd-header-menu-container {left:-18px;padding:0;right:-18px; text-align:center;}
			.rel.cont .dd-header-menu-container ul {width:100%}


section.main-footer {text-align: center; letter-spacing:0.2em}
	.main-footer .company-name {font-size: 1em;margin: 15px; font-weight: bolder; color: #000}
	.main-footer p {font-size: 0.7em;margin: 6px 0;color: #999}
	.main-footer .formasdepagamento {width: 320px;margin: 10px; opacity: 0.6}



section.instagram {}
	.instagram p a {color: #000;text-decoration: none}
	.grid-instagram {}
	.grid-instagram ul {}
	.grid-instagram li {width: 150px;height: 150px;float: left;margin: 5px;overflow: hidden;}
	.grid-instagram img {max-width: 100%;}



section.home-tabs {}
	.home-tabs ul {text-align: center;margin-top: 10px;}
	/*.home-tabs li {;display: inline-block; margin: 5px; line-height: 4em; width: Calc(33% - 12px); font-size: 0.95em}*/
	.home-tabs li {display: inline-block; margin: 5px; line-height: 4em; width: Calc(50% - 12px); font-size: 0.95em}
	.home-tabs li:last-child {}
	.home-tabs a {display: block;color: #999;text-decoration: none;letter-spacing: 0.22em;border: 1px solid #999; }
	.home-tabs a:hover {border-color: #000;;;color: #000}



section.grid-products {}
	.grid-products li {display:block; float:left; width:234px; margin:0 3px 40px; height:400px; background-color:#FFF; position:relative}
	.grid-products li a {text-decoration:none} .grid-products li a:hover {text-decoration:none; color:#444} 
	.grid-products li img {display:block}
	.grid-products .gprod-info { font-size:0.8em; padding:0 2px; color:#444; letter-spacing:0.1em;}
					.gprod-info .gprod-nome { text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:bolder; margin:10px 0 5px}
					.gprod-info .gprod-preco {margin:0 }
					.sale .gprod-info .gprod-preco {color:red;}
	.grid-products .de {text-decoration:line-through; color:red}

	.grid-products li > span {color:#FFF; padding:2px 5px; position:absolute; left:0; font-size:.8em;}
	.grid-products li > span.frete {background:green; top:100px}
	.grid-products li > span.sale {background:red; top:204px; left:auto; right:0; text-align:center;}
	.grid-products li > span.new {background:#EEE; top:5px; text-align:center; color:#000;}

	.grid-products .img {width:234px; height:295px; overflow:hidden;}
	.grid-products .img img {max-width:100%;}

	.grid-products li.estoque-0 {opacity:0.4}


section.search-page {}
	.search-page .grid-products.grid_9 {width:720px; margin-left:0; margin-right:0;}


section.grid-cart {}
	.grid-cart ul {font-size:.8em}
	.grid-cart li {display:block; float:left; width:100%; height:140px; overflow:hidden; margin-bottom:10px;}
	.grid-cart li > a {display:block; float:left; width:100px; margin-right:10px}
	
	.cart-info {float:left; width:calc(100% - 110px); margin-top:10px;}
	.cart-info span {margin:2px 0;display:block;}
	.cart-info .prod-nome { max-height:45px; color:#444; font-size:1.2em; font-weight:bolder; }
	.cart-info .prod-ref {}
	.cart-info .prod-option {}
	.cart-info .prod-offer {}

	.cart-info .buttons {border: 1px solid; display: inline-block;line-height: 1em;font-size: 2em;}
		.cart-info .buttons span {display: inline;}
		.cart-info .buttons b {line-height: 1.4em;border-left: 1px solid #999;border-right: 1px solid #999;font-size: 0.8em;padding: 0 6px;display: inline-block;}
	.cart-info .buttons a {text-decoration: none;display: inline-block;width: 40px;text-align: center;color: #000;}



section.product-details {}
	.prod-info {letter-spacing: 0.1em}
		.prod-info .prod-marca {margin:0; font-size:0.9em;display: none;}
		.prod-info .prod-nome {font-size:1.5em; line-height:1.2em; margin:0;font-weight:bolder;}
		.prod-info .prod-offer {margin:15px 0; line-height:1.6em}
		.prod-info .prod-offer p {margin-top:0;}
		.prod-info .prod-offer .por {font-weight:bolder;}
		.prod-info .prod-offer .em {font-size:1.3em; font-weight:bolder;}
		.prod-info .prod-texto {background:#FFF; padding:5px; margin:10px 0; font-size:0.9em; max-height:180px; overflow:scroll; overflow-x: hidden;}
		.prod-info .prod-texto p {margin:5px 0;}

		.prod-info button, .prod-info a.button, .prod-info .button {width:100%;}

		.prod-info .prod-other-l {margin: 10px 5px;}
		.prod-info .prod-other-l a {color: #666;text-decoration: none;}
		.prod-info .prod-other-l a:hover {text-decoration: underline;}

	.p-options-cb p {margin-bottom:5px; font-weight:bolder;} .p-options-cb ul {margin-bottom:20px}
	.p-options-cb label {font-size:0.8em; display:block; float:left; margin:3px; background-color:#FFF; padding:5px 10px; border:1px solid #f1f1f1; cursor:pointer; width:Calc(50% - 30px)}
	.p-options-cb label:hover {border-color:#999;}
	.p-options-cb input[type="radio"] {display:none;}
	.p-options-cb input[type="radio"]:checked + label {color:#000; border-color:#000;}


section.contact {}
	.contact textarea {height: 215px}
	.contact-bottom {margin-top:50px; letter-spacing: 0.1em; font-size: 0.9em}

section.checkout {margin-bottom:200px}

	.card-month-year{position:relative;width:100%;font-size:0.9em; letter-spacing:0.1em}
		.card-month-year-title {display:block; float:left;width:100%; }
		.card-month-year .divider {display:block;float:left;line-height:2em;margin:0 10px; width:10px}
		.card-month-year select {float:left; width: Calc(50% - 18px) !important;}
	
	#checkout-frete input[type="radio"] {width: 25px;}
	
	#checkout-frete label, 
	#checkout-formapagamento .options label  { float:left; width:100%; cursor:pointer; display:block; margin:10px 0; letter-spacing: 0;}
	#checkout-frete label.error {position:relative;}
	
	#checkout-valores {width:Calc(100% - 20px); padding:10px; margin:0 0 10px 0; background:#EFEFF1}
	#checkout-valores p {font-size:1.1em; margin:2px 0; position:relative}
	#checkout-valores span {font-size:1.4em; position:absolute; right:0; top:0}

	.personal-data, .shipping-data {margin-bottom: 50px;}
	.personal-address {}


.off { display:none }

.popup-modal-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #00000022;
	z-index: 100;
}

.popup-modal-wrapper .popup-modal {
	position: relative;
	width: 800px;
	left: calc(50% - 400px);
	top: calc(50% - 400px);
}

.popup-modal-wrapper .popup-modal img {
	width: 100%;
}

#popup-action {
	position: relative;
	top: unset !important;
	bottom: 115px !important;
	width: 230px;
	left: calc(50% - 115px);
}

#popup-close {
	position: fixed;
	top: calc(50% - 365px);
	right: calc(50% - 365px);
	background-image: url(../img/ico-close.svg);
	background-size: 42px 42px;
	width: 42px;
	height: 42px;
	z-index: 200;
	cursor: pointer;
}

@media only screen and (max-width: 1280px) {
	.popup-modal-wrapper .popup-modal {
		position: relative;
		width: 70%;
		left: 15%;
	}
	#popup-close {
		top: calc(50% - 385px);
		right: calc(15% + 15px);
	}
}

@media only screen and (max-width: 767px) {
	.popup-modal-wrapper .popup-modal {
		position: relative;
		width: 90%;
		left: 5%;
		top: 5%;
	}
	#popup-action {
		position: relative;
		top: unset !important;
		bottom: 70px !important;
		left: unset;
	}
	#popup-close {
		top: 8%;
		right: 8%;
	}
}

@media only screen and (max-width:767px) {

	.footerput {margin: 0 auto -300px;}
	.footerclr {height: 300px;}

	h1{font-size: 1.80em;}
	h2{font-size: 1.30em;}
	h3{font-size: 1.05em;}
	h4{font-size: 1.00em;}
	h5{font-size: 0.83em;}
	h6{font-size: 0.75em;}

	legend, .legend {font-size:1.1em; font-weight:bolder;}


	header {border-bottom:1px solid #000}

	#logo {margin: 15px 0}
		#logo a {width: 84px;height: 50px}

	.nav-mobile-menu {padding-bottom:10px;position:absolute;left:0;right:0;margin-top:-52px;}
		.nav-mobile-menu li {margin:0 10px}
		.nav-mobile-menu li a {width:35px; height:30px;}
		.nav-mobile-menu li.m-cart {background:url(../img/ico-bag.png) center no-repeat; background-size:contain; float:left; position:absolute;z-index:10;}
		.nav-mobile-menu li.m-user {background:url(../img/ico-account.png) center no-repeat; background-size:contain; float:left; right:50px; position:absolute;z-index:10;}
		.nav-mobile-menu li.m-search {background:url(../img/ico-search.png) center no-repeat; background-size:contain; float:right; left:50px; position:absolute;z-index:10;}
		.nav-mobile-menu li.m-menu {background:url(../img/ico-menu.png) center no-repeat; background-size:contain;float:right; right:0; position:absolute;z-index:10;}

	.main-categories {border-bottom:1px solid;position: absolute;left:300px;display:none;background:#FFF;padding-bottom:50px; z-index:10;padding:20px;font-size:1.2em}
		.main-categories ul {text-align:right;}
		.main-categories li {margin: 5px 10px;display: block;}
		.main-categories li a {padding: 5px 10px}
		.main-categories .search {position: relative;margin: 5px 10px;}

	.main-banner > div {height:180px !important}

	.main-content {margin-top: 20px;}


	.search-page .grid-products.grid_9 {width:100%; margin-left:0; margin-right:0; margin-top:50px}

	.grid-products li {width: Calc(50% - 6px);margin: 0 3px 40px;height: 330px;}
		.grid-products .img {width: 100%;height: auto;}

	.grid-cart li {height:200px}
		.grid-cart li > a {width:140px}
		.cart-info {width: Calc(100% - 150px)}

	.grid-instagram li {width: Calc(25% - 2px);margin: 1px;height: auto;}


	.prod-info .prod-nome {margin:20px 0;}
	/*.prod-info .prod-button-add {position: fixed; bottom: 10px;right: 10px;left: 10px;width: Calc(100% - 20px) !important;}*/

	.fancybox-toolbar button {width: 25% !important;min-width: auto;}
	.fancybox-show-nav .fancybox-navigation button {min-width:auto; width:25% !important}


	section.checkout {margin-left: 15px;margin-right: 15px;}

	#checkout-valores {width:100%;}

	#checkout-frete label {padding:10px 0}


	.main-footer p {font-size: 0.8em;}
	.main-footer .company-name {font-size: 1.2em;}



	.oonm {display:block !important} .offm {display:none}
}