@font-face{ font-family: 'fontello'; src: url('../font/fontello.eot?31806875'); src: url('../font/fontello.eot?31806875#iefix') format('embedded-opentype'), url('../font/fontello.woff2?31806875') format('woff2'), url('../font/fontello.woff?31806875') format('woff'), url('../font/fontello.ttf?31806875') format('truetype'), url('../font/fontello.svg?31806875#fontello') format('svg'); font-weight: normal; font-style: normal;} [class^="icon-"]:before, [class*=" icon-"]:before{ font-family: "fontello"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: 1em; margin-right: .2em; text-align: center; font-variant: normal; text-transform: none; line-height: 1em; margin-left: .2em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} .icon-home:before{content: '\e800';} .icon-search:before{content: '\e801';} .icon-menu:before{content: '\e802';} .icon-basket:before{content: '\e808';} .icon-right-open:before{content: '\e80a';} .icon-whatsapp:before{content: '\f232';} article, aside, details, figcaption, figure, footer, header, nav, section{ display: block;} article, aside, details, figcaption, figure, footer, header, nav, section, html, body, div, span, h1, h2, h3, h4, h5, h6, p, ul, ol, li, form, img, table, thead, tbody, tfoot, tr, td, .reset{ margin: 0; padding: 0; border: 0; background: transparent;} html{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;} *, *:before, *:after{ -webkit-box-sizing: inherit; -moz-box-sizing: inherit; -ms-box-sizing: inherit; box-sizing: inherit;} html{ -webkit-tap-highlight-color: transparent;} button:focus, input:focus, textarea:focus, a, a:visited, a:active, a:focus{ text-decoration: none; outline: none;} input[type="button"], input[type="reset"], input[type="submit"], button{ cursor: pointer;} input[disabled], button[disabled]{ cursor: default;} input, select, textarea, button{ margin: 0; padding: 0; font-size: 100%; vertical-align: middle;} a img{outline: none;} img{ height: auto; width: auto; max-width: 100%; vertical-align: middle; border: 0;} html{font-size: 100%;} .clear:after{ content: ''; clear: both; display: block; width: 0; height: 0;} .pos-left{float: left;} .pos-center{margin: 0 auto;} .pos-right{float: right;} .align-left{text-align: left !important;} .align-center{text-align: center !important;} .align-right{text-align: right !important;} .valign-top{vertical-align: top !important;} .valign-middle{vertical-align: middle !important;} .valign-bottom{vertical-align: bottom !important;} .middle{ display: inline; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); transform: translateY(-50%);} .overlay{ position: relative;} .overlay:after{ content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, 0.2);} .hidden{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; clip: rect(0 0 0 0); overflow: hidden;} @media screen and (max-width: 480px){ .m-hidden{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; clip: rect(0 0 0 0); overflow: hidden;} } .lo_inline>*{ display: inline-block; vertical-align: top;} .lo_table{ display: table;} .lo_table>*{ display: table-cell; vertical-align: top;} .lo_float:after{ content: ''; clear: both; display: block; width: 0; height: 0;} .lo_float>*{ float: left;} .lo_float>.right{ float: right; }[class*='grid-']{ display: grid; grid-gap: 40px; width: 100%; max-width: 1140px; margin: 0 auto; padding: 40px 40px 0;} [class*='grid-'] [class*='grid-']{ padding: 0;} .grid-1{ grid-template-columns: 1fr;} .grid-2{ grid-template-columns: 1fr 1fr;} .grid-3{ grid-template-columns: 1fr 1fr 1fr;} .grid-4{ grid-template-columns: 1fr 1fr 1fr 1fr;} .grid-5{ grid-template-columns: 1fr 1fr 1fr 1fr 1fr;} .grid-6{ grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;} .col-span-2{ grid-column: span 2;} .col-span-3{ grid-column: span 3;} .col-span-4{ grid-column: span 4;} .col-span-5{ grid-column: span 5;} @media handheld, only screen and (max-width: 767px){ [class*='grid-']{ grid-gap: 20px; grid-template-columns: 1fr; padding: 20px 20px 0;} [class*='col-span-']{ grid-column: auto;} .grid-m-1{ grid-template-columns: 1fr;} .grid-m-2{ grid-template-columns: 1fr 1fr;} .grid-m-3{ grid-template-columns: 1fr 1fr 1fr;} .grid-m-4{ grid-template-columns: 1fr 1fr 1fr 1fr;} .grid-m-5{ grid-template-columns: 1fr 1fr 1fr 1fr 1fr;} .grid-m-6{ grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;} } @media handheld, only screen and (min-width: 481px) and (max-width: 767px){ .grid-t-1{ grid-template-columns: 1fr;} .grid-t-2{ grid-template-columns: 1fr 1fr;} .grid-t-3{ grid-template-columns: 1fr 1fr 1fr;} .grid-t-4{ grid-template-columns: 1fr 1fr 1fr 1fr;} .grid-t-5{ grid-template-columns: 1fr 1fr 1fr 1fr 1fr;} .grid-t-6{ grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;} }.button{ display: inline-block; font-weight: bold;} .button{ font-size: 0.9em; padding: 6px 12px;} .button.small{ font-size: 0.75em; padding: 3px 6px;} .button.big{ font-size: 1em; padding: 10px 20px;} a.button, a.button:visited, a.button:active, .button{ border: 0; background: #1A9DE3; color: #FFFFFF;} a.button:not([disabled]):hover, .button:not([disabled]):hover{ background: #178DCC; color: #FFFFFF;} a.button[disabled], .button[disabled]{ opacity: 0.3;} a.button.secondary, .button.secondary{ background-color: #343434;} a.button.button-2, .button.button-2{ } a.button.button-3, .button.button-3{ } #ting.active{ display: table;} #ting.active .ting_box{ display: block; opacity: 1;} #ting{ display: none; height: 100%; width: 100%; background: rgba(0, 0, 0, 0.3); position: fixed; z-index: 999; top: 0px;} #ting .ting_container{ display: table-cell; text-align: center; vertical-align: middle;} #ting .ting_box{ display: none; margin: 0px auto; width: 480px; text-align: left; -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);-khtml-box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);-ms-box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);-o-box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); -webkit-border-radius: 5px;-moz-border-radius: 5px;-khtml-border-radius: 5px;-ms-border-radius: 5px;-o-border-radius: 5px;border-radius: 5px; overflow: hidden; opacity: 0; -webkit-transition: opacity 0.2s ease-in;-moz-transition: opacity 0.2s ease-in;-khtml-transition: opacity 0.2s ease-in;-ms-transition: opacity 0.2s ease-in;-o-transition: opacity 0.2s ease-in;transition: opacity 0.2s ease-in;} #ting .ting_box>header{ padding: 10px 20px; background: #343434; background: var(--theme-color-1);} #ting .ting_box>header>h3{ font-weight: normal; color: #FFFFFF;} #ting .ting_main{ background: #FFFFFF;} #ting .ting_content{ padding: 20px; min-height: 60px; color: #555555;} #ting .ting_main>footer{ background: #F2F2F2; border-top: 1px solid rgba(0, 0, 0, 0.1);} #ting .ting_nav{ float: right;} #ting .ting_nav button{ margin: 10px; margin-left: 0;} @media screen and (max-width: 480px){ #ting .ting_container{ padding: 10px;} #ting .ting_box{ width: 100%;} }#led{ display: none; position: fixed; height: 100%; width: 100%; top: 0px; left: 0px; overflow: auto; z-index: 999; background: rgba(0, 0, 0, 0.3);} #led .table{ display: table; width: 100%; height: 100%;} #led .cell{ display: table-cell; text-align: center; vertical-align: middle;} #led .box{ display: inline-block; padding: 10px; margin: 10px; text-align: left; -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);-khtml-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);-ms-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);-o-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); background: #FFFFFF;} #led .box img{ display: block; margin: 0px auto; width: 100%;} #led .loading{ background: url('../images/loading.gif') no-repeat 50% 50% #FFFFFF; height: 60px; width: 60px; -webkit-border-radius: 50%;-moz-border-radius: 50%;-khtml-border-radius: 50%;-ms-border-radius: 50%;-o-border-radius: 50%;border-radius: 50%;} #led h2{ margin: -10px; margin-bottom: 10px; padding: 10px 20px; background: #232323; color: #FFFFFF; font-size: 1.2em; font-weight: normal; text-align: center;} #led p{ max-width: 500px; margin-left: auto; margin-right: auto; text-align: center;} #led .nav{ position: fixed; bottom: 0px; width: 100%; z-index: 999; text-align: center;} #led .nav>div{ display: inline-block; -webkit-box-shadow: 0px 0px 3px #000000;-moz-box-shadow: 0px 0px 3px #000000;-khtml-box-shadow: 0px 0px 3px #000000;-ms-box-shadow: 0px 0px 3px #000000;-o-box-shadow: 0px 0px 3px #000000;box-shadow: 0px 0px 3px #000000;} #led .nav button{ padding: 10px 15px; border: none; background: #232323; color: #FFFFFF; text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5); text-transform: uppercase; -webkit-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5) inset;-moz-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5) inset;-khtml-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5) inset;-ms-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5) inset;-o-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5) inset;box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5) inset;} #led .nav button:hover{ background: #17A6FF;} #led .nav button.close:hover{ background: #FF8217;} #led .nav button[disabled], #led .nav button[disabled]:hover{ background: #484848;} @media screen and (max-width: 767px){ #led .box{ margin: 0; padding: 0;} }:root{ --text-color: #555; --link-color: #cdb30c; --link-hover-color: #62760c; --button-color: #ff686b; --button-hover-color: #FF3539; --color-1: #62760c; --color-2: #535204; --color-3: #523906; --color-4: #cdb30c; --font-1: 'Poppins', sans-serif;} body, select, input, textarea, button{ color: var(--text-color); font-size: 1em; line-height: 1.6em; letter-spacing: 0.04em; word-spacing: 0.1em;} body, select, input, textarea, button{ font-family: var(--font-1);} .size-08{ font-size: 0.8em;}.size-09{ font-size: 0.9em;} h1, h2, h3, h4{ line-height: 1.5em;}h1{ font-size: 2em;}h2{ font-size: 1.5em;}h3{ font-size: 1.3em;} strong{ font-weight: bold;}em{ font-style: italic;} @media screen and (max-width: 480px){ h1, h2, h3{ font-size: 1.3em;} } .content h2, .content h3{ margin-bottom: 0.2em;} p.content, .content p, .content ul, .content ol, .content table{ margin-bottom: 1.4em; word-break: break-word;}p.content, .content p, .content li{ }.content ul, .content ol{ padding-left: 1em;} ul{ list-style-type: none;}.content ul{ list-style-type: circle;} a, a:visited, a:active{ color: var(--link-color);}a:hover, a:focus{ color: var(--link-hover-color);} a.button, a.button:visited, a.button:active, .button{ background: var(--button-color); -webkit-border-radius: 3px;-moz-border-radius: 3px;-khtml-border-radius: 3px;-ms-border-radius: 3px;-o-border-radius: 3px;border-radius: 3px;}a.button:not([disabled]):hover, .button:not([disabled]):hover{ background: var(--button-hover-color);} #breadcrumb{ margin-bottom: 0;}.breadcrumb{ padding: 0 0 20px; border-bottom: 1px solid rgba(0, 0, 0, 0.1);}.breadcrumb>li{ display: inline-block;}.breadcrumb>li + li:before{ content: '\00BB'; padding: 0 5px;}@media screen and (max-width: 767px){ #breadcrumb{ margin-bottom: 0;} .breadcrumb{ padding-bottom: 0; border-bottom: none;} } [class^="imgcon-"]:before, [class*=" imgcon-"]:before{ content: ''; display: inline-block; width: 16px; height: 16px;}.imgcon-qrcode:before{ background: url('../images/icon/qrcode.png');} .banner{ text-align: center;} .youtube-container{ position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;}.youtube-container iframe, .youtube-container object, .youtube-container embed{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;} #wa-button{ position: fixed; right: 0; bottom: 20px; z-index: 100;}#wa-button a{ display: block; width: 48px; height: 48px; text-align: center; vertical-align: middle; line-height: 48px; background: #25D366; color: #fff; border: none; -webkit-border-radius: 50% 0 0 50%;-moz-border-radius: 50% 0 0 50%;-khtml-border-radius: 50% 0 0 50%;-ms-border-radius: 50% 0 0 50%;-o-border-radius: 50% 0 0 50%;border-radius: 50% 0 0 50%;}#wa-button i{ font-size: 1.8em;}@media screen and (min-width: 481px){ #wa-button{ display: none;}}.loader, .loader:before, .loader:after{ background: #c0c0c0; -webkit-animation: load1 1s infinite ease-in-out; animation: load1 1s infinite ease-in-out; width: 1em; height: 4em;} .loader{ color: #c0c0c0; text-indent: -9999em; margin: 88px auto; position: relative; font-size: 11px; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation-delay: -0.16s; animation-delay: -0.16s;} .loader:before, .loader:after{ position: absolute; top: 0; content: '';} .loader:before{ left: -1.5em; -webkit-animation-delay: -0.32s; animation-delay: -0.32s;} .loader:after{ left: 1.5em;} @-webkit-keyframes load1{ 0%, 80%, 100%{ box-shadow: 0 0; height: 4em;} 40%{ box-shadow: 0 -2em; height: 5em;} } @keyframes load1{ 0%, 80%, 100%{ box-shadow: 0 0; height: 4em;} 40%{ box-shadow: 0 -2em; height: 5em;} } .xpagehide{ transition: none; opacity: 0;} .xpageshow{ transition: opacity 0.5s; opacity: 1;} #page_overlay{ visibility: hidden; position: fixed; width: 100%; height: 100%; top: 0; background: #FFFFFF; z-index: 10;} #page_overlay.show{ visibility: inherit;} #page_overlay.process{ opacity: 0.5;} #page_overlay .overlay_content{ visibility: hidden; display: flex; flex-flow: column; align-items: center; justify-content: center; height: 100%; width: 100%; position: absolute; background: #fff;} #page_overlay .overlay_content.show{ visibility: inherit;}.side-menu{ }.side-menu>h3{ padding: 10px 0 20px; font-weight: normal;}.side-menu>ul{ }.side-menu>ul li{ padding: 0 0 20px;}.side-menu>ul a{ display: block;} @media screen and (max-width: 767px){ .side-menu>h3{ padding: 0 0 10px;} .side-menu>ul li{ padding: 0 0 10px;} } body{ padding-top: 50px;} #header{ display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding: 20px 40px;} #header #site-title a{ display: block; overflow: hidden; margin: 10px 0; background-image: url('../images/logo.png'); background-size: 250px; padding-left: 250px; width: 250px; height: 60px;} #header #site-title a img{ width: 300px;} #header #header-social{ display: flex;} #header #header-social>*{ margin: 3px;} @media screen and (max-width: 767px){ body{ padding-top: 40px;} #header{ flex-flow: column; justify-content: center; padding-left: 0; padding-right: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.1);} #header #site-title a{ background-size: 300px; padding-left: 300px; width: 300px; height: 70px;} } .nav-main>nav, .nav-main>nav>ul{ display: flex; justify-content: space-between; align-items: center;} .nav-main{ position: fixed; width: 100%; top: 0; z-index: 99; padding: 0 40px; background: var(--color-1); -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);-khtml-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);-ms-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);-o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);} .nav-main>nav>ul>li>a, .smenu.hide>.smenu-b, .smenu.show .smenu-c>ul>li>a{ display: block; padding: 12px 18px; color: #FFFFFF; font-size: 0.9em; text-transform: uppercase; font-weight: bold; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); border: none; background: none;} .smenu.hide:hover>.smenu-b, .smenu.hide.active>.smenu-b, .smenu.show .smenu-c>ul>li:hover>a, .smenu.show .smenu-c>ul>li.active>a{ background: rgba(0, 0, 0, 0.1);} @media screen and (max-width: 960px){ .nav-main{ padding: 0;} .smenu.show>.smenu-b, .smenu.hide>.smenu-b{ padding: 10px;} } .smenu.hide .smenu-c{ padding: 20px; background: #FFFFFF; -webkit-box-shadow: 0 1px 7px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0 1px 7px rgba(0, 0, 0, 0.2);-khtml-box-shadow: 0 1px 7px rgba(0, 0, 0, 0.2);-ms-box-shadow: 0 1px 7px rgba(0, 0, 0, 0.2);-o-box-shadow: 0 1px 7px rgba(0, 0, 0, 0.2);box-shadow: 0 1px 7px rgba(0, 0, 0, 0.2); visibility: hidden; position: absolute; z-index: 9;} .smenu.hide .smenu-c>ul>li{ padding: 5px; min-width: 150px;} .smenu.hide .smenu-c>ul>li>a{ color: var(--color-1);} @media screen and (max-width: 960px){ .smenu.hide .smenu-c{ padding: 0; background: rgba(0, 0, 0, 0.1);} .smenu.hide .smenu-c>ul>li{ padding: 0; background: #FFFFFF; border-bottom: 1px solid rgba(0, 0, 0, 0.07);} .smenu.hide .smenu-c>ul>li>a{ display: block; padding: 15px 18px;} .smenu.hide .smenu-c>ul>li>a:active{ background: var(--color-4); color: #FFFFFF;} } .smenu.show .smenu-b{ display: none;} .smenu.show .smenu-c>ul{ display: flex;} @media screen and (max-width: 960px){ .smenu.show .smenu-b{ display: block;} .smenu.show .smenu-c li{ display: block;} .smenu.show .smenu-c{ visibility: hidden; position: absolute;} .smenu .smenu-b span{ display: none;} .smenu .smenu-c{ left: 0; width: 100%; -webkit-box-shadow: none;-moz-box-shadow: none;-khtml-box-shadow: none;-ms-box-shadow: none;-o-box-shadow: none;box-shadow: none;} } .smenu.active .smenu-c{ visibility: visible !important;} @media screen and (min-width: 961px){ .smenu:hover .smenu-c{ visibility: visible !important;} } #header-panel{ } #header-search form{ display: flex; justify-content: space-between; position: relative; background: #FFFFFF; padding: 10px; border-bottom: 1px solid rgba(0, 0, 0, 0.07);} #header-search form input[type="text"]{ border: none; background: none; width: 90%; padding: 5px 7px; font-size: 0.9em; font-style: italic;} #header-search form input[type="text"]:focus{ font-style: normal;} #header-search form button{ border: none; background: none; padding: 3px;} @media screen and (min-width: 961px){ #header-search{ margin-right: 10px;} #header-search form{ padding: 0; border-bottom: none; width: 18em; -webkit-border-radius: 3px;-moz-border-radius: 3px;-khtml-border-radius: 3px;-ms-border-radius: 3px;-o-border-radius: 3px;border-radius: 3px;} } #header-cart>a{ display: flex; align-items: center; padding: 0;} #header-cart>a:hover{ background: rgba(0, 0, 0, 0.1);} #header-cart>a>*{ color: #FFFFFF;} #header-cart>a>span{ display: none;} #header-cart>a>div{ padding: 10px;} @media screen and (min-width: 961px){ #header-cart>a{ background: rgba(0, 0, 0, 0.5); -webkit-border-radius: 3px;-moz-border-radius: 3px;-khtml-border-radius: 3px;-ms-border-radius: 3px;-o-border-radius: 3px;border-radius: 3px;} #header-cart>a:hover{ background: rgba(0, 0, 0, 0.6);} #header-cart>a>span{ display: inherit; padding: 0 5px 0 10px; font-size: 0.9em;} #header-cart>a>div{ padding: 5px 8px 6px 8px; background: rgba(0, 0, 0, 0.2);} } #footer{ margin-top: 40px;} #footer .contact{ background: var(--color-5); color: #FFFFFF;} #footer .contact>div{ padding-top: 0;} #footer .contact h3{ background: rgba(0, 0, 0, 0.2); text-align: center; padding: 40px;} #footer .contact ul{ display: flex; align-items: center;} #footer .contact li{ padding: 0 20px;} #footer .footer_content{ padding: 20px 0 40px; background: rgba(0,0,0,0.85); color: #efefef;} #footer .footer_content h3{ margin-bottom: 10px; text-transform: uppercase; color: var(--color-4);} #footer .menu li>a{ display: inline-block; color: #efefef;} #footer .menu li>a:hover{ color: #efefef; text-decoration: underline;} @media screen and (max-width: 767px){ #footer .contact>div{ padding: 0 0 20px;} #footer .contact ul{ flex-flow: column; align-items: stretch;} #footer .contact li{ text-align: center; padding: 0 0 20px;} #footer .footer_content>div>div{ text-align: center;} #footer .footer_content h3{ margin-bottom: 5px;} #footer .menu ul{ display: flex; flex-wrap: wrap; justify-content: center;} #footer .menu li{ margin: 3px;} #footer .menu li>a{ padding: 5px 10px; color: #FFFFFF; background: var(--text-color); -webkit-border-radius: 3px;-moz-border-radius: 3px;-khtml-border-radius: 3px;-ms-border-radius: 3px;-o-border-radius: 3px;border-radius: 3px;} #footer .menu li>a:hover{ color: #FFFFFF;} } #footer .copyright{ padding: 20px; text-align: center; font-size: 0.8em;} #footer .copyright .title{ font-weight: bold;} #footer .copyright a{ display: inline-block; }