body { font-family: 'Barlow', sans-serif; font-size: 17px; color: #3f3f3f; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; display: block !important; } html { -webkit-text-size-adjust: none; } body, html { min-height: 100%; background: none !important; } * { -webkit-appearance: none; -moz-appearance: none; appearance: none; -moz-text-size-adjust: none; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; text-size-adjust: none; padding: 0; margin: 0; border: 0; outline: 0; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; } *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } a { cursor: pointer; } p { margin-bottom: 1em; } #page-content { min-height: 60em; min-height: 82vh; padding: 0 0 2em 0; } .container, .row { width: 100%; max-width: 1300px; margin: 0 auto; } .row { clear: both; zoom:1; display: block; } .row:before, .row:after { display: table; content: " "; clear: both; } [class*="col-"] { display: block; width: 100%; float: left; position: relative; text-align: left; } .col-md1 {width: 8.33333333%;} .col-md2 {width: 16.66666666%;} .col-md3 {width: 25%;} .col-md4 {width: 33.33333333%;} .col-md5 {width: 41.66666666%;} .col-md6 {width: 50%;} .col-md7 {width: 58.33333333%;} .col-md8 {width: 66.66666666%;} .col-md9 {width: 75%;} .col-md10 {width: 83.33333333%;} .col-md11 {width: 91.66666666%;} .col-md12 {width: 100%;} .visible-xs, .visible-sm {display: none;} .visible-md {display: block;} .clearfix { width: 100%; height: 1px; float: left; } a { text-decoration: none; color: inherit; cursor: pointer; } h1,h2 { font-family: 'Dm', serif; font-weight: 400; } h1 { font-size: 2.4em; } p { line-height: 1.5em; } img { max-width: 100%; } hr { width: 100%; border: 1px dotted #ccc; float: left; height: 1px; margin: 1em 0; } iframe { width: 100%; height: 50em; max-height: 50vh !important; margin-bottom: 1em; } .page-sub-title { text-transform: uppercase; } .page-title { line-height: 1.4em; } .centered { text-align: center; } button, a.button, input[type="button"], input[type="submit"] { background: #000; border: 2px solid #000; padding: .8em 1.5em; border-radius: 10em; color: #fff; font-size: 1.15em; font-weight: 500; text-decoration: none; display: inline-block; cursor: pointer; } button.outline, a.button.outline, input[type="button"].outline, input[type="submit"].outline { background: #fff; color: #000; } header { background: #fff; box-shadow: 0px 30px 10px -15px rgb(0 0 0 / 0.01); position: -webkit-sticky; position: -moz-sticky; position: -ms-sticky; position: -o-sticky; position: sticky; top: 0; z-index: 112; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: inline-block; width: 100%; padding: 1em 0; } header .logo { display: inline-block; float: left; width: 16em; margin: .8em 1em 0 0; } #language-selector { float: right; margin-top: 1.2em; position: relative; } #language-selector label { font-weight: 700; font-size: 1.2em; cursor: pointer; padding-bottom: .5em; display: block; text-transform: uppercase; } #language-selector div { background: #fff; box-shadow: rgba(0,0,0,0.2) 0px 3px 6px 0px; border-top: 1px solid #000; position: absolute; right: 0; display: none; } #language-selector.open div { display: block; } #language-selector div a { display: block; cursor: pointer; padding: .8em; min-width: 4em; text-align: center; font-weight: 600; border-bottom: 1px solid #ddd; text-transform: uppercase; } header .contact-button { float: right; padding: .5em 1em; margin: .5em 0 0 1em; font-size: 1.15em; } footer { background: #000; padding: 2em 0; color: #fff; } footer .logo-cnt { width: 20em; } footer .logo-cnt span { margin-top: 1em; font-weight: 500; display: block; } footer .logo { width: 100%; max-width: 14em; display: block; } #body-overlay, #body-loading-overlay { top: 0; left: 0; width: 100%; z-index: 10000; overflow: hidden; position: fixed; background: #0b0b0b; opacity: 0; -webkit-transition: opacity 0.4s; transition: opacity 0.4s; height: 0; visibility: hidden; } body.overlay #body-overlay { opacity: 0.6; height: 100%; visibility: visible; } body.loading #body-loading-overlay { opacity: 0.6; visibility: visible; background: url(../images/hourglass.svg) #0b0b0b no-repeat center center; height: 100%; } /***** MODAL WINDOW *****/ #modal-cnt { position: fixed; backface-visibility: hidden; -webkit-backface-visibility: hidden; top: 50%; left: 50%; width: 100%; max-width: 600px; -webkit-transform: translate(-50%, -50%); display: none; z-index: 10001 !important; } #modal-popbox { background-color: #fff; width: 90%; border-radius: 6px; outline: 0; margin: 0 auto; -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5); box-shadow: 0 3px 9px rgba(0, 0, 0, .5); z-index: 10001 !important; } #modal-popbox .modal-title { padding: 1em; border-bottom: 1px solid #e5e5e5; font-size: 1.2em; font-weight: 600; color: inherit; } #modal-popbox .modal-title .icon-cancel { float: right; cursor: pointer; } #modal-content { padding: 2em 1em; text-align: center; min-height: 3em; font-size: 1.2em; width: 100%; } #modal-footer { padding: 0.5em 1em; border-top: 1px solid #e5e5e5; width: 100%; text-align: center; } #modal-footer .button { display: none; margin: 0.5em 0; width: 48%; } .imageModal .modal-title { border: none !important; } .imageModal #modal-content { padding: 1em; } .imageModal img, .imageModal a { width: 100%; } .imageModal #modal-footer { display: none; } .errormsg #modal-title { color: red; } .errormsg #modal-footer .button.close { display: block; width: 100%; } .errormsg ul li { margin-bottom: 0.5em; } .image-block { display: table; margin: 1em auto 4em auto; } .image-block .left, .image-block .right { display: table-cell; vertical-align: middle; float: none; } .image-block .text-cnt { display: inline-block; padding: 2em 0; } .image-block .text-cnt a.button { margin-top: 2em; margin-right: .5em; } .image-block h1 { font-size: 3em; line-height: 1.3em; width: 80%; } .image-block h3 { width: 80%; font-size: 1.5em; font-weight: 400; margin: .5em 0; } .image-block .right .text-cnt { padding-left: 5em; } .image-block .right .text-cnt h1, .image-block .right .text-cnt h3 { width: 100%; } .image-block .img-cnt { padding: 2.5em 0 0 2.5em; } .image-block .check-list .col-md6, .image-block .check-list .col-md12 { padding-top: 1em; display: table; } .image-block .check-list .icon i { display: inline; background: #dde7f8; border-radius: 100%; color: #000; font-size: .7em; padding: .2em; margin-right: .5em; } .image-block .check-list .icon { display: table-cell; vertical-align: top; } .image-block .check-list p { display: table-cell; vertical-align: top; padding-right: 1.5em; } .image-block .img-cnt.dotted-bg { background-image: url('../images/image-bg-dotted.png'); background-repeat: no-repeat; background-size: 10em 10em; } .image-block .img-cnt.circle-bg { background-image: url('../images/image-bg-circle.png?a=2'); background-repeat: no-repeat; background-size: 12em 12em; } .image-block .img-cnt img { border-radius: .6em; box-shadow: 2em 2em #f1f5fd; } .product-slider-cnt { width: 100%; margin-top: 2em; } .product-slider { margin-bottom: 2em; } .centered-block { text-align: center; margin: 1em auto 2em auto; } .centered-block h1 { width: 80%; display: inline-block; } .centered-block h4 { font-weight: 500; margin-bottom: .5em; font-size: 1.2em; color: #999; letter-spacing: .5em; } .centered-block .item { text-align: center; margin-top: 2em; } .centered-block .item span { background: #000; color: #fff; border-radius: 100%; display: inline-block; margin: 0; width: 3.5em; height: 3.5em; } .centered-block .item span i { font-size: 1.6em; padding: .3em .2em .2em .25em; display: block; } .centered-block .item label { font-weight: 600; font-size: 1.3em; margin-top: 1em; display: block; } .centered-block .item p { padding: 1em 1em; display: inline-block; } .centered-block .item a { color: #000; font-weight: 600; display: block; } .page-banner { display: block; width: 100%; margin-bottom: 2em; } .head-banner { position: relative; width: 100%; height: 30em; overflow: hidden; margin-bottom: 2em; border-radius: 1em; background: #000; display: table; vertical-align: middle; text-align: center; padding: 2em 6em; } .head-banner h1 { color: #fff; font-size: 3em; text-align: center; vertical-align: middle; display: table-cell; position: relative; text-shadow: 2px 2px 2px rgb(0 0 0 / 0.6); } .head-banner img { height: auto; min-height: 100%; max-width: none; min-width: 100%; opacity: .45; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /******** CUSTOM CHECKBOX *********/ .i-checks { padding-left: 20px; margin: 0; } .i-checks, .i-checks * { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; } .i-checks input { opacity: 0; position: absolute; margin-left: -20px; } .i-checks > i { width: 18px; height: 18px; line-height: 1; border: 1px solid #777; background-color: #fff; margin-left: -20px; margin-top: -4px; display: inline-block; vertical-align: middle; margin-right: 5px; position: relative; } .i-checks > i:before { content: ""; position: absolute; left: 9px; top: 9px; width: 0px; height: 0px; background-color: transparent; } .i-checks.checked > i, .i-checks input:checked+i { border-color: #000; } .i-checks.checked > i:before, .i-checks input:checked+i:before { left: 3px; top: 3px; width: 10px; height: 10px; background-color: #000; } .i-checks input:disabled+i, .i-checks input:disabled:checked+i { border-color: #b1c4c8; } .i-checks input:disabled+i:before { background-color: #c5d2d6; } .i-checks input[type="radio"]+i, .i-checks input[type="radio"]+i:before { border-radius:50% } /**** BREADCRUMBS ****/ .breadcrumbs { width: 100%; border-bottom: 1px solid #eee; } .breadcrumbs ul li { display: inline-block; } .breadcrumbs ul li a { padding: 1em 0.3em; display: inline-block; font-size: 0.9em; } /**** TABS ****/ .tabs { border: none; border-bottom: 1px solid #ddd; display: table; width: 100%; float: left; margin-top: 1em; } .tabs li { display: inline-block; float: left; } .tabs li a { display: inline-block; float: left; border: 1px solid #e3f2db; border-bottom: 1px solid #ddd; background: #efefef; color: #222; letter-spacing: .4px; font-weight: 500; white-space: nowrap; margin: 0 4px -1px 0; padding: 1.2em 3em; height: 3.8em; cursor: pointer; text-transform: uppercase; } .tabs li.active a { border: 1px solid #ddd; border-bottom: 1px solid #fff; background: #fff; color: #000; } .tab-content { display: none; } #tab1 { display: block; } .mobile-tab { padding: 1.2em; cursor: pointer; margin-bottom: .5em; font-size: 1.1em; font-weight: 600; color: #222; background: #efefef; display: none; } .mobile-tab.active { color: #000; margin-bottom: 0; } .mobile-tab i { float: right; font-size: 1.1em; } .mobile-tab.active .icon-angle-right:before { content: '\e803'; } .tabs-container { border: 1px solid #ddd; border-top: none; display: inline-block; width: 100%; padding: 2em; } .tabs-container p { line-height: 1.6em; margin: 0 0 1.2em 0; font-size: 1.05em; } .tabs-container p p { margin: 0; padding: 0; } .tabs-container h3, .tabs-container h2, .tabs-container h1 { display: block; margin: 0 0 0.2em 0; color: #222; font-weight: 500; font-size: 1.2em; text-transform: uppercase; line-height: 1.4em; } .tabs-container h1 { font-size: 1.7em; } .tabs-container h1 b { font-weight: 700; } .tabs-container h2 { font-size: 1.5em; font-weight: 600; } .tabs-container h4 { margin: 0.5em 0 0.2em 0; font-weight: 600; } /**** CUSTOM SCROLLBAR ****/ .customscroll { max-height: 220px; overflow: auto; -webkit-overflow-scrolling: touch; } .customscroll::-webkit-scrollbar-track { border-radius: 1em; background-color: #eee; } .customscroll::-webkit-scrollbar { width: 1em; padding:0; background-color: #fff; } .customscroll::-webkit-scrollbar-thumb { margin:3px; border-radius: 1em; background-color: #ccc; } /**** PAGINATION ****/ .pagination, .pagination li, .pagination li a { list-style: none; margin: 0; padding: 0; display: inline-block; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; } .pagination { width: 100%; text-align: center; padding-top: 2em; margin-top: 1em; border-top: 1px solid #ccc; } .pagination li { font-weight: 600; font-size: 1em; padding: 0 .05em; } .pagination li a { padding: .8em 1.2em; background: #eee; border-radius: 3em; } .pagination li a:hover { background: #ddd; } .pagination li.active a { background: #000; color: #fff; } /**** PRODUCT DESCRIPTION ****/ .tabs-container h1, .tabs-container h2, .tabs-container h3, .tabs-container h4, .tabs-container h5 { font-family: 'Barlow', sans-serif; } .ingredient, .effect, .step { display: table; margin: 1em 0 1em 0; } .step img { width: 8em; max-width: none; } .effect div, .step div { display: table-cell; vertical-align: middle; padding: 0 0.8em 0 0; } .ingredient { margin-bottom: .5em; } .ingredient img { display: table-cell; width: 4em; max-width: none; } .ingredient span { display: table-cell; vertical-align: middle; padding: 0 .5em; width: 100%; font-weight: 500; font-size: .9em; } .effect h4 { font-weight: 400; font-size: 1.1em; margin: 0 !important; color: #222 !important; text-transform: uppercase; } .effect div { display: table-cell; width: 100%; font-size: 1.05em; vertical-align: middle; } .effect img { width: 5.5em; display: table-cell; padding-right: 0.5em; max-width: none; } .skin-active { margin-bottom: 0; } .skin-active h3 { color: #222; margin-top: .5em !important; } .skin-active hr { margin-bottom: .5em; } .skin-active a.button { font-size: .9em; margin-top: 1em; } .skin-active p { width: 76%; float: left; margin: 0 !important; font-size: .95em; } .skin-active img { float: right; width: 15%; margin-right: 6%; margin-top: -1.5em; max-width: none; } @media screen and (max-width: 720px) { .skin-active img { width: 22%; margin-right: 0; } } .skin-test img { float: right; margin-left: 1em; max-width: 70%; } @media screen and (max-width: 720px) { .skin-test img { width: 100%; max-width: 100%; margin: 0.5em 0 1em 0; } } /***** FORM *****/ .form-cnt { padding-right: 4em; } .contact-right { padding-top: 2em; } .form-field { width: 100%; margin: 0.8em 0 0 0; padding: 0.3em; } .form-field label { width: 100%; font-weight: 600; display: block; } .form-field span.warn, .form-field span.description { color: #6f8b37; width: 100%; margin-top: 0.5em; display: block; } .form-field span.description { color: #666; font-weight: 400; font-style: italic; } .form-field label.i-checks { font-weight: 400; } .form-field input[type="text"], .form-field select, .form-field textarea { margin-top: 0.5em; padding: .7em; width: 100%; border: 1px solid #aaa; border-radius: .5em; font-size: 1.1em; font-family: 'Barlow', sans-serif; } .form-field textarea { height: 10em; }