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

@font-face		{ font-family: 'fontawesome'; src: local(fontawesome), url('../fonts/fontawesome-webfont.woff') format('woff'); }

body											{ margin:0; color:#000; height: 100%; background:#fff; font-size: 14px; font-weight: lighter; line-height: 20px; }
html											{ height: 100%; }

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

i,em											{ font-style: italic; }

.l												{ float:left; }
.r												{ float:right; }
.b,b,strong										{ font-weight:bold; }
.hide											{ display:none; }
.clear											{ clear:both; }
.clear.spacer									{ height: 60px; }
.clear.minSpacer								{ height: 30px; }
.color											{ color:#00afef; }
.warningBox										{ padding: 50px; background: #f1f1f1; text-align: center; }
.forceSquare									{ width: 100%; height: auto; }


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

.input											{ background: #fff; border: 0; outline: none; resize: none; }
.input:focus									{  }
.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: 14px; border: 0; transition:color,background 0.1s; }
.button:hover,a.button:hover					{ background: #000; cursor: pointer; transition:color,background 0.1s; font-size: 14px; }
.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%; }


/* ANIMATIONS */
.animateTop										{ -webkit-transform:translateY(50px); -ms-transform:translateY(50px); transform:translateY(50px); opacity: 0; }
.animateTop.animateMe							{ -webkit-transform:translateY(0); -ms-transform:translateY(0); transform:translateY(0); opacity: 1; transition: all 0.5s; }
.animateLeft									{ -webkit-transform:translateX(-30px); -ms-transform:translateX(-30px); transform:translateX(-30px); opacity: 0; }
.animateLeft.animateMe							{ -webkit-transform:translateX(0); -ms-transform:translateX(0); transform:translateX(0); opacity: 1; transition: all 0.5s; }
.animateBottom									{ -webkit-transform:translateY(-50px); -ms-transform:translateY(-50px); transform:translateY(-50px); opacity: 0; }
.animateBottom.animateMe						{ -webkit-transform:translateY(0); -ms-transform:translateY(0); transform:translateY(0); opacity: 1; transition: all 0.5s; }
.animateRight									{ -webkit-transform:translateX(50px); -ms-transform:translateX(50px); transform:translateX(50px); opacity: 0; }
.animateRight.animateMe							{ -webkit-transform:translateX(0); -ms-transform:translateX(0); transform:translateX(0); opacity: 1; transition: all 0.5s; }

.animatePaddTop									{ padding-top: 30px; opacity: 0; }
.animatePaddTop.animateMe						{ padding-top: 0; opacity: 1; transition: all 0.3s; }

.animateFade									{ opacity: 0; }
.animateFade.animateMe							{ opacity: 1; transition: all 1s; }


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

ul.topmenu						{ position:relative; padding:0; margin:0; list-style-type:none; display:block; margin-right: -20px; }
ul.topmenu li					{ position: relative; margin:0; padding:0; float: left; } 
ul.topmenu li.sep				{ width: 130px; height: 15px; }
ul.topmenu li.option>a			{ position: relative; float:left; text-decoration:none; cursor:pointer; padding: 10px 20px 0 20px; color: #fff; height: 15px; background: #000; font-weight: lighter; text-transform: uppercase; transition:color 0.2s; z-index: 1; letter-spacing: 0.5px; }
ul.topmenu li.option.langweb	{ padding: 0 15px; }
ul.topmenu li.option.langweb>a	{ padding: 10px 5px; }
ul.topmenu li.option.langweb>a.current	{ text-decoration: underline; }
ul.topmenu li.option.current>a	{ color: #999; }
ul.topmenu li>a:hover			{ color: #999; transition:color 0.2s; }
ul.topmenu li:hover .submenu	{ opacity: 1; top: 25px; transition: opacity 0.2s,top 0.2s; }

.mMenu									{ padding: 10px 0 15px 0; background: #000; }
.mMenu ul.topmenu						{ margin: 0; }
.mMenu ul.topmenu li					{ position: relative; margin:0; padding:0; float: left; width: 100%; } 
.mMenu ul.topmenu li.option>a			{ padding: 10px 0; height: auto; width: 100%; text-align: center; }
.mMenu ul.topmenu li.option.langweb		{ padding: 0; }
.mMenu ul.topmenu li.option.langweb>span{ display: none; }
.mMenu ul.topmenu li.option.langweb>a	{ padding: 5px 0; }



.submenu,.submenu ul			{ position:absolute; margin:0; padding:0; list-style-type:none; background: #000; padding: 5px 0; padding-top: 10px; opacity: 0; top: -25px; z-index: 0; transition: opacity 0.2s,top 0.2s; }
.submenu li						{ position:relative; width: 100%; }
.submenu li a					{ display:block; color:#fff; text-decoration:none; padding: 5px 0 5px 20px; font-size:13px; }
.submenu li.link a:hover		{ color: #00AEEF; }
.submenu li.connect a:hover		{ color: #ef4135; }


.openMenu										{ position:relative; float:right; 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 *********************/
/***************************************************/

.clear.headerspacer								{ height: 75px; }

.innerpadding									{ padding: 20px; }
.aligncenter									{ position: relative; width: 100%; max-width: 1280px; margin: 0 auto; }

.header											{ position: fixed; left: 0; top: 0; width: 100%; height: 75px; background: #000; z-index: 10; }
.header .logo									{ max-width: 200px; }
.header .logo img								{ max-width: 100%; height: auto; }

.footer											{ position: relative; width: 100%; background: #000; color: #fff; }
.footer .logo									{ max-width: 180px; }
.footer .logo img								{ max-width: 100%; height: auto; }
.footer .contact								{ max-width: 600px; white-space: nowrap; padding-left: 20px; }
.footer .contact table							{ border-collapse: collapse; line-height: 20px; margin-top: 8px; }
.footer .social									{ padding-left: 40px; margin-top: 8px; }
.footer .social a								{ color: #fff; text-transform: uppercase; }
.footer .social img								{ width: 5px; margin-right: 5px; }
.footer .menu .submenu,.submenu ul				{ opacity: 1; top: 25px; }
.footer .menu .submenu li a						{ padding: 1px 0 1px 20px; }


.footer .brand									{ text-align: right; color: #999; }
.footer .brand img								{ vertical-align: middle; opacity: 0.5; }

.parallaxImage									{ position: relative; width: 100% !important; height: 750px; margin: 0; padding: 0; overflow: hidden; z-index: 2; background: #fff; }
.parallaxImage .randomImage						{ position: absolute; left:0; top:0; width: 100%; height: 100%; background-repeat:no-repeat; background-attachment:fixed; background-position:50% 0; /* background-size: 100% auto; */ background-color:#fff; opacity: 1; /* -ms-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1); transition: transform 0s linear 1s; */ }

/* .parallaxImage.visible .randomImage				{ -ms-transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1); transform: scale(1.1,1.1); transition: transform 10s linear; } */


/* HOMEPAGE */
.homepage										{ position: relative; width: 100%; height: 100%; min-height: 600px; margin-top: -75px; z-index: 0; }
.homepage .elem									{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; }
.homepage .elem .image							{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-repeat: no-repeat; z-index: 0; /* -ms-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1); transition: transform 0s linear 1s; */ }

/* .homepage .elem.cycle-slide-active .image		{ -ms-transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1); transform: scale(1.1,1.1); transition: transform 10s linear; } */

.homepage .elem .info							{ position: absolute; left: 0; bottom: 300px; right: 0; color: #fff; z-index: 1; }
.homepage .elem .info .r						{ width: 40%; }
.homepage .elem .info h1						{ font-weight: bold; margin: 0; font-size: 90px; line-height: 90px; }
.homepage .elem .info.link h1					{ color: #00AEEF; }
.homepage .elem .info.connect h1				{ color: #ef4135; }
.homepage .elem .info.wall h1				{ color: #939598; }
.homepage .elem .info p							{ font-size: 50px; margin: 0; margin-bottom: 10px; font-style: italic; line-height: 60px; }


.listprod										{  }
.listprod .title								{ width: 30%; }
.listprod .title h1								{ font-size: 46px; font-weight: bold; margin: 0; line-height: 40px; }
.listprod .title p								{ margin-top: 0; font-size: 25px; font-style: italic; line-height: 30px; }
.listprod .title .button						{ border: 1px solid #fff; margin-top: 20px; transition: border 0.2s; }

.listprod.link .title h1						{ color: #00AEEF; }
.listprod.link .title .button					{ background: #fff; color: #00AEEF; padding-left: 0; transition: color 0.2s; }
.listprod.link .title .button:hover				{ color: #000; transition: color 0.2s; }
.listprod.connect .title h1						{ color: #ef4135; }
.listprod.connect .title .button				{ background: #fff; color: #ef4135; padding-left: 0; transition: color 0.2s; }
.listprod.connect .title .button:hover			{ color: #000; transition: color 0.2s; }
.listprod.wall .title h1						{ color: #939598; }
.listprod.wall .title .button				{ background: #fff; color: #939598; padding-left: 0; transition: color 0.2s; }
.listprod.wall .title .button:hover			{ color: #000; transition: color 0.2s; }

.listprod .desc									{ width: 55%; }
.listprod .desc table p							{ margin-top: 0; }
.listprod img									{ max-width: 100%; height: auto; }

.getcatalog										{ text-align: center; color: #fff; }
.getcatalog>.aligncenter>.innerpadding			{ padding-top: 10px; padding-bottom: 10px; }
.getcatalog p									{ margin-bottom: 0; }
.getcatalog a									{ position: relative; float: left; margin-left: 50%; height: 75px; -webkit-transform:translateX(-50%); -ms-transform:translateX(-50%); transform:translateX(-50%); font-weight: normal; font-size: 18px; color: #fff; transition: background 0.2s,color 0.2s; }
.getcatalog a .fa								{ position: absolute; left: 50%; top: 10px; color: #fff; height: 25px; transition: top 0.2s; -webkit-transform:translateX(-50%); -ms-transform:translateX(-50%); transform:translateX(-50%); }
.getcatalog a .innerpadding						{  }
.getcatalog.link								{ background: #00AEEF; }
.getcatalog.connect								{ background: #ef4135; }
.getcatalog.wall								{ background: #939598; }

.getcatalog a:hover .fa							{ top: 15px; transition: top 0.2s; }

/*
.getcatalog a:hover								{ background: #fff; transition: background 0.2s,color 0.2s; }
.getcatalog.link a:hover						{ color: #00AEEF; transition: background 0.2s,color 0.2s; }
.getcatalog.connect a:hover						{ color: #ef4135; transition: background 0.2s,color 0.2s; }
*/


/* CONTACTS */
.contact										{ position: relative; }
.contact .info									{ width: 50%; min-height: 600px; }
.contact .info .groupinput						{ padding: 10px; padding-left: 0; border-top: 1px solid #f1f1f1; background: #fff; margin: 5px 0; }
.contact .info .groupinput .input				{ width: 100%; padding: 0; margin: 0; background: none; }
.contact .info .groupinput .input.textarea		{ height: 75px; }
.contact .info .button							{ background: #000; border: 1px solid #fff; text-transform: uppercase; padding: 10px; transition: border 0.2s; }
.contact .info .button:hover					{ border-color: #000; transition: border 0.2s; transition: border 0.2s; }
.contact .map									{ position: absolute; top: 0; right: 0; height: 100%; width: 50%; }


/* Pagination */
table.pagination								{ border-collapse:collapse; float:left; margin-top:10px; font:bold 14px 'Helvetica'; }
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:10px; text-align:left; color:#000; }
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; }