/* TABLE OF CONTENTS 1 - GLOBAL RULES - @FONTS - @COLORS - @BUTTONS - @GLOBAL RULES - @SHOPIFY OVERWRITES - @BLOCKS + ELEMENTS OF CODE - @Block - Page Introduction Header - @Block Element - Highlighted Section Title - @Block - Story versions 1 + 2 - @Block - Hero Triptychs - @Block - Nope List 2 - SITE COMPONENTS (HEADER / FOOTER / NAV) 3 - PAGE CUSTOMIZATIONS - @100 - Home - @101 - Scents - @102 - Products - @103 - Sniffing Set */ #upside-ucd-cart-drawer .ucd-discount-code-grid {display: none;} /* @FONTS */ /* @Font faces */ @font-face { font-family: "BrandonTextLight"; src: url("BrandonText-Light.woff2") format("woff2"), url("BrandonText-Light.woff") format("woff"); } @font-face { font-family: "BrandonTextRegular"; src: url("BrandonText-Regular.woff2") format("woff2"), url("BrandonText-Regular.woff") format("woff"); } @font-face { font-family: "BrandonTextRegularItalic"; src: url("BrandonText-Regular-Italic.woff2") format("woff2"), url("BrandonText-Regular-Italic.woff") format("woff"); } @font-face { font-family: "BrandonTextMedium"; src: url("BrandonText-Medium.woff2") format("woff2"), url('BrandonText-Medium.ttf') format('truetype'), url('BrandonText-Medium.eot'), url('BrandonText-Medium.svg') format('svg'), url("BrandonText-Medium.woff") format("woff"); } @font-face { font-family: "BrandonTextMediumItalic"; src: url("BrandonText-Medium-Italic.woff2") format("woff2"), url("BrandonText-Medium-Italic.woff") format("woff"); } /* @font-face { font-family: "BrandonTextBold"; src: url("BrandonText-Bold.woff2") format("woff2"), url("BrandonText-Bold.woff") format("woff"); } */ /* @H1 + ELEMENT TAGS */ // html {font-size: 16px;} // body {font-family: 'BrandonTextRegular' !important; color: #000; font-weight: 400; margin: 0; padding: 0; line-height: 1.5; text-transform: initial;} // h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6 {color: #000; font-weight: 400 !important; margin: 0; padding: 0; line-height: 1.25; text-transform: initial;} // h1, .h1 {font-family: 'BrandonTextBold' !important; font-size: 3.5rem;} // h2, .h2 {font-family: 'BrandonTextBold' !important; font-size: 2.5rem;} // h3, .h3 {font-family: 'BrandonTextMedium' !important; font-size: 2.125rem;} // h4, .h4 {font-family: 'BrandonTextRegular' !important; font-size: 1.75rem;} // h5, .h5 {font-family: 'BrandonTextRegular' !important; font-size: 1.5rem;} // h6, .h6 {font-family: 'BrandonTextMedium' !important; font-size: 1.25rem; line-height: 1.5;} // p, .para {font-size: 1rem; line-height: 1.5rem;} // /* input, textarea, button, select {font-family: 'BrandonTextRegular' !important;} */ // @media only screen and (max-width: 767px) { // html {font-size: .95rem;} // #hl-site-nav-burger > div > div.list_items_container > div.list_box > h6 {font-size: 1.38rem;} // } /* @HIDE/DISPLAY */ .hel-desk-hide {display: none;} .hel-desk-block-hide {display: none;} @media only screen and (max-width: 600px) { .hel-desk-hide {display: inline-block;} .hel-desk-block-hide {display: block;} .hel-mobile-hide {display: none;} } /* ========================================================================================== */ /* @102 / product / code */ /* ========================================================================================== */ /* #product */ .hel-102-product-hero {display: flex; align-items: center;} .hel-102-product-hero-img {width: 50%; display: inline-block; margin: 0; padding: 0; font-size: 0; text-align: center;} .hel-102-product-hero-img-carousel-dots {display: none;} .hel-102-product-hero-img-carousel-dots div {display: inline-block; background-color: #c8c8c8; margin: 0 10px; width: 12px; height: 12px; border-radius: 50%;} .hel-102-product-hero-img-carousel-dots-selected {background-color: #000000 !important;} .hel-102-product-hero-txt {width: 50%; align-items: center; margin: 0 0 30px 0; padding: 0;} .hel-102-product-hero-txt-content {padding: 5%; margin: 5%;} .hel-102-product-hero-txt-content h6 {font-family: BrandonTextMedium; margin-top: 10px;} .hel-102-product-hero-txt-content-ingredients {font-size: 16px; margin-top: 20px;} .hel-102-product-hero-txt-content-buy {margin-top: 40px;} .hel-102-product-hero-txt-content-buy-formstyle {width: 300px; margin: 0px;} .hel-102-product-hero-txt-content-buy-formstyle select {font-size: 14px; width: 300px; height: 50px; border: 1px solid #d8d8d8; background-color: #e8e8e8;} .hel-102-product-hero-txt-content-buy-formstyle-option {} .hel-102-product-hero-txt-content-buy-formstyle-option-text {margin-top: 30px; margin-bottom: 0px; font-size: 14px;} .hel-102-product-hero-txt-content-buy-formstyle-option-button {margin-top: 25px;} .hel-102-product-hero-txt-content-trust {margin-top: 15px;} .hel-102-product-content {display: flex; align-items: stretch; border-bottom: 1px solid #e8e8e8;} .hel-102-product-content-img {width: 50%; background-color: white; display: flex; flex-direction: column; padding: 50px 0%; font-size: 0; justify-content: space-between;} .hel-102-product-content-img div {margin-top: 50px;} .hel-102-product-content-img div:nth-child(1) {margin-top: 0px;} .hel-102-product-content-txt {width: 50%; align-items: center; margin: 0; padding: 0; background-color: white;} .hel-102-product-content-txt-frame {padding: 100px 10%; background-color: white;} /* shugert / accordian / padding-bottom: 0 */ .hel-102-product-content-txt-menu-accord-box {margin: 20px 0 0 0; padding-bottom: 0px; border: 1px solid #e8e8e8;} /* shugert / accordian / cursor: pointer */ .hel-102-product-content-txt-menu-accord-box-header {border-bottom: 1px solid #e8e8e8; background-color: #f2f2f2; padding: 20px 20px; display: flex; justify-content: space-between; align-items: center; cursor: pointer;} .hel-102-product-content-txt-menu-accord-box-header-frame {display: flex; align-items: center;} .hel-102-product-content-txt-menu-accord-box-header-frame img {width: 30px; height; 30px; margin-right: 20px;} .hel-102-product-content-txt-menu-accord-box-header-frame h6 {display: inline-block; font-family: brandontextmedium !important;} .hel-102-product-content-txt-menu-accord-box-header p {font-family: 'BrandonTextmedium' !important; font-size: 1.15rem; margin: 0; padding: 0;} /* shugert / accordian / everything after padding */ // .hel-102-product-content-txt-menu-accord-box-content {margin: 0; padding: 0px 7.5%; overflow: hidden; transition: max-height 0.2s ease-out; background-color: white; max-height: 0;} .hel-102-product-content-txt-menu-accord-box-content * {} .hel-102-product-content-txt-menu-accord-box-content-frame {} // .hel-102-product-content-txt-menu-accord-box-content-button {display: block !important; width: 100%; max-width: 170px !important; margin-top: 45px !important; padding: 7px 7px; background-color: #f2f2f2 !important; border: 1px solid #000000; border-radius: 3px; font-family: BrandonTextRegular !important; color: #000000 !important; font-size: 1rem; text-align: center; -webkit-appearance: none; -moz-appearance: none; appearance: none;} // .hel-102-product-content-txt-menu-accord-box-content-button:hover {background-color: #e2e2e2 !important;} .hel-102-product-content-txt-menu-accord-box-content-button-frame {margin-top: 15px;} .hel-102-product-content-txt-menu-accord-box-content-button-caption {font-size: 14px; margin-top: 10px;} .hel-102-product-content-txt-menu-accord-box-content-story-header {margin-bottom: 5px; font-size: 1.125rem; font-family: 'BrandonTextmedium' !important; display: inline-block;} .hel-102-product-content-txt-menu-accord-box-content-story-text {line-height: 1.5 !important; margin-bottom: 30px;} .hel-102-product-content-txt-menu-accord-box-content-line {border: 1px solid #e8e8e8; margin: 40px 0;} .hel-102-product-content-txt-menu-accord-box-content-values {display: flex; flex-wrap: wrap; align-items: center; justify-content: left;} .hel-102-product-content-txt-menu-accord-box-content-values-item {width: 50%; display: flex; align-items: center; margin-bottom: 35px;} .hel-102-product-content-txt-menu-accord-box-content-values-item div {display: flex; align-items: center; justify-content: center; padding: 5px; background-color: #525252; width: 50px; height: 50px; text-align: center; margin-right: 20px;} .hel-102-product-content-txt-menu-accord-box-content-values-item div img {height: 30px;} .hel-102-product-content-txt-menu-accord-box-content-facts {display: flex; flex-wrap: wrap; align-items: center; justify-content: left;} .hel-102-product-content-txt-menu-accord-box-content-facts-item {width: 100%; display: flex; align-items: center; justify-content: left; padding: 15px 15px 15px 0;} .hel-102-product-content-txt-menu-accord-box-content-facts-item-icon {background-color: #444; width: 60px; min-width: 60px; height: 60px; border-radius: 50%; margin-right: 20px; display: flex; align-items: center; justify-content: center; color: #FFFFFF;} .hel-102-product-content-txt-menu-accord-box-content-facts-item-icon img {height: 25px;} .hel-102-product-content-txt-menu-accord-box-content-facts-item-icon-title {font-family: BrandonTextMedium !important; font-size: 1.125rem;} .hel-102-product-content-txt-menu-accord-box-content-ingredients {font-family: BrandonTextMedium !important; font-size: 1.125rem;} .hel-102-product-content-txt-menu-accord-box-content-ingredients-block {display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-around; margin-top: 10px;} .hel-102-product-content-txt-menu-accord-box-content-ingredients-item {padding: 25px 10px; max-width: 120px; text-align: center; font-family: BrandonTextRegular !important; font-size: 1rem; overflow-wrap: break-word;} .hel-102-product-content-txt-menu-accord-box-content-ingredients-item img {min-height: 100px; min-width: 100px; max-width: 100px; margin-bottom: 10px; border-radius: 50%;} .hel-product-modal-hero {width: 100%; padding: 0; font-size: 0px;} .hel-product-modal-content-frame {margin: 0 7.5% 80px 7.5%;} .hel-product-modal-content-frame-story-header {margin-bottom: 5px; font-size: 1.125rem; font-family: 'BrandonTextmedium' !important; display: block; padding-bottom: 5px; border-bottom: 1px solid #e8e8e8;} .hel-product-modal-content-frame-story-text {line-height: 1.5 !important; margin-bottom: 30px;} @media only screen and (max-width: 978px) { .hel-100-home-hero {padding: 0 10px !important;} } @media only screen and (max-width: 600px) { .hel-100-home-hero {padding: 0 !important;} } .hel-102-product-scentslide {padding: 100px 0;} .hel-102-product-scentslide-heading {padding: 0 5%; background-color: white;} .hel-102-product-scentslide-content {margin-top: 30px; display: flex; justify-content: left; overflow: auto; white-space: nowrap;} .hel-102-product-scentslide-item-buffer {min-width: 5%; height: 100px;} .hel-102-product-scentslide-item-arrow {text-align: center; align-self: center; color: #d8d8d8; font-size: 1.5rem; margin-right: 30px;} .hel-102-product-scentslide-item-arrow i {padding-bottom: 100px;} .hel-102-product-scentslide-item-product {display: inline-block; margin-right: 30px;} .hel-102-product-scentslide-item-product-sniffbox {background-color: white; display: flex; flex-direction: column; justify-content: center; width: 270px; min-height: 160px; max-height: 160px; border: 1px solid #c8c8c8; text-align: center; font-size: 12px; text-align: center;} .hel-102-product-scentslide-item-product-sniffbox-logo {margin: 25px;} .hel-102-product-scentslide-item-product-description {margin-top: 10px;} .hel-102-product-scentslide-item-product-description-heading {font-size: 16px;} .hel-102-product-scentslide-item-product-description-adjectives {font-size: 14px;} .hel-102-product-scentslide-item-product-ringbox {display: flex; flex-direction: column; justify-content: flex-end; width: 90px; min-height: 160px; border: 1px solid #c8c8c8; text-align: center; font-size: 12px; text-align: center;} .hel-102-product-scentslide-item-product-ringbox-title {margin-bottom: 15px; letter-spacing: 1px;} .hel-102-product-scentslide-item-product-ringbox-logo {width: 100%; margin: 0; padding: 0; font-size: 0;} @media only screen and (max-width: 978px) { .hel-102-product-hero {flex-direction: column; border-bottom: 1px solid #e8e8e8;} .hel-102-product-hero-img {width: 100%;} .hel-102-product-hero-img-carousel-dots {margin-top: 15px; text-align: center; display: inline-block;} .hel-102-product-hero-txt {width: 100%; padding: 20px 0 0px 0;} .hel-102-product-content {} .hel-102-product-content-img {display: none;} .hel-102-product-content-txt {width: 100%;} } @media only screen and (max-width: 600px) { .hel-102-product-hero-txt-content {padding: 5% 0; margin: 10% 5%;} .hel-102-product-content-txt-frame {padding: 50px 5%;max-width: 450px;} .hel-102-product-content-txt-menu-accord-box-content-values-item {width: 100%;} } /* ========================================================================================== */ /* @201 + @202 / about + ingredients */ /* ========================================================================================== */ /* 201 + 202 / ABOUT + INGREDIENTS / MOBILE */ /* #hel-201-about-content * {border: 1px solid red;} */ #hel-201-about-content {border-bottom: 1px solid #e2e2e2; } #hel-201-about-content-frame {margin: 0 5%; padding-top: 100px;} .hel-201-about-content, .hel-201-about-content-reverse {display: flex; flex-direction: column; justify-content: space-between; margin-bottom: 100px;} .hel-201-about-content-img {width: 100%; font-size: 0;} .hel-201-about-content-img-frame {text-align: center;} .hel-201-about-content-txt {width: 100%;} .hel-201-about-content-txt-frame {max-width: 575px; text-align: center; margin: 20px auto;} .hel-201-about-content-txt-content {text-align: center; margin-top: 20px; font-size: 1.1em; line-height: 1.5;} /* 201 + 202 / ABOUT + INGREDIENTS / DESKTOP */ @media only screen and (min-width: 780px) { .hel-201-about-content {flex-direction: row-reverse; align-items: center; justify-content: space-between; } .hel-201-about-content-reverse {flex-direction: row; align-items: center; justify-content: space-between; } .hel-201-about-content > div.hel-201-about-content-img {width: 48%;} .hel-201-about-content-reverse > div.hel-201-about-content-img {text-align: left; margin: 0;; width: 48%;} .hel-201-about-content-img-frame {max-width: 575px; margin: 0 auto;} .hel-201-about-content-txt {width: 48%; align-self: center;} .hel-201-about-content-txt-frame {max-width: 575px; margin: 0 auto;} .hel-201-about-content-txt-frame > div.hl-highlight-frame {text-align: left !important; margin-left: 15px;} .hel-201-about-content-txt-content {text-align: left;} } .hel-101-scents-intro {margin: 75px 5%; padding-bottom: 50px; max-width: 750px;} .hel-101-scents-intro-heading {padding-bottom: 30px;} .hel-101-scents-intro-heading-line {text-align: left; display: block !important;} .hel-101-scents-intro-content {} @media only screen and (min-width: 780px) { .hel-101-scents-intro {margin: 75px auto; padding-bottom: 50px; max-width: 750px; text-align: center;} .hel-101-scents-intro-heading-line {border: 1px solid red; text-align: center !important; display: inline !important; margin: 0 20px;} .hel-101-scents-intro-content {text-align: center;} } /* ======================================== */ /* @assets / text / highlights /* ======================================== */ .hel-highlight-frame {margin-left: 15px;} .hel-highlight-text {display: inline !important; font-family: 'BrandonTextMedium' !important; line-height: 2.01em !important; color: white !important; padding: 5px 0px; box-shadow: 15px 0 0 white, -15px 0 0 white; -webkit-box-shadow: 15px 0 0 white, -15px 0 0 white; -webkit-box-decoration-break: clone; -ms-box-decoration-break: clone; -o-box-decoration-break: clone; box-decoration-break: clone;} .hel-highlight-title-frame {margin-left: 30px;} .hel-highlight-title-text {display: inline !important; font-family: 'BrandonTextBold' !important; line-height: 2.0em !important; color: white !important; padding: 5px 0px; box-shadow: 15px 0 0 white, -15px 0 0 white; -webkit-box-shadow: 15px 0 0 white, -15px 0 0 white; -webkit-box-decoration-break: clone; -ms-box-decoration-break: clone; -o-box-decoration-break: clone; box-decoration-break: clone;} @media only screen and (max-width: 767px) { .hel-highlight-frame {margin-left: 15px;} } /* ======================================== */ /* @Block - Nope List */ /* ======================================== */ #hel-snip-nope * {} #hel-snip-nope-frame {margin: 50px auto; width: 90%; background-color: #f2f2f2; padding: 75px 10%;} .hel-snip-nope-icon {width: 60px; height: 60px; background-color: red; padding: 10px; margin-bottom: 10px;} .hel-snip-nope-head {color: #FF0000; margin-bottom: 10px;} @media only screen and (max-width: 600px) { #hel-block-nope {padding: 75px 5%} } #hel-100-home-hero {} .hel-100-home-hero {width: 100%; padding: 0 20px; font-size: 0px;} @media only screen and (max-width: 978px) { .hel-100-home-hero {padding: 0 10px !important;} } @media only screen and (max-width: 600px) { .hel-100-home-hero {padding: 0 !important;} } #hel-100-home-intro * {} .hel-100-home-intro-frame {margin: 125px auto; padding: 0 10%; text-align: center;} .hel-100-home-intro-frame h1 {margin: 0 auto;} .hel-100-home-intro-frame h6 {padding-top: 20px; padding-bottom: 15px; max-width: 750px; margin: 0 auto;} .hel-100-home-intro-frame div button {margin: 0 auto;} .hel-100-home-intro-frame div a {padding: 0 !important;} @media only screen and (max-width: 978px) { .hel-100-home-intro-frame {margin: 40px 0 125px 0; padding: 0 5%;} } /* ========================================================================================== */ /* BUTTONS */ /* ========================================================================================== */ button.hel-assets-button-black, input.hl-assets-button-black {margin-top: 0px !important; display: block !important; width: 100%; max-width: 350px; color: white; font-size: 17.5px; font-family: brandontextmedium !important; letter-spacing: 1px; margin: 0px; background-color: #000000 !important; border: 1px solid #000000; padding: 15px 15px; border-radius: 5px; -webkit-appearance: none; -moz-appearance: none; appearance: none;} button.hel-assets-button-black:hover, input.hl-assets-button-black:hover {background-color: #333333 !important;} @media only screen and (max-width: 978px) { button.hl-assets-button-black {display: inline-block !important; margin-left: 0px !important;} } @media only screen and (max-width: 600px) { button.hel-assets-button-black, input.hl-assets-button-black {padding: 15px 15px !important; max-width: 350px; font-size: 20px;} } @media only screen and (max-width: 600px) { #hl-block-story-frame {padding: 0 20px 20px 20px !important; margin: 0;} .hl-block-story-img {padding: 10px 0 !important;} } /* ========================================================================================== */ /* ========================================================================================== */ /* GLOBAL RULES */ /* ========================================================================================== */ /* ========================================================================================== */ /* #fonts / custom / highlighted */ div.hl-highlight-frame {margin-left: 15px;} .hl-highlight-text {display: inline !important; font-family: 'BrandonTextMedium' !important; line-height: 2.25em !important; color: white !important; padding: 5px 0px; box-shadow: 15px 0 0 white, -15px 0 0 white; -webkit-box-shadow: 15px 0 0 white, -15px 0 0 white; -webkit-box-decoration-break: clone; -ms-box-decoration-break: clone; -o-box-decoration-break: clone; box-decoration-break: clone;} div.hl-highlight-title-frame {margin-left: 30px;} .hl-highlight-title-text {display: inline !important; font-family: 'BrandonTextBold' !important; line-height: 2.0em !important; color: white !important; padding: 5px 0px; box-shadow: 15px 0 0 white, -15px 0 0 white; -webkit-box-shadow: 15px 0 0 white, -15px 0 0 white; -webkit-box-decoration-break: clone; -ms-box-decoration-break: clone; -o-box-decoration-break: clone; box-decoration-break: clone;} @media only screen and (max-width: 767px) { div.hl-highlight-frame {margin-left: 15px;} } div.hl-highlight-text-block {display: inline !important; font-family: 'BrandonTextMedium' !important; line-height: 2.25em !important; color: white !important; padding: 5px 0px; box-shadow: 15px 0 0 white, -15px 0 0 white; -webkit-box-shadow: 15px 0 0 white, -15px 0 0 white; -webkit-box-decoration-break: clone; -ms-box-decoration-break: clone; -o-box-decoration-break: clone; box-decoration-break: clone;} .hl-giant {font-family: 'BrandonTextBold' !important; font-size: 4rem;} .hl-highlight-copy {margin-left: -15px !important; margin-top: 20px;} .hl-whisper-text {font-size: 1.1rem; color: #a2a2a2; margin-bottom: 0px; padding-bottom: 0px; margin-block-end: 0px;} .hl-text-brandontextbold, .brandontextbold {font-family: 'BrandonTextBold' !important;} .hl-text-brandontextmedium, .brandontextmedium {font-family: 'BrandonTextMedium' !important;} .hl-text-brandontextregularitalic, .brandontextregularitalic {font-family: 'BrandonTextRegularItalic' !important;} .hl-text-brandontextmediumitalic, .brandontextmediumitalic {font-family: 'BrandonTextMediumItalic' !important;} * {font-variant-ligatures: none;} /* ========================================================================================== */ /* ========================================================================================== */ /* #colors */ /* #colors / background */ .hl-bgcolor-black {background-color: #000000;} .hl-bgcolor-capsene {background-color: #35A217;} .hl-bgcolor-saltlick {background-color: #53565A;} .hl-bgcolor-bloozberry {background-color: #8A045b;} .hl-bgcolor-chillwhite {background-color: #37688f;} .hl-bgcolor-quino {background-color: #FFB500;} .hl-bgcolor-dula {background-color: #7566A0;} .hl-bgcolor-sniffingset {background-color: #F9C20A;} .hl-bgcolor-white {background-color: #FFFFFF;} /* #colors / fonts */ .hl-color-black {color: #000000;} .hl-color-capsene {color: #35A217;} .hl-color-saltlick {color: #53565A;} .hl-color-bloozberry {color: #8A045b;} .hl-color-chillwhite {color: #37688f;} .hl-color-quino {color: #FFB500;} .hl-color-dula {color: #7566A0;} .hl-color-sniffingset {color: #F9C20A;} .hl-color-white {color: #FFFFFF;} /* #colors / highlighted */ .hl-hlcolor-black {background-color: #000000; box-shadow:15px 0 0 #000000, -15px 0 0 #000000;} .hl-hlcolor-white {background-color: #FFFFFF; box-shadow:15px 0 0 #FFFFFF, -15px 0 0 #FFFFFF;} .hl-hlcolor-red {background-color: #FF0000; box-shadow:15px 0 0 #FF0000, -15px 0 0 #FF0000;} .hl-hlcolor-capsene {background-color: #35A217; box-shadow:15px 0 0 #35A217, -15px 0 0 #35A217;} .hl-hlcolor-bloozberry {background-color: #8A045b; box-shadow:15px 0 0 #8A045b, -15px 0 0 #8A045b;} .hl-hlcolor-quino {background-color: #FFB500; box-shadow:15px 0 0 #FFB500, -15px 0 0 #FFB500;} .hl-hlcolor-chillwhite {background-color: #37688f; box-shadow:15px 0 0 #37688f, -15px 0 0 #37688f;} .hl-hlcolor-dula {background-color: #7566A0; box-shadow:15px 0 0 #7566A0, -15px 0 0 #7566A0;} .hl-hlcolor-saltlick {background-color: #53565A; box-shadow:15px 0 0 #53565A, -15px 0 0 #53565A;} .hl-hlcolor-sniffingset {background-color: #F9C20A; box-shadow:15px 0 0 #F9C20A, -15px 0 0 #F9C20A;} .hl-hlcolor-nope {background-color: #FF0000; box-shadow:15px 0 0 #FF0000, -15px 0 0 #FF0000;} /* #colors / highlighted / title */ .hl-hlcolor-title-black {background-color: #000000; box-shadow:30px 0 0 #000000, -30px 0 0 #000000;} .hl-hlcolor-title-white {background-color: #FFFFFF; box-shadow:30px 0 0 #FFFFFF, -30px 0 0 #FFFFFF;} .hl-hlcolor-title-red {background-color: #FF0000; box-shadow:30px 0 0 #FF0000, -30px 0 0 #FF0000;} .hl-hlcolor-title-capsene {background-color: #35A217; box-shadow:30px 0 0 #35A217, -30px 0 0 #35A217;} .hl-hlcolor-title-bloozberry {background-color: #8A045b; box-shadow:30px 0 0 #8A045b, -30px 0 0 #8A045b;} .hl-hlcolor-title-quino {background-color: #FFB500; box-shadow:30px 0 0 #FFB500, -30px 0 0 #FFB500;} .hl-hlcolor-title-chillwhite {background-color: #37688f; box-shadow:30px 0 0 #37688f, -30px 0 0 #37688f;} .hl-hlcolor-title-dula {background-color: #7566A0; box-shadow:30px 0 0 #7566A0, -30px 0 0 #7566A0;} .hl-hlcolor-title-saltlick {background-color: #53565A; box-shadow:30px 0 0 #53565A, -30px 0 0 #53565A;} .hl-hlcolor-title-sniffingset {background-color: #F9C20A; box-shadow:30px 0 0 #F9C20A, -30px 0 0 #F9C20A;} .hl-hlcolor-title-nope {background-color: #FF0000; box-shadow:30px 0 0 #FF0000, -30px 0 0 #FF0000;} /* ========================================================================================== */ /* ========================================================================================== */ /* @BUTTONS */ button.hl-assets-button-white, .hl-assets-button-white {margin-top: 35px !important; display: block !important; width: 100%; max-width: 250px; color: black; font-size: 18px; font-family: brandontextmedium !important; margin: 0px; background-color: #fAFaFa !important; border: 1px solid #C2C2C2; padding: 12px 15px; border-radius: 5px; text-align: center; -webkit-appearance: none; -moz-appearance: none; appearance: none;} .hl-assets-button-white-short {margin-top: 35px !important; display: inline-block !important; color: black; font-size: 18px; font-family: brandontextmedium !important; margin: 0px; background-color: white !important; border: 1px solid #C2C2C2; padding: 12px 10px; border-radius: 5px; text-align: center; -webkit-appearance: none; -moz-appearance: none; appearance: none;} .hl-assets-button-white-small {margin-top: 35px !important; display: block !important; width: 100%; max-width: 200px; color: black; font-size: 16px; font-family: brandontextmedium !important; margin: 0px; background-color: white !important; border: 1px solid #C2C2C2; padding: 8px 10px; border-radius: 5px; text-align: center; -webkit-appearance: none; -moz-appearance: none; appearance: none;} .hl-assets-button-white-tiny {margin-top: 5px !important; display: inline-block !important; width: 100%; max-width: 100px; color: black; font-size: 16px; font-family: brandontextmedium !important; margin: 0px; background-color: white !important; border: 1px solid #C2C2C2; padding: 8px 10px; border-radius: 5px; text-align: center; -webkit-appearance: none; -moz-appearance: none; appearance: none;} button.hl-assets-button-black, input.hl-assets-button-black {margin-top: 35px !important; display: block !important; width: 100%; max-width: 250px; color: white; font-size: 17.5px; font-family: brandontextmedium !important; letter-spacing: 1px; margin: 0px; background-color: #000000 !important; border: 1px solid #000000; padding: 12px 15px; border-radius: 5px; -webkit-appearance: none; -moz-appearance: none; appearance: none;} .hl-assets-button-black-short {margin-top: 35px !important; display: inline-block !important; color: white; font-size: 17.5px; font-family: brandontextmedium !important; margin: 0px; background-color: #000000 !important; border: 1px solid #000000; padding: 12px 10px; border-radius: 5px; text-align: center; -webkit-appearance: none; -moz-appearance: none; appearance: none;} .hl-assets-button-black-small {margin-top: 35px !important; display: block !important; width: 100%; max-width: 200px; color: white; font-size: 16px; font-family: brandontextmedium !important; margin: 0px; background-color: #000000 !important; border: 1px solid #000000; padding: 8px 10px; border-radius: 5px; text-align: center; -webkit-appearance: none; -moz-appearance: none; appearance: none;} div.hl-assets-button-none {text-align: center; margin: 15px 0 15px 0 !important; display: block !important; width: 100%; max-width: 250px; color: black; font-size: 17.5px; font-family: brandontextregular !important; margin: 0px; margin-left: -15px !important; background-color: white !important; border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none;} button.hl-assets-button-white:hover {background-color: #F5F5F5 !important;} button.hl-assets-button-black:hover, input.hl-assets-button-black:hover {background-color: #333333 !important;} /* Input field to add quantity for buttons */ .hl-assets-qty-form {width: 75px; height: 50px; border: 1px solid #c2c2c2; margin-right: 20px;} @media only screen and (max-width: 978px) { button.hl-assets-button-white {display: inline-block !important; margin-left: 0px !important;} button.hl-assets-button-black {display: inline-block !important; margin-left: 0px !important;} } @media only screen and (max-width: 600px) { button.hl-assets-button-black {padding: 15px 10px !important; max-width: 350px; font-size: 20px;} button.hl-assets-button-white {padding: 15px 10px !important; max-width: 350px; font-size: 20px;} div.hl-102-s3-block2__buy > form > span {display: none !important;} div.hl-102-s3-block2__buy > form > input {display: none !important;} } /* ========================================================================================== */ /* ========================================================================================== */ /* @SHOPIFY OVERWRITES */ /* #MainContent {max-width: 1500px; margin: 0 auto;} */ /* .custom-content {padding: 0px; margin-left: 0px !important;} .custom__item {padding: 0px !important;} .section-header {display: none;} .main-content {padding: 0px !important; margin-bottom: 150px !important;} .index-section {padding: 0px !important;} .page-width {padding: 0px !important;} */ /* @HIDE/DISPLAY */ .hl-desk-hide {display: none;} .hl-desk-block-hide {display: none;} @media only screen and (max-width: 767px) { .hl-desk-hide {display: inline-block;} .hl-desk-block-hide {display: block;} .hl-mobile-hide {display: none;} } /* ========================================================================================== */ /* ========================================================================================== */ /* @BLOCKS + ELEMENTS OF CODE */ /* ======================================== */ /* @Block - Page Introduction Header */ /* ======================================== */ #hl-block-header-frame {padding: 75px 5% 75px 5%; border-bottom: 1px solid #e2e2e2; text-align: center;} .hl-block-header {max-width: 900px; margin: 0 auto;} #hl-block-header-frame p {margin-bottom: 15px;} #hl-block-header-frame h6 {margin-top: 20px; margin-bottom: 20px; line-height: 1.5; max-width: 600px;} #hl-block-header-frame > div > center > div > a > i, #hl-block-header-frame > div > center > div > i {margin-top: 20px;} #hl-block-header-frame > div > center:nth-child(4) > div > i {padding-top: 20px;} /* Abpout Us block */ #hl-201-s2 > #hl-block-header-frame h1 {margin-top: 55px; margin-bottom: 25px;} #hl-201-s2 > #hl-block-header-frame h6 {margin: 0 auto; line-height: 1.5; max-width: 650px;} #hl-201-s2 > #hl-block-header-frame {padding: 100px 5% 125px 5%;} /* Sniffing Set upsell block */ #hl-block-header-frame > div.hl-block-header-2 > center > a {padding-top: 10px;} @media only screen and (max-width: 600px) { #hl-block-header-frame div.hl-highlight-title-frame {margin: 10px 30px 0 30px;} #hl-201-s2 > #hl-block-header-frame {text-align: left; padding: 100px 7.5% 125px 7.5%;} } /* ======================================== */ /* @Block - Story versions 1 + 2 */ /* ======================================== */ #hl-block-story-frame {display: flex; justify-content: center;} #hl-block-story-frame-style2 {display: flex; justify-content: center; flex-direction: row-reverse;} .hl-block-story-img {width: 50%; font-size: 0; padding: 50px 20px;} #hl-block-story-frame-style2 > div.hl-block-story-img {padding-left: 0px;} .hl-block-story-txt {width: 50%; padding: 5%; align-self: center;} .hl-block-story-txt-container {max-width: 550px;} div.hl-block-story-txt > div > p.hl-whisper-text {margin-bottom: 10px;} .hl-block-story-txt > div > div {max-width: 500px; margin-bottom: 20px;} .hl-block-story-txt-container h6 {line-height: 1.5;} @media only screen and (max-width: 978px) { #hl-block-story-frame {align-items: center; flex-direction: column; padding-bottom: 50px;} #hl-block-story-frame-style2 {align-items: center; flex-direction: column; padding-bottom: 50px;} .hl-block-story-txt-container {max-width: none;} .hl-block-story-txt > div > div {max-width: none;} .hl-block-story-img {width: 100%; padding: 50px 5% 0 5%;} .hl-block-story-txt {width: 100%; margin-top: 20px; margin-bottom: 50px;} #hl-block-story-frame-style2 > div.hl-block-story-img {padding: 50px 5% 0 5%;} } @media only screen and (max-width: 600px) { #hl-block-story-frame-style2 > div.hl-block-story-img, .hl-block-story-img {padding: 0;} .hl-block-story-txt-container-buttonless {margin-bottom: 40px !important;} } /* ======================================== */ /* @Block - Hero Singles */ /* ======================================== */ #hl-block-hero1 {width: 100%; height: auto; display: flex; padding: 0 20px; font-size: 0px;} @media only screen and (max-width: 600px) { #hl-block-hero1 {padding: 0;} } /* ======================================== */ /* @Block - Hero Doubles */ /* ======================================== */ #hl-101-s1 {} #hl-block-hero2 {width: 100%; height: auto; display: flex; padding: 0 20px; font-size: 0px;} .hl-block-hero2-img1 {width: auto; display: inline-block; font-size: 0px; padding-right: 10px;} .hl-block-hero2-img2 {width: auto; display: inline-block; font-size: 0px; padding-left: 10px;} @media only screen and (max-width: 978px) { .hl-block-hero2-img1 {display: none;} .hl-block-hero2-img2 {padding-left: 0;} } @media only screen and (max-width: 600px) { #hl-block-hero2 {padding: 0;} } /* ======================================== */ /* @Block - Hero Triptychs */ /* ======================================== */ .hl-block-hero3-block1 {width: 100%; height: auto; background: white; display: flex; padding: 0 10px; font-size: 0px;} .hl-block-hero3-block1-A {width: auto; display: inline-block; font-size: 0px; padding-right: 10px;} .hl-block-hero3-block1-B {width: auto; display: inline-block; font-size: 0px; padding-right: 10px;} .hl-block-hero3-block1-C {width: auto; display: inline-block; font-size: 0px;} .hl-block-hero2-block1 {width: 100%; height: auto; background: white; display: flex; padding: 0 10px; font-size: 0px;} .hl-block-hero2-block1-A {width: auto; display: inline-block; font-size: 0px; padding-right: 10px;} .hl-block-hero2-block1-B {width: auto; display: inline-block; font-size: 0px;} @media only screen and (max-width: 978px) { .hl-block-hero3-block1 {padding: 0;} } @media only screen and (max-width: 600px) { .hl-block-hero3-block1 {padding: 0;} } /* Variations - hero triptych */ @media only screen and (max-width: 978px) { .hl-block-hero2-block1 {padding: 0;} .hl-block-hero2-block1-A {display: none; font-size: 0px; padding-right: 10px;} .hl-block-hero2-block1-B {width: 100%; display: inline-block; font-size: 0px; padding; 0;} /* A BB C -- A BB -- BB */ #hl-102-saltlick-hero-frame div.hl-block-hero3-block1 div.hl-block-hero3-block1-C, #hl-102-bloozberry-hero-frame div.hl-block-hero3-block1 div.hl-block-hero3-block1-C, #hl-102-quino-hero-frame div.hl-block-hero3-block1 div.hl-block-hero3-block1-C, #hl-102-dula-hero-frame div.hl-block-hero3-block1 div.hl-block-hero3-block1-C, #hl-201-about-hero-frame div.hl-block-hero3-block1 div.hl-block-hero3-block1-C {display: none;} #hl-102-saltlick-hero-frame div.hl-block-hero3-block1 div.hl-block-hero3-block1-B, #hl-102-bloozberry-hero-frame div.hl-block-hero3-block1 div.hl-block-hero3-block1-B, #hl-102-quino-hero-frame div.hl-block-hero3-block1 div.hl-block-hero3-block1-B, #hl-102-dula-hero-frame div.hl-block-hero3-block1 div.hl-block-hero3-block1-B, #hl-201-about-hero-frame div.hl-block-hero3-block1 div.hl-block-hero3-block1-B {padding-right: 0px;} /* A BB C -- BB C -- BB */ #hl-101-scents-hero-frame div.hl-block-hero3-block1 div.hl-block-hero3-block1-A {display: none;} /* AA B C -- AA C -- AA */ #hl-102-chillwhite-hero-frame div.hl-block-hero3-block1 div.hl-block-hero3-block1-B {padding-right: 0px; display: none;} #hl-102-chillwhite-hero-frame div.hl-block-hero3-block1 div.hl-block-hero3-block1-C {padding-right: 0px;} /* A B CC -- B CC -- A B */ #hl-102-capsene-hero-frame div.hl-block-hero3-block1 div.hl-block-hero3-block1-A, #hl-103-sniffing-hero-frame div.hl-block-hero3-block1 div.hl-block-hero3-block1-A {padding-right: 0px; display: none;} /* A B C -- A B -- A B */ #hl-203-help-hero-frame div.hl-block-hero3-block1 div.hl-block-hero3-block1-B {padding-right: 0px;} #hl-203-help-hero-frame div.hl-block-hero3-block1 div.hl-block-hero3-block1-C {display: none;} } @media only screen and (max-width: 600px) { /* A BB C -- A BB -- BB */ #hl-102-saltlick-hero-frame div.hl-block-hero3-block1 div.hl-block-hero3-block1-A, #hl-102-bloozberry-hero-frame div.hl-block-hero3-block1 div.hl-block-hero3-block1-A, #hl-102-quino-hero-frame div.hl-block-hero3-block1 div.hl-block-hero3-block1-A, #hl-102-dula-hero-frame div.hl-block-hero3-block1 div.hl-block-hero3-block1-A, #hl-201-about-hero-frame div.hl-block-hero3-block1 div.hl-block-hero3-block1-A {display: none;} /* A BB C -- BB C -- BB */ #hl-101-scents-hero-frame div.hl-block-hero3-block1 div.hl-block-hero3-block1-C {display: none;} #hl-101-scents-hero-frame div.hl-block-hero3-block1 div.hl-block-hero3-block1-B {padding-right: 0px;} /* AA B C -- AA C -- AA */ #hl-102-chillwhite-hero-frame div.hl-block-hero3-block1 div.hl-block-hero3-block1-C {display: none;} #hl-102-chillwhite-hero-frame div.hl-block-hero3-block1 div.hl-block-hero3-block1-A {padding-right: 0px;} /* A B CC -- B CC -- A B */ #hl-102-capsene-hero-frame div.hl-block-hero3-block1 div.hl-block-hero3-block1-C, #hl-103-sniffing-hero-frame div.hl-block-hero3-block1 div.hl-block-hero3-block1-C {display: none;} #hl-102-capsene-hero-frame div.hl-block-hero3-block1 div.hl-block-hero3-block1-A, #hl-103-sniffing-hero-frame div.hl-block-hero3-block1 div.hl-block-hero3-block1-A {display: inline-block; padding-right: 10px;} #hl-102-capsene-hero-frame div.hl-block-hero3-block1 div.hl-block-hero3-block1-B, #hl-103-sniffing-hero-frame div.hl-block-hero3-block1 div.hl-block-hero3-block1-B {padding-right: 0px;} /* A B C -- A B -- A B */ #hl-203-help-hero-frame div.hl-block-hero3-block1 div.hl-block-hero3-block1-A {padding-right: 0px;} #hl-203-help-hero-frame div.hl-block-hero3-block1 div.hl-block-hero3-block1-B {display: none;} } /* ========================================================================================== */ /* ========================================================================================== */ /* SITE COMPONENTS (HEADER / FOOTER / NAV) */ /* ========================================================================================== */ /* ========================================================================================== */ /* ======================================== */ /* @HEADER */ /* ======================================== */ /* Hides search display */ .search-header {display: none !important;} /* Hides account icon display */ #hl-site-nav-links .site-header__account {display: none;} /* Makes header sticky */ /* #shopify-section-header-helio {position: fixed; z-index:1000; left:0; right:0; max-width: 1500px; margin: 0 auto; top:0;} */ /* Formats site header full block */ .site-header {padding: 5px 5% 5px 5% !important; border-bottom: 1px solid #e2e2e2;} /* Ensures that logos on mobile and desktop are roughly same height so headers are same height */ .site-header__logo img {margin: 0 auto; max-height: 55px; width: auto !important; max-width: auto !important;} /* Puts some padding around the logo */ .site-header__logo a img {padding: 15px;} /* Formats icon sizes across the board */ .site-header__icon svg {height: 25px; width: 25px;} /* Formats where cart count item appears in relation to cart */ .site-header__cart-count {right: -0.5rem; top: 1rem; color: #000 !important; background-color: transparent; min-width: 1.2em; height: 1.2em;} /* Formats announcement bar */ p.announcement-bar__message {color: white !important; display: inline-block; font-family: Brandontextregular; font-size: .85rem; font-weight: 400; padding: 5px 10px;} /* Formats text on navigation + hover state */ #SiteNav {border: 1px solid teal; text-align: left !important; font-family: Brandontextmedium; font-size: 1.1rem;} #SiteNav > li a:hover {color: #A2A2A2;} /* Formats everything below header including the footer */ .site-nav {text-align: right; margin: 0 0;} /* HEADER > BURGER OVERLAY */ #menuToggle {z-index: 10; margin: 15px auto; -webkit-user-select: none; user-select: none;} #menuToggle input {z-index: 5; display: block; width: 85px; height: 65px; position: absolute; top: 0; left: 0; cursor: pointer; opacity: 0; /* hide this */ z-index: 2; /* and place it over the hamburger */ -webkit-touch-callout: none;} /* Hamburger menu */ #menuToggle span {z-index: 10; display: block; width: 25px; height: 2px; margin-bottom: 5px; position: relative; background: black; border-radius: 0px; z-index: 1; transform-origin: 4px 0px; transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease;} #menuToggle span:first-child {transform-origin: 0% 0%;} #menuToggle span:nth-last-child(2) {transform-origin: 0% 100%;} /* Transform all the slices of hamburger into a crossmark but hide middle one. */ #menuToggle input:checked ~ span {z-index: 10; opacity: 1; transform: rotate(45deg) translate(-2px, -1px); background: #000;} #menuToggle input:checked ~ span:nth-last-child(3) {z-index: 10; opacity: 0; transform: rotate(0deg) scale(0.2, 0.2);} #menuToggle input:checked ~ span:nth-last-child(2){ z-index: 10;opacity: 1; transform: rotate(-45deg) translate(0, -2px);} /* Position the menu */ #menu {z-index: 1; position: fixed; width: 100%; left: 0; top: 0; padding: 125px 50px 20px 65px; right: -100px; height:100vh; background: #F8F8F8; list-style-type: none; -webkit-font-smoothing: antialiased; /* to stop flickering of text in safari */ transform-origin: 0% 0%; transform: translate(-100%, 0); transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);} #menu li {padding: 10px 0; font-size: 22px; font-family: brandontextregular;} /* Fade in from the left */ #menuToggle input:checked ~ ul {transform: scale(1.0, 1.0); opacity: 1;} /* Hides normal link menu */ #AccessibleNav {display: none;} #hl-site-nav-links {z-index: 0; padding-left: 22px; min-width: 70px; width: 33.3%;} #hl-site-nav-burger > div > div.list_items_container > p > i {color: #888;} @media only screen and (min-width: 750px) { #hl-site-mobile-logo {display: none;} } @media only screen and (max-width: 749px) { #hl-site-nav-mobile-overlay {display:inline;} #hl-site-desktop-logo {display: none;} #hl-site-mobile-logo {margin: 0 auto !important; width: 55px; text-align: center !important;} #hl-site-nav-logo { width: 100% !important;} #hl-site-nav-logo .site-header__logo a img {padding: 5px;} #hl-site-nav-burger {padding-left: 10px; min-width: 70px; width: auto;} #hl-site-nav-links {z-index: 0; padding-left: 22px; min-width: 70px; width: auto;} #hl-site-nav-links .site-header__account {display: none;} .site-header__cart-count {right: 2.25rem;} .search-header {display: none !important;} .site-header {padding: 10px 2.5% 10px 2.5% !important; border-bottom: none;} .site-header__search-toggle {display: none !important;} .site-header__logo img {margin: 0 auto; max-height: 54px; width: auto !important;} .logo-align--center .site-header__logo {margin: 0px;} /* HEADER > BURGER OVERLAY */ #hl-site-nav-links .site-header__account {display: none;} } /* ======================================== */ /* @SIDEBAR */ /* ======================================== */ /* ======================================== */ /* @FOOTER */ /* ======================================== */ #shopify-section-footer-helio {border-top: 1px solid #C2C2C2; background-color: #F2F2F2 !important; padding: 50px 10%;} #hl-footer-frame {max-width: 1500px !important; margin: 0 auto;} /* Formats newsletter section */ #hl-footer-newsletter-frame {display: flex; justify-content: space-between; margin-bottom: 50px;} .hl-footer-newsletter-block1 {margin-right: 5%; display: inline-block; text-align: left; margin-top: -5px;} .hl-footer-newsletter-block1 h6 {margin-top: 15px; margin-left: 0px;} #hl-footer-newsletter-frame > div.hl-footer-newsletter-block1 > p {margin-top: 15px;} .hl-footer-newsletter-block2 {width: 40%; margin-left: 5%; margin-top: -20px; max-width: 350px; text-align: right;} .hl-footer-newsletter-block2-10 {text-align: left;} /* Kalviyo formatting */ /* div.klaviyo-form-VFXUT6 {margin-left: -15px;} */ /* div.klaviyo-form-VFXUT6 > * {font-family: 'brandontextmedium';} */ /* div.klaviyo-form-VFXUT6 button {border-radius: 0 5px 5px 0 !important; padding-left: 15px !important; padding-right: 15px !important;} div.klaviyo-form-VFXUT6 input {border-radius: 3px 0 0 3px !important;} */ /* Formats links and social section */ #hl-footer-secondrow-frame {display: flex; flex-direction: row-reverse; justify-content: space-between; padding-top: 20px; padding-bottom: 50px; border-top: 1px solid #c2c2c2;} #hl-footer-links-frame {flex-basis: 70%; display: flex; align-items: flex-start; justify-content: flex-start; padding: 0; overflow: auto; text-align: left; align-items: flex-start;} #hl-footer-social-frame {text-align: center; width: 40%; display: inline; overflow: auto;} #hl-footer-links-frame .site-footer__linklist-item {} #hl-footer-links-frame .site-footer__linklist-item a {color: #000000 !important;} #hl-footer-links-frame .site-footer__linklist-item a:hover {color: #A2A2A2 !important;} /* Formats social media section */ #hl-footer-social-frame .social-icons__link {display: inline !important;} .social-icons__link{color: black;} .social-icons__link:hover {color: grey !important;} .icon-instagram {width: 25px; height: 25px; margin-right: 10px;} .icon-facebook {width: 25px; height: 25px;} /* Formats copyright section */ #hl-footer-legals-frame {background-color: black; color: #FFFFFF; text-align: right !important; clear: both; padding: 10px 20px;} #hl-footer-legals-frame small a {color: #FFFFFF;} #hl-footer-legals-block1 {display: inline;} /* .hl-unlikely {border: 1px solid red !important;} */ @media only screen and (max-width: 978px) { #shopify-section-footer-helio {padding: 50px 5%;} #hl-footer-newsletter-frame {flex-direction: column; margin-right: 0; margin-bottom: 50px;} .hl-footer-newsletter-block1 {margin-bottom: 30px; text-align: center; margin-right: 0 !important;} #hl-footer-newsletter-frame > div.hl-footer-newsletter-block1 > p {margin-top: 5px;} .hl-footer-newsletter-block2 {max-width: none; margin-left: 0%; width: 100%; text-align: right;} .hl-footer-newsletter-block2-10 {text-align: center;} #hl-footer-newsletter-frame > div.hl-footer-newsletter-block1 > div {margin-left: 0px;} .hl-footer-links-frame-title {border-bottom: 1px solid #c2c2c2;} div.klaviyo-form-VFXUT6 {margin-left: 0;} #hl-footer-secondrow-frame {flex-direction: column; padding-top: 40px;} #hl-footer-social-frame {width: 100%; padding-bottom: 40px; border-bottom: 1px solid #c2c2c2;} #hl-footer-links-frame {flex-wrap: wrap; margin-top: 40px; justify-content: space-between; align-items: stretch; max-width: 600px;} #hl-footer-links-frame div {display: inline-block; width: 20%; margin-right: 10%; margin-bottom: 30px;} #hl-footer-links-frame .site-footer__linklist-item {padding: 0;} #hl-footer-legals-frame {display: flex; flex-direction: column; text-align: center !important;} #hl-footer-legals-block1 {display: inline-block; padding-top: 10px;} #hl-footer-links-frame > div > ul > li {display: block; margin-top: 10px;} } @media only screen and (max-width: 600px) { #hl-footer-links-frame div {width: 40%;} } .site-footer {margin: 0;} .site-footer__linklist, .site-footer__newsletter, .site-footer__social-icons {margin-block-start: 0;} .site-footer__copyright--bottom {margin-top: 0px;} .site-footer__copyright--bottom {text-align: left !important;} /* ========================================================================================== */ /* ========================================================================================== */ /* PAGE CUSTOMIZATIONS */ /* ========================================================================================== */ /* ========================================================================================== */ /* @100-HOME */ /* ======================================== */ /* @100-HOME-S1-HERO /* ======================================== */ #hl-100-hero-frame {display: flex; flex-direction: row;} .hl-100-hero-block1 {width: 100%; background: white; display: flex; padding: 0 20px; font-size: 0px;} .hl-100-hero-block1-1 {width: 50%; display: inline-block; font-size: 0px; padding-right: 10px;} .hl-100-hero-block1-2 {width: 50%; display: inline-block; font-size: 0px; padding-left: 10px;} .hl-100-hero-block2 {display: flex;} .hl-100-hero-block2__content {align-self: center; margin-left: 10%; margin-top: 20px; margin-right: 50px; max-width: 450px;} .hl-100-hero-block2 > div > p {margin-top: 15px;} @media only screen and (max-width: 1100px) { .hl-100-hero-block2__content {margin-bottom: 5%;} } @media only screen and (max-width: 978px) { #hl-100-hero-frame {flex-direction: column;} .hl-100-hero-block1 {width: 100%; padding: 0px;} .hl-100-hero-block1-1 {padding-right: 10px;} .hl-100-hero-block1-2 {padding-left: 10px;} .hl-100-hero-block2 {width: 100%:} .hl-100-hero-block2__content {max-width: none; text-align: center; margin: 40px 5% 75px 5%;} .hl-100-hero-block2__content div.hl-highlight-title-frame {display: inline-block; padding: 0 18px;} .hl-100-hero-block2__content p {margin-top: 20px;} #hl-100-hero-frame > div.hl-100-hero-block2 > div > div:nth-child(1) {margin-left: 0px;} } @media only screen and (max-width: 600px) { .hl-100-hero-block1 {padding: 0px;} .hl-100-hero-block1-1 {padding-right: 5px;} .hl-100-hero-block1-2 {padding-left: 5px;} .hl-100-hero-block2__content {margin-top: 25px;} .hl-100-hero-block2__content > div {display: block !important; margin: 0px;} } /* ======================================== */ /* @100 - HOME - Introduction /* ======================================== */ #hl-100-intro * {} #hl-100-intro-frame {margin: 125px auto; padding: 0 10%; text-align: center;} #hl-100-intro-frame h1 {margin: 0 auto; } #hl-100-intro-frame h6 {padding-top: 20px; padding-bottom: 15px; max-width: 750px; margin: 0 auto;} #hl-100-intro-frame div button {margin: 0 auto;} #hl-100-intro-frame div a {padding: 0 !important;} @media only screen and (max-width: 600px) { #hl-100-intro-frame {padding: 0 7.5%;} } /* ======================================== */ /* @100 - HOME - Sniffing Set Promo /* ======================================== */ #hl-100-sniffpromo {background-color: #F8F8F8; margin: 0 0 100px 0; padding: 0px;} #hl-block-sniffpromo {padding: 75px 5% 75px 5%; text-align: center;} #hl-block-sniffpromo .hl-block-sniffpromo-1 {max-width: 700px; margin: 0 auto;} #hl-block-sniffpromo > div.hl-block-sniffpromo-1 > center > h2 {padding-top: 40px;} #hl-block-sniffpromo > div.hl-block-sniffpromo-1 > center > h6 {padding-top: 20px; padding-bottom: 25px;} /* ======================================== */ /* @100 - HOME - Images /* ======================================== */ #hl-100-images * {} .hl-5050 {display: flex; justify-content: center;} .hl-5050-1 {width: 50%; font-size: 0; padding: 50px 10px 50px 20px;} .hl-5050-2 {width: 50%; font-size: 0; padding: 50px 20px 50px 10px;} @media only screen and (max-width: 978px) { .hl-5050 {flex-direction: column;} .hl-5050-1, .hl-5050-2 {width: 100%; padding: 20px 20px 0 20px;} } /* ======================================== */ /* @100 - HOME - Content /* ======================================== */ #hl-100-content * {} #hl-100-content {margin: 100px 5%;} #hl-100-content-frame {width: 100%; margin: 0 auto; max-width: 700px; text-align: center;} #hl-100-content-frame h6 {padding-top: 20px; padding-bottom: 30px;} @media only screen and (max-width: 600px) { #hl-100-content div {padding: 0 20px;} } /* ======================================== */ /* @100 - HOME - Values /* ======================================== */ #hl-100-values * {} #hl-100-values {margin: 100px 5%;} #hl-100-values-frame {width: 100%; margin: 0 auto; max-width: 700px; text-align: center;} .hl-100-content-values * {;} .hl-100-content-values {max-width: 700px; display: flex; align-items: stretch; justify-content: space-around; flex-wrap: wrap; margin: 50px auto 0px auto; padding: 0;} .hl-100-content-values > * {margin-bottom: 50px;} .hl-100-content-values-unit {display: inline-block; height: auto; flex-basis: 24%;} .hl-100-content-values-unit-box {width: 75px; height: 75px; padding: 15px; margin: 0 auto;} .hl-100-content-values-unit-box img {max-width: 45px; height: 45px; font-size: 0px; margin: 0; padding: 0;} .hl-100-content-values-unit p {margin-top: 10px; text-align: center;} @media only screen and (max-width: 978px) { } @media only screen and (max-width: 600px) { .hl-100-content-values {justify-content: space-between;} .hl-100-content-values-unit {flex-basis: 45%;} .hl-100-content-values-unit-box {} } /* ========================================================================================== */ /* ========================================================================================== */ /* @101-SCENTS */ /* ======================================== */ /* @SCENTS-101-Header */ /* ======================================== */ #hl-101-s2 #hl-block-header {padding: 75px 5% 25px 5%; text-align: center;} #hl-101-s2 #hl-block-header h1 {padding-bottom: 20px;} #hl-101-s2 #hl-block-header h6 {max-width: 750px; margin: 0 auto; padding-bottom: 30px;} #hl-101-s2 #hl-block-header > h1 > br {display: none;} #hl-101-s2 #hl-block-header > h1 > span {display: inline;} @media only screen and (max-width: 978px) { #hl-101-s2 #hl-block-header > h1 > br {display: block;} #hl-101-s2 #hl-block-header > h1 > span {display: none;} } @media only screen and (max-width: 600px) { #hl-101-s2 #hl-block-header {padding: 75px 7.5% 25px 7.5%;} /* #hl-101-s2 #hl-block-header h1, #hl-101-s2 #hl-block-header h6 {text-align: left;} */ } /* ======================================== @101 - Scents - Ring Cards ======================================== */ #hl-scents-ring {padding: 0 5% 75px 5%;} #hl-collection-ring {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; margin-top: 50px;} #hl-collection-ring > * {margin-bottom: 50px;} #hl-collection-ring-card {flex-basis: 30%; margin-bottom: 70px;} #hl-collection-ring-card-inner {max-width: 250px; background-color: #f4f4f4; margin: 0 auto; height: 100%;} .hl-collection-ring-card-inner-title {background-color: white; margin: -1px; border: 1px solid white;} /* Hides the top border */ .hl-collection-ring-card-inner-image {font-size: 0;} .hl-collection-ring-card-inner-copy {padding: 30px 20px; text-align: center;} @media only screen and (max-width: 600px) { #hl-collection-ring-card {flex-basis: 47.5%; margin-bottom: 40px;} } /* Ring cards image swap */ .hl-custom-reveal .hl-custom-hidden {display: block !important; visibility: visible !important;} .product:hover .reveal img { opacity: 1; } .hl-custom-reveal { position: relative; } .hl-custom-reveal .hl-custom-hidden {position: absolute; z-index: -1; top: 0; width: 100%; height: auto; opacity: 0; -webkit-transition: opacity 0.3s ease-in-out; -moz-transition: opacity 0.3s ease-in-out; -o-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out;} .hl-custom-reveal:hover .hl-custom-hidden {z-index: 100; opacity: 1;} .hl-custom-reveal .caption {position: absolute; top: 0; display: table; width: 100%; height: 100%; background-color: white; /* fallback for IE8 */ background-color: rgba(255, 255, 255, 0.7); font: 13px/1.6 sans-serif; text-transform: uppercase; color: #333; letter-spacing: 1px; text-align: center; text-rendering: optimizeLegibility;} .hl-custom-reveal .hl-custom-hidden .caption .centered {display: table-cell; vertical-align: middle;} /* ========================================================================================== */ /* ========================================================================================== */ /* @102-PRODUCTS */ #hl-block-header-frame {padding: 100px 5%;} /* ======================================== */ /* @PRODUCT-102-S3 (Buy Section) */ /* ======================================== */ #hl-102-s3 {border-bottom: 1px solid #e2e2e2; padding: 50px 0 75px 0;} #hl-102-s3-frame {display: flex; justify-content: center;} .hl-102-s3-block1 {width: 44%; font-size: 0px; padding: 0px 0px 0px 5%;} .hl-102-s3-block2 {width: 56%; padding: 0px 5%;} .hl-102-s3-block2 h5 {margin-top: 10px;} .hl-102-s3-block2 p {margin-top: 10px;} .hl-102-s3-block2 h6 {margin-top: 70px;} .hl-102-clean-frame {display: flex; align-items: stretch; justify-content: space-between; margin-top: 40px; margin-right: 5%; padding: 15px 20px; background-color: #F8F8F8; border: 0.5px solid #e2e2e2;} .hl-102-clean-frame-icon {min-width: 50px; margin-right: 20px; height: auto; font-size: 0;} .hl-102-clean-frame-copy {width: 85%; margin: 0; padding: 0;} .hl-102-s3-block2__picksize {display: flex; margin-top: 10px; align-items: stretch;} // .hl-outer-block-1, .hl-outer-block-2 {width: 50%; max-width: 275px;} .hl-outer-block-label {font-size: 0.95rem; color: #888888; margin-bottom: 5px;} #box1 > div.hl-102-s3-block2__picksize__box1-1 > h6, #box2 > div.hl-102-s3-block2__picksize__box1-1 > h6 {margin-top: 0;} .hl-102-s3-block2__picksize__box1 {width: 100%; max-width: 275px; padding: 5%; margin-top: 5px; border: 1px solid black; display: flex; justify-content: space-between; align-items: center; } .hl-102-s3-block2__picksize__box2 {width: 100%; max-width: 275px; padding: 5%; margin-top: 5px; border: 1px solid black; display: flex; justify-content: space-between; align-items: center; margin-left: -1px;} // .hl-picksize-active {outline: 1px solid black; outline-offset: -2px;} // .hl-picksize-inactive {filter: opacity(20%) grayscale(100%)} // .hl-picksize-inactive:hover {filter: none; cursor:pointer;} .hl-102-s3-block2__picksize__box2:hover {filter: none;cursor:pointer;} .hl-102-s3-block2__picksize__box2:active {border-left: 1px solid black; outline: 1px solid black; outline-offset: -2px;} .hl-102-s3-block2__picksize__box1-1 > small, {color: #888888;} .hl-102-s3-block2__picksize__box1-1 > span > dl > div.price__regular > dd > span {font-weight: 400 !important;} .hl-102-s3-block2__picksize__box1-1--price {display: block; margin-top: 20px; font-weight: 400 !important; } .hl-102-s3-block2__picksize__box1-2 > img {max-height: 70px; width: auto;} .hl-102-s3-block2__picksize__box1-2-ring {margin: 0 20px;} .hl-102-s3-block2__buy {margin-top: 20px} .hl-102-s3-block2__buy form input {display: inline-block !important;} .hl-102-s3-block2__buy form button {display: inline-block !important;} .hl-102-s3-block2__buy form input:second-child {margin-right: 20px !important; } @media only screen and (max-width: 999px) { #hl-102-s3 {padding-top: 0;} #hl-102-s3-frame {flex-direction: column; align-items: center;} .hl-102-s3-block1, .hl-102-s3-block2 {width: 100%;} .hl-102-s3-block1 {padding: 5% 5% 0 5%;} .hl-102-s3-block2 {margin-top: 70px; text-align: left;} // .hl-outer-block-1, .hl-outer-block-2 {text-align: left;} .hl-102-s3-block2__picksize {justify-content: center} /* .hl-102-s3-block2__buy form input#quantity {display: none !important;} */ .hl-102-s3-block2__buy form {text-align: center; } .hl-102-s3-block2__buy form {margin: 50px 0;} } @media only screen and (max-width: 749px) { .price {font-size: 1em !important;} .hl-102-clean-frame {margin-right: 0;} } @media only screen and (max-width: 600px) { // .hl-outer-block-1,.hl-outer-block-2 {width: 100%; max-width: none;} /* #hl-102-s3-frame > div.hl-102-s3-block2 > div.hl-highlight-title-frame {margin-left: 0px;} */ .hl-outer-block-2 {margin-top: 25px;} .hl-102-s3-block2__picksize {flex-direction: column; align-items: center;} .hl-102-s3-block2__picksize__box1, .hl-102-s3-block2__picksize__box2 {width: 100%; margin: 0; max-width: none;} .hl-102-s3-block2__picksize__box2 {border-left: 1px solid black;} } .hl-102-buy-addtocart-qty {display: none;} @media only screen and (max-width: 600px) { .hl-102-buy-addtocart-qty {font: size: 18px; margin-right: 20px; display: inline-block;} .hl-102-s3-block2__buy input.hl-assets-qty-form {margin-right: 0;} } /* ======================================== @102 - Product - Support ======================================== */ .hl-102-support-frame {border-bottom: 1px solid #e2e2e2; padding: 40px 5%;} .hl-102-support-block1 {display: flex; justify-content: center; align-items: center;} .hl-102-support-block1__icon {display: inline-block; flex-basis: auto;} .hl-102-support-block1__icon img {max-height: 35px;} .hl-102-support-frame > div > div:nth-child(2) {margin: 0 15%;} @media only screen and (max-width: 600px) { .hl-102-support-frame> div > div:nth-child(2) {margin: 0px !important;} .hl-102-support-block1 {justify-content: space-between;} } /* ======================================== */ /* @PRODUCT-102-S5 (Fast Facts Section) */ /* ======================================== */ #hl-102-s5-frame {border-bottom: 1px solid #e2e2e2; padding: 75px 10% 50px 10%; max-width: 1500px; margin: 0 auto;} .hl-102-s5-block2-1 {display: flex; justify-content: space-between; align-items: stretch; margin-top: 50px; align-items: stretch; flex-wrap: wrap;} div.hl-102-s5-block2-1 > * {margin-bottom: 50px;} .hl-102-s5-block2-1-container {flex-basis: 30%;} .hl-102-s5-block2-1__fastfact {display: flex; flex-direction: column; justify-content: flex-start; align-items: center; background-color: #f8f8f8; max-width: 275px; border: 1px solid #e2e2e2; text-align: center; margin: 0 auto; padding: 50px 20px; height: 100%;} .hl-102-s5-block2-1__fastfact img {height: 65px; width: auto;} .hl-102-s5-block2-1__fastfact h5 {margin-top: 15px; font-family: 'BrandonTextMedium' !important;} .hl-102-s5-block2-1__fastfact p {margin-top: 25px;} @media only screen and (max-width: 978px) { div.hl-102-s5-block1 > div.hl-highlight-title-frame {margin-left: 0px;} .hl-102-s5-block2-1 {padding: 0 0%;} } @media only screen and (max-width: 600px) { #hl-102-s5-frame {padding: 75px 5% 75px 5%;} .hl-102-s5-block2-1__fastfact > * {margin: 0 10px;} .hl-102-s5-block2-1__fastfact img {flex-basis: 30%; height: 60px; width: auto;} .hl-102-s5-block2-1__fastfact div {flex-basis: 70%;} .hl-102-s5-block2-1__fastfact h5 {margin-top: 0; text-align: left;} .hl-102-s5-block2-1__fastfact p {margin-top: 10px; text-align: left;} .hl-102-s5-block2-1__fastfact {flex-basis: 45%; max-width: none; justify-content: center; flex-direction: row; padding: 20px 10px;} .hl-102-s5-block2-1-container {flex-basis: 100%;} div.hl-102-s5-block2-1 > * {margin-bottom: 25px;} } /* ======================================== */ /* @PRODUCT-102-S6 (Ingredients Section) */ /* ======================================== */ #hl-102-s6-frame {border-bottom: 1px solid #e2e2e2; padding: 75px 10%; max-width: 1500px; margin: 0 auto;} .hl-102-s6-block2 h5 {margin-top: 40px;} .hl-102-s6-block2-1 {display: flex; justify-content: space-between; margin-top: 30px; align-items: stretch; flex-wrap: wrap;} div.hl-102-s6-block2-1 > * {margin-bottom: 50px;} .hl-block-ingredient {display: flex; flex-direction: column; justify-content: stretch; align-items: center; flex-basis: 20%; margin 0 auto; text-align: center; padding: 0;} .hl-block-ingredient div {max-width: 250px; margin: 0 auto;} .hl-block-ingredient div img {margin-bottom: 10px;} .hl-block-minor-ingredient {border: 1px solid #c2c2c2; display: inline-block; padding: 3px 15px; margin: 0 5px 15px 5px; border-radius: 3px; font-family: 'BrandonTextRegular';} .hl-block-minor-1 {display: flex; flex-wrap: wrap; justify-content: space-between; margin-right: -5%;} .hl-block-minor-ingredient-1 {display: inline-block; max-width: 90px; margin: 0 5% 35px 0px; text-align: center; align-content: stretch;} .hl-block-minor-ingredient-1 img {width: 90px; height: auto;} .hl-block-minor-ingredient-1-blank {display: inline-block; width: 90px; height: 1px; background-color: white; margin: 0 5% 0px 0px; text-align: center; align-content: stretch;} .hl-block-ingredient h6 {margin-top: 5px;} .hl-102-s6-block3 h5 {margin-bottom: 30px;} .hl-102-s6-block4 {margin-top: 30px;} @media only screen and (max-width: 978px) { .hl-block-ingredient {flex-basis: 45%;} .hl-102-s6-block1 {text-align: center;} div.hl-102-s6-block1 > div.hl-highlight-title-frame {margin-left: 0px;} } @media only screen and (max-width: 600px) { #hl-102-s6-frame {padding: 75px 5%;} } /* ========================================================================================== */ /* @103 - SNIFFING SET */ /* ======================================== @103 - Sniffing Set - Buy ======================================== */ #hl-103-buy {border-bottom: 1px solid #e2e2e2; padding: 50px 0 75px 0;} #hl-103-buy-frame {display: flex; justify-content: center;} .hl-103-buy-block1 {width: 44%; font-size: 0; padding: 0px 0px 0px 5%;} .hl-103-buy-block2 {width: 56%; padding: 0px 5%;} .hl-103-buy-block2 p {margin: 10px 0 20px 0;} @media only screen and (max-width: 999px) { #hl-103-buy {padding-top: 0;} #hl-103-buy-frame {flex-direction: column; align-items: center;} .hl-103-buy-block1 {width: 100%; padding: 5% 5% 0 5%;} .hl-103-buy-block2 {width: 100%; margin-top: 70px; text-align: left;} } #hl-103-buy-contents {} .hl-103-buy-contents-frame {display: inline-block; max-width: 650px; padding: 15px 20px; background-color: #F8F8F8; border: 0.5px solid #e2e2e2; margin-bottom: 70px;} .hl-103-buy-contents-frame h6 {margin-bottom: 10px;} .hl-103-buy-contents-frame-contents {display: flex; flex-direction: row; justify-content: flex-end; align-items: center; margin-left: 20px;} .hl-103-buy-contents-frame-contents-img {font-size: 0px; width: 30%; margin-right: 10%;} .hl-103-buy-contents-frame-contents-img img {height: 120px; width: auto; font-size: 0;} .hl-103-buy-contents-frame-contents-items {display: flex; flex-wrap: wrap;} .hl-103-buy-contents-frame-contents-items div {flex-basis: 45%; display: flex; align-items: center; margin: 5px 5% 5px 0;} .hl-103-buy-contents-frame-contents-items div div {display: inline-block; max-width: 20px; height: 20px; margin-right: 10px;} @media only screen and (max-width: 600px) { .hl-103-buy-contents-frame-contents {margin-left: 0;} .hl-103-buy-contents-frame-contents-img {display: none !important; margin: 0;} .hl-103-buy-contents-frame-contents-items {width: 100% !important;} } /* ======================================== @103 - Sniffing Set - Scents ======================================== */ #hl-103-scents-frame {border-bottom: 1px solid #e2e2e2; padding: 75px 10%;margin: 0 auto;} .hl-103-scents-contents {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; margin-top: 50px;} .hl-103-scents-contents > * {margin-bottom: 50px;} #hl-103-scents-card {flex-basis: 30%; margin-bottom: 70px;} .hl-103-scents-card-inner {max-width: 250px; background-color: white; border: 1px solid #B8B8B8; margin: 0 auto; height: 100%;} .hl-103-scents-card-inner-title {background-color: white; margin: -1px; border: 1px solid white;} /* Hides the top border */ .hl-103-scents-card-inner-image {border-top: 1px solid #B8B8B8; font-size: 0;} .hl-103-scents-card-inner-copy {padding: 30px 20px; text-align: center;} @media only screen and (max-width: 600px) { #hl-103-scents-frame {padding: 75px 5%;} #hl-103-scents-card {flex-basis: 47.5%; margin-bottom: 40px;} } /* ======================================== @103 - Sniffing Set - Fast Facts ======================================== */ #hl-103-facts-frame {border-bottom: 1px solid #e2e2e2; padding: 75px 10% 50px 10%; max-width: 1500px; margin: 0 auto;} .hl-103-facts-content {display: flex; justify-content: space-between; align-items: stretch; margin-top: 50px; align-items: stretch; flex-wrap: wrap;} .hl-103-facts-content > * {margin-bottom: 50px;} .hl-103-facts-content-card {flex-basis: 20%;} .hl-103-facts-content-card-fact {display: flex; flex-direction: column; justify-content: flex-start; align-items: center; background-color: #f8f8f8; max-width: 275px; border: 1px solid #e2e2e2; text-align: center; margin: 0 auto; padding: 50px 20px; height: 100%;} .hl-103-facts-content-card-fact img {height: 65px; width: auto;} .hl-103-facts-content-card-fact h5 {margin-top: 15px; font-family: 'BrandonTextMedium' !important;} .hl-103-facts-content-card-fact p {margin-top: 25px;} @media only screen and (max-width: 978px) { .hl-103-facts-content-card {flex-basis: 45%;} } @media only screen and (max-width: 600px) { #hl-103-facts-frame {padding: 75px 5% 75px 5%;} .hl-103-facts-content-card {flex-basis: 47.5%;} } /* ========================================================================================== */ /* @201 - ABOUT */ /* ========================================================================================== */ /* @202 - INGREDIENTS */ /* @202 - INGREDIENTS - S1B - DECLARATION*/ #hl-202-s1b {border-bottom: 1px solid #E2E2E2; padding: 150px 10%;} #hl-202-s1b div {max-width: 950px; margin: 0 auto;} #hl-202-s1b > div > div {display: flex; flex-wrap: wrap; padding-bottom: 30px;} #hl-202-s1b > div > div > div {flex-basis: 16%; text-align: left;} #hl-202-s1b div div div img {width: 75px; height: 75px; margin: 0 15px;} #hl-202-s1b div div div img:first-child {margin-left: 0px;} #hl-202-s1b div div div img:last-child {margin-right: 0px;} #hl-202-s1b div h2 {padding-bottom: 20px; text-align: center;} @media only screen and (max-width: 978px) { #hl-202-s1b {padding: 150px 5%;} #hl-202-s1b div > div > div {flex-basis: 33.3%; justify-content: space-between; text-align: center;} #hl-202-s1b div div div img {margin-bottom: 0;} #hl-202-s1b div div div:first-child {margin-bottom: 30px;} } @media only screen and (max-width: 600px) { #hl-202-s1b {padding: 150px 7.5%;} #hl-202-s1b div h2 {text-align: left;} } #hl-202-S4, #hl-202-S5 {border-bottom: 1px solid #e2e2e2; padding: 75px 10%; max-width: 1500px; margin: 0 auto;} .hl-element-card-icon img {height: 65px; width: auto;} /* ========================================================================================== */ /* @203 - HELP + FAQ */ /* ========================================================================================== */ #hl-203-s2 #hl-block-header {padding: 75px 5% 75px 5%; text-align: center;} #hl-203-s2 #hl-block-header h1 {margin-bottom: 20px;} #hl-203-narrow-frame {padding: 75px 15% 75px 15%; border-bottom: 1px solid #e2e2e2;} .hl-faq-frame {margin-bottom: 0px;} // .hl-203-faq-block {display: flex; justify-content: space-between; margin-bottom: 30px;} .hl-203-faq-chevron {padding: 10px 30px 10px 50px; font-size: 1.5rem; } .hl-203-FAQ-question {margin-bottom: 35px;} .hl-203-FAQ-question-question {margin: 0px; font-size: 1.2rem;} .hl-203-FAQ-question-answer {margin: 0px; margin-top: 5px;} .accordion-list__item + .accordion-list__item {border-top: none !important;} div.accordion-item__inner > div:last-child {margin-bottom: 50px;} @media only screen and (max-width: 978px) { #hl-203-narrow-frame {padding: 75px 5% 75px 5%; min-width: none;} } /* ======================================== */ /* @HELP - Support desk */ /* ======================================== */ .hl-203-support {display: flex; justify-content: space-around; align-items: center;} .hl-203-support-icon {display: inline-block; flex-basis: auto;} .hl-203-support-icon img {max-width: 50px;} /* ========================================================================================== */ /* @POLICY DOCUMENTS */ /* ========================================================================================== */ div.shopify-policy__title > h1 {margin: 75px 0 20px 0;} div.shopify-policy__body > h4 {font-family: 'BrandonTextMedium' !important; padding-top: 20px; margin-bottom: 10px;} /* ========================================================================================== */ /* @ACCOUNT DOCUMENTS */ /* ========================================================================================== */ /* ======================================== */ /* @Login */ /* ======================================== */ #customer_login > center {margin-top: 50px; margin-bottom: 30px;} #CustomerLoginForm {margin: 0 auto; padding: 0 10%; max-width: 500px;} #customer_login > div > input {text-transform: none !important;} input.hl-assets-button-black-login {margin-top: 25px !important; margin-bottom: 20px !important; display: block !important; width: 100%; max-width: 250px; color: white; font-size: 17.5px; font-family: brandontextmedium !important; margin: 0px; background-color: #000000 !important; border: 1px solid #000000; padding: 12px 15px; border-radius: 5px !important; -webkit-appearance: none; -moz-appearance: none; appearance: none;} #customer_register_link {color: #35A217;} #customer_register_link:hover {color: #c2c2c2;} /* ======================================== */ /* @Create account */ /* ======================================== */ #create_customer > center {margin-top: 50px; margin-bottom: 30px;} #create_customer {margin: 0 auto; padding: 0 10%; max-width: 500px;} /* ======================================== */ /* @Recover password */ /* ======================================== */ #RecoverPasswordForm > div.text-center > center {margin-top: 50px; margin-bottom: 30px;} #RecoverPasswordForm {margin: 0 auto; padding: 0 10%; max-width: 500px;} /* ======================================== */ /* @Recover password -- Robot */ /* ======================================== */ #MainContent > div.shopify-challenge__container > p {margin-top: 50px;} #MainContent > div > form > input.shopify-challenge__button.btn {font-weight: 400; text-transform: none !important; margin-top: 25px !important; margin-bottom: 20px !important; display: block !important; width: 100%; max-width: 250px; color: white; font-size: 17.5px; font-family: brandontextmedium !important; background-color: #000000 !important; border: 1px solid #000000; padding: 12px 15px; border-radius: 5px; -webkit-appearance: none; -moz-appearance: none; appearance: none;} #ResetSuccess {margin: 20px auto; max-width: 360px;} /* ======================================== */ /* @New password */ /* ======================================== */ #hl-reset-password-form > div > div > div > div > form > center {margin-top: 50px; margin-bottom: 30px;} #hl-reset-password-form > div > div > div {margin: 0 auto; padding: 0 10%; max-width: 500px;} #hl-reset-password-form > div > div > div > div > form > center > p {margin-top: 10px;} /* ======================================== */ /* @Account Form */ /* ======================================== */ #hl-account-form {width: 80%; margin: 50px auto;} #customer_logout_link {color: #35A217;} #hl-account-form > div.grid > div:nth-child(2) > p:nth-child(3) > a {text-transform: none; border-radius: 3px; font-weight: 400; font-family: 'BrandonTextMedium'; letter-spacing: 0;} #hl-account-form > div:nth-child(2) > div:nth-child(1) > table > tbody > tr > td > a {border: 2px solid #35a217; white-space: nowrap;} @media only screen and (max-width: 750px) { #hl-account-form > div:nth-child(2) > div:nth-child(1) > table > tbody > tr {border-bottom: 5px solid #c2c2c2; margin-bottom: 20px;} #hl-account-form > div:nth-child(2) > div:nth-child(1) > table > tbody > tr > td {font-size: 1.05rem !important; padding: 8px 0px; border-bottom: 1px solid #F2f2f2;} #hl-account-form > div:nth-child(2) > div:nth-child(1) > table > tbody > tr > td::before {font-size: 1.05rem;} #hl-account-form > div:nth-child(2) > div:nth-child(1) > table > tbody > tr > td:last-child {padding-bottom: 25px;} #hl-account-form > div:nth-child(2) > div:nth-child(1) {text-align: center;} #hl-account-form > div:nth-child(2) > div:nth-child(2) > div {text-align: center;} } /* ======================================== */ /* @Order Post */ /* ======================================== */ #hl-order-post {width: 80%; margin: 50px auto;} #hl-order-post > div.grid > div:nth-child(2) > p:nth-child(3), #hl-order-post > div.grid > div:nth-child(2) > p:nth-child(6) {margin-top: 10px !important;} #hl-order-shipping-info {margin-left: 10%; display: inline-block;} @media only screen and (max-width: 750px) { #hl-order-post > div:nth-child(2) > div:nth-child(1) > div > h2 {text-align: center;} #hl-order-post > div:nth-child(2) > div:nth-child(1) > p {text-align: center;} #hl-order-details > tbody > tr > td::before {font-size: 1.05rem;} #hl-order-details > tbody > tr > td {font-size: 1.05rem !important; padding: 8px 0px; border-bottom: 1px solid #F2f2f2;} #hl-order-details > tfoot > * > td {font-size: 1.05rem !important; padding: 8px 0px; border-bottom: 1px solid #F2f2f2;} #hl-order-details > tfoot > * > td::before {font-size: 1.05rem;} #hl-order-shipping-info {margin-left: 0; margin-top: 50px; display: block;} } /* ======================================== */ /* @New address */ /* ======================================== */ #hl-new-addy-form {width: 80%; margin: 50px auto;} #hl-edit-address {margin: 0 auto; padding: 0 10%;} #hl-add-address {margin: 0 auto; padding: 0 10%;} /* #hl-add-address-block > div.address {border: 1px solid #c2c2c2; width: 60%; margin: 0px auto; padding: 20px 0; max-width: 375px} */ /* ======================================== */ /* @Shopping Bag */ /* ======================================== */ #shopify-section-cart-template {padding: 75px 10%; min-width: 370px;} #shopify-section-cart-template > div > form > table > tbody > * > td.cart__meta.small--text-left > p > a {text-transform: none; font-weight: 300; border: none; padding: 8px 0; color: blue;} #shopify-section-cart-template > div > form > table > tbody > tr > td > div > button {text-transform: none; font-weight: 300; border: none; padding: 8px 0; color: blue;} #shopify-section-cart-template > div > form > table > tbody {vertical-align: top; padding-top: 15px;} #hl-cart-items > td > div > a {text-transform: none; font-weight: 300; border: none; padding: 8px 0; color: blue;} #hl-cart-items > td > div > div > input.cart__qty-input {width: 45px; height: 35px; border: 1px solid #c2c2c2;} #hl-cart-items > td > div > button {padding: 6px 15px !important; font-size: 0.95rem; max-height: 45px; border-radius: 5px; border: 1px solid #c2c2c2 !important; background-color: white; color: black !important;} #hl-cart-items > td > div > button:hover {background-color: #f5f5f5;} /* ======================================== */ /* @Checkout */ /* ======================================== */ /* ========================================================================================== */ /* ========================================================================================== */ /* LANDING PAGE */ /* ========================================================================================== */ /* ========================================================================================== */ .hl-land-boxes-flex {max-width: 510px; display: flex; justify-content: center; flex-wrap: wrap;} .hl-land-boxes-frame {min-width: 26%;} .hl-land-boxes-frame-box {cursor:grab; width: 110px; height: 110px; margin: 0 10px 20px 10px; display: flex; justify-content: center; align-items: center;} .hl-land-boxes-frame-box > div {margin: 0 10px;} .hl-land-content {margin: 10px 20px 20px 20px;} .hl-land-reveal .hl-land-hidden {display: block !important; visibility: visible !important;} .product:hover .reveal img { opacity: 1; } .hl-land-reveal { position: relative; } .hl-land-reveal .hl-land-hidden {width: 100%; height: auto; opacity: .0; animation: heliofadeIn ease 10s; -webkit-transition: opacity 0.2s ease-in-out; -moz-transition: opacity 0.2s ease-in-out; -o-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out;} .hl-land-reveal:hover .hl-land-hidden {z-index: 100; opacity: 1;} .hl-land-reveal .caption {position: absolute; top: 0; display: table; width: 100%; height: 100%; background-color: white; /* fallback for IE8 */ background-color: rgba(255, 255, 255, 0.7); font: 13px/1.6 sans-serif; text-transform: uppercase; color: #333; letter-spacing: 1px; text-align: center; text-rendering: optimizeLegibility;} .hl-land-reveal .hl-land-hidden .caption .centered {display: table-cell; vertical-align: middle;} */ */ .hl-land-footer {font-size: .8rem !important; color: #555 !important;} .hl-land-subscribe-block {margin: 0 auto;} @keyframes heliofadeIn { 0% {opacity:0;} 100% {opacity:1;} } @media only screen and (max-width: 600px) { .hl-land-boxes-frame-box {width: 100px; height: 100px; margin: 0 10px 20px 10px;} .hl-land-subscribe-block {width: 100%;} } /* ========================================================================================== */ /* ========================================================================================== */ /* SPLASH PAGE */ /* ========================================================================================== */ /* ========================================================================================== */ #hl-splash-logo {width: 100%; padding: 25px; position: fixed; background-color: white; z-index: 9999999999;} #hl-splash-head {text-align: left; margin: 75px 5% 0px 5%; max-width: 900px;} #hl-splash-head h1, #hl-splash-head h2 {margin-bottom: 30px;} #hl-splash-head h3 {line-height: 1.75 !important;} #hl-splash-news {margin: 10px 5% 0px 5%; max-width: 100%; } #hl-splash-details {margin: 70px 5% 0px 5%; max-width: 75%; text-align: left;} #hl-splash-grid {width: 100%; display: flex; flex-wrap: wrap; padding: 0 5px; margin-top: 75px;} #hl-splash-grid div {flex-basis: 16.667%; padding: 5px;} #hl-splash-grid div img {display: block;} div.klaviyo-form-VxxCr7 {} div.klaviyo-form-VxxCr7 > * {font-family: 'brandontextmedium';} div.klaviyo-form-VxxCr7 button {border-radius: 0 2px 2px 0 !important; height: 50px; padding: 0 35px !important; margin-bottom: 10px; border: 1px solid black;} div.klaviyo-form-VxxCr7 input {border-radius: 2px 0 0 2px !important;} div.klaviyo-form-VxxCr7 label {margin-left: 20px;} div.klaviyo-form-VxxCr7 label div {margin-left: 15px;} .hl-land-subscribe-block {width: 100%; max-width: 450px; text-align: left;} #hl-100-hero-frame {display: flex; flex-direction: row;} .hl-splash-hero-block1 {width: 100%; background: white; display: flex; padding: 0 10px; font-size: 0px;} .hl-splash-hero-block1-1 {width: 50%; display: inline-block; font-size: 0px; padding-right: 5px;} .hl-splash-hero-block1-2 {width: 50%; display: inline-block; font-size: 0px; padding-left: 5px;} @media only screen and (max-width: 978px) { #hl-splash-head {text-align: left; max-width: 87%;} #hl-splash-grid div {flex-basis: 33.3%;} div.klaviyo-form-VxxCr7 {margin-left: -7px;} div.klaviyo-form-VxxCr7 button {padding: 0 10px !important;} .hl-land-subscribe-block {width: 100%;} } @media only screen and (max-width: 600px) { #hl-splash-hero-frame {flex-direction: column;} .hl-splash-hero-block1 {width: 100%; height: 100%; border-bottom: 1px solid #e2e2e2; padding: 0px;} .hl-splash-hero-block1-1 {padding: 0px 10px; width: 100%;} .hl-splash-hero-block1-2 {display: none;} #hl-splash-grid {padding: 0 5%;} #hl-splash-grid div {flex-basis: 50%; border: 3px solid white; padding: 0px;} } /* ========================================================================================== */ /* ========================================================================================== */ /* LANDING PAGE */ /* ========================================================================================== */ /* ========================================================================================== */ #hl-landing1-logo {width: 100%; padding: 25px; position: fixed; background-color: white; z-index: 9999999999;} #hl-landing1-head {text-align: left; margin: 75px 5% 0px 5%; max-width: 900px;} #hl-landing1-head h1, #hl-landing1-head h2 {margin-bottom: 30px;} #hl-landing1-head h3 {line-height: 1.75 !important;} #hl-landing1-news {margin: 10px 5% 0px 5%; max-width: 100%; } #hl-landing1-details {margin: 70px 5% 0px 5%; max-width: 75%; text-align: left;} #hl-landing1-grid {width: 100%; display: flex; flex-wrap: wrap; padding: 0 5px; margin-top: 75px;} #hl-landing1-grid div {flex-basis: 16.667%; padding: 5px;} #hl-landing1-grid div img {display: block;} div.klaviyo-form-V7Ah8x {} div.klaviyo-form-V7Ah8x > * {font-family: 'brandontextmedium';} div.klaviyo-form-V7Ah8x button {border-radius: 0 2px 2px 0 !important; height: 50px; padding: 0 35px !important; margin-bottom: 10px; border: 1px solid black;} div.klaviyo-form-V7Ah8x input {border-radius: 2px 0 0 2px !important;} div.klaviyo-form-V7Ah8x label {margin-left: 20px;} div.klaviyo-form-V7Ah8x label div {margin-left: 15px;} .hl-landing1-subscribe-block {margin: 0; width: 100%; max-width: 450px; text-align: left;} #hl-100-hero-frame {display: flex; flex-direction: row;} .hl-landing1-hero-block1 {width: 100%; background: white; display: flex; padding: 0 20px; font-size: 0px;} .hl-landing1-hero-block1-1 {width: 50%; display: inline-block; font-size: 0px; padding-right: 10px;} .hl-landing1-hero-block1-2 {width: 50%; display: inline-block; font-size: 0px; padding-left: 10px;} @media only screen and (max-width: 978px) { #hl-landing1-head {text-align: left; max-width: 87%;} #hl-landing1-grid div {flex-basis: 33.3%;} div.klaviyo-form-V7Ah8x {margin-left: -7px;} div.klaviyo-form-V7Ah8x button {padding: 0 10px !important;} .hl-landing1-subscribe-block {width: 100%;} } @media only screen and (max-width: 600px) { #hl-landing1-hero-frame {flex-direction: column;} .hl-landing1-hero-block1 {width: 100%; height: 100%; border-bottom: 1px solid #e2e2e2; padding: 0px;} .hl-landing1-hero-block1-1 {padding: 0px 20px; width: 100%;} .hl-landing1-hero-block1-2 {display: none;} #hl-landing1-grid {padding: 0 5%;} #hl-landing1-grid div {flex-basis: 50%; border: 3px solid white; padding: 0px;} } /* #hl-site-nav-burger > div > div.btn_container {position: static !important;} */ .hl-102-s6-block4 {display: none !important;} /* .site-header__logo-image {max-width: none !important;} */