@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);

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

body											{ margin:0; color:#333; height: 100%; background:#fff; -webkit-font-smoothing: antialiased; }
html											{ height: 100%; }

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

.l												{ float:left; }
.r												{ float:right; }
.b,b,strong										{ font-weight:700; }
.hide											{ display:none; }
.clear											{ clear:both; }
.clear.spacer									{ height: 60px; }
.clear.minSpacer								{ height: 30px; }
.color											{ color:#00afef; }


a:link											{ text-decoration: none; color:#000; }
a:visited										{ text-decoration: none; color:#000; }
a:hover											{ text-decoration: none; color:#BF311A; }
a:active										{ text-decoration: none; color:#BF311A; }

.input											{ background: #fff; border: 0; outline: none; resize: none; border-radius:25px; padding:7px 1%; font:400 12px 'Montserrat'; }
.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: #333; color: #fff; margin: 1px; padding: 7px 15px; font-size: 11px; border: 0; transition:color,background 0.1s; border-radius:25px; }
.button:hover,a.button:hover					{ background: #000; cursor: pointer; transition:color,background 0.1s; }
.select											{ background: #fff url('../img/site/bg-select.png') no-repeat 100% center; font-size: 12px; border: none; line-height: 1; -webkit-appearance: none; cursor: pointer; border-radius:25px; padding:7px 1%; }


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

ul.topmenu						{ position:relative; padding:0; margin:0; margin-top:52px; list-style-type:none; display:block; width:100%; }
ul.topmenu li					{ position:relative; margin:0; padding:0; } 
ul.topmenu li.l					{ margin-right:2%; }
ul.topmenu li.r					{ margin-left:2%; }
ul.topmenu li.sep				{ width: 80px; height: 15px; }
ul.topmenu li.option a			{ float:left; text-decoration:none; cursor:pointer; color: #fff; transition:color 0.2s; text-transform:uppercase; }
ul.topmenu li.option.current a	{ color: #007782; }
ul.topmenu li a:hover			{ color: #007782; transition:color 0.2s; }

ul.topmenu li.lang				{ width:53px; height:15px; }
ul.topmenu li.lang .bg			{ background:url('../img/site/btn-lang.png') no-repeat center center; background-size:contain; position:absolute; right:0; top:-20px; width:53px; height:38px; text-align:center; padding-top:15px; z-index:1; transition:top 0.2s; cursor:pointer; }

ul.topmenu li.lang .listlang	{ position:relative; z-index:0; display:none; transition:margin 0.2s; }
ul.topmenu li.lang .listlang a	{ position:relative; width:100%; text-align:center; text-transform:uppercase; }


/*
.submenu,.submenu ul			{ position:absolute; margin:0; padding:0; list-style-type:none; display:none; margin-top:1px; }
.submenu li						{ position:relative; width: 218px; padding-left: 20px; }
.submenu li a					{ display:block; color:#999; text-decoration:none; font-size:16px; }
.submenu li a:hover				{ color: #fff; }
*/


.openMenu								{ position:relative; margin-top: 45px; width:33px; height:33px; cursor:pointer; display: none; z-index: 2; }
.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 *********************/
/***************************************************/

.header-degrade									{ position:fixed; left:0; top:0; width:100%; height:12px; background:url('../img/site/top-degrade.png') no-repeat top center; background-size:cover; z-index:10; }
.header-corner									{ position:absolute; left:-125px; bottom: 0; top: 0; width:125px; background:url('../img/site/top-corner.png') no-repeat bottom right; z-index:10; }
.header											{ position:fixed; left:0; top:0; width:94%; min-height:121px; padding:0 3%; background:#ED3024; z-index:10; }

.header .menu									{ z-index:0; }
.header .logo									{ position: absolute; top: 0; left: 50%; margin-left: -164px; width:328px; height:166px; background:url('../img/site/logo.png') no-repeat center center; background-size:contain; cursor:pointer; z-index:1; }

.header .spacerMenu								{ height: 40px; }

.header .mMenu									{ position: relative; background: #ED3024; padding-top: 50px; display: none; }
.header .mMenu ul.topmenu						{ position:relative; padding:0; margin:0; list-style-type:none; display:block; width:100%; }
.header .mMenu ul.topmenu li					{ position:relative; margin:0; float: left; padding:0; width: 100%; } 
.header .mMenu ul.topmenu li.sep				{ display: none; }
.header .mMenu ul.topmenu li.option a			{ float:left; text-decoration:none; cursor:pointer; color: #fff; width: 100%; text-align: center; padding: 10px 0; transition:color 0.2s; text-transform:uppercase; }
.header .mMenu ul.topmenu li.lang				{ display: none; }




.section										{ position:relative; width:100%; height:100%; min-height: 720px; z-index:1; }
.section h1										{ font-size:45px; font-weight:700; }
.section h2										{ font-size:20px; font-weight:400; }

.brand											{ position:relative; padding:10px 0; background:#ED3024; text-align:center; color:#fff; font-size:11px; }
.brand a										{ color: #fff; font-size: 11px; }
.brand img										{ vertical-align:middle; }

.viewmore										{ position:relative; width:60px; height:60px; background:url('../img/site/icon-viewmore.png') no-repeat center center; background-size:contain; }


/* HOMEPAGE */
.home											{ position:absolute; top:0; left:0; right:0; bottom:0; padding-top:150px; background:#fff; }
.home .homeCycle								{ position:relative; width:100%; height:100%; z-index:1; }
.home .homeCycle .elem							{ position:absolute; left:0; top:0; width:100%; height:100%; }
.home .homeCycle .elem .image					{ position:relative; float: left; margin-top:50px; width:45%; padding: 0; height: 80%; text-align:center; }
.home .homeCycle .elem .image img				{ max-width:100%; max-height:100%; height:auto; }
.home .homeCycle .elem .info					{ position:relative; float: right; margin-top:50px; width:41%; padding: 0 2%; color:#BF311A; }
.home .homeCycle .elem .info h1					{ padding: 0; margin-top: 0; }

.home .bottomWhite								{ position:absolute; left:0; right:0; bottom:0; background:#fff; height:15%; z-index:0; }
.home .homeCycleNav								{ position: absolute; right: 15px; bottom: 0; z-index: 2; }
.home .homeCycleNav a							{ float: left; width: 100px; padding: 10px 20px; font-size: 12px; }
.home .homeCycleNav a img						{ max-width: 100%; height: auto; transition:background 0.2s; }
.home .homeCycleNav a.cycle-pager-active		{ background: rgba(255,255,255,0.1); transition:background 0.2s; }


/* COMPANY */
.company										{ position:absolute; top:0; left:0; right:0; bottom:0; }
.company .image									{ position:absolute; top:0; left:0; width:50%; bottom:0; }
.company .info									{ position:absolute; top:50%; width:40%; color:#BF311A; -webkit-transform: translate(0,-50%); -ms-transform: translate(0,-50%); -moz-transform: translate(0,-50%); transform: translate(0,-50%); }


/* BUY */
.buy											{ position:absolute; top:121px; left:0; right:0; bottom:0; background: #fff; }
.buy .submenu									{ position:relative; width:90%; padding:10px 5%; background:#ccc; z-index:999; }
.buy .submenu a									{ color:#BF311A; margin-right:3%; font-size:12px; }

.buy .info										{ position:absolute; top:50%; width:30%; color:#BF311A; -webkit-transform: translate(0,-50%); -ms-transform: translate(0,-50%); -moz-transform: translate(0,-50%); transform: translate(0,-50%); }
.buy .buyCycle									{ position:absolute; top:0; right:0; bottom:0; width:50%; }
.buy .buyCycle .elem							{ position:absolute; left:0; top:0; width:100%; height:100%; background: #fff; }
.buy .buyCycle .elem .content					{ position:absolute; top:50%; right:15%; width:70%; color:#000; -webkit-transform: translate(0,-50%); -ms-transform: translate(0,-50%); -moz-transform: translate(0,-50%); transform: translate(0,-50%); }
.buy .buyCycle .elem .content .select			{ width:50%; padding:15px 5%; margin:20px 0; border:1px solid #000; background-position: 95% center; }
.buy .buyCycle .elem .content a					{ width:44%; margin:3%; height:100px; }
.buy .buyCycle .elem .content h2				{ padding: 0 5%; }
.buy .buyCycle .elem .content .comercial		{ display:none; padding: 0 5%; }
.buy .buyCycle .elem .content .comercial:nth-of-type(1)	{ display: block; }


/* CONTACT */
.contact										{ position:absolute; top:125px; left:0; right:0; bottom:0; }
.contact .info									{ position:absolute; top:0; left:0; bottom:0; width:50%; }
.contact .form									{ position:absolute; top:0; right:0; bottom:0; width:50%; }
.contact .content								{ position:absolute; top:50%; width:70%; color:#BF311A; -webkit-transform: translate(0,-50%); -ms-transform: translate(0,-50%); -moz-transform: translate(0,-50%); transform: translate(0,-50%); }

.contact .info .content							{ left:10%; }
.contact .info .content h1						{ margin-top: 0; }
.contact .form .content							{ right:10%; }

.contact .content .input						{ width:90%; background:none; color:#000; padding:15px 5%; margin:2px 0; border:1px solid #413F40; margin:5px 0; }
.contact .content .input.textarea				{ height:80px; padding:15px 5%; }
.contact .content .button						{ position:relative; width:101%; border:1px solid #BF311A; margin:2px 0; padding:15px 1px; color:#fff; background:#BF311A; }


.animate-right									{ right:0; opacity: 0; transition:opacity 0.3s,right 0.3s; }
.animate-right.overflow							{ right:-1000px; }
.animate-right.visible							{ right: 5%; opacity: 1; transition:opacity 0.3s,right 0.3s; }
.animate-left									{ left:0; opacity: 0; transition:opacity 0.3s,right 0.3s; }
.animate-left.overflow							{ left:-1000px; }
.animate-left.visible							{ left: 5%; opacity: 1; transition:opacity 0.3s,left 0.3s; }
.animate-fade									{ opacity: 0; transition:opacity 0.3s; }
.animate-fade.visible							{ opacity: 1; transition:opacity 0.3s; }






/* LIST PRODUCTS */
.catprod										{ position: relative; float: left; width: 19%; padding: 177px 3% 0 3%; }
.catprodcolor									{ position: fixed; left: 0; top: 0; bottom: 0; width: 25%; background: #BF311A; }


.listprod										{ position: relative; width: 69%; padding: 177px 3% 0 3%; min-height: 100%; }
.listprod .elem									{ position: relative; width: 25%; height: 270px; transition:background 0.2s; }
.listprod .elem .name							{ position: absolute; font-size: 14px; left: 20px; right: 20px; top: 20px; }
.listprod .elem .image							{ position: absolute; left: 20px; bottom: 20px; right: 20px; top: 75px; background-position: center center; background-size: contain; background-repeat: no-repeat; }
.listprod .elem:hover							{ background: #F2F2F2; color: #000; transition:background 0.2s; }

.listprod .showimage							{ position: relative; width: 40%; padding: 0; text-align: center; }
.listprod .showimage img						{ max-width: 100%; height: auto; }
.listprod .showinfo								{ position: relative; width: 50%; padding: 0 3%; }
.listprod .showinfo h1							{ margin: 0; }
.listprod .showinfo .opentext					{ display: none; }
.listprod .showinfo .opentext.curr				{ display: block; }
.listprod .showinfo .choosetext					{ margin-right: 5px; padding: 5px 10px; background: #E6E6E6; color: #413F40; font-size: 12px; cursor: pointer; transition:background 0.2s,color 0.2s; }
.listprod .showinfo .choosetext.curr			{ background: #413F40; color: #fff; transition:background 0.2s,color 0.2s; }

.catprod .groupinput							{ background: #fff; padding: 15px 5%; width: 90%; margin: 5px 0; }
.catprod .groupinput.grey						{ background: #E6E6E6; }
.catprod .groupinput.selectoption				{ cursor: pointer; }
.catprod .groupinput .input						{ padding: 2px 0; margin: 0; width: 85%; }
.catprod .groupinput .input:focus				{ box-shadow: none; }
.catprod .groupinput .submit					{ width: 16px; }
.catprod .groupinput .select					{ padding: 0; width: 85%; background-color: #E6E6E6; background-image: none; border-radius:0; }

.catprod .hr									{ width: 100%; height: 1px; background: #fff; margin: 5px 0; }

/*
.catprod .option								{ width: 100%; } 
.catprod .option .button						{ width: 90%; padding: 10px 5%; background: none; color: #fff; font:400 14px 'Montserrat'; text-align: left; transition:color 0.2s; }
.catprod .option .button:hover					{ color: #000; transition:color 0.2s; }
.catprod .option.current						{ background: #ED3024; }
*/

.catprod .option								{ width: 100%; }
.catprod .option .button						{ width: 90%; padding: 10px 5%; background: none; color: #fff; font:400 14px 'Montserrat'; text-align: left; transition:color 0.2s; }
.catprod .option .button:hover					{ color: #000; transition:color 0.2s; }
.catprod .subcatlist							{ padding: 0 10px; }
.catprod .subcatlist .tag						{ padding: 2px 4px; margin: 1px; background: rgba(0,0,0,0.2); font-size: 12px; color: #fff; cursor: pointer; transition:background 0.2s; }
.catprod .subcatlist .tag:hover					{ background: rgba(0,0,0,0.3); transition:background 0.2s; }
.catprod .subcatlist .tag.selected				{ background: rgba(0,0,0,0.5); transition:background 0.2s; }


/* Pagination */
table.pagination								{ border-collapse:collapse; float:left; margin-top:10px; font:700 14px 'Montserrat'; }
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:15px 2%; text-align:left; color:#000; border-radius:10px; font-size:12px; }
div.dialog.done{ background:#ceef73; }
div.dialog.error{ background:#ef7373; }
div.dialog.notes{ background:#73b3ef; }
div.dialog li{ margin-left:20px; }
div.dialog p{ margin-left:0; }