/*============================================================================ Shopify Ajax Cart Copyright 2014 Shopify Inc. Author Carson Shold @cshold Built with Sass - http://sass-lang.com/ Some things to know about this file: - This file uses the same grid as timber.scss.liquid. - If you want to use this separately, please include the following sections from timber.scss.liquid: * #Breakpoint and Grid Variables * #Grid Setup - You may need to massage the code so it doesn't reference any non-existent mixins. This file includes - Sass helpers - Colour variables to customize - Styles for cart drawer, modal, and the flipped add to cart button ==============================================================================*/ /*============================================================================ #Breakpoint and Grid Variables (from theme.scss.liquid) ==============================================================================*/ /*============================================================================ Ajaxify Colours Add your theme colors in here, or create new styles. - If creating new styles, you may have to restyle text, headers and links ==============================================================================*/ /*============================================================================ Sass Helpers ==============================================================================*/ /*============================================================================ General Styles ==============================================================================*/ @media screen and (max-width: 480px) { body.ajaxify-modal--visible { overflow: hidden; } } .ajaxifyCart-loader { display: none; opacity: 0; position: absolute; left: -24px; top: 50%; margin-top: -8px; padding: 0; width: 16px; height: 16px; -webkit-transition: opacity 0.1s; -moz-transition: opacity 0.1s; -ms-transition: opacity 0.1s; -o-transition: opacity 0.1s; transition: opacity 0.1s; background-repeat: no-repeat; background-image: url(data:image/gif;base64,R0lGODlhEAAQAPYAAP///8zMzPX19enp6d7e3tjY2NnZ2eHh4evr6/f39+zs7NPT09PT09XV1dbW1tjY2ODg4PDw8NHR0eLi4vr6+vr6+vLy8ufn59vb297e3vHx8fT09NfX19DQ0Ofn5+3t7d7e3uTk5Pj4+Obm5s7OzuDg4Orq6uDg4O/v79nZ2c3Nze7u7unp6dDQ0M3Nzfn5+fz8/OPj4+Xl5fz8/OXl5e3t7f39/f39/fHx8fPz8/z8/Pb29u7u7vv7+/X19fj4+Pf39/T09PLy8vHx8fj4+Pb29vv7+/b29uTk5O/v7+/v79ra2tzc3N3d3d/f39jY2NfX1/Ly8uPj49XV1fr6+tTU1Ofn593d3dTU1NHR0evr69vb28/Pz+bm5t/f39bW1vPz8/T09Pn5+fDw8OTk5Ojo6Ovr69zc3Ojo6Nra2tra2tLS0uzs7M/Pz87Ozu3t7czMzOrq6tPT08/Pz9fX1+Li4tXV1c3NzeLi4tLS0tzc3OHh4eXl5QAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAAHjYAAgoOEhYUbIykthoUIHCQqLoI2OjeFCgsdJSsvgjcwPTaDAgYSHoY2FBSWAAMLE4wAPT89ggQMEbEzQD+CBQ0UsQA7RYIGDhWxN0E+ggcPFrEUQjuCCAYXsT5DRIIJEBgfhjsrFkaDERkgJhswMwk4CDzdhBohJwcxNB4sPAmMIlCwkOGhRo5gwhIGAgAh+QQJCgAAACwAAAAAEAAQAAAHjIAAgoOEhYU7A1dYDFtdG4YAPBhVC1ktXCRfJoVKT1NIERRUSl4qXIRHBFCbhTKFCgYjkII3g0hLUbMAOjaCBEw9ukZGgidNxLMUFYIXTkGzOmLLAEkQCLNUQMEAPxdSGoYvAkS9gjkyNEkJOjovRWAb04NBJlYsWh9KQ2FUkFQ5SWqsEJIAhq6DAAIBACH5BAkKAAAALAAAAAAQABAAAAeJgACCg4SFhQkKE2kGXiwChgBDB0sGDw4NDGpshTheZ2hRFRVDUmsMCIMiZE48hmgtUBuCYxBmkAAQbV2CLBM+t0puaoIySDC3VC4tgh40M7eFNRdH0IRgZUO3NjqDFB9mv4U6Pc+DRzUfQVQ3NzAULxU2hUBDKENCQTtAL9yGRgkbcvggEq9atUAAIfkECQoAAAAsAAAAABAAEAAAB4+AAIKDhIWFPygeEE4hbEeGADkXBycZZ1tqTkqFQSNIbBtGPUJdD088g1QmMjiGZl9MO4I5ViiQAEgMA4JKLAm3EWtXgmxmOrcUElWCb2zHkFQdcoIWPGK3Sm1LgkcoPrdOKiOCRmA4IpBwDUGDL2A5IjCCN/QAcYUURQIJIlQ9MzZu6aAgRgwFGAFvKRwUCAAh+QQJCgAAACwAAAAAEAAQAAAHjIAAgoOEhYUUYW9lHiYRP4YACStxZRc0SBMyFoVEPAoWQDMzAgolEBqDRjg8O4ZKIBNAgkBjG5AAZVtsgj44VLdCanWCYUI3txUPS7xBx5AVDgazAjC3Q3ZeghUJv5B1cgOCNmI/1YUeWSkCgzNUFDODKydzCwqFNkYwOoIubnQIt244MzDC1q2DggIBACH5BAkKAAAALAAAAAAQABAAAAeJgACCg4SFhTBAOSgrEUEUhgBUQThjSh8IcQo+hRUbYEdUNjoiGlZWQYM2QD4vhkI0ZWKCPQmtkG9SEYJURDOQAD4HaLuyv0ZeB4IVj8ZNJ4IwRje/QkxkgjYz05BdamyDN9uFJg9OR4YEK1RUYzFTT0qGdnduXC1Zchg8kEEjaQsMzpTZ8avgoEAAIfkECQoAAAAsAAAAABAAEAAAB4iAAIKDhIWFNz0/Oz47IjCGADpURAkCQUI4USKFNhUvFTMANxU7KElAhDA9OoZHH0oVgjczrJBRZkGyNpCCRCw8vIUzHmXBhDM0HoIGLsCQAjEmgjIqXrxaBxGCGw5cF4Y8TnybglprLXhjFBUWVnpeOIUIT3lydg4PantDz2UZDwYOIEhgzFggACH5BAkKAAAALAAAAAAQABAAAAeLgACCg4SFhjc6RhUVRjaGgzYzRhRiREQ9hSaGOhRFOxSDQQ0uj1RBPjOCIypOjwAJFkSCSyQrrhRDOYILXFSuNkpjggwtvo86H7YAZ1korkRaEYJlC3WuESxBggJLWHGGFhcIxgBvUHQyUT1GQWwhFxuFKyBPakxNXgceYY9HCDEZTlxA8cOVwUGBAAA7AAAAAAAAAAAA); } .flip--is-loading .ajaxifyCart-loader { display: block; opacity: 1; } form[action="/cart/add"]:after, form[action^="/cart/add"]:after { content: ""; display: table; clear: both; } /*============================================================================ Ajaxify Cart - General ==============================================================================*/ .ajaxifyCart--content { position: relative; background-color: white; -webkit-perspective: 1000px; -moz-perspective: 1000px; -ms-perspective: 1000px; -o-perspective: 1000px; perspective: 1000px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: all 450ms cubic-bezier(0.57, 0.06, 0.05, 0.95); -moz-transition: all 450ms cubic-bezier(0.57, 0.06, 0.05, 0.95); -ms-transition: all 450ms cubic-bezier(0.57, 0.06, 0.05, 0.95); -o-transition: all 450ms cubic-bezier(0.57, 0.06, 0.05, 0.95); transition: all 450ms cubic-bezier(0.57, 0.06, 0.05, 0.95); padding-top: 24px; padding-bottom: 24px; overflow: hidden; } .is-visible .ajaxifyCart--content { -webkit-transition: all 550ms cubic-bezier(0.57, 0.06, 0.05, 0.95); -moz-transition: all 550ms cubic-bezier(0.57, 0.06, 0.05, 0.95); -ms-transition: all 550ms cubic-bezier(0.57, 0.06, 0.05, 0.95); -o-transition: all 550ms cubic-bezier(0.57, 0.06, 0.05, 0.95); transition: all 550ms cubic-bezier(0.57, 0.06, 0.05, 0.95); } .ajaxifyCart--content form { margin-bottom: 0; } @media screen and (max-width: 768px) { .ajaxifyCart--content form { color: #fff; } } @media screen and (max-width: 768px) { .ajaxifyCart--content { padding-top: 15px; padding-bottom: 15px; } } .ajaxifyCart--products { padding-bottom: 10px; margin-bottom: 20px; } .ajaxifyCart--product { position: relative; padding: 10px 0; } .ajaxifyCart--product:first-child { padding-top: 0; } .ajaxifyCart--product, .cart-row { -webkit-transform-origin: top; -moz-transform-origin: top; -ms-transform-origin: top; -o-transform-origin: top; transform-origin: top; -webkit-transition: all 650ms cubic-bezier(0.57, 0.06, 0.05, 0.95); -moz-transition: all 650ms cubic-bezier(0.57, 0.06, 0.05, 0.95); -ms-transition: all 650ms cubic-bezier(0.57, 0.06, 0.05, 0.95); -o-transition: all 650ms cubic-bezier(0.57, 0.06, 0.05, 0.95); transition: all 650ms cubic-bezier(0.57, 0.06, 0.05, 0.95); max-height: 500px; visibility: visible; } .ajaxifyCart--product.is-removed, .cart-row.is-removed { overflow: hidden; opacity: 0; padding: 0; margin: -24px 0 0; visibility: hidden; -webkit-transform: rotateX(-92deg); -moz-transform: rotateX(-92deg); -ms-transform: rotateX(-92deg); -o-transform: rotateX(-92deg); transform: rotateX(-92deg); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: all 450ms cubic-bezier(0.57, 0.06, 0.05, 0.95); -moz-transition: all 450ms cubic-bezier(0.57, 0.06, 0.05, 0.95); -ms-transition: all 450ms cubic-bezier(0.57, 0.06, 0.05, 0.95); -o-transition: all 450ms cubic-bezier(0.57, 0.06, 0.05, 0.95); transition: all 450ms cubic-bezier(0.57, 0.06, 0.05, 0.95); max-height: 0; } .ajaxifyCart--row { clear: both; } .ajaxifyCart--row:after { content: ""; display: table; clear: both; } .ajaxCart--product-image { display: block; overflow: hidden; margin-bottom: 15px; } .ajaxCart--product-image img { display: block; margin: 0 auto; max-width: 100%; } /*============================================================================ #Quantity Selectors ==============================================================================*/ .js-qty, .ajaxifyCart--qty { position: relative; overflow: visible !important; display: flex; align-items: center; /*border-radius: 4px;*/ overflow: hidden; margin-right: 15px; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .js-qty input[type="text"], .ajaxifyCart--qty input[type="text"] { margin: 0; max-width: 66px; background: none; text-align: center; padding: 5px; order: 2; height: 40px; border-radius: 0; border: 2px solid #d3d3d5; font-size: 16px; min-height: 40px; min-width: 40px; } .addToCartForm--payment-button .js-qty, .addToCartForm--payment-button .ajaxifyCart--qty { /* margin-bottom: 13px; */ } .js--qty-adjuster, .ajaxifyCart--qty-adjuster { height: 40px; display: flex; align-items: center; justify-content: center; width: 36px; min-width: 36px; border: 2px solid #d3d3d5; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .js--qty-adjuster.js--minus, .js--minus.ajaxifyCart--qty-adjuster, .ajaxifyCart--qty-adjuster.ajaxifyCart--minus, .js--qty-adjuster.ajaxifyCart--minus { padding-bottom: 3px; } .js--qty-adjuster:hover, .ajaxifyCart--qty-adjuster:hover { background-color: #d3d3d5; } .js--qty-adjuster:active, .ajaxifyCart--qty-adjuster:active { background-color: #b9b9bc; } .js--add, .ajaxifyCart--add { order: 2; border-left: 0; } .js--minus, .ajaxifyCart--minus { order: 1; border-right: 0; } .js--qty-adjuster, .ajaxifyCart--qty-adjuster { font-size: 25px; line-height: 16px; } /*============================================================================ #Quantity Selectors in the Ajax Cart ==============================================================================*/ .ajaxifyCart--qty { margin: 0; } .ajaxifyCart--is-loading .ajaxifyCart--qty { opacity: 0.5; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } .ajaxifyCart--num { -webkit-transition: all 0.1s ease-out; -moz-transition: all 0.1s ease-out; -ms-transition: all 0.1s ease-out; -o-transition: all 0.1s ease-out; transition: all 0.1s ease-out; } .supports-no-touch .ajaxifyCart--num { border: 1px solid rgba(0, 0, 0, 0); } .cart-row:hover .ajaxifyCart--num, .ajaxifyCart--product:hover .ajaxifyCart--num, .supports-touch .ajaxifyCart--num { border-color: #d3d3d5; } .ajaxifyCart--qty-adjuster { opacity: 0; } .cart-row:hover .ajaxifyCart--qty-adjuster, .ajaxifyCart--product:hover .ajaxifyCart--qty-adjuster, .supports-touch .ajaxifyCart--qty-adjuster { opacity: 1; -webkit-transition: background-color 0.2s ease-out; -moz-transition: background-color 0.2s ease-out; -ms-transition: background-color 0.2s ease-out; -o-transition: background-color 0.2s ease-out; transition: background-color 0.2s ease-out; } .ajaxifyCart--product:hover .ajaxifyCart--qty-adjuster:hover { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } /*============================================================================ Ajaxify Flip ==============================================================================*/ .flip { display: block; float: left; position: relative; -webkit-perspective: 600px; -moz-perspective: 600px; -ms-perspective: 600px; -o-perspective: 600px; perspective: 600px; } .flip-front, .flip-back { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; position: relative; z-index: 10; } .flip-front:focus, .flip-back:focus { outline: 0 none; } .flip-front { -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -ms-transform-origin: 100% 0; -o-transform-origin: 100% 0; transform-origin: 100% 0; } .is-flipped .flip-front { -webkit-transform: rotateX(92deg) translateY(-50%); -moz-transform: rotateX(92deg) translateY(-50%); -ms-transform: rotateX(92deg) translateY(-50%); -o-transform: rotateX(92deg) translateY(-50%); transform: rotateX(92deg) translateY(-50%); } .flip-back { display: block; position: absolute; top: 0; left: 0; width: 100%; opacity: 0; text-align: center; background-color: #464646; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transform: rotateX(-90deg) translateY(50%); -moz-transform: rotateX(-90deg) translateY(50%); -ms-transform: rotateX(-90deg) translateY(50%); -o-transform: rotateX(-90deg) translateY(50%); transform: rotateX(-90deg) translateY(50%); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; } .is-flipped .flip-back { opacity: 1; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } .flip.no-transforms .flip-back { display: none; } .flip.no-transforms.is-flipped .flip-back { display: block; } .flip-extra { display: inline-block; opacity: 0; visibility: hidden; padding: 4px 0; overflow: visible; width: 0; white-space: nowrap; z-index: 5; line-height: 34px; -webkit-transition: opacity 450ms cubic-bezier(0.57, 0.06, 0.05, 0.95); -moz-transition: opacity 450ms cubic-bezier(0.57, 0.06, 0.05, 0.95); -ms-transition: opacity 450ms cubic-bezier(0.57, 0.06, 0.05, 0.95); -o-transition: opacity 450ms cubic-bezier(0.57, 0.06, 0.05, 0.95); transition: opacity 450ms cubic-bezier(0.57, 0.06, 0.05, 0.95); } .is-flipped + .flip-extra { opacity: 1; visibility: visible; width: auto; padding-left: 10px; -webkit-transition: opacity 650ms cubic-bezier(0.57, 0.06, 0.05, 0.95) 750ms; -moz-transition: opacity 650ms cubic-bezier(0.57, 0.06, 0.05, 0.95) 750ms; -ms-transition: opacity 650ms cubic-bezier(0.57, 0.06, 0.05, 0.95) 750ms; -o-transition: opacity 650ms cubic-bezier(0.57, 0.06, 0.05, 0.95) 750ms; transition: opacity 650ms cubic-bezier(0.57, 0.06, 0.05, 0.95) 750ms; } .flip-cart { display: inline-block; padding: 0 8px; } .flip-checkout { margin: 0; } .cart-row .additional-checkout-buttons { display: none; } /*============================================================================ Ajaxify Modal ==============================================================================*/ .ajaxify-modal { position: absolute; top: 170px; left: -200%; margin-left: -500px; width: 100%; max-width: 760px; height: auto; z-index: 99999999; visibility: hidden; overflow: auto; -webkit-overflow-scrolling: touch; -webkit-transition: left 0s linear 700ms, box-shadow 600ms cubic-bezier(0.47, 0.5, 0, 0.95) 400ms, margin-top 200ms ease-in-out; -moz-transition: left 0s linear 700ms, box-shadow 600ms cubic-bezier(0.47, 0.5, 0, 0.95) 400ms, margin-top 200ms ease-in-out; -ms-transition: left 0s linear 700ms, box-shadow 600ms cubic-bezier(0.47, 0.5, 0, 0.95) 400ms, margin-top 200ms ease-in-out; -o-transition: left 0s linear 700ms, box-shadow 600ms cubic-bezier(0.47, 0.5, 0, 0.95) 400ms, margin-top 200ms ease-in-out; transition: left 0s linear 700ms, box-shadow 600ms cubic-bezier(0.47, 0.5, 0, 0.95) 400ms, margin-top 200ms ease-in-out; } @media only screen and (max-height: 645px) { .ajaxify-modal { top: 70px; } } @media screen and (max-width: 768px) { .ajaxify-modal { max-width: 90%; } } @media screen and (max-width: 768px) { .ajaxify-modal { position: fixed; top: 0; bottom: 0; margin: 0 !important; max-height: none; max-width: none; } } .ajaxify-modal .ajaxifyCart--content { padding-left: 24px; padding-right: 24px; } @media screen and (max-width: 768px) { .ajaxify-modal .ajaxifyCart--content { padding-left: 15px; padding-right: 15px; } } @media screen and (max-width: 768px) { .ajaxify-modal .ajaxifyCart--content { padding-bottom: 60px; min-height: 100%; } } .ajaxify-modal.is-visible { visibility: visible; left: 50%; -webkit-transition: left 0s linear, box-shadow 600ms cubic-bezier(0.47, 0.5, 0, 0.95) 400ms, margin-top 200ms ease-in-out; -moz-transition: left 0s linear, box-shadow 600ms cubic-bezier(0.47, 0.5, 0, 0.95) 400ms, margin-top 200ms ease-in-out; -ms-transition: left 0s linear, box-shadow 600ms cubic-bezier(0.47, 0.5, 0, 0.95) 400ms, margin-top 200ms ease-in-out; -o-transition: left 0s linear, box-shadow 600ms cubic-bezier(0.47, 0.5, 0, 0.95) 400ms, margin-top 200ms ease-in-out; transition: left 0s linear, box-shadow 600ms cubic-bezier(0.47, 0.5, 0, 0.95) 400ms, margin-top 200ms ease-in-out; } @media screen and (min-width: 769px) { .ajaxify-modal.is-visible { box-shadow: 0px 10px 80px rgba(0, 0, 0, 0.25); } } @media screen and (max-width: 768px) { .ajaxify-modal.is-visible { left: 0; } } .ajaxify-modal .ajaxifyCart--row > div { padding-left: 20px; } .ajaxify-modal .ajaxifyCart--row > div:first-child { padding-left: 0; } .ajaxify-modal .ajaxifyCart--product { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } .ajaxify-modal .update-cart { display: none !important; } .ajaxify-modal.no-transforms { border: 1px solid #d3d3d5; } #ajaxifyCart-overlay { position: fixed; width: 100%; height: 100%; visibility: hidden; top: 0; left: 0; z-index: 99999998; opacity: 0; cursor: pointer; -webkit-transition: all 450ms cubic-bezier(0.57, 0.06, 0.05, 0.95); -moz-transition: all 450ms cubic-bezier(0.57, 0.06, 0.05, 0.95); -ms-transition: all 450ms cubic-bezier(0.57, 0.06, 0.05, 0.95); -o-transition: all 450ms cubic-bezier(0.57, 0.06, 0.05, 0.95); transition: all 450ms cubic-bezier(0.57, 0.06, 0.05, 0.95); background-color: #d3d3d3; } @media screen and (min-width: 481px) { .is-visible ~ #ajaxifyCart-overlay { visibility: visible; -webkit-transition: all 650ms cubic-bezier(0.57, 0.06, 0.05, 0.95); -moz-transition: all 650ms cubic-bezier(0.57, 0.06, 0.05, 0.95); -ms-transition: all 650ms cubic-bezier(0.57, 0.06, 0.05, 0.95); -o-transition: all 650ms cubic-bezier(0.57, 0.06, 0.05, 0.95); transition: all 650ms cubic-bezier(0.57, 0.06, 0.05, 0.95); opacity: 0.8; } .lt-ie9 .is-visible ~ #ajaxifyCart-overlay { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; } } .ajaxify-modal .ajaxifyCart--content { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); opacity: 0; } .ajaxify-modal.is-visible .ajaxifyCart--content { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1; } @media screen and (max-width: 768px) { .ajaxify-modal.is-visible .ajaxifyCart--content { background: rgba(0, 0, 0, 0.9); } } @media screen and (max-width: 768px) { .ajaxify-modal input[type="text"] { border-color: #d3d3d5; } .ajaxify-modal .ajaxifyCart--qty-adjuster { opacity: 1; } } /*============================================================================ Ajaxify Drawer ==============================================================================*/ .ajaxify-drawer { height: 0px; overflow: hidden; border-bottom: 0px solid transparent; -webkit-perspective: 1000px; -moz-perspective: 1000px; -ms-perspective: 1000px; -o-perspective: 1000px; perspective: 1000px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: all 600ms cubic-bezier(0.47, 0.5, 0, 0.95); -moz-transition: all 600ms cubic-bezier(0.47, 0.5, 0, 0.95); -ms-transition: all 600ms cubic-bezier(0.47, 0.5, 0, 0.95); -o-transition: all 600ms cubic-bezier(0.47, 0.5, 0, 0.95); transition: all 600ms cubic-bezier(0.47, 0.5, 0, 0.95); } .ajaxify-drawer.is-visible { -webkit-transition: all 550ms cubic-bezier(0.47, 0, 0, 0.95); -moz-transition: all 550ms cubic-bezier(0.47, 0, 0, 0.95); -ms-transition: all 550ms cubic-bezier(0.47, 0, 0, 0.95); -o-transition: all 550ms cubic-bezier(0.47, 0, 0, 0.95); transition: all 550ms cubic-bezier(0.47, 0, 0, 0.95); border-bottom: 1px solid #d3d3d5; } .ajaxify-drawer .update-cart { display: none !important; } .ajaxify-drawer .ajaxifyCart--content { margin: 0 auto; opacity: 0; overflow: hidden; padding-top: 24px; padding-bottom: 24px; -webkit-transform-origin: top; -moz-transform-origin: top; -ms-transform-origin: top; -o-transform-origin: top; transform-origin: top; -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg); } .ajaxify-drawer.is-visible .ajaxifyCart--content { opacity: 1; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } .ajaxifyDrawer-caret { position: relative; display: block; height: 0; opacity: 0; overflow: hidden; } @media screen and (max-width: 768px) { .ajaxifyDrawer-caret { display: none; } } .is-visible + .ajaxifyDrawer-caret { opacity: 1; overflow: visible; } .ajaxifyDrawer-caret > span { position: absolute; top: 0; left: 100%; display: block; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid white; margin-left: -6px; opacity: 0; -webkit-transform: translate(0, -12px); -moz-transform: translate(0, -12px); -ms-transform: translate(0, -12px); -o-transform: translate(0, -12px); transform: translate(0, -12px); -webkit-transition: all 0.25s ease-in-out 0.2s; -moz-transition: all 0.25s ease-in-out 0.2s; -ms-transition: all 0.25s ease-in-out 0.2s; -o-transition: all 0.25s ease-in-out 0.2s; transition: all 0.25s ease-in-out 0.2s; } .is-visible + .ajaxifyDrawer-caret > span { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; } .sprite, .ajaxifyCart--add, .ajaxifyCart--minus, .ajaxifyCart--close { display: block; text-indent: -9999px; background-repeat: no-repeat; background-position: 0 0; } .ajaxifyCart--add { background-position: center center; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjIxNTJBNEY1NDY1OTExRTM4ODdCODU0OEQ4MDA1MjgwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjIxNTJBNEY2NDY1OTExRTM4ODdCODU0OEQ4MDA1MjgwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QUU4MjYyOEE0NjU3MTFFMzg4N0I4NTQ4RDgwMDUyODAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MjE1MkE0RjQ0NjU5MTFFMzg4N0I4NTQ4RDgwMDUyODAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6VbCy4AAAAWklEQVR42mJsampigAIeIH4GZUsB8RcQg4UBAUACvEhsBpgCkE5GKA0DklBF/0EKXgExJwMqgFn1nYmBAACZIIZkBbojwVbAHPQZSeNzZBOQvfkZiQ3WCBBgALZlEm83dptmAAAAAElFTkSuQmCC); } .ajaxifyCart--minus { background-position: center center; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjIxNTJBNEZENDY1OTExRTM4ODdCODU0OEQ4MDA1MjgwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjIxNTJBNEZFNDY1OTExRTM4ODdCODU0OEQ4MDA1MjgwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MjE1MkE0RkI0NjU5MTFFMzg4N0I4NTQ4RDgwMDUyODAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MjE1MkE0RkM0NjU5MTFFMzg4N0I4NTQ4RDgwMDUyODAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6MzbYiAAAALElEQVR42mL6//8/Az7MxEAAEFTA2NTU9A1Ic+KQ/07YBJBDKHIDQQUAAQYAbksecMSS2doAAAAASUVORK5CYII=); } .ajaxifyCart--close { position: absolute; top: 24px; right: 20px; opacity: 0; visibility: hidden; border: 0 none; width: 25px; height: 25px; cursor: pointer; border-radius: 25px; background-color: #fff; background-position: center center; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkMzRUY2REVBNDY1QjExRTM4ODdCODU0OEQ4MDA1MjgwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkMzRUY2REVCNDY1QjExRTM4ODdCODU0OEQ4MDA1MjgwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QzNFRjZERTg0NjVCMTFFMzg4N0I4NTQ4RDgwMDUyODAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QzNFRjZERTk0NjVCMTFFMzg4N0I4NTQ4RDgwMDUyODAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7sdZ8fAAAAp0lEQVR42nSPQQ6CMBBFx4ZEj+DSY8BGt9SVwRP1QBDdULeygaN4BFzpn+Q3mZCW5DFk/uvQ2YUQfiIygYuUnzc4O7wW/QCxIEbmi8oNG23mgO03js0reDF4gCNry77mUpkpHvSgo7QHA7gnwW1+q8FKcbViTtbJB/Bl7Uty5BWe4MTa2aWTPJplbuDDmpYe04IzqBn4zbU8J2udHcUpI9oDmtd/AQYAX20mtnhTCxQAAAAASUVORK5CYII=); z-index: 999999999; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: all 450ms cubic-bezier(0.57, 0.06, 0.05, 0.95); -moz-transition: all 450ms cubic-bezier(0.57, 0.06, 0.05, 0.95); -ms-transition: all 450ms cubic-bezier(0.57, 0.06, 0.05, 0.95); -o-transition: all 450ms cubic-bezier(0.57, 0.06, 0.05, 0.95); transition: all 450ms cubic-bezier(0.57, 0.06, 0.05, 0.95); } .is-visible .ajaxifyCart--close { opacity: 0.8; visibility: visible; -webkit-transition: opacity 650ms cubic-bezier(0.57, 0.06, 0.05, 0.95) 200ms; -moz-transition: opacity 650ms cubic-bezier(0.57, 0.06, 0.05, 0.95) 200ms; -ms-transition: opacity 650ms cubic-bezier(0.57, 0.06, 0.05, 0.95) 200ms; -o-transition: opacity 650ms cubic-bezier(0.57, 0.06, 0.05, 0.95) 200ms; transition: opacity 650ms cubic-bezier(0.57, 0.06, 0.05, 0.95) 200ms; } .ajaxifyCart--close:hover { opacity: 1; } @media screen and (max-width: 768px) { .ajaxifyCart--close { top: 15px; right: 8px; } } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .ajaxifyCart--add { background-size: 8px; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkFFODI2Mjg4NDY1NzExRTM4ODdCODU0OEQ4MDA1MjgwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkFFODI2Mjg5NDY1NzExRTM4ODdCODU0OEQ4MDA1MjgwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QUU4MjYyODY0NjU3MTFFMzg4N0I4NTQ4RDgwMDUyODAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QUU4MjYyODc0NjU3MTFFMzg4N0I4NTQ4RDgwMDUyODAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7Q1IXcAAAAL0lEQVR42mJsampiwAH+o/EZsSliYqAQjBrAwMCCJbSJjZXhFAaMoylxgA0ACDAAufIFqTR3duwAAAAASUVORK5CYII=); } .ajaxifyCart--minus { background-size: 8px; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjIxNTJBNEY5NDY1OTExRTM4ODdCODU0OEQ4MDA1MjgwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjIxNTJBNEZBNDY1OTExRTM4ODdCODU0OEQ4MDA1MjgwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MjE1MkE0Rjc0NjU5MTFFMzg4N0I4NTQ4RDgwMDUyODAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MjE1MkE0Rjg0NjU5MTFFMzg4N0I4NTQ4RDgwMDUyODAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz54TqQaAAAAKElEQVR42mL8//8/AyWAiYFCMGoAAwNLc3Pz/xEeBoyjKXEQGAAQYABVgwijPO94YQAAAABJRU5ErkJggg==); } } /*============================================================================ Shopify Timber v1.4.0 Copyright 2014 Shopify Inc. Author Carson Shold @cshold Built with Sass - http://sass-lang.com/ Some things to know about this file: - Sass is compiled on Shopify's server so you don't need to convert it to CSS yourself - The output CSS is compressed and comments are removed - You cannot use @imports in this file * Use grunt or gulp tasks to enable @imports - https://github.com/Shopify/shopify-css-import - Helpers variables, mixins, and starter classes are provided. Change as needed. ==============================================================================*/ /*============================================================================ Table of Contents #Breakpoint and Grid Variables #General Variables #Sass Mixins #Normalize #Grid Setup #Basic Styles #Helper Classes #Typography #Rich Text Editor #Links and Buttons #Lists #Tables #OOCSS Media Object #Images and Iframes #Forms #Icons #Pagination #Site Header #Site Nav and Dropdowns #Mobile Nav Bar #Site Footer #Product Grid and List Views #Collection Filters #Breadcrumbs #Product Page #Blogs and Comments #Notes and Form Feedback #Cart Page #Demo Styles - for empty store state #FlexSlider #Magnific Popup #Product Reviews #Password Page #Custom Content #Blank States #Lazysizes #Featured blog post ==============================================================================*/ /*============================================================================ #Breakpoint and Grid Variables ==============================================================================*/ /*================ The following are dependencies of csswizardry grid ================*/ /*============================================================================ #General Variables ==============================================================================*/ /*================ Typography ================*/ /*============================================================================ Get font-families from theme settings ==============================================================================*/ @font-face { font-family: "Baskerville No 2"; font-weight: 400; font-style: normal; font-display: swap; src: url("https://fonts.shopifycdn.com/baskerville_no_2/baskervilleno2_n4.58c0ec927a99385b0402747b6c157538f4cdc10c.woff2?h1=d29ybGRvZmhlbXAuY28udWs&hmac=880686207c854a329861573a71f989d2554a31c10d1f42e0eb62c7b5a2b2b4c6") format("woff2"), url("https://fonts.shopifycdn.com/baskerville_no_2/baskervilleno2_n4.52abb8e92f66631b3778eb51fda69dca851c7d70.woff?h1=d29ybGRvZmhlbXAuY28udWs&hmac=1e043dd07fdd00011480aff76031d9c158e8ac15fa4e9d3ad755ef2e952a8aca") format("woff"); } @font-face { font-family: "Avenir Next"; font-weight: 300; font-style: normal; font-display: swap; src: url("https://fonts.shopifycdn.com/avenir_next/avenirnext_n3.8e9925ddfd17ebca6be10ad27e93b95630121a12.woff2?h1=d29ybGRvZmhlbXAuY28udWs&hmac=bd5e6fd412fd50f7aac576125eb534be861e10b4c8c05e3e26a5c74cb9f16482") format("woff2"), url("https://fonts.shopifycdn.com/avenir_next/avenirnext_n3.cbedbc8d8cd8f1e5767ce304e3862c47b6e71ec1.woff?h1=d29ybGRvZmhlbXAuY28udWs&hmac=aa1a40cf7694f5648897ffcaa7b2f622036bb6b77ca4f3009d3014e7444beacf") format("woff"); } @font-face { font-family: "Baskerville No 2"; font-weight: 400; font-style: normal; font-display: swap; src: url("https://fonts.shopifycdn.com/baskerville_no_2/baskervilleno2_n4.58c0ec927a99385b0402747b6c157538f4cdc10c.woff2?h1=d29ybGRvZmhlbXAuY28udWs&hmac=880686207c854a329861573a71f989d2554a31c10d1f42e0eb62c7b5a2b2b4c6") format("woff2"), url("https://fonts.shopifycdn.com/baskerville_no_2/baskervilleno2_n4.52abb8e92f66631b3778eb51fda69dca851c7d70.woff?h1=d29ybGRvZmhlbXAuY28udWs&hmac=1e043dd07fdd00011480aff76031d9c158e8ac15fa4e9d3ad755ef2e952a8aca") format("woff"); } @font-face { font-family: "Avenir Next"; font-weight: 600; font-style: normal; font-display: swap; src: url("https://fonts.shopifycdn.com/avenir_next/avenirnext_n6.08f6a09127d450aa39c74986de08fd8fa84e6a11.woff2?h1=d29ybGRvZmhlbXAuY28udWs&hmac=f514552a85c0d24ed3001a631dc61d4ee8f073b1b81f380205d6ff4989a16c54") format("woff2"), url("https://fonts.shopifycdn.com/avenir_next/avenirnext_n6.bd2f76897d6f40c767db7c40226916ec7b6ffc65.woff?h1=d29ybGRvZmhlbXAuY28udWs&hmac=4116d772374e7ae8ac3f0b045dfe59b37d3a39c735df61d91be94f82c2c2d9f3") format("woff"); } @font-face { font-family: "Avenir Next"; font-weight: 800; font-style: normal; font-display: swap; src: url("https://fonts.shopifycdn.com/avenir_next/avenirnext_n8.b0dce42f90d49abe0edb10d18b5240db8dd5441f.woff2?h1=d29ybGRvZmhlbXAuY28udWs&hmac=22dd795aea5e94e48184d4239ed22d89bea004995d406f8a2fef41259170e924") format("woff2"), url("https://fonts.shopifycdn.com/avenir_next/avenirnext_n8.c7f2d5a3e139d3927366571bdbdfc524a3511376.woff?h1=d29ybGRvZmhlbXAuY28udWs&hmac=a807c2e0d1f3580b601a069f2cc6aabf1396a2978f558a411641907bee424542") format("woff"); } @font-face { font-family: "Avenir Next"; font-weight: 300; font-style: normal; font-display: swap; src: url("https://fonts.shopifycdn.com/avenir_next/avenirnext_n3.8e9925ddfd17ebca6be10ad27e93b95630121a12.woff2?h1=d29ybGRvZmhlbXAuY28udWs&hmac=bd5e6fd412fd50f7aac576125eb534be861e10b4c8c05e3e26a5c74cb9f16482") format("woff2"), url("https://fonts.shopifycdn.com/avenir_next/avenirnext_n3.cbedbc8d8cd8f1e5767ce304e3862c47b6e71ec1.woff?h1=d29ybGRvZmhlbXAuY28udWs&hmac=aa1a40cf7694f5648897ffcaa7b2f622036bb6b77ca4f3009d3014e7444beacf") format("woff"); } @font-face { font-family: "Avenir Next"; font-weight: 600; font-style: italic; font-display: swap; src: url("https://fonts.shopifycdn.com/avenir_next/avenirnext_i6.449b8593f8987f1402fdf6d634f972f810c90c5c.woff2?h1=d29ybGRvZmhlbXAuY28udWs&hmac=59ae47b00defb8720f45175b37c282ecc7374b3bf6f4d85d5144ce8f6a604ce9") format("woff2"), url("https://fonts.shopifycdn.com/avenir_next/avenirnext_i6.9c697a2eda486add54c668d1ec4ac662c8402e7c.woff?h1=d29ybGRvZmhlbXAuY28udWs&hmac=493ad272c155332bab492848c0aab7982d94272aa5059de984816c27cb80a548") format("woff"); } @font-face { font-family: "icons"; src: url("//cdn.shopify.com/s/files/1/0020/3184/5451/t/22/assets/icons.eot?v=27112660783780385281572356084"); src: url("//cdn.shopify.com/s/files/1/0020/3184/5451/t/22/assets/icons.eot?v=27112660783780385281572356084#iefix") format("embedded-opentype"), url("//cdn.shopify.com/s/files/1/0020/3184/5451/t/22/assets/icons.woff?v=160667694335112648771572356086") format("woff"), url("//cdn.shopify.com/s/files/1/0020/3184/5451/t/22/assets/icons.ttf?v=166489546979890680531572356085") format("truetype"), url("//cdn.shopify.com/s/files/1/0020/3184/5451/t/22/assets/icons.svg?v=3513608932403050231572356085#timber-icons") format("svg"); font-weight: normal; font-style: normal; font-display: block; } /*============================================================================ #Sass Mixins ==============================================================================*/ .clearfix:after { content: ""; display: table; clear: both; } /*============================================================================ Prefix mixin for generating vendor prefixes. Based on https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_prefixer.scss Usage: // Input: .element { @include prefix(transform, scale(1), ms webkit spec); } // Output: .element { -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } ==============================================================================*/ /*============================================================================ Flexbox prefix mixins from Bourbon https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_flex-box.scss ==============================================================================*/ /*============================================================================ #Normalize ==============================================================================*/ *, input, :before, :after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } .vertical-middle { position: relative; top: 50%; transform: translate(0, -50%); } /*============================================================================ #Grid Setup - Based on csswizardry grid, but with floated columns and a fixed gutter size - Breakpoints defined above, under #Breakpoint and Grid Variables - Note the inclusion of .grid-uniform to take care of clearfixes on evenly sized grid-items ==============================================================================*/ /* Force clearfix on grids */ .grid:after, .grid--rev:after, .grid--full:after, .grid-uniform:after { content: ""; display: table; clear: both; } /* Manual grid-item clearfix */ .grid-item.clear { clear: both; } /*============================================================================ Drop relative positioning into silent classes which can't take advantage of the `[class*="push--"]` and `[class*="pull--"]` selectors. ==============================================================================*/ /*============================================================================ Grid Setup 1. Allow the grid system to be used on lists. 2. Remove any margins and paddings that might affect the grid system. 3. Apply a negative `margin-left` to negate the columns' gutters. ==============================================================================*/ .grid, .grid--rev, .grid--full, .grid-uniform { list-style: none; margin: 0; padding: 0; margin-left: -30px; } .grid-item { float: left; padding-left: 30px; vertical-align: top; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /*============================================================================ Reversed grids allow you to structure your source in the opposite order to how your rendered layout will appear. ==============================================================================*/ .grid--rev { direction: rtl; text-align: left; } .grid--rev > .grid-item { direction: ltr; text-align: left; float: right; } /* Gutterless grids have all the properties of regular grids, minus any spacing. */ .grid--full { margin-left: 0; } .grid--full > .grid-item { padding-left: 0; } /*============================================================================ WIDTHS - Create width classes, prefixed by the specified namespace. ==============================================================================*/ /*================ Clearfix helper on uniform grids ================*/ /*============================================================================ HELPERS ==============================================================================*/ /*================ Helper show/hide classes around our breakpoints ================*/ /*================ Our regular, non-responsive width and helper classes ================*/ /** Whole */ .one-whole { width: 100%; } /* Halves */ .one-half, .two-quarters, .three-sixths, .four-eighths, .five-tenths, .six-twelfths { width: 50%; } /* Thirds */ .one-third, .two-sixths, .four-twelfths { width: 33.333%; } .two-thirds, .four-sixths, .eight-twelfths { width: 66.666%; } /* Quarters */ .one-quarter, .two-eighths, .three-twelfths { width: 25%; } .three-quarters, .six-eighths, .nine-twelfths { width: 75%; } /* Fifths */ .one-fifth, .two-tenths { width: 20%; } .two-fifths, .four-tenths { width: 40%; } .three-fifths, .six-tenths { width: 60%; } .four-fifths, .eight-tenths { width: 80%; } /* Sixths */ .one-sixth, .two-twelfths { width: 16.666%; } .five-sixths, .ten-twelfths { width: 83.333%; } /* Eighths */ .one-eighth { width: 12.5%; } .three-eighths { width: 37.5%; } .five-eighths { width: 62.5%; } .seven-eighths { width: 87.5%; } /* Tenths */ .one-tenth { width: 10%; } .three-tenths { width: 30%; } .seven-tenths { width: 70%; } .nine-tenths { width: 90%; } /* Twelfths */ .one-twelfth { width: 8.333%; } .five-twelfths { width: 41.666%; } .seven-twelfths { width: 58.333%; } .eleven-twelfths { width: 91.666%; } .show { display: block !important; } .hide { display: none !important; } .text-left { text-align: left !important; } .text-right { text-align: right !important; } .text-center { text-align: center !important; } .left { float: left !important; } .right { float: right !important; } /*================ Our responsive classes, if we have enabled them ================*/ @media only screen and (max-width: 480px) { /** Whole */ .small--one-whole { width: 100%; } /* Halves */ .small--one-half, .small--two-quarters, .small--three-sixths, .small--four-eighths, .small--five-tenths, .small--six-twelfths { width: 50%; } /* Thirds */ .small--one-third, .small--two-sixths, .small--four-twelfths { width: 33.333%; } .small--two-thirds, .small--four-sixths, .small--eight-twelfths { width: 66.666%; } /* Quarters */ .small--one-quarter, .small--two-eighths, .small--three-twelfths { width: 25%; } .small--three-quarters, .small--six-eighths, .small--nine-twelfths { width: 75%; } /* Fifths */ .small--one-fifth, .small--two-tenths { width: 20%; } .small--two-fifths, .small--four-tenths { width: 40%; } .small--three-fifths, .small--six-tenths { width: 60%; } .small--four-fifths, .small--eight-tenths { width: 80%; } /* Sixths */ .small--one-sixth, .small--two-twelfths { width: 16.666%; } .small--five-sixths, .small--ten-twelfths { width: 83.333%; } /* Eighths */ .small--one-eighth { width: 12.5%; } .small--three-eighths { width: 37.5%; } .small--five-eighths { width: 62.5%; } .small--seven-eighths { width: 87.5%; } /* Tenths */ .small--one-tenth { width: 10%; } .small--three-tenths { width: 30%; } .small--seven-tenths { width: 70%; } .small--nine-tenths { width: 90%; } /* Twelfths */ .small--one-twelfth { width: 8.333%; } .small--five-twelfths { width: 41.666%; } .small--seven-twelfths { width: 58.333%; } .small--eleven-twelfths { width: 91.666%; } .small--show { display: block !important; } .small--hide { display: none !important; } .small--text-left { text-align: left !important; } .small--text-right { text-align: right !important; } .small--text-center { text-align: center !important; } .small--left { float: left !important; } .small--right { float: right !important; } .grid-uniform .small--one-half:nth-child(2n+1), .grid-uniform .small--two-quarters:nth-child(2n+1), .grid-uniform .small--three-sixths:nth-child(2n+1), .grid-uniform .small--four-eighths:nth-child(2n+1), .grid-uniform .small--five-tenths:nth-child(2n+1), .grid-uniform .small--six-twelfths:nth-child(2n+1), .grid-uniform .small--one-third:nth-child(3n+1), .grid-uniform .small--two-sixths:nth-child(3n+1), .grid-uniform .small--four-twelfths:nth-child(3n+1), .grid-uniform .small--one-quarter:nth-child(4n+1), .grid-uniform .small--two-eighths:nth-child(4n+1), .grid-uniform .small--three-twelfths:nth-child(4n+1), .grid-uniform .small--one-fifth:nth-child(5n+1), .grid-uniform .small--two-tenths:nth-child(5n+1), .grid-uniform .small--one-sixth:nth-child(6n+1), .grid-uniform .small--two-twelfths:nth-child(6n+1), .grid-uniform .small--two-sixths:nth-child(3n+1), .grid-uniform .small--three-sixths:nth-child(2n+1), .grid-uniform .small--two-eighths:nth-child(4n+1), .grid-uniform .small--four-eighths:nth-child(2n+1), .grid-uniform .small--five-tenths:nth-child(2n+1), .grid-uniform .small--one-twelfth:nth-child(12n+1), .grid-uniform .small--two-twelfths:nth-child(6n+1), .grid-uniform .small--three-twelfths:nth-child(4n+1), .grid-uniform .small--four-twelfths:nth-child(3n+1), .grid-uniform .small--six-twelfths:nth-child(2n+1) { clear: both; } } @media only screen and (min-width: 481px) and (max-width: 768px) { /** Whole */ .medium--one-whole { width: 100%; } /* Halves */ .medium--one-half, .medium--two-quarters, .medium--three-sixths, .medium--four-eighths, .medium--five-tenths, .medium--six-twelfths { width: 50%; } /* Thirds */ .medium--one-third, .medium--two-sixths, .medium--four-twelfths { width: 33.333%; } .medium--two-thirds, .medium--four-sixths, .medium--eight-twelfths { width: 66.666%; } /* Quarters */ .medium--one-quarter, .medium--two-eighths, .medium--three-twelfths { width: 25%; } .medium--three-quarters, .medium--six-eighths, .medium--nine-twelfths { width: 75%; } /* Fifths */ .medium--one-fifth, .medium--two-tenths { width: 20%; } .medium--two-fifths, .medium--four-tenths { width: 40%; } .medium--three-fifths, .medium--six-tenths { width: 60%; } .medium--four-fifths, .medium--eight-tenths { width: 80%; } /* Sixths */ .medium--one-sixth, .medium--two-twelfths { width: 16.666%; } .medium--five-sixths, .medium--ten-twelfths { width: 83.333%; } /* Eighths */ .medium--one-eighth { width: 12.5%; } .medium--three-eighths { width: 37.5%; } .medium--five-eighths { width: 62.5%; } .medium--seven-eighths { width: 87.5%; } /* Tenths */ .medium--one-tenth { width: 10%; } .medium--three-tenths { width: 30%; } .medium--seven-tenths { width: 70%; } .medium--nine-tenths { width: 90%; } /* Twelfths */ .medium--one-twelfth { width: 8.333%; } .medium--five-twelfths { width: 41.666%; } .medium--seven-twelfths { width: 58.333%; } .medium--eleven-twelfths { width: 91.666%; } .medium--show { display: block !important; } .medium--hide { display: none !important; } .medium--text-left { text-align: left !important; } .medium--text-right { text-align: right !important; } .medium--text-center { text-align: center !important; } .medium--left { float: left !important; } .medium--right { float: right !important; } .grid-uniform .medium--one-half:nth-child(2n+1), .grid-uniform .medium--two-quarters:nth-child(2n+1), .grid-uniform .medium--three-sixths:nth-child(2n+1), .grid-uniform .medium--four-eighths:nth-child(2n+1), .grid-uniform .medium--five-tenths:nth-child(2n+1), .grid-uniform .medium--six-twelfths:nth-child(2n+1), .grid-uniform .medium--one-third:nth-child(3n+1), .grid-uniform .medium--two-sixths:nth-child(3n+1), .grid-uniform .medium--four-twelfths:nth-child(3n+1), .grid-uniform .medium--one-quarter:nth-child(4n+1), .grid-uniform .medium--two-eighths:nth-child(4n+1), .grid-uniform .medium--three-twelfths:nth-child(4n+1), .grid-uniform .medium--one-fifth:nth-child(5n+1), .grid-uniform .medium--two-tenths:nth-child(5n+1), .grid-uniform .medium--one-sixth:nth-child(6n+1), .grid-uniform .medium--two-twelfths:nth-child(6n+1), .grid-uniform .medium--two-sixths:nth-child(3n+1), .grid-uniform .medium--three-sixths:nth-child(2n+1), .grid-uniform .medium--two-eighths:nth-child(4n+1), .grid-uniform .medium--four-eighths:nth-child(2n+1), .grid-uniform .medium--five-tenths:nth-child(2n+1), .grid-uniform .medium--one-twelfth:nth-child(12n+1), .grid-uniform .medium--two-twelfths:nth-child(6n+1), .grid-uniform .medium--three-twelfths:nth-child(4n+1), .grid-uniform .medium--four-twelfths:nth-child(3n+1), .grid-uniform .medium--six-twelfths:nth-child(2n+1) { clear: both; } } @media only screen and (max-width: 768px) { /** Whole */ .medium-down--one-whole { width: 100%; } /* Halves */ .medium-down--one-half, .medium-down--two-quarters, .medium-down--three-sixths, .medium-down--four-eighths, .medium-down--five-tenths, .medium-down--six-twelfths { width: 50%; } /* Thirds */ .medium-down--one-third, .medium-down--two-sixths, .medium-down--four-twelfths { width: 33.333%; } .medium-down--two-thirds, .medium-down--four-sixths, .medium-down--eight-twelfths { width: 66.666%; } /* Quarters */ .medium-down--one-quarter, .medium-down--two-eighths, .medium-down--three-twelfths { width: 25%; } .medium-down--three-quarters, .medium-down--six-eighths, .medium-down--nine-twelfths { width: 75%; } /* Fifths */ .medium-down--one-fifth, .medium-down--two-tenths { width: 20%; } .medium-down--two-fifths, .medium-down--four-tenths { width: 40%; } .medium-down--three-fifths, .medium-down--six-tenths { width: 60%; } .medium-down--four-fifths, .medium-down--eight-tenths { width: 80%; } /* Sixths */ .medium-down--one-sixth, .medium-down--two-twelfths { width: 16.666%; } .medium-down--five-sixths, .medium-down--ten-twelfths { width: 83.333%; } /* Eighths */ .medium-down--one-eighth { width: 12.5%; } .medium-down--three-eighths { width: 37.5%; } .medium-down--five-eighths { width: 62.5%; } .medium-down--seven-eighths { width: 87.5%; } /* Tenths */ .medium-down--one-tenth { width: 10%; } .medium-down--three-tenths { width: 30%; } .medium-down--seven-tenths { width: 70%; } .medium-down--nine-tenths { width: 90%; } /* Twelfths */ .medium-down--one-twelfth { width: 8.333%; } .medium-down--five-twelfths { width: 41.666%; } .medium-down--seven-twelfths { width: 58.333%; } .medium-down--eleven-twelfths { width: 91.666%; } .medium-down--show { display: block !important; } .medium-down--hide { display: none !important; } .medium-down--text-left { text-align: left !important; } .medium-down--text-right { text-align: right !important; } .medium-down--text-center { text-align: center !important; } .medium-down--left { float: left !important; } .medium-down--right { float: right !important; } .grid-uniform .medium-down--one-half:nth-child(2n+1), .grid-uniform .medium-down--two-quarters:nth-child(2n+1), .grid-uniform .medium-down--three-sixths:nth-child(2n+1), .grid-uniform .medium-down--four-eighths:nth-child(2n+1), .grid-uniform .medium-down--five-tenths:nth-child(2n+1), .grid-uniform .medium-down--six-twelfths:nth-child(2n+1), .grid-uniform .medium-down--one-third:nth-child(3n+1), .grid-uniform .medium-down--two-sixths:nth-child(3n+1), .grid-uniform .medium-down--four-twelfths:nth-child(3n+1), .grid-uniform .medium-down--one-quarter:nth-child(4n+1), .grid-uniform .medium-down--two-eighths:nth-child(4n+1), .grid-uniform .medium-down--three-twelfths:nth-child(4n+1), .grid-uniform .medium-down--one-fifth:nth-child(5n+1), .grid-uniform .medium-down--two-tenths:nth-child(5n+1), .grid-uniform .medium-down--one-sixth:nth-child(6n+1), .grid-uniform .medium-down--two-twelfths:nth-child(6n+1), .grid-uniform .medium-down--two-sixths:nth-child(3n+1), .grid-uniform .medium-down--three-sixths:nth-child(2n+1), .grid-uniform .medium-down--two-eighths:nth-child(4n+1), .grid-uniform .medium-down--four-eighths:nth-child(2n+1), .grid-uniform .medium-down--five-tenths:nth-child(2n+1), .grid-uniform .medium-down--one-twelfth:nth-child(12n+1), .grid-uniform .medium-down--two-twelfths:nth-child(6n+1), .grid-uniform .medium-down--three-twelfths:nth-child(4n+1), .grid-uniform .medium-down--four-twelfths:nth-child(3n+1), .grid-uniform .medium-down--six-twelfths:nth-child(2n+1) { clear: both; } } @media only screen and (min-width: 769px) { /** Whole */ .large--one-whole { width: 100%; } /* Halves */ .large--one-half, .large--two-quarters, .large--three-sixths, .large--four-eighths, .large--five-tenths, .large--six-twelfths { width: 50%; } /* Thirds */ .large--one-third, .large--two-sixths, .large--four-twelfths { width: 33.333%; } .large--two-thirds, .large--four-sixths, .large--eight-twelfths { width: 66.666%; } /* Quarters */ .large--one-quarter, .large--two-eighths, .large--three-twelfths { width: 25%; } .large--three-quarters, .large--six-eighths, .large--nine-twelfths { width: 75%; } /* Fifths */ .large--one-fifth, .large--two-tenths { width: 20%; } .large--two-fifths, .large--four-tenths { width: 40%; } .large--three-fifths, .large--six-tenths { width: 60%; } .large--four-fifths, .large--eight-tenths { width: 80%; } /* Sixths */ .large--one-sixth, .large--two-twelfths { width: 16.666%; } .large--five-sixths, .large--ten-twelfths { width: 83.333%; } /* Eighths */ .large--one-eighth { width: 12.5%; } .large--three-eighths { width: 37.5%; } .large--five-eighths { width: 62.5%; } .large--seven-eighths { width: 87.5%; } /* Tenths */ .large--one-tenth { width: 10%; } .large--three-tenths { width: 30%; } .large--seven-tenths { width: 70%; } .large--nine-tenths { width: 90%; } /* Twelfths */ .large--one-twelfth { width: 8.333%; } .large--five-twelfths { width: 41.666%; } .large--seven-twelfths { width: 58.333%; } .large--eleven-twelfths { width: 91.666%; } .large--show { display: block !important; } .large--hide { display: none !important; } .large--text-left { text-align: left !important; } .large--text-right { text-align: right !important; } .large--text-center { text-align: center !important; } .large--left { float: left !important; } .large--right { float: right !important; } .grid-uniform .large--one-half:nth-child(2n+1), .grid-uniform .large--two-quarters:nth-child(2n+1), .grid-uniform .large--three-sixths:nth-child(2n+1), .grid-uniform .large--four-eighths:nth-child(2n+1), .grid-uniform .large--five-tenths:nth-child(2n+1), .grid-uniform .large--six-twelfths:nth-child(2n+1), .grid-uniform .large--one-third:nth-child(3n+1), .grid-uniform .large--two-sixths:nth-child(3n+1), .grid-uniform .large--four-twelfths:nth-child(3n+1), .grid-uniform .large--one-quarter:nth-child(4n+1), .grid-uniform .large--two-eighths:nth-child(4n+1), .grid-uniform .large--three-twelfths:nth-child(4n+1), .grid-uniform .large--one-fifth:nth-child(5n+1), .grid-uniform .large--two-tenths:nth-child(5n+1), .grid-uniform .large--one-sixth:nth-child(6n+1), .grid-uniform .large--two-twelfths:nth-child(6n+1), .grid-uniform .large--two-sixths:nth-child(3n+1), .grid-uniform .large--three-sixths:nth-child(2n+1), .grid-uniform .large--two-eighths:nth-child(4n+1), .grid-uniform .large--four-eighths:nth-child(2n+1), .grid-uniform .large--five-tenths:nth-child(2n+1), .grid-uniform .large--one-twelfth:nth-child(12n+1), .grid-uniform .large--two-twelfths:nth-child(6n+1), .grid-uniform .large--three-twelfths:nth-child(4n+1), .grid-uniform .large--four-twelfths:nth-child(3n+1), .grid-uniform .large--six-twelfths:nth-child(2n+1) { clear: both; } } @media only screen and (min-width: 990px) { /** Whole */ .xlarge--one-whole { width: 100%; } /* Halves */ .xlarge--one-half, .xlarge--two-quarters, .xlarge--three-sixths, .xlarge--four-eighths, .xlarge--five-tenths, .xlarge--six-twelfths { width: 50%; } /* Thirds */ .xlarge--one-third, .xlarge--two-sixths, .xlarge--four-twelfths { width: 33.333%; } .xlarge--two-thirds, .xlarge--four-sixths, .xlarge--eight-twelfths { width: 66.666%; } /* Quarters */ .xlarge--one-quarter, .xlarge--two-eighths, .xlarge--three-twelfths { width: 25%; } .xlarge--three-quarters, .xlarge--six-eighths, .xlarge--nine-twelfths { width: 75%; } /* Fifths */ .xlarge--one-fifth, .xlarge--two-tenths { width: 20%; } .xlarge--two-fifths, .xlarge--four-tenths { width: 40%; } .xlarge--three-fifths, .xlarge--six-tenths { width: 60%; } .xlarge--four-fifths, .xlarge--eight-tenths { width: 80%; } /* Sixths */ .xlarge--one-sixth, .xlarge--two-twelfths { width: 16.666%; } .xlarge--five-sixths, .xlarge--ten-twelfths { width: 83.333%; } /* Eighths */ .xlarge--one-eighth { width: 12.5%; } .xlarge--three-eighths { width: 37.5%; } .xlarge--five-eighths { width: 62.5%; } .xlarge--seven-eighths { width: 87.5%; } /* Tenths */ .xlarge--one-tenth { width: 10%; } .xlarge--three-tenths { width: 30%; } .xlarge--seven-tenths { width: 70%; } .xlarge--nine-tenths { width: 90%; } /* Twelfths */ .xlarge--one-twelfth { width: 8.333%; } .xlarge--five-twelfths { width: 41.666%; } .xlarge--seven-twelfths { width: 58.333%; } .xlarge--eleven-twelfths { width: 91.666%; } .xlarge--show { display: block !important; } .xlarge--hide { display: none !important; } .xlarge--text-left { text-align: left !important; } .xlarge--text-right { text-align: right !important; } .xlarge--text-center { text-align: center !important; } .xlarge--left { float: left !important; } .xlarge--right { float: right !important; } .grid-uniform .xlarge--one-half:nth-child(2n+1), .grid-uniform .xlarge--two-quarters:nth-child(2n+1), .grid-uniform .xlarge--three-sixths:nth-child(2n+1), .grid-uniform .xlarge--four-eighths:nth-child(2n+1), .grid-uniform .xlarge--five-tenths:nth-child(2n+1), .grid-uniform .xlarge--six-twelfths:nth-child(2n+1), .grid-uniform .xlarge--one-third:nth-child(3n+1), .grid-uniform .xlarge--two-sixths:nth-child(3n+1), .grid-uniform .xlarge--four-twelfths:nth-child(3n+1), .grid-uniform .xlarge--one-quarter:nth-child(4n+1), .grid-uniform .xlarge--two-eighths:nth-child(4n+1), .grid-uniform .xlarge--three-twelfths:nth-child(4n+1), .grid-uniform .xlarge--one-fifth:nth-child(5n+1), .grid-uniform .xlarge--two-tenths:nth-child(5n+1), .grid-uniform .xlarge--one-sixth:nth-child(6n+1), .grid-uniform .xlarge--two-twelfths:nth-child(6n+1), .grid-uniform .xlarge--two-sixths:nth-child(3n+1), .grid-uniform .xlarge--three-sixths:nth-child(2n+1), .grid-uniform .xlarge--two-eighths:nth-child(4n+1), .grid-uniform .xlarge--four-eighths:nth-child(2n+1), .grid-uniform .xlarge--five-tenths:nth-child(2n+1), .grid-uniform .xlarge--one-twelfth:nth-child(12n+1), .grid-uniform .xlarge--two-twelfths:nth-child(6n+1), .grid-uniform .xlarge--three-twelfths:nth-child(4n+1), .grid-uniform .xlarge--four-twelfths:nth-child(3n+1), .grid-uniform .xlarge--six-twelfths:nth-child(2n+1) { clear: both; } } /*============================================================================ PUSH - Push classes, to move grid items over to the right by certain amounts ==============================================================================*/ [class*="push--"] { position: relative; } /* Whole */ .push--one-whole { left: 100%; } /* Halves */ .push--one-half, .push--two-quarters, .push--three-sixths, .push--four-eighths, .push--five-tenths, .push--six-twelfths { left: 50%; } /* Thirds */ .push--one-third, .push--two-sixths, .push--four-twelfths { left: 33.333%; } .push--two-thirds, .push--four-sixths, .push--eight-twelfths { left: 66.666%; } /* Quarters */ .push--one-quarter, .push--two-eighths, .push--three-twelfths { left: 25%; } .push--three-quarters, .push--six-eighths, .push--nine-twelfths { left: 75%; } /* Fifths */ .push--one-fifth, .push--two-tenths { left: 20%; } .push--two-fifths, .push--four-tenths { left: 40%; } .push--three-fifths, .push--six-tenths { left: 60%; } .push--four-fifths, .push--eight-tenths { left: 80%; } /* Sixths */ .push--one-sixth, .push--two-twelfths { left: 16.666%; } .push--five-sixths, .push--ten-twelfths { left: 83.333%; } /* Eighths */ .push--one-eighth { left: 12.5%; } .push--three-eighths { left: 37.5%; } .push--five-eighths { left: 62.5%; } .push--seven-eighths { left: 87.5%; } /* Tenths */ .push--one-tenth { left: 10%; } .push--three-tenths { left: 30%; } .push--seven-tenths { left: 70%; } .push--nine-tenths { left: 90%; } /* Twelfths */ .push--one-twelfth { left: 8.333%; } .push--five-twelfths { left: 41.666%; } .push--seven-twelfths { left: 58.333%; } .push--eleven-twelfths { left: 91.666%; } @media only screen and (min-width: 481px) and (max-width: 768px) { /* Whole */ .push--medium--one-whole { left: 100%; } /* Halves */ .push--medium--one-half, .push--medium--two-quarters, .push--medium--three-sixths, .push--medium--four-eighths, .push--medium--five-tenths, .push--medium--six-twelfths { left: 50%; } /* Thirds */ .push--medium--one-third, .push--medium--two-sixths, .push--medium--four-twelfths { left: 33.333%; } .push--medium--two-thirds, .push--medium--four-sixths, .push--medium--eight-twelfths { left: 66.666%; } /* Quarters */ .push--medium--one-quarter, .push--medium--two-eighths, .push--medium--three-twelfths { left: 25%; } .push--medium--three-quarters, .push--medium--six-eighths, .push--medium--nine-twelfths { left: 75%; } /* Fifths */ .push--medium--one-fifth, .push--medium--two-tenths { left: 20%; } .push--medium--two-fifths, .push--medium--four-tenths { left: 40%; } .push--medium--three-fifths, .push--medium--six-tenths { left: 60%; } .push--medium--four-fifths, .push--medium--eight-tenths { left: 80%; } /* Sixths */ .push--medium--one-sixth, .push--medium--two-twelfths { left: 16.666%; } .push--medium--five-sixths, .push--medium--ten-twelfths { left: 83.333%; } /* Eighths */ .push--medium--one-eighth { left: 12.5%; } .push--medium--three-eighths { left: 37.5%; } .push--medium--five-eighths { left: 62.5%; } .push--medium--seven-eighths { left: 87.5%; } /* Tenths */ .push--medium--one-tenth { left: 10%; } .push--medium--three-tenths { left: 30%; } .push--medium--seven-tenths { left: 70%; } .push--medium--nine-tenths { left: 90%; } /* Twelfths */ .push--medium--one-twelfth { left: 8.333%; } .push--medium--five-twelfths { left: 41.666%; } .push--medium--seven-twelfths { left: 58.333%; } .push--medium--eleven-twelfths { left: 91.666%; } } @media only screen and (max-width: 768px) { /* Whole */ .push--medium-down--one-whole { left: 100%; } /* Halves */ .push--medium-down--one-half, .push--medium-down--two-quarters, .push--medium-down--three-sixths, .push--medium-down--four-eighths, .push--medium-down--five-tenths, .push--medium-down--six-twelfths { left: 50%; } /* Thirds */ .push--medium-down--one-third, .push--medium-down--two-sixths, .push--medium-down--four-twelfths { left: 33.333%; } .push--medium-down--two-thirds, .push--medium-down--four-sixths, .push--medium-down--eight-twelfths { left: 66.666%; } /* Quarters */ .push--medium-down--one-quarter, .push--medium-down--two-eighths, .push--medium-down--three-twelfths { left: 25%; } .push--medium-down--three-quarters, .push--medium-down--six-eighths, .push--medium-down--nine-twelfths { left: 75%; } /* Fifths */ .push--medium-down--one-fifth, .push--medium-down--two-tenths { left: 20%; } .push--medium-down--two-fifths, .push--medium-down--four-tenths { left: 40%; } .push--medium-down--three-fifths, .push--medium-down--six-tenths { left: 60%; } .push--medium-down--four-fifths, .push--medium-down--eight-tenths { left: 80%; } /* Sixths */ .push--medium-down--one-sixth, .push--medium-down--two-twelfths { left: 16.666%; } .push--medium-down--five-sixths, .push--medium-down--ten-twelfths { left: 83.333%; } /* Eighths */ .push--medium-down--one-eighth { left: 12.5%; } .push--medium-down--three-eighths { left: 37.5%; } .push--medium-down--five-eighths { left: 62.5%; } .push--medium-down--seven-eighths { left: 87.5%; } /* Tenths */ .push--medium-down--one-tenth { left: 10%; } .push--medium-down--three-tenths { left: 30%; } .push--medium-down--seven-tenths { left: 70%; } .push--medium-down--nine-tenths { left: 90%; } /* Twelfths */ .push--medium-down--one-twelfth { left: 8.333%; } .push--medium-down--five-twelfths { left: 41.666%; } .push--medium-down--seven-twelfths { left: 58.333%; } .push--medium-down--eleven-twelfths { left: 91.666%; } } @media only screen and (min-width: 769px) { /* Whole */ .push--large--one-whole { left: 100%; } /* Halves */ .push--large--one-half, .push--large--two-quarters, .push--large--three-sixths, .push--large--four-eighths, .push--large--five-tenths, .push--large--six-twelfths { left: 50%; } /* Thirds */ .push--large--one-third, .push--large--two-sixths, .push--large--four-twelfths { left: 33.333%; } .push--large--two-thirds, .push--large--four-sixths, .push--large--eight-twelfths { left: 66.666%; } /* Quarters */ .push--large--one-quarter, .push--large--two-eighths, .push--large--three-twelfths { left: 25%; } .push--large--three-quarters, .push--large--six-eighths, .push--large--nine-twelfths { left: 75%; } /* Fifths */ .push--large--one-fifth, .push--large--two-tenths { left: 20%; } .push--large--two-fifths, .push--large--four-tenths { left: 40%; } .push--large--three-fifths, .push--large--six-tenths { left: 60%; } .push--large--four-fifths, .push--large--eight-tenths { left: 80%; } /* Sixths */ .push--large--one-sixth, .push--large--two-twelfths { left: 16.666%; } .push--large--five-sixths, .push--large--ten-twelfths { left: 83.333%; } /* Eighths */ .push--large--one-eighth { left: 12.5%; } .push--large--three-eighths { left: 37.5%; } .push--large--five-eighths { left: 62.5%; } .push--large--seven-eighths { left: 87.5%; } /* Tenths */ .push--large--one-tenth { left: 10%; } .push--large--three-tenths { left: 30%; } .push--large--seven-tenths { left: 70%; } .push--large--nine-tenths { left: 90%; } /* Twelfths */ .push--large--one-twelfth { left: 8.333%; } .push--large--five-twelfths { left: 41.666%; } .push--large--seven-twelfths { left: 58.333%; } .push--large--eleven-twelfths { left: 91.666%; } } @media only screen and (min-width: 990px) { /* Whole */ .push--xlarge--one-whole { left: 100%; } /* Halves */ .push--xlarge--one-half, .push--xlarge--two-quarters, .push--xlarge--three-sixths, .push--xlarge--four-eighths, .push--xlarge--five-tenths, .push--xlarge--six-twelfths { left: 50%; } /* Thirds */ .push--xlarge--one-third, .push--xlarge--two-sixths, .push--xlarge--four-twelfths { left: 33.333%; } .push--xlarge--two-thirds, .push--xlarge--four-sixths, .push--xlarge--eight-twelfths { left: 66.666%; } /* Quarters */ .push--xlarge--one-quarter, .push--xlarge--two-eighths, .push--xlarge--three-twelfths { left: 25%; } .push--xlarge--three-quarters, .push--xlarge--six-eighths, .push--xlarge--nine-twelfths { left: 75%; } /* Fifths */ .push--xlarge--one-fifth, .push--xlarge--two-tenths { left: 20%; } .push--xlarge--two-fifths, .push--xlarge--four-tenths { left: 40%; } .push--xlarge--three-fifths, .push--xlarge--six-tenths { left: 60%; } .push--xlarge--four-fifths, .push--xlarge--eight-tenths { left: 80%; } /* Sixths */ .push--xlarge--one-sixth, .push--xlarge--two-twelfths { left: 16.666%; } .push--xlarge--five-sixths, .push--xlarge--ten-twelfths { left: 83.333%; } /* Eighths */ .push--xlarge--one-eighth { left: 12.5%; } .push--xlarge--three-eighths { left: 37.5%; } .push--xlarge--five-eighths { left: 62.5%; } .push--xlarge--seven-eighths { left: 87.5%; } /* Tenths */ .push--xlarge--one-tenth { left: 10%; } .push--xlarge--three-tenths { left: 30%; } .push--xlarge--seven-tenths { left: 70%; } .push--xlarge--nine-tenths { left: 90%; } /* Twelfths */ .push--xlarge--one-twelfth { left: 8.333%; } .push--xlarge--five-twelfths { left: 41.666%; } .push--xlarge--seven-twelfths { left: 58.333%; } .push--xlarge--eleven-twelfths { left: 91.666%; } } /*============================================================================ PULL - Pull classes, to move grid items back to the left by certain amounts ==============================================================================*/ /*================ IE8 grid uniform clearfix ================*/ .lt-ie9 .grid-uniform { text-align: left; margin-left: 0; } .lt-ie9 .grid-uniform .grid-item { display: inline-block; float: none; padding: 0; margin-left: -3px; } /*================ Home page section helpers ================*/ .template-index main.main-content .shopify-section:nth-child(1) hr:first-child { display: none; } /*============================================================================ #Basic Styles ==============================================================================*/ html, body { padding: 0; margin: 0; background-color: white; } html.js .no-js, body.js .no-js { display: block; } html.no-js .no-js, body.no-js .no-js { display: none !important; } /*============================================================================ Commented out CSS for background for easy background image uploading in case customers ask. Simply upload a file called 'bg.jpg' and delete lines as necessary. ==============================================================================*/ .wrapper { max-width: 1170px; margin: 0 auto; padding: 0 15px; } .wrapper:after { content: ""; display: table; clear: both; } @media screen and (min-width: 481px) { .wrapper { /*padding: 0 $gutter;*/ } } .main-content { display: block; /*padding-top: $gutter;*/ /* padding-bottom: $gutter*2; */ } @media screen and (max-width: 769px) { .main-content { /*padding-top: $gutter/2;*/ padding-top: 0; padding-bottom: 0; } } .template-collection .main-content, .template-product .main-content, .template-blog .main-content { padding-bottom: 0; } .template-product .main-content { padding-top: 0; } .grid-border > .grid-item { padding-top: 30px; } @media screen and (max-width: 480px) { .grid-border > .grid-item { padding-top: 15px; } } @media screen and (min-width: 769px) { .grid-border--right { border-right: 1px solid #d3d3d5; } .grid-border--left { border-left: 1px solid #d3d3d5; } } /*============================================================================ #Helper Classes ==============================================================================*/ .left { float: left; } .right { float: right; } .text-center { text-align: center; } .text-right { text-align: right; } .hidden { display: none; } .display-table { display: table; table-layout: fixed; width: 100%; } .display-table-cell { display: table-cell; vertical-align: middle; float: none; } @media screen and (min-width: 769px) { .large--display-table { display: table; table-layout: fixed; width: 100%; } .large--display-table-cell { display: table-cell; vertical-align: middle; float: none; } } .visually-hidden { clip: rect(0 0 0 0); clip: rect(0, 0, 0, 0); overflow: hidden; position: absolute; height: 1px; width: 1px; } /*============================================================================ #Typography ==============================================================================*/ body, input, textarea, button, select { font-size: 14px; font-family: "Avenir Next", sans-serif; font-weight: 300; font-style: normal; line-height: 1.6; color: #585858; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; } h1, .h1, #shopify-product-reviews .spr-header-title, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { display: block; margin: 0 0 0.5em; line-height: 1.4; font-family: "Baskerville No 2", serif; /*font-family:'BebasNeueRegular';*/ font-weight: 400; font-style: normal; } h1 a, .h1 a, #shopify-product-reviews .spr-header-title a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a, h6 a, .h6 a { text-decoration: none; font-weight: inherit; } /*================ Pixel to EM conversion tool - http://pxtoem.com/ ================*/ h1, .h1, #shopify-product-reviews .spr-header-title { font-size: 1.733em; margin-bottom: 30px; } h2, .h2 { font-size: 1.333em; } h3, .h3 { font-size: 1.133em; } h4, .h4 { font-size: 1.067em; } h5, .h5 { font-size: 1em; } h6, .h6 { font-size: 1em; } .main-content h1, .main-content .h1, .main-content #shopify-product-reviews .spr-header-title, #shopify-product-reviews .main-content .spr-header-title, .main-content h2, .main-content .h2, .main-content h3, .main-content .h3, .main-content h4, .main-content .h4, .main-content h5, .main-content .h5 { color: black; } .sidebar h2, .sidebar .h2, .sidebar h3, .sidebar .h3, .sidebar h4, .sidebar .h4, .sidebar h5, .sidebar .h5 { margin-top: 4px; } .sidebar .artical-sidebar { border-left: 1px solid #d3d3d5; padding-left: 20px; padding-top: 30px; } @media screen and (max-width: 769px) { .sidebar .artical-sidebar { border: 0; padding: 0px; } } p { margin: 0 0 15px 0; } p img { margin: 0; } em { font-style: italic; } b, strong { font-weight: 600; } small { font-size: 80%; } sup, sub { position: relative; font-size: 60%; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.5em; } .text-light, s { color: #585858; } /*================ Blockquotes ================*/ blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: none; } blockquote { font-size: 1.5em; line-height: 1.45; font-style: italic; margin: 0 0 30px; padding: 15px 30px; border-left: 1px solid #d3d3d5; } @media screen and (max-width: 769px) { blockquote { font-size: 1.2em; } } blockquote p { margin-bottom: 0; } blockquote p + cite { margin-top: 15px; } blockquote cite { display: block; font-size: 0.75em; } blockquote cite:before { content: "\2014 \0020"; } /*================ Code ================*/ code, pre { background-color: #faf7f5; font-family: Consolas,monospace; font-size: 1em; border: 0 none; padding: 0 2px; color: #51ab62; } pre { overflow: auto; padding: 0.5em; margin: 0 0 1em; } /*================ Horizontal Rules ================*/ hr { clear: both; border-top: solid #d3d3d5; border-width: 1px 0 0; margin: 30px 0; height: 0; } @media screen and (max-width: 480px) { hr { margin: 15px 0; } } hr.hr--small { margin: 15px 0; } hr.hr--clear { border-top-color: transparent; } footer hr { border-top-color: #d2d2d2; margin-left: auto; margin-right: auto; max-width: 1170px; } hr.product-template-hr { margin: 36px 0; } @media screen and (min-width: 769px) { hr.hr--offset-left { margin-left: -30px; } } /*================ Section Headers ================*/ .section-header { margin-bottom: 20px; } .section-header--title { margin-bottom: 12px; } @media screen and (min-width: 769px) { .section-header { display: table; width: 100%; } .section-header--left { display: table-cell; text-align: left; vertical-align: middle; margin-bottom: 0; } .section-header--left h1, .section-header--left .h1, .section-header--left #shopify-product-reviews .spr-header-title, #shopify-product-reviews .section-header--left .spr-header-title, .section-header--left h2, .section-header--left .h2, .section-header--left h3, .section-header--left .h3, .section-header--left h4, .section-header--left .h4, .section-header--left .h1, .section-header--left .h2, .section-header--left .h3, .section-header--left .h4 { margin-bottom: 0; } .section-header--right { display: table-cell; vertical-align: middle; text-align: right; width: 335px; } } @media screen and (min-width: 769px) and (max-width: 768px) { .section-header--right { margin-bottom: 30px; } } .section-header--right .form-horizontal { display: inline-block; vertical-align: middle; } @media screen and (min-width: 481px) { .section-header--right label + select, .section-header--right .collection-view { margin-left: 15px; } } .collection-view { display: none; border: 1px solid #d3d3d5; border-radius: 0; padding: 11px; height: 39px; vertical-align: middle; /*================ We use SVG icons, so simply hide this in oldIE ================*/ /*================ Only show on larger screens ================*/ } .lt-ie9 .collection-view { display: none; } @media screen and (min-width: 769px) { .collection-view { display: inline-block; } } .collection-view a { color: #585858; display: block; float: left; opacity: 0.7; cursor: pointer; line-height: 100%; -webkit-transition: opacity 0.15s ease-out; -moz-transition: opacity 0.15s ease-out; -ms-transition: opacity 0.15s ease-out; -o-transition: opacity 0.15s ease-out; transition: opacity 0.15s ease-out; } .collection-view a + a { margin-left: 10px; } .collection-view a:hover { opacity: 0.9; -webkit-transition: opacity 0.05s ease-in; -moz-transition: opacity 0.05s ease-in; -ms-transition: opacity 0.05s ease-in; -o-transition: opacity 0.05s ease-in; transition: opacity 0.05s ease-in; } .collection-view a.collection-view--active { opacity: 1; cursor: default; } .collection-view img { display: block; opacity: inherit; } .newsletter-section { padding: 40px 30px; background-color: #98c1ab; } .newsletter-section .input-group-btn { background-color: transparent; color: #fff; border: solid 2px #fff; border-left: 0; transition: all .3s; z-index: 0; } .newsletter-section .input-group .input-group-field { height: -webkit-fill-available; height: -moz-fill-available; } .newsletter-section button { background-color: transparent; color: #fff; border: 0; font-size: 20px !important; font-family: "Avenir Next", sans-serif; text-transform: uppercase; font-weight: 600; z-index: 0; transition: all 0.3s; } .newsletter-section .input-group-btn:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #fff; transform: scaleY(0); transform-origin: bottom; transition: transform .3s ease-out; } .newsletter-section .input-group-btn:hover:before { transform: scaleY(1); } .newsletter-section .input-group-btn:hover button { background-color: transparent; color: #000; } .newsletter-section input[type="email"] { background-color: #98c1ab; border: solid 2px #fff; border-right: 0; color: #fff; transition: all .3s; } .newsletter-section input:focus { outline: none !important; background-color: #98c1ab; border: solid 2px #fff !important; border-right: 0 !important; -webkit-box-shadow: inset 3px 3px #fff, inset 0 -3px #fff; box-shadow: inset 3px 3px #fff, inset 0 -3px #fff; } .newsletter-section input:focus + .input-group-btn { -webkit-box-shadow: inset 0px 3px #fff, inset -3px -3px #fff; box-shadow: inset 0px 3px #fff, inset -3px -3px #fff; } .newsletter-section ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #fff; opacity: 1; /* Firefox */ } .newsletter-section :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #fff; } .newsletter-section ::-ms-input-placeholder { /* Microsoft Edge */ color: #fff; } .newsletter-section .h1 { margin-bottom: 10px; color: #fff; } @media screen and (min-width: 769px) { .newsletter-section #contact_form { width: 50%; margin: 0 auto; } } /*============================================================================ #Rich Text Editor ==============================================================================*/ .rte { margin-bottom: 15px; } .rte img { max-width: 100%; height: auto; } .rte h1, .rte .h1, .rte #shopify-product-reviews .spr-header-title, #shopify-product-reviews .rte .spr-header-title, .rte h2, .rte .h2, .rte h3, .rte .h3, .rte h4, .rte .h4, .rte h5, .rte .h5, .rte h6, .rte .h6 { margin-top: 0.5em; } .rte h1:first-child, .rte .h1:first-child, .rte #shopify-product-reviews .spr-header-title:first-child, #shopify-product-reviews .rte .spr-header-title:first-child, .rte h2:first-child, .rte .h2:first-child, .rte h3:first-child, .rte .h3:first-child, .rte h4:first-child, .rte .h4:first-child, .rte h5:first-child, .rte .h5:first-child, .rte h6:first-child, .rte .h6:first-child { margin-top: 0; } .rte > div { margin-bottom: 15px; } .rte ul, .rte ol { margin-left: 35px; } .rte ul ul { list-style: circle outside; } .rte li { margin-bottom: 0.4em; } .rte table { table-layout: fixed; } .rte--header { margin-bottom: 0; } /*============================================================================ #Links and Buttons ==============================================================================*/ a { color: #30422e; text-decoration: none; background: transparent; } a:hover, a:focus { color: #516f4d; } button { overflow: visible; } button[disabled], html input[disabled] { cursor: default; } .btn, .btn-secondary, input.btn-secondary, input[type="submit"], .header-cart-btn, .shopify-payment-button .shopify-payment-button__button--unbranded { display: inline-block; padding: 10px 20px; margin: 0; line-height: 0.42; text-decoration: none; text-align: center; vertical-align: middle; white-space: nowrap; cursor: pointer; border: 1px solid transparent; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; -webkit-appearance: none; -moz-appearance: none; border-radius: 0; font-family: "Baskerville No 2", serif; /*font-weight: $accentFontWeight;*/ font-style: normal; font-size: 16px; -webkit-transition: background-color 0.2s ease-out; -moz-transition: background-color 0.2s ease-out; -ms-transition: background-color 0.2s ease-out; -o-transition: background-color 0.2s ease-out; transition: background-color 0.2s ease-out; /*================ Set primary button colors - can override later ================*/ background-color: #30422e; color: white; } .btn.btn--add-to-cart, .btn--add-to-cart.btn-secondary, input.btn--add-to-cart[type="submit"], .btn--add-to-cart.header-cart-btn, .shopify-payment-button .btn--add-to-cart.shopify-payment-button__button--unbranded { min-height: 41px; white-space: normal; /*font-family:Montserrat,sans-serif;*/ font-size: 25px; } @media screen and (max-width: 768px) { .btn.btn--add-to-cart, .btn--add-to-cart.btn-secondary, input.btn--add-to-cart[type="submit"], .btn--add-to-cart.header-cart-btn, .shopify-payment-button .btn--add-to-cart.shopify-payment-button__button--unbranded { width: 100%; margin-bottom: 20px; } } .btn.btn--small, .btn--small.btn-secondary, input.btn--small[type="submit"], .btn--small.header-cart-btn, .shopify-payment-button .btn--small.shopify-payment-button__button--unbranded { padding: 8px 12px 7px; font-size: 14px; } .btn.btn--wide, .btn--wide.btn-secondary, input.btn--wide[type="submit"], .btn--wide.header-cart-btn, .shopify-payment-button .btn--wide.shopify-payment-button__button--unbranded { min-width: 40%; } @media screen and (max-width: 768px) { .btn.btn--wide, .btn--wide.btn-secondary, input.btn--wide[type="submit"], .btn--wide.header-cart-btn, .shopify-payment-button .btn--wide.shopify-payment-button__button--unbranded { width: 100%; } } .btn.btn--full, .btn--full.btn-secondary, input.btn--full[type="submit"], .btn--full.header-cart-btn, .shopify-payment-button .btn--full.shopify-payment-button__button--unbranded, .payment-buttons--large .shopify-payment-button .shopify-payment-button__button--unbranded { width: 100%; } .btn.btn--large, .btn--large.btn-secondary, input.btn--large[type="submit"], .btn--large.header-cart-btn, .shopify-payment-button .btn--large.shopify-payment-button__button--unbranded, .payment-buttons--large .shopify-payment-button .shopify-payment-button__button--unbranded { padding: 5px 20px; font-weight: 700; min-height: 55px; margin-bottom: 30px; } .btn:hover, .btn-secondary:hover, input[type="submit"]:hover, .header-cart-btn:hover, .shopify-payment-button .shopify-payment-button__button--unbranded:hover { background-color: #253324; color: white; -webkit-transition: background-color 0.05s ease-in; -moz-transition: background-color 0.05s ease-in; -ms-transition: background-color 0.05s ease-in; -o-transition: background-color 0.05s ease-in; transition: background-color 0.05s ease-in; } .btn:active, .btn-secondary:active, input[type="submit"]:active, .header-cart-btn:active, .shopify-payment-button .shopify-payment-button__button--unbranded:active { background-color: #1a2419; color: white; } .btn[disabled], [disabled].btn-secondary, input[disabled][type="submit"], [disabled].header-cart-btn, .shopify-payment-button [disabled].shopify-payment-button__button--unbranded, .btn.disabled, .disabled.btn-secondary, input.disabled[type="submit"], .disabled.header-cart-btn, .shopify-payment-button .disabled.shopify-payment-button__button--unbranded { cursor: default; color: #b6b6b6; background-color: #f6f6f6; } .btn.btn--secondary-accent, .btn--secondary-accent.btn-secondary, input.btn--secondary-accent[type="submit"], .btn--secondary-accent.header-cart-btn, .shopify-payment-button .btn--secondary-accent.shopify-payment-button__button--unbranded { background-color: white; border: 2px solid #30422e; color: #30422e; } .btn.btn--secondary-accent:hover, .btn--secondary-accent.btn-secondary:hover, input.btn--secondary-accent[type="submit"]:hover, .btn--secondary-accent.header-cart-btn:hover, .shopify-payment-button .btn--secondary-accent.shopify-payment-button__button--unbranded:hover { background-color: white; border-color: #253324; color: #253324; } .btn.btn--secondary-accent:active, .btn--secondary-accent.btn-secondary:active, input.btn--secondary-accent[type="submit"]:active, .btn--secondary-accent.header-cart-btn:active, .shopify-payment-button .btn--secondary-accent.shopify-payment-button__button--unbranded:active { background-color: white; border: 2px solid #1a2419; color: #1a2419; } .btn.btn--secondary-accent[disabled], .btn--secondary-accent[disabled].btn-secondary, input.btn--secondary-accent[disabled][type="submit"], .btn--secondary-accent[disabled].header-cart-btn, .shopify-payment-button .btn--secondary-accent[disabled].shopify-payment-button__button--unbranded, .btn.btn--secondary-accent.disabled, .btn--secondary-accent.disabled.btn-secondary, input.btn--secondary-accent.disabled[type="submit"], .btn--secondary-accent.disabled.header-cart-btn, .shopify-payment-button .btn--secondary-accent.disabled.shopify-payment-button__button--unbranded { border-color: #f6f6f6; color: #b6b6b6; background-color: #f6f6f6; } .btn.btn--secondary-accent.btn--full, .btn--secondary-accent.btn--full.btn-secondary, input.btn--secondary-accent.btn--full[type="submit"], .btn--secondary-accent.btn--full.header-cart-btn, .shopify-payment-button .btn--secondary-accent.btn--full.shopify-payment-button__button--unbranded, .payment-buttons--large .shopify-payment-button .btn--secondary-accent.shopify-payment-button__button--unbranded { margin-bottom: 0px; } .btn-secondary, input.btn-secondary { background-color: gainsboro; color: #585858; } .btn-secondary:hover, input.btn-secondary:hover { background-color: #cfcfcf; color: #585858; } .btn-secondary:active, input.btn-secondary:active { background-color: #c3c3c3; color: #585858; } /*================ Force an input/button to look like a text link ================*/ .text-link { display: inline; border: 0 none; background: none; padding: 0; margin: 0; } /*============================================================================ #Lists ==============================================================================*/ ul, ol { margin: 0 0 1em; padding: 0; } ul { list-style: none outside; } ol { list-style: decimal; } ol, ul.square, .rte ul ul ul, ul.disc, .rte ul { margin-left: 20px; } ul.square, .rte ul ul ul { list-style: square outside; } ul.disc, .rte ul { list-style: disc outside; } ol.alpha { list-style: lower-alpha outside; } ul ul, ul ol, ol ol, ol ul { margin: 4px 0 5px 20px; } li { margin-bottom: 0.25em; } .inline-list li { display: inline-block; margin-bottom: 0; } /*============================================================================ #Tables ==============================================================================*/ table { border-collapse: collapse; border-spacing: 0; min-width: 50%; } table.full { width: 100%; margin-bottom: 15px; } th { font-weight: 600; } th, td { text-align: left; padding: 15px; border: 1px solid #d3d3d5; } .media, .media-flex { overflow: hidden; _overflow: visible; zoom: 1; } .media-img { float: left; margin-right: 30px; } .media-img-right { float: right; margin-left: 30px; } .media-img img, .media-img-right img { display: block; } /*============================================================================ #Images and Iframes ==============================================================================*/ img { border: 0 none; } svg:not(:root) { overflow: hidden; } img.auto, .grid-item img, .grid-item iframe { max-width: 100%; } .video-wrapper { position: relative; overflow: hidden; max-width: 100%; padding-bottom: 56.25%; height: 0; height: auto; } .video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .product-video-wrap { width: 100%; display: inline-block; padding: 0; margin: 0 0 30px; } /*============================================================================ #Forms ==============================================================================*/ form { margin-bottom: 30px; } @media screen and (max-width: 480px) { form { margin-bottom: 15px; } } button, input[type="text"], input[type="search"], input[type="password"], input[type="email"], input[type="file"], input[type="number"], input[type="tel"], input[type="submit"], textarea { -webkit-appearance: none; -moz-appearance: none; } input, textarea, select, fieldset { border-radius: 0; max-width: 100%; } input.input-full, textarea.input-full, select.input-full, fieldset.input-full { width: 100%; } .addToCartForm input, .addToCartForm textarea, .addToCartForm select, .addToCartForm fieldset { min-height: 44px; } input, select, textarea { font-size: 1em; padding: 8px 10px; line-height: 1.42; background: transparent; } .cart-row input[type="submit"], .cart-row button[type="submit"] { margin-right: 5px; /*font-family: Montserrat,sans-serif;*/ } @media screen and (max-width: 320px) { .cart-row input[type="submit"], .cart-row button[type="submit"] { font-size: 14px; } } fieldset { border: 1px solid #d3d3d5; padding: 15px 0; } legend { border: 0; padding: 0; } optgroup { font-weight: 600; } input { display: inline-block; width: auto; } button, input[type="submit"] { cursor: pointer; } /*================ Input width and border ================*/ input[type="text"], input[type="search"], input[type="password"], input[type="email"], input[type="file"], input[type="number"], input[type="tel"], textarea, select { border: 1px solid #000; background-color: white; width: 100%; max-width: 100%; display: block; margin: 0 0 20px; } input[type="text"]:focus, input[type="search"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="file"]:focus, input[type="number"]:focus, input[type="tel"]:focus, textarea:focus, select:focus { border: none; } input[type="text"][disabled], input[type="text"].disabled, input[type="search"][disabled], input[type="search"].disabled, input[type="password"][disabled], input[type="password"].disabled, input[type="email"][disabled], input[type="email"].disabled, input[type="file"][disabled], input[type="file"].disabled, input[type="number"][disabled], input[type="number"].disabled, input[type="tel"][disabled], input[type="tel"].disabled, textarea[disabled], textarea.disabled, select[disabled], select.disabled { cursor: default; background-color: #f6f6f6; border-color: #b6b6b6; } @media screen and (min-width: 480px) { input[type="number"] { width: 50%; } } textarea { min-height: 100px; } input[type="checkbox"], input[type="radio"] { display: inline; margin: 0; padding: 0; } select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-position: right center; /* image: url('//cdn.shopify.com/s/files/1/0020/3184/5451/t/22/assets/arrow-down.svg?v=136089407770247367461572356149');*/ background-repeat: no-repeat; background-position: right 10px center; background-color: white; padding-right: 28px; text-indent: 0.01px; text-overflow: ''; cursor: pointer; /*================ Hide the svg arrow in IE9 and below ================*/ } .ie9 select, .lt-ie9 select { padding-right: 10px; background-image: none; } select::-ms-expand { display: none; } /*================ Form labels ================*/ label, legend { display: block; margin-bottom: 6px; font-size: 14px; } label.inline, legend.inline { display: inline; } .form-horizontal label.hidden-label, label.hidden-label, .form-horizontal legend.hidden-label, legend.hidden-label { height: 0; width: 0; margin-bottom: 0; overflow: hidden; } .ie9 .form-horizontal label.hidden-label, .lt-ie9 .form-horizontal label.hidden-label, .ie9 label.hidden-label, .lt-ie9 label.hidden-label, .ie9 .form-horizontal legend.hidden-label, .lt-ie9 .form-horizontal legend.hidden-label, .ie9 legend.hidden-label, .lt-ie9 legend.hidden-label { height: auto; margin-bottom: 2px; overflow: visible; } /*================ We don't want the same label treatment for checkboxes/radios ================*/ input[type="checkbox"] + label, input[type="radio"] + label { font-weight: 300; } label[for] { cursor: pointer; } .label-hint { color: #999; } /*================ Horizontal Form ================*/ form.form-horizontal, .form-horizontal { margin-bottom: 0; display: inline-block; } form.form-horizontal input[type="text"], form.form-horizontal input[type="search"], form.form-horizontal input[type="password"], form.form-horizontal input[type="email"], form.form-horizontal input[type="file"], form.form-horizontal input[type="number"], form.form-horizontal input[type="tel"], form.form-horizontal textarea, form.form-horizontal select, form.form-horizontal label, .form-horizontal input[type="text"], .form-horizontal input[type="search"], .form-horizontal input[type="password"], .form-horizontal input[type="email"], .form-horizontal input[type="file"], .form-horizontal input[type="number"], .form-horizontal input[type="tel"], .form-horizontal textarea, .form-horizontal select, .form-horizontal label { display: inline-block; margin-bottom: 0; width: auto; } /*================ Error styles ================*/ input[type="text"].error, input[type="search"].error, input[type="password"].error, input[type="email"].error, input[type="file"].error, input[type="number"].error, input[type="tel"].error, textarea.error { border-color: #dc0000; background-color: #fff6f6; color: #dc0000; } label.error { color: #dc0000; } /*================ Input Group ================*/ .input-group { position: relative; display: table; border-collapse: separate; } .input-group .input-group-field:first-child, .input-group .input-group-btn:first-child, .input-group .input-group-btn:first-child > .btn, .input-group .input-group-btn:first-child > .btn-secondary, .input-group .input-group-btn:first-child > input[type="submit"], .input-group .input-group-btn:first-child > .header-cart-btn, .input-group .shopify-payment-button .input-group-btn:first-child > .shopify-payment-button__button--unbranded, .shopify-payment-button .input-group .input-group-btn:first-child > .shopify-payment-button__button--unbranded, .input-group input[type="hidden"]:first-child + .input-group-field, .input-group input[type="hidden"]:first-child + .input-group-btn > .btn, .input-group input[type="hidden"]:first-child + .input-group-btn > .btn-secondary, .input-group input[type="hidden"]:first-child + .input-group-btn > input[type="submit"], .input-group input[type="hidden"]:first-child + .input-group-btn > .header-cart-btn, .input-group .shopify-payment-button input[type="hidden"]:first-child + .input-group-btn > .shopify-payment-button__button--unbranded, .shopify-payment-button .input-group input[type="hidden"]:first-child + .input-group-btn > .shopify-payment-button__button--unbranded { border-radius: 0 0 0 0; border-right: none; } .input-group .input-group-field:last-child, .input-group .input-group-btn:last-child > .btn, .input-group .input-group-btn:last-child > .btn-secondary, .input-group .input-group-btn:last-child > input[type="submit"], .input-group .input-group-btn:last-child > .header-cart-btn, .input-group .shopify-payment-button .input-group-btn:last-child > .shopify-payment-button__button--unbranded, .shopify-payment-button .input-group .input-group-btn:last-child > .shopify-payment-button__button--unbranded { border-radius: 0 0 0 0; } .input-group input::-moz-focus-inner { border: 0; padding: 0; margin-top: -1px; margin-bottom: -1px; } .input-group-field, .input-group-btn { display: table-cell; vertical-align: middle; margin: 0; } .input-group .btn, .input-group .btn-secondary, .input-group input[type="submit"], .input-group .header-cart-btn, .input-group .shopify-payment-button .shopify-payment-button__button--unbranded, .shopify-payment-button .input-group .shopify-payment-button__button--unbranded, .input-group .input-group-field { height: 42px; } .input-group .input-group-field { width: 100%; margin-bottom: 0; border-color: #9f9fa3; border-right: none; } .input-group-btn { position: relative; white-space: nowrap; width: 1%; padding: 0; } .form-spacer { margin: 0 15px; } /*============================================================================ #Icons ==============================================================================*/ .icon-fallback-text .icon { display: none; } .supports-fontface .icon-fallback-text .icon { display: inline-block; } /*============================================================================ A generic way to visually hide content while remaining accessible to screen readers (h5bp.com) ==============================================================================*/ .supports-fontface .icon-fallback-text .fallback-text { clip: rect(0 0 0 0); overflow: hidden; position: absolute; height: 1px; width: 1px; } .icon:before { display: none; } .supports-fontface .icon:before { display: inline; font-family: "icons"; text-decoration: none; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /*================ Icon mapping ================*/ .icon-arrow-down:before { content: "\34"; } .icon-arrow-left:before { content: "\e900"; } .icon-arrow-right:before { content: "\e901"; } .icon-cart:before { content: "\5b"; } .icon-collection-view-grid:before { content: "\e902"; } .icon-collection-view-list:before { content: "\e903"; } .icon-facebook:before { content: "\66"; } .icon-fancy:before { content: "\46"; } .icon-google_plus:before { content: "\e90a"; } .icon-hamburger:before { content: "\e904"; } .icon-instagram:before { content: "\e908"; } .icon-pin:before { content: "\e90e"; } .icon-pinterest:before { content: "\70"; } .icon-rss:before { content: "\72"; } .icon-search:before { content: "\73"; } .icon-snapchat:before { content: "\e90d"; } .icon-tumblr:before { content: "\74"; } .icon-twitter:before { content: "\54"; } .icon-vimeo:before { content: "\76"; } .icon-x:before { content: "\78"; } .icon-youtube:before { content: "\79"; } /*================ Button icons ================*/ .icon-cart { line-height: 0; } .icon-cart:before { position: relative; top: -2px; font-size: 19px; line-height: 12px; vertical-align: middle; margin-right: 6px; } .payment-icons { cursor: default; margin: 0; } .payment-icons li { margin: 0 0 7.5px 6px; cursor: default; /*font-size:40px;*/ color: #000; line-height: normal; } @media screen and (max-width: 768px) { .payment-icons li { margin: 0 7.5px 7.5px 0; } } @media screen and (max-width: 769px) { .payment-icons li { font-size: 36px; } } .payment-icons li img { width: 50px; } .payment-icons .icon { width: 38px; height: 24px; } .social-icons li { margin: 30px 36px 10px 0; vertical-align: middle; } @media screen and (max-width: 668px) { .social-icons li { margin-right: 15px; margin-left: 15px; } } @media screen and (min-width: 481px) { .social-icons li { margin-left: 0; } } .social-icons li .icon, .social-icons li .fa, .social-icons li .fab { font-size: 20px; line-height: 20px; } @media screen and (max-width: 768px) { .social-icons li .icon, .social-icons li .fa, .social-icons li .fab { font-size: 20px; line-height: 20px; } } .social-icons li .icon .fa, .social-icons li .fa .fa, .social-icons li .fab .fa { font-family: 'FontAwesome' !important; } .social-icons li .icon .fab, .social-icons li .fa .fab, .social-icons li .fab .fab { font-family: 'Font Awesome 5 Brands' !important; } .social-icons li a { color: #ffffff; -webkit-transition: color 0.2s ease-out; -moz-transition: color 0.2s ease-out; -ms-transition: color 0.2s ease-out; -o-transition: color 0.2s ease-out; transition: color 0.2s ease-out; } .social-icons li a:hover { color: #d9d9d9; -webkit-transition: color 0.05s ease-in; -moz-transition: color 0.05s ease-in; -ms-transition: color 0.05s ease-in; -o-transition: color 0.05s ease-in; transition: color 0.05s ease-in; } .social-icons li a.social-icon-facebook { color: #fff; -webkit-transition: color 0.2s ease-out; -moz-transition: color 0.2s ease-out; -ms-transition: color 0.2s ease-out; -o-transition: color 0.2s ease-out; transition: color 0.2s ease-out; } .social-icons li a.social-icon-facebook:hover { color: #d9d9d9; -webkit-transition: color 0.05s ease-in; -moz-transition: color 0.05s ease-in; -ms-transition: color 0.05s ease-in; -o-transition: color 0.05s ease-in; transition: color 0.05s ease-in; } .social-icons li a.social-icon-twitter { color: #fff; -webkit-transition: color 0.2s ease-out; -moz-transition: color 0.2s ease-out; -ms-transition: color 0.2s ease-out; -o-transition: color 0.2s ease-out; transition: color 0.2s ease-out; } .social-icons li a.social-icon-twitter:hover { color: #d9d9d9; -webkit-transition: color 0.05s ease-in; -moz-transition: color 0.05s ease-in; -ms-transition: color 0.05s ease-in; -o-transition: color 0.05s ease-in; transition: color 0.05s ease-in; } .social-icons li a.social-icon-instagram { color: #fff; -webkit-transition: color 0.2s ease-out; -moz-transition: color 0.2s ease-out; -ms-transition: color 0.2s ease-out; -o-transition: color 0.2s ease-out; transition: color 0.2s ease-out; } .social-icons li a.social-icon-instagram:hover { color: #d9d9d9; -webkit-transition: color 0.05s ease-in; -moz-transition: color 0.05s ease-in; -ms-transition: color 0.05s ease-in; -o-transition: color 0.05s ease-in; transition: color 0.05s ease-in; } .social-icons li a.social-icon-youtube { color: #fff; -webkit-transition: color 0.2s ease-out; -moz-transition: color 0.2s ease-out; -ms-transition: color 0.2s ease-out; -o-transition: color 0.2s ease-out; transition: color 0.2s ease-out; } .social-icons li a.social-icon-youtube:hover { color: #d9d9d9; -webkit-transition: color 0.05s ease-in; -moz-transition: color 0.05s ease-in; -ms-transition: color 0.05s ease-in; -o-transition: color 0.05s ease-in; transition: color 0.05s ease-in; } ul.social-icons { margin-bottom: 0; } /*================ Social share buttons ================*/ .social-sharing { font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; padding-top: 5px; display: flex; align-items: center; justify-content: flex-end; /*================ Large Buttons ================*/ } .social-sharing a { color: #fff; /*border-radius:2px;*/ /*height: $shareButtonHeight; line-height: $shareButtonHeight;*/ text-decoration: none; font-weight: 300; background: transparent; display: inline-flex; align-items: center; padding: 2px 12px; /*border-radius: 5px;*/ margin: 0; margin-right: 10px; } .social-sharing a.share-facebook { background: #3b5998 !important; } .social-sharing a.share-twitter { background: #1da1f2 !important; } .social-sharing a.share-pinterest { background: #bd081c !important; } .social-sharing a:hover { color: #fff; background: transparent; } .social-sharing a svg { width: 15px !important; margin-right: 5px; } .social-sharing a svg path { fill: #fff; } .social-sharing span { display: inline-block; vertical-align: top; /*height: $shareButtonHeight; line-height: $shareButtonHeight;*/ font-size: 20px; color: #000; } .social-sharing .icon { padding: 0 5px 0 10px; } .social-sharing .icon:before { line-height: 22px; } .social-sharing.is-large a { height: 44px; line-height: 44px; } .social-sharing.is-large a span { height: 44px; line-height: 44px; font-size: 18px; } .social-sharing.is-large a .icon { padding: 0 10px 0 18px; } .social-sharing.is-large a .icon:before { line-height: 44px; } .share-title { font-weight: 600; font-size: 12px; padding-right: 10px; } .is-large .share-title { padding-right: 16px; } .share-facebook { background-color: #3b5998; } .share-facebook:hover { background-color: #2d4373; } .share-twitter { background-color: #00aced; } .share-twitter:hover { background-color: #0087ba; } .share-pinterest { background-color: #cb2027; } .share-pinterest:hover { background-color: #9f191f; } .share-fancy { background-color: #4999dc; } .share-fancy:hover { background-color: #2780cb; } .share-google { background-color: #dd4b39; } .share-google:hover { background-color: #c23321; } /*================ Clean Buttons ================*/ .social-sharing.is-clean a { background-color: #fff; border: 1px solid #ececec; color: #333; height: 30px; line-height: 30px; } .social-sharing.is-clean a span { height: 30px; line-height: 30px; font-size: 13px; } .social-sharing.is-clean a:hover { background-color: #f9f9f9; } .social-sharing.is-clean a .share-title { font-weight: 300; } .social-sharing.is-clean .icon-facebook { color: #3b5998; } .social-sharing.is-clean .icon-twitter { color: #00aced; } .social-sharing.is-clean .icon-pinterest { color: #cb2027; } /*============================================================================ #Pagination ==============================================================================*/ .pagination-border-top { border-top: 2px solid #eaf2f3; } /*================ Custom Pagination ================*/ .pagination-custom { display: inline-block; padding-left: 0; margin: 15px 0; } .pagination-custom > li { display: inline; } .pagination-custom > li > a, .pagination-custom > li > span { position: relative; padding: 5px 10px; /*margin-left: -1px; line-height: 1.42;*/ text-decoration: none; font-weight: 600; color: #333; } @media screen and (max-width: 480px) { .pagination-custom > li > a, .pagination-custom > li > span { padding: 5px 7px; } } .pagination-custom > .prev > a, .pagination-custom > .next > a, .pagination-custom > .prev > span, .pagination-custom > .next > span { font-weight: 400; } .pagination-custom > li:first-child > a, .pagination-custom > li:first-child > span { margin-left: 0; } .pagination-custom > .active > a, .pagination-custom > .active > span, .pagination-custom > .active > a:hover, .pagination-custom > .active > span:hover, .pagination-custom > .active > a:focus, .pagination-custom > .active > span:focus { z-index: 2; cursor: default; color: #585858; } .pagination-custom > .active > span { border: 1px solid #338491; color: #338491; } .pagination-custom > .disabled > span, .pagination-custom > .disabled > a, .pagination-custom > .disabled > a:hover, .pagination-custom > .disabled > a:focus { color: #999999; cursor: not-allowed; } .pagination-custom-lg > li > a, .pagination-custom-lg > li > span { padding: 10px 16px; font-size: 18px; } .pagination-custom-sm > li > a, .pagination-custom-sm > li > span { padding: 5px 10px; font-size: 0.75em; } /*============================================================================ #Site Header ==============================================================================*/ .site-header { padding: 15px 0; background-color: #fff; color: #000; padding-bottom: 0 !important; } @media screen and (min-width: 769px) { .site-header { padding: 0 0 6px; } } .site-header select.currency-picker { margin: 0 !important; } @media screen and (max-width: 768px) { .site-header.site-header--hidden { display: none; } } .site-header .site-header--text-links a { color: #000; } .site-header .site-header--text-links a:hover { opacity: 0.7; } @media screen and (min-width: 769px) { .site-header .grid, .site-header .grid--rev, .site-header .grid--full { display: table; table-layout: fixed; width: 100%; } .site-header .grid > .grid-item, .site-header .grid--rev > .grid-item, .site-header .grid--full > .grid-item { float: none; display: table-cell; vertical-align: middle; } } .header-logo { margin: 0 auto; } @media screen and (min-width: 769px) { .header-logo { margin: 0; } } @media screen and (max-width: 768px) { .header-logo { text-align: left; } .header-logo .lazyload__image-wrapper { margin: 0; } } .header-logo a, .header-logo a:hover, .header-logo a:focus { text-decoration: none; color: white; } .header-logo a, .header-logo img { /*display: block;*/ } .header-logo img { margin: 0 auto; } @media screen and (min-width: 769px) { .header-logo img { /*float: left;*/ } } .site-header--text-links { display: inline-block; font-size: 0.85em; margin-bottom: 0; } .site-header--text-links a { /*font-weight: $baseFontBoldWeight;*/ font-weight: 500; } .site-header--meta-links { display: inline-block; margin-right: 15px; } @media screen and (min-width: 769px) { .site-header--meta-links { margin-right: 10px; } } @media screen and (max-width: 980px) { .site-header--meta-links { margin-right: 6px; color: #ccc; font-weight: 600; } } .cart-pop { position: relative; margin-right: 0; border: 1px solid transparent; } .cart-pop:hover a.header-cart { border: 1px solid #c3c3c3; border-bottom: 1px solid #fff; opacity: 1 !important; } .cart-pop:hover a.header-cart:after { content: ""; position: absolute; border-bottom: 1px solid #fff; height: 1px; z-index: 99999; width: 97%; left: 1px; bottom: -11px; } .cart-pop a { padding: 10px 5px 15px; border: 1px solid transparent; } @media screen and (max-width: 1026px) { .cart-pop a { padding: 10px 3px 15px; } .cart-pop a .cart-total { display: none; } } @media screen and (max-width: 980px) { .cart-pop a { padding: 10px 0px 15px; } } .cart-pop #cartform { display: block; visibility: hidden; opacity: 0; top: 10px; position: relative; z-index: 100; margin: 0; } .cart-pop:hover #cartform { opacity: 1; -ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); transition: all 0.8s cubic-bezier(0.075, 0.82, 0.165, 1), opacity 0.4s cubic-bezier(0.075, 0.82, 0.165, 1); visibility: visible; } .cart-pop #cart-item { position: absolute; right: 0px; background: #fff; width: 300px; border: 1px solid #ccc; padding: 10px 0; text-align: left; } .cart-pop #cart-item h3, .cart-pop #cart-item .h3 { font-size: 16px; /*font-family: Montserrat,sans-serif; */ color: #333; margin: 0; padding: 0 10px; text-transform: none; } .cart-pop #cart-item .empty-cart { text-align: center; margin: 0; } .cart-pop #cart-item .quick-cart-overlay { width: 100%; max-height: 350px; overflow: hidden; overflow-y: auto; } .cart-pop #cart-item .quick-cart-item { width: 100%; display: inline-block; padding: 10px 10px 20px; border-bottom: 1px solid #c3c3c3; } .cart-pop #cart-item .quick-cart-item .quick-cart-image { width: 75px; float: left; } .cart-pop #cart-item .quick-cart-item .quick-cart-details { width: 180px; float: right; text-align: left; } .cart-pop #cart-item .quick-cart-item .quick-cart-details p { margin: 0; } .cart-pop #cart-item .quick-cart-item .quick-cart-details .price { text-align: right; color: #30422e; font-weight: 600; width: 100%; display: inline-block; } .cart-pop #cart-item .quick-cart-item .quick-cart-details a { border: 0; padding: 0; color: #30422e; } .cart-pop #cart-item .quick-cart-foot { width: 100%; display: inline-block; } .cart-pop #cart-item .quick-cart-foot .item_count_total, .cart-pop #cart-item .quick-cart-foot .subtotal { width: 100%; display: inline-block; padding: 5px 10px; font-size: 12px; color: #898989; } .cart-pop #cart-item .quick-cart-foot .item_count_total span, .cart-pop #cart-item .quick-cart-foot .subtotal span { color: #30422e; float: right; font-weight: 600; } .cart-pop #cart-item .quick-cart-foot .subtotal { border-top: 1px solid #c3c3c3; font-size: 18px; color: #30422e; text-align: right; font-weight: 600; } .cart-pop #cart-item .quick-cart-foot .subtotal span { color: #898989; float: left; font-size: 16px; text-align: left; font-weight: 400; line-height: normal; } .cart-pop #cart-item .quick-cart-foot .subtotal span em { width: 100%; display: inline-block; font-size: 10px; font-weight: 400; font-size: normal; } .cart-pop #cart-item .quick-cart-foot .subtotal .subtotal_price { font-weight: 600; float: right; color: #30422e; } .cart-pop #cart-item .quick-cart-foot .subtotal b.original-cart-subtotal span { color: #30422e; float: right; font-weight: 600; } .cart-pop #cart-item .quick-cart-foot input[type="submit"].quick-checkout, .cart-pop #cart-item .quick-cart-foot .cart_popup { font-family: "Baskerville No 2",serif; width: 94%; display: inline-block; padding: 5px 10px; font-size: 18px; font-weight: 500; margin: 0 3%; background: #30422e; /*font-family: Montserrat,sans-serif; */ line-height: 1.6; } .cart-pop #cart-item .quick-cart-foot input[type="submit"].quick-checkout:hover, .cart-pop #cart-item .quick-cart-foot .cart_popup:hover { opacity: 0.7; } .cart-pop #cart-item .quick-cart-foot .cart_popup { margin: 10px 3% 5px; color: #fff; text-align: center; } .cart-pop #cart-item .quick-cart-foot .cart_popup:hover:after { display: none; } .template-cart .cart-pop { border: 0; } .template-cart .cart-pop:hover { border: 0; } .template-cart .cart-pop:hover a.header-cart { border: 0; } .template-cart .cart-pop:hover a.header-cart:after { display: none; } .site-header--spacer { padding: 0 5px; } .header-cart-btn { position: relative; line-height: 26px; padding-bottom: 10px; border: 0 none; margin-left: 15px; vertical-align: top; background-color: gainsboro; color: white; } @media screen and (max-width: 768px) { .header-cart-btn { display: none; } } .header-cart-btn:hover, .header-cart-btn:focus { color: white; background-color: #cfcfcf; } .cart-count { display: inline-block; text-align: center; background-color: #fff; color: #30422e; font-weight: 600; font-size: 11px; min-width: 16px; height: 16px; line-height: 16px; border-radius: 20px; padding: 0 2px; } .cart-count.hidden-count { display: none; } .cart-badge--desktop { position: absolute; top: -6px; left: 11px; } .cart-badge--mobile { position: absolute; top: 5px; left: 20px; } .search-bar { color: #000; position: relative; max-width: 60%; width: 100%; margin: 0 auto 30px; background-color: #e1e1e1; /*@include at-query ($min, $medium) { padding-left: $gutter * 3; } */ } .search-bar .icon-search { font-size: 18px; } @media screen and (max-width: 768px) { .search-bar { display: block; max-width: 100%; margin-bottom: 15px; } } .search-bar input[type="text"], .search-bar input[type="search"] { width: 100%; margin-bottom: 0; padding: 10px 45px 10px 10px; font-family: "Baskerville No 2", serif; font-weight: 400; font-style: normal; font-size: 16px; line-height: normal; } .search-bar input:-ms-input-placeholder { line-height: normal; display: inline-block; } .search-bar input[type="submit"], .search-bar .search-bar--submit { position: absolute; top: 2px; bottom: 0; right: 0; width: 55px; margin: 0; border: 0 none; background: none; text-align: center; cursor: pointer; } .site-header .search-bar input[type="submit"], .site-header .search-bar .search-bar--submit { /*color: color-control($headerButtonAndSearch);*/ color: #000; } .search-bar input[type="submit"] { text-indent: -9999px; } .site-header .search-bar { display: none; margin-bottom: 0; } @media screen and (min-width: 769px) { .site-header .search-bar { display: inline-block; } } .site-header .search-bar input[type="text"], .site-header .search-bar input[type="search"] { height: 44px; border: 0 none; background-color: transparent; /*color: color-control($headerButtonAndSearch);*/ color: #000; -webkit-transition: background-color 0.2s ease-out; -moz-transition: background-color 0.2s ease-out; -ms-transition: background-color 0.2s ease-out; -o-transition: background-color 0.2s ease-out; transition: background-color 0.2s ease-out; } .site-header .search-bar input[type="text"]:hover, .site-header .search-bar input[type="text"]:focus, .site-header .search-bar input[type="search"]:hover, .site-header .search-bar input[type="search"]:focus { /*background-color: darken($headerButtonAndSearch, 5%);*/ -webkit-transition: background-color 0.05s ease-in; -moz-transition: background-color 0.05s ease-in; -ms-transition: background-color 0.05s ease-in; -o-transition: background-color 0.05s ease-in; transition: background-color 0.05s ease-in; } .site-header .search-bar input[type="text"]:focus, .site-header .search-bar input[type="search"]:focus { outline: 0; } .site-header input::-webkit-input-placeholder { color: white; } .site-header input::-moz-placeholder { color: white; } /*============================================================================ #Site Nav and Dropdowns ==============================================================================*/ .sticky { position: fixed; top: 0 !important; width: 100%; z-index: 999999; height: 52px; transition: all 0.5s; /*border-bottom: 4px solid #30422e;*/ } .sticky .wrapper { transition: all 0.5s; } /*.sticky + .main-usp-wrapper{ padding-top: 100px; transition: all 0.5s; }*/ /*header.site-header.make_sticky { position: fixed; z-index: 999999; width: 100%; top: 0; border-bottom: 4px solid #30422e;*/ /* top: -100%; */ /* top: 0; */ /* transition: .5s; */ /* .wrapper.middle-menu, li#moreMenu, li.search { display: none; } .topbar { display:none;} .nav-bar .flex-menu .sticky-logo { display: none; } .flex-menu .site-nav { width: 100%; display: flex; justify-content: center; align-items: center; padding-left: 90px; .nav-bar{ border-bottom: 4px solid #30422e;} li.new-arrivals { font-size: 20px; margin: 0; a { border-radius: 4px; letter-spacing: 1px; display: block; text-decoration: none; padding: 3px 15px; white-space: nowrap; position: relative; font-size: 20px; background: transparent !important; color: #767676 !important; } } } }*/ .nav-bar { /*top: 100%;*/ bottom: 0; left: 0; right: 0; background-color: white; } .nav-bar a, .nav-bar button { color: black; } .nav-bar a:active, .nav-bar a:focus, .nav-bar button:active, .nav-bar button:focus { opacity: 0.9; } .nav-bar .flex-menu { display: flex; align-items: center; } .nav-bar .flex-menu .sticky-logo { display: none; position: absolute; top: 15px; } .nav-bar .flex-menu .sticky-logo img { max-width: 75px; } .site-nav { display: none; margin: 0 auto; text-align: center; /*margin-left: -$gutter/2;*/ font-family: "Baskerville No 2", serif; /*font-family:'BebasNeueRegular';*/ font-weight: 400; font-style: normal; /*font-size:20px; */ cursor: default; position: relative; /* li.site-nav--active a:after{ content: ''; position: absolute; bottom:-7px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); border-bottom: 7px solid #000; border-left: 7px solid transparent; border-right: 7px solid transparent; @include at-query ($max, 768px) { display:none; } } */ } .site-nav li { font-size: 20px; margin: 0; display: block; } @media screen and (max-width: 980px) { .site-nav li { font-size: 18px; } } .site-nav > li { display: inline-block; } .site-nav > li:hover { background: #fff; color: #000; } .site-nav > li:hover a { color: #000 !important; } .site-nav a { display: block; text-decoration: none; padding: 3px 15px; white-space: nowrap; position: relative; } @media screen and (max-width: 1029.12px) { .site-nav a { padding: 5px 7px; } } .site-nav a:hover { background: #fff; color: #000; } .site-nav li.learn { margin-left: 30px; } .site-nav li.learn:hover { background: transparent; } @media screen and (max-width: 1026px) { .site-nav li.learn { margin-left: 30px; } } @media screen and (max-width: 980px) { .site-nav li.learn { margin-left: 20px; } } .site-nav li.learn a { border-radius: 0; color: #000; padding: 2px 7px; letter-spacing: 1px; font-size: 20px; } @media screen and (max-width: 1026px) { .site-nav li.learn a { font-size: 20px; } } .site-nav li.outlet:hover { background: transparent; } .site-nav li.outlet a { border-radius: 4px; color: #cc0000; padding: 2px 7px; letter-spacing: 1px; font-size: 20px; } .site-nav li.black-friday { margin-left: 30px; } .site-nav li.black-friday:hover { background: transparent; } @media screen and (max-width: 1026px) { .site-nav li.black-friday { margin-left: 30px; } } @media screen and (max-width: 980px) { .site-nav li.black-friday { margin-left: 20px; } } .site-nav li.black-friday a { background: #000; border-radius: 0; color: #fff; padding: 2px 7px; letter-spacing: 1px; font-size: 16px; } @media screen and (max-width: 1026px) { .site-nav li.black-friday a { font-size: 15px; } } .site-nav li.offers { margin: 0 10px; } .site-nav li.offers:hover { background: transparent; } .site-nav li.offers a { background: #cc0000; border-radius: 0; color: #fff; padding: 2px 7px; letter-spacing: 1px; font-size: 16px; } @media screen and (max-width: 1026px) { .site-nav li.offers a { font-size: 15px; } } .site-nav li.search:hover { background: transparent; } .site-nav .dropdown_menu { display: none; } .site-nav li:hover .dropdown_menu { display: inline-block; } .site-nav button { background: none; border: 0; font-size: 20px; text-transform: uppercase; } .site-nav .customer-navlink { color: black; background-color: white; border-bottom: 0; border-top: 1px solid white; margin-top: -1px; } .sticky_mobile_menu { position: fixed; top: 82px; z-index: 9999; width: 100%; } @media screen and (min-width: 769px) { .sticky_mobile_menu { display: none; } } .site-nav.mobile_sticky { display: block; top: 0; overflow: auto; white-space: nowrap; background: #fff; padding: 0 0 0 15px; border-top: 1px solid #ccc; line-height: normal; } .site-nav.mobile_sticky li { margin: 0; /*font-family: Montserrat,sans-serif; font-weight:500; text-transform:capitalize;*/ } .site-nav.mobile_sticky li a { color: #333; background: transparent; font-size: 12px; padding: 5px 16px; outline: none; /*text-transform:uppercase;*/ } @media screen and (max-width: 320px) { .site-nav.mobile_sticky li a { padding: 5px 8px; } } .dropdown_menu { position: absolute; left: 0; top: 100%; width: 100%; padding: 10px; text-align: left; background: #338491; max-height: 250px; overflow-x: auto; z-index: 100; } .dropdown_menu ul { width: 25%; display: inline-block; float: left; vertical-align: top; margin: 0; } .dropdown_menu ul li { font-size: 14px; /*font-family: Montserrat,sans-serif;*/ font-weight: 400; text-transform: capitalize; } .dropdown_menu ul li:first-child { font-weight: 700; } .dropdown_menu ul li a { padding: 5px; display: inline-block; color: #000; } .dropdown_menu ul li a:after { display: none; } .site-nav-right { float: right; margin: 0; font-size: 16px; } .site-nav-right li { display: inline-block; font-weight: 300; margin: 0; } .site-nav-right li a { padding: 14px 15px 15px; display: block; } .site-nav-right li a:hover { background: #fff; color: #000; } /*================ Small screen nav styles ================*/ @media screen and (max-width: 768px) { .show-nav .nav-bar { bottom: 0; top: 0; z-index: 99999; } .show-nav, .show-nav body { height: 100%; overflow: hidden; } } /*================ Medium-down screen nav styles ================*/ @media screen and (max-width: 768px) { .nav-bar { position: fixed; z-index: -2000; -webkit-transition: all 600ms cubic-bezier(0.47, 0.5, 0, 0.95); -moz-transition: all 600ms cubic-bezier(0.47, 0.5, 0, 0.95); -ms-transition: all 600ms cubic-bezier(0.47, 0.5, 0, 0.95); -o-transition: all 600ms cubic-bezier(0.47, 0.5, 0, 0.95); transition: all 600ms cubic-bezier(0.47, 0.5, 0, 0.95); } .show-nav .nav-bar { max-height: 100%; overflow-y: scroll; background: rgba(0, 0, 0, 0.9); -webkit-overflow-scrolling: touch; -webkit-transition: all 450ms cubic-bezier(0.47, 0, 0, 0.95); -moz-transition: all 450ms cubic-bezier(0.47, 0, 0, 0.95); -ms-transition: all 450ms cubic-bezier(0.47, 0, 0, 0.95); -o-transition: all 450ms cubic-bezier(0.47, 0, 0, 0.95); transition: all 450ms cubic-bezier(0.47, 0, 0, 0.95); } .nav-bar .wrapper { padding: 0; } .show-nav .nav-bar .wrapper { min-height: 100%; } .nav-bar .search-bar { margin: 0 15px 15px; /*width: auto;*/ } .nav-bar .search-bar input[type="search"]::-webkit-input-placeholder { color: #000; } .nav-bar .search-bar input::-webkit-input-placeholder { color: white; } .nav-bar .search-bar .search-bar--submit .icon { color: #000; } } /*================ Medium screen size only ================*/ @media screen and (min-width: 481px) and (max-width: 768px) { .show-nav .nav-bar { top: 0; bottom: 0; z-index: 99999; } } /*================ Large screen bar navigation ================*/ @media screen and (min-width: 769px) { .nav-bar .search-bar { /*width: 175px;*/ margin: 0; display: inline-block; padding: 0; max-width: 100%; } .nav-bar .search-bar input[type="search"] { height: 34px; } .nav-bar .search-bar .search-bar--submit { width: 40px; top: 0; } .site-nav { display: inline-block; } .mobile-nav { display: none; } } /*================ Dropdowns ================*/ .icon-arrow-down { position: relative; top: -2px; font-size: 12px; } .mobile-nav--dropdown .icon-arrow-down { -ms-transform: none; -webkit-transform: none; transform: none; } .mobile-nav--has-dropdown .icon-arrow-down { top: 0; } .site-nav--dropdown .icon-arrow-down { display: inline-block; line-height: 1; top: 0; -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } .site-nav--has-dropdown .site-nav-dropdown-item { display: none; position: absolute; top: 0; width: 50%; background: #97c1aa; z-index: 999999999; top: 52px; color: #fff; padding: 10px 15px; } .site-nav--has-dropdown .site-nav-dropdown-item.nav-dropdown-blocks-2 .nav-dropdown-block { width: 50%; margin-right: 20px; } .site-nav--has-dropdown .site-nav-dropdown-item.nav-dropdown-blocks-2 .nav-dropdown-block:last-child { margin: 0; } .site-nav--has-dropdown .site-nav-dropdown-item.nav-dropdown-blocks-2.nav-dropdown-block-Brands .nav-dropdown-block:first-child { width: 80%; } .site-nav--has-dropdown .site-nav-dropdown-item.nav-dropdown-blocks-2.nav-dropdown-block-Brands .nav-dropdown-block:first-child .nav-dropdown-block-nav { display: flex; flex-wrap: wrap; } .site-nav--has-dropdown .site-nav-dropdown-item.nav-dropdown-blocks-2.nav-dropdown-block-Brands .nav-dropdown-block:first-child .nav-dropdown-block-nav a { width: 33.333333%; } .site-nav--has-dropdown .site-nav-dropdown-item.nav-dropdown-blocks-2.nav-dropdown-block-Brands .nav-dropdown-block:last-child { width: 20%; } .site-nav--has-dropdown .site-nav-dropdown-item.nav-dropdown-blocks-3 .nav-dropdown-block { width: 33.333333%; margin-right: 20px; } .site-nav--has-dropdown .site-nav-dropdown-item.nav-dropdown-blocks-3 .nav-dropdown-block:last-child { margin: 0; } .site-nav--has-dropdown .site-nav-dropdown-item.nav-dropdown-blocks-4 .nav-dropdown-block { width: 25%; margin-right: 20px; } .site-nav--has-dropdown .site-nav-dropdown-item.nav-dropdown-blocks-4 .nav-dropdown-block:last-child { margin: 0; } .site-nav--has-dropdown .site-nav-dropdown-item .nav-dropdown-block { flex-grow: 1; text-align: left; } .site-nav--has-dropdown .site-nav-dropdown-item .nav-dropdown-block .nav-dropdown-block-title { display: block; width: 100%; padding: 0 0 5px !important; white-space: nowrap; border-bottom: 1px solid #fff; } .site-nav--has-dropdown .site-nav-dropdown-item .nav-dropdown-block .nav-dropdown-block-nav { padding: 10px 0; } .site-nav--has-dropdown .site-nav-dropdown-item .nav-dropdown-block .nav-dropdown-block-nav a.nav-dropdown-block-nav_link { font-family: "Avenir Next", sans-serif; color: #fff !important; padding: 0; font-size: 16px; } .site-nav--has-dropdown .site-nav-dropdown-item .nav-dropdown-block .nav-dropdown-block-nav a.nav-dropdown-block-nav_link:hover { background: transparent; color: rgba(255, 255, 255, 0.5) !important; } .site-nav--has-dropdown .site-nav-dropdown-item .nav-dropdown-block .nav-dropdown-block-nav a.nav-dropdown-block-nav_link.nav-dropdown-all-link { opacity: 1; color: #30422e !important; } .site-nav--has-dropdown .site-nav-dropdown-item .nav-dropdown-block .nav-dropdown-block-nav a.nav-dropdown-block-nav_link.nav-dropdown-all-link:hover { opacity: 1; } .site-nav--has-dropdown .site-nav-dropdown-item .nav-dropdown-block .nav-dropdown-block-nav a.nav-dropdown-block-nav_link.nav-dropdown-all-link.nav-dropdown-block-nav_link_active { opacity: 1; } .site-nav--has-dropdown .site-nav-dropdown-item .nav-dropdown-block a.nav-dropdown-block-nav_link_all { width: 100%; height: 100%; display: flex; background: #3a8f9b; align-items: center; justify-content: center; } .site-nav--has-dropdown:hover .site-nav-dropdown-item { display: flex; } .site-nav--dropdown, .site-nav--dropdown-grandchild { position: absolute; top: 100%; left: 0; border: 1px solid #d3d3d5; background-color: white; opacity: 0; pointer-events: none; z-index: 20; margin: 0; -webkit-transition: all 150ms; -moz-transition: all 150ms; -ms-transition: all 150ms; -o-transition: all 150ms; transition: all 150ms; } .site-nav--dropdown--more .site-nav--dropdown, .site-nav--dropdown--more .site-nav--dropdown-grandchild { top: -1px; left: auto; right: 100%; } .no-touch .site-nav--has-dropdown:hover > .site-nav--dropdown, .site-nav--has-dropdown.nav-hover > .site-nav--dropdown, .nav-focus + .site-nav--dropdown, .nav-hover > .site-nav--dropdown, .no-touch .site-nav--has-dropdown:hover > .site-nav--dropdown-grandchild, .site-nav--has-dropdown.nav-hover > .site-nav--dropdown-grandchild, .nav-focus + .site-nav--dropdown-grandchild, .nav-hover > .site-nav--dropdown-grandchild { opacity: 1; box-shadow: 0 5px 40px rgba(0, 0, 0, 0.05); pointer-events: auto; -webkit-transition: all 90ms; -moz-transition: all 90ms; -ms-transition: all 90ms; -o-transition: all 90ms; transition: all 90ms; } .site-nav--dropdown a, .site-nav--dropdown-grandchild a { color: #30422e; text-transform: none; padding: 10px 45px 10px 15px; } .site-nav--dropdown a:hover, .site-nav--dropdown a:active, .site-nav--dropdown a:focus, .site-nav--dropdown-grandchild a:hover, .site-nav--dropdown-grandchild a:active, .site-nav--dropdown-grandchild a:focus { color: #1a2419; } .site-nav--dropdown a:focus, .site-nav--dropdown-grandchild a:focus { background-color: #f2f2f2; } .site-nav--dropdown li { text-align: left; } .site-nav--dropdown li a { color: #666; } .site-nav--dropdown-grandchild { top: -1px; left: 100%; } .site-nav--dropdown-grandchild.nav-outside { left: -100%; } .mobile-nav { text-align: center; border-top: 1px solid white; margin: 0; font-family: "Baskerville No 2", serif; font-weight: 400; font-style: normal; padding: 12px 0; font-size: 20px; cursor: default; } .mobile-nav li { border-bottom: 0px solid #333; -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2); margin: 0; font-size: 16px; line-height: 20px; /* &.mobile-nav--has-dropdown-grandchild.nav-active { background-color: rgba(51,51,51,0.5); } */ } .mobile-nav li.mobile-nav--has-dropdown.nav-active { background-color: rgba(0, 0, 0, 0.5); } .mobile-nav li.mobile-nav--has-dropdown-grandchild { background-color: rgba(51, 51, 51, 0.5); } .mobile-nav a, .mobile-nav div { display: inline-block; color: #ccc; text-decoration: none; padding: 7.5px; white-space: nowrap; font-weight: 600; } .mobile-nav--active a { color: #fff; } .mobile-nav--dropdown, .mobile-nav--dropdown-grandchild { display: none; margin: 0; } .mobile-nav--dropdown > li, .mobile-nav--dropdown-grandchild > li { float: none; width: 100%; border: none; text-transform: none; border-top: 0px solid #333; } .nav-active > .mobile-nav--dropdown, .nav-active > .mobile-nav--dropdown-grandchild { display: block; background-color: #767676; } .static-nav { padding: 10px 0 0; display: block; } .static-nav li { /*font-family: Montserrat,sans-serif;*/ font-size: 12px; border-bottom: 0px; } .static-nav li a { display: inline-block; } .static-nav .BOLD-mc-picker { color: #fff; } .static-nav .BOLD-mc-picker > .currencyList > .option { color: #000; } .static-nav .BOLD-mc-picker-mnt[data-open="down"] > .BOLD-mc-picker > .currencyList { top: auto; bottom: 25px; } .age-note { background: #e4e4e4; width: 100%; display: inline-block; text-align: center; padding: 7px; font-weight: 400; color: #504f59; font-size: 12px; } .age-note b { font-weight: 600; } @media screen and (min-width: 769px) { .age-note { display: none; } } /*============================================================================ #Mobile Nav Bar ==============================================================================*/ #mobileNavBar { display: none; width: 100%; background-color: #fff; /*================ Small mobile nav bar ================*/ /*================ Medium-down mobile nav bar ================*/ } #mobileNavBar:after { content: ""; display: table; clear: both; } #mobileNavBar .display-table-cell { padding: 0 10px; } #mobileNavBar .logo { padding: 5px 0 0; } #mobileNavBar .logo img { width: 70px; display: block; } #mobileNavBar .cart-toggle { text-align: right; padding-right: 10px; padding-left: 10px; } @media screen and (max-width: 768px) { #mobileNavBar { position: fixed; top: 0; left: 0; right: 0; } } @media screen and (max-width: 768px) { #mobileNavBar { display: table; height: 51px; z-index: 9999; } #mobileNavBar .mobileNav-display-logo { position: absolute; left: 50%; transform: translateX(-50%); } .show-nav #mobileNavBar { position: fixed; left: 0; top: 30px; } } #mobileNavBar .search-bar--submit { font-size: 17px; padding: 5px; } @media screen and (max-width: 768px) { .show_promo #mobileNavBar { top: 35px; } } @media screen and (max-width: 480px) { .show_promo #mobileNavBar { top: 32px; } } .mobileNavBar-link { display: inline-block; padding: 10px 0; color: #000; cursor: pointer; border: 0; background: none; } .mobileNavBar-link:hover, .mobileNavBar-link:focus { color: #fff; } .mobileNavBar-link.menu-toggle .icon { font-size: 12px; margin-right: 10px; } .mobileNavBar-link.menu-toggle .lt-ie9 { background-image: none; padding-left: 0; } @media screen and (max-width: 768px) { :target { padding-top: 50px; } } /*============================================================================ #Site Footer ==============================================================================*/ .site-footer { background-color: #fff; /*padding: $gutter 0 10px;*/ padding: 50px 0 20px 0 !important; color: #000; border-top: solid 20px #98c1ab; } @media screen and (min-width: 769px) { .site-footer { padding: 10px 0 6px; } } .site-footer h3, .site-footer .h3 { margin: 0 0 15px 0; text-transform: capitalize; /*font-weight:600;*/ font-size: 30px; line-height: 30px; } .site-footer h3 .arrow-icon-down, .site-footer .h3 .arrow-icon-down { display: none; } @media screen and (max-width: 668px) { .site-footer h3, .site-footer .h3 { font-size: 22px; line-height: 24px; } } @media screen and (max-width: 480px) { .site-footer h3.footer-menu-title.newsletter .arrow-icon-down, .site-footer .footer-menu-title.newsletter.h3 .arrow-icon-down { display: none; } .site-footer h3.footer-menu-title.menu, .site-footer .footer-menu-title.menu.h3 { border: solid 1px #000; padding: 10px; margin: 0 0 10px; position: relative; display: flex; justify-content: space-between; align-items: center; } .site-footer h3.footer-menu-title.menu .arrow-icon-down, .site-footer .footer-menu-title.menu.h3 .arrow-icon-down { display: block; } .site-footer h3.footer-menu-title.menu svg, .site-footer .footer-menu-title.menu.h3 svg { width: 16px; transition: .3s; } .site-footer h3.footer-menu-title.open svg, .site-footer .footer-menu-title.open.h3 svg { transform: rotate(180deg); } } .site-footer a { color: #000; } .site-footer a:hover { color: #cccccc; } .site-footer .site-footer__newsletter-subtext a { color: #30422e; } .site-footer .site-footer__newsletter-subtext a:hover { color: #516f4d; } .template-collection .site-footer, .template-product .site-footer, .template-blog .site-footer { padding-top: 0; } .legal-links { margin-bottom: 0; } @media screen and (max-width: 768px) { .legal-links { margin-bottom: 15px; } } .legal-links + .legal-links { margin-bottom: 15px; } .legal-links p { padding: 0 15px 0 0; font-size: 11px; width: 100%; margin: 0 0 5px 0; } .template-blog header.filter-header { width: 100%; display: inline-block; background: #eaeaea; padding: 5px 30px; color: #30422e; float: left; } .template-blog header.filter-header span { font-family: "Baskerville No 2", serif; font-size: 20px; display: inline-block; margin-right: 10px; color: #000; } .template-blog .collection-row-section-bg { background: transparent; } .template-blog header.filter-header select { font-family: "Baskerville No 2", serif; font-size: 20px; display: inline-block; max-width: 220px; margin-bottom: 0; background: transparent; color: #000; border: none; outline: none; position: relative; } .template-blog .sort-by-panel select { max-width: 190px !important; } .template-blog .sort-by-panel label { font-family: "Baskerville No 2", serif; font-size: 20px; display: inline-block; color: #000; } /* .template-blog .sort-by-panel.right.gf-sort-wrap {max-width: 225px;} */ .blog-section .gf-sort-wrap:after { position: relative; content: ""; top: 5px; right: 25px; width: 0; height: 0; border: 6px solid transparent; border-color: #000 transparent transparent transparent; display: inline-block; } .template-blog header.filter-header select option { color: #000; } .currency-picker { background: #30422e; border: none; display: inline; width: auto; vertical-align: inherit; font-family: sans-serif; color: #000; padding-right: 5px; outline: none; } .currency-picker:focus { border: none; } #currency select { background: #fff; } #currency:after { display: inline-block; content: ""; margin-bottom: 1px; margin-right: 5px; -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); -moz-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; -webkit-transition: all .1s ease-in-out; transition: all .1s ease-in-out; border-style: solid; border-width: 4px 4px 0 4px; border-color: #ffffff transparent transparent transparent; } .sort-by-panel.right.gf-sort-wrap { max-width: 275px; width: 275px; } #bc-sf-filter-default-toolbar .bc-sf-filter-toolbar-item label { color: #fff; font-weight: 600; } .desktop-only { display: block; } .slides .mobile_only { display: none !important; } .cc-banner.cc-bottom { z-index: 1000000; } /*.wishlist_note{font-family: 'BebasNeueRegular';}*/ @media only screen and (max-width: 767px) { div#shopify-section-slideshow .wrapper { padding: 0; } div#shopify-section-slideshow .intermediate-section { padding-left: 15px; padding-right: 15px; } .desktop-only { display: none !important; } .slides .mobile_only { display: block !important; } .template-blog header.filter-header select { max-width: 190px; padding-right: 25px; } .blog-section .gf-sort-wrap:after { right: 30px; } .cart-form .cart-remove { left: 13px; } } @media only screen and (max-width: 667px) { .blog-section .filter-by { width: 60%; } } @media only screen and (max-width: 667px) { .blog-section .filter-by { width: 100%; } .blog-section .sort-by-panel.right { float: left !important; } } @media only screen and (max-width: 480px) { .footer-menu-title.newsletter { margin: 5px 0 10px; } } @media only screen and (max-width: 375px) { .template-blog header.filter-header select { max-width: 170px; padding-right: 20px; } .blog-section .gf-sort-wrap:after { right: 20px; } .template-blog header.filter-header { padding: 5px 20px; } .template-blog header.filter-header select { max-width: 140px; } } /*============================================================================ #Product Grid and List Views ==============================================================================*/ .row-negative-bottom { margin-bottom: -30px; } .sold-out .product-grid-image, .sold-out .product-list-image { position: relative; } .sold-out .product-grid-image img, .sold-out .product-list-image img { opacity: 0.7; } .badge { display: none; position: absolute; top: 50%; width: 100%; margin-top: -15px; text-align: left; z-index: 5; } .badge-label { display: inline-block; width: 100%; margin: 0 0 -1px; padding: 1px 12px; font-size: 12px; /*font-family: Montserrat,sans-serif;*/ font-weight: 600; color: #a62e26; background: #fff; text-transform: uppercase; border: 2px solid #bf524b; } @media screen and (max-width: 688px) { .badge-label { padding: 2px 5px; font-size: 11px; font-weight: 500; word-spacing: -1px; } } .flits-wishlist-ul .badge-label { padding: 1px 10px; } .flits-wishlist-ul .badge.show { position: relative; margin-top: 0; } .flits-wishlist-ul li { vertical-align: top !important; } .sold-out .badge--sold-out { display: block; bottom: 0; top: auto; } @media screen and (max-width: 768px) { .product-list-item .spr-badge { clear: both; } } @media screen and (min-width: 769px) { .product-list-item .grid, .product-list-item .grid--rev, .product-list-item .grid--full { display: table; table-layout: fixed; width: 100%; } .product-list-item .grid-item { display: table-cell; } } .product-grid-image { display: table; table-layout: fixed; width: 100%; max-width: 100%; min-width: 100%; margin: 0 auto 10px; border-bottom: 1px solid #d3d3d5; position: relative; } .product-grid-image img { display: block; margin: 0 auto; -webkit-transition: opacity 0.3s ease-out; -moz-transition: opacity 0.3s ease-out; -ms-transition: opacity 0.3s ease-out; -o-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .product-list-image { display: block; margin: 0 auto; } .product-grid-image--centered { display: table-cell; vertical-align: middle; width: 100%; padding-bottom: 15px; } a.product-grid-item, .product-grid-item { display: block; color: #585858; margin-bottom: 60px; } a.product-grid-item:hover img, .product-grid-item:hover img { opacity: 0.9; -webkit-transition: opacity 0.05s ease-out; -moz-transition: opacity 0.05s ease-out; -ms-transition: opacity 0.05s ease-out; -o-transition: opacity 0.05s ease-out; transition: opacity 0.05s ease-out; } @media screen and (max-width: 480px) { a.product-grid-item, .product-grid-item { margin-bottom: 15px; } } @media screen and (min-width: 769px) { a.product-grid-item, .product-grid-item { margin-bottom: 30px; } .template-list-collections a.product-grid-item, .template-list-collections .product-grid-item { margin-bottom: 0; } } .product-item--price:after { content: ""; display: table; clear: both; } .product-item--price .h1 { margin-bottom: 15px; color: #30422e; font-weight: 600; font-family: inherit; font-size: 1.25em; } .product-item--price .h1.product_sale { color: #bf524b; } .product-item--price .h1.product_sale .product_compare_price span { font-size: 13px; color: #333333; } .product-item--price span { line-height: 22px; } .product-item--price small { white-space: nowrap; } .template-collection .product-item--price .h1 { font-size: 1em; } .grid-link__sale_price { color: #bf524b; } /*display:block; */ .grid-link__sale_price-old { font-size: 13px; color: #333333; } .sale-tag { display: inline-block; text-transform: uppercase; font-size: 13px; font-weight: 600; padding: 0 8px; /*border-radius: 3px;*/ vertical-align: text-bottom; color: #30422e; /*border: 2px solid $colorPrimary;*/ } .sale-tag sup { display: none; } .sale-tag.large { font-size: 16px; padding: 0 12px; } .product-meta .sale-tag { position: relative; top: 2px; } .sale-tag.has-reviews { margin-bottom: 10px; } .featured-box { position: relative; display: block; /*padding: $gutter/2 0; border: 0px solid $colorBorder; margin-bottom: 5px;*/ background: #FFF; } .featured-box:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent; z-index: 5; } .featured-box img, .featured-box svg { -webkit-transition: opacity 0.1s ease-in-out; -moz-transition: opacity 0.1s ease-in-out; -ms-transition: opacity 0.1s ease-in-out; -o-transition: opacity 0.1s ease-in-out; transition: opacity 0.1s ease-in-out; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .featured-box:hover img { opacity: 0.9; } .featured-box--inner { display: block; margin: 0 auto; } .featured-box--image { display: block; vertical-align: middle; width: 100%; /*padding: 0 $gutter/2;*/ } .featured-box--image img, .featured-box--image svg { width: 100%; } .featured-box--image img.placeholder-svg, .featured-box--image svg.placeholder-svg { max-width: 100%; max-height: 100%; margin: 0 auto; } .featured-box--title { position: relative; display: block; color: #333; font-size: 14px; font-weight: 600; padding-top: 15px; line-height: 1.3em; z-index: 10; } /*============================================================================ #Collection Filters ==============================================================================*/ @media screen and (max-width: 768px) { .collection-filters { display: none; } } @media screen and (min-width: 769px) { .toggle-filters { display: none; } } .advanced-filters { margin-bottom: 30px; } .advanced-filters a { display: block; position: relative; padding-left: 20px; } .advanced-filters a:before, .advanced-filters a:after { content: ''; display: block; position: absolute; } .advanced-filters a:before { top: 6px; left: 0; width: 12px; height: 12px; background-color: white; border: 1px solid #d3d3d5; } .advanced-filters a:after { top: 9px; left: 3px; width: 6px; height: 6px; background-color: transparent; } .advanced-filters a:hover:after { background-color: #d3d3d5; } .advanced-filter.active-filter a:after { background-color: #000; } .advanced-filter.active-filter a:hover:after { content: '\78'; top: 6px; left: 0; width: 12px; height: 12px; background-color: #000; font-size: 8px; text-align: center; color: #fff; font-family: "icons"; line-height: 12px; speak: none; } /*============================================================================ #Breadcrumbs ==============================================================================*/ .breadcrumb { font-size: 13px; border-bottom: 1px solid #d3d3d5; margin-bottom: 30px; /*margin-top: -$gutter;*/ height: 52px; } .lt-ie9 .breadcrumb { margin-top: 0; } @media screen and (min-width: 769px) { .template-page .breadcrumb, .template-product .breadcrumb { margin-bottom: 30px; } } @media screen and (min-width: 768px) { .template-collection .breadcrumb { /*margin-bottom:$gutter/2;*/ } } @media screen and (max-width: 768px) { .breadcrumb { height: auto; margin-bottom: 10px; margin-top: -15px; } } .breadcrumb a { color: #585858; } .breadcrumb a:hover { color: #585858; } .breadcrumb a, .breadcrumb span { display: inline-block; padding: 10px 5px 10px 0; margin-right: 7px; overflow: hidden; } .breadcrumb a:first-child, .breadcrumb span:first-child { padding-left: 0; } .breadcrumb span { color: #30422e; } .breadcrumb .divider { font-size: 15px; font-family: 'Verdana', sans-serif; padding: 13px 7px 13px 0; color: #000; } .breadcrumb + .grid-border { margin-top: -30px; } .breadcrumb--truncate { width: 250px; white-space: nowrap; text-overflow: ellipsis; } /*============================================================================ #Product Page ==============================================================================*/ /*================ Select fields ================*/ .product-variants { display: none; } .no-js .product-variants { display: block; } @media screen and (min-width: 769px) { .selector-wrapper label, .product-variants label { font-size: 14px; font-weight: 600; color: #333; text-transform: capitalize; } .selector-wrapper select, .product-variants select { max-width: 57%; min-height: 36px; font-size: 13px; font-weight: 400; color: #333; background: url("https://cdn.shopify.com/s/files/1/0054/3965/1958/files/gray-arrow.png?6796906338378284887") right 10px center no-repeat; } } .payment-buttons { display: inline-block; flex-direction: column; } .payment-buttons.payment-buttons--medium { min-width: 40%; } @media screen and (max-width: 768px) { .payment-buttons.payment-buttons--medium { width: 100%; } } .payment-buttons.payment-buttons--large { width: 100%; } .shopify-payment-button .shopify-payment-button__button { margin-top: 10px; min-height: 44px; } @media screen and (min-width: 769px) { .shopify-payment-button .shopify-payment-button__button { margin-top: 13px; } } .shopify-payment-button .shopify-payment-button__button--branded { border-radius: 0; overflow: hidden; } .payment-buttons--large .shopify-payment-button .shopify-payment-button__button--branded { min-height: 55px; } .shopify-payment-button .shopify-payment-button__button--unbranded { border-radius: 0; } .shopify-payment-button .shopify-payment-button__button--unbranded:hover { background-color: #253324 !important; } .payment-buttons--large .shopify-payment-button .shopify-payment-button__button--unbranded { margin-bottom: 0; } .shopify-payment-button .shopify-payment-button__more-options { color: #30422e; margin-top: 16px; text-decoration: underline; } .shopify-payment-button .shopify-payment-button__more-options:hover, .shopify-payment-button .shopify-payment-button__more-options:focus { color: #516f4d; } .payment-buttons--medium .shopify-payment-button { min-width: 40%; } @media screen and (min-width: 481px) { #addToCartForm select { max-width: 50%; } } .addToCartForm .flits-wishlist-product-page { display: none; } .select_pro_collection .flits-wsl-heart-empty, .select_pro_collection .flits-wsl-heart-filled, .collection_row_pro_bg .flits-wsl-heart-empty, .collection_row_pro_bg .flits-wsl-heart-filled, .collection-wrapper .flits-wsl-heart-empty, .collection-wrapper .flits-wsl-heart-filled, .product-second-section .flits-wsl-heart-empty, .product-second-section .flits-wsl-heart-filled { width: 20px !important; height: 22px; } .product-second-section .flits-wsl-btn-div { top: -10px !important; } .collection-wrapper .add-wishlist { right: 5px !important; top: -12px !important; } @media screen and (max-width: 320px) { .collection-wrapper .add-wishlist { right: -5px !important; top: -20px !important; } } .collection_row_pro_bg .flits-wsl-icon, .select_pro_collection .flits-wsl-icon { padding: 0 !important; } /*================ Product details ================*/ #productPrice { font-size: 32px; margin-bottom: 0; white-space: nowrap; } #comparePrice { white-space: nowrap; } .product-meta { margin-bottom: 5px; display: block; } .product-meta span { margin-bottom: 0; } .product-meta li { /* font-family: Montserrat,sans-serif;*/ font-weight: 600; font-size: 24px; } @media screen and (max-width: 480px) { .product-meta li { font-size: 20px; } } @media screen and (min-width: 481px) { .product-meta { display: table; } .product-meta li, .product-meta .product-meta--review { display: table-cell; vertical-align: middle; padding-right: 15px; } } /* Feefo */ .feefowidget-colour-scheme-grey .feefowidget-sticky-widget-closed.feefowidget-mobile.feefowidget-display-format-small { display: none !important; } .feefowidget-global-container .feefowidget-global-container-body-content-controls-sorting { text-align: center !important; } .feefowidget-global-container .feefowidget-global-container-body-content-controls-sorting feefowidget-feedbacks-sorting { padding: 0 !important; } @media screen and (max-width: 767px) { .feefowidget-global-container.feefowidget-viewport-tablet-mobile .feefowidget-global-container-body-content-controls-sorting { width: 100% !important; } .feefowidget-feedbacks-sorting { padding: 0 !important; } } @media screen and (min-width: 481px) { .compare_price-wrap { width: 100%; margin-bottom: 15px; font-family: "Baskerville No 2", serif; color: #000; } .compare_price-wrap li { display: inline-block; font-size: 30px; } .compare_price-wrap li.compareprice { position: relative; width: 34%; } .compare_price-wrap li.compareprice span { font-size: 12px; padding: 5px 10px; } } .full-details { display: inline-block; margin-top: 20px; cursor: pointer; } /*================ Notice of < 10 items left ================*/ .variant-quantity { display: none; color: #585858; font-size: 14px; line-height: 34px; margin-bottom: 13px; } .variant-quantity.is-visible { display: flex; justify-content: flex-start; align-items: center; } /*================ Product photos ================*/ .product-photo-container { margin-bottom: 10px; max-width: 100%; position: relative; } .product-photo-container a, .product-photo-container img, .product-photo-thumbs a, .product-photo-thumbs img { display: block; margin: 0 auto; } .product-photo-container img, .product-photo-thumbs img { width: 100%; } .product-photo-container li, .product-photo-thumbs li { margin-bottom: 30px; } @media screen and (min-width: 769px) { .image-zoom { display: inline-block; cursor: move; } } /*============================================================================ #Blogs and Comments ==============================================================================*/ .comment { margin-bottom: 30px; } .comment + .comment { border-top: 1px solid #d3d3d5; padding-top: 30px; } /*============================================================================ #Notes and Form Feedback ==============================================================================*/ .note, .errors { border-radius: 0; padding: 15px; margin-bottom: 15px; border: 1px solid transparent; } .note ul, .note ol, .errors ul, .errors ol { margin-top: 0; margin-bottom: 0; } .note li:last-child, .errors li:last-child { margin-bottom: 0; } .note p, .errors p { margin-bottom: 0; } .note { border-color: #d3d3d5; } .errors ul { list-style: disc outside; margin-left: 20px; } .form-success { color: #0a942a; background-color: #ecfef0; border-color: #0a942a; padding: 0.5em; } .form-error, .errors { color: #dc0000; background-color: #fff6f6; border-color: #dc0000; padding: 0.5em; } /*============================================================================ #Cart Page ==============================================================================*/ .cart-row { margin-top: 30px; padding-top: 30px; border-top: 1px solid #d3d3d5; } .cart-row:first-child { margin-top: 0; } .cart-row:first-child { padding-top: 0; border-top: 0 none; } .cart-row a { color: #585858; } @media screen and (max-width: 768px) { #ajaxifyCart .cart-row a { color: #fff; } } .cart-row a:hover { color: #30422e; } .cart-row input[type="image"] { padding: 15px 0px; } .cart-row .additional-checkout-buttons > *:not(script) { padding: 10px 0 0 10px; vertical-align: top; line-height: 1; } .cart-row .additional-checkout-buttons > *:not(script):first-child, .cart-row .additional-checkout-buttons > *:not(script):empty { padding-left: 0px; } @media screen and (max-width: 480px) { .cart-row .additional-checkout-button--paypal { margin-top: 10px; } } .cart-remove { position: absolute; height: 20px; bottom: 0; top: 0; left: 20px; margin: auto; } .cart-image, .cart-image img { display: block; width: 100%; max-height: inherit; height: inherit; } @media screen and (max-width: 768px) { .cart-image { margin-bottom: 15px; } } .cart-subtotal { margin-bottom: 30px; } .cart-subtotal--price { margin: 0 0 0 10px; display: inline; } .cart-subtotal--savings, .cart-item--discount { display: block; padding-bottom: 15px; font-weight: 600; } .cart--no-cookies .cart--empty-message { display: none; } .cart--no-cookies .cart--continue-message { display: none; } .cart--cookie-message { display: none; padding-bottom: 25px; } .cart--no-cookies .cart--cookie-message { display: block; } #EmptyCart { text-align: center; } /*================ Remove from cart icon ================*/ a.remove { display: inline-block; margin-top: 7px; height: 19px; line-height: 19px; padding: 0 5px; border-radius: 19px; font-size: 16px; text-align: center; border: 0 none; } .supports-fontface a.remove { padding: 0; width: 19px; } /*================ Ajax Cart ================*/ #ajaxifyDrawer .ajaxifyCart--content a.remove { color: #585858; } @media screen and (max-width: 768px) { body { padding-top: 89px; } .ajaxify-modal .ajaxifyCart--close { /*top: $mobileNavBarHeight;*/ } .ajaxify-modal .ajaxifyCart--content { /* margin-top: $mobileNavBarHeight + 30px; */ margin-bottom: -50px; } } /*============================================================================ #Demo Styles - for empty store state ==============================================================================*/ .demo-image { background: url("//cdn.shopify.com/s/files/1/0383/9765/t/1/assets/blankslate-producticon.png?4") no-repeat center center #eeeeee; display: block; text-align: center; padding: 100px 0; color: #aaa; font-size: 0.875em; text-decoration: none; } /*============================================================================ #FlexSlider - jQuery FlexSlider v2.2.2 | http://www.woothemes.com/flexslider/ - Contributing author: Tyler Smith (@mbmufffin) ==============================================================================*/ .flexslider { margin: 0; padding: 0; } .flexslider li { margin: 0; max-width: 100%; } .flexslider .slides > li { display: none; /* Hide the slides before the JS is loaded. Avoids image jumping */ margin: 0; position: relative; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .flexslider .slides > li .slide-hide { visibility: hidden; } .flexslider .slides img { max-width: 100%; margin: 0 auto; display: block; } .flexslider .slides .placeholder-noblocks { height: auto; width: 100%; max-height: 100%; } @media screen and (min-width: 769px) { .flexslider .slides .placeholder-noblocks { height: 430px; } } @media screen and (max-width: 768px) { .flexslider .slides .placeholder-noblocks { height: 30vh; } } .slides:after { content: ""; display: table; clear: both; } html[xmlns] .slides { display: block; } * html .slides { height: 1%; } /*================ No JS Fallback ================*/ .no-js .slides > li:first-child { display: block; } .flexslider { position: relative; zoom: 1; } .flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .loading .flex-viewport { max-height: 300px; } .flexslider .slides { zoom: 1; } .carousel li { margin-right: 5px; } /*================ Direction Nav ================*/ .flex-direction-nav { margin: 0; padding: 0; list-style: none; } .flex-direction-nav { *height: 0; display: none; } .flex-direction-nav a { display: block; width: 40px; height: 60px; position: absolute; top: 40%; bottom: 0; z-index: 10; overflow: hidden; opacity: 0; cursor: pointer; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .flex-direction-nav .flex-disabled { opacity: 0 !important; filter: alpha(opacity=0); cursor: default; } .flex-direction-nav a { text-indent: -9999px; background: #e5e5e5 url("https://cdn.shopify.com/s/files/1/0054/3965/1958/files/product-slider-arrow.png?6204474069165399532") 0 0 no-repeat; color: #fff; /*================ Hide SVG arrows in oldIE ================*/ } .lte-ie9 .flex-direction-nav a { display: none; } .flex-direction-nav a.flex-prev { background-position: left 5px center; } .flex-direction-nav a.flex-next { background-position: right 5px center; } .product_img_slider { position: relative; } .product_img_slider .flex-direction-nav { display: inline-block; } .product_img_slider .flex-direction-nav a { opacity: 1; } .product_img_slider .flex-direction-nav a.flex-disabled { pointer-events: none; } /*================ Control Nav ================*/ .flex-control-nav { position: absolute; bottom: -30px; width: 100%; text-align: center; margin: 0; padding: 0; list-style: none; display: none; } .flex-control-nav li { margin: 0 4px; display: inline-block; zoom: 1; *display: inline; vertical-align: middle; } .flex-control-paging li a { width: 12px; height: 12px; display: block; background-color: #d3d3d5; cursor: pointer; text-indent: -9999px; border-radius: 20px; border: 2px solid white; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -ms-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; } .flex-control-paging li a:hover { background-color: #b9b9bc; } .flex-control-paging li a.flex-active { background-color: white; border-color: #30422e; cursor: default; } .flex-control-thumbs { margin: 5px 0 0; position: static; overflow: hidden; } .flex-control-thumbs li { width: 25%; float: left; margin: 0; } .flex-control-thumbs img { width: 100%; display: block; opacity: .7; cursor: pointer; } .flex-control-thumbs img:hover { opacity: 1; } .flex-control-thumbs .flex-active { opacity: 1; cursor: default; } @media screen and (max-width: 768px) { .flex-direction-nav a { opacity: 1; } .flex-direction-nav a.flex-prev { left: 0; } .flex-direction-nav a.flex-next { right: 0; } } @media screen and (min-width: 769px) { .flex-direction-nav .flex-prev { left: 0; } .flex-direction-nav .flex-next { right: 0; } .flexslider:hover .flex-prev { opacity: 1; left: -25px; } .flexslider:hover .flex-next { opacity: 1; right: -25px; } } @media screen and (min-width: 1230px) { .flex-direction-nav .flex-prev { left: -15px; } .flex-direction-nav .flex-next { right: -15px; } .flexslider:hover .flex-prev { opacity: 1; left: -45px; } .flexslider:hover .flex-next { opacity: 1; right: -45px; } } /*================ Custom Flexslider Styles ================*/ .flexslider .slides { margin: 0; padding: 0; list-style-type: none; } .slide-link { display: block; } .slide-link img { display: block; } /*============================================================================ #Magnific Popup http://dimsemenov.com/plugins/magnific-popup/ ==============================================================================*/ .mfp-bg { top: 0; left: 0; width: 100%; height: 100%; z-index: 1042; overflow: hidden; position: fixed; background: #0b0b0b; opacity: 0.8; filter: alpha(opacity=80); } .mfp-wrap { top: 0; left: 0; width: 100%; height: 100%; z-index: 1043; position: fixed; outline: none !important; -webkit-backface-visibility: hidden; } .mfp-container { text-align: center; position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0 8px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mfp-container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .mfp-align-top .mfp-container:before { display: none; } .mfp-content { position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 1045; } .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { width: 100%; cursor: auto; } .mfp-ajax-cur { cursor: progress; } .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: -moz-zoom-out; cursor: -webkit-zoom-out; cursor: zoom-out; } .mfp-zoom { cursor: pointer; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; } .mfp-auto-cursor .mfp-content { cursor: auto; } .mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .mfp-loading.mfp-figure { display: none; } .mfp-hide { display: none !important; } .mfp-preloader { color: #CCC; position: absolute; top: 50%; width: auto; text-align: center; margin-top: -0.8em; left: 8px; right: 8px; z-index: 1044; } .mfp-preloader a { color: #CCC; } .mfp-preloader a:hover { color: #FFF; } .mfp-s-ready .mfp-preloader { display: none; } .mfp-s-error .mfp-content { display: none; } button.mfp-close, button.mfp-arrow { overflow: visible; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; display: block; outline: none; padding: 0; z-index: 1046; -webkit-box-shadow: none; box-shadow: none; } button::-moz-focus-inner { padding: 0; border: 0; } .mfp-close { width: 44px; height: 44px; line-height: 44px; position: absolute; right: 0; top: 0; text-decoration: none; text-align: center; opacity: 0.65; filter: alpha(opacity=65); padding: 0 0 18px 10px; color: #FFF; font-style: normal; font-size: 28px; font-family: Arial, Baskerville, monospace; } .mfp-close:hover, .mfp-close:focus { opacity: 1; filter: alpha(opacity=100); } .mfp-close:active { top: 1px; } .mfp-close-btn-in .mfp-close { color: #333; } .mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { color: #FFF; right: -6px; text-align: right; padding-right: 6px; width: 100%; } .mfp-counter { position: absolute; top: 0; right: 0; color: #CCC; font-size: 12px; line-height: 18px; white-space: nowrap; } .mfp-arrow { position: absolute; opacity: 0.65; filter: alpha(opacity=65); margin: 0; top: 50%; margin-top: -55px; padding: 0; width: 90px; height: 110px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .mfp-arrow:active { margin-top: -54px; } .mfp-arrow:hover, .mfp-arrow:focus { opacity: 1; filter: alpha(opacity=100); } .mfp-arrow:before, .mfp-arrow:after, .mfp-arrow .mfp-b, .mfp-arrow .mfp-a { content: ''; display: block; width: 0; height: 0; position: absolute; left: 0; top: 0; margin-top: 35px; margin-left: 35px; border: medium inset transparent; } .mfp-arrow:after, .mfp-arrow .mfp-a { border-top-width: 13px; border-bottom-width: 13px; top: 8px; } .mfp-arrow:before, .mfp-arrow .mfp-b { border-top-width: 21px; border-bottom-width: 21px; opacity: 0.7; } .mfp-arrow-left { left: 0; } .mfp-arrow-left:after, .mfp-arrow-left .mfp-a { border-right: 17px solid #FFF; margin-left: 31px; } .mfp-arrow-left:before, .mfp-arrow-left .mfp-b { margin-left: 25px; border-right: 27px solid #3F3F3F; } .mfp-arrow-right { right: 0; } .mfp-arrow-right:after, .mfp-arrow-right .mfp-a { border-left: 17px solid #FFF; margin-left: 39px; } .mfp-arrow-right:before, .mfp-arrow-right .mfp-b { border-left: 27px solid #3F3F3F; } .mfp-iframe-holder { padding-top: 40px; padding-bottom: 40px; } .mfp-iframe-holder .mfp-content { line-height: 0; width: 100%; max-width: 900px; } .mfp-iframe-holder .mfp-close { top: -40px; } .mfp-iframe-scaler { width: 100%; height: 0; overflow: hidden; padding-top: 56.25%; } .mfp-iframe-scaler iframe { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #000; } /* Main image in popup */ img.mfp-img { width: auto; max-width: 100%; height: auto; display: block; line-height: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 40px 0 40px; margin: 0 auto; } /* The shadow behind the image */ .mfp-figure { line-height: 0; } .mfp-figure:after { content: ''; position: absolute; left: 0; top: 40px; bottom: 40px; display: block; right: 0; width: auto; height: auto; z-index: -1; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #444; } .mfp-figure small { color: #BDBDBD; display: block; font-size: 12px; line-height: 14px; } .mfp-figure figure { margin: 0; } .mfp-bottom-bar { margin-top: -36px; position: absolute; top: 100%; left: 0; width: 100%; cursor: auto; } .mfp-title { text-align: left; line-height: 18px; color: #F3F3F3; word-wrap: break-word; padding-right: 36px; } .mfp-image-holder .mfp-content { max-width: 100%; } .mfp-gallery .mfp-image-holder .mfp-figure { cursor: pointer; } @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) { .mfp-img-mobile .mfp-image-holder { padding-left: 0; padding-right: 0; } .mfp-img-mobile img.mfp-img { padding: 0; } .mfp-img-mobile .mfp-figure:after { top: 0; bottom: 0; } .mfp-img-mobile .mfp-figure small { display: inline; margin-left: 5px; } .mfp-img-mobile .mfp-bottom-bar { background: rgba(0, 0, 0, 0.6); bottom: 0; margin: 0; top: auto; padding: 3px 5px; position: fixed; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mfp-img-mobile .mfp-bottom-bar:empty { padding: 0; } .mfp-img-mobile .mfp-counter { right: 5px; top: 3px; } .mfp-img-mobile .mfp-close { top: 0; right: 0; width: 35px; height: 35px; line-height: 35px; background: rgba(0, 0, 0, 0.6); position: fixed; text-align: center; padding: 0; } } @media all and (max-width: 900px) { .mfp-arrow { -webkit-transform: scale(0.75); transform: scale(0.75); } .mfp-arrow-left { -webkit-transform-origin: 0; transform-origin: 0; } .mfp-arrow-right { -webkit-transform-origin: 100%; transform-origin: 100%; } .mfp-container { padding-left: 6px; padding-right: 6px; } } .mfp-ie7 .mfp-img { padding: 0; } .mfp-ie7 .mfp-bottom-bar { width: 600px; left: 50%; margin-left: -300px; margin-top: 5px; padding-bottom: 5px; } .mfp-ie7 .mfp-container { padding: 0; } .mfp-ie7 .mfp-content { padding-top: 44px; } .mfp-ie7 .mfp-close { top: 0; right: 0; padding-top: 0; } /*======================== Magnific Popup custom styles ===================== */ .mfp-bg { background-color: white; } .mfp-close { color: inherit; } .mfp-bg.mfp-fade { -webkit-backface-visibility: hidden; opacity: 0; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } /* overlay animate in */ .mfp-bg.mfp-fade.mfp-ready { opacity: 1; filter: alpha(opacity=100); } /* overlay animate out */ .mfp-fade.mfp-bg.mfp-removing { opacity: 0; filter: alpha(opacity=100); } /* content at start */ .mfp-fade.mfp-wrap .mfp-content { opacity: 0; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } /* content animate it */ .mfp-fade.mfp-wrap.mfp-ready .mfp-content { opacity: 1; } /* content animate out */ .mfp-fade.mfp-wrap.mfp-removing .mfp-content { opacity: 0; } /*============================================================================ #Product Reviews - Free Shopify App - https://apps.shopify.com/product-reviews ==============================================================================*/ #shopify-product-reviews { margin: 0; /*================ Summary Rating ================*/ /*================ Content ================*/ /*================ Individual Ratings ================*/ /*================ Review Form ================*/ } #shopify-product-reviews .spr-container { padding: 0; border: 0 none; } #shopify-product-reviews .spr-summary { border-bottom: 1px solid #d3d3d5; padding-bottom: 15px; margin-bottom: 30px; } @media screen and (min-width: 769px) { #shopify-product-reviews .spr-summary { float: left; border: 1px solid #d3d3d5; width: 30%; padding: 10px; } #shopify-product-reviews .spr-summary .spr-summary-starrating { display: block; margin: 0; } } #shopify-product-reviews .spr-summary-caption { font-size: 14px; } @media screen and (min-width: 769px) { #shopify-product-reviews .spr-summary-caption { display: block; border-bottom: 1px solid #d3d3d5; margin-bottom: 10px; padding-bottom: 10px; } } #shopify-product-reviews .spr-summary-actions-newreview:after { content: ' \203A'; clear: none; display: inline; } @media screen and (min-width: 769px) { #shopify-product-reviews .spr-summary-actions-newreview { float: none; } } #shopify-product-reviews .spr-header:after { clear: none; } @media screen and (min-width: 769px) { #shopify-product-reviews .spr-content { float: left; width: 70%; padding-left: 30px; } } #shopify-product-reviews .spr-reviews { margin: 0; } #shopify-product-reviews .spr-review { padding: 0; margin: 0; border: 0 none; } #shopify-product-reviews .spr-review + .spr-review { margin-top: 15px; } #shopify-product-reviews .spr-review-content-body { font-size: inherit; } #shopify-product-reviews .spr-review-content-body br { content: ''; display: block; overflow: hidden; height: 1px; } #shopify-product-reviews .spr-review-header { margin-bottom: 0; } #shopify-product-reviews .spr-review-header:after { content: ""; display: table; clear: both; } #shopify-product-reviews .spr-review-header-title { margin-right: 15px; font-family: "Avenir Next", sans-serif; font-weight: 300; font-style: normal; text-transform: uppercase; font-size: 17px; line-height: 20px; position: relative; top: 2px; } @media screen and (min-width: 769px) { #shopify-product-reviews .spr-review-header-starratings, #shopify-product-reviews .spr-review-header-title { display: inline; } #shopify-product-reviews .spr-review-header-title { float: left; } } #shopify-product-reviews .spr-review-header-starratings { position: relative; top: -2px; margin: 0 15px 10px 0; } #shopify-product-reviews .spr-review-header-byline { position: relative; top: -2px; display: inline-block; margin: 0; } #shopify-product-reviews .spr-review-reportreview { display: none; } #shopify-product-reviews .spr-form { border: 0 none; border-bottom: 1px solid #d3d3d5; margin: 0 0 30px; padding: 0 0 30px; } /*================ Star Icons ================*/ .spr-badge-starrating { white-space: nowrap; } .spr-badge-starrating, .spr-icon { color: #e5c649; font-size: inherit; } /*================ Review count ================*/ .spr-badge-caption { display: inline-block; font-size: 13px; } /*================ Hide review badge if no reviews ================*/ .product-grid-item .spr-badge[data-rating="0.0"], .product-meta--review .spr-badge[data-rating="0.0"] { display: none; } /*============================================================================ #Password Page ==============================================================================*/ .template-password { height: 100vh; text-align: center; padding: 0; } .password-page__wrapper { display: table; height: 100%; width: 100%; background-image: url(//cdn.shopify.com/s/files/1/0020/3184/5451/t/22/assets/password-page-backround.jpg?v=27459255267404830721572356104); background-size: cover; background-repeat: no-repeat; color: #ffffff; } .password-page__wrapper a { color: inherit; } .password-page__wrapper .social-sharing a { color: #ffffff; } .password-page__header { display: table-row; height: 1px; } .password-page__header__inner { display: table-cell; padding: 15px 30px; width: 100vw; } .password-page__logo { margin-top: 90px; } .password-page__logo .logo { max-width: 100%; } .password-page__main { display: table-row; width: 100%; height: 100%; margin: 0 auto; } .password-page__main__inner { display: table-cell; vertical-align: middle; padding: 15px 30px; width: 100vw; } .password-page__hero { font-family: "Baskerville No 2", serif; font-weight: 400; font-style: normal; font-size: 3em; line-height: 1.25; text-transform: none; letter-spacing: 0; text-rendering: optimizeLegibility; } @media screen and (min-width: 481px) { .password-page__hero { font-size: 4.28571em; } } @media screen and (min-width: 769px) { .password-page__hero { font-size: 4.57143em; } } .password-page__message { font-style: italic; font-size: 120%; } .password-page__message img { max-width: 100%; } .password-page__message, .password-page__login-form, .password-page__signup-form { max-width: 500px; margin: 0 auto; } .password-page__login-form { text-align: center; padding: 30px; } .password-page__signup-form-heading { margin-bottom: 20px; } .password-page__signup-form-subheading { margin-bottom: 30px; } .password-page__signup-form-subheading a { color: #30422e; } .password-page__signup-form-subheading a:hover { color: #516f4d; } .password-page__signup-form .input-group-field { color: #ffffff; } @media screen and (min-width: 480px) { .password-page__login-form, .password-page__signup-form { padding: 0 30px; } } .password-page__login-form .input-group, .password-page__signup-form .input-group { width: 100%; } .password-page__login-form .errors ul, .password-page__signup-form .errors ul { list-style-type: none; margin-left: 0; } .storefront-password-form { margin-bottom: 15px; } .password-page__social-sharing { margin-top: 30px; } .password-page__social-sharing .social-sharing { padding-top: 0; } .password-login, .admin-login { margin-top: 15px; } .password-login a:hover, .admin-login a:hover { color: inherit; } .password-login { font-size: 1em; line-height: 14px; } .lock-icon-svg { width: 14px; height: 14px; display: inline-block; vertical-align: baseline; /* Hiding the SVG logo in IE8 */ } .lock-icon-svg path { fill: currentColor; } .lt-ie9 .lock-icon-svg { display: none; } .stock-icon-svg { height: 12px; width: 12px; margin-right: 5px; } .stock-icon-svg path { fill: currentColor; } .admin-login { font-size: 95%; } .password-page__footer { display: table-row; height: 1px; } .password-page__footer_inner { display: table-cell; vertical-align: bottom; padding: 30px; line-height: 21px; font-size: 95%; } .shopify-link { color: inherit; } .shopify-link:hover { color: inherit; } .shopify-logo-svg { width: 72px; height: 21px; display: inline-block; line-height: 0; vertical-align: top; /* Hiding the SVG logo in IE8, we show the word 'Shopify' instead */ } .shopify-logo-svg path { fill: currentColor; } .lt-ie9 .shopify-logo-svg { display: none; } /* ========= Hiding the word 'Shopify' but not from screen readers. IE8 does not support SVG, so in it we hide the logo and show the word. To target all browsers except IE8, we use the class 'modern', which needs to be added to the html element. ========= */ .modern .shopify-name { clip: rect(0 0 0 0); clip: rect(0, 0, 0, 0); overflow: hidden; position: absolute; height: 1px; width: 1px; } /*============================================================================ #Image with text ==============================================================================*/ .feature-row { display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; -webkit-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; } @media screen and (max-width: 480px) { .feature-row { -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } } .feature-row__item { -webkit-flex: 0 1 50%; -moz-flex: 0 1 50%; -ms-flex: 0 1 50%; flex: 0 1 50%; } @media screen and (max-width: 480px) { .feature-row__item { -webkit-flex: 1 1 100%; -moz-flex: 1 1 100%; -ms-flex: 1 1 100%; flex: 1 1 100%; max-width: 100%; } } .feature-row__image-wrapper { position: relative; margin: 0 auto; } .feature-row__image { display: block; margin: 0 auto; } @media screen and (max-width: 480px) { .feature-row__image { order: 1; } } .js .feature-row__image { position: absolute; top: 0; left: 0; width: 100%; } .feature-row__text { padding-top: 30px; padding-bottom: 30px; } @media screen and (max-width: 480px) { .feature-row__text { order: 2; padding-bottom: 0; } } @media screen and (min-width: 481px) { .feature-row__text--left { padding-left: 30px; } .feature-row__text--right { padding-right: 30px; } } @media screen and (min-width: 481px) { .featured-row__subtext { font-size: 1.14286em; } } /*============================================================================ #Custom Content ==============================================================================*/ .custom-content { display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; -ms-flex-align: stretch; -webkit-align-items: stretch; -moz-align-items: stretch; -ms-align-items: stretch; -o-align-items: stretch; align-items: stretch; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; width: auto; margin-bottom: 30px; margin-left: -30px; } @media screen and (max-width: 480px) { .custom-content { margin-bottom: 15px; margin-left: -15px; } } .template-index .custom-content { margin-bottom: 0; } .custom__item { -webkit-flex: 0 0 auto; -moz-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; margin-bottom: 30px; padding-left: 30px; max-width: 100%; } @media screen and (max-width: 480px) { .custom__item { -webkit-flex: 0 0 auto; -moz-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; padding-left: 15px; margin-bottom: 15px; } .custom__item.small--one-half { -webkit-flex: 1 0 50%; -moz-flex: 1 0 50%; -ms-flex: 1 0 50%; flex: 1 0 50%; max-width: 400px; margin-left: auto; margin-right: auto; } } .template-index .custom__item { margin-bottom: 0; } .custom__item-inner { position: relative; display: inline-block; text-align: left; max-width: 100%; } .custom__item-inner--video, .custom__item-inner--html { display: block; } /*================ Flex item alignment ================*/ .align--top-middle { text-align: center; } .align--top-right { text-align: right; } .align--middle-left { -ms-flex-item-align: center; -webkit-align-self: center; align-self: center; } .align--center { -ms-flex-item-align: center; -webkit-align-self: center; align-self: center; text-align: center; } .align--middle-right { -ms-flex-item-align: center; -webkit-align-self: center; align-self: center; text-align: right; } .align--bottom-left { -ms-flex-item-align: flex-end; -webkit-align-self: flex-end; align-self: flex-end; } .align--bottom-middle { -ms-flex-item-align: flex-end; -webkit-align-self: flex-end; align-self: flex-end; text-align: center; } .align--bottom-right { -ms-flex-item-align: flex-end; -webkit-align-self: flex-end; align-self: flex-end; text-align: right; } .currencyList .flag, .currentCurrency .flag { display: none !important; } /*============================================================================ #Blank States ==============================================================================*/ .placeholder-svg { display: block; fill: rgba(88, 88, 88, 0.35); background-color: rgba(88, 88, 88, 0.1); width: 100%; height: 100%; max-width: 100%; max-height: 100%; border: 1px solid rgba(88, 88, 88, 0.2); } .placeholder-noblocks { padding: 40px; text-align: center; max-width: 100%; fill: rgba(88, 88, 88, 0.35); } .placeholder-noblocks.slide-link { background-color: rgba(88, 88, 88, 0.1); } .placeholder-background { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; background-color: rgba(88, 88, 88, 0.1); } .placeholder-background .icon { border: 0; } .placeholder-background.imagebox { background-color: gainsboro; } .placeholder-background.imagebox svg.placeholder-image { fill: rgba(255, 255, 255, 0.35); border: 0px; align-self: center; width: 100%; height: 100%; } .image-bar__content .placeholder-svg { position: absolute; top: 0; left: 0; } /*============================================================================ #Lazysizes ==============================================================================*/ .lazyload__image-wrapper { display: block; margin-bottom: 10px; position: relative; margin: 0 auto; } .lazyload__image-wrapper img { display: block; } .lazyload__image-wrapper img { display: block; width: 100%; margin: 0 auto; position: absolute; top: 0; } .lazyload__image-wrapper img.lazyload { opacity: 0; } @media screen and (min-width: 769px) { .header-logo__image { /*margin: 0;*/ } } .box { background: no-repeat; background-color: #f7f7f7; background-size: contain; } /*============================================================================ #Featured blog post ==============================================================================*/ .article__featured-image { position: absolute; top: 0; left: 0; display: block; width: 100%; } .article__featured-image-wrapper { position: relative; margin-bottom: 30px; } .no-js .article__featured-image-wrapper { clip: rect(0 0 0 0); clip: rect(0, 0, 0, 0); overflow: hidden; position: absolute; height: 1px; width: 1px; } .article__featured-image-wrapper-nojs { margin-bottom: 30px; } .featured-blog__meta { margin-bottom: 0.5em; } .featured-blog__post { margin-bottom: 37.5px; } .placeholder .article__featured-link { margin-bottom: 30px; } /*============================================================================ #Map section ==============================================================================*/ .map-section__wrapper { display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .ie9 .map-section__wrapper { display: block; position: relative; } .map-section__content { -webkit-flex: 1 1 auto; -moz-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; width: 290px; overflow: hidden; position: relative; } @media screen and (max-width: 768px) { .map-section__content { -webkit-flex: 0 1 100%; -moz-flex: 0 1 100%; -ms-flex: 0 1 100%; flex: 0 1 100%; max-width: 100%; } } @media screen and (min-width: 769px) { .ie9 .map-section__content { width: 50%; } } .map-section__content .icon-pin { font-size: 12.8px; } .map-section__image { height: 100%; background-size: cover; background-position: center; padding-top: 50%; } @media screen and (max-width: 768px) { .map-section__image { order: 1; } } @media screen and (min-width: 769px) { .map-section__image { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } } .map-section--display-map .map-section__image { display: none !important; } @media screen and (min-width: 769px) { .ie9 .map-section__background-wrapper { left: 50%; height: 100%; top: 0; position: absolute; } } .map-section__placeholder { height: 100%; } @media screen and (min-width: 769px) { .map-section__placeholder { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } } .map-section--display-map .map-section__placeholder { display: none !important; } .map-section__text { padding: 30px; background-color: #f8f8f8; } @media screen and (max-width: 768px) { .map-section__text { order: 0; } } .map-section__container { width: 100%; height: 55vh; } @media screen and (min-width: 769px) { .map-section__container { position: absolute !important; top: 0; left: 0; height: 100%; } } /*============================================================================== #Rich text section ==============================================================================*/ .rich-text__heading p { margin-bottom: 0; } .rich-text a { color: #FFF; } .rich-text__heading--large { font-size: 1.15em; } .rich-text__heading--small { font-size: 0.88em; } .rich-text__text--large { font-size: 1.28571em; } .rich-text__text--small { font-size: 0.92857em; } /*============================================================================== #Custom CSS ==============================================================================*/ @font-face { /*font-family:'BebasNeueLight';*/ src: url("//cdn.shopify.com/s/files/1/0020/3184/5451/t/22/assets/BebasNeueLight.eot?v=100575408442652736841572356012#iefix") format("embedded-opentype"), url("//cdn.shopify.com/s/files/1/0020/3184/5451/t/22/assets/BebasNeueLight.otf?v=114609053405671571951572356013") format("opentype"), url("//cdn.shopify.com/s/files/1/0020/3184/5451/t/22/assets/BebasNeueLight.woff?v=53265079408587637391572356015") format("woff"), url("//cdn.shopify.com/s/files/1/0020/3184/5451/t/22/assets/BebasNeueLight.ttf?v=30111961238471671381572356014") format("truetype"), url("//cdn.shopify.com/s/files/1/0020/3184/5451/t/22/assets/BebasNeueLight.svg?v=150979801896892370301572356013#BebasNeueLight") format("svg"); font-weight: normal; font-display: swap; font-style: normal; } @font-face { font-family: 'BebasNeueRegular'; src: url("//cdn.shopify.com/s/files/1/0020/3184/5451/t/22/assets/BebasNeueRegular.eot?v=108623513880795723451572356016#iefix") format("embedded-opentype"), url("//cdn.shopify.com/s/files/1/0020/3184/5451/t/22/assets/BebasNeueRegular.otf?v=180929930590592191521572356016") format("opentype"), url("//cdn.shopify.com/s/files/1/0020/3184/5451/t/22/assets/BebasNeueRegular.woff?v=162676429535833406341572356018") format("woff"), url("//cdn.shopify.com/s/files/1/0020/3184/5451/t/22/assets/BebasNeueRegular.ttf?v=102249691621743940931572356018") format("truetype"), url("//cdn.shopify.com/s/files/1/0020/3184/5451/t/22/assets/BebasNeueRegular.svg?v=44960182210559621031572356017#BebasNeueRegular") format("svg"); font-weight: normal; font-display: swap; font-style: normal; } .topbar { background: #98c1ab; width: 100%; display: inline-block; font-family: "Baskerville No 2", serif; color: #000; min-height: 35px; } .topbar ul { margin: 0; } .topbar p { margin: 0; text-align: center; } @media screen and (max-width: 480px) { .topbar p { font-size: 12px; } } @media screen and (min-width: 769px) { .topbar p b { padding-right: 30px; font-weight: normal; font-size: 20px; } } .topbar span { font-family: "Avenir Next", sans-serif; } .topbar a { color: #fff; } @media screen and (max-width: 768px) { .topbar { position: fixed; top: 0; left: 0; z-index: 9999; padding-top: 6px; } } @media screen and (max-width: 480px) { .topbar { min-height: 32px; height: 32px; padding-top: 7px; } } @media screen and (max-width: 768px) { .topbar .flex-direction-nav { display: block; } .topbar .flex-direction-nav li { margin: 0; } .topbar .flex-direction-nav a { opacity: 1; top: 10px; width: 20px; height: 15px; text-indent: -9999px; background: url(https://cdn.shopify.com/s/files/1/0054/3965/1958/files/product-slider-arrow.png?6204474069165399532) 0 0 no-repeat; /*background-size:100%;*/ } .topbar .flex-direction-nav a.flex-prev { background-position: left 3px center; left: 5px; } .topbar .flex-direction-nav a.flex-next { background-position: right 3px center; right: 5px; } } @media screen and (max-width: 480px) { .topbar .flex-direction-nav { display: block; } .topbar .flex-direction-nav a { top: 8px; } } .site-sticky-header { position: fixed; top: -200px; left: 0; width: 100%; z-index: 9999; background: #fff; padding-bottom: 2px; border-bottom: 1px solid #ccc; -webkit-transition: all .8s ease; -moz-transition: all .8s ease; -ms-transition: all .8s ease; -o-transition: all .8s ease; transition: all .8s ease; } .site-sticky-header .header-top { margin: 5px 0; } .site-sticky-header .logo { position: absolute; top: 15px; } .site-sticky-header .logo img { max-width: 75px; } .site-sticky-header li.learn { margin-left: 0; } .site-sticky-header li.learn:hover { background: #338491; } .site-sticky-header li.learn a { background: transparent; color: #000; font-size: inherit; } .site-sticky-header li.learn a:hover { color: #fff; } .site-sticky-header li.offers { margin: 0; } .site-sticky-header li.offers:hover { background: #338491; } .site-sticky-header li.offers a { color: #cc0000; background: transparent; font-size: inherit; } .site-sticky-header li.offers a:hover { color: #fff; } .site-sticky-header li.search { display: none; } .sweettooth-launcher-container { z-index: 999 !important; } .site-sticky-header.show_block { top: 0px; } .cart-icon { vertical-align: middle; display: inline-block; width: 18px; } .svg-22 { width: 18px; margin: 0; padding: 0; } @media screen and (min-width: 970px) { .cart-icon { margin-right: 3px; } } .logo { display: block; /*float:left; width:160px; text-align:left;*/ } .header-section { /*border-bottom:1px solid #d3d3d5;*/ } @media screen and (max-width: 768px) { .header-section { margin-top: -4px; } } @media screen and (max-width: 480px) { .header-section { margin-top: -8px; } } .header-top { margin: 5px 0; } .icon-heart { vertical-align: middle; width: 16px; height: 16px; display: inline-block; background: url("https://cdn.shopify.com/s/files/1/0054/3965/1958/files/heart-icon.png?3189727766537929054") left top no-repeat; background-size: 16px; } .icon-heart:hover { background-position: left bottom; } .site-header--meta-links select { background: url("https://cdn.shopify.com/s/files/1/0054/3965/1958/files/gray-arrow.png?12501548704581913189") right center no-repeat; border: 0; display: inline-block; padding: 0 12px 0 0; margin: 0; } .site-header--meta-links select:focus, .site-header--meta-links select:active { outline: none; box-shadow: none; } .mobile_search { display: none; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.9); z-index: 9999; color: #fff; } .mobile_search_content { padding: 15px; } .mobile_search_content h4, .mobile_search_content .h4 { text-align: center; letter-spacing: 1px; } .mobile_search_content .search-bar input[type="search"] { border-top: none; background: #000; border-left: none; border-right: none; letter-spacing: 1px; padding: 5px 45px 5px 10px; } .mobile_search_content .search-bar input[type="search"]:focus { outline: none; } .mobile_search input { color: #fff; } .mobile_search_content::-webkit-input-placeholder { color: #fff; } .mobile_search_content::-moz-placeholder { color: #fff; } .mobile_search_content:-ms-input-placeholder { color: #fff; } .mobile_search_content:-moz-placeholder { color: #fff; } .mobile_search_close { position: absolute; top: 10px; right: 10px; color: #000; background: #d0d0d0; z-index: 99; line-height: 22px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; width: 22px; height: 22px; font-size: 28px; text-align: center; font-weight: bold; } .mobile-nav li:focus { outline: none; } .mobile-nav a:focus { outline: none; } .mobile_menu_close { position: absolute; top: 10px; right: 10px; color: #000; background: #d0d0d0; z-index: 9999; line-height: 22px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; width: 22px; height: 22px; font-size: 28px; text-align: center; font-weight: bold; } @media only screen and (min-width: 769px) { .mobile_menu_close, .mobile_search { display: none !important; } } @media only screen and (max-width: 769px) { .mobile_search_content { padding: 15px; z-index: 9999999999 !important; background: #000; position: absolute; width: 100%; } } .aa-suggestion { border: 1px solid transparent; } .aa-dropdown-menu .aa-product-picture { width: 70px !important; height: 70px !important; left: 5px !important; } .aa-dropdown-menu .aa-product-text { margin-left: 75px !important; } .aa-dropdown-menu .aa-product { min-height: 75px !important; } .aa-dropdown-menu .aa-product-title { margin: 0 0 3px !important; color: #333; font-size: 14px !important; font-weight: 600 !important; } .aa-dropdown-menu .aa-product-info { margin: 0 0 5px !important; font-size: 12px !important; color: #000 !important; } .aa-dropdown-menu .aa-product-price { font-size: 1em !important; font-weight: 600 !important; } .aa-dropdown-menu .aa-cursor { background: transparent !important; border: 1px solid #30422e; position: relative; } .aa-dropdown-menu .aa-cursor:hover:before { content: ''; position: absolute; right: 0; bottom: 0; border-bottom: 15px solid #32808e; border-left: 15px solid transparent; z-index: 8; } .aa-dropdown-menu .aa-cursor:hover:after { content: ''; position: absolute; right: -1px; bottom: -1px; border-bottom: 15px solid #ffffff; border-left: 15px solid transparent; z-index: 9; } body.open-search-box .main-content { position: relative; } body.open-search-box .main-content:after { content: ""; position: absolute; left: 0; top: 0; background: rgba(0, 0, 0, 0.8); width: 100%; height: 100%; z-index: 9999; } @media screen and (max-width: 769px) { .algolia-autocomplete { background: rgba(0, 0, 0, 0) !important; border-color: transparent !important; color: #fff !important; } .aa-product-title .aa-highlight { color: #cfcece !important; } .ais-page .ais-input-button { padding: 0 !important; } .aa-dropdown-menu .aa-product-title { color: #fff; } .aa-dropdown-menu .aa-product-info { color: #f5f5f5 !important; } .aa-dropdown-menu .aa-product-price { color: #fff !important; } .ais-page .ais-search-box--input, .ais-page .ais-search-box--input:focus { border: 0; border-radius: 0; } } @media screen and (max-width: 320px) { .aa-dropdown-menu-size-xs .aa-right-column { padding: 15px 0px 0 0px !important; } .aa-dropdown-menu-size-xs .aa-product-picture { display: block !important; } .aa-dropdown-menu .aa-product-picture { width: 50px !important; height: 50px !important; } .aa-dropdown-menu .aa-product-text { margin-left: 60px !important; } } .cart-qty-price-wrap { width: 71%; display: inline-block; position: relative; float: right; padding-top: 10px; } @media screen and (max-width: 480px) { .cart-qty-price-wrap { width: 68%; } } @media screen and (max-width: 375px) { .cart-qty-price-wrap { width: 65%; } } .cart-qty-price-wrap a.remove { position: absolute; right: 1px; top: -20px; margin: 0; } @media screen and (max-width: 769px) { .cart-qty-price-wrap a.remove { right: auto; left: -30px; } } @media screen and (max-width: 480px) { .cart-qty-price-wrap a.remove { left: -26px; top: -43px; font-size: 16px; } } .cart-qty-price-wrap span { display: inline-block; padding-right: 10px; margin: 0; } .cart-qty-price-wrap h3, .cart-qty-price-wrap .h3 { /*font-family: Montserrat,sans-serif;*/ font-weight: 400; text-transform: none; font-size: 14px; } .qty-wrap { position: relative; width: 70%; float: right; display: inline-block; } .cart__update-wrapper { width: 100%; padding: 10px 0 0 10px; padding-left: 10px; display: inline-block; } .cart_edit { position: absolute; right: 0; top: -25px; } .cart_edit .cart-edit-toggle { background: transparent; border: 0; } .cart_edit .cart-edit-toggle span { font-size: 16px; color: #fff; } .cart_edit .cart-edit-toggle span.cart-text--cancel { display: none; } .cart_edit .active span.cart-text--edit { display: none; } .cart_edit .active span.cart-text--cancel { display: inline-block; } .cart-header { display: none; } #ajaxifyModal .cart-header { display: inline-block; width: 100%; /*font-family: Montserrat,sans-serif;*/ font-weight: 400; } #ajaxifyModal .cart-header h2, #ajaxifyModal .cart-header .h2, #ajaxifyModal .cart-header h4, #ajaxifyModal .cart-header .h4 { margin-bottom: 0; /*font-family: Montserrat,sans-serif;font-weight: 400;*/ text-transform: none; } @media screen and (max-width: 768px) { #ajaxifyCart input[type="text"] { color: #fff; } } #ajaxifyCart .cart-row { margin-top: 10px; padding-top: 10px; } @media screen and (max-width: 320px) { #ajaxifyCart a { font-size: 14px; } } .review-star { margin: 40px auto; width: 100%; display: inline-block; color: #30422e; } .review-star i { font-size: 16px; } .site-footer .review-star i { font-size: 20px; } @media screen and (max-width: 360px) { .review-star i { font-size: 12px; } } @media screen and (max-width: 753px) { .review-star i { font-size: 14px; } } .review-star .count { font-size: 12px; font-weight: 600; padding-left: 15px; } .site-footer .review-star .count { font-size: 16px; } .template-collection .review-star { color: #ffd300; padding-bottom: 10px; } .template-collection .review-star i { font-size: 13px; } .template-collection .review-star span { font-size: 11px; color: #333; } @media screen and (max-width: 480px) { .template-collection .review-star span { display: none; } } .template-collection .site-footer .review-star { color: #30422e; padding: 0 0 50px; } .template-collection .site-footer .review-star i { font-size: 20px; } .template-collection .site-footer .review-star span { color: #30422e; } .intermediate-section { width: 100%; /*display:inline-block; */ display: none; padding: 30px 0; text-align: center; } @media screen and (max-width: 360px) { .intermediate-section .wrapper { padding: 0 10px; } } .intermediate-section ul { margin: 0; padding: 0; } @media (max-width: 820px) { .intermediate-section ul { display: flex; flex-direction: column; } } .intermediate-section ul li { width: 30%; display: inline-block; text-align: left; padding: 0; } .intermediate-section ul li:first-child { border-left: 0px; } @media (max-width: 820px) { .intermediate-section ul li { width: 100%; border: 2px solid #d3d3d5 !important; } .intermediate-section ul li a .intermediate-section-img { margin-right: 15px; width: 100px; display: flex; align-items: center; justify-content: center; } .intermediate-section ul li a .intermediate-section-meta { width: 220px; } } .intermediate-section ul li a { display: flex; color: #000; align-items: center; justify-content: center; } @media (max-width: 375px) { .intermediate-section ul li a { padding: 10px 0; } } .intermediate-section ul li a .intermediate-section-img { margin-right: 15px; } .intermediate-section ul li a .intermediate-section-img img { height: 60px; } @media (max-width: 375px) { .intermediate-section ul li a .intermediate-section-img img { height: 55px; } } .intermediate-section ul li a .h6 { /*font-family: Montserrat;*/ font-size: 16px; margin: 0; } .intermediate-section ul li a p { margin: 0; } .brands-section { width: 100%; display: inline-block; padding: 48px 0 20px; } @media screen and (max-width: 769px) { .brands-section { padding: 30px 0 0; } } .brands-section h2, .brands-section .h2 { font-size: 36px; color: #30422e; text-align: center; position: relative; } @media screen and (max-width: 768px) { .brands-section h2, .brands-section .h2 { font-size: 30px; } } @media screen and (max-width: 480px) { .brands-section h2, .brands-section .h2 { font-size: 24px; } } .brands-section h2:before, .brands-section .h2:before, .brands-section h2:after, .brands-section .h2:after { content: ""; border-top: solid #d3d3d5; border-width: 1px 0 0; margin: 25px 0; height: 0; position: absolute; width: 38%; left: 0; } @media screen and (max-width: 768px) { .brands-section h2:before, .brands-section .h2:before, .brands-section h2:after, .brands-section .h2:after { width: 35%; margin: 20px 0; } } @media screen and (max-width: 480px) { .brands-section h2:before, .brands-section .h2:before, .brands-section h2:after, .brands-section .h2:after { width: 30%; margin: 15px 0; } } @media screen and (max-width: 375px) { .brands-section h2:before, .brands-section .h2:before, .brands-section h2:after, .brands-section .h2:after { width: 27%; } } @media screen and (max-width: 360px) { .brands-section h2:before, .brands-section .h2:before, .brands-section h2:after, .brands-section .h2:after { width: 24%; } } .brands-section h2:after, .brands-section .h2:after { right: 0; left: auto; } .brands-section ul { margin: 0 0 -15px; list-style: none; display: inline-block; width: 100%; } .brands-section ul li { width: 20%; float: left; text-align: center; border-left: 1px solid #d3d3d5; margin: 0; vertical-align: middle; } .brands-section ul li.bb { border-bottom: 1px solid #d3d3d5; } @media screen and (max-width: 480px) { .brands-section ul li { padding: 0 5px; } } .brands-section ul li:first-child, .brands-section ul li.child-6 { border-left: 0px; } @media screen and (max-width: 768px) { .brands-section ul li:first-child, .brands-section ul li.child-6 { border-left: 1px solid white; } } .brands-section ul li a { display: block; } .brands-section ul li a:hover { opacity: 0.6; } .brands-section ul li img { max-width: 100%; display: inline-block; } .brands-section ul hr { margin: 0; } .all_brands { display: inline-block; width: 100%; padding: 0 0 50px 0; } .all_brands h2, .all_brands .h2 { font-size: 26px; color: #30422e; text-align: center; position: relative; /*font-family: Montserrat,sans-serif;*/ } @media screen and (max-width: 768px) { .all_brands h2, .all_brands .h2 { font-size: 22px; } } @media screen and (max-width: 480px) { .all_brands h2, .all_brands .h2 { font-size: 20px; } } @media screen and (max-width: 375px) { .all_brands h2, .all_brands .h2 { font-size: 18px; } } .all_brands h2:before, .all_brands .h2:before, .all_brands h2:after, .all_brands .h2:after { content: ""; border-top: solid #d3d3d5; border-width: 1px 0 0; margin: 20px 0; height: 0; position: absolute; width: 40%; left: 0; } @media screen and (max-width: 768px) { .all_brands h2:before, .all_brands .h2:before, .all_brands h2:after, .all_brands .h2:after { width: 38%; margin: 14px 0; } } @media screen and (max-width: 480px) { .all_brands h2:before, .all_brands .h2:before, .all_brands h2:after, .all_brands .h2:after { width: 30%; } } @media screen and (max-width: 375px) { .all_brands h2:before, .all_brands .h2:before, .all_brands h2:after, .all_brands .h2:after { width: 28%; } } @media screen and (max-width: 360px) { .all_brands h2:before, .all_brands .h2:before, .all_brands h2:after, .all_brands .h2:after { width: 24%; } } .all_brands h2:after, .all_brands .h2:after { right: 0; left: auto; } .all_brands ul li { width: 25%; display: inline-block; margin: 0; padding: 0 0 10px; float: left; } .all_brands ul li a { text-decoration: none; color: #333; font-weight: 300; text-transform: capitalize; } @media screen and (max-width: 768px) { .all_brands ul li { width: 33%; } } @media screen and (max-width: 480px) { .all_brands ul li { width: 50%; } } @media screen and (max-width: 360px) { .all_brands ul li { width: 90%; margin: 0 5%; } } /* collection */ .category-link-blocks { /* margin:50px 0 0; */ margin: 0; padding: 0; list-style: none; } .category-link-blocks li { width: 23.5%; float: left; margin: 0 0 0 2%; display: inline-block; } .category-link-blocks li:first-child { margin-left: 0; } @media screen and (max-width: 768px) { .category-link-blocks li { width: 48%; margin: 0 1% 15PX; } .category-link-blocks li:first-child { margin-left: 1%; } } @media screen and (max-width: 480px) { .category-link-blocks li { width: 98%; } } .category-link-blocks li a { border: 1px solid #30422e; padding: 10px 5px; display: block; color: #30422e; text-decoration: none; /*.large-text{font-size:22px; font-family:'BebasNeueRegular'; font-weight:400;}*/ } .category-link-blocks li a span { display: block; margin: 0; line-height: normal; text-transform: uppercase; } .category-link-blocks li a br { display: none; } .category-link-blocks li a .small-text { font-size: 13px; color: #000; font-weight: 400; } .category-link-blocks li a:hover { background: #30422e; color: #fff; } .category-link-blocks li a:hover .small-text { color: #fff; } .collection-header { width: 100%; display: inline-block; margin: 0 0 30px 0; } .collection-header.bottom_description { margin: 30px 0 30px 0; } .collection-header.bottom_description h1, .collection-header.bottom_description .h1, .collection-header.bottom_description #shopify-product-reviews .spr-header-title, #shopify-product-reviews .collection-header.bottom_description .spr-header-title { border-top: 1px solid #d3d3d5; padding-top: 20px; } .collection-header .h1 { color: #000; font-size: 48px; margin-bottom: 20px; line-height: 1; } .collection-header p { font-size: 14px; font-weight: 300; color: #000; margin: 0 0 10px 0; } .collection-header p.read_more { color: #30422e; font-weight: 500; text-decoration: underline; cursor: pointer; } .collection-header h2, .collection-header .h2 { font-size: 1.6em; } .collection-header .collection-description a { text-decoration: none; } .collection-header a { font-size: 14px; color: #30422e; font-weight: 500; text-decoration: underline; } .collection-header .read_more, .collection-header .read_less { display: inline-block !important; width: auto !important; } @media screen and (max-width: 480px) { .collection-header .h1 { font-size: 34px; } .collection-header p { font-size: 14px; } } .collection-header h2.small-title, .collection-header .small-title.h2 { display: none; } .collection-header .products-grid.visible-xs { display: none; } .collection-header #show-brands { display: none; } .collection-header .mobile-read-more-btn { display: none; } .collection-section { background: #fff; width: 100%; display: inline-block; /*padding:(0) 0 $gutter*1.5;*/ } .collection-section .product-count { width: 100%; display: inline-block; text-align: center; font-weight: 600; padding: 0 0 20px; color: #000; font-size: 14px; } .collection-section .wrapper { padding: 0; } .collection-section .collection-wrapper { max-width: 1140px; margin: 0 auto; padding: 50px 60px; } @media screen and (max-width: 1024px) { .collection-section .collection-wrapper { padding: 30px 39px; } } @media screen and (max-width: 768px) { .collection-section .collection-wrapper { padding: 30px; } } .collection-section .filter-header { width: 100%; display: inline-block; background: #333; padding: 5px 30px; } @media screen and (max-width: 1024px) { .collection-section .filter-header { padding: 5px 10px; } } .collection-section a.compare-detail-btn { border: 1px solid #338491; border-radius: 2px; font-size: 11px; color: #338491; /*font-family: Montserrat,sans-serif;*/ font-weight: 600; display: inline-block; padding: 5px 12px; } .collection-section a.compare-detail-btn:hover { border: 1px solid #333; color: #333; } @media screen and (max-width: 568px) { .collection-section a.compare-detail-btn { padding: 5px 8px; } } @media screen and (max-width: 414px) { .collection-section a.compare-detail-btn { padding: 5px 10px; } } @media screen and (max-width: 405px) { .collection-section a.compare-detail-btn { font-size: 12px; width: 100%; text-align: center; margin-bottom: 5px; } } .collection-section label { color: #6db9c5; font-weight: 500; padding-right: 5px; } .collection-section .sort-by label { color: #fff; } .collection-section select { /*background: url(https://cdn.shopify.com/s/files/1/0054/3965/1958/files/gray-arrow.png?14511510080331276531) right 10px center no-repeat;*/ border: 0; font-size: 12px; font-weight: 300; color: #cfcece; } .collection-section select:focus, .collection-section select:hover { outline: 0; box-shadow: 0; } @media screen and (max-width: 1024px) { .collection-section select { width: 135px; padding-left: 5px; } } .compare-detail-wrap { /*font-family: Montserrat,sans-serif; font-weight: 600;*/ width: 100%; display: inline-block; } .compare-detail-wrap label { position: relative; width: auto; float: left; margin-right: 5px; } .compare-detail-wrap label .SPCMP_Add { opacity: 0; width: 100%; position: absolute; left: 0; height: 30px; cursor: pointer; } .compare-detail-wrap label .SPCMP_Add_span { border: 1px solid #30422e; cursor: pointer; font-size: 11px; color: #30422e; text-transform: uppercase; padding: 5px 12px; display: block; line-height: normal; } .compare-detail-wrap label .SPCMP_Add_span:hover { border: 1px solid #333; } .compare-detail-wrap a.detail-btn { border: 1px solid #30422e; font-size: 11px; color: #30422e; display: inline-block; padding: 5px 12px; text-transform: uppercase; line-height: normal; width: 100%; text-align: center; } .compare-detail-wrap a.detail-btn:hover { border: 1px solid #30422e; background: #30422e; color: #fff; transition: all 0.5s; } @media screen and (max-width: 1024px) { .template-collection .compare-detail-wrap label .SPCMP_Add_span { padding: 5px; } } @media screen and (max-width: 375px) { .template-collection .compare-detail-wrap label { position: relative; width: 100%; margin-right: 0; text-align: center; padding: 0; } .template-collection .compare-detail-wrap a.detail-btn { width: 100%; text-align: center; } } .collection-delivery-section { padding: 30px 0; width: 100%; } .collection-delivery-section .delivery-item { position: relative; } .collection-delivery-section .delivery-item:before { content: ""; width: 1px; height: 70px; background: #fff; margin: auto; left: 0; top: 0; bottom: 0; position: absolute; } @media screen and (max-width: 766px) { .collection-delivery-section .delivery-item:before { display: none; } } @media screen and (max-width: 766px) { .collection-delivery-section .small--one-whole { width: 100%; } } .collection-delivery-section .h1 { margin-bottom: 0; } .collection-delivery-section h2, .collection-delivery-section .h2, .collection-delivery-section .h4 { /*font-family: Montserrat,sans-serif;font-weight:500;*/ font-size: 18px; text-transform: none; margin-bottom: 30px; } .collection-delivery-section .h4 { font-size: 14px; font-weight: 300; } /* Recently Viewed */ .recently-viewed { background: #eaeaea; padding: 25px 0; margin: 40px 0 0 0; } .template-collection .recently-viewed { margin: 0; background: #fff; } .recently-viewed img { border: 1px solid #ccc; width: 70px; } .recently-viewed h3, .recently-viewed .h3 { position: relative; margin-bottom: 15px; /*&:before{content:"";position:absolute;left:0;right:0;width:100%;height:1px; background:#d6e6e9; top:15px;}*/ } .recently-viewed h3 span, .recently-viewed .h3 span { background: #eaeaea; display: inline-block; padding: 0 15px; position: relative; font-size: 25px; } .recently-viewed ul { text-align: center; } .recently-viewed ul li { display: inline-block; margin: 0 9px; } .recently-viewed ul li:first-child { margin-left: 0; } .recently-viewed ul li:last-child { margin-right: 0; } .recently-viewed ul li a { display: inline-block; } @media screen and (max-width: 1026px) { .recently-viewed ul li { margin: 0 3px; } } @media screen and (max-width: 480px) { .recently-viewed { padding: 30px 0 20px 0; } } .template-collection .recently-viewed h3 span, .template-collection .recently-viewed .h3 span { background: #fff; } .collection-foot-section { width: 100%; padding: 45px 0; background-size: cover !important; /* background:url('https://cdn.shopify.com/s/files/1/0054/3965/1958/files/collection-foot-sec-bg.jpg?14511510080331276531') center top no-repeat; */ } .collection-foot-section .section-wrap { max-width: 970px; margin: 0 auto; background: rgba(255, 255, 255, 0.9); min-height: 550px; -webkit-clip-path: polygon(100% 0, 100% 22%, 96% 37%, 100% 54%, 100% 100%, 0 100%, 0 51%, 0 0); clip-path: polygon(100% 0, 100% 22%, 96% 37%, 100% 54%, 100% 100%, 0 100%, 0 51%, 0 0); } .collection-foot-section .h1, .collection-foot-section .h2 { margin: 0; color: #fff; font-size: 48px; } .collection-foot-section .h2 { font-size: 32px; margin-bottom: 10px; } .collection-foot-section p { font-size: 13px; font-weight: 300; line-height: 18px; } .collection-foot-section p b { display: block; } .collection-foot-section .what-section, .collection-foot-section .how-section { width: 100%; display: inline-block; padding: 40px; padding-bottom: 50px; padding-right: 70px; background: #338491; position: relative; } .collection-foot-section .what-section .h1, .collection-foot-section .what-section .h2, .collection-foot-section .how-section .h1, .collection-foot-section .how-section .h2 { color: #fff; } .collection-foot-section .what-section p, .collection-foot-section .how-section p { color: #fff; font-weight: 400; word-spacing: 1px; } .collection-foot-section .how-section { background: #333; } .collection-foot-section .how-section:after { content: ''; border-bottom: 92px solid transparent; border-right: 32px solid #338491; z-index: 99; position: absolute; top: 0; right: 0; } .collection-foot-section .choose-section { width: 100%; display: inline-block; padding: 55px 40px 0 10px; } .collection-foot-section .choose-section .h2, .collection-foot-section .choose-section p { color: #000; } .collection-foot-section .choose-section .h2 { line-height: 32px; } .collection-foot-section .choose-section p { margin-bottom: 25px; } @media screen and (max-width: 768px) { .collection-foot-section .h1, .collection-foot-section .h2 { font-size: 38px; } .collection-foot-section .h2 { font-size: 28px; } .collection-foot-section .what-section, .collection-foot-section .how-section { padding: 20px; padding-bottom: 30px; padding-right: 60px; } .collection-foot-section .choose-section { padding: 30px 30px 0 0; } } @media screen and (max-width: 761px) { .collection-foot-section { background-size: cover; } .collection-foot-section .small--one-whole { width: 100%; text-align: center !important; } .collection-foot-section .section-wrap { min-height: inherit; -webkit-clip-path: none; clip-path: none; } .collection-foot-section .choose-section { padding: 20px; } } /* page */ .search_result-grid a.compare-detail-btn { border: 1px solid #338491; border-radius: 2px; font-size: 11px; color: #338491; /*font-family: Montserrat,sans-serif;*/ font-weight: 600; display: inline-block; padding: 5px 12px; } .search_result-grid a.compare-detail-btn:hover { border: 1px solid #333; color: #333; } @media screen and (max-width: 414px) { .search_result-grid a.compare-detail-btn { padding: 5px 10px; } } @media screen and (max-width: 568px) { .search_result-grid a.compare-detail-btn { padding: 5px 8px; } } @media screen and (max-width: 405px) { .search_result-grid a.compare-detail-btn { font-size: 12px; width: 100%; text-align: center; margin-bottom: 5px; } } /* product page */ #ProductSection { background: #fff; } #ProductSection .breadcrumb-wrap { /*padding-top:$gutter/2;*/ } #ProductSection .breadcrumb-wrap .breadcrumb { max-width: 1170px; margin: 0 auto; padding: 0 15px; height: 40px; } #ProductSection .product-section { background: #e1dbc8; width: 100%; display: inline-block; /*.slider-loading{width:100%; position:absolute; height:60px; bottom:0; top:43%; z-index:9999;}*/ } #ProductSection .product-section .wrapper { background: #fff; border-top: 6px solid #806e59; padding: 51px 80px; margin-bottom: 50px; } @media screen and (max-width: 769px) { #ProductSection .product-section .wrapper { padding: 30px 40px; margin-bottom: 30px; } } @media screen and (max-width: 480px) { #ProductSection .product-section .wrapper { padding: 20px; } } #ProductSection .product-section .slider-loading { width: 100%; height: 50px; display: inline-block; padding: 48% 0px; position: relative; z-index: 10; } #ProductSection .product-section .product-description-section { margin: 0 auto; padding-bottom: 45px; } @media screen and (max-width: 767px) { #ProductSection .product-section .product-description-section { margin-left: 30px; } } #ProductSection .product-section .product-title { margin-bottom: 0; /*font-family: Montserrat,sans-serif;text-transform: capitalize;font-weight:600;*/ font-size: 26px; line-height: normal; } @media screen and (max-width: 990px) { #ProductSection .product-section .product-title { font-size: 26px; } } @media screen and (max-width: 768px) { #ProductSection .product-section .product-title { font-size: 22px; } } #ProductSection .product-section .free-delivery p.free-delivery-truck { align-items: center; display: none; font-weight: 600; margin: 0; margin-top: 25px; border-top: 1px solid #EAEAEA; border-bottom: 1px solid #EAEAEA; color: #d07701; } #ProductSection .product-section .free-delivery p.free-delivery-truck.active { display: flex; } #ProductSection .product-section .free-delivery p.free-delivery-truck img { margin: 5px 15px 5px 5px; height: 27px; } #ProductSection .product-section .form-actions { display: flex; align-items: flex-end; } #ProductSection .product-section .form-actions .js-qty .js--qty-adjuster, #ProductSection .product-section .form-actions .ajaxifyCart--qty .js--qty-adjuster, #ProductSection .product-section .form-actions .js-qty .ajaxifyCart--qty-adjuster, #ProductSection .product-section .form-actions .ajaxifyCart--qty .ajaxifyCart--qty-adjuster, #ProductSection .product-section .form-actions .js-qty .ajaxifyCart--qty-adjuster, #ProductSection .product-section .form-actions .ajaxifyCart--qty .ajaxifyCart--qty-adjuster { min-height: 49px; } #ProductSection .product-section .form-actions .js-qty input[type="text"], #ProductSection .product-section .form-actions .ajaxifyCart--qty input[type="text"], #ProductSection .product-section .form-actions .ajaxifyCart--qty input[type="text"] { min-height: 49px; } #ProductSection .product-section .form-actions .payment-buttons.payment-buttons--medium { flex-grow: 1; } #ProductSection .product-section .form-actions .payment-buttons.payment-buttons--medium button#addToCart-product-template { width: 100%; height: 49px; padding-right: 10px; padding-left: 10px; } @media (max-width: 768px) { #ProductSection .product-section .form-actions { flex-wrap: wrap; } #ProductSection .product-section .form-actions .form-qty-element { margin-bottom: 25px; } } #ProductSection .product-section .product-second-section { width: 100%; position: relative; display: inline-block; padding: 10px 0 15px; } #ProductSection .product-section .product-second-section .review { display: block; width: 80%; } #ProductSection .product-section .product-second-section .stock { margin: 0; font-size: 13px; color: #000; font-weight: 300; width: 75%; } #ProductSection .product-section .product-second-section .stock span { font-weight: 600; color: #98c2ac; display: inline-block; width: 100%; } #ProductSection .product-section .product-second-section .ship_note { color: #000 !important; padding-left: 5px; font-weight: 400 !important; } #ProductSection .product-section .product-second-section .add-wishlist { top: -5px; right: 0; } #ProductSection .product-section .product-second-section a.compare-detail-btn { border: 1px solid #338491; border-radius: 2px; font-size: 11px; color: #338491; float: right; margin-top: -20px; /*font-family: Montserrat,sans-serif; font-weight:600;*/ display: inline-block; padding: 5px 12px; /*text-transform:uppercase;*/ } #ProductSection .product-section .product-second-section a.compare-detail-btn:hover { border: 1px solid #000; color: #000; } #ProductSection .product-section .product-second-section .compare-detail-btn input { border: 1px solid #338491; border-radius: 2px !important; -webkit-border-radius: 2px !important; font-size: 11px; color: #338491; float: right; margin-top: -20px; /*font-family: Montserrat,sans-serif; font-weight:600;*/ display: inline-block; padding: 5px 12px; /*text-transform:uppercase;*/ background: none !important; } #ProductSection .product-section .product-second-section .compare-detail-btn input:hover { border: 1px solid #000; color: #000; } #ProductSection .product-section .customer-review-section h3.h1, #ProductSection .product-section .customer-review-section .h1.h3 { /*font-family: Montserrat,sans-serif;text-transform:none;font-weight: 600;*/ } #ProductSection .product-section .discount-section .discount-section-inner { margin-bottom: 20px; display: flex; align-items: center; background: #ffffff; padding: 5px 15px; min-height: 70px; border: solid 1px #2f422d; } #ProductSection .product-section .discount-section .discount-section-inner .trustpilot-widget { width: 100%; } #ProductSection .product-section .discount-section .discount-section-inner .tp-widget-stars { width: 150px !important; } #ProductSection .product-section .discount-section .discount-text { display: inline-block; line-height: normal; font-weight: 300; } #ProductSection .product-section .discount-section .discount-text p { margin: 0 0 0px 0; color: #000; font-size: 15px; } #ProductSection .product-section .discount-section .discount-text p b { font-size: 18px; font-weight: normal; font-family: "Baskerville No 2", serif; } #ProductSection .product-section .discount-section .discount-image-small img { vertical-align: top; /*margin: 0 $gutter - 10 0 0;*/ margin: 0; width: 45px; } @media screen and (max-width: 480px) { #ProductSection .product-section .discount-section img { margin: 0 10px 0 0; width: 30px; } } #ProductSection .product-section .social-sharing { margin-bottom: 20px; } #ProductSection .product-section .social-sharing .share-facebook, #ProductSection .product-section .social-sharing .share-twitter, #ProductSection .product-section .social-sharing .share-google { background-color: transparent; } #ProductSection .product-section .social-sharing .share-facebook:hover, #ProductSection .product-section .social-sharing .share-twitter:hover, #ProductSection .product-section .social-sharing .share-google:hover { opacity: 0.8; } #ProductSection .product-section .new_price { color: #bf524b; } #ProductSection .product-section .old_price { color: #000 !important; font-size: 18px; margin-left: 10px; } #ProductSection .product-section .old_price .compare_price { text-decoration: none; } @media screen and (max-width: 480px) { #ProductSection .product-section .old_price { font-size: 14px; } } #ProductSection .product-section .product-item-tag.sale { position: relative; } #ProductSection .product-section .social-sharing-wrap label { font-size: 12px; font-weight: 600; margin: 0; } #ProductSection .product-section .sort-note { font-size: 13px; font-weight: 300; } #ProductSection .product-description { /*font-family: Montserrat,sans-serif; font-weight:300;*/ line-height: 18px; color: #333; display: inline-block; font-size: 13px; } #ProductSection .product-description h3, #ProductSection .product-description .h3, #ProductSection .product-description h5, #ProductSection .product-description .h5 { font-size: 18px; /* font-weight:600; font-family: Montserrat,sans-serif;*/ text-transform: none; } #ProductSection .product-description h5, #ProductSection .product-description .h5 { font-size: 14px; margin: 0; } #ProductSection .product-description p { font-size: 13px; font-weight: 300; } #ProductSection .product-description span { font-size: 13px; font-weight: 300; margin-bottom: 5px; display: inline-block; } #ProductSection .product-description ul { list-style: disc; padding-left: 10px; margin: 0 0 30px; } #ProductSection .product-description ul li { font-size: 13px; font-weight: 300; } #ProductSection .related-products { padding: 0 0 30px 0; } #ProductSection .related-products .grid, #ProductSection .related-products .grid--rev, #ProductSection .related-products .grid--full { background: #fff; padding: 10px 40px; margin: 0; } #ProductSection .related-products .grid .grid-item, #ProductSection .related-products .grid--rev .grid-item, #ProductSection .related-products .grid--full .grid-item { padding-bottom: 15px; } @media screen and (max-width: 1024px) { #ProductSection .related-products .grid, #ProductSection .related-products .grid--rev, #ProductSection .related-products .grid--full { margin: 0; padding: 10px 20px; } } #ProductSection .related-products h2.h1, #ProductSection .related-products .h1.h2 { text-transform: uppercase; margin: 30px 0; font-size: 36px; } #ProductSection .related-products h2.h1 span, #ProductSection .related-products .h1.h2 span { padding: 15px; background: #fff; } @media screen and (max-width: 480px) { #ProductSection .related-products h2.h1, #ProductSection .related-products .h1.h2 { font-size: 26px; } } #ProductSection .related-products .review-star { padding-bottom: 10px; margin-bottom: 0; } #ProductSection .related-products a.compare-detail-btn { border: 1px solid #338491; border-radius: 2px; font-size: 11px; color: #338491; /*font-family: Montserrat,sans-serif; font-weight:600;*/ display: inline-block; padding: 5px 12px; } #ProductSection .related-products a.compare-detail-btn:hover { border: 1px solid #333; color: #333; } @media screen and (max-width: 414px) { #ProductSection .related-products a.compare-detail-btn { padding: 5px 10px; } } @media screen and (max-width: 568px) { #ProductSection .related-products a.compare-detail-btn { padding: 5px 8px; } } #ProductSection .related-products .collection_row_view_more { padding: 20px 0 0; } #ProductSection .related-products .collection_row_view_more a:hover { text-decoration: none; } @media screen and (max-width: 990px) { #ProductSection .collection_row_pro_bg .grid > .grid-item, #ProductSection .collection_row_pro_bg .grid--rev > .grid-item, #ProductSection .collection_row_pro_bg .grid--full > .grid-item { width: 25%; } #ProductSection .collection_row_pro_bg .grid > .grid-item:nth-of-type(n+5), #ProductSection .collection_row_pro_bg .grid--rev > .grid-item:nth-of-type(n+5), #ProductSection .collection_row_pro_bg .grid--full > .grid-item:nth-of-type(n+5) { display: none; } #ProductSection .collection_row_pro_bg .grid > .grid-item a.compare-detail-btn, #ProductSection .collection_row_pro_bg .grid--rev > .grid-item a.compare-detail-btn, #ProductSection .collection_row_pro_bg .grid--full > .grid-item a.compare-detail-btn { padding: 5px 10px; } } @media screen and (max-width: 768px) { #ProductSection .collection_row_pro_bg .grid > .grid-item, #ProductSection .collection_row_pro_bg .grid--rev > .grid-item, #ProductSection .collection_row_pro_bg .grid--full > .grid-item { padding: 10px; } } @media screen and (max-width: 568px) { #ProductSection .collection_row_pro_bg .grid > .grid-item a.compare-detail-btn, #ProductSection .collection_row_pro_bg .grid--rev > .grid-item a.compare-detail-btn, #ProductSection .collection_row_pro_bg .grid--full > .grid-item a.compare-detail-btn { padding: 5px 8px; } } @media screen and (max-width: 738px) { #ProductSection .collection_row_pro_bg .grid > .grid-item, #ProductSection .collection_row_pro_bg .grid--rev > .grid-item, #ProductSection .collection_row_pro_bg .grid--full > .grid-item { width: 33%; } #ProductSection .collection_row_pro_bg .grid > .grid-item:nth-of-type(n+4), #ProductSection .collection_row_pro_bg .grid--rev > .grid-item:nth-of-type(n+4), #ProductSection .collection_row_pro_bg .grid--full > .grid-item:nth-of-type(n+4) { display: none; } } @media screen and (max-width: 480px) { #ProductSection .collection_row_pro_bg .grid > .grid-item, #ProductSection .collection_row_pro_bg .grid--rev > .grid-item, #ProductSection .collection_row_pro_bg .grid--full > .grid-item { width: 50%; } #ProductSection .collection_row_pro_bg .grid > .grid-item:nth-of-type(n+3), #ProductSection .collection_row_pro_bg .grid--rev > .grid-item:nth-of-type(n+3), #ProductSection .collection_row_pro_bg .grid--full > .grid-item:nth-of-type(n+3) { display: none; } } @media screen and (max-width: 375px) { #ProductSection .collection_row_pro_bg .grid > .grid-item a.compare-detail-btn, #ProductSection .collection_row_pro_bg .grid--rev > .grid-item a.compare-detail-btn, #ProductSection .collection_row_pro_bg .grid--full > .grid-item a.compare-detail-btn { font-size: 12px; width: 100%; text-align: center; margin-bottom: 5px; } } /* #Swatch Styles ================================================== */ /*.selector-wrapper, .select { display: none; }*/ .select .label_hidden { display: none; } .swatch_options { margin-bottom: 1em; } .swatch .option_title { margin: 0.5em 0; font-weight: 700; text-transform: capitalize; } /* Hide radio buttons.*/ .swatch input { display: none; } .swatch label { float: left; min-width: 25px; height: 35px; margin: 0; font-size: 13px; text-align: center; line-height: 35px; white-space: nowrap; text-transform: uppercase; cursor: pointer; padding: 0 10px; font-weight: bold; } .swatch .color label { width: 26px; height: 26px; line-height: 26px; } .swatch-element { border: 1px solid #e2e2e2; } .swatch-element.color, .swatch-element.color label { border: 1px solid #e8dede; border-radius: 30px; /* overflow: hidden; */ /* border:1px solid #e2e2e2; */ /* border: none; */ } .swatch-element.color { padding: 2px; } .color.swatch-element label { padding: 5px; } .swatch_options input:checked + .swatch-element { border-color: #666; } .swatch .swatch-element { float: left; -webkit-transform: translateZ(0); -webkit-font-smoothing: antialiased; margin: 0px 5px 10px 0; position: relative; } .crossed-out { position: absolute; width: 100%; height: 100%; left: 0; top: 0; } .swatch .swatch-element .crossed-out { display: none; } .swatch .swatch-element.soldout .crossed-out { display: none; height: 100%; width: 100%; } .swatch .swatch-element.soldout label { filter: alpha(opacity=50); -khtml-opacity: 0.5; -moz-opacity: 0.5; opacity: 0.5; } .swatch .swatch-element.soldout label:before { content: ' '; position: absolute; left: 2px; top: 13px; width: 27px; height: 2px; background: #fff; transform: rotate(-45deg); } .swatch .swatch-element.soldout label:after { content: ' '; position: absolute; left: 2px; top: 14px; width: 27px; height: 2px; background: #fff; transform: rotate(45deg); } /* .swatch .swatch-element.soldout label {filter: alpha(opacity=100); -khtml-opacity: 1; -moz-opacity: 1; opacity: 1;} */ /* .swatch .swatch-element.soldout label {filter: alpha(opacity=60); -khtml-opacity: 0.6; -moz-opacity: 0.6; opacity: 0.6;}*/ /* Tooltips */ .swatch .tooltip { text-align: center; background: #333; background: rgba(51, 51, 51, 0.9); color: #fff; bottom: 100%; padding: 5px 10px; display: block; position: absolute; width: 120px; font-size: 13px; left: -42px; margin-bottom: 15px; /* Make it invisible by default */ filter: alpha(opacity=0); -khtml-opacity: 0; -moz-opacity: 0; opacity: 0; visibility: hidden; /* Animations */ -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -ms-transform: translateY(10px); -o-transform: translateY(10px); transform: translateY(10px); -webkit-transition: all .25s ease-out; -moz-transition: all .25s ease-out; -ms-transition: all .25s ease-out; -o-transition: all .25s ease-out; transition: all .25s ease-out; -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); z-index: 10000; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .swatch .tooltip:before { bottom: -20px; content: " "; display: block; height: 20px; left: 0; position: absolute; width: 100%; } /* CSS triangle */ .swatch .tooltip:after { border-left: solid transparent 10px; border-right: solid transparent 10px; border-top: solid rgba(51, 51, 51, 0.9) 10px; bottom: -10px; content: " "; height: 0; left: 50%; margin-left: -13px; position: absolute; width: 0; } .swatch .swatch-element:hover .tooltip { filter: alpha(opacity=100); -khtml-opacity: 1; -moz-opacity: 1; opacity: 1; visibility: visible; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } .payment-buttons button { background: #98c2ac; padding: 8px 40px; } .payment-buttons button:hover { background: #fff; color: #98c2ac; border: 1px solid #98c2ac; transition: all 0.3s; } .payment-buttons button.disabled:hover { border-color: transparent; background: #f6f6f6; color: #b6b6b6; } button.store-btn { border-radius: 2px; background: #fff; color: #338491; border: 1px solid #338491; } button.store-btn:hover { background: #338491; color: #fff; } .template-product .related-products.collection_row_pro_bg { background-color: transparent; margin-bottom: 0; margin-top: 30px; } .template-product ul.product-photo-thumbs li { opacity: 0.5; } .template-product ul.product-photo-thumbs li.flex-active-slide { opacity: 1; } /* Blog */ .blog-header { display: inline-block; margin: 0 0 45px; } @media screen and (max-width: 769px) { .blog-header { margin: 0 0 30px; } } .blog-header .breadcrumb { margin-bottom: 0; } .blog-header h1, .blog-header .h1, .blog-header #shopify-product-reviews .spr-header-title, #shopify-product-reviews .blog-header .spr-header-title { color: #30422e; font-size: 48px; font-weight: 500; margin: 0 0 30px; line-height: 48px; } @media screen and (max-width: 769px) { .blog-header h1, .blog-header .h1, .blog-header #shopify-product-reviews .spr-header-title, #shopify-product-reviews .blog-header .spr-header-title { font-size: 34px; line-height: 36px; margin: 0 0 20px; } } .blog-hero-image { height: 600px; } @media screen and (max-width: 768px) { .blog-hero-image { height: 400px; } } .blog-section { background: #fff; width: 100%; display: inline-block; padding: 0; } .blog-section .wrapper { padding: 0; } @media screen and (max-width: 768px) { .blog-section .wrapper { padding: 0 15px; } } .blog-section .masonary-blog-wrap { width: 100%; display: inline-block; padding: 0; margin: 15px 0 30px; position: relative; } @media screen and (max-width: 1026px) { .blog-section .masonary-blog-wrap { margin: 15px 0 30px 2%; width: 98% !important; } } @media screen and (max-width: 768px) { .blog-section .masonary-blog-wrap { margin: 15px 0 30px 0%; width: 100% !important; } } .blog-section .grid-item { margin-bottom: 30px; } @media screen and (max-width: 768px) { .blog-section .grid-item { width: 25%; } } @media screen and (max-width: 568px) { .blog-section .grid-item { width: 33%; } } @media screen and (max-width: 480px) { .blog-section .grid-item { width: 50%; } } .blog-section .inner { padding: 30px; background: #eaeaea; } @media screen and (max-width: 480px) { .blog-section .inner { padding: 15px; } } .blog-section .blog-thumb { width: 100%; display: block; } .blog-section .blog-thumb img { max-width: 100%; display: block; } .blog-section h2, .blog-section .h2 { font-size: 32px; color: #30422e; padding: 0; line-height: normal; margin: 0 0 10px; } .blog-section h2 a, .blog-section .h2 a { color: #30422e; transition: all 0.3s; } .blog-section h2 a:hover, .blog-section .h2 a:hover { color: #98c1ab; transition: all 0.3s; } @media screen and (max-width: 767px) { .blog-section h2, .blog-section .h2 { font-size: 26px; } } .blog-section p { font-size: 16px; color: #000; margin: 0 0 20px; word-break: break-word; } @media screen and (max-width: 480px) { .blog-section p { font-size: 14px; } } .blog-section a.read-blog { background: #30422e; color: #fff; text-transform: uppercase; padding: 7px 22px; display: block; width: 180px; font-size: 14px; margin-top: 10px; border: 1px solid transparent; font-weight: 600; transition: all 0.3s; } .blog-section a.read-blog:hover { background: #eaeaea; color: #30422e; border: 1px solid #30422e; transition: all 0.3s; } @media screen and (min-width: 768px) { .blog-section .first-blog h2, .blog-section .first-blog .h2 { font-size: 48px; } .blog-section .first-blog a.read-blog { font-size: 16px; padding: 7px 35px; } } .blog-section .blog-pagination { background: #fff; max-width: 1170px; margin: 15px auto; padding: 5px 0; } .blog-section .recently-viewed { padding: 30px 0; margin-bottom: 0; } .blog-section .recently-viewed h2, .blog-section .recently-viewed .h2 { font-size: 24px; } @media screen and (max-width: 568px) { .blog-section .collection_row_pro_bg .grid-uniform > .grid-item:nth-of-type(n+4) { display: none; } } @media screen and (max-width: 480px) { .blog-section .collection_row_pro_bg .grid-uniform > .grid-item:nth-of-type(n+3) { display: none; } } .grid-sizer, .grid-wrap { width: 31.33%; } .grid-wrap { margin-bottom: 30px; } .gutter-sizer { width: 2%; } .grid-wrap--width2 { width: 64.66%; } @media screen and (max-width: 769px) { .grid-wrap { width: 100%; } .grid-wrap--width2 { width: 100%; } } .meteor-menu[data-meteor-template=tidal][data-size=normal], .meteor-menu[data-meteor-template=tidal][data-size=narrow] { width: 100% !important; left: 0 !important; right: 0 !important; } .meteor-menu[data-meteor-template=tidal] .m-pointer { border: none; } .site-nav--active div .m-links a:after, .site-nav--active div .m-nav a:after { display: none !important; } /* Artical */ .article_content span { padding: 0 0 20px; display: inline; line-height: 26px; } .alignleft { display: inline; float: left; margin-right: 1.625em; } .alignright { display: inline; float: right; margin-left: 1.625em; } .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; } img.alignleft, img.alignright, img.aligncenter { margin-bottom: 1.625em; } @media screen and (max-width: 767px) { .filter-by { display: inline-block; width: 50%; } } @media screen and (max-width: 480px) { .filter-by { width: 100%; } } /* Reward Benefits */ .reward-benefits-section { max-width: 900px; margin: 0 auto; padding: 50px 0; float: none; } @media screen and (max-width: 767px) { .reward-benefits-section { padding: 20px 0 0; } } .reward-benefits-section h2, .reward-benefits-section .h2 { color: #267987; font-size: 35px; margin-bottom: 30px; } @media screen and (max-width: 769px) { .reward-benefits-section h2, .reward-benefits-section .h2 { margin-bottom: 0px; font-size: 25px; } } .reward-benefits-section .reward-item { width: 100%; display: inline-block; padding: 10px; color: #000; } @media screen and (max-width: 769px) { .reward-benefits-section .reward-item { margin-top: 20px; } } .reward-benefits-section .silver_tier { border: 2px solid #857d7d; border-top: 8px solid #857d7d; } .reward-benefits-section .gold_tier { border: 2px solid #e3c281; border-top: 8px solid #e3c281; } .reward-benefits-section .platinum_tier { border: 2px solid #3f3a4b; border-top: 8px solid #3f3a4b; } .reward-benefits-section .reward-header { width: 100%; display: inline-block; padding: 15px 0 0; } .reward-benefits-section .reward-header h4, .reward-benefits-section .reward-header .h4 { color: #000; font-size: 36px; line-height: normal; margin: 0 0 5px; } @media screen and (max-width: 767px) { .reward-benefits-section .reward-header h4, .reward-benefits-section .reward-header .h4 { font-size: 28px; } } .reward-benefits-section .reward-header p { font-size: 16px; margin: 0 0 3px; } .reward-benefits-section .reward-header span { font-weight: 700; font-size: 22px; width: 100%; display: inline-block; } @media screen and (max-width: 767px) { .reward-benefits-section .reward-header span { font-size: 16px; } } .reward-benefits-section .reward-list { width: 100%; padding: 25px 0 0; display: block; } .reward-benefits-section .reward-list ul { margin: 0; padding: 0; list-style: none; } .reward-benefits-section .reward-list ul li { width: 100%; padding: 5px 0; display: block; font-size: 14px; margin: 0; border-top: 1px solid #839a9f; } .reward-benefits-section a { color: #000; font-size: 26px; } .vapeclub-wrap { width: 100%; display: inline-block; padding: 80px 15px 70px; margin: 0; text-align: center; background: url("https://cdn.shopify.com/s/files/1/0054/3965/1958/files/vape-club-banner.jpg?2760807135872495193") center no-repeat; background-size: cover; } @media screen and (max-width: 767px) { .vapeclub-wrap { padding: 50px 15px; } } .vapeclub-wrap .shogun-image { width: 100%; display: inline-block; margin: 0 0 20px; } .vapeclub-wrap .shogun-image img { max-width: 200px; display: inline-block; } @media screen and (max-width: 767px) { .vapeclub-wrap .shogun-image img { max-width: 120px; } } .vapeclub-wrap h2, .vapeclub-wrap .h2 { color: #fff; font-size: 35px; } @media screen and (max-width: 767px) { .vapeclub-wrap h2, .vapeclub-wrap .h2 { font-size: 28px; } } @media screen and (max-width: 480px) { .vapeclub-wrap h2, .vapeclub-wrap .h2 { font-size: 24px; } } .vapeclub-wrap p { color: #fff; } .how-it-work-section { padding: 30px 0; width: 100%; background: #f1f1f1; display: inline-block; } .how-it-work-section h4, .how-it-work-section .h4 { margin-bottom: 0; font-size: 35px; color: #060606; } .how-it-work-section p { margin-bottom: 0; font-size: 16px; font-weight: 400; color: #222; } .how-it-work-section .icon { width: 100%; display: inline-block; margin: 0 0 10px; } .how-it-work-section .icon img { max-width: 70px; } .text-msg { width: 100%; display: inline-block; padding: 20px 0 0; } .text-msg .wrap { max-width: 1020px; margin: 0 auto; padding: 0 15px; } .text-msg p { font-size: 16px; margin: 0; color: #333; text-align: justify; } @media screen and (max-width: 480px) { .text-msg p { font-size: 14px; } .text-msg p:br { display: none; } } /* Login */ .login-wrap { width: 100%; display: inline-block; } .login-wrap h1, .login-wrap .h1, .login-wrap #shopify-product-reviews .spr-header-title, #shopify-product-reviews .login-wrap .spr-header-title { color: #30422e; font-size: 35px; margin-bottom: 30px; text-align: center; } @media screen and (max-width: 480px) { .login-wrap h1, .login-wrap .h1, .login-wrap #shopify-product-reviews .spr-header-title, #shopify-product-reviews .login-wrap .spr-header-title { font-size: 28px; margin-bottom: 15px; } } .login-wrap h4, .login-wrap .h4 { color: #30422e; font-size: 14px; font-family: inherit; } /* Register */ .register-wrap { width: 100%; display: inline-block; padding: 0 0 20px; /*a.flits-btn{display:none;}*/ } .register-wrap h1, .register-wrap .h1, .register-wrap #shopify-product-reviews .spr-header-title, #shopify-product-reviews .register-wrap .spr-header-title { color: #30422e; font-size: 35px; margin-bottom: 30px; text-align: center; } @media screen and (max-width: 480px) { .register-wrap h1, .register-wrap .h1, .register-wrap #shopify-product-reviews .spr-header-title, #shopify-product-reviews .register-wrap .spr-header-title { font-size: 28px; margin-bottom: 15px; } } .register-wrap p { margin: 0 0 20px 30px; font-size: 16px; } .register-wrap .btn, .register-wrap .btn-secondary, .register-wrap input[type="submit"], .register-wrap .header-cart-btn, .register-wrap .shopify-payment-button .shopify-payment-button__button--unbranded, .shopify-payment-button .register-wrap .shopify-payment-button__button--unbranded { padding: 15px 30px; margin-left: -30px; text-transform: none; /*font-family: Montserrat,sans-serif; font-weight: 400;*/ } .footer-top { width: 100%; background: #d3d3d5; text-align: center; margin: 0 0 50px; font-size: 1em; display: inline-block; } @media screen and (max-width: 769px) { .footer-top { margin: 0 0 30px; } } .footer-top .footer-top-center { width: 74%; display: inline-block; } @media screen and (max-width: 769px) { .footer-top .footer-top-center { width: 60%; } } .footer-top .footer-top-center p { margin: 0; padding: 10px 0; } .footer-top .footer-top-left, .footer-top .footer-top-right { background: #195e69; padding: 10px 30px; display: inline-block; width: 13%; } .footer-top .footer-top-left svg, .footer-top .footer-top-right svg { width: 16px; fill: #fff; } .footer-top .footer-top-left svg path, .footer-top .footer-top-right svg path { fill: #fff; } .footer-top .footer-top-left:hover, .footer-top .footer-top-right:hover { background-color: #0e4149; -webkit-transition: opacity 0.05s ease-in; -moz-transition: opacity 0.05s ease-in; -ms-transition: opacity 0.05s ease-in; -o-transition: opacity 0.05s ease-in; transition: opacity 0.05s ease-in; } @media screen and (max-width: 1026px) { .footer-top .footer-top-left, .footer-top .footer-top-right { width: 12%; padding: 10px 15px; } } @media screen and (max-width: 769px) { .footer-top .footer-top-left, .footer-top .footer-top-right { width: 16%; } } @media screen and (max-width: 768px) { .footer-top .footer-top-left, .footer-top .footer-top-right { width: 25%; } } @media screen and (max-width: 480px) { .footer-top .footer-top-left, .footer-top .footer-top-right { width: 40%; } } @media screen and (max-width: 360px) { .footer-top .footer-top-left, .footer-top .footer-top-right { width: 46%; } } .footer-top .footer-top-left a, .footer-top .footer-top-right a { color: #fff; display: flex; font-weight: 600; align-items: center; justify-content: space-between; } .footer-top .footer-top-left { float: left; text-align: left; } .footer-top .footer-top-right { float: right; text-align: right; } .vaping_box { display: none; background: #338391; color: #fff; } .vaping_box .vaping_menu { display: table; width: 100%; margin: 0; border-bottom: 1px solid #81c0cc; } .vaping_box .vaping_menu li { display: table-cell; text-align: center; padding: 15px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 0; } .vaping_box .vaping_menu a { color: #fff; } @media screen and (max-width: 767px) { .vaping_box .vaping_menu { padding: 7px; } .vaping_box .vaping_menu li { padding: 7px; font-size: 13px; } } @media screen and (max-width: 480px) { .vaping_box .vaping_menu li { display: block; font-size: 14px; } } .flex-wrap { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; justify-content: left; flex: 0 1 auto; align-content: baseline; flex-flow: row wrap; } .footer-menu { margin: 0; padding: 0; list-style: none; } @media screen and (max-width: 480px) { .footer-menu { display: none; } } .footer-menu li { width: 100%; display: inline-block; vertical-align: top; font-size: 12px; font-weight: 500; padding: 0 0 3px; } @media screen and (max-width: 480px) { .footer-menu li { font-size: 14px; padding-left: 10px; } } .footer-menu.about, .footer-menu.vaping, .footer-menu.legal, .footer-menu.education { margin-top: 40px; } @media screen and (max-width: 480px) { .footer-menu.about, .footer-menu.vaping, .footer-menu.legal, .footer-menu.education { margin-top: 0px; } } @media screen and (max-width: 480px) { .footer-menu.service, .footer-menu.vaping, .footer-menu.legal { margin-top: 0px; margin-bottom: 10px; } } .foot-logo-list { margin: 0; } .foot-logo-list li { width: auto; display: inline-block; padding: 0 30px; } .foot-logo-list li img { vertical-align: middle; } @media screen and (max-width: 1026px) { .foot-logo-list li { padding: 0 10px; } } @media screen and (max-width: 769px) { .foot-logo-list li { width: 18%; padding: 0 12px; } } @media screen and (max-width: 480px) { .foot-logo-list li { width: 30%; } } .newsletter-wrap { width: 100%; display: none; margin-top: 50px; } .newsletter-wrap h3, .newsletter-wrap .h3 { margin-bottom: 10px; } .newsletter-wrap p { font-size: 11px; margin-bottom: 5px; } .newsletter-wrap input.input-group-field { border: 1px solid #fff; background: transparent; color: #fff; } .newsletter-wrap .sign-up-btn { background: #fff; color: #000; margin-left: -5px; padding: 0 15px; font-size: 18px; } #insta-feed .overlay::before { background: 75px !important; } #insta-feed .overlay::after { background-color: #30422e !important; opacity: .6 !important; } .payment-note { font-size: 11px; } .product-item--type { font-size: 0.8572em; text-transform: uppercase; margin-bottom: 5px; } .product-item--vendor { font-size: 0.8572em; margin-bottom: 7px; width: 100%; display: inline-block; } .product-flavour { font-size: 0.786em; margin-bottom: 5px; font-weight: 500; color: #333; width: 100%; display: inline-block; line-height: 1; } .product-item--title { font-weight: 500; line-height: 1.3em; margin: 0; height: 66px; } .product-item--title a { color: #333; font-size: 14px; font-weight: 600; } .product-item--price { position: relative; } .add-wishlist { width: 20px; height: 20px; position: absolute; right: 3px; top: 3px; cursor: pointer; /* background:url('https://cdn.shopify.com/s/files/1/0054/3965/1958/files/heart-icon.png?6905608861282320734') left top no-repeat; */ /* &:hover{background-position:left bottom;} */ } .product-item-tag { background-color: #30422e; width: 100%; position: absolute; left: 0; bottom: 0; color: #fff; padding: 2px 12px; text-transform: uppercase; font-size: 12px; } @media screen and (max-width: 414px) { .product-item-tag { padding: 2px 8px; } } .product-second-section.nic_short_tag { padding: 10px 0 !important; } .product-item-tag.nic_short { font-weight: 400; position: relative; display: inline; font-size: 12px; padding: 5px 10px; } .product-item-tag.sale { background-color: #98c1ab; } .template-collection .sale { display: none; } .template-collection .on-sale .sale { display: inline-block; padding-bottom: 2px; } .template-page .grid-item.large h1, .template-page .grid-item.large .h1, .template-page .grid-item.large #shopify-product-reviews .spr-header-title, #shopify-product-reviews .template-page .grid-item.large .spr-header-title { text-align: center; font-size: 2.4em; } .featured-collection-list .compare-detail-wrap { display: none; } .featured-list-cta-block { display: block; position: absolute; bottom: 10%; left: 5%; } .featured-list-cta-block .featured-box--title { font-size: 30px; font-family: "Baskerville No 2", serif; font-weight: normal; padding: 0; color: #000; text-align: left; } .featured-list-cta { /*text-align: center; border: 2px solid #000; padding: 5px 15px; width: fit-content; margin:10px 0 0 0; color:#000; font-size: 15px; font-weight: 600;*/ display: block; width: fit-content; position: relative; margin: 10px 0 0 0; padding: 5px 15px; border: 2px solid #000; color: #000; font-size: 15px; font-weight: 600; z-index: 0; transition: color .3s ease-out; } .featured-list-cta:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #000; transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s ease-out; } .featured-box:hover .featured-list-cta:before { transform: scaleX(1); } .featured-box:hover .featured-list-cta { color: #fff; } .featured-collection-list { max-width: 1300px; margin: auto; } .featured-collection-list .grid-item { padding: 0 6px !important; border: none !important; } /*.featured-collection-list .featured-box--title {color:#fff; background-color:#30422e;}*/ .collection-row-section-bg, .featured-collection-list { background-color: #fff; padding: 30px 0; } .collection-row-section-bg .section-header, .featured-collection-list .section-header { margin-bottom: 0; text-align: center; } .collection-row-section-bg .section-header h2, .collection-row-section-bg .section-header .h2, .featured-collection-list .section-header h2, .featured-collection-list .section-header .h2 { display: inline-block; margin-bottom: 0; font-size: 36px; background-color: #fff; padding: 3px 30px; } @media screen and (max-width: 480px) { .collection-row-section-bg .section-header h2, .collection-row-section-bg .section-header .h2, .featured-collection-list .section-header h2, .featured-collection-list .section-header .h2 { font-size: 25px; padding: 10px 20px 5px; } } .collection_row_view_more { text-align: center; width: 100%; display: inline-block; } .collection_row_view_more a { color: #30422e; font-size: 16px; font-family: "Baskerville No 2", serif; text-decoration: underline; } .collection_row_pro_bg { background-color: #fff; padding: 15px 15px 0; margin: auto; } .collection_row_pro_bg .product-grid-item { margin-bottom: 15px; } .section_new_vaping { padding: 100px 0 100px 0; background: #eaeaea; /* url(https://cdn.shopify.com/s/files/1/0020/3184/5451/files/what-is-cbd-background.png?46881) center; background-size:cover;*/ } .blog_box_bg { padding: 20px 35px 20px 50px; position: relative; } .blog_box_bg h3, .blog_box_bg .h3 { color: #fff; font-family: inherit; text-transform: initial; font-size: 16px; font-weight: 600; } .blog_image { position: relative; /*&:after {content: "";width: 0;height: 0;border-top: 92px solid transparent;border-bottom: 92px solid transparent;border-right: 32px solid white;z-index: 99;position: absolute;bottom: -92px;right: 0;}*/ } .blog_image img { display: block; width: 100%; } .left_section { background-color: #30422e; color: #fff; position: relative; /* &:after{content: "";width: 0;height: 0;border-top: 92px solid transparent;border-left: 32px solid white;z-index: 99;position: absolute;bottom: 0;left: 0;}*/ } .left_section a { color: #fff; } .left_section p { font-size: 15px; line-height: normal; } .left_section p a { color: #fff; text-decoration: underline; } /*.main_blog_title{text-transform: uppercase;font-family:'BebasNeueRegular';font-size:30px;line-height:1.2em;margin-bottom:15px;letter-spacing:1px;position:relative; @include at-query($max, $medium) { font-size:26px; } &:before{content: '';font-family: 'BebasNeueRegular';font-size:160px;line-height: 127px;position: absolute;left: -47px; @include at-query($max, $medium) { font-size:130px;line-height: 100px; } } a{color:#fff;} }*/ /* #launcher{display:none;} */ #launcher { bottom: 20px !important; } #launcher .u-userLauncherColor:not([disabled]) { color: #fff !important; fill: #fff !important; } @media screen and (max-width: 414px) { #launcher .src-component-Launcher-wrapperMobile { padding: 0.6rem !important; } } .other_blog { margin-top: 50px; } .other_blog p { margin-bottom: 10px; } .new_vaping_title { text-align: center; } @media screen and (max-width: 480px) { .new_vaping_title { margin-top: 30px; } } .new_vaping_title h2, .new_vaping_title .h2 { display: inline-block; overflow: hidden; padding-bottom: 22px; } .new_vaping_title span { background-color: #30422e; color: #fff; font-size: 36px; letter-spacing: 1px; padding: 5px 28px 7px 28px; position: relative; /*&:after{content:'';position:absolute;top:100%;left:50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);-moz-transform: translateX(-50%);-ms-transform: translateX(-50%);-o-transform: translateX(-50%);border-top:#30422e 20px solid;border-left:200px solid transparent;border-right:200px solid transparent;}*/ } .home_pro_sub_title { text-align: center; font-weight: 700; text-transform: uppercase; margin-bottom: 10px; color: #000; font-size: 16px; } .home_pro_content { text-align: center; font-size: 16px; color: #000; font-weight: 300; } .select_pro_box { /* background: #eaf2f3 url(https://cdn.shopify.com/s/files/1/0054/3965/1958/files/new-vaping-select_pro_box-bg.png?7465031054175991520) right bottom no-repeat; */ padding: 25px; margin-top: 35px; margin-bottom: 25px; background: linear-gradient(150deg, #eaf2f3, #f3faff, #9ebec3); } @media screen and (max-width: 360px) { .select_pro_box { padding: 20px; } } .s_pro_image img { display: block !important; margin: 0 auto; } .s_pro_type { text-transform: uppercase; color: #333333; font-size: 12px; margin-bottom: 5px; } .s_pro_title { font-size: 21px; font-weight: 600; line-height: 1.3em; margin-bottom: 10px; color: #333; } @media screen and (max-width: 480px) { .s_pro_title { font-size: 18px; } } @media screen and (max-width: 360px) { .s_pro_title { font-size: 16px; } } .s_pro_price { font-size: 21px; font-weight: 600; color: #32808e; } @media screen and (max-width: 480px) { .s_pro_price { font-size: 18px; } } @media screen and (max-width: 360px) { .s_pro_price { font-size: 16px; } } .s_pro_content { font-size: 18px; font-weight: 600; color: #30422e; margin-top: 20px; } @media screen and (max-width: 480px) { .s_pro_content { font-size: 16px; } } @media screen and (max-width: 360px) { .s_pro_content { font-size: 13px; } } .section_new_vaping .product-grid-item { margin-bottom: 15px; } .collection_row_pro_bg .grid-uniform, .collection_row_pro_bg .grid, .collection_row_pro_bg .grid--rev, .collection_row_pro_bg .grid--full, .select_pro_collection .grid-uniform, .select_pro_collection .grid, .select_pro_collection .grid--rev, .select_pro_collection .grid--full, .collection_grid_view .grid-uniform, .collection_grid_view .grid, .collection_grid_view .grid--rev, .collection_grid_view .grid--full { margin-left: -15px; margin-right: -15px; } .collection_row_pro_bg .grid-uniform > .grid-item, .collection_row_pro_bg .grid > .grid-item, .collection_row_pro_bg .grid--rev > .grid-item, .collection_row_pro_bg .grid--full > .grid-item, .select_pro_collection .grid-uniform > .grid-item, .select_pro_collection .grid > .grid-item, .select_pro_collection .grid--rev > .grid-item, .select_pro_collection .grid--full > .grid-item, .collection_grid_view .grid-uniform > .grid-item, .collection_grid_view .grid > .grid-item, .collection_grid_view .grid--rev > .grid-item, .collection_grid_view .grid--full > .grid-item { padding-left: 15px; padding-right: 15px; border: 1px solid transparent; margin-bottom: 15px; padding-bottom: 15px; } .collection_row_pro_bg .grid-uniform > .grid-item:hover, .collection_row_pro_bg .grid > .grid-item:hover, .collection_row_pro_bg .grid--rev > .grid-item:hover, .collection_row_pro_bg .grid--full > .grid-item:hover, .select_pro_collection .grid-uniform > .grid-item:hover, .select_pro_collection .grid > .grid-item:hover, .select_pro_collection .grid--rev > .grid-item:hover, .select_pro_collection .grid--full > .grid-item:hover, .collection_grid_view .grid-uniform > .grid-item:hover, .collection_grid_view .grid > .grid-item:hover, .collection_grid_view .grid--rev > .grid-item:hover, .collection_grid_view .grid--full > .grid-item:hover { border: 1px solid #30422e; position: relative; transition: all 0.5s; /*&:before{content: '';position: absolute;right: 0;bottom: 0;border-bottom: 20px solid #30422e;border-left:20px solid transparent;z-index: 8;} &:after{content: '';position: absolute;right: -1px;bottom: -1px;border-bottom: 20px solid #ffffff;border-left: 20px solid transparent;z-index: 9;}*/ } .collection_row_pro_bg .product-item--price .h1, .select_pro_collection .product-item--price .h1, .collection_grid_view .product-item--price .h1 { margin-bottom: 5px; } .template-collection .collection_grid_view .grid-uniform > .grid-item { padding-bottom: 15px; margin-bottom: 0; } .footer_review_info { font-size: 11px; font-weight: 600; } .product-description table tbody tr th, .product-description table tbody tr td { padding: 10px 15px; } .product-description table tbody tr th:first-child, .product-description table tbody tr td:first-child { background: #eee; } @media screen and (max-width: 768px) { .site-header { display: none; } .collection_row_pro_bg .grid-uniform > .grid-item:nth-of-type(n+5) { display: none; } .section_new_vaping { padding: 30px 0; } } @media screen and (max-width: 480px) { /* .collection_row_pro_bg .grid-uniform > .grid-item:nth-of-type(n+3){display:none;} */ .select_pro_collection .grid-uniform > .grid-item:nth-of-type(n+3) { display: none; } } @media screen and (max-width: 769px) { .site-nav { margin-top: 0; } .site-nav a { padding: 5px; font-size: 19px; } } /* CSM page ankit */ .cms-text-block { max-width: 1140px; margin: 0 auto; width: 100%; } .cms-text-block h1, .cms-text-block .h1, .cms-text-block #shopify-product-reviews .spr-header-title, #shopify-product-reviews .cms-text-block .spr-header-title { font-size: 5em !important; } .cms-text-block .title-text { font-size: 3em; padding: 10px 0; line-height: normal; } .cms-text-block li, .cms-text-block p { text-align: justify; } .cms-text-block li { padding: 0 0 0 30px; } .cms-text-block li:before { content: "\f111"; font-family: FontAwesome; font-size: 8px; vertical-align: middle; color: #348390; margin: 5px 0 0 -15px; position: absolute; } .beginners-guide-to-vape-kits p { font-size: 16px; } @media screen and (min-width: 481px) { .medium-up--flex { display: flex; } } @media screen and (max-width: 990px) and (min-width: 768px) { .collection_row_pro_bg .grid-uniform > .grid-item { width: 33.3%; } .collection_row_pro_bg .grid-uniform > .grid-item:nth-of-type(n+5) { display: none; } .select_pro_collection .grid-uniform > .grid-item { width: 50%; } .select_pro_collection .grid-uniform > .grid-item:nth-of-type(n+3) { display: none; } } @media screen and (max-width: 990px) { .blog_box_bg { padding: 20px 20px 20px 36px; } .main_blog_title:before { font-size: 115px; line-height: 95px; left: -33px; } /*.blog_image:after{border-top: 80px solid transparent;border-bottom: 80px solid transparent;border-right: 25px solid white;bottom:-80px;right:-1px;}*/ /*.left_section:after {border-top: 80px solid transparent;border-left: 25px solid white;bottom: -1px;left: -1px;}*/ } @media screen and (max-width: 768px) { .cms-text-block h1, .cms-text-block .h1, .cms-text-block #shopify-product-reviews .spr-header-title, #shopify-product-reviews .cms-text-block .spr-header-title { font-size: 4em !important; } } @media screen and (max-width: 767px) and (min-width: 481px) { .select_pro_collection .grid-uniform > .grid-item { width: 50%; } .select_pro_collection .grid-uniform > .grid-item:nth-of-type(n+3) { display: none; } } @media screen and (max-width: 640px) { .cms-text-block h1, .cms-text-block .h1, .cms-text-block #shopify-product-reviews .spr-header-title, #shopify-product-reviews .cms-text-block .spr-header-title { font-size: 3em !important; } .cms-medium-text.title-text { font-size: 2.4em; } } @media screen and (max-width: 480px) { .cms-text-block { max-width: auto; width: 100%; padding: 0 10px; } .cms-text-block h1, .cms-text-block .h1, .cms-text-block #shopify-product-reviews .spr-header-title, #shopify-product-reviews .cms-text-block .spr-header-title { font-size: 2em !important; } .cms-medium-text.title-text { font-size: 1.5em; } } .sp_compare_tbl .sp_add_to_cart .sa_cmp_addcart, .sa_cmp_soldout { border: 1px solid #30422e !important; } .sp_compare_tbl .sp_add_to_cart .sa_cmp_addcart:hover { opacity: 0.7; } .sp_compare_tbl .sp_close { z-index: 9 !important; } .cart_loader:after { content: ' .'; animation: dots 3s steps(1, end) infinite; } @keyframes dots { 0%, 12.5% { opacity: 0; } 25% { opacity: 1; } 37.5% { text-shadow: .5em 0; } 50% { text-shadow: .5em 0, 1em 0; } } .d-none { display: none !important; } header.product-header { display: table; width: 100%; margin-bottom: 10px; padding-top: 1px; } header.product-header .title-container { display: table-cell; text-align: left; vertical-align: bottom; } header.product-header .product-jump-container { display: table-cell; text-align: right; vertical-align: bottom; } header.product-header h1, header.product-header .h1, header.product-header #shopify-product-reviews .spr-header-title, #shopify-product-reviews header.product-header .spr-header-title { font-size: emHeading(36px); margin-bottom: 0px; } @media screen and (max-width: 480px) { header.product-header h1, header.product-header .h1, header.product-header #shopify-product-reviews .spr-header-title, #shopify-product-reviews header.product-header .spr-header-title { display: none; } } header.product-header ul.product-jump { padding-top: 0px; margin-bottom: 8px; line-height: 1; font-size: 0.78571em; text-transform: uppercase; /*font-family: Montserrat,sans-serif;*/ } @media screen and (max-width: 480px) { header.product-header ul.product-jump { padding-top: 10px; } } header.product-header ul.product-jump li { display: inline-block; } header.product-header ul.product-jump li:after { content: ' | '; } header.product-header ul.product-jump li:last-child a { padding-right: 0px; } header.product-header ul.product-jump li:last-child:after { content: ''; } header.product-header a { text-decoration: none; color: #30422e; padding: 4px 6px; } header.product-header a:hover, header.product-header a:focus { color: #338491; } header.product-header a span { position: relative; top: -1px; } @media screen and (max-width: 480px) { header.product-header { text-align: center; } header.product-header .title-container { display: block; text-align: center; } header.product-header .product-jump-container { display: block; text-align: center; } } .medical-note { font-size: 10px; margin-top: 40px; } .rich-text { padding: 0 30px; } .rich-text a { text-decoration: underline; margin-bottom: 50px; } .rich-text .section-header { margin-bottom: 5px; } .grid-link__sale_price-old { text-decoration: none; text-transform: initial; } div#ajaxifyCart button.btn.checkout_btn, div#ajaxifyCart button.checkout_btn.btn-secondary, div#ajaxifyCart button.checkout_btn.header-cart-btn, div#ajaxifyCart .shopify-payment-button button.checkout_btn.shopify-payment-button__button--unbranded, .shopify-payment-button div#ajaxifyCart button.checkout_btn.shopify-payment-button__button--unbranded { display: none; } .partners-section { width: 100%; display: inline-block; padding: 20px 0 15px; text-align: center; } @media screen and (max-width: 769px) { .partners-section { padding: 30px 0 0; } } .partners-section h2, .partners-section .h2 { font-size: 36px; color: #30422e; text-align: center; position: relative; } @media screen and (max-width: 768px) { .partners-section h2, .partners-section .h2 { font-size: 30px; } } @media screen and (max-width: 480px) { .partners-section h2, .partners-section .h2 { font-size: 24px; } } .partners-section h2:before, .partners-section .h2:before, .partners-section h2:after, .partners-section .h2:after { content: ""; border-top: solid #d3d3d5; border-width: 1px 0 0; margin: 25px 0; height: 0; position: absolute; width: 38%; left: 0; } @media screen and (max-width: 768px) { .partners-section h2:before, .partners-section .h2:before, .partners-section h2:after, .partners-section .h2:after { width: 35%; margin: 20px 0; } } @media screen and (max-width: 480px) { .partners-section h2:before, .partners-section .h2:before, .partners-section h2:after, .partners-section .h2:after { width: 30%; margin: 15px 0; } } @media screen and (max-width: 375px) { .partners-section h2:before, .partners-section .h2:before, .partners-section h2:after, .partners-section .h2:after { width: 27%; } } @media screen and (max-width: 360px) { .partners-section h2:before, .partners-section .h2:before, .partners-section h2:after, .partners-section .h2:after { width: 24%; } } .partners-section h2:after, .partners-section .h2:after { right: 0; left: auto; } .partners-section ul { margin: 0 20px 5px; list-style: none; display: inline-block; width: 55%; } .partners-section ul li { width: 50%; float: left; text-align: center; margin: 0; vertical-align: middle; } .partners-section ul li.bb { border-bottom: 1px solid #d3d3d5; } @media screen and (max-width: 480px) { .partners-section ul li { padding: 0 5px; } } .partners-section ul li:first-child, .partners-section ul li.child-6 { border-left: 0px; } @media screen and (max-width: 768px) { .partners-section ul li:first-child, .partners-section ul li.child-6 { border-left: 10px solid white; } } .partners-section ul li a { display: block; } .partners-section ul li a:hover { opacity: 0.6; } .partners-section ul li img { max-width: 80%; display: inline-block; } .partners-section ul hr { margin: 0; } .main-usp-wrapper { /*border-bottom: 1px solid #d9d9da;*/ background-color: #e1dbc8; } @media (max-width: 768px) { .main-usp-wrapper { border-top: 1px solid #d9d9da; } } .main-usp-wrapper .usp-items { display: flex; } .main-usp-wrapper .usp-items .usp-item { display: flex; align-items: center; padding: 5px 0; justify-content: center; flex: 1; } .main-usp-wrapper .usp-items .usp-item:last-child { border: none; } .main-usp-wrapper .usp-items .usp-item .usp-image { height: 40px; display: flex; align-items: center; margin-right: 16px; } .main-usp-wrapper .usp-items .usp-item .usp-image img { height: 35px; } .main-usp-wrapper .usp-items .usp-item .usp-meta { display: flex; flex-direction: column; padding: 5px 0 0px 0; } .main-usp-wrapper .usp-items .usp-item .usp-meta p { font-size: 11px; margin: 0; } .main-usp-wrapper .usp-items .usp-item .usp-meta h3, .main-usp-wrapper .usp-items .usp-item .usp-meta .h3 { line-height: 1; font-size: 14px; color: #000; /*font-family: Montserrat;*/ margin: 0; } @media (max-width: 1020px) { .main-usp-wrapper .usp-items .usp-item.usp-3 { border: none; } .main-usp-wrapper .usp-items .usp-item.usp-4 { display: none; } } @media (max-width: 768px) { .main-usp-wrapper .usp-items .usp-item.usp-1 { display: none; } } @media (max-width: 550px) { .main-usp-wrapper .usp-items .usp-item.usp-2 { display: none; } } .product-review { position: relative; width: 250px; margin-bottom: 30px; } .product-review .trustpilot-widget { position: absolute !important; left: -61px; } .specialists { padding: 50px 0; color: #000; text-align: left !important; font-size: 18px; } .specialists h1, .specialists .h1, .specialists #shopify-product-reviews .spr-header-title, #shopify-product-reviews .specialists .spr-header-title { color: #000; font-size: 30px; } .specialists a { color: #000; text-decoration: underline; transition: all 0.3s; } .specialists a:hover { background: #e1dbc8; text-decoration: none; } .mainMenu { max-width: 100%; border-bottom: 2px solid #98c1ab; background: #fff; } /*.site-nav * { box-sizing: border-box; -webkit-transition: all 0.35s ease; transition: all 0.35s ease; } .site-nav li { display: inline-block; list-style: outside none none; overflow: hidden; margin-right: 20px; } .site-nav a { padding: 0 0.5em 0 0.2em; position: relative; display: inline-block; margin: 0; text-decoration: none; } .site-nav a:before, .site-nav a:after { position: absolute; -webkit-transition: all 0.35s ease; transition: all 0.35s ease; } .site-nav a:before { bottom:100%; display: block; height:3px; width: 3px; border-radius:1.5px; content: ""; background-color: #fff; } .site-nav a:after { padding: 0 0.2em 0 0.8em; position: absolute; bottom: 100%; right:0; content: attr(data-hover); color: #000 !important; white-space: nowrap; } .site-nav li:hover a, .site-nav .current a { transform: translateY(100%); }*/ .site-nav * { box-sizing: border-box; } .site-nav li { display: inline-block; list-style: outside none none; margin: 10px 0.8em; padding: 0; } .site-nav a { padding: 0.5em 0; padding-right: 5px; position: relative; text-decoration: none; top: 0; } .site-nav .site-nav--link:after { position: absolute; -webkit-transition: all 0.35s ease; transition: all 0.35s ease; top: 0; right: 0; display: block; width: 3px; height: 3px; border-radius: 1.5px; content: ""; background-color: #fff; } .site-nav .site-nav--link:hover:after, .site-nav .site-nav--active .site-nav--link:after { top: 59%; background-color: #000; } .site-nav .nav-dropdown-block-nav_link:after { position: absolute; -webkit-transition: all 0.35s ease; transition: all 0.35s ease; top: 0; display: inline-block; width: 3px; height: 3px; border-radius: 1.5px; content: ""; background-color: #97c1aa; margin-left: 5px; } .site-nav .nav-dropdown-block-nav_link:hover:after { top: 60%; background-color: rgba(255, 255, 255, 0.5); } .slider { max-width: 100%; padding: 0; /*background-color: #e1dbc8;*/ } .collection-wrapper1 { max-width: 1170px; margin: 0 auto; padding: 0 15px; } .breadcrumb { max-width: 1170px; margin: 0 auto; padding: 0 15px; } /*product-page full width*/ .product-top { width: 100%; padding: 0; margin: 0; background-color: #fff; } .product-top .wrapper { margin-bottom: 0 !important; border: none !important; } .product-content { width: 100%; padding: 0; margin: 0; background: #fff; } .product-content .wrapper { background-color: transparent !important; margin-bottom: 0 !important; border: none !important; } .product-content .wrapper .product-description-section { padding-bottom: 0 !important; } @media screen and (max-width: 480px) { .product-content .wrapper .product-description-section .grid-item { padding: 0; } } .product-content .wrapper .product-description-section .add-infos { margin-left: 50px; } @media screen and (max-width: 480px) { .product-content .wrapper .product-description-section .add-infos { margin-left: 0; } } .product-usps { width: 100%; padding: 0; margin: 0; background-color: #98c1ab; } .product-usps .wrapper { background-color: #98c1ab; color: #fff !important; padding: 40px 0 30px 0; margin-bottom: 0 !important; border: none !important; } .product-usps .wrapper .h1 { color: #fff !important; } .product-usps .icon img { max-height: 50px; } .collection-usps { width: 100%; padding: 0; margin: 0; background-color: #eaeaea; } .collection-usps .delivery-item:before { background: #c3c3c3 !important; } .collection-usps .wrapper { background-color: #eaeaea; color: #000 !important; padding: 40px 0 30px 0; margin-bottom: 0 !important; border: none !important; } .collection-usps .wrapper .h1 { color: #000 !important; } .collection-usps .icon img { max-height: 50px; } .product-reviews { width: 100%; padding: 0; margin: 0; background-color: #fff; } .product-reviews .wrapper { padding: 50px 0; margin-bottom: 0 !important; border: none !important; } /*.homepage-about {background:#e1dbc8 url(https://cdn.shopify.com/s/files/1/0020/3184/5451/files/illustration-test.png?20379) center; background-size:cover;}*/ .homepage-about { background: #eaeaea; } .collection-bottom-content { background: #eaeaea; color: #000; } .section_new_vaping .about-cbd .row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } .section_new_vaping .about-cbd .row .col { -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; position: relative; width: 100%; min-height: 1px; } @media screen and (max-width: 769px) { .section_new_vaping .about-cbd .row .col { margin-bottom: -160px; } } .section_new_vaping .about-cbd .row .col .content { right: 0; max-width: 700px; position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; text-align: center; color: #000; font-size: 30px; background: #fff; padding: 30px; margin-right: 30px; } @media screen and (max-width: 769px) { .section_new_vaping .about-cbd .row .col .content { position: relative; right: 0; top: 0; background: rgba(255, 255, 255, 0.76); max-width: 80%; margin: auto; } } .section_new_vaping .about-cbd .row .col .content .btn, .section_new_vaping .about-cbd .row .col .content .btn-secondary, .section_new_vaping .about-cbd .row .col .content input[type="submit"], .section_new_vaping .about-cbd .row .col .content .header-cart-btn, .section_new_vaping .about-cbd .row .col .content .shopify-payment-button .shopify-payment-button__button--unbranded, .shopify-payment-button .section_new_vaping .about-cbd .row .col .content .shopify-payment-button__button--unbranded { margin-top: 20px; } .section_new_vaping .about-cbd-cta { /*text-align: center; border: 2px solid #000; padding: 5px 15px; width: fit-content; margin:10px 0 0 0; color:#000; font-size: 15px; font-weight: 600;*/ text-transform: uppercase; text-align: center; display: inline-block; width: fit-content; position: relative; margin: 10px 0 0 0; padding: 5px 15px; border: 2px solid #000; color: #000; font-size: 15px; font-weight: 600; z-index: 0; transition: color .3s ease-out; } .section_new_vaping .about-cbd-cta:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #000; transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s ease-out; } .section_new_vaping .about-cbd-cta:hover:before { transform: scaleX(1); } .section_new_vaping .about-cbd-cta:hover { color: #fff; } .section_new_vaping .about-cbd .row .col .content .copy { /*border-top: solid 1px #000;*/ padding-top: 11px; font-size: 20px; } .section_new_vaping .about-cbd .row .col .image-wrap { float: left; position: relative; display: inline-block; margin-left: 30px; } @media screen and (max-width: 769px) { .section_new_vaping .about-cbd .row .col .image-wrap { float: none; display: block; margin-top: -30px; margin-left: 0; } } .section_new_vaping .about-cbd .row .col .image-wrap .main-image { max-width: 100%; height: auto; } @media screen and (max-width: 769px) { .section_new_vaping .about-cbd .row .col .image-wrap .main-image { width: 100%; } } .section_new_vaping .about-cbd .row .col .image-wrap .sub-image { position: absolute; width: 50%; bottom: -80px; left: -90px; width: 230px; } @media screen and (max-width: 769px) { .section_new_vaping .about-cbd .row .col .image-wrap .sub-image { display: none; } } .blog-hero-overlay { background: rgba(0, 0, 0, 0.5); height: 100%; width: 100%; display: flex; } .blog-hero-image .section-header .text-light, .blog-hero-image .section-header s { color: #fff !important; } .blog-hero-image .section-header h1, .blog-hero-image .section-header .h1, .blog-hero-image .section-header #shopify-product-reviews .spr-header-title, #shopify-product-reviews .blog-hero-image .section-header .spr-header-title { color: #fff; font-size: 50px; font-weight: 700; } .blog-hero-image .wrapper { margin: auto; } .article_content { margin: 0 30px; font-family: "Baskerville No 2", serif; font-size: 20px; } @media screen and (max-width: 769px) { .article_content { margin: 0; margin-left: -20px; } } .article_content ul { list-style: disc outside !important; } .article_content li { margin-bottom: 30px; } .article_content p { margin-bottom: 30px; } .article_content blockquote p { margin-bottom: 0; } .article_content a { color: #000; text-decoration: underline; transition: all 0.3s; } .article_content a:hover { background: #e1dbc8; text-decoration: none; transition: all 0.3s; } .article_content h2, .article_content .h2 { font-family: "Avenir Next", sans-serif; font-weight: 800; text-transform: uppercase; font-size: 30px; margin-top: 60px; margin-bottom: 10px; } .article_content h3, .article_content .h3 { font-family: "Avenir Next", sans-serif; font-weight: 600; text-transform: uppercase; font-size: 25px; } .article_content h4, .article_content .h4 { font-family: "Avenir Next", sans-serif; font-weight: 600; text-transform: uppercase; font-size: 20px; } /* Style the buttons that are used to open and close the accordion panel */ .accordion { background-color: #fff; color: #000; cursor: pointer; padding: 12px; width: 100%; text-align: left; border: none; outline: none; font-size: 18px; transition: 0.4s; } .accordheader { background-color: #fff; color: #000; cursor: pointer; padding: 18px; width: 100%; text-align: left; border: none; outline: none; transition: 0.4s; font-family: "Baskerville No 2", serif; font-size: 24px; border: solid 1px #000; margin: 10px 0; } .accordion:hover { background-color: #ccc; } .panel p { padding: 0 18px; } /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */ /*.accordactive { background-color: #fff; border-bottom: solid 1px #000; }*/ .panel { /*padding: 0 18px;*/ background-color: white; display: none; overflow: hidden; } .panelheader { border: solid 1px #000; margin-top: -10px; border-top: none; } .accordion:after { content: '\02795'; /* Unicode character for "plus" sign (+) */ font-size: 13px; color: #000; float: right; margin-left: 5px; line-height: 28px; } @media screen and (max-width: 769px) { .accordion:after { display: none; } } .accordactive:after { content: "\2796"; /* Unicode character for "minus" sign (-) */ } .accordheader:after { content: '\02795'; /* Unicode character for "plus" sign (+) */ font-size: 16px; color: #000; float: right; margin-left: 5px; line-height: 38px; } @media screen and (max-width: 769px) { .accordheader:after { display: none; } } .accordactive:after { content: "\2796"; /* Unicode character for "minus" sign (-) */ } #faqs-your-questions-answered-world-of-hemp .main-content { padding-bottom: 60px; } .section_new_vaping .wrapper { max-width: 1500px !important; } #about-us-our-story-world-of-hemp .section_new_vaping { padding: 20px 0 140px 0; background: none; } #about-us-our-story-world-of-hemp .section_new_vaping .about-cbd .row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } #about-us-our-story-world-of-hemp .section_new_vaping .about-cbd .row .col { -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; position: relative; width: 100%; min-height: 1px; } #about-us-our-story-world-of-hemp .section_new_vaping .about-cbd .row .col .content { right: 0; max-width: 700px; position: absolute; top: 14%; z-index: 10; text-align: left; font-size: 20px; background: #fff; padding: 30px; margin-right: 0; } @media screen and (max-width: 769px) { #about-us-our-story-world-of-hemp .section_new_vaping .about-cbd .row .col .content { position: relative; right: 0; top: 0; background: transparent; } } #about-us-our-story-world-of-hemp .section_new_vaping .about-cbd .row .col .content .btn, #about-us-our-story-world-of-hemp .section_new_vaping .about-cbd .row .col .content .btn-secondary, #about-us-our-story-world-of-hemp .section_new_vaping .about-cbd .row .col .content input[type="submit"], #about-us-our-story-world-of-hemp .section_new_vaping .about-cbd .row .col .content .header-cart-btn, #about-us-our-story-world-of-hemp .section_new_vaping .about-cbd .row .col .content .shopify-payment-button .shopify-payment-button__button--unbranded, .shopify-payment-button #about-us-our-story-world-of-hemp .section_new_vaping .about-cbd .row .col .content .shopify-payment-button__button--unbranded { margin-top: 20px; } #about-us-our-story-world-of-hemp .section_new_vaping .about-cbd .row .col .content .copy { border-top: solid 1px #000; padding-top: 11px; font-size: 20px; } #about-us-our-story-world-of-hemp .section_new_vaping .about-cbd .row .col .image-wrap { float: left; position: relative; display: inline-block; margin-left: 30px; } @media screen and (max-width: 769px) { #about-us-our-story-world-of-hemp .section_new_vaping .about-cbd .row .col .image-wrap { float: none; display: block; margin-top: -30px; margin-left: 0; } } #about-us-our-story-world-of-hemp .section_new_vaping .about-cbd .row .col .image-wrap .main-image { max-width: 100%; height: auto; } @media screen and (max-width: 769px) { #about-us-our-story-world-of-hemp .section_new_vaping .about-cbd .row .col .image-wrap .main-image { width: 100%; } } #about-us-our-story-world-of-hemp .section_new_vaping .about-cbd .row .col .image-wrap .sub-image { position: absolute; width: 50%; bottom: -80px; left: -90px; width: 230px; } @media screen and (max-width: 769px) { #about-us-our-story-world-of-hemp .section_new_vaping .about-cbd .row .col .image-wrap .sub-image { display: none; } } #about-us-our-story-world-of-hemp .about-text-image { display: flex; background-color: #eee; } #about-us-our-story-world-of-hemp .about-text-image .about-text-image-container { margin: auto; display: flex; flex-wrap: wrap-reverse; } #about-us-our-story-world-of-hemp .about-text-image .about-text-image-container .about-text-image-img { margin-top: 20px; margin-right: 40px; } #about-us-our-story-world-of-hemp .section-header h1, #about-us-our-story-world-of-hemp .section-header .h1, #about-us-our-story-world-of-hemp .section-header #shopify-product-reviews .spr-header-title, #shopify-product-reviews #about-us-our-story-world-of-hemp .section-header .spr-header-title { font-size: 4em; } #about-us-our-story-world-of-hemp .section-header p { text-align: center; } #about-us-our-story-world-of-hemp .about-us-content h2, #about-us-our-story-world-of-hemp .about-us-content .h2 { max-width: 600px; margin: 20px auto; } #about-us-our-story-world-of-hemp .about-us-content p { max-width: 600px; margin: 20px auto; font-size: 20px !important; color: #000; } #about-us-our-story-world-of-hemp .main-content { padding-bottom: 60px; } #about-us-our-story-world-of-hemp .main-content h2, #about-us-our-story-world-of-hemp .main-content .h2 { font-size: 30px; } #about-us-our-story-world-of-hemp .main-content ul { list-style: disc outside !important; font-size: 18px; } .store-text h2, .store-text .h2 { font-size: 30px; margin-top: 60px; margin-bottom: 10px; padding-right: 30px; } .store-text h2.address, .store-text .address.h2 { font-size: 30px; margin-bottom: 10px; padding-right: 30px; } .store-text h3, .store-text .h3 { font-size: 30px; margin-top: 20px; margin-bottom: 10px; padding-right: 30px; } .store-text p { margin: 20px auto; font-size: 20px !important; color: #000; padding-right: 30px; } .store-text li { font-size: 20px !important; color: #000; } .store-text hr { clear: both; border-top: solid #d3d3d5; border-width: 1px 0 0; margin: 0px 0; height: 0; width: 90%; } .store-text hr.second { clear: both; border-top: solid #000; border-width: 1px 0 0; margin: 0px 0; height: 0; width: 90%; padding-bottom: 15px; } .store-text hr.address { clear: both; width: 100%; border-top: solid #d3d3d5; border-width: 1px 0 0; margin: 0px 0; height: 0; padding-bottom: 15px; } .store_wrapper2 { color: #000; background-color: #e1dbc8; margin-top: 30px; padding-top: 10px; padding-left: 40px; margin-bottom: 40px; } .grid-item1 { width: 100%; padding-top: 20px; padding-bottom: 40px; } .store-top { margin-top: 20px; } .store-row { display: flex; flex-wrap: wrap; padding: 0 4px; } .grid-container1 { max-width: 1280px; margin: 0 auto; padding-top: 20px; padding-bottom: 20px; } .cols1 { margin: 0 auto; } .col1 { width: 25%; height: 250px; float: left; margin: 0; } .col1 img { display: block; position: relative; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0.8; } .grid-1 { width: 33%; } .grid-2 { width: 33%; } .grid-3 { float: right; height: 300px; } .grid-4 { width: 100%; } @supports (display: grid) or (display: -ms-grid) { .grid-area1 { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); grid-auto-rows: 250px; justify-content: center; } .col1 { width: 100%; height: 100%; float: none; } .grid-1 { grid-column-end: span 2; } .grid-3 { grid-row-end: span 2; } .grid-4 { grid-column-end: span 3; } } /* Media queries for other screen widths */ @media screen and (max-width: 450px) { .col1 { grid-row-end: unset; grid-column-end: unset; height: 250px; } .grid-area1 { display: flex; flex-direction: column; } .grid-3 { order: -1; height: 500px; } } .medical-disclaimer { background: #e1dbc8; padding: 20px; } .site-header--meta-links.contact-us { vertical-align: middle; width: 17px; height: 17px; display: inline-block; background: url("https://cdn.shopify.com/s/files/1/0020/3184/5451/files/001-telephone.svg?58901") left top no-repeat; background-size: 17px; margin-right: 5px; } .site-header--meta-links.store { vertical-align: middle; width: 17px; height: 17px; display: inline-block; background: url("https://cdn.shopify.com/s/files/1/0020/3184/5451/files/002-placeholder.svg?58901") left top no-repeat; background-size: 17px; margin-right: 5px; } .dosage-guide-table .shogun-table-row { min-width: 150px; } .delivery-tabs .shogun-tabs.shogun-rounded li .shogun-tab-box { border-radius: 0 !important; } ul.tabs { display: block; margin: 0px 0; border-bottom: solid 1px #cccccc; border-top: 0; list-style: none outside; margin-left: 0; text-transform: uppercase; padding-left: 0; } ul.tabs li { display: block; width: auto; height: 28px; padding: 0; float: left; border: 0; list-style: none outside; margin-left: 0; cursor: pointer; } ul.tabs li a { display: block; text-decoration: none; width: auto; height: 29px; line-height: 30px; margin-right: 40px; font-size: 14px; font-weight: 600; outline: none; } @media screen and (max-width: 768px) { ul.tabs li a { font-size: 12px !important; margin-right: 20px !important; } } ul.tabs li a.active { background-color: #ffffff; border-bottom: solid 3px #cccccc; height: 31px; position: relative; border-right-width: 1px; color: #4d4d4f; } ul.tabs li:last-child a { border-top-right-radius: 2px; } ul.tabs:before, ul.tabs:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } ul.tabs:after { clear: both; } .product-content1 { width: 100%; padding: 0; margin: 0; background: #fff; } .product-content1 .wrapper1 { background-color: transparent !important; margin-bottom: 0 !important; border: none !important; } .product-content1 .wrapper1 .product-description-section1 { padding-bottom: 0 !important; } @media screen and (max-width: 480px) { .product-content1 .wrapper1 .product-description-section1 .grid-item { padding: 0; } } .product-content1 .wrapper1 .product-description-section1 .add-infos { margin-left: 50px; } @media screen and (max-width: 480px) { .product-content1 .wrapper1 .product-description-section1 .add-infos { margin-left: 0; } } .wrapper1 { max-width: 1170px; margin: 0 auto; padding: 0 15px; } .wrapper1:after { content: ""; display: table; clear: both; } @media screen and (min-width: 481px) { .wrapper1 { /*padding: 0 $gutter;*/ } } .product-content1 { width: 100%; padding: 0; margin: 0; background: #fff; } .product-content1 .desc-wrapper { background-color: transparent !important; margin-bottom: 0 !important; border: none !important; } .product-content1 .desc-wrapper .product-description-section { padding-bottom: 0 !important; } @media screen and (max-width: 480px) { .product-content1 .desc-wrapper .product-description-section1 .grid-item { padding: 0; } } .product-content1 .desc-wrapper .product-description-section1 .add-infos { margin-left: 50px; } @media screen and (max-width: 480px) { .product-content1 .desc-wrapper .product-description-section1 .add-infos { margin-left: 0; } } .desc-wrapper { max-width: 1170px; margin: 0 auto; padding: 30px 15px; } .desc-wrapper:after { content: ""; display: table; clear: both; } @media screen and (min-width: 481px) { .desc-wrapper { /*padding: 0 $gutter;*/ } } .rewards-faq .shogun-accordion { border-radius: 0 !important; } .trade-association-heading { font-family: "Baskerville No 2", serif; margin-top: 30px; font-size: 30px; }