@import "css/style-variables"; @import "css/standard-definitions.scss"; @import "css/button-resets.scss"; @import "css/tabs.scss"; @import "css/typography.scss"; @import "css/Accordeon.scss"; @import "css/RotatorSlider.scss"; // @todo is this still in use tips to quit page @import "css/ProductFooter_.scss"; @import "css/colors.scss"; @import "css/ratio-wrapper.scss"; @import "css/grid.scss"; // @todo needs to go somewhere or fixed in the grinds.min. @media screen and (max-width: 60rem){ #shopify-section-header.shopify-section-header--fixed .site-header { height: 62px; } } .trst-class { color:#fff; } /* @author Till */ html { font-size: 16px; } .img-fluid { display: block; max-width: 100%; height: auto; } .max-width { max-width:1400px; } .max-width-body-copy { max-width:1024px; } .max-width-narrow { max-width:924px; } .max-width-extra-narrow { max-width:620px; } .max-width-280 { max-width:280px; width: 100%; } .max-width-400 { max-width:400px; width: 100%; } picture { display:block;vertical-align: top; } img { vertical-align: top; } .site--footer hr { margin: 25px 0; } .yotpo-label, .yotpo-logo-title { display:none; } .site-header nav#AccessibleNav .nav li { margin-right: 42px; } .mobile-nav-visible .mobile-nav-wrapper{ -ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0,0, 0); transform: translate3d(0, 0, 0); transition: all 0.45s cubic-bezier(0.29, 0.63, 0.44, 1); display: block !important; overflow: hidden; width: 100%; top: 46px; } .d-none { display: none; } .inline-menu ul{ list-style: none; } .inline-menu li{ display: inline-block; } .promoted-products-box { opacity:0; height:0; overflow:hidden; display:none; } /* for 9 Can Trio Top Seller Pack */ .product-id-1833016459335 .product--photo img { width: 100%; max-width: 460px; } /* .yotpo */ .review-stars .text-m, .review-stars .text-m:visited, .review-stars .text-m:hover{ color: #ffffff !important; text-shadow: 1px 1px 4px #797878; padding-left: 11px !important; letter-spacing: 1px; } .review-stars .text-m:hover{ text-decoration: underline; } .template-product .yotpo.testimonials { display:none; } .yotpo .yotpo-icon-left-arrow:before, .yotpo .yotpo-icon-right-arrow:before { bottom: auto !important; } .yotpo .yotpo-pager .yotpo-page-element.yotpo-icon-right-arrow , .yotpo .yotpo-pager .yotpo-page-element.yotpo-icon-left-arrow { height: 12px; } .is-preview-flex, .is-preview { display:none !important; } body.display-preview .is-preview { display:block !important; } body.display-preview .is-preview-flex { display:flex !important; } body.display-preview .hide-on-preview { display:none; } @media screen and (max-width: 500px){ /* klaviyo email signup footer and homepage */ .FormComponent__StyledFormComponentWrapper-e0xun6-0 { flex:none !important; } .eDtNtp.eDtNtp { display:block !important; } } .position-absolute { position:absolute; top:0; left:0; } .top-0 { top:0; } .left-0 { left:0; } .right-0 { right:0; } .bottom-0 { bottom:0; } .lineheight-14 { line-height:1.4; } .lineheight-1 { line-height:1; } .display-block { display:block; } .justify-content-center { justify-content:center; } .image-float { margin-top:5px; } .position-relative { position:relative; } .margin-0-auto { margin:0 auto; } .cursor-pointer { cursor:pointer; } body.in-modal { position: fixed; top: 0; left: 0; width: 100%; } a.no-underline, .no-underline a, .no-underline a:hover, .no-underline { text-decoration:none; } .text-underline { text-decoration:underline; text-underline-offset: 4px; } .sidebar-list { list-style: none; } .flexblocker, .flex-blocker { display: block; } .vertical-center, .flexbox-container { display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-align: center; -webkit-align-items: center; -webkit-box-align: center; align-items: center; } .text-italic { font-style:italic; } .text-uppercase { text-transform:uppercase; } .text-shadow-white { text-shadow: 1px 1px 2px #fff; } .float-left { float:left; } .float-right { float:right; } .ratio-wrapper { position: relative; width: 100%; overflow: hidden; } .ratio-wrapper.ratio-1-1, .ratio-wrapper.ratio-100 { padding-top: 100%; } .ratio-wrapper.ratio-16-9 { padding-top: 56.25%; } .ratio-wrapper.ratio-4-3 { padding-top: 75%; } .ratio-wrapper.ratio-3-2 { padding-top:66.66%; } .object-fit-cover { object-fit: cover; width: 100%; } .ratio-wrapper > div{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .circle-number { border: 3px solid #fff; border-radius: 50%; font-size: 25px; height: 40px; width: 40px; display: inline-block; text-align: center; line-height: 1.4; } .line-height-14 { line-height: 1.4; } .line-height-1 { line-height: 1; } .font-weight-400 { font-weight:400; } .font-weight-500 { font-weight:500; } .font-weight-700 { font-weight:700; } .font-weight-900 { font-weight:900; } .color-theme-light.color-white { color:#000; } .color-theme-light .collection--grid-item_caption-button { border: 1px solid #ccc; } .color-theme-light .collection--grid-item_caption-description { color:#000; } .color-theme-light .quickview-modal--close, .color-theme-light .quickview-modal--close:hover, .color-theme-light .product--info-title, .color-theme-light .prod-price, .color-theme-light .product--info-variants_title, .color-theme-light .product--info_description, .color-theme-light .product--info-variants_option-plan-input:checked+label, .color-theme-light .product--info-variants_option label, .color-theme-light .product .sub_frequency{ color:#000; } .color-theme-light .product .sub_frequency{ border-bottom: 2px solid #000; } .color-theme-light .product--info-variants_option label .outer-circle{ border: 1px solid hsla(0, 0%, 0%, 0.6); } .color-theme-light .product--info-variants_option-plan-input:checked+label .outer-circle { background-color: #fff; } .color-theme-light .grinds-tabs .tab-pane { background-color: #ececec; } .color-theme-light .grinds-tabs .nav-tabs > li > a:hover, .color-theme-light .grinds-tabs .nav-tabs > li.active > a, .color-theme-light .grinds-tabs .nav-tabs > li.active > a:hover, .color-theme-light .grinds-tabs .nav-tabs > li.active > a:focus, .color-theme-light .color-theme-light .grinds-tabs .tab-pane { background-color: #ececec; } .product-thumbs { display: flex; flex-wrap: wrap; max-width: 360px; margin: 0 auto; padding-bottom: 16px; justify-content: center; } .is-preview.product-thumbs { display: none; } .product-thumb { flex: 0 0 25%; max-width: 25%; position: relative; width: 100%; min-height: 1px; padding-right: 10px; padding-left: 10px; padding-bottom: 15px; cursor:pointer; } .product-thumb .product-thumb-inner { width: 100%; min-height: 80px; filter:grayscale(1); opacity: 0.8; } .product-thumb .product-thumb-inner.thumb-active { filter:none; opacity: 1; } .list-style-none { list-style: none; } .font-style-normal { font-style:normal; } .font-weight-400 { font-weight:400; } .collection--grid-item_image img { max-width: 260px; } .collection--grid-item_see-details a, .collection--grid-item_see-details a:visited { color:#fff; } .swag .collection--grid-item_see-details a, .swag .collection--grid-item_see-details a:visited { color:#000; } .hero-photo-wrap .hero-product-photo { max-width: 320px; margin-bottom: 15px; } .quickview-modal.remodal { width: 100%; } .SocialshareViewelement li { float: left; width: 24px; margin-right: 10px; } .SocialshareViewelement li svg { width: 100%; } .align-items-center { align-items:center; display:flex; } .justify-content-space-between { justify-content:space-between; } .flex-direction-column { flex-direction: column; } .new-arrival-badge, .general-badge, .temporarily-sold-out { border: 3px solid #c4052b; border-radius: 7px; padding: 6px; background: rgba(255, 255, 255, 0.8); text-transform: uppercase; text-align: center; font-weight: 700; transform: rotate(-13.2deg); margin-top: -70%; box-shadow: 1px 2px 4px #666; margin-left: 10%; } .temporarily-sold-out span { font-size: 135% } .all-new-top-4-flavors-badge { font-size: 76%; line-height: 1.4; margin-top: -75% } .customer-favorite-spearmint-badge { font-size: 77%; line-height: 1.1; margin-left: 45%; margin-top: -74%; } .customer-favorite-spearmint-badge span{ font-size: 80%; } .new-arrival-badge { line-height: 1; } .mustache-badge-handler > div { display:none; } .show-badge-preorderNow .badge-preorder-now, .show-badge-custFavSpearmint .customer-favorite-spearmint, .show-badge-newArrivals .new-arrival, .show-badge-allNewTop4Flavors .all-new-top-4-flavors { display:block; left: -13%; } .show-badge-preorderNow .badge-preorder-now { line-height:1; } #video-modal { position: fixed; top: 0; left: 0; z-index: 6000; background: rgba(0, 0, 0, 0.75); width: 100%; height: 100%; display: flex; align-items: center; } .Video_button, .VideoTeaser_button { width: 60px; margin: 0 auto; } #video-modal_inner { width: 70%; transition: opacity 2000ms; } .responsive-video { width:100%; } .modal-close { position: absolute; top: -36px; right: -20px; color: white; text-align: center; border-radius: 50%; font-weight: bold; font-size: 63px; } .row_col { display: flex; flex-wrap: wrap; margin-right: -$paddingGrid; margin-left: -$paddingGrid; } .z-index-4000{ z-index:4000 } .collection--grid-item_image-wrapper { width: 100%; } .collection--grid-item_image a { padding-bottom: 100%; width: 100%; display:block; } .collection--grid-item_image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; margin: 0 auto; max-width:100%; } .is-scheduled { display:none; } .schedule-flag { position: absolute; top: 0; right: 0; padding: 7px; background: pink; z-index: 50000; font-size: 11px; color:#000; } .show-on-scheduled-show-temporary { display:none; } .scheduled-show-temporary .show-on-scheduled-show-temporary { display:block; } .scheduled-show-temporary .hide-on-scheduled-show-temporary { display:none; } .color-theme-light .collection--grid-item_see-details a, .color-theme-light .collection--grid-item_see-details a:hover{ color:#000; } .dark-collection-item-titles .color-white{ color:#000; } .rounded-corners { border-radius: 0.6rem; } .margin-top-auto { margin-top:auto; } ///////////////////////////////////////////////////////// // slick modifications ///////////////////////////////////////////////////////// .slick-next, .slick-prev { display:none; z-index: 5000; width: 40px; height: 40px; } .slick-next:before, .slick-prev:before { border-radius: 50%; width: 40px; height: 40px; background: #000; display: flex; align-items: center; justify-content: center; color:#fff; border:1px solid rgba(255, 255, 255, 0.45); font-size: 24px; } .slick-next:before{ content:'>'; } .slick-prev:before{ content:'<'; } @media screen and (max-width: 767px) { .slick-next { right:8px; } .slick-prev { left:8px; } } ///////////////////////////////////////////////////////// // slick modification end .color-modification-show { display: none !important; } @import "css/responsive-min-width.scss"; @import "css/responsive.scss";