@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700,900);
@import url(https://fonts.googleapis.com/css?family=Oswald:400,300);

@import url('https://fonts.googleapis.com/css2?family=Forum&display=swap');

/***************************************************/
/********************** GERAL **********************/
/***************************************************/

body											{ margin:0; color:#333; background: #39221f; height: 100%; font:400 14px 'Lato'; }
html											{ height: 100%; }

*												{ outline:none; -webkit-font-smoothing: antialiased; }
img												{ border:0px; }
form											{ margin:0px; padding:0px; }

.l												{ float:left; }
.r												{ float:right; }
.b,b,strong										{ font-weight:700; }
.bb												{ font-weight: 900; }
.hide											{ display:none; }
.clear											{ clear:both; }
.clear.spacer									{ height: 60px; }
.clear.minSpacer								{ height: 30px; }
.color											{ color:#F15B28; }
.marginSide										{ margin: 0 10px; }
.forceSquare									{ width: 100%; height: auto; }


a:link											{ text-decoration: none; color:#e9e9e9; }
a:visited										{ text-decoration: none; color:#e9e9e9; }
a:hover											{ text-decoration: none; color:#fff; }
a:active										{ text-decoration: none; color:#fff; }

.input											{ background: #fff; border: 0; box-shadow: 0 0 2px #999; outline: none; resize: none; border-radius:2px; padding:7px 1%; }
.input:focus									{ box-shadow: 0 0 2px #666; }
.input::-webkit-input-placeholder				{ color:#999; }
.input:focus::-webkit-input-placeholder			{ color:#b7b7b7; }
.button,a.button								{ background: #39221f; color: #fff; margin: 1px; padding: 7px 15px; font-size: 14px; border: 0; transition:color 0.2s,background 0.2s; border-radius:5px; }
input.button									{ font-size: 12px; }
.button i,a.button i							{ margin-right: 5px; transition: 0.2s; }
.button:hover,a.button:hover					{ background: #F15B28; cursor: pointer; transition: 0.2s; }
.button:not(.no-animation):hover i,a.button:not(.no-animation):hover i				{ transform: translateX(-3px); transition: 0.2s; }
.select											{ background: #fff url('../img/bg-select-arrow.png') no-repeat 98% center; border: none; line-height: 1; -webkit-appearance: none; cursor: pointer; border-radius:2px; box-shadow: 0 0 2px #999; padding:7px 1%; }



.groupinput .innerpadding .input									{ background: none; border: 0; outline: none; resize: none; padding: 0; margin: 0; width: 100%; box-shadow: none; background: none; font-size: 12px; }
.groupinput .innerpadding .input:focus								{  }
.groupinput .innerpadding .input::-webkit-input-placeholder			{ color:#999; }
.groupinput .innerpadding .input:focus::-webkit-input-placeholder	{ color:#b7b7b7; }
.groupinput .innerpadding .select									{ background: url('../img/bg-select-arrow.png') no-repeat right 5px center; border: none; line-height: 1; -webkit-appearance: none; cursor: pointer; border-radius: 0; }

/***************************************************/
/********************** MENUS **********************/
/***************************************************/

ul.topmenu						{ position: relative; padding:0; margin:0; list-style-type:none; display:flex; width:100%; }
ul.topmenu li					{ position: relative; margin:0; padding:0; float: left; padding: 5px 0; } 
ul.topmenu li.sep				{  }
ul.topmenu li.option>a			{ float:left; text-decoration:none; cursor:pointer; padding: 0; color: #fff; transition:color 0.2s; font:400 18px 'Forum'; text-transform:uppercase; white-space:nowrap; }
ul.topmenu li.option>a .innerpadding	{ padding: 5px 20px; border-right: 1px solid #333; }
ul.topmenu li.option.current>a	{ color: #F15B28; font-weight:400; }
ul.topmenu li a:hover			{ color: #F15B28; transition:color 0.2s; }

ul.topmenu li.option:last-of-type > a .innerpadding{ border-right: 0; }

/*
.submenu,.submenu ul			{ position:absolute; margin:0; padding:0; list-style-type:none; display:none; margin-top:1px; background: #39221f; }
.submenu li						{ position:relative; padding: 5px 20px; }
.submenu li a					{ display:block; color:#F15B28; text-decoration:none; font-size:14px; transition:color 0.2s; white-space:nowrap; }
.submenu li a:hover				{ color: #fff; transition:color 0.2s; }
*/

.submenu						{ position:absolute; left: 0; top: 100%; padding: 10px 0; background: #39221f; border-top: 1px solid #291816; }
.submenu a						{ color:#fff; width: 100%; font-weight:400; transition:color 0.2s; white-space: nowrap; }
.submenu a .innerpadding		{ padding: 5px 15px; }
.submenu a.current				{ color: #F15B28; }
.submenu a:hover				{ color: #F15B28; transition:color 0.2s; }


ul.topmenu li:hover .submenu 	{ display: block; }



.openMenu								{ position:absolute; left: 20px; top: 0; width:33px; height:33px; cursor:pointer; }
.openMenu .path							{ position:absolute; left:4px; right:4px; height:3px; background:#fff; }
.openMenu .path:nth-of-type(1)			{ top:8px; transition-property: all,top; transition-duration: 0.2s,0.2s; transition-delay: 0s,0.2s; }
.openMenu .path:nth-of-type(2)			{ top:15px; opacity:1; transition-property: opacity; transition-duration: 0s; transition-delay: 0.2s; }
.openMenu .path:nth-of-type(3)			{ bottom:8px; transition-property: all,bottom; transition-duration: 0.2s,0.2s; transition-delay: 0s,0.2s; }
.openMenu.open .path:nth-of-type(1)		{ transform: rotate(45deg); -webkit-transform: rotate(45deg); top:15px; transition-property: all,top; transition-duration: 0.2s,0.2s; transition-delay: 0.2s,0s; }
.openMenu.open .path:nth-of-type(2)		{ opacity:0; transition-property: opacity; transition-duration: 0s; transition-delay: 0.2s; }
.openMenu.open .path:nth-of-type(3)		{ transform: rotate(4-5deg); -webkit-transform: rotate(-45deg); bottom:15px; transition-property: all,bottom; transition-duration: 0.2s,0.2s; transition-delay: 0.2s,0s; }



/***************************************************/
/********************* CONTENT *********************/
/***************************************************/

.alignCenter									{ position: relative; width: 100%; margin: 0 auto; }
.innerpadding									{ padding: 20px; }
.innerpadding.removetops						{ padding-top: 0; padding-bottom: 0; }
.innerpadding.removesides						{ padding-left: 0; padding-right: 0; }

.topbar											{ position:fixed; left:0; top:0; width:100%; background: #291816; z-index:11; font-size:12px; color:#fff; }
.topbar .innerpadding							{ padding-top: 10px; padding-bottom: 10px; }
.topbar a										{ font-weight: 400; color:#fff; transition:color 0.2s; }
.topbar a:hover									{ color:#F15B28; transition:color 0.2s; }
.topbar .menu									{ opacity: 0; transition:opacity 0.2s; }
.topbar .menu ul.topmenu li.option a			{ font-size: 12px; padding: 0 40px 0 0; }

.topbar.scroll									{ box-shadow: 0 0 3px #000; }
.topbar.scroll .menu							{ opacity: 1; transition:opacity 0.2s; }


.header											{ position: relative; width: 100%; z-index: 10; }
.header .innerpadding							{ padding-top: 30px; padding-bottom: 0; }
.header .logo									{ position:relative; text-align:left; padding: 20px 0 10px 0; }
.header .logo img								{ width: 100%; max-width: 320px; height: auto; }
.header .menu									{ position: relative; margin: 10px 0 10px -20px; }

.header .mMenu									{ position: relative; width: 100%; padding-top: 20px; }
.header .mMenu ul.topmenu						{ display: block; }
.header .mMenu ul.topmenu li					{ width: 100%; } 
.header .mMenu ul.topmenu li.option a			{ padding: 0; width: 100%; text-align: center; }
.header .mMenu ul.topmenu li.option a .innerpadding	{ padding: 10px 0; }

.header .mMenu ul.topmenu li .submenu			{ position: relative; left: auto; top: auto; display: block; border: none; float: left; width: 100%; padding-top: 0; }
.header .mMenu ul.topmenu li .submenu a	.innerpadding	{  }


.content										{ position: relative; width: 100%; z-index: 1; background: #fff; }
.footer											{ position: relative; width: 96%; padding: 10px 2% 5px 2%; background: #39221f; }
.footer .logo									{ margin-top:10px; }
.footer .menu a									{ float: left; padding: 10px 0 0 30px; color: #fff; transition:color 0.2s; font-size: 14px; font-weight: 400; }
.footer .menu a:hover							{ color: #F15B28; transition:color 0.2s; }
.footer .sitebrand								{ color: #fff; font-size: 11px; font-weight: 400; margin-top: 25px; text-align: center; }
.footer .sitebrand img							{ vertical-align: middle; }


/* GERAL */
.warningBox										{ text-align: center; padding: 50px 0; background: #f1f1f1; }
.bluebox										{ text-align: center; background:#b9d9f7; padding: 1px 0; }
.twothirth										{ position: relative; width: 67%; }
.half											{ position: relative; width: 50%; }
.thirth											{ position: relative; width: 33%; }
.quarter										{ position: relative; width: 25%; }
.full											{ position: relative; width: 100%; }
.full.padding									{ padding: 2%; width: 96%; }
h1												{ font: 300 28px 'Oswald'; margin: 0; text-transform: uppercase; color: #F15B28; }
h2												{ font: 300 18px 'Oswald'; margin: 0; }


.parallaxImage									{ position: relative; min-height: 600px; width: 100% !important; margin: 0; padding: 0; overflow: hidden; }
.parallaxImage .randomImage						{ position: absolute; left:0; top:0; width: 100%; height: 600px; }
.parallaxImage .randomImage						{ background-repeat:no-repeat; background-attachment:fixed; background-position:50% 0; background-color:#000; }

.mobileparallax									{ position: relative; width: 100%; height: 600px; background-position: center center; background-size: cover; }


.warnings{ background: #F15B28; color: #fff; padding: 5px 0; }
.warnings > .alignCenter{ max-width: 1024px; }


/* BREADCRUMB */
.breadcrumb{ background: #291816; }
.breadcrumb .innerpadding{ padding-top: 5px; padding-bottom: 5px; }
.breadcrumb .innerpadding a:after{ content: '>'; padding: 0 10px; opacity: .4; }
.breadcrumb .innerpadding a:last-of-type:after{ content: ''; padding: 0; }


/* HOME */
.homeCatSlider									{ position:relative; width:100%; }
.homeCatSlider .homeCatList						{ position: relative; width: 100%; background-position: center top; background-repeat: no-repeat; }
.homeCatSlider .homeCatList .alignCenter		{ text-align: center; }
.homeCatSlider .homeCatList .forceSquare		{ width: 65%; }
.homeCatList .hover								{ float: left; position: relative; width: 100%; /* background: rgba(0,0,0,0.5); */ }
.homeCatList .verticalAlign						{ position: absolute; top: 50%; left:0; width:100%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); transform: translateY(-50%); opacity: 0; font-weight: 300; font-size: 45px; text-align:center; color:#F15B28; text-shadow:0 0 2px #000; }
.homeCatList.cycle-slide-active .verticalAlign	{ opacity: 1; transition: opacity 0.5s linear 1s; }


/* LIST PRODUCTS */

.price-filter{ display: flex; flex-direction: row; white-space: nowrap; padding: 0 15px; margin: 8px 15px; align-items: center; border-left: 1px solid #e1e1e1; border-right: 1px solid #e1e1e1; }

.filter-wrapper{ background: linear-gradient(to right, #f15a2c , #cc5531); color: #fff; }
.filter-wrapper.prevent-padding{ padding: 10px 0; }
.filter-wrapper > .alignCenter > div{ display: flex; align-items: center; }
.filter-wrapper > .alignCenter > div.number-product-placeholder{ display: none; margin-left: auto; padding-right: 16px; }
.filter-wrapper > .alignCenter > div.number-product-placeholder > .button{ background: #39221f!important; }

.price-filter > form{ display: flex; }
.price-filter > form > .subcat-filter-box{ margin-right: 10px; }
.price-filter > form > .subcat-filter-box:after{ content: '|'; color: #8c8c8c; margin-left: 10px; }

.price-filter > form > .subcat-filter-box #submitProdFilter{ padding-left: 10px; padding-right: 20px; }

.price-filter .input{ width: 50px; margin: 0 5px; text-align: center; padding: 5px 0; }
.price-filter .button{ font-size: 14px; background: transparent; color: #fff; padding: 0; }
.price-filter a.button{ margin-right: 10px; }
.price-filter .button:hover{ background: transparent; }


.listMinProd									{ position: relative; width: 20%; height: 440px; background-color: #fff; border-bottom: 1px solid #f1f1f1; }
.listMinProd .image								{ position: relative; margin: 20px; height: 250px; background-repeat: no-repeat; background-position: center bottom; background-size:contain; transition:all 0.2s; }
.listMinProd .desc								{ position: relative; margin: 10px; height: 70px; text-align: center; color: #333; }
.listMinProd .desc .name						{ position: absolute; top: 0; left: 0; right: 0; font-size: 16px; }
.listMinProd .desc .pvp							{ position: absolute; bottom: 0; left: 0; right: 0; }
.listMinProd:hover								{ box-shadow: 0 0 10px #e1e1e1; z-index: 1; }
.listMinProd:hover .image						{ transform: scale(1.02,1.02); transition:all 0.2s; }


.showProd										{}
.showProd .half									{ width: 46%; padding: 2%; }
.showProd .images .elem							{ width: 100%; }
.showProd .images .elem img						{ max-width: 100%; height: auto; }
.showProd .amount								{ width: 50px; }


.showProd .slidenav								{ position: relative; width: 100%; text-align: center; }
.showProd .slidenav a							{ display: inline-block; width: 10%; }
.showProd .slidenav a .image					{ border: 1px solid #ccc; margin: 2px; transition: border 0.2s; }
.showProd .slidenav a.cycle-pager-active .image	{ border-color: #999; transition: border 0.2s; }
.showProd .slidenav a .image .pdd				{ margin: 2px; background-position: center center; background-repeat: no-repeat; background-size: contain; }


/* LIST BRAND */
.listBrand										{ position: relative; }
.listBrand .alignCenter							{ border-bottom: 1px solid #f1f1f1; }

.listBrand .full								{ width: calc(100% - 30px); padding: 15px; }
.listBrand .elem								{ width: calc(16.66% - 40px); margin: 20px; opacity: 0.7; transition:opacity 0.2s; height: 75px; background-size: 90% auto!important; }
.listBrand .elem:hover							{ opacity: 1; transition:opacity 0.2s; }
.listBrand .elem img							{ width: 100%; height: auto; display: none; }

.listBrand .brand-list							{ float: left; margin: 5px; border: 1px solid #f1f1f1; padding: 10px; color: #333; text-transform: uppercase; }
.listBrand .brand-list:hover{ background: #f9f9f9; }


/* LIST NEWS */
.newsGroup										{ }
.newsGroup .thirth								{ width: 33%; color: #000; transition:opacity 0.2s; opacity: 0.9; }
.newsGroup .thirth.middle						{ margin: 0 0.5%; }
.newsGroup .thirth:hover						{ transition:opacity 0.2s; opacity: 1; }
.newsGroup .thirth .info						{ padding: 5%; }
.newsGroup .thirth .image						{ background-color: #fff; background-repeat: no-repeat; }
.newsGroup .thirth .image img					{ width: 100%; height: auto; }


/* ABOUT */
.aboutGroup										{ position: relative; background: #f1f1f1; }
.aboutGroup .half								{ padding: 2%; width: 46%; color: #000; }
.aboutGroup .half.nav							{ padding: 1% 2%; font-weight: 400; }
.aboutGroup .half.nav a							{ color: #000; transition:color 0.2s; }
.aboutGroup .half.nav a:hover					{ color: #F15B28; transition:color 0.2s; }
.aboutGroup .image								{ position: absolute; right: 0; top: 0; bottom: 0; width: 50%; }

.aboutGroup a{ color: #39221f!important; }
.aboutGroup a:hover{ text-decoration: underline; }

/* LIST MAIN BRAND */
.mainBrandGroup									{ position: relative; width: 100%; background: #fff; }
.mainBrandGroup .horizontalAlign				{ position: absolute; top: 0; left: 50%; width: auto; -webkit-transform: translate(-50%,0); -ms-transform: translate(-50%,0); -moz-transform: translate(-50%,0); transform: translate(-50%,0); }


/* CONTACT */
.contactGroup									{ position: relative; width: 100%; }
.contactGroup .info								{ position: relative; padding: 2%; width: 46%; background: rgba(255,255,255,0.9); color: #000; z-index: 1; }
.contactGroup .info a							{ color: #000; }
.contactGroup .map								{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; }


/* Pagination */
table.pagination								{ border-collapse:collapse; float:left; margin-top:10px; font:bold 14px 'Lato'; }
table.pagination td								{ border:1px solid #fef2e7; padding:0; text-align:center; width:20px; height:20px; }
table.pagination td.submit						{ cursor:pointer; }
table.pagination td.arrow						{ background-color:#fad7b2; }
table.pagination td.arrow.submit				{ background-color:#f1830f; }
table.pagination td.arrow.init					{ background-image:url('../img/pag_goInit.gif'); }
table.pagination td.arrow.end					{ background-image:url('../img/pag_goEnd.gif'); }
table.pagination td.number						{ background:#fff; height:17px; }
table.pagination td.number.submit:hover			{ background:#fef2e7; }
table.pagination td.number.current				{ color:#fff; background:#f1830f; }
table.pagination td.more						{ padding-top:4px; height:16px; border:0; }
table.pagination td.comboPag					{ border:0; padding-left:5px; }


/* USER REGIST */
.registArea											{ width: 100%; }
.registArea .input									{ width:47%; margin:0.5%; padding:7px 1%; }
.registArea .input.error							{ color:#bc0d0d; }
.registArea .input.error::-webkit-input-placeholder	{ color:#f01; }
.registArea .sepZipCode								{ margin-top:9px; color:#fff; }
.registArea .input.zipcode4							{ width:15%; }
.registArea .input.zipcode3							{ width:10%; }
.registArea .select									{ width:49%; margin:0.5%; padding:7px 1%; }
.registArea .button									{ margin:0.5%; }

.passRecover										{  }
.passRecover .input									{ border-right:0; border-radius:2px 0 0 2px; margin-right:0; width:30%; padding:7px 1%; }
.passRecover .button								{ border-radius:0 2px 2px 0; margin-left:0; padding:7px 1%; }

.loginArea											{ width: 30%; }
.loginArea p										{ margin: 0; }


/* SCROLL */
.jspContainer									{ overflow:hidden; position:relative; }
.jspPane										{ position:absolute; }
.jspVerticalBar									{ position: absolute; top: 0; right: 0; width: 6px; height: 100%; padding: 2px; }
.jspHorizontalBar								{ position: absolute; bottom: 0; left: 0; width: 100%; height: 5px; }
.jspVerticalBar *,
.jspHorizontalBar *								{ margin: 0; padding: 0; }
.jspCap											{ display: none; }
.jspHorizontalBar .jspCap						{ float: left; }
.jspTrack										{ background:none; position: relative;  }
.jspDrag										{ background:#1c1c1c; position: relative; box-shadow: 0 0 3px #000; top: 0; left: 0; cursor: pointer; }
.jspDrag:hover									{ background-position:center right; }
.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag						{ float: left; height: 100%; }
.jspArrow										{ background: #50506d; text-indent: -20000px; display: block; cursor: pointer; }
.jspArrow.jspDisabled							{ cursor: default; background: #80808d; }
.jspVerticalBar .jspArrow						{ height: 5px; }
.jspHorizontalBar .jspArrow						{ width: 5px; float: left; height: 100%; }
.jspVerticalBar .jspArrow:focus					{ outline: none; }
.jspCorner										{ background: #eeeef4; float: left; height: 100%; }
/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner								{ margin: 0 -3px 0 0; }




/* Tooltips */
.tipsy { padding: 5px; font-size:13px; position: absolute; z-index: 100000; }
.tipsy-inner { padding: 5px 8px 4px 8px; background-color: black; color: white; max-width: 200px; text-align: center; }
.tipsy-inner { border-radius: 3px; /*-moz-border-radius:3px; -webkit-border-radius:3px;*/ }
.tipsy-arrow { position: absolute; background: url('../img/tipsy.gif') no-repeat top left; width: 9px; height: 5px; }
.tipsy-n .tipsy-arrow { top: 0; left: 50%; margin-left: -4px; }
.tipsy-nw .tipsy-arrow { top: 0; left: 10px; }
.tipsy-ne .tipsy-arrow { top: 0; right: 10px; }
.tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -4px; background-position: bottom left; }
.tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; background-position: bottom left; }
.tipsy-se .tipsy-arrow { bottom: 0; right: 10px; background-position: bottom left; }
.tipsy-e .tipsy-arrow { top: 50%; margin-top: -4px; right: 0; width: 5px; height: 9px; background-position: top right; }
.tipsy-w .tipsy-arrow { top: 50%; margin-top: -4px; left: 0; width: 5px; height: 9px; }



/* Messages */
div.dialog{ margin:10px 0; padding:20px 2%; text-align:left; color:#000; font-size:14px; }
div.dialog.done{ background:#e6f7b9; }
div.dialog.error{ background:#f7b9b9; }
div.dialog.notes{ background:#b9d9f7; }
div.dialog li{ margin-left:20px; }
div.dialog p{ margin-left:0; }