/* ------------------------------------------------------------------ - Document: SquareMile Coffee Shopify Theme - Version: 1.0.0 - Client: Square Mile Coffee - Author: James Holt / John D Wells - Started: 20 May 2013 ------------------------------------------------------------------ [Table of Contents] - Vendor Imports - 1st Party Variables - 1st Party Mixins - Typography /styling Resets - Utility Classes - Sub-Modules - Global styles - Module Imports - Page/Section Layout Imports - UI and interactions - overrides ------------------------------------------------------------------ ------------------------------------------------------------------ [ Imports ] -------------------------------------------------------------------*/ /* Vendor */ /* * Preboot v2 * * Open sourced under MIT license by @mdo. * Some variables and mixins from Bootstrap (Apache 2 license). */ /*! normalize.css v2.1.0 | MIT License | git.io/normalize */ /* ========================================================================== HTML5 display definitions ========================================================================== */ /** * Correct `block` display not defined in IE 8/9. */ article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } /** * Correct `inline-block` display not defined in IE 8/9. */ audio, canvas, video { display: inline-block; } /** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** * Address styling not present in IE 8/9. */ [hidden] { display: none; } /* ========================================================================== Base ========================================================================== */ /** * 1. Set default font family to sans-serif. * 2. Prevent iOS text size adjust after orientation change, without disabling * user zoom. */ html { font-family: sans-serif; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -ms-text-size-adjust: 100%; /* 2 */ } /** * Remove default margin. */ body { margin: 0; } /* ========================================================================== Links ========================================================================== */ /** * Address `outline` inconsistency between Chrome and other browsers. */ a:focus { outline: thin dotted; } /** * Improve readability when focused and also mouse hovered in all browsers. */ a:active, a:hover { outline: 0; } /* ========================================================================== Typography ========================================================================== */ /** * Address variable `h1` font-size and margin within `section` and `article` * contexts in Firefox 4+, Safari 5, and Chrome. */ h1 { font-size: 2em; margin: .67em 0; } /** * Address styling not present in IE 8/9, Safari 5, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /** * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. */ b, strong { font-weight: bold; } /** * Address styling not present in Safari 5 and Chrome. */ dfn { font-style: italic; } /** * Address differences between Firefox and other browsers. */ hr { box-sizing: content-box; height: 0; } /** * Address styling not present in IE 8/9. */ mark { background: #ff0; color: #000; } /** * Correct font family set oddly in Safari 5 and Chrome. */ code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; } /** * Improve readability of pre-formatted text in all browsers. */ pre { white-space: pre-wrap; } /** * Set consistent quote types. */ q { quotes: "\201C" "\201D" "\2018" "\2019"; } /** * Address inconsistent and variable font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* ========================================================================== Embedded content ========================================================================== */ /** * Remove border when inside `a` element in IE 8/9. */ img { border: 0; } /** * Correct overflow displayed oddly in IE 9. */ svg:not(:root) { overflow: hidden; } /* ========================================================================== Figures ========================================================================== */ /** * Address margin not present in IE 8/9 and Safari 5. */ figure { margin: 0; } /* ========================================================================== Forms ========================================================================== */ /** * Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: .35em .625em .75em; } /** * 1. Correct `color` not being inherited in IE 8/9. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */ legend { border: 0; /* 1 */ padding: 0; /* 2 */ } /** * 1. Correct font family not being inherited in all browsers. * 2. Correct font size not being inherited in all browsers. * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. */ button, input, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 2 */ margin: 0; /* 3 */ } /** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ button, input { line-height: normal; } /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. * Correct `select` style inheritance in Firefox 4+ and Opera. */ button, select { text-transform: none; } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */ button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } /** * Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor: default; } /** * 1. Address box sizing set to `content-box` in IE 8/9. * 2. Remove excess padding in IE 8/9. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome * (include `-moz` to future-proof). */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ /* 2 */ box-sizing: content-box; } /** * Remove inner padding and search cancel button in Safari 5 and Chrome * on OS X. */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * Remove inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /** * 1. Remove default vertical scrollbar in IE 8/9. * 2. Improve readability and alignment in all browsers. */ textarea { overflow: auto; /* 1 */ vertical-align: top; /* 2 */ } /* ========================================================================== Tables ========================================================================== */ /** * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } /* app */ /*------------------------------------------------------------------ Trade Gothic Condensed -------------------------------------------------------------------*/ @font-face { font-family: 'TradeGothicLTPro-Cn18'; src: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-font-trade-gothic-condensed-2771AE_0_0.eot?v=11995228035518775198); src: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-font-trade-gothic-condensed-2771AE_0_0.eot?%23iefix&v=11995228035518775198) format('embedded-opentype'), url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-font-trade-gothic-condensed-2771AE_0_0.woff?v=17464912500365895418) format('woff'), url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-font-trade-gothic-condensed-2771AE_0_0.ttf?v=17331321210058239360) format('truetype'); font-weight: normal; font-style: normal; } /*------------------------------------------------------------------ Trade Gothic Bold Condensed -------------------------------------------------------------------*/ @font-face { font-family: 'TradeGothicLTPro-BdCn20'; src: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-font-trade-gothic-bold-condensed-2771B1_0_0.eot?v=16968292097789040015); src: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-font-trade-gothic-bold-condensed-2771B1_0_0.eot?%23iefix&v=16968292097789040015) format('embedded-opentype'), url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-font-trade-gothic-bold-condensed-2771B1_0_0.woff?v=9704896615554508985) format('woff'), url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-font-trade-gothic-bold-condensed-2771B1_0_0.ttf?v=1187664063265307256) format('truetype'); font-weight: normal; font-style: normal; } /*------------------------------------------------------------------ Gentium -------------------------------------------------------------------*/ @font-face { font-family: 'gentium_basicregular'; src: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-font-gentium-webfont.eot?v=5439261207448862638); src: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-font-gentium-webfont.eot?%23iefix&v=5439261207448862638) format('embedded-opentype'), url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-font-gentium-webfont.woff?v=14244844508082395772) format('woff'), url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-font-gentium-webfont.ttf?v=4759904235423942901) format('truetype'), url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-font-gentium-webfont.svg%23gentium_basicregular?12274) format('svg'); font-weight: normal; font-style: normal; } /*------------------------------------------------------------------ Gentium italic -------------------------------------------------------------------*/ @font-face { font-family: 'gentium_basicitalic'; src: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-font-gentium-italic-webfont.eot?v=1451753360255736664); src: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-font-gentium-italic-webfont.eot?%23iefix&v=1451753360255736664) format('embedded-opentype'), url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-font-gentium-italic-webfont.woff?v=17057271126290346626) format('woff'), url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-font-gentium-italic-webfont.ttf?v=9700879747060547053) format('truetype'), url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-font-gentium-italic-webfont.svg%23gentium_basicitalic?12274) format('svg'); font-weight: normal; font-style: normal; } /*------------------------------------------------------------------ [ 1st Party Variables & general config ] -------------------------------------------------------------------*/ /* fonts */ /* colours */ /* core brand */ /* blacks */ /* greys */ /* Grid Settings Values from Chris' notes */ /*------------------------------------------------------------------ Default layout - mobile -------------------------------------------------------------------*/ /* Grid */ /* product */ /* single product */ /*------------------------------------------------------------------ Tablet - 768 and up -------------------------------------------------------------------*/ /* Grid */ /* product */ /* single product */ /* footer */ /*------------------------------------------------------------------ Desktop - 960 and up -------------------------------------------------------------------*/ /* Grid */ /* product */ /* single product */ /* footer */ /*------------------------------------------------------------------ Large Desktop - 1280 and up -------------------------------------------------------------------*/ /* Grid */ /* product */ /* single product */ /* footer */ /*------------------------------------------------------------------ Max width - 1400px -------------------------------------------------------------------*/ /* Grid */ /* product */ /* single product */ /* footer */ /*------------------------------------------------------------------ [ 1st Party Mixins ] -------------------------------------------------------------------*/ /* typography mixins */ /* background map mixin - all map images should be named as follows sqmile-map-{product-name}.png then simply pass the filename as a mixin parameter */ /*------------------------------------------------------------------ [ Typography & Styling Resets ] -------------------------------------------------------------------*/ * { margin: 0; padding: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; outline: none !important; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /* remove firefox outline */ a, a:hover, a:focus, a:active { outline: none !important; outline: 0 !important; outline-style: none; } html, body { font-family: 'gentium_basicregular', Georgia, Times, "Times New Roman", serif; color: #7e7d7d; font-style: normal; text-transform: none; letter-spacing: 0px; font-size: 14px; background-color: #f2f2f2; margin: 0; padding: 0; width: 100%; overflow-x: hidden; /*------------------------------------------------------------------ Tablet - 768 and up -------------------------------------------------------------------*/ } html h1, body h1, html h2, body h2, html h3, body h3, html h4, body h4, html h5, body h5, html h6, body h6 { font-weight: normal; } html b, body b { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; } a { text-decoration: none; transition: all 200ms cubic-bezier(.165, .84, .44, 1); } a:hover { transition: all 200ms cubic-bezier(.165, .84, .44, 1); } ul li { list-style-type: none; } b, strong { font-weight: normal; } /* selection */ ::-moz-selection { background: #f5f4f0; } ::selection { background: #f5f4f0; } ::-moz-selection { background: #f5f4f0; } a, img { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /*------------------------------------------------------------------ [ Utility Classes ] 'Utility' classes to be applied to individual DOM elements, which typically modify only a single or few styles. -------------------------------------------------------------------*/ /*------------------------------------------------------------------ [ Sub-Modules ] A "sub-module" is made up of a prescribed set of DOM elements and/or classes, which combined form a particular visual behaviour or layout. These are to be distinguished from a "module", since a "sub-module" can often be found within a "module"; whereas "modules" are NOT to be nested. -------------------------------------------------------------------*/ /*------------------------------------------------------------------ [ Global Styles ] -------------------------------------------------------------------*/ /*------------------------------------------------------------------ [ Module Imports ] After our imports, we have a few styles to deal with how one or more modules (or other elements) may interact. -------------------------------------------------------------------*/ /* common - this should be imported before any modules/layouts to ensure any overrides work as expected. */ /* Layout: Common Styles */ /*------------------------------------------------------------------ These are common syles shared throughout our modules and layouts - should any of these styles need overiding wihtin specific module/layouts the overides will be within the module/layout file. -------------------------------------------------------------------*/ /*------------------------------------------------------------------ [ loader ] -------------------------------------------------------------------*/ #sqmile-common-loader { display: none; background-color: rgba(242, 242, 242, .65); position: fixed; height: 100%; width: 100%; left: 0; top: 0; z-index: 99; } #sqmile-common-spinner { background-image: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-loader-01.gif?v=11203907995430172956); background-repeat: no-repeat; background-position: center center; background-size: 80%; position: absolute; display: none; height: 24px; width: 24px; left: 58px; top: 12px; } body.loading #sqmile-common-spinner { display: block; } /*------------------------------------------------------------------ [ main ] -------------------------------------------------------------------*/ #pack { position: relative; } #pack:before, #pack:after { content: " "; display: table; } #pack:after { clear: both; } #sqmile-common-main { position: relative; width: auto; top: 48px; } #sqmile-common-main:before, #sqmile-common-main:after { content: " "; display: table; } #sqmile-common-main:after { clear: both; } #sqmile-common-main .sqmile-product .interior-wrap { transition: all 600ms cubic-bezier(.165, .84, .44, 1); } /* resizing class */ #sqmile-common-main.resizing { opacity: .25; } #sqmile-common-main.resizing .sqmile-product .interior-wrap { transition: all 100ms cubic-bezier(.19, 1, .22, 1); background-color: transparent; } #sqmile-common-main.resizing .sqmile-product .sqmile-product-info-fold { background-color: transparent; } /*------------------------------------------------------------------ [ container ] -------------------------------------------------------------------*/ .sqmile-common-container { display: block; width: auto; padding-top: 27px; padding-bottom: 27px; position: relative; overflow: visible; /*------------------------------------------------------------------ Tablet - 768px and up -------------------------------------------------------------------*/ /*------------------------------------------------------------------ Desktop - 961px and up -------------------------------------------------------------------*/ /*------------------------------------------------------------------ Large Desktop - 1280px and up 4 columns -------------------------------------------------------------------*/ /*------------------------------------------------------------------ Max Width - 1401px and up -------------------------------------------------------------------*/ } .sqmile-common-container:before, .sqmile-common-container:after { content: " "; display: table; } .sqmile-common-container:after { clear: both; } /*------------------------------------------------------------------ [ General styles ] -------------------------------------------------------------------*/ /* typography */ /* Shopify */ /* styling for shopify wysiwyg editors the editors support textile (apparently) */ .sqmile-wysiwyg { /* lists */ /* tables */ /* prevent bottom spacing on last child */ } .sqmile-wysiwyg h1, .sqmile-wysiwyg h2, .sqmile-wysiwyg h3, .sqmile-wysiwyg h4, .sqmile-wysiwyg h5, .sqmile-wysiwyg h6 { font-weight: normal; } .sqmile-wysiwyg p { line-height: 1.5; font-size: 14px; margin-bottom: 1em; color: #676565; } .sqmile-wysiwyg p.sqmile-no-bottom { margin-bottom: 0; } .sqmile-wysiwyg b { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; color: #231f20; font-style: normal; text-transform: none; letter-spacing: 0px; line-height: 1.8em; } .sqmile-wysiwyg i { font-family: 'gentium_basicitalic', Georgia, Times, "Times New Roman", serif; font-size: 14px; color: #676565; text-transform: none; letter-spacing: 0px; font-style: normal; } .sqmile-wysiwyg a { font-family: 'gentium_basicregular', Georgia, Times, "Times New Roman", serif; font-size: 14px; color: #231f20; font-style: normal; text-transform: none; letter-spacing: 0px; } .sqmile-wysiwyg strong { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; color: #231f20; font-style: normal; text-transform: none; letter-spacing: 0px; } .sqmile-wysiwyg table { width: 100%; margin-bottom: 2em; border-top: 1px solid #eaebed; table-layout: fixed; } .sqmile-wysiwyg table th { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; color: #231f20; font-style: normal; text-transform: none; letter-spacing: 0px; font-weight: normal; padding-top: 10px; padding-bottom: 6px; text-align: left; } .sqmile-wysiwyg table tr { border-bottom: 1px solid #eaebed; } .sqmile-wysiwyg table td { padding-top: 4px; padding-bottom: 6px; } .sqmile-wysiwyg table td:first-child { width: 50%; } .sqmile-wysiwyg:last-child { margin-bottom: 0; } .sqmile-brand-highlight-green { color: #007442 !important; } .sqmile-brand-highlight-red { color: #99080c !important; } /* decrease fold out font size on smaller desktops */ /* add to basket cta */ .sqmile-common-addtobasket-small { /* display: block; .sqmile-trade-bold(@font-size: 12px; @font-colour: @white;@text-transform: uppercase; @kerning: 2px;); background-color: @sqmile-red; line-height: 1; margin: 18px auto 0 auto; padding: 5px 9px 4px 9px; border: none; text-align: center; */ } /* small */ .sqmile-common-addtobasket-small { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; color: #99080c; font-style: normal; text-transform: uppercase; letter-spacing: 0px; line-height: 1; border: none; background-color: transparent; border-bottom: 2px solid #99080c; margin-left: 6px; transition: all 400ms ease-in; /* couple of ios fixes */ -webkit-appearance: none; border-radius: 0; } .sqmile-common-addtobasket-small:hover { color: #610205; border-bottom: 2px solid #610205; transition: all 200ms ease-in; } .sqmile-common-addtobasket { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; color: #fff; font-style: normal; text-transform: uppercase; letter-spacing: 2px; background-color: #99080c; line-height: 1; margin: 1.2em 0 1em 0; padding: 9px 16px 6px 16px; border: none; transition: all 400ms ease-out; /* couple of ios fixes */ -webkit-appearance: none; border-radius: 0; } .sqmile-common-addtobasket:hover { background-color: #610205; transition: all 200ms ease-in; } .sqmile-common-backinstock { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; color: #fff; font-style: normal; text-transform: uppercase; letter-spacing: 2px; background-color: #99080c; line-height: 1; margin: 1.2em 0 1em 0; border: none; transition: all 400ms ease-out; /* couple of ios fixes */ -webkit-appearance: none; border-radius: 0; display: block; padding: 9px 16px 6px 16px; position: relative; overflow: visible; } /* headings */ .sqmile-common-small-heading { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; color: #231f20; font-style: normal; text-transform: uppercase; letter-spacing: 0px; } /* utility classes */ .sqmile-common-hide-on-mobile { display: none; } /*------------------------------------------------------------------ [ mobile notice ] -------------------------------------------------------------------*/ .sqmile-common-mobilenotice { background-color: #1f1f1f; text-align: center; position: fixed; height: 44px; z-index: 100; width: 100%; bottom: 0; left: 0; display: none; /*------------------------------------------------------------------ Tablet - 769px and up -------------------------------------------------------------------*/ } .sqmile-common-mobilenotice a { padding-top: 14px; font-family: 'TradeGothicLTPro-Cn18', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; color: #fff; font-style: normal; text-transform: none; letter-spacing: 1px; display: block; } /*------------------------------------------------------------------ [ common article ] -------------------------------------------------------------------*/ /* everything styled from this */ .sqmile-common-article { min-width: 300px; margin: 0 auto; margin-bottom: 60px; background-color: #fff; /* default section */ /*------------------------------------------------------------------ Tablet - 768 and up -------------------------------------------------------------------*/ /*------------------------------------------------------------------ Desktop - 960 and up -------------------------------------------------------------------*/ /*------------------------------------------------------------------ Large Desktop - 1280px and up -------------------------------------------------------------------*/ /*------------------------------------------------------------------ max width -------------------------------------------------------------------*/ } .sqmile-common-article:before, .sqmile-common-article:after { content: " "; display: table; } .sqmile-common-article:after { clear: both; } .sqmile-common-article section { width: 100%; float: left; clear: left; /* page heading */ /* page p */ } .sqmile-common-article section h2 { padding-top: 50px; font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 45px; color: #231f20; font-style: normal; text-transform: uppercase; letter-spacing: 0px; text-align: center; width: 100%; line-height: 82px; margin-top: 60px; margin-bottom: 30px; padding-top: 8px; background: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-line-dotted-dark-large.png?v=17527444578318731066) top center no-repeat, url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-line-dotted-dark-large.png?v=17527444578318731066) bottom center no-repeat; } .sqmile-common-article section p { width: 100%; margin-left: auto; margin-right: auto; } /* modules */ /* Module: Product Default Markup:

Red Brick

Seasonal Espresso
£9.50
Notes: */ /*------------------------------------------------------------------ Default layout - mobile -------------------------------------------------------------------*/ .sqmile-product, .product { /* common product styling */ float: left; width: 100%; position: relative; display: block; /* this will preserve the aspect ratio when scaling */ /* fold readmore */ /*------------------------------------------------------------------ Tablet - 768 and up -------------------------------------------------------------------*/ /*------------------------------------------------------------------ Desktop - 960 and up -------------------------------------------------------------------*/ /*------------------------------------------------------------------ Large Desktop - 1280px and up -------------------------------------------------------------------*/ /*------------------------------------------------------------------ max width -------------------------------------------------------------------*/ } .sqmile-product:after, .product:after { padding-top: 86%; display: block; content: ''; } .sqmile-product .sqmile-product-transition:before, .product .sqmile-product-transition:before, .sqmile-product .sqmile-product-transition:after, .product .sqmile-product-transition:after { content: " "; display: table; } .sqmile-product .sqmile-product-transition:after, .product .sqmile-product-transition:after { clear: both; } .sqmile-product .outer-wrap, .product .outer-wrap { margin-left: 27px; margin-right: 27px; margin-bottom: 27px; /* this will preserve aspect ratio when scaling */ position: absolute; top: 0; bottom: 0; right: 0; left: 0; } .sqmile-product .interior-wrap, .product .interior-wrap { height: 100%; background-color: #fff; transition: all 200ms cubic-bezier(.895, .03, .685, .22); } .sqmile-product .interior, .product .interior { /* table cel hack for centering in the unknown */ display: table; width: 100%; height: 100%; } .sqmile-product .center, .product .center { /* table cell hack for centering in the unknown */ display: table-cell; text-align: center; vertical-align: middle; } .sqmile-product .sqmile-product-name, .product .sqmile-product-name, .sqmile-product .sqmile-product-description, .product .sqmile-product-description, .sqmile-product .sqmile-product-price, .product .sqmile-product-price { display: block; text-align: center; line-height: 1; } .sqmile-product .sqmile-product-name, .product .sqmile-product-name { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 27px; color: #231f20; font-style: normal; text-transform: uppercase; letter-spacing: 0px; background: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-line-dotted-dark.png?v=15202552567575920502) top center no-repeat, url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-line-dotted-dark.png?v=15202552567575920502) bottom center no-repeat; padding-top: 17px; padding-bottom: 12px; margin-bottom: 12px; width: 80%; margin-left: auto; margin-right: auto; } .sqmile-product .sqmile-product-description, .product .sqmile-product-description { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; color: #99080c; font-style: normal; text-transform: uppercase; letter-spacing: 2px; padding-bottom: 12px; } .sqmile-product .sqmile-product-price, .product .sqmile-product-price { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; color: #231f20; font-style: normal; text-transform: uppercase; letter-spacing: 0px; display: block; margin-left: auto; margin-right: auto; width: 58px; height: 58px; border-radius: 29px; border: 1px solid #f3f3f3; } .sqmile-product .sqmile-product-price span, .product .sqmile-product-price span { display: block; text-align: center; line-height: 54px; height: 54px; width: 54px; border-radius: 27px; background-color: #f3f3f3; /* correct positioning */ position: relative; left: 1px; top: 1px; } .sqmile-product .sqmile-product-featured, .product .sqmile-product-featured { display: none; } .sqmile-product .sqmile-product-info-fold .sqmile-wysiwyg, .product .sqmile-product-info-fold .sqmile-wysiwyg { width: 80%; margin: 0 auto; line-height: 1.6; } .sqmile-product .sqmile-product-info-fold .sqmile-wysiwyg p, .product .sqmile-product-info-fold .sqmile-wysiwyg p { margin-bottom: 0; } .sqmile-product .sqmile-readmore, .product .sqmile-readmore { font-family: 'gentium_basicitalic', Georgia, Times, "Times New Roman", serif; font-size: 13px; color: #231f20; font-style: normal; text-transform: none; letter-spacing: 0px; } .sqmile-product .sqmile-product-info-fold-cta, .product .sqmile-product-info-fold-cta { padding-top: 15px; /* readmore */ /* small or */ /* add to Cart */ /* form */ } .sqmile-product .sqmile-product-info-fold-cta .sqmile-readmore, .product .sqmile-product-info-fold-cta .sqmile-readmore { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; color: #676565; font-style: normal; text-transform: uppercase; letter-spacing: 0px; border-bottom: 2px solid #676565; margin-right: 6px; transition: all 200ms ease-out; } .sqmile-product .sqmile-product-info-fold-cta .sqmile-readmore:hover, .product .sqmile-product-info-fold-cta .sqmile-readmore:hover { color: #231f20; border-bottom: 2px solid #231f20; transition: all 200ms ease-in; } .sqmile-product .sqmile-product-info-fold-cta small, .product .sqmile-product-info-fold-cta small { font-family: 'gentium_basicitalic', Georgia, Times, "Times New Roman", serif; font-size: 13px; color: #97999c; font-style: normal; text-transform: none; letter-spacing: 0px; } .sqmile-product .sqmile-product-info-fold-cta .sqmile-common-addtobasket-small, .product .sqmile-product-info-fold-cta .sqmile-common-addtobasket-small { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; color: #fff; font-style: normal; text-transform: uppercase; letter-spacing: 0px; line-height: 1; border: none; background-color: #99080c; margin-left: 6px; transition: all 400ms ease-in; padding: 5px 6px 5px 6px; /* couple of ios fixes */ -webkit-appearance: none; border-radius: 0; } .sqmile-product .sqmile-product-info-fold-cta .sqmile-common-addtobasket-small:hover, .product .sqmile-product-info-fold-cta .sqmile-common-addtobasket-small:hover { background-color: #610205; transition: all 200ms ease-in; } .sqmile-product .sqmile-product-info-fold-cta form, .product .sqmile-product-info-fold-cta form { display: inline; } /*--------------------------------------------------------------------------------------------- BM - Added here Featured Image -------------------------------------------------------------------*/ .sqmile-product .sqmile-product-name.featuredimg-white { color: #fff !important; background: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-line-dotted-light.png?v=8467257196746364293) top center no-repeat, url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-line-dotted-light.png?v=8467257196746364293) bottom center no-repeat; } .sqmile-product .sqmile-product-description.featuredimg-white { color: #fff !important; } .sqmile-product .sqmile-product-name.featuredimg-black { color: #000 !important; background: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-line-dotted-dark.png?v=15202552567575920502) top center no-repeat, url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-line-dotted-dark.png?v=15202552567575920502) bottom center no-repeat; } .sqmile-product .sqmile-product-description.featuredimg-black { color: #000 !important; } /*------------------------------------------------------------------- BM - Added here Special collection - Blue -------------------------------------------------------------------*/ .sqmile-product .sqmile-product-price.blue { border: 1px solid #003155; } .sqmile-product .sqmile-product-price.blue span { background-color: #003155; color: #fff; } .sqmile-product.special .sqmile-product-description { color: #003155; } .special .sqmile-product-description { color: #003155; } .sqmile-single-product.special .sqmile-single-product-header .sqmile-product-description { color: #003155; } .sqmile-single-product.special { color: #003155; } /*------------------------------------------------------------------ Color Variations -------------------------------------------------------------------*/ .sqmile-product { /* price colour variations */ } .sqmile-product .sqmile-product-price.red { border: 1px solid #99080c; } .sqmile-product .sqmile-product-price.red span { background-color: #99080c; color: #fff; } .sqmile-product .sqmile-product-price.green { border: 1px solid #007442; } .sqmile-product .sqmile-product-price.green span { background-color: #007442; color: #fff; } .sqmile-product .sqmile-product-price.white { border: 1px solid #f3f3f3; } .sqmile-product .sqmile-product-price.white span { background-color: #f3f3f3; color: #231f20; } .sqmile-product .sqmile-product-price.grey { border: 1px solid #757575; } .sqmile-product .sqmile-product-price.grey span { background-color: #757575; color: #fff; } /* */ .sqmile-product.subscription.espresso .interior-wrap { background-color: #797979; } .sqmile-product.subscription.espresso .sqmile-product-name { color: #f5f4f0; background: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-line-dotted-light.png?v=8467257196746364293) top center no-repeat, url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-line-dotted-light.png?v=8467257196746364293) bottom center no-repeat; } /* */ .sqmile-product.subscription.filter .interior-wrap { background-color: #414141; } .sqmile-product.subscription.filter .sqmile-product-name { color: #f5f4f0; background: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-line-dotted-light.png?v=8467257196746364293) top center no-repeat, url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-line-dotted-light.png?v=8467257196746364293) bottom center no-repeat; } /* */ .sqmile-product.christmas .interior-wrap { background-color: #99080c; } .sqmile-product.christmas .sqmile-product-name { color: #fff !important; background: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-line-dotted-light.png?v=8467257196746364293) top center no-repeat, url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-line-dotted-light.png?v=8467257196746364293) bottom center no-repeat; } /* */ .sqmile-product.secret-santa .interior-wrap { background-color: #99080c; } .sqmile-product.secret-santa .sqmile-product-name { color: #fff !important; background: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-line-dotted-light.png?v=8467257196746364293) top center no-repeat, url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-line-dotted-light.png?v=8467257196746364293) bottom center no-repeat; } /* */ .sqmile-product.the-weekly-gift-edit .interior-wrap { background-color: #007442; } .sqmile-product.the-weekly-gift-edit .sqmile-product-name { color: #fff !important; background: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-line-dotted-light.png?v=8467257196746364293) top center no-repeat, url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-line-dotted-light.png?v=8467257196746364293) bottom center no-repeat; } /* */ .sqmile-product.mothers-day .interior-wrap { background-color: #99080C; } .sqmile-product.mothers-day .sqmile-product-name { color: #fff !important; background: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-line-dotted-light.png?v=8467257196746364293) top center no-repeat, url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-line-dotted-light.png?v=8467257196746364293) bottom center no-repeat; } /* */ .sqmile-product.the-world-s-largest-coffee-tasting .interior-wrap { background-color: #007442; } .sqmile-product.the-world-s-largest-coffee-tasting .sqmile-product-name { color: #fff !important; background: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-line-dotted-light.png?v=8467257196746364293) top center no-repeat, url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-line-dotted-light.png?v=8467257196746364293) bottom center no-repeat; } /* merchandise / T-shirts & clothing */ .sqmile-product.merchandise .interior-wrap { background-color: #9b9999; } .sqmile-product.merchandise .sqmile-product-name { color: #fff; background: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-line-dotted-light.png?v=8467257196746364293) top center no-repeat, url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-line-dotted-light.png?v=8467257196746364293) bottom center no-repeat; } /* equipment / brewers & Grinders */ .sqmile-product.equipment .interior-wrap { background-color: #747373; } .sqmile-product.equipment .sqmile-product-name { color: #fff; background: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-line-dotted-light.png?v=8467257196746364293) top center no-repeat, url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-line-dotted-light.png?v=8467257196746364293) bottom center no-repeat; } .sqmile-product.merchandise .sqmile-product-name, .sqmile-product.equipment .sqmile-product-name { color: #fff; } /* hidden */ .sqmile-product.hidden { display: none; } /* Module: Product Large Markup: */ /*------------------------------------------------------------------ Default layout - mobile -------------------------------------------------------------------*/ /* safari height fix */ .sqmile-product.featured { /* this will preserve the aspect ratio when scaling */ /* common product styling */ /* slide : hide on mobile; */ /*------------------------------------------------------------------ Tablet - 768 and up -------------------------------------------------------------------*/ /*------------------------------------------------------------------ Desktop - 960 and up -------------------------------------------------------------------*/ /*------------------------------------------------------------------ Large Desktop - 1280px and up -------------------------------------------------------------------*/ } .sqmile-product.featured .sqmile-product-name, .sqmile-product.featured .sqmile-product-description, .sqmile-product.featured .sqmile-product-price { display: block; text-align: center; padding-top: 12px; padding-bottom: 12px; } .sqmile-product.featured .sqmile-product-name { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 27px; color: #231f20; font-style: normal; text-transform: uppercase; letter-spacing: 0px; padding-bottom: 12px; padding-top: 17px; line-height: 1; } .sqmile-product.featured .sqmile-product-description { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 17px; color: #99080c; font-style: normal; text-transform: uppercase; letter-spacing: 3px; } .sqmile-product.featured .sqmile-product-price { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; color: #231f20; font-style: normal; text-transform: uppercase; letter-spacing: 0px; } .sqmile-product.featured .sqmile-product-price span { /* correct positioning */ top: -11px; } .sqmile-product.featured .sqmile-product-featured { display: none; } .sqmile-product.featured .sqmile-product-info-slide { display: none; } /*------------------------------------------------------------------ non svg -------------------------------------------------------------------*/ /* Module: Product Large Markup: */ /*------------------------------------------------------------------ Default layout - mobile -------------------------------------------------------------------*/ /* safari height fix */ .sqmile-product.topseller { /* this will preserve the aspect ratio when scaling */ /* common product styling */ /* slide : hide on mobile; */ /*------------------------------------------------------------------ Tablet - 768 and up -------------------------------------------------------------------*/ } .sqmile-product.topseller:after { padding-top: 85.95%; display: block; content: ''; } .sqmile-product.topseller .sqmile-product-name, .sqmile-product.topseller .sqmile-product-description, .sqmile-product.topseller .sqmile-product-price { display: block; text-align: center; padding-top: 12px; padding-bottom: 12px; } .sqmile-product.topseller .sqmile-product-name { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 27px; color: #231f20; font-style: normal; text-transform: uppercase; letter-spacing: 0px; padding-bottom: 12px; padding-top: 17px; line-height: 1; } .sqmile-product.topseller .sqmile-product-description { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 17px; color: #99080c; font-style: normal; text-transform: uppercase; letter-spacing: 3px; } .sqmile-product.topseller .sqmile-product-price { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; color: #231f20; font-style: normal; text-transform: uppercase; letter-spacing: 0px; } .sqmile-product.topseller .sqmile-product-price span { /* correct positioning */ top: -11px; } .sqmile-product.topseller .sqmile-product-topseller { display: none; } .sqmile-product.topseller .sqmile-product-info-slide { display: none; } /*------------------------------------------------------------------ non svg -------------------------------------------------------------------*/ /* Module: Product filter Markup: Notes: */ /*------------------------------------------------------------------ Default layout - mobile -------------------------------------------------------------------*/ .sqmile-product.filter { /*------------------------------------------------------------------ max width -------------------------------------------------------------------*/ } .sqmile-product.filter .sqmile-product-description { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; color: #007442; font-style: normal; text-transform: uppercase; letter-spacing: 2px; } /* Module: Product single Markup: Notes: */ select.ba-variants { background-image: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-variant-select-arrow.png?v=6577115787978165796); } /*------------------------------------------------------------------ Default layout - mobile -------------------------------------------------------------------*/ .sqmile-single-product { min-width: 300px; margin: 0 auto; width: 80%; margin-bottom: 60px; background-color: #fff; /* common row styling */ /* make sure filter descriptions are green */ /* product header specific here we are maintaining most of the styling from our index product with a couple of minor changes documented below */ /* padding tweaks for product header for narrow devices */ /* related products */ /*------------------------------------------------------------------ Tablet - 768 and up -------------------------------------------------------------------*/ /*------------------------------------------------------------------ Desktop - 960 and up -------------------------------------------------------------------*/ /*------------------------------------------------------------------ Large Desktop - 1280px and up -------------------------------------------------------------------*/ /*------------------------------------------------------------------ max width -------------------------------------------------------------------*/ } .sqmile-single-product:before, .sqmile-single-product:after { content: " "; display: table; } .sqmile-single-product:after { clear: both; } .sqmile-single-product .sqmile-single-product-row { background-color: #fff; min-width: 100%; float: left; clear: left; position: relative; z-index: 0; } .sqmile-single-product .sqmile-single-product-column { border-bottom: 1px solid #eaebeb; padding: 50px 50px 30px 50px; float: left; width: 100%; } .sqmile-single-product .sqmile-single-product-details:before, .sqmile-single-product .sqmile-single-product-details:after { content: " "; display: table; } .sqmile-single-product .sqmile-single-product-details:after { clear: both; } .sqmile-single-product .sqmile-single-product-details .sqmile-wysiwyg { width: 50%; float: left; } .sqmile-single-product .sqmile-single-product-details i, .sqmile-single-product .sqmile-single-product-details b { display: block; text-align: center; } .sqmile-single-product .sqmile-single-product-details b { line-height: 1.5; } .sqmile-single-product.filter .sqmile-single-product-header .sqmile-product-description { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 19px; color: #007442; font-style: normal; text-transform: uppercase; letter-spacing: 2px; } .sqmile-single-product .sqmile-single-product-header { display: inline-block; position: relative; z-index: 1; background-color: #fff; border-bottom: 1px solid #eaebeb; float: left; clear: left; width: 100%; /* this will preserve aspect ratio */ /* */ } .sqmile-single-product .sqmile-single-product-header:after { /* padding here is changed */ padding-top: 80%; display: block; content: ''; } .sqmile-single-product .sqmile-single-product-header .interior-wrap { background-color: #fff; width: 100%; /* this will preserve aspect ratio when scaling */ position: absolute; top: 0; bottom: 0; right: 0; left: 0; } .sqmile-single-product .sqmile-single-product-header .interior { /* table cell hack for centering in the unknown */ display: table; width: 100%; height: 100%; } .sqmile-single-product .sqmile-single-product-header .center { /* table cel hack for centering in the unknown */ display: table-cell; text-align: center; vertical-align: middle; } .sqmile-single-product .sqmile-single-product-header .sqmile-product-name, .sqmile-single-product .sqmile-single-product-header .sqmile-product-description, .sqmile-single-product .sqmile-single-product-header .sqmile-product-price { display: block; text-align: center; line-height: 1; } .sqmile-single-product .sqmile-single-product-header .sqmile-product-name { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 36px; color: #231f20; font-style: normal; text-transform: uppercase; letter-spacing: 0px; background: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-line-dotted-dark.png?v=15202552567575920502) top center no-repeat, url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-line-dotted-dark.png?v=15202552567575920502) bottom center no-repeat; padding-top: 20px; padding-bottom: 17px; margin-bottom: 17px; margin-left: auto; margin-right: auto; } .sqmile-single-product .sqmile-single-product-header .sqmile-product-description { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 19px; color: #99080c; font-style: normal; text-transform: uppercase; letter-spacing: 2px; padding-bottom: 11px; } .sqmile-single-product .sqmile-single-product-header .sqmile-product-price { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; color: #231f20; font-style: normal; text-transform: uppercase; letter-spacing: 0px; display: block; margin-left: auto; margin-right: auto; width: 58px; height: 58px; border-radius: 29px; border: 1px solid #f3f3f3; } .sqmile-single-product .sqmile-single-product-header .sqmile-product-price span { display: block; text-align: center; line-height: 54px; height: 54px; width: 54px; border-radius: 27px; background-color: #f3f3f3; /* correct positioning */ position: relative; left: 1px; top: 1px; } .sqmile-single-product .sqmile-single-product-header #product-variants { margin-top: 12px; } .sqmile-single-product .sqmile-single-product-related-heading { font-family: 'gentium_basicitalic', Georgia, Times, "Times New Roman", serif; font-size: 14px; color: #676565; font-style: normal; text-transform: none; letter-spacing: 0px; width: 100%; display: block; text-align: center; } .sqmile-single-product .sqmile-product.related { width: 100%; } /*------------------------------------------------------------------ Color Variations & overrides -------------------------------------------------------------------*/ /*------------------------------------------------------------------ Equipment & Merchandise overrides -------------------------------------------------------------------*/ .sqmile-single-product.merchandise, .sqmile-single-product.equipment { /*------------------------------------------------------------------ Tablet - 768 and up -------------------------------------------------------------------*/ /*------------------------------------------------------------------ Desktop - 960 and up -------------------------------------------------------------------*/ /*------------------------------------------------------------------ Large Desktop - 1280px and up -------------------------------------------------------------------*/ /*------------------------------------------------------------------ max width -------------------------------------------------------------------*/ } .sqmile-single-product.merchandise .sqmile-single-product-description, .sqmile-single-product.equipment .sqmile-single-product-description { float: left; } .sqmile-single-product.merchandise .sqmile-single-product-header, .sqmile-single-product.equipment .sqmile-single-product-header { /* slideshow amends */ } .sqmile-single-product.merchandise .sqmile-single-product-header .sqmile-single-product-column, .sqmile-single-product.equipment .sqmile-single-product-header .sqmile-single-product-column { display: none; } .sqmile-single-product.merchandise .sqmile-single-product-header .sqmile-slideshow .sqmile-slideshow-images, .sqmile-single-product.equipment .sqmile-single-product-header .sqmile-slideshow .sqmile-slideshow-images { max-height: 376px; } /*------------------------------------------------------------------ Custom select https://github.com/sparkbox/Custom-Selectbox -------------------------------------------------------------------*/ .sb-custom { cursor: pointer; display: inline; position: relative; width: 100%; } .sparkbox-custom { display: none; } .no-js .sparkbox-custom { display: block; } .sb-select:focus { box-shadow: 0 0 0 0 transparent; } .sb-select:hover { cursor: pointer; } .sb-select, .sb-dropdown { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; color: #231f20; font-style: normal; text-transform: uppercase; letter-spacing: 0px; } .sb-select { background-image: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-variant-select-arrow.png?v=6577115787978165796); background-repeat: no-repeat; background-position: 93% center; background-size: 10px auto; border: none; color: #231f20; left: 0; padding: 5px 30px 5px 5px; position: relative; text-decoration: none; top: 0; width: 179px; z-index: 1; background-color: #f3f3f5; } .sb-dropdown { background: white; box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, .15); display: none; font-size: .9em; left: 0; list-style: none; margin: 0; position: absolute; top: 25px; width: 179px; z-index: 2; } .sb-dropdown li { background-color: #f3f3f5; text-align: left; } .sb-dropdown a { color: #231f20; display: block; text-decoration: none; padding: 5px 30px 5px 5px; } .sb-dropdown a:hover { color: #fff; } .sb-dropdown a:hover { background: #000; } .sb-dropdown .selected { background-color: #c9c9c9; } .sb-dropdown .selected a { color: #818181; } /* Module: Slideshow Markup:
Notes: */ /*------------------------------------------------------------------ Default layout - mobile -------------------------------------------------------------------*/ .sqmile-slideshow { overflow: hidden; /* fill */ animation-fill-mode: both; /* duration */ animation-duration: 800ms; /* easing http://matthewlein.com/ceaser/ value should be valid cubic bezier */ animation-timing-function: cubic-bezier(0, 0, .58, 1); animation-name: fadeIn; /* navigation */ /*------------------------------------------------------------------ Tablet - 768 and up -------------------------------------------------------------------*/ /*------------------------------------------------------------------ Desktop - 960 and up -------------------------------------------------------------------*/ /*------------------------------------------------------------------ Large Desktop - 1280px and up -------------------------------------------------------------------*/ /*------------------------------------------------------------------ max width -------------------------------------------------------------------*/ } .sqmile-slideshow .sqmile-slideshow-images { height: auto; overflow: hidden; } .sqmile-slideshow img { height: auto; width: 100%; min-width: 100%; max-width: 100%; } .sqmile-slideshow .sqmile-slideshow-navigation { padding-top: 10px; text-align: center; width: 100%; } .sqmile-slideshow .sqmile-slideshow-navigation span { width: 10px; height: 10px; border-radius: 5px; margin: 0 5px 0 5px; background-color: #97999c; transition: all 200ms cubic-bezier(.165, .84, .44, 1); display: inline-block; } .sqmile-slideshow .sqmile-slideshow-navigation span:hover { cursor: pointer; background-color: #646669; transition: all 200ms cubic-bezier(.165, .84, .44, 1); } .sqmile-slideshow .sqmile-slideshow-navigation .cycle-pager-active { background-color: #231f20; } /* Module: Newsletter Form Markup:
Notes: */ /*------------------------------------------------------------------ Default layout - mobile -------------------------------------------------------------------*/ #sqmile-module-newsletter { /* placeholder */ /* submission response */ /*------------------------------------------------------------------ Tablet - 768 and up -------------------------------------------------------------------*/ /*------------------------------------------------------------------ Desktop - 960 and up -------------------------------------------------------------------*/ /*------------------------------------------------------------------ Large Desktop - 1280px and up -------------------------------------------------------------------*/ /*------------------------------------------------------------------ max width -------------------------------------------------------------------*/ } #sqmile-module-newsletter input { float: left; clear: left; } #sqmile-module-newsletter input[type="text"] { width: 99.5%; margin-bottom: 10px; background-color: #fff; border: none; border-bottom: 1px solid #cecdcd; padding: 6px 0 6px 6px; font-family: 'gentium_basicitalic', Georgia, Times, "Times New Roman", serif; font-size: 14px; color: #231f20; font-style: normal; text-transform: none; letter-spacing: 0px; } #sqmile-module-newsletter input[type="submit"] { clear: both; float: none; font-family: 'gentium_basicitalic', Georgia, Times, "Times New Roman", serif; font-size: 14px; color: #7e7d7d; font-style: normal; text-transform: none; letter-spacing: 0px; border: none; background-color: transparent; transition: all 200ms ease-out; } #sqmile-module-newsletter input[type="submit"]:hover { color: #99080c; transition: all 200ms ease-in; } #sqmile-module-newsletter ::-webkit-input-placeholder { color: #231f20; } #sqmile-module-newsletter :-moz-placeholder { color: #231f20; } #sqmile-module-newsletter ::-moz-placeholder { /* Firefox 19+ */ color: #231f20; } #sqmile-module-newsletter :-ms-input-placeholder { color: #231f20; } #sqmile-module-newsletter .sqmile-module-newsletter-response { display: none; } /*------------------------------------------------------------------ Submission response -------------------------------------------------------------------*/ #sqmile-module-newsletter .sqmile-module-newsletter-response .isSubmitted, #sqmile-module-newsletter .sqmile-module-newsletter-response .notSubmitted { font-family: 'gentium_basicitalic', Georgia, Times, "Times New Roman", serif; font-size: 13px; color: #7e7d7d; font-style: normal; text-transform: none; letter-spacing: 0px; display: block; padding-bottom: 9px; } #sqmile-module-newsletter.isSubmitted .sqmile-module-newsletter-inputs, #sqmile-module-newsletter.isSubmitted input[type="submit"] { display: none; } #sqmile-module-newsletter.isSubmitted .sqmile-module-newsletter-response { display: block; } #sqmile-module-newsletter.isSubmitted .sqmile-module-newsletter-response .isSubmitted { display: block; } #sqmile-module-newsletter.isSubmitted .sqmile-module-newsletter-response .notSubmitted { display: none; } #sqmile-module-newsletter.notSubmitted .sqmile-module-newsletter-response { display: block; } #sqmile-module-newsletter.notSubmitted .sqmile-module-newsletter-response .isSubmitted { display: none; } #sqmile-module-newsletter.notSubmitted .sqmile-module-newsletter-response .notSubmitted { display: block; } /* Module: Navigation Markup: Notes: */ /*------------------------------------------------------------------ Default layout - mobile -------------------------------------------------------------------*/ #sqmile-module-navigation { position: relative; display: block; padding-bottom: 19px; min-width: 300px; margin: 0 auto; width: 80%; /*------------------------------------------------------------------ Tablet - 768 and up -------------------------------------------------------------------*/ /*------------------------------------------------------------------ Desktop - 960 and up -------------------------------------------------------------------*/ /*------------------------------------------------------------------ Large Desktop - 1280px and up -------------------------------------------------------------------*/ /*------------------------------------------------------------------ max width -------------------------------------------------------------------*/ } #sqmile-module-navigation:before, #sqmile-module-navigation:after { content: " "; display: table; } #sqmile-module-navigation:after { clear: both; } #sqmile-module-navigation .sqmile-navigation-link, #sqmile-module-navigation .sqmile-navigation-view-all { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 18px; color: #7e7d7d; font-style: normal; text-transform: uppercase; letter-spacing: 0px; } #sqmile-module-navigation .sqmile-navigation-link:hover, #sqmile-module-navigation .sqmile-navigation-view-all:hover { color: #99080c; } #sqmile-module-navigation .sqmile-navigation-view-all { display: none; } #sqmile-module-navigation #navigation-previous-product, #sqmile-module-navigation #navigation-next-product { display: block; background-repeat: no-repeat; background-size: 15px; } #sqmile-module-navigation #navigation-previous-product { padding-left: 20px; float: left; background-image: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-navigation-left.png?v=3305011566780296946); background-position: 0 4px; } #sqmile-module-navigation #navigation-next-product { padding-right: 20px; float: right; background-image: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-navigation-right.png?v=14447724370092723069); background-position: 100% 4px; } /*------------------------------------------------------------------ Overrides fallback etc -------------------------------------------------------------------*/ /* no js */ html.no-js #sqmile-module-navigation #navigation-previous-product, html.no-js #sqmile-module-navigation #navigation-next-product { display: none; } /* Module: Subscriptions module Markup: Notes: Style guide: example * notes / description * .someclass { * less mixins / common & shared styles * Positioning * Display & Box Model * width / height / margin / padding / * Background and typography styles * Other } */ /*------------------------------------------------------------------ Default layout - mobile -------------------------------------------------------------------*/ /**/ .charge_rabbit { display: none; } .sqmile-page-content .charge_rabbit { display: block; text-align: center; padding-top: 30px; } .sqmile-page-content .charge_rabbit h4 { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 45px; color: #231f20; font-style: normal; text-transform: uppercase; letter-spacing: 0px; text-align: center; width: 100%; line-height: 82px; margin-top: 30px; margin-bottom: 50px; padding-top: 8px; background: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-line-dotted-dark-large.png?v=17527444578318731066) top center no-repeat, url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-line-dotted-dark-large.png?v=17527444578318731066) bottom center no-repeat; } .sqmile-page-content .charge_rabbit .subscription_info h4 { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 18px; color: #231f20; font-style: normal; text-transform: none; letter-spacing: 0px; text-transform: uppercase; line-height: 1.5; font-size: 14px; margin-bottom: 1em; background: none; text-align: left; } .sqmile-page-content .charge_rabbit h5 { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; color: #231f20; font-style: normal; text-transform: none; letter-spacing: 0px; text-transform: uppercase; line-height: 1.5; font-size: 14px; margin-bottom: 1em; } .sqmile-page-content .charge_rabbit dl { border-top: 1px solid #ccc; margin-bottom: 1em; display: table; table-layout: fixed; width: 100%; } .sqmile-page-content .charge_rabbit dl:before, .sqmile-page-content .charge_rabbit dl:after { content: " "; display: table; } .sqmile-page-content .charge_rabbit dl:after { clear: both; } .sqmile-page-content .charge_rabbit dl dt, .sqmile-page-content .charge_rabbit dl dd { width: 50%; float: left; display: table-cell; border-bottom: 1px solid #ccc; padding-top: 4px; padding-bottom: 6px; } .sqmile-page-content .charge_rabbit dl dt { clear: left; } .sqmile-page-content .charge_rabbit a { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; color: #99080c; font-style: normal; text-transform: uppercase; letter-spacing: 0px; white-space: nowrap; line-height: 1; border: none; background-color: transparent; border-bottom: 2px solid #99080c; margin-left: 6px; margin-right: 6px; transition: all 400ms ease-in; /* couple of ios fixes */ -webkit-appearance: none; border-radius: 0; } .sqmile-page-content .charge_rabbit a:hover { color: #610205; border-bottom: 2px solid #610205; transition: all 200ms ease-in; } .sqmile-page-content .charge_rabbit .subscription_info, .sqmile-page-content .charge_rabbit .address_info { text-align: left; } .sqmile-page-content .charge_rabbit .address_info { padding-top: 2em; } .sqmile-page-content .charge_rabbit .address_info h5 { border-bottom: 1px solid #ccc; padding-bottom: 1em; } .sqmile-page-content .charge_rabbit .address_location { margin-bottom: 1em; padding-bottom: 1em; border-bottom: 1px solid #ccc; } .sqmile-page-content .charge_rabbit .address_location span { display: block; } .sqmile-page-content .charge_rabbit .address_location span:last-child { padding-bottom: 6px; } .sqmile-page-content .charge_rabbit .subscription_actions { margin-top: 1em; margin-bottom: 1em; padding-top: 1em; } .sqmile-page-content .charge_rabbit .cancel-subscription-link, .sqmile-page-content .charge_rabbit .pause-subscription-link { display: inline-block; background-color: #960c14; border: none; color: #fff; width: auto; font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; color: #fff; font-style: normal; text-transform: uppercase; letter-spacing: 0px; line-height: 1; padding: 7px 20px; margin-right: 6px; margin-left: 6px; margin-bottom: 1em; } .sqmile-page-content .charge_rabbit .cancel-subscription-link:hover, .sqmile-page-content .charge_rabbit .pause-subscription-link:hover { border-bottom: 0; color: #fff; } .sqmile-page-content .charge_rabbit .pause-subscription-link { color: #231f20; background-color: #e9e9e9; } .sqmile-page-content .charge_rabbit .pause-subscription-link:hover { border-bottom: 0; color: #231f20; } .sqmile-page-content .charge_rabbit .login_or_signup { text-align: center; } .sqmile-page-content .charge_rabbit .login_or_signup h3 { display: block; font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 40px; color: #231f20; font-style: normal; text-transform: uppercase; letter-spacing: 0px; text-align: center; width: 100%; line-height: 1em; margin-top: 60px; margin-bottom: 50px; padding-top: .6em; padding-bottom: .5em; background: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-line-dotted-dark-large.png?v=17527444578318731066) top center no-repeat, url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-line-dotted-dark-large.png?v=17527444578318731066) bottom center no-repeat; } .sqmile-page-content .charge_rabbit .login_or_signup a#login_link { display: inline-block; background-color: #960c14; border: none; color: #fff; width: auto; font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; color: #fff; font-style: normal; text-transform: uppercase; letter-spacing: 0px; line-height: 1; padding: 7px 20px; margin-right: 6px; margin-left: 6px; margin-bottom: 1em; } .sqmile-page-content .pause-subscription-wrapper fieldset { border: 0; overflow: hidden; } .sqmile-page-content .pause-subscription-wrapper .form-label { margin-right: 1em; font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; color: #7e7d7d; font-style: normal; text-transform: uppercase; letter-spacing: 0px; } .sqmile-page-content .pause-subscription-wrapper .form-control { padding: .2em; } /* everything styled from this */ .sqmile-subscription-group { min-width: 300px; margin: 0 auto; width: 80%; /* default section */ /* header */ /* column */ /* column inner */ /* Landing Page Columns */ /* */ /* footer */ /* spacer */ /* individual subscriptions */ /* includes shipping notice */ /*------------------------------------------------------------------ Tablet - 768 and up -------------------------------------------------------------------*/ /*------------------------------------------------------------------ Desktop - 960 and up -------------------------------------------------------------------*/ /*------------------------------------------------------------------ Large Desktop - 1280px and up -------------------------------------------------------------------*/ /*------------------------------------------------------------------ max width -------------------------------------------------------------------*/ } .sqmile-subscription-group:before, .sqmile-subscription-group:after { content: " "; display: table; } .sqmile-subscription-group:after { clear: both; } .sqmile-subscription-group section { float: left; width: 100%; margin-bottom: 10px; background-color: #fff; } .sqmile-subscription-group .sqmile-wysiwyg p { font-size: 16px; line-height: 22px; } .sqmile-subscription-group .sqmile-subscription-group-header h2, .sqmile-subscription-group .sqmile-subscription-group-header p { display: block; width: 80%; text-align: center; margin-left: auto; margin-right: auto; } .sqmile-subscription-group .sqmile-subscription-group-header h2 { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 28px; color: #fff; font-style: normal; text-transform: uppercase; letter-spacing: 0px; width: 100%; line-height: 82px; margin-top: 8%; margin-bottom: 8%; background: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-line-dotted-light-large.png?v=17790673719199868448) top center no-repeat, url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-line-dotted-light-large.png?v=17790673719199868448) bottom center no-repeat; } .sqmile-subscription-group .sqmile-subscription-group-header .sqmile-subscription-group-header__multiline { line-height: 1; padding-top: 30px; padding-bottom: 30px; } .sqmile-subscription-group .sqmile-subscription-group-header p { font-family: 'gentium_basicregular', Georgia, Times, "Times New Roman", serif; font-size: 15px; color: #fff; font-style: normal; text-transform: none; letter-spacing: 0px; line-height: 22px; padding-bottom: 30px; } .sqmile-subscription-group .sqmile-subscription-group-header__shallow { min-height: 0; } .sqmile-subscription-group .sqmile-subscription-group-header__shallow h2 { margin-bottom: 50px; } .sqmile-subscription-group .sqmile-subscription-group-column { width: 100%; } .sqmile-subscription-group .sqmile-subscription-group-column h3, .sqmile-subscription-group .sqmile-subscription-group-column h4, .sqmile-subscription-group .sqmile-subscription-group-column p { display: block; width: 80%; text-align: center; margin-left: auto; margin-right: auto; } .sqmile-subscription-group .sqmile-subscription-group-column h3 { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 24px; color: #282828; font-style: normal; text-transform: uppercase; letter-spacing: 0px; line-height: 1; margin-bottom: 30px; padding-top: 15px; padding-bottom: 13px; background: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-line-dotted-dark.png?v=15202552567575920502) top center no-repeat, url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-line-dotted-dark.png?v=15202552567575920502) bottom center no-repeat; } .sqmile-subscription-group .sqmile-subscription-group-column h4 { font-family: 'gentium_basicregular', Georgia, Times, "Times New Roman", serif; font-size: 16px; color: #231f20; font-style: normal; text-transform: none; letter-spacing: 0px; margin-bottom: 13px; line-height: 22px; } .sqmile-subscription-group .sqmile-subscription-group-column p { font-size: 16px; line-height: 22px; margin-bottom: 30px; } .sqmile-subscription-group .sqmile-subscription-group-column__espresso h3 { color: #99080c; } .sqmile-subscription-group .sqmile-subscription-group-column__filter h3 { color: #007442; } .sqmile-subscription-group .sqmile-subscription-group-column__filter .sqmile-common-addtobasket-small { color: #007442; border-color: #007442; } .sqmile-subscription-group .sqmile-subscription-group-column-inner { padding-left: 12px; padding-right: 12px; padding-top: 38px; } .sqmile-subscription-group .sqmile-subscription-group-column-inner:before, .sqmile-subscription-group .sqmile-subscription-group-column-inner:after { content: " "; display: table; } .sqmile-subscription-group .sqmile-subscription-group-column-inner:after { clear: both; } .sqmile-subscription-group .sqmile-subscription-group-column-inner i { font-family: 'gentium_basicitalic', Georgia, Times, "Times New Roman", serif; color: #676565; text-transform: none; letter-spacing: 0px; font-style: normal; position: relative; top: 6px; font-size: 14px; } .sqmile-subscription-group .sqmile-subscription-group-column-recurring .sqmile-subscription-group-column-inner, .sqmile-subscription-group .sqmile-subscription-group-column-gift .sqmile-subscription-group-column-inner { padding-top: 100px; background-repeat: no-repeat; background-position: 50% 15%; } .sqmile-subscription-group .sqmile-subscription-group-column-recurring .sqmile-subscription-group-column-inner { background-image: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-subscription-recurring-icon.png?v=471034751740784729); } .sqmile-subscription-group .sqmile-subscription-group-column-gift .sqmile-subscription-group-column-inner { background-image: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-subscription-gift-icon.png?v=5152136803655038431); } .sqmile-subscription-group .sqmile-subscription-group-footer { clear: left; } .sqmile-subscription-group .sqmile-subscription-group-footer .sqmile-wysiwyg { width: 50%; margin-left: auto; margin-right: auto; padding-top: 25px; padding-bottom: 25px; text-align: center; color: #7e7d7d; } .sqmile-subscription-group .sqmile-subscription-group-footer .sqmile-wysiwyg p { font-size: 14px; } .sqmile-subscription-group .sqmile-subscription-group-footer--large .sqmile-wysiwyg p { font-size: 16px; } .sqmile-subscription-group .sqmile-subscription-spacer { display: block; width: 100%; height: 5px; background-color: #eaebeb; } .sqmile-subscription-group article { float: left; clear: left; width: 100%; margin-bottom: 10px; border-bottom: 1px solid #eaebeb; /* header */ /* table */ } .sqmile-subscription-group article:before, .sqmile-subscription-group article:after { content: " "; display: table; } .sqmile-subscription-group article:after { clear: both; } .sqmile-subscription-group article .sqmile-subscription-group-product-title { float: left; width: 35%; border-right: 1px solid #eaebeb; padding-top: 35px; padding-bottom: 32px; /* 6/12 */ /* Months */ /* weight */ } .sqmile-subscription-group article .sqmile-subscription-group-product-title .sqmile-subscription-product-period, .sqmile-subscription-group article .sqmile-subscription-group-product-title .sqmile-subscription-product-month, .sqmile-subscription-group article .sqmile-subscription-group-product-title .sqmile-subscription-product-sku { display: block; width: 100%; float: left; clear: left; text-align: center; line-height: 1; } .sqmile-subscription-group article .sqmile-subscription-group-product-title .sqmile-subscription-product-period { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 63px; color: #7e7d7d; font-style: normal; text-transform: uppercase; letter-spacing: 0px; line-height: 1; } .sqmile-subscription-group article .sqmile-subscription-group-product-title .sqmile-subscription-product-month { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 22px; color: #7e7d7d; font-style: normal; text-transform: uppercase; letter-spacing: 0px; line-height: 1; } .sqmile-subscription-group article .sqmile-subscription-group-product-title .sqmile-subscription-product-sku { font-family: 'gentium_basicitalic', Georgia, Times, "Times New Roman", serif; font-size: 14px; color: #7e7d7d; font-style: normal; text-transform: none; letter-spacing: 0px; line-height: 1; } .sqmile-subscription-group article .sqmile-subscription-group-product-table { float: left; width: 65%; border-left: 1px solid #eaebeb; margin-left: -1px; } .sqmile-subscription-group article .sqmile-subscription-group-product-table .sqmile-subscription-table-row { width: 100%; padding-top: 15px; padding-bottom: 15px; border-bottom: 1px solid #eaebeb; } .sqmile-subscription-group article .sqmile-subscription-group-product-table .sqmile-subscription-table-row:last-child { border-bottom: none; } .sqmile-subscription-group article .sqmile-subscription-group-product-table p { width: 32%; float: left; margin: 0; padding: 0; line-height: 1; } .sqmile-subscription-group article .sqmile-subscription-group-product-table .sqmile-subscription-table-variant { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; color: #7e7d7d; font-style: normal; text-transform: uppercase; letter-spacing: 0px; padding-top: 8px; width: 40%; } .sqmile-subscription-group article .sqmile-subscription-group-product-table .sqmile-subscription-table-variant-price { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; color: #231f20; font-style: normal; text-transform: uppercase; letter-spacing: 0px; padding-top: 5px; width: 30%; } .sqmile-subscription-group .sqmile-subscription-column-notice { font-family: 'gentium_basicitalic', Georgia, Times, "Times New Roman", serif; font-size: 12px; color: #7e7d7d; font-style: normal; text-transform: none; letter-spacing: 0px; float: left; clear: left; width: 100% !important; margin-bottom: 15px !important; padding-top: 8px; font-size: 12px !important; } .sqmile-subscription-group .sqmile-subscription-column-cta { text-align: center; display: block; font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; color: #99080c; font-style: normal; text-transform: uppercase; letter-spacing: 0px; line-height: 1; border: none; background-color: transparent; margin-bottom: 38px; } .sqmile-subscription-group .sqmile-subscription-column-cta span { border-bottom: 2px solid #99080c; } .sqmile-subscription-group__recurring article .sqmile-subscription-group-product-title { padding-top: 34px; padding-bottom: 24px; } .sqmile-subscription-group__recurring article .sqmile-subscription-group-product-title .sqmile-subscription-product-period { font-size: 44px; } .sqmile-subscription-group__recurring article .sqmile-subscription-group-product-table .sqmile-subscription-table-variant { position: relative; left: 6px; top: -2px; } /* Module: Cart module Markup: Notes: Style guide: example * notes / description * .someclass { * less mixins / common & shared styles * Positioning * Display & Box Model * width / height / margin / padding / * Background and typography styles * Other } */ /*------------------------------------------------------------------ Default layout - mobile -------------------------------------------------------------------*/ /* everything styled from this */ .sqmile-module-cart { min-width: 300px; margin: 0 auto; margin-bottom: 60px; background-color: #fff; width: 80%; /* default section */ /* header */ /* center */ /* footer */ /* form specific */ /* totals wrap */ /* inputs wrap */ /* accept t&c */ /* checkout */ /* update cart */ /*------------------------------------------------------------------ Tablet - 768 and up -------------------------------------------------------------------*/ /*------------------------------------------------------------------ Desktop - 960 and up -------------------------------------------------------------------*/ /*------------------------------------------------------------------ Large Desktop - 1280px and up -------------------------------------------------------------------*/ /*------------------------------------------------------------------ max width -------------------------------------------------------------------*/ } .sqmile-module-cart:before, .sqmile-module-cart:after { content: " "; display: table; } .sqmile-module-cart:after { clear: both; } .sqmile-module-cart section { width: 100%; float: left; clear: left; } .sqmile-module-cart section p { width: 80%; margin-left: auto; margin-right: auto; text-align: center; } .sqmile-module-cart .sqmile-cart-header { padding-top: 50px; padding-bottom: 54px; } .sqmile-module-cart .sqmile-cart-header h2 { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 28px; color: #231f20; font-style: normal; text-transform: uppercase; letter-spacing: 0px; text-align: center; width: 100%; line-height: 82px; margin-top: 60px; margin-bottom: 30px; padding-top: 8px; background: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-line-dotted-dark-large.png?v=17527444578318731066) top center no-repeat, url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-line-dotted-dark-large.png?v=17527444578318731066) bottom center no-repeat; } .sqmile-module-cart .sqmile-cart-center { padding: 0 12px 0 12px; } .sqmile-module-cart .sqmile-cart-footer { padding-top: 36px; padding-bottom: 30px; } .sqmile-module-cart form#cartform table { width: 100%; border-top: 5px solid #eaebeb; border-bottom: 1px solid #eaebeb; } .sqmile-module-cart form#cartform table tr { border-bottom: 1px solid #eaebeb; /* ensure table doesn't collapse when empty */ /* delete */ /* th */ /* td default */ /* title */ /* remove */ /* quantity input */ /* price */ /* cart subtotal */ /* total shared */ /* subtotal heading */ /* amount */ } .sqmile-module-cart form#cartform table tr td, .sqmile-module-cart form#cartform table tr th { padding-top: 20px; padding-bottom: 20px; text-align: left; } .sqmile-module-cart form#cartform table tr th { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; color: #97999e; font-style: normal; text-transform: uppercase; letter-spacing: 0px; } .sqmile-module-cart form#cartform table tr th.sqmile-cart-item-title-heading { width: 57%; } .sqmile-module-cart form#cartform table tr th.sqmile-cart-item-remove-heading { display: none; text-align: center; } .sqmile-module-cart form#cartform table tr th.sqmile-cart-item-total-heading { display: none; text-align: right; } .sqmile-module-cart form#cartform table tr td { font-family: 'TradeGothicLTPro-Cn18', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; color: #231f20; font-style: normal; text-transform: uppercase; letter-spacing: 0px; } .sqmile-module-cart form#cartform table tr td.sqmile-cart-item-title { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; color: #231f20; font-style: normal; text-transform: uppercase; letter-spacing: 0px; } .sqmile-module-cart form#cartform table tr td.sqmile-cart-item-title a { color: #231f20; } .sqmile-module-cart form#cartform table tr td.sqmile-cart-item-title a:hover { color: #99080c; } .sqmile-module-cart form#cartform table tr td.sqmile-cart-item-remove { display: none; } .sqmile-module-cart form#cartform table tr td.sqmile-cart-item-remove a { display: block; margin-left: auto; margin-right: auto; width: 22px; height: 22px; background-image: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-cart-remove-item.jpg?v=4150090220866072111); background-repeat: no-repeat; background-position: center center; background-size: cover; } .sqmile-module-cart form#cartform table tr td.sqmile-cart-item-remove a:hover { opacity: .5; } .sqmile-module-cart form#cartform table tr td.sqmile-cart-item-quantity input[type="number"] { width: 60px; padding: 5px 10px 5px 10px; } .sqmile-module-cart form#cartform table tr td.sqmile-cart-item-total { display: none; text-align: right; } .sqmile-module-cart form#cartform table tr td.sqmile-cart-total { text-align: right; } .sqmile-module-cart form#cartform table tr td.sqmile-cart-total-amount, .sqmile-module-cart form#cartform table tr td.sqmile-cart-total-heading { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; color: #231f20; font-style: normal; text-transform: uppercase; letter-spacing: 0px; } .sqmile-module-cart form#cartform table tr td.sqmile-cart-total-heading { padding-right: 2px; text-align: right; } .sqmile-module-cart form#cartform table tr td.sqmile-cart-total-amount { text-align: right; } .sqmile-module-cart form#cartform table tr td { width: 10%; overflow: hidden; } .sqmile-module-cart form#cartform table tr .sqmile-cart-item-title { width: 60%; } .sqmile-module-cart .sqmile-cart-form-footer { border-bottom: 5px solid #eaebeb; width: 100%; } .sqmile-module-cart .sqmile-cart-form-footer:before, .sqmile-module-cart .sqmile-cart-form-footer:after { content: " "; display: table; } .sqmile-module-cart .sqmile-cart-form-footer:after { clear: both; } .sqmile-module-cart .sqmile-cart-form-footer .sqmile-cart-total-heading, .sqmile-module-cart .sqmile-cart-form-footer .sqmile-cart-total-amount { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; color: #231f20; font-style: normal; text-transform: uppercase; letter-spacing: 0px; padding-top: 20px; padding-bottom: 20px; } .sqmile-module-cart .sqmile-cart-form-footer .sqmile-cart-total-heading { float: left; width: 82%; text-align: right; } .sqmile-module-cart .sqmile-cart-form-footer .sqmile-cart-total-amount { float: right; width: 16%; text-align: center; } .sqmile-module-cart #sqmile-cart-inputs { clear: both; padding-top: 20px; padding-bottom: 20px; border-bottom: 1px solid #eaebeb; } .sqmile-module-cart #sqmile-cart-inputs:before, .sqmile-module-cart #sqmile-cart-inputs:after { content: " "; display: table; } .sqmile-module-cart #sqmile-cart-inputs:after { clear: both; } .sqmile-module-cart #sqmile-cart-inputs input { padding-right: 3px; float: right; } .sqmile-module-cart #sqmile-cart-accept { float: right; position: relative; margin-bottom: 20px; } .sqmile-module-cart #sqmile-cart-accept input[type="checkbox"] { position: relative; top: 3px; float: left; } .sqmile-module-cart #sqmile-cart-accept label { position: relative; padding-left: 4px; float: left; font-size: 12px; } .sqmile-module-cart #sqmile-cart-accept a { color: #7e7d7d; opacity: .5; } .sqmile-module-cart #sqmile-cart-accept label.error { left: 0; top: -15px; position: absolute; color: red; padding-left: 0; } .sqmile-module-cart input#sqmile-cart-checkout { clear: both; font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; color: #fff; font-style: normal; text-transform: uppercase; letter-spacing: 0; background-color: #99080c; line-height: 1; margin: 0 0 0 4px; padding: 9px 24px 6px 24px; border: none; transition: all 400ms ease-out; /* couple of ios fixes */ -webkit-appearance: none; border-radius: 0; } .sqmile-module-cart input#sqmile-cart-checkout:hover { background-color: #610205; transition: all 200ms ease-in; } .sqmile-module-cart input#sqmile-cart-update { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; color: #231f20; font-style: normal; text-transform: uppercase; letter-spacing: 0; background-color: #e9e9e9; line-height: 1; margin: 0; padding: 9px 24px 6px 24px; border: none; transition: all 400ms ease-out; /* couple of ios fixes */ -webkit-appearance: none; border-radius: 0; } .sqmile-module-cart input#sqmile-cart-update:hover { background-color: #c2bfbf; transition: all 200ms ease-in; } /* Module : Subscriptions module Markup : Notes : Style Guide : example * notes / description * .someclass { * less mixins / common & shared styles * Positioning * Display & Box Model * width / height / margin / padding / * Background and typography styles * Other } */ /*------------------------------------------------------------------ Default layout - mobile -------------------------------------------------------------------*/ /* show notification */ body[data-notification="show"] #sqmile-module-cart-notification { transition: all 300ms cubic-bezier(.475, 0, .39, 1); top: 39px; } /* everything styled from this default state is hidden */ #sqmile-module-cart-notification { transition: all 600ms cubic-bezier(.475, 0, .39, 1); min-width: 300px; width: auto; height: auto; background-color: #4c4c4c; position: absolute; right: 0; top: -100px; box-shadow: 0px 1px 6px 3px rgba(0, 0, 0, .15); z-index: 99; /* inner */ /* paragraph default */ /* added notice */ /* item detials - this will be updated with js / heance using an id for speed */ /*------------------------------------------------------------------ Tablet - 768 and up -------------------------------------------------------------------*/ /*------------------------------------------------------------------ Desktop - 960 and up -------------------------------------------------------------------*/ /*------------------------------------------------------------------ Large Desktop - 1280px and up -------------------------------------------------------------------*/ /*------------------------------------------------------------------ max width -------------------------------------------------------------------*/ } #sqmile-module-cart-notification #sqmile-cart-notification-inner { padding-top: 16px; padding-bottom: 13px; padding-left: 20px; padding-right: 20px; } #sqmile-module-cart-notification #sqmile-cart-notification-inner:before, #sqmile-module-cart-notification #sqmile-cart-notification-inner:after { content: " "; display: table; } #sqmile-module-cart-notification #sqmile-cart-notification-inner:after { clear: both; } #sqmile-module-cart-notification span { margin: 0; padding: 0; line-height: 1; } #sqmile-module-cart-notification .sqmile-cart-notification-notice { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; color: #fff; font-style: normal; text-transform: uppercase; letter-spacing: 0px; } #sqmile-module-cart-notification #sqmile-cart-notification-item-title { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; color: #bfbdbd; font-style: normal; text-transform: uppercase; letter-spacing: 0px; } #sqmile-module-cart-notification #sqmile-cart-notification-item-type { font-family: 'TradeGothicLTPro-Cn18', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; color: #bfbdbd; font-style: normal; text-transform: uppercase; letter-spacing: 0px; } /* Module: page module Markup: Notes: Style guide: * notes / description * .someclass { * less mixins / common & shared styles * Positioning * Display & Box Model * width / height / margin / padding / * Background and typography styles * Other } */ /*------------------------------------------------------------------ Default - mobile -------------------------------------------------------------------*/ /* everything styled from this */ .sqmile-common-page { min-width: 300px; width: 80%; margin: 0 auto; margin-bottom: 60px; background-color: #fff; /* default section */ /* header specific */ /* content specific */ /*------------------------------------------------------------------ Tablet - 768 and up -------------------------------------------------------------------*/ /*------------------------------------------------------------------ Desktop - 960 and up -------------------------------------------------------------------*/ /*------------------------------------------------------------------ Large Desktop - 1280px and up -------------------------------------------------------------------*/ /*------------------------------------------------------------------ max width -------------------------------------------------------------------*/ } .sqmile-common-page:before, .sqmile-common-page:after { content: " "; display: table; } .sqmile-common-page:after { clear: both; } .sqmile-common-page section { width: 100%; float: left; clear: left; /* page heading */ /* page p */ } .sqmile-common-page section h2 { padding-top: 50px; font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 45px; color: #231f20; font-style: normal; text-transform: uppercase; letter-spacing: 0px; text-align: center; width: 100%; line-height: 82px; margin-top: 60px; margin-bottom: 50px; padding-top: 8px; background: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-line-dotted-dark-large.png?v=17527444578318731066) top center no-repeat, url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-line-dotted-dark-large.png?v=17527444578318731066) bottom center no-repeat; } .sqmile-common-page section p { width: 100%; margin-left: auto; margin-right: auto; } .sqmile-common-page .sqmile-page-header { border-bottom: 1px solid #eaebeb; margin-bottom: 32px; } .sqmile-common-page .sqmile-page-content { padding-bottom: 32px; padding-right: 50px; padding-left: 50px; } /*------------------------------------------------------------------ Default - mobile -------------------------------------------------------------------*/ /* about - everything styled from this */ .sqmile-module-page-about { min-width: 300px; width: 80%; margin: 0 auto; margin-bottom: 60px; background-color: #fff; /* default section */ /* column */ /* header specific */ /* team members */ /*------------------------------------------------------------------ Tablet - 768 and up -------------------------------------------------------------------*/ /*------------------------------------------------------------------ Desktop - 960 and up -------------------------------------------------------------------*/ /*------------------------------------------------------------------ Large Desktop - 1280px and up -------------------------------------------------------------------*/ /*------------------------------------------------------------------ max width -------------------------------------------------------------------*/ } .sqmile-module-page-about:before, .sqmile-module-page-about:after { content: " "; display: table; } .sqmile-module-page-about:after { clear: both; } .sqmile-module-page-about section { width: 100%; float: left; clear: left; /* page heading */ /* page p */ } .sqmile-module-page-about section h2 { padding-top: 50px; font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 45px; color: #231f20; font-style: normal; text-transform: uppercase; letter-spacing: 0px; text-align: center; width: 100%; line-height: 82px; margin-top: 60px; margin-bottom: 50px; padding-top: 8px; background: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-line-dotted-dark-large.png?v=17527444578318731066) top center no-repeat, url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-line-dotted-dark-large.png?v=17527444578318731066) bottom center no-repeat; } .sqmile-module-page-about section p { width: 100%; margin-left: auto; margin-right: auto; } .sqmile-module-page-about .sqmile-page-column { padding-left: 50px; padding-right: 50px; padding-bottom: 32px; } .sqmile-module-page-about .sqmile-page-header { border-bottom: 1px solid #eaebeb; margin-bottom: 32px; } .sqmile-module-page-about .sqmile-page-team-members { margin-top: 30px; } .sqmile-module-page-about .sqmile-page-team-members:before, .sqmile-module-page-about .sqmile-page-team-members:after { content: " "; display: table; } .sqmile-module-page-about .sqmile-page-team-members:after { clear: both; } .sqmile-module-page-about .sqmile-page-team-members .sqmile-page-column { padding-bottom: 0; } .sqmile-module-page-about .sqmile-page-team-members i { font-style: italic; display: block; width: 100%; text-align: center; margin-bottom: 2em; } .sqmile-module-page-about .sqmile-page-team-members b { color: #231f20; font-size: 14px; text-transform: uppercase; text-align: center; margin-bottom: 25px; display: block; width: 100%; float: left; clear: left; } /*------------------------------------------------------------------ 404 -------------------------------------------------------------------*/ .sqmile-common-page.fourohfour .sqmile-page-header { border-bottom: none; } .sqmile-common-page.fourohfour .sqmile-page-content { padding-bottom: 72px; } .sqmile-common-page.fourohfour .sqmile-page-content .sqmile-wysiwyg { text-align: center; font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 18px; color: #7e7d7d; font-style: normal; text-transform: uppercase; letter-spacing: 0px; } /* Layout: Account page styling */ /*------------------------------------------------------------------ These are common syles shared throughout our modules and layouts - should any of these styles need overiding wihtin specific module/layouts the overides will be within the module/layout file. -------------------------------------------------------------------*/ /*------------------------------------------------------------------ [ form elements ] -------------------------------------------------------------------*/ .sqmile-form { margin-bottom: 32px; width: 100%; margin: 0 auto; } .sqmile-form label { display: block; padding-bottom: 7px; font-family: 'gentium_basicitalic', Georgia, Times, "Times New Roman", serif; font-size: 16px; color: #7e7d7d; font-style: normal; text-transform: none; letter-spacing: 0px; } .sqmile-form input { display: block; width: 100%; border: 1px solid #cbcccd; background-color: #fafafa; padding: 5px 10px; margin-bottom: 15px; } .sqmile-form input[type="submit"] { display: inline-block; background-color: #960c14; border: none; color: #fff; width: auto; font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; color: #fff; font-style: normal; text-transform: uppercase; letter-spacing: 0px; line-height: 1; padding: 7px 20px; margin-right: 10px; } .sqmile-form .title { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; color: #7e7d7d; font-style: normal; text-transform: uppercase; letter-spacing: 0px; } .sqmile-account-page-row { border-bottom: 1px solid #eaebeb; margin-bottom: 32px; } .sqmile-common-page .sqmile-account-page-row:last-child { border-bottom: 0; margin-bottom: 0; } .sqmile-wysiwyg table.sqmile-customer__orders--horizontal { display: none; } .sqmile-wysiwyg table.sqmile-customer__orders--vertical { display: table; } .sqmile-wysiwyg table.sqmile-customer__orders--vertical tr { border-bottom: 0; } .sqmile-wysiwyg table.sqmile-customer__orders--vertical tr.odd + tr.even { border-top: 2px solid #eaebeb; } .sqmile-wysiwyg table.sqmile-customer__orders--vertical th { width: 20%; } .sqmile-wysiwyg table.sqmile-customer__orders--vertical td { padding-left: 2em; width: 80%; } /*------------------------------------------------------------------ [ Page/Section Layout Imports ] -------------------------------------------------------------------*/ /* layout */ /* Layout: Header Markup: Notes: */ /*------------------------------------------------------------------ Default layout - mobile -------------------------------------------------------------------*/ /* everything styled from our heder element */ header { width: 100%; height: auto; background-color: #333; position: relative; float: left; top: 48px; z-index: 100; /* Logo */ /* main nav */ /*------------------------------------------------------------------ Tablet - 768 and up -------------------------------------------------------------------*/ /*------------------------------------------------------------------ Desktop - 960 and up -------------------------------------------------------------------*/ /*------------------------------------------------------------------ Large Desktop - 1280 and up -------------------------------------------------------------------*/ /*------------------------------------------------------------------ Max Width - 1401px and up -------------------------------------------------------------------*/ } header .brand { display: block; text-align: center; margin-top: 22px; margin-bottom: 22px; width: 120px; margin-left: auto; margin-right: auto; } header .brand img { max-width: 100%; min-width: 100%; width: 100%; } header #sqmile-main-nav { /* contact info */ } header #sqmile-main-nav ul { top: 1px; left: 0; position: absolute; width: 100%; height: 100%; display: none; z-index: 100; background-color: #313030; } header #sqmile-main-nav ul li { width: 100%; border-bottom: 1px solid #555; padding: 8px 0 7px 0; } header #sqmile-main-nav ul li a { display: block; text-align: left; font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; color: #97999c; font-style: normal; text-transform: uppercase; letter-spacing: 0px; line-height: 1; padding-left: 12px; } header #sqmile-main-nav ul li a:hover { color: #fff; } header #sqmile-main-nav ul li:last-child { border-bottom: none; } header #sqmile-main-nav ul li.active a { color: #fff; } header #sqmile-main-nav ul li.active span { border-bottom: 2px solid white; } header #sqmile-main-nav .sqmile-contact-info { display: none; } /*------------------------------------------------------------------ mobile menu trigger -------------------------------------------------------------------*/ #sqmile-mobile-trigger { top: 0px; left: 0; width: 48px; height: 48px; display: block; position: fixed; background-color: #313030; border: none; z-index: 102; box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, .1); /*------------------------------------------------------------------ Tablet - 768 and up -------------------------------------------------------------------*/ } #sqmile-mobile-trigger span { display: block; height: 3px; margin-bottom: 3px; background-color: #87898a; width: 50%; margin: 3px auto; } /*------------------------------------------------------------------ mobile menu -------------------------------------------------------------------*/ #sqmile-mobile-menu { display: none; position: fixed; z-index: 1000; width: 100%; background-color: #333; top: 48px; /*------------------------------------------------------------------ Tablet - 768 and up -------------------------------------------------------------------*/ } #sqmile-mobile-menu.active { display: block; } #sqmile-mobile-menu li { width: 100%; border-bottom: 1px solid #555; padding: 8px 0 7px 0; } #sqmile-mobile-menu li a { display: block; text-align: left; font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; color: #97999c; font-style: normal; text-transform: uppercase; letter-spacing: 0px; line-height: 1; padding-left: 12px; } #sqmile-mobile-menu li a:hover { color: #fff; } #sqmile-mobile-menu li:last-child { border-bottom: none; } #sqmile-mobile-menu li.active a { color: #fff; } #sqmile-mobile-menu li.active span { border-bottom: 2px solid white; } /* Layout: Top Bar Markup:
Notes: */ /*------------------------------------------------------------------ Default layout - mobile -------------------------------------------------------------------*/ /* everything styled from our top-bar element */ #sqmile-top-bar { background-color: #fff; width: 100%; height: 48px; z-index: 101; position: fixed; top: 0; left: 0; /* right hand nav - checkout etc */ /* product filter */ /*------------------------------------------------------------------ Tablet - 769px and up -------------------------------------------------------------------*/ /*------------------------------------------------------------------ Desktop - 961px and up -------------------------------------------------------------------*/ /*------------------------------------------------------------------ Large Desktop - 1280px and up -------------------------------------------------------------------*/ /*------------------------------------------------------------------ Max Width - 1401px and up -------------------------------------------------------------------*/ } #sqmile-top-bar:before, #sqmile-top-bar:after { content: " "; display: table; } #sqmile-top-bar:after { clear: both; } #sqmile-top-bar #sqmile-top-bar-inner { position: relative; width: 100%; z-index: 100; background-color: #fff; box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, .1); height: 48px; } #sqmile-top-bar #sqmile-top-bar-inner:before, #sqmile-top-bar #sqmile-top-bar-inner:after { content: " "; display: table; } #sqmile-top-bar #sqmile-top-bar-inner:after { clear: both; } #sqmile-top-bar ul { float: right; } #sqmile-top-bar ul li { font-family: 'gentium_basicitalic', Georgia, Times, "Times New Roman", serif; font-size: 14px; color: #231f20; font-style: normal; text-transform: none; letter-spacing: 0px; float: left; display: block; } #sqmile-top-bar ul li a { color: #231f20; padding-top: 21px; display: block; } #sqmile-top-bar ul li span { display: block; padding-top: 9px; padding-left: 11px; padding-right: 11px; border-right: 1px solid #cbcccd; } #sqmile-top-bar ul li span:before, #sqmile-top-bar ul li span:after { content: " "; display: table; } #sqmile-top-bar ul li span:after { clear: both; } #sqmile-top-bar ul li em { font-family: 'gentium_basicitalic', Georgia, Times, "Times New Roman", serif; font-size: 14px; color: #231f20; font-style: normal; text-transform: none; letter-spacing: 0px; float: left; display: block; text-align: center; padding-bottom: 3px; line-height: 1; width: 100%; } #sqmile-top-bar ul li b { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; color: #231f20; font-style: normal; text-transform: uppercase; letter-spacing: 0px; clear: left; display: block; text-align: center; line-height: 1.2; } #sqmile-top-bar ul .sqmile-checkout-link a { text-decoration: underline; font-size: 18px; padding-top: 14px; line-height: 30px; padding-top: 0; position: relative; top: 4px; } #sqmile-top-bar ul .sqmile-checkout-link span { border-right: 1px solid #cbcccd; padding-top: 10px; } #sqmile-top-bar ul .sqmile-account-login-link span, #sqmile-top-bar ul .sqmile-account-create-link span { padding-top: 0; } #sqmile-top-bar ul .sqmile-roast-day { display: none; } #sqmile-top-bar #sqmile-filter { position: absolute; display: none; float: left; transition: all 200ms cubic-bezier(.895, .03, .685, .22); } /* Layout: Footer Markup: Notes: */ /*------------------------------------------------------------------ Default layout - mobile -------------------------------------------------------------------*/ /* everything styled from our footer element */ #sqmile-footer { /*------------------------------------------------------------------ Tablet - 768 and up -------------------------------------------------------------------*/ /*------------------------------------------------------------------ Desktop - 960 and up -------------------------------------------------------------------*/ /*------------------------------------------------------------------ Large Desktop - 1280 and up -------------------------------------------------------------------*/ /*------------------------------------------------------------------ Max Width - 1401px and up -------------------------------------------------------------------*/ } #sqmile-footer:before, #sqmile-footer:after { content: " "; display: table; } #sqmile-footer:after { clear: both; } #sqmile-footer .error { color: #99080c; } #sqmile-footer #consent-checkbox + .error { position: relative; top: 55px; display: block; margin-bottom: -10px; } #sqmile-footer #consent-checkbox + .error + label { margin-bottom: 40px; } #sqmile-footer .sqmile-footer-inner-row { border-top: 1px solid #cecdcd; border-right: 1px solid #cecdcd; float: left; clear: left; width: 100%; } #sqmile-footer .sqmile-footer-inner-row:before, #sqmile-footer .sqmile-footer-inner-row:after { content: " "; display: table; } #sqmile-footer .sqmile-footer-inner-row:after { clear: both; } #sqmile-footer .sqmile-footer-inner-row:last-child { border-top: none; } #sqmile-footer .sqmile-footer-row { width: 100%; float: left; clear: left; } #sqmile-footer .sqmile-footer-row.first .sqmile-footer-column { border-top: none; } #sqmile-footer .sqmile-footer-column { clear: left; float: left; width: 100%; padding: 19px; border-bottom: 1px solid #cecdcd; } #sqmile-footer .sqmile-footer-column a { font-family: 'gentium_basicitalic', Georgia, Times, "Times New Roman", serif; font-size: 14px; color: #676565; font-style: normal; text-transform: none; letter-spacing: 0px; line-height: 1.5em; transition: all 400ms ease-out; } #sqmile-footer .sqmile-footer-column a:hover { color: #99080c; transition: all 200ms ease-in; } #sqmile-footer .sqmile-footer-column em { font-family: 'gentium_basicitalic', Georgia, Times, "Times New Roman", serif; font-size: 13px; color: #282828; font-style: normal; text-transform: none; letter-spacing: 0px; } #sqmile-footer .sqmile-footer-column .sqmileRoastDay { font-family: 'TradeGothicLTPro-Cn18', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; color: #7e7d7d; font-style: none; text-transform: uppercase; letter-spacing: 0px; } #sqmile-footer .sqmile-footer-column.first { border-left: none; } #sqmile-footer .sqmile-common-small-heading { color: #99080c; padding-bottom: 20px; } #sqmile-footer .sqmile-footer-inner-column:before, #sqmile-footer .sqmile-footer-inner-column:after { content: " "; display: table; } #sqmile-footer .sqmile-footer-inner-column:after { clear: both; } /* Module: cookie notice */ /*------------------------------------------------------------------ @mobile -------------------------------------------------------------------*/ /* everything styled from this */ #sqmile-cookie-notice { display: none; position: fixed; bottom: 0; left: 0; opacity: .99; height: 60px; width: 100%; z-index: 101; pointer-events: none; /*------------------------------------------------------------------ @Desktop -------------------------------------------------------------------*/ /*------------------------------------------------------------------ @Large Desktop -------------------------------------------------------------------*/ /*------------------------------------------------------------------ @max -------------------------------------------------------------------*/ } #sqmile-cookie-notice .cookie-notie-container { position: relative; height: 60px; } #sqmile-cookie-notice .cookie-notice-message { position: absolute; width: 353px; height: 100%; bottom: 0; right: 10px; box-shadow: 0px 1px 6px 3px rgba(0, 0, 0, .15); background-color: #4c4c4c; font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; color: #fff; font-style: normal; text-transform: uppercase; letter-spacing: 0px; line-height: 15px; pointer-events: auto; border-radius: 3px 3px 0px 0px; opacity: .975; } #sqmile-cookie-notice .cookie-notice-message a { color: #d2d3d4; text-decoration: underline; } #sqmile-cookie-notice .cookie-notice-message p { padding-top: 18px; padding-left: 28px; padding-right: 41px; } #sqmile-cookie-notice .cookie-notice-message #cookie-notice-dismiss { position: absolute; height: 21px; width: 21px; top: 0; right: 0; background-image: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-cookie-notice-dismiss.png?v=13298312007526593751); background-position: center center; background-size: 7px 7px; background-repeat: no-repeat; } /* Module: general notice */ /*------------------------------------------------------------------ @mobile -------------------------------------------------------------------*/ /* everything styled from this */ #sqmile-general-notice { display: none; position: fixed; width: 300px; margin-left: -150px; left: 50%; top: 35%; box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, .45); background-color: #4c4c4c; z-index: 101; padding: 30px; opacity: .975; border-radius: 3px; /*------------------------------------------------------------------ @Desktop -------------------------------------------------------------------*/ /*------------------------------------------------------------------ @Large Desktop -------------------------------------------------------------------*/ /*------------------------------------------------------------------ @max -------------------------------------------------------------------*/ } #sqmile-general-notice .notice-heading { text-align: center; padding-bottom: 28px; font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 20px; color: #fff; font-style: normal; text-transform: uppercase; letter-spacing: 0px; } #sqmile-general-notice .notice-content { color: #fff; } #sqmile-general-notice #general-notice-dismiss { position: absolute; height: 30px; width: 30px; top: 4px; right: 4px; background-image: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-cookie-notice-dismiss.png?v=13298312007526593751); background-position: center center; background-size: 7px 7px; background-repeat: no-repeat; } .sqmile-subscription-group .sqmile-subscription-group-header .sqmile-subscription-group-header__multiline { margin-bottom: 0; padding-top: 22px; padding-bottom: 22px; margin-bottom: 22px; margin-top: 50px; } .sqmile-subscription-group .sqmile-subscription-group-header h2, .sqmile-subscription-group .sqmile-subscription-group-header p { width: 100%; max-width: 550px; padding: 0 30px 50px; } .subscription_pickers { display: none; } .subscription_pickers.active { display: block; } .sqmile-wizard-container.initializing { min-height: 300px; background: #fff; overflow: hidden; } .sqmile-wizard-container.initializing * { opacity: .5; } .subscription_pickers.filter-coffee .options_row h2 span, .section_choose.filter-coffee .options_row h2 span, .subscription_pickers.filter-coffee h2 span, .section_choose.filter-coffee h2 span, .subscription_pickers.filter-coffee .options_row .option-item h3, .section_choose.filter-coffee .options_row .option-item h3, .subscription_pickers.filter-coffee .option-item h3, .section_choose.filter-coffee .option-item h3 { color: #007e49; } .subscription_pickers.filter-coffee .options_row .row_outer > ul .option-item input:checked ~ .circle, .section_choose.filter-coffee .options_row .row_outer > ul .option-item input:checked ~ .circle, .subscription_pickers.filter-coffee .row_outer > ul .option-item input:checked ~ .circle, .section_choose.filter-coffee .row_outer > ul .option-item input:checked ~ .circle, .subscription_pickers.filter-coffee .options_row .row_outer > ul .option-item:hover .circle, .section_choose.filter-coffee .options_row .row_outer > ul .option-item:hover .circle, .subscription_pickers.filter-coffee .row_outer > ul .option-item:hover .circle, .section_choose.filter-coffee .row_outer > ul .option-item:hover .circle { background-color: #007e49; border-color: #007e49; } .subscription_pickers.espresso-coffee .options_row h2 span, .section_choose.espresso-coffee .options_row h2 span, .subscription_pickers.espresso-coffee h2 span, .section_choose.espresso-coffee h2 span, .subscription_pickers.espresso-coffee .options_row .option-item h3, .section_choose.espresso-coffee .options_row .option-item h3, .subscription_pickers.espresso-coffee .option-item h3, .section_choose.espresso-coffee .option-item h3 { color: #960c14; } .subscription_pickers.espresso-coffee .options_row .row_outer > ul .option-item input:checked ~ .circle, .section_choose.espresso-coffee .options_row .row_outer > ul .option-item input:checked ~ .circle, .subscription_pickers.espresso-coffee .row_outer > ul .option-item input:checked ~ .circle, .section_choose.espresso-coffee .row_outer > ul .option-item input:checked ~ .circle, .subscription_pickers.espresso-coffee .options_row .row_outer > ul .option-item:hover .circle, .section_choose.espresso-coffee .options_row .row_outer > ul .option-item:hover .circle, .subscription_pickers.espresso-coffee .row_outer > ul .option-item:hover .circle, .section_choose.espresso-coffee .row_outer > ul .option-item:hover .circle { background-color: #960c14; border-color: #960c14; } .lte-ie9 .subscription_pickers .options_row .row_outer > ul .option-item, .lt-ie9 .subscription_pickers .options_row .row_outer > ul .option-item, .lte-ie9 .section_choose .row_outer > ul .option-item, .lt-ie9 .section_choose .row_outer > ul .option-item, .lte-ie9 #results .row_outer > ul .option-item, .lt-ie9 #results .row_outer > ul .option-item { display: inline-block; width: 33%; } .lte-ie9 .blends .option-item, .lt-ie9 .blends .option-item, .lte-ie9 .beans .option-item, .lt-ie9 .beans .option-item, .lte-ie9 .section-option.option-item, .lt-ie9 .section-option.option-item { display: inline-block; width: 49% !important; } .section_choose h2 { cursor: pointer; } .section_choose.open h2 { cursor: inherit; } .subscription_pickers.content-block { margin-top: 0; margin-bottom: 0; } .row_outer { height: 0; overflow: hidden; background: #fff; } .row_outer > * { opacity: 0 !important; transition: opacity .3s ease; transition-delay: 0s !important; } .open .row_outer { height: auto; } .open .row_outer > * { opacity: 1 !important; } .section_choose:hover .section-option { opacity: .5; } .section_choose:hover .section-option:hover { opacity: 1; } .section-option { transition: opacity .4s ease; } .subscription_pickers .options_row, .section_choose, #results { margin: 0 auto; } .subscription_pickers .options_row.complete li label, .section_choose.complete li label, #results.complete li label { opacity: .5; } .subscription_pickers .options_row.complete li label input:checked ~ *, .section_choose.complete li label input:checked ~ *, #results.complete li label input:checked ~ * { opacity: 1; } .subscription_pickers .options_row.complete:hover li label *, .section_choose.complete:hover li label *, #results.complete:hover li label * { opacity: .5; } .subscription_pickers .options_row.complete:hover li:hover label input:checked ~ *, .section_choose.complete:hover li:hover label input:checked ~ *, #results.complete:hover li:hover label input:checked ~ * { opacity: 1; } .subscription_pickers .options_row h2, .section_choose h2, #results h2 { background: white; padding: 18px 22px; text-transform: uppercase; font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; text-align: center; margin: 0; border-top: 2px solid #f2f2f2; line-height: 16px; font-size: 16px; transition: all .3s ease !important; } .subscription_pickers .options_row h2 span, .section_choose h2 span, #results h2 span { color: #000; } .subscription_pickers .options_row.complete:not(.open) h2, .section_choose.complete:not(.open) h2, #results.complete:not(.open) h2 { cursor: pointer; } .subscription_pickers .options_row.complete:not(.open) h2:hover, .section_choose.complete:not(.open) h2:hover, #results.complete:not(.open) h2:hover { font-size: 22px; box-shadow: 0 0 5px -3px rgba(0, 0, 0, .12); } .subscription_pickers .options_row.open h2, .section_choose.open h2, #results.open h2 { font-size: 32px; color: #000; padding: 32px 20px 30px; cursor: inherit; line-height: 1; } .subscription_pickers .options_row.open .row_outer > ul .option-item label, .section_choose.open .row_outer > ul .option-item label, #results.open .row_outer > ul .option-item label { transition: opacity .3s ease; } .subscription_pickers .options_row.open .row_outer > ul:hover .option-item label, .section_choose.open .row_outer > ul:hover .option-item label, #results.open .row_outer > ul:hover .option-item label { opacity: .5 !important; } .subscription_pickers .options_row.open .row_outer > ul:hover .option-item:hover label, .section_choose.open .row_outer > ul:hover .option-item:hover label, #results.open .row_outer > ul:hover .option-item:hover label { opacity: 1 !important; } .subscription_pickers .options_row.open .row_outer > .extra-content p, .section_choose.open .row_outer > .extra-content p, #results.open .row_outer > .extra-content p { opacity: 1 !important; transition-delay: .1s; } .subscription_pickers .options_row .extra-content, .section_choose .extra-content, #results .extra-content { box-sizing: border-box; overflow: hidden; display: block; background: #fff; border-top: 1px solid #f2f2f2; font-size: 12px; padding: 0; text-align: center; margin: 0 auto; } .subscription_pickers .options_row .extra-content p, .section_choose .extra-content p, #results .extra-content p { padding: 30px 70px; max-width: 568px; margin: auto; } .subscription_pickers .options_row .extra-content p + p, .section_choose .extra-content p + p, #results .extra-content p + p { margin-top: 20px; } .subscription_pickers .options_row .row_outer > ul, .section_choose .row_outer > ul, #results .row_outer > ul { transform-origin: left bottom; margin: 0 auto; padding: 0; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; position: relative; } .subscription_pickers .options_row .row_outer > ul .option-item, .section_choose .row_outer > ul .option-item, #results .row_outer > ul .option-item { max-width: 50%; -ms-flex: 1 0 33%; flex: 1 0 33%; margin: 0; border-top: 1px solid #f2f2f2; padding: 0; background: white; text-align: center; position: relative; display: -ms-flexbox; display: flex; } .subscription_pickers .options_row .row_outer > ul .option-item:not(:first-child), .section_choose .row_outer > ul .option-item:not(:first-child), #results .row_outer > ul .option-item:not(:first-child) { border-left: 1px solid #f2f2f2; } .subscription_pickers .options_row .row_outer > ul .option-item label, .section_choose .row_outer > ul .option-item label, #results .row_outer > ul .option-item label, .subscription_pickers .options_row .row_outer > ul .option-item .inner, .section_choose .row_outer > ul .option-item .inner, #results .row_outer > ul .option-item .inner { width: 100%; display: block; cursor: pointer; position: static; padding-top: 50px; padding-bottom: 115px; margin: 0; } .subscription_pickers .options_row .row_outer > ul .option-item input, .section_choose .row_outer > ul .option-item input, #results .row_outer > ul .option-item input { position: absolute; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; } .subscription_pickers .options_row .row_outer > ul .option-item h3, .section_choose .row_outer > ul .option-item h3, #results .row_outer > ul .option-item h3 { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; margin-top: 0; font-size: 24px; color: #282828; font-style: normal; text-transform: uppercase; letter-spacing: 0px; line-height: 1; margin-bottom: 30px; padding-top: 22px; padding-bottom: 20px; text-align: center; background: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-line-dotted-dark.png?v=15202552567575920502) top center no-repeat, url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-line-dotted-dark.png?v=15202552567575920502) bottom center no-repeat; } .subscription_pickers .options_row .row_outer > ul .option-item p, .section_choose .row_outer > ul .option-item p, #results .row_outer > ul .option-item p { font-size: 14px; line-height: 1.42857143; padding: 0 30px; max-width: 360px; margin: auto; } .subscription_pickers .options_row .row_outer > ul .option-item p.bold, .section_choose .row_outer > ul .option-item p.bold, #results .row_outer > ul .option-item p.bold { color: #282828; margin-bottom: 12px; } .subscription_pickers .options_row .row_outer > ul .option-item p:nth-last-child(2), .section_choose .row_outer > ul .option-item p:nth-last-child(2), #results .row_outer > ul .option-item p:nth-last-child(2) { padding-bottom: 0; } .subscription_pickers .options_row .row_outer > ul .option-item .footnote, .section_choose .row_outer > ul .option-item .footnote, #results .row_outer > ul .option-item .footnote { display: block; font-size: 12px; color: #282828; font-family: 'gentium_basicitalic', Georgia, Times, "Times New Roman", serif; margin-top: 15px; margin-bottom: 0; } .subscription_pickers .options_row .row_outer > ul .option-item .icon, .section_choose .row_outer > ul .option-item .icon, #results .row_outer > ul .option-item .icon { width: 56px; height: 56px; margin: 0 auto 18px auto; } .subscription_pickers .options_row .row_outer > ul .option-item .icon.small, .section_choose .row_outer > ul .option-item .icon.small, #results .row_outer > ul .option-item .icon.small { width: 32px; height: 34px; } .subscription_pickers .options_row .row_outer > ul .option-item.id-350g .icon, .section_choose .row_outer > ul .option-item.id-350g .icon, #results .row_outer > ul .option-item.id-350g .icon, .subscription_pickers .options_row .row_outer > ul .option-item.id-1kg .icon, .section_choose .row_outer > ul .option-item.id-1kg .icon, #results .row_outer > ul .option-item.id-1kg .icon { width: 75px; height: 39px; } .subscription_pickers .options_row .row_outer > ul .option-item .circle, .section_choose .row_outer > ul .option-item .circle, #results .row_outer > ul .option-item .circle, .subscription_pickers .options_row .row_outer > ul .option-item .section_choose_button, .section_choose .row_outer > ul .option-item .section_choose_button, #results .row_outer > ul .option-item .section_choose_button { width: 35px; height: 35px; background: transparent; margin: auto; display: block; border-radius: 50px; font-size: 0; border: 2px solid #b7b7b7; position: absolute; left: 0; right: 0; bottom: 50px; } .subscription_pickers .options_row .row_outer > ul .option-item .circle:after, .section_choose .row_outer > ul .option-item .circle:after, #results .row_outer > ul .option-item .circle:after, .subscription_pickers .options_row .row_outer > ul .option-item .section_choose_button:after, .section_choose .row_outer > ul .option-item .section_choose_button:after, #results .row_outer > ul .option-item .section_choose_button:after { content: ""; background: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/white-tick.png?v=6440355525558195407); width: 15px; height: 12px; background-size: 100% 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background-repeat: no-repeat; background-position: center center; } .subscription_pickers .options_row .row_outer > ul .option-item.filter h3, .section_choose .row_outer > ul .option-item.filter h3, #results .row_outer > ul .option-item.filter h3 { color: #007e49; } .subscription_pickers .options_row .row_outer > ul .option-item.filter input:checked ~ .circle, .section_choose .row_outer > ul .option-item.filter input:checked ~ .circle, #results .row_outer > ul .option-item.filter input:checked ~ .circle, .subscription_pickers .options_row .row_outer > ul .option-item.filter:hover .circle, .section_choose .row_outer > ul .option-item.filter:hover .circle, #results .row_outer > ul .option-item.filter:hover .circle { background: #007e49 !important; border-color: #007e49 !important; } .subscription_pickers .options_row .row_outer > ul .option-item.espresso h3, .section_choose .row_outer > ul .option-item.espresso h3, #results .row_outer > ul .option-item.espresso h3 { color: #960c14; } .subscription_pickers .options_row .row_outer > ul .option-item.espresso input:checked ~ .circle, .section_choose .row_outer > ul .option-item.espresso input:checked ~ .circle, #results .row_outer > ul .option-item.espresso input:checked ~ .circle, .subscription_pickers .options_row .row_outer > ul .option-item.espresso:hover .circle, .section_choose .row_outer > ul .option-item.espresso:hover .circle, #results .row_outer > ul .option-item.espresso:hover .circle { background: #960c14 !important; border-color: #960c14 !important; } .subscription_pickers .options_row .row_outer > ul .option-item:hover .section_choose_button, .section_choose .row_outer > ul .option-item:hover .section_choose_button, #results .row_outer > ul .option-item:hover .section_choose_button, .subscription_pickers .options_row .row_outer > ul .option-item.active .section_choose_button, .section_choose .row_outer > ul .option-item.active .section_choose_button, #results .row_outer > ul .option-item.active .section_choose_button { background: #000; border: 2px solid #000; } .subscription_pickers .options_row .row_outer > ul .option-item input:checked ~ .circle, .section_choose .row_outer > ul .option-item input:checked ~ .circle, #results .row_outer > ul .option-item input:checked ~ .circle, .subscription_pickers .options_row .row_outer > ul .option-item:hover .circle, .section_choose .row_outer > ul .option-item:hover .circle, #results .row_outer > ul .option-item:hover .circle { background: #000; border: 2px solid #000; } .filter-coffee ~ #results .sqmile-common-addtobasket-small { background: #007e49; } .espresso-coffee ~ #results .sqmile-common-addtobasket-small { background: #960c14; } #results { margin-bottom: 100px; } #results .inner { background: #fff; border-top: 1px solid #f2f2f2; } #results .inner .results-message { margin: auto; text-align: center; font-size: 18px; padding: 45px 0; line-height: 1.15; } #results .inner .results-message .summary-text p + p { margin-top: 1em; } #results .hidden { display: none; } #results hr { border: none; width: 69px; height: 2px; margin: 30px auto; background: url(sqmile-img-line-dotted-dark.png) top center no-repeat; } #results .sqmile-common-addtobasket-small { background: #000; border: 0; text-transform: uppercase; font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fff; letter-spacing: 2px; font-size: 15px; margin: 0 auto 20px; padding: 5px 18px; } #results .sub-text { margin-top: 10px; display:none !important; font-size: 18px; color: #99080c; font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; text-transform: uppercase; margin-bottom: -15px; } #results .beans-text { margin-top: 5px; color: #333; font-size: 15px; margin-bottom: 15px; } /*------------------------------------------------------------------ [ ui & interaction ] -------------------------------------------------------------------*/ /* ui / animation / transitions etc */ /* ------------------------------------------------------------------ - Document: SquareMile Coffee Shopify Theme - Version: 1.0.0 - Client: Square Mile Coffee - Author: James Holt / John D Wells - Started: 20 May 2013 [Table of Contents] -------------------------------------------------------------------*/ /*------------------------------------------------------------------ [ 1st Party Variables and mixins ] -------------------------------------------------------------------*/ /*------------------------------------------------------------------ [ animation classes ] - animate -------------------------------------------------------------------*/ #sqmile-ajax-target.fadeIn { /* fill */ animation-fill-mode: both; /* duration */ animation-duration: 400ms; /* easing http://matthewlein.com/ceaser/ value should be valid cubic bezier */ animation-timing-function: cubic-bezier(0, 0, .58, 1); animation-name: fadeIn; } .sqmile-single-product-header.fadeIn, .sqmile-single-product-row.fadeIn { /* fill */ animation-fill-mode: both; /* duration */ animation-duration: 400ms; /* easing http://matthewlein.com/ceaser/ value should be valid cubic bezier */ animation-timing-function: cubic-bezier(0, 0, .58, 1); animation-name: fadeIn; } article.fadeIn { /* fill */ animation-fill-mode: both; /* duration */ animation-duration: 400ms; /* easing http://matthewlein.com/ceaser/ value should be valid cubic bezier */ animation-timing-function: cubic-bezier(0, 0, .58, 1); animation-name: fadeIn; } /*------------------------------------------------------------------ [ animation helpers ] -------------------------------------------------------------------*/ /* easings */ /* animation mixin */ .animated { animation-fill-mode: both; animation-duration: 300ms; animation-timing-function: cubic-bezier(.77, 0, .175, 1); } .animated.hinge { animation-duration: 2s; } /*------------------------------------------------------------------ [ fade In ] -------------------------------------------------------------------*/ /* webkit */ /* moz */ /* opera */ /* normal */ .fadeIn { animation-name: fadeIn; } /*------------------------------------------------------------------ [ fade In Down ] -------------------------------------------------------------------*/ /* webkit */ /* moz */ /* opera */ /* normal */ .fadeInDown { animation-name: fadeInDown; } /*------------------------------------------------------------------ [ fade In Left ] -------------------------------------------------------------------*/ .fadeInLeftBig { animation-name: fadeInLeftBig; } /*------------------------------------------------------------------ [ fade Out Up ] -------------------------------------------------------------------*/ .fadeOutUp { animation-name: fadeOutUp; } /*------------------------------------------------------------------ [ fade Out Down ] -------------------------------------------------------------------*/ .fadeOutDown { animation-name: fadeOutDown; } /*------------------------------------------------------------------ [ fade Out Left ] -------------------------------------------------------------------*/ .fadeOutLeftBig { animation-name: fadeOutLeftBig; } /*------------------------------------------------------------------ [ fade In Left ] -------------------------------------------------------------------*/ .fadeInLeftBig { animation-name: fadeInLeftBig; } /*------------------------------------------------------------------ [ fade In Right ] -------------------------------------------------------------------*/ .fadeInRightBig { animation-name: fadeInRightBig; } /*------------------------------------------------------------------ [ fade Out Right ] -------------------------------------------------------------------*/ .fadeOutRightBig { animation-name: fadeOutRightBig; } /*------------------------------------------------------------------ [ Move To Left ] -------------------------------------------------------------------*/ .slide.moveToLeft { animation: moveToLeft 800ms cubic-bezier(.785, .135, .18, .96) both; } /*------------------------------------------------------------------ [ Move To Left ] -------------------------------------------------------------------*/ .slide.moveFromRight { animation: moveFromRight 800ms cubic-bezier(.785, .135, .18, .96) both; } /*------------------------------------------------------------------ [ Scale Down ] -------------------------------------------------------------------*/ .slide.scaleDown { animation: scaleDown 150ms cubic-bezier(.785, .135, .18, .96) both; } /*------------------------------------------------------------------ [ Scale Up ] -------------------------------------------------------------------*/ .scaleUp { animation: scaleUp 600ms cubic-bezier(.785, .135, .18, .96) both; } /* trigger slide class */ .slide.scaleUp { animation: scaleUp 600ms cubic-bezier(.785, .135, .18, .96) both; } /*------------------------------------------------------------------ [ Scale DownUp ] -------------------------------------------------------------------*/ .scaleDownUp { animation: scaleDownUp 600ms cubic-bezier(.785, .135, .18, .96) both; } /* trigger slide class */ .slide.scaleDownUp { animation: sqmScaleDownIn 600ms cubic-bezier(.785, .135, .18, .96) both; } /*------------------------------------------------------------------ [ CUSTOM scale DownIn ] -------------------------------------------------------------------*/ .sqmScaleDownIn { animation: sqmScaleDownIn 600ms cubic-bezier(.785, .135, .18, .96) both; } /* trigger slide class */ .slide.sqmScaleDownIn { animation: sqmScaleDownIn 600ms cubic-bezier(.785, .135, .18, .96) both; } /*------------------------------------------------------------------ [ CUSTOM fade out ] -------------------------------------------------------------------*/ .sqmCustomFadeOut { animation: sqmCustomFadeOut 100ms cubic-bezier(.785, .135, .18, .96) both; } /* trigger slide class */ .slide.sqmCustomFadeOut { animation: sqmCustomFadeOut 100ms cubic-bezier(.785, .135, .18, .96) both; } /*------------------------------------------------------------------ [ CUSTOM fade In Up ] -------------------------------------------------------------------*/ .sqmCustomFadeIn { animation: sqmCustomFadeIn 400ms cubic-bezier(.785, .135, .18, .96) both; } /* trigger slide class */ /* UI: Hover interactions Notes: */ /*------------------------------------------------------------------ product hover states -------------------------------------------------------------------*/ /*------------------------------------------------------------------ transtion in and out of our hover state this will fade out all but the active product note the transition timings -------------------------------------------------------------------*/ /* hover class: transition in */ #sqmile-common-main.hoverActive .sqmile-product:not(.hoverActive) { z-index: 10; } #sqmile-common-main.hoverActive .sqmile-product:not(.hoverActive) .sqmile-product-transition { opacity: .15; transition: all 200ms cubic-bezier(.19, 1, .22, 1); } /* hover class: transition out */ #sqmile-common-main .sqmile-product .sqmile-product-transition { opacity: 1; transition: all 400ms cubic-bezier(.95, .05, .795, .035); } /*------------------------------------------------------------------ Some default styling necessary for 3d transforms attempted to comment and give some helpful links where appropriate -------------------------------------------------------------------*/ /* some defaults 3d info here http://desandro.github.io/3dtransforms/ */ .sqmile-product { overflow: visible; z-index: 80; } .sqmile-product .sqmile-product-transition { position: absolute; width: 100%; height: 100%; left: 0; top: 0; /* requried for our 3d useful info on perspective here https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transforms */ -o-perspective: 1200px; perspective: 1200px; } .sqmile-product .outer-wrap { /* requried for our 3d */ transition: transform 1s; transform-style: preserve-3d; } .sqmile-product .sqmile-product-info-fold { /* some general styling for the fold */ z-index: 80; z-index: -1; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-color: #fff; /* required for 3D */ transform-origin: 0 100%; /* this is the default state of our fold */ transform: perspective(1200px) rotateY(90deg); /* transition out with custom easing http://matthewlein.com/ceaser/ */ transition: transform 300ms cubic-bezier(.425, .885, .015, .885); /* prevent flickering on webkit */ -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; /* text is initially opaque we fade this in */ } .sqmile-product .sqmile-product-info-fold .center { opacity: 0; transition: all 50ms cubic-bezier(.895, .03, .685, .22); } /* open Left Class this flips our fold the other way so we can open to the left */ .sqmile-product.openLeft .sqmile-product-info-fold { /* update the transform origin */ transform-origin: 100% 50%; /* update the rotation */ transform: perspective(1200px) rotateY(-90deg); } /*------------------------------------------------------------------ product hover states -------------------------------------------------------------------*/ /* open fold */ .sqmile-product.hoverActive.openFold .sqmile-product-info-fold { /* move the fold to it's correct position */ transform: perspective(1200px) rotateY(0deg); /* transition with custom easing */ transition: transform 400ms cubic-bezier(.215, .83, .165, 1); /* fade the content in */ } .sqmile-product.hoverActive.openFold .sqmile-product-info-fold .center { opacity: 1; transition: all 50ms cubic-bezier(.895, .03, .685, .22); } /*------------------------------------------------------------------ to diable transitions we add a noTransitions body class which we can add/remove at certain points -------------------------------------------------------------------*/ /* as our fold has a transition on it by default we need to disable this transition when the grid is resizing to do this we add then remove a body class before and after our fold positioning calculations are done. */ body.noTransitions .sqmile-product .sqmile-product-info-fold { transition: none !important; } /*------------------------------------------------------------------ featured product sliding panel -------------------------------------------------------------------*/ /* slideOut */ /* everything from this */ .sqmile-product.featured, .sqmile-product.topseller { /* default info */ /* slide */ } .sqmile-product.featured .interior .center, .sqmile-product.topseller .interior .center { opacity: 1; transition: all 1s cubic-bezier(.785, .135, .15, .86); } .sqmile-product.featured .sqmile-product-info-slide, .sqmile-product.topseller .sqmile-product-info-slide { left: 100%; transition: all 400ms cubic-bezier(.6, .04, .98, .335); } /* Slide In */ /* everything from this */ .sqmile-product.featured.slideIn, .sqmile-product.topseller.slideIn { /* default info */ /* slide */ } .sqmile-product.featured.slideIn .interior .center, .sqmile-product.topseller.slideIn .interior .center { opacity: 0; transition: all 300ms cubic-bezier(.785, .135, .15, .86); transition-delay: 0ms !important; } .sqmile-product.featured.slideIn .sqmile-product-info-slide, .sqmile-product.topseller.slideIn .sqmile-product-info-slide { left: 0; transition: all 400ms cubic-bezier(.075, .82, .165, 1); transition-delay: 50ms !important; } /* UI: Slide and Ajax interactions Markup: Notes: */ /*------------------------------------------------------------------ Default -------------------------------------------------------------------*/ /* defaults */ #sqmile-slide-wrap { width: auto; } #sqmile-slide-wrap:before, #sqmile-slide-wrap:after { content: " "; display: table; } #sqmile-slide-wrap:after { clear: both; } /* initially all but our current slide will be hidden */ .slide { display: none; } /* overrride top padding on products */ .slide.product:after { padding-top: 0; } /* when animating a slide we need to make sure it shares the z-index of the current slide */ .slide.current { position: relative; z-index: 10; display: block; width: 100%; height: 100%; float: none; } /* when a pushstate is triggered, we add the pushStateTransition class, from this we can reposition our slides in order to transition them */ body.pushStateTransition #sqmile-slide-wrap { /* make sure our animating slide initially appears underneath our current slide */ /* */ } body.pushStateTransition #sqmile-slide-wrap .slide { position: absolute; top: 190px; width: 100%; height: 100%; z-index: 8; display: none; } body.pushStateTransition #sqmile-slide-wrap .slide.animating { z-index: 11; } body.pushStateTransition #sqmile-slide-wrap .slide.current, body.pushStateTransition #sqmile-slide-wrap .slide.animating { position: absolute; display: block; width: 100%; } body.pushStateTransition #sqmile-slide-wrap .slide.current { z-index: 10; } /*------------------------------------------------------------------ [ overides / these must come at the end ] -------------------------------------------------------------------*/ /* if we need to prevent transitions */ .notransition { transition: none !important; } /* when resizing, we may need to move our folds, depending on which way we need to open them. In this case we do not want them to transition to thier new position, so */ body.notransition .sqmile-product .outer-wrap { transition: none !important; } body.notransition .sqmile-product .sqmile-product-info-fold { display: none; transition: none !important; } /*------------------------------------------------------------------ [ modernizr fallbacks ] -------------------------------------------------------------------*/ /* Document : modernizr fallbacks */ /*------------------------------------------------------------------ modernizr fallbacks -------------------------------------------------------------------*/ /* no 3d */ html.no-csstransforms3d { /* product fixes */ } html.no-csstransforms3d .sqmile-product .sqmile-product-info-fold, html.no-csstransforms3d .sqmile-product.featured .sqmile-product-info-fold { display: none !important; } /* no-svg */ /*------------------------------------------------------------------ [ Booster Discounts App ] -------------------------------------------------------------------*/ #sqmile-common-main #sqmile-slide-wrap .ba-product-bundle { padding: 0 15px; } #sqmile-common-main #sqmile-slide-wrap .ba-product-bundle .bundle-title { width: 100%; } #sqmile-common-main #sqmile-slide-wrap .ba-product-bundle .ba-bundle-wrapper { padding: 0 0; } #sqmile-common-main #sqmile-slide-wrap .ba-product-bundle.with-total .bundle-total .ba-eqs { display: none !important; } #sqmile-common-main #sqmile-slide-wrap .ba-product-bundle .ba-image img { width: 100%; height: 100%; max-height: none; -o-object-fit: cover; object-fit: cover; } #sqmile-common-main #sqmile-slide-wrap .ba-product-bundle .ba-image { width: 100%; height: 0; padding-bottom: 85%; position: relative; } #sqmile-common-main #sqmile-slide-wrap .ba-product-bundle .ba-image a { position: absolute; left: 0; top: 0; bottom: 0; right: 0; } #sqmile-common-main #sqmile-slide-wrap .bundle-total { margin: 20px 0; display: block; } #sqmile-common-main #sqmile-slide-wrap .ba-product-bundle .bundle-plus { margin: 20px auto; line-height: 0; max-width: none; -ms-flex-negative: 0; flex-shrink: 0; position: relative; } #sqmile-common-main #sqmile-slide-wrap .ba-product-bundle .bundle-plus img { opacity: 0 !important; } #sqmile-common-main #sqmile-slide-wrap .ba-product-bundle .bundle-plus:after { content: ""; top: 0; border-radius: 9999px; left: 50% !important; margin-left: -19px !important; z-index: 1; width: 37px; height: 37px; position: absolute; background-image: url('plus-icon.svg?234278233432'); background-size: 32px 32px; background-repeat: no-repeat; background-position: center; } #sqmile-common-main #sqmile-slide-wrap .ba-product-bundle .bundle-plus img { position: absolute; left: 50% !important; margin-left: -19px !important; z-index: 2; } #sqmile-common-main #sqmile-slide-wrap #two-product .ba-product-wrapper { width: 30%; -ms-flex: 1 1 30%; flex: 1 1 30%; margin: 0 20px; } #sqmile-common-main #sqmile-slide-wrap #three-product .ba-product-wrapper { width: 28%; -ms-flex: 1 1 28%; flex: 1 1 28%; margin: 0 auto; } #sqmile-common-main #sqmile-slide-wrap #four-product .ba-product-wrapper { width: 14%; -ms-flex: 1 1 14%; flex: 1 1 14%; margin: 0 20px; } #sqmile-common-main #sqmile-slide-wrap .bundle-name { line-height: 1.1; height: auto !important; min-height: 2.2em; } #sqmile-common-main #sqmile-slide-wrap .ba-bundle-wrapper .booster-variants-container select.ba-variants { -webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 10px auto; border-radius: 0; width: 100%; font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; font-style: normal; text-transform: uppercase; letter-spacing: 0px; background-image: url(//cdn.shopify.com/s/files/1/0017/1562/t/8/assets/sqmile-img-variant-select-arrow.png?4325812422515556758); background-repeat: no-repeat; background-position: 93% center; background-size: 10px auto; border: none; color: #231f20; left: 0; padding: 5px 30px 5px 5px; position: relative; text-decoration: none; top: 0; width: 179px; max-width: 90%; z-index: 1; background-color: #f3f3f5; } .discount-applies-true .ba-price .ba-sale { display: none; } /*------------------------------------------------------------------ [ ie hacks ] -------------------------------------------------------------------*/ /* Document : ie hacks */ /*------------------------------------------------------------------ ie 10 -------------------------------------------------------------------*/ /*------------------------------------------------------------------ ie 9 -------------------------------------------------------------------*/ /*------------------------------------------------------------------ ie 8 * html -> -------------------------------------------------------------------*/ /*------------------------------------------------------------------ ie 7 and under * html - > lower than ie 8 * ie 7 & 8 do not support media queries, so they will recieve our * mobile layout -------------------------------------------------------------------*/ /* everything from this */ html.lt-ie8, html.ie8 { /* --------------------------- product ---------------------------*/ /* nav */ /* color vars */ /* --------------------------- featured product ---------------------------*/ /* --------------------------- product filter ---------------------------*/ /* --------------------------- single product ---------------------------*/ } html.lt-ie8 .sqmile-product:after, html.ie8 .sqmile-product:after, html.lt-ie8 .sqmile-product.featured:after, html.ie8 .sqmile-product.featured:after { padding-top: 80% !important; } html.lt-ie8 #sqmile-module-navigation, html.ie8 #sqmile-module-navigation { display: none; } html.lt-ie8 .sqmile-product.subscription.espresso .inner, html.ie8 .sqmile-product.subscription.espresso .inner { background-color: #797979 !important; } html.lt-ie8 .sqmile-product.subscription.filter .inner, html.ie8 .sqmile-product.subscription.filter .inner { background-color: #414141 !important; } html.lt-ie8 .sqmile-product.equipment inner, html.ie8 .sqmile-product.equipment inner { background-color: #c2bfbf !important; } html.lt-ie8 .sqmile-product.merchandise inner, html.ie8 .sqmile-product.merchandise inner { background-color: #231f20 !important; } html.lt-ie8 .sqmile-product.featured, html.ie8 .sqmile-product.featured { float: left; width: 100%; position: relative; display: block; /*------------------------------------------------------------------ Tablet - 768 and up -------------------------------------------------------------------*/ /*------------------------------------------------------------------ Desktop - 960 and up -------------------------------------------------------------------*/ /*------------------------------------------------------------------ Large Desktop - 1280px and up -------------------------------------------------------------------*/ /*------------------------------------------------------------------ max width -------------------------------------------------------------------*/ } html.lt-ie8 .sqmile-product.featured .sqmile-product-featured, html.ie8 .sqmile-product.featured .sqmile-product-featured { display: none !important; } html.lt-ie8 #sqmile-top-bar #sqmile-filter, html.ie8 #sqmile-top-bar #sqmile-filter { display: none !important; } html.lt-ie8 .sqmile-single-product .sqmile-single-product-row, html.ie8 .sqmile-single-product .sqmile-single-product-row { padding-left: 0; padding-right: 0; } .block { display: block !important; } .inline-block { display: inline-block !important; } .inline { display: inline !important; } .table { display: table !important; } .table-row { display: table-row !important; } .table-cell { display: table-cell !important; } .hidden { display: none !important; } .flex { display: -ms-flexbox !important; display: flex !important; } .inline-flex { display: -ms-inline-flexbox !important; display: inline-flex !important; } .flex-row { -ms-flex-direction: row !important; flex-direction: row !important; } .flex-row-reverse { -ms-flex-direction: row-reverse !important; flex-direction: row-reverse !important; } .flex-col { -ms-flex-direction: column !important; flex-direction: column !important; } .flex-col-reverse { -ms-flex-direction: column-reverse !important; flex-direction: column-reverse !important; } .flex-wrap { -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } .flex-wrap-reverse { -ms-flex-wrap: wrap-reverse !important; flex-wrap: wrap-reverse !important; } .flex-no-wrap { -ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important; } .items-start { -ms-flex-align: start !important; align-items: flex-start !important; } .items-end { -ms-flex-align: end !important; align-items: flex-end !important; } .items-center { -ms-flex-align: center !important; align-items: center !important; } .items-baseline { -ms-flex-align: baseline !important; align-items: baseline !important; } .items-stretch { -ms-flex-align: stretch !important; align-items: stretch !important; } .self-auto { -ms-flex-item-align: auto !important; -ms-grid-row-align: auto !important; align-self: auto !important; } .self-start { -ms-flex-item-align: start !important; align-self: flex-start !important; } .self-end { -ms-flex-item-align: end !important; align-self: flex-end !important; } .self-center { -ms-flex-item-align: center !important; -ms-grid-row-align: center !important; align-self: center !important; } .self-stretch { -ms-flex-item-align: stretch !important; -ms-grid-row-align: stretch !important; align-self: stretch !important; } .justify-start { -ms-flex-pack: start !important; justify-content: flex-start !important; } .justify-end { -ms-flex-pack: end !important; justify-content: flex-end !important; } .justify-center { -ms-flex-pack: center !important; justify-content: center !important; } .justify-between { -ms-flex-pack: justify !important; justify-content: space-between !important; } .justify-around { -ms-flex-pack: distribute !important; justify-content: space-around !important; } .content-center { -ms-flex-line-pack: center !important; align-content: center !important; } .content-start { -ms-flex-line-pack: start !important; align-content: flex-start !important; } .content-end { -ms-flex-line-pack: end !important; align-content: flex-end !important; } .content-between { -ms-flex-line-pack: justify !important; align-content: space-between !important; } .content-around { -ms-flex-line-pack: distribute !important; align-content: space-around !important; } .flex-1 { -ms-flex: 1 !important; flex: 1 !important; } .flex-auto { -ms-flex: auto !important; flex: auto !important; } .flex-initial { -ms-flex: initial !important; flex: initial !important; } .flex-none { -ms-flex: none !important; flex: none !important; } .flex-grow { -ms-flex-positive: 1 !important; flex-grow: 1 !important; } .flex-shrink { -ms-flex-negative: 1 !important; flex-shrink: 1 !important; } .flex-no-grow { -ms-flex-positive: 0 !important; flex-grow: 0 !important; } .flex-no-shrink { -ms-flex-negative: 0 !important; flex-shrink: 0 !important; } .font-sans { font-family: TradeGothicLTPro-BdCn20, Helvetica Neue, Helvetica, Arial, sans-serif !important; } .font-serif { font-family: gentium_basicregular, Georgia, Times, Times New Roman, serif !important; } .m-0 { margin: 0 !important; } .m-1 { margin: .25rem !important; } .m-2 { margin: .5rem !important; } .m-3 { margin: .75rem !important; } .m-4 { margin: 1rem !important; } .m-5 { margin: 1.25rem !important; } .m-6 { margin: 1.5rem !important; } .m-8 { margin: 2rem !important; } .m-10 { margin: 2.5rem !important; } .m-12 { margin: 3rem !important; } .m-16 { margin: 4rem !important; } .m-20 { margin: 5rem !important; } .m-24 { margin: 6rem !important; } .m-32 { margin: 8rem !important; } .m-auto { margin: auto !important; } .m-px { margin: 1px !important; } .my-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .mx-0 { margin-left: 0 !important; margin-right: 0 !important; } .my-1 { margin-top: .25rem !important; margin-bottom: .25rem !important; } .mx-1 { margin-left: .25rem !important; margin-right: .25rem !important; } .my-2 { margin-top: .5rem !important; margin-bottom: .5rem !important; } .mx-2 { margin-left: .5rem !important; margin-right: .5rem !important; } .my-3 { margin-top: .75rem !important; margin-bottom: .75rem !important; } .mx-3 { margin-left: .75rem !important; margin-right: .75rem !important; } .my-4 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .mx-4 { margin-left: 1rem !important; margin-right: 1rem !important; } .my-5 { margin-top: 1.25rem !important; margin-bottom: 1.25rem !important; } .mx-5 { margin-left: 1.25rem !important; margin-right: 1.25rem !important; } .my-6 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .mx-6 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; } .my-8 { margin-top: 2rem !important; margin-bottom: 2rem !important; } .mx-8 { margin-left: 2rem !important; margin-right: 2rem !important; } .my-10 { margin-top: 2.5rem !important; margin-bottom: 2.5rem !important; } .mx-10 { margin-left: 2.5rem !important; margin-right: 2.5rem !important; } .my-12 { margin-top: 3rem !important; margin-bottom: 3rem !important; } .mx-12 { margin-left: 3rem !important; margin-right: 3rem !important; } .my-16 { margin-top: 4rem !important; margin-bottom: 4rem !important; } .mx-16 { margin-left: 4rem !important; margin-right: 4rem !important; } .my-20 { margin-top: 5rem !important; margin-bottom: 5rem !important; } .mx-20 { margin-left: 5rem !important; margin-right: 5rem !important; } .my-24 { margin-top: 6rem !important; margin-bottom: 6rem !important; } .mx-24 { margin-left: 6rem !important; margin-right: 6rem !important; } .my-32 { margin-top: 8rem !important; margin-bottom: 8rem !important; } .mx-32 { margin-left: 8rem !important; margin-right: 8rem !important; } .my-auto { margin-top: auto !important; margin-bottom: auto !important; } .mx-auto { margin-left: auto !important; margin-right: auto !important; } .my-px { margin-top: 1px !important; margin-bottom: 1px !important; } .mx-px { margin-left: 1px !important; margin-right: 1px !important; } .mt-0 { margin-top: 0 !important; } .mr-0 { margin-right: 0 !important; } .mb-0 { margin-bottom: 0 !important; } .ml-0 { margin-left: 0 !important; } .mt-1 { margin-top: .25rem !important; } .mr-1 { margin-right: .25rem !important; } .mb-1 { margin-bottom: .25rem !important; } .ml-1 { margin-left: .25rem !important; } .mt-2 { margin-top: .5rem !important; } .mr-2 { margin-right: .5rem !important; } .mb-2 { margin-bottom: .5rem !important; } .ml-2 { margin-left: .5rem !important; } .mt-3 { margin-top: .75rem !important; } .mr-3 { margin-right: .75rem !important; } .mb-3 { margin-bottom: .75rem !important; } .ml-3 { margin-left: .75rem !important; } .mt-4 { margin-top: 1rem !important; } .mr-4 { margin-right: 1rem !important; } .mb-4 { margin-bottom: 1rem !important; } .ml-4 { margin-left: 1rem !important; } .mt-5 { margin-top: 1.25rem !important; } .mr-5 { margin-right: 1.25rem !important; } .mb-5 { margin-bottom: 1.25rem !important; } .ml-5 { margin-left: 1.25rem !important; } .mt-6 { margin-top: 1.5rem !important; } .mr-6 { margin-right: 1.5rem !important; } .mb-6 { margin-bottom: 1.5rem !important; } .ml-6 { margin-left: 1.5rem !important; } .mt-8 { margin-top: 2rem !important; } .mr-8 { margin-right: 2rem !important; } .mb-8 { margin-bottom: 2rem !important; } .ml-8 { margin-left: 2rem !important; } .mt-10 { margin-top: 2.5rem !important; } .mr-10 { margin-right: 2.5rem !important; } .mb-10 { margin-bottom: 2.5rem !important; } .ml-10 { margin-left: 2.5rem !important; } .mt-12 { margin-top: 3rem !important; } .mr-12 { margin-right: 3rem !important; } .mb-12 { margin-bottom: 3rem !important; } .ml-12 { margin-left: 3rem !important; } .mt-16 { margin-top: 4rem !important; } .mr-16 { margin-right: 4rem !important; } .mb-16 { margin-bottom: 4rem !important; } .ml-16 { margin-left: 4rem !important; } .mt-20 { margin-top: 5rem !important; } .mr-20 { margin-right: 5rem !important; } .mb-20 { margin-bottom: 5rem !important; } .ml-20 { margin-left: 5rem !important; } .mt-24 { margin-top: 6rem !important; } .mr-24 { margin-right: 6rem !important; } .mb-24 { margin-bottom: 6rem !important; } .ml-24 { margin-left: 6rem !important; } .mt-32 { margin-top: 8rem !important; } .mr-32 { margin-right: 8rem !important; } .mb-32 { margin-bottom: 8rem !important; } .ml-32 { margin-left: 8rem !important; } .mt-auto { margin-top: auto !important; } .mr-auto { margin-right: auto !important; } .mb-auto { margin-bottom: auto !important; } .ml-auto { margin-left: auto !important; } .mt-px { margin-top: 1px !important; } .mr-px { margin-right: 1px !important; } .mb-px { margin-bottom: 1px !important; } .ml-px { margin-left: 1px !important; } .max-w-xs { max-width: 20rem !important; } .max-w-sm { max-width: 30rem !important; } .max-w-md { max-width: 40rem !important; } .max-w-lg { max-width: 50rem !important; } .max-w-xl { max-width: 60rem !important; } .max-w-2xl { max-width: 70rem !important; } .max-w-3xl { max-width: 80rem !important; } .max-w-4xl { max-width: 90rem !important; } .max-w-5xl { max-width: 100rem !important; } .max-w-full { max-width: 100% !important; } .-m-0 { margin: 0 !important; } .-m-1 { margin: -0.25rem !important; } .-m-2 { margin: -0.5rem !important; } .-m-3 { margin: -0.75rem !important; } .-m-4 { margin: -1rem !important; } .-m-5 { margin: -1.25rem !important; } .-m-6 { margin: -1.5rem !important; } .-m-8 { margin: -2rem !important; } .-m-10 { margin: -2.5rem !important; } .-m-12 { margin: -3rem !important; } .-m-16 { margin: -4rem !important; } .-m-20 { margin: -5rem !important; } .-m-24 { margin: -6rem !important; } .-m-32 { margin: -8rem !important; } .-m-px { margin: -1px !important; } .-my-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .-mx-0 { margin-left: 0 !important; margin-right: 0 !important; } .-my-1 { margin-top: -0.25rem !important; margin-bottom: -0.25rem !important; } .-mx-1 { margin-left: -0.25rem !important; margin-right: -0.25rem !important; } .-my-2 { margin-top: -0.5rem !important; margin-bottom: -0.5rem !important; } .-mx-2 { margin-left: -0.5rem !important; margin-right: -0.5rem !important; } .-my-3 { margin-top: -0.75rem !important; margin-bottom: -0.75rem !important; } .-mx-3 { margin-left: -0.75rem !important; margin-right: -0.75rem !important; } .-my-4 { margin-top: -1rem !important; margin-bottom: -1rem !important; } .-mx-4 { margin-left: -1rem !important; margin-right: -1rem !important; } .-my-5 { margin-top: -1.25rem !important; margin-bottom: -1.25rem !important; } .-mx-5 { margin-left: -1.25rem !important; margin-right: -1.25rem !important; } .-my-6 { margin-top: -1.5rem !important; margin-bottom: -1.5rem !important; } .-mx-6 { margin-left: -1.5rem !important; margin-right: -1.5rem !important; } .-my-8 { margin-top: -2rem !important; margin-bottom: -2rem !important; } .-mx-8 { margin-left: -2rem !important; margin-right: -2rem !important; } .-my-10 { margin-top: -2.5rem !important; margin-bottom: -2.5rem !important; } .-mx-10 { margin-left: -2.5rem !important; margin-right: -2.5rem !important; } .-my-12 { margin-top: -3rem !important; margin-bottom: -3rem !important; } .-mx-12 { margin-left: -3rem !important; margin-right: -3rem !important; } .-my-16 { margin-top: -4rem !important; margin-bottom: -4rem !important; } .-mx-16 { margin-left: -4rem !important; margin-right: -4rem !important; } .-my-20 { margin-top: -5rem !important; margin-bottom: -5rem !important; } .-mx-20 { margin-left: -5rem !important; margin-right: -5rem !important; } .-my-24 { margin-top: -6rem !important; margin-bottom: -6rem !important; } .-mx-24 { margin-left: -6rem !important; margin-right: -6rem !important; } .-my-32 { margin-top: -8rem !important; margin-bottom: -8rem !important; } .-mx-32 { margin-left: -8rem !important; margin-right: -8rem !important; } .-my-px { margin-top: -1px !important; margin-bottom: -1px !important; } .-mx-px { margin-left: -1px !important; margin-right: -1px !important; } .-mt-0 { margin-top: 0 !important; } .-mr-0 { margin-right: 0 !important; } .-mb-0 { margin-bottom: 0 !important; } .-ml-0 { margin-left: 0 !important; } .-mt-1 { margin-top: -0.25rem !important; } .-mr-1 { margin-right: -0.25rem !important; } .-mb-1 { margin-bottom: -0.25rem !important; } .-ml-1 { margin-left: -0.25rem !important; } .-mt-2 { margin-top: -0.5rem !important; } .-mr-2 { margin-right: -0.5rem !important; } .-mb-2 { margin-bottom: -0.5rem !important; } .-ml-2 { margin-left: -0.5rem !important; } .-mt-3 { margin-top: -0.75rem !important; } .-mr-3 { margin-right: -0.75rem !important; } .-mb-3 { margin-bottom: -0.75rem !important; } .-ml-3 { margin-left: -0.75rem !important; } .-mt-4 { margin-top: -1rem !important; } .-mr-4 { margin-right: -1rem !important; } .-mb-4 { margin-bottom: -1rem !important; } .-ml-4 { margin-left: -1rem !important; } .-mt-5 { margin-top: -1.25rem !important; } .-mr-5 { margin-right: -1.25rem !important; } .-mb-5 { margin-bottom: -1.25rem !important; } .-ml-5 { margin-left: -1.25rem !important; } .-mt-6 { margin-top: -1.5rem !important; } .-mr-6 { margin-right: -1.5rem !important; } .-mb-6 { margin-bottom: -1.5rem !important; } .-ml-6 { margin-left: -1.5rem !important; } .-mt-8 { margin-top: -2rem !important; } .-mr-8 { margin-right: -2rem !important; } .-mb-8 { margin-bottom: -2rem !important; } .-ml-8 { margin-left: -2rem !important; } .-mt-10 { margin-top: -2.5rem !important; } .-mr-10 { margin-right: -2.5rem !important; } .-mb-10 { margin-bottom: -2.5rem !important; } .-ml-10 { margin-left: -2.5rem !important; } .-mt-12 { margin-top: -3rem !important; } .-mr-12 { margin-right: -3rem !important; } .-mb-12 { margin-bottom: -3rem !important; } .-ml-12 { margin-left: -3rem !important; } .-mt-16 { margin-top: -4rem !important; } .-mr-16 { margin-right: -4rem !important; } .-mb-16 { margin-bottom: -4rem !important; } .-ml-16 { margin-left: -4rem !important; } .-mt-20 { margin-top: -5rem !important; } .-mr-20 { margin-right: -5rem !important; } .-mb-20 { margin-bottom: -5rem !important; } .-ml-20 { margin-left: -5rem !important; } .-mt-24 { margin-top: -6rem !important; } .-mr-24 { margin-right: -6rem !important; } .-mb-24 { margin-bottom: -6rem !important; } .-ml-24 { margin-left: -6rem !important; } .-mt-32 { margin-top: -8rem !important; } .-mr-32 { margin-right: -8rem !important; } .-mb-32 { margin-bottom: -8rem !important; } .-ml-32 { margin-left: -8rem !important; } .-mt-px { margin-top: -1px !important; } .-mr-px { margin-right: -1px !important; } .-mb-px { margin-bottom: -1px !important; } .-ml-px { margin-left: -1px !important; } .p-0 { padding: 0 !important; } .p-1 { padding: .25rem !important; } .p-2 { padding: .5rem !important; } .p-3 { padding: .75rem !important; } .p-4 { padding: 1rem !important; } .p-5 { padding: 1.25rem !important; } .p-6 { padding: 1.5rem !important; } .p-8 { padding: 2rem !important; } .p-10 { padding: 2.5rem !important; } .p-12 { padding: 3rem !important; } .p-16 { padding: 4rem !important; } .p-20 { padding: 5rem !important; } .p-24 { padding: 6rem !important; } .p-32 { padding: 8rem !important; } .p-px { padding: 1px !important; } .py-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .px-0 { padding-left: 0 !important; padding-right: 0 !important; } .py-1 { padding-top: .25rem !important; padding-bottom: .25rem !important; } .px-1 { padding-left: .25rem !important; padding-right: .25rem !important; } .py-2 { padding-top: .5rem !important; padding-bottom: .5rem !important; } .px-2 { padding-left: .5rem !important; padding-right: .5rem !important; } .py-3 { padding-top: .75rem !important; padding-bottom: .75rem !important; } .px-3 { padding-left: .75rem !important; padding-right: .75rem !important; } .py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .px-4 { padding-left: 1rem !important; padding-right: 1rem !important; } .py-5 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; } .px-5 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; } .py-6 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } .py-8 { padding-top: 2rem !important; padding-bottom: 2rem !important; } .px-8 { padding-left: 2rem !important; padding-right: 2rem !important; } .py-10 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; } .px-10 { padding-left: 2.5rem !important; padding-right: 2.5rem !important; } .py-12 { padding-top: 3rem !important; padding-bottom: 3rem !important; } .px-12 { padding-left: 3rem !important; padding-right: 3rem !important; } .py-16 { padding-top: 4rem !important; padding-bottom: 4rem !important; } .px-16 { padding-left: 4rem !important; padding-right: 4rem !important; } .py-20 { padding-top: 5rem !important; padding-bottom: 5rem !important; } .px-20 { padding-left: 5rem !important; padding-right: 5rem !important; } .py-24 { padding-top: 6rem !important; padding-bottom: 6rem !important; } .px-24 { padding-left: 6rem !important; padding-right: 6rem !important; } .py-32 { padding-top: 8rem !important; padding-bottom: 8rem !important; } .px-32 { padding-left: 8rem !important; padding-right: 8rem !important; } .py-px { padding-top: 1px !important; padding-bottom: 1px !important; } .px-px { padding-left: 1px !important; padding-right: 1px !important; } .pt-0 { padding-top: 0 !important; } .pr-0 { padding-right: 0 !important; } .pb-0 { padding-bottom: 0 !important; } .pl-0 { padding-left: 0 !important; } .pt-1 { padding-top: .25rem !important; } .pr-1 { padding-right: .25rem !important; } .pb-1 { padding-bottom: .25rem !important; } .pl-1 { padding-left: .25rem !important; } .pt-2 { padding-top: .5rem !important; } .pr-2 { padding-right: .5rem !important; } .pb-2 { padding-bottom: .5rem !important; } .pl-2 { padding-left: .5rem !important; } .pt-3 { padding-top: .75rem !important; } .pr-3 { padding-right: .75rem !important; } .pb-3 { padding-bottom: .75rem !important; } .pl-3 { padding-left: .75rem !important; } .pt-4 { padding-top: 1rem !important; } .pr-4 { padding-right: 1rem !important; } .pb-4 { padding-bottom: 1rem !important; } .pl-4 { padding-left: 1rem !important; } .pt-5 { padding-top: 1.25rem !important; } .pr-5 { padding-right: 1.25rem !important; } .pb-5 { padding-bottom: 1.25rem !important; } .pl-5 { padding-left: 1.25rem !important; } .pt-6 { padding-top: 1.5rem !important; } .pr-6 { padding-right: 1.5rem !important; } .pb-6 { padding-bottom: 1.5rem !important; } .pl-6 { padding-left: 1.5rem !important; } .pt-8 { padding-top: 2rem !important; } .pr-8 { padding-right: 2rem !important; } .pb-8 { padding-bottom: 2rem !important; } .pl-8 { padding-left: 2rem !important; } .pt-10 { padding-top: 2.5rem !important; } .pr-10 { padding-right: 2.5rem !important; } .pb-10 { padding-bottom: 2.5rem !important; } .pl-10 { padding-left: 2.5rem !important; } .pt-12 { padding-top: 3rem !important; } .pr-12 { padding-right: 3rem !important; } .pb-12 { padding-bottom: 3rem !important; } .pl-12 { padding-left: 3rem !important; } .pt-16 { padding-top: 4rem !important; } .pr-16 { padding-right: 4rem !important; } .pb-16 { padding-bottom: 4rem !important; } .pl-16 { padding-left: 4rem !important; } .pt-20 { padding-top: 5rem !important; } .pr-20 { padding-right: 5rem !important; } .pb-20 { padding-bottom: 5rem !important; } .pl-20 { padding-left: 5rem !important; } .pt-24 { padding-top: 6rem !important; } .pr-24 { padding-right: 6rem !important; } .pb-24 { padding-bottom: 6rem !important; } .pl-24 { padding-left: 6rem !important; } .pt-32 { padding-top: 8rem !important; } .pr-32 { padding-right: 8rem !important; } .pb-32 { padding-bottom: 8rem !important; } .pl-32 { padding-left: 8rem !important; } .pt-px { padding-top: 1px !important; } .pr-px { padding-right: 1px !important; } .pb-px { padding-bottom: 1px !important; } .pl-px { padding-left: 1px !important; } .text-left { text-align: left !important; } .text-center { text-align: center !important; } .text-right { text-align: right !important; } .text-justify { text-align: justify !important; } .text-transparent { color: transparent !important; } .text-red { color: #99080c !important; } .text-green { color: #007442 !important; } .text-black { color: #231f20 !important; } .text-xs { font-size: .75rem !important; } .text-sm { font-size: 14px !important; } .text-base { font-size: 1.1428571429rem !important; } .text-lg { font-size: 1.2857142857rem !important; } .text-xl { font-size: 1.4285714286rem !important; } .text-2xl { font-size: 1.5rem !important; } .text-3xl { font-size: 1.875rem !important; } .text-4xl { font-size: 2.25rem !important; } .text-5xl { font-size: 3rem !important; } .italic { font-style: italic !important; } .roman { font-style: normal !important; } .uppercase { text-transform: uppercase !important; } .lowercase { text-transform: lowercase !important; } .capitalize { text-transform: capitalize !important; } .normal-case { text-transform: none !important; } .underline { text-decoration: underline !important; } .line-through { text-decoration: line-through !important; } .no-underline { text-decoration: none !important; } .antialiased { -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; } .subpixel-antialiased { -webkit-font-smoothing: auto !important; -moz-osx-font-smoothing: auto !important; } .w-1 { width: .25rem !important; } .w-2 { width: .5rem !important; } .w-3 { width: .75rem !important; } .w-4 { width: 1rem !important; } .w-5 { width: 1.25rem !important; } .w-6 { width: 1.5rem !important; } .w-8 { width: 2rem !important; } .w-10 { width: 2.5rem !important; } .w-12 { width: 3rem !important; } .w-16 { width: 4rem !important; } .w-24 { width: 6rem !important; } .w-32 { width: 8rem !important; } .w-48 { width: 12rem !important; } .w-64 { width: 16rem !important; } .w-auto { width: auto !important; } .w-px { width: 1px !important; } .w-1\/2 { width: 50% !important; } .w-1\/3 { width: 33.33333% !important; } .w-2\/3 { width: 66.66667% !important; } .w-1\/4 { width: 25% !important; } .w-3\/4 { width: 75% !important; } .w-1\/5 { width: 20% !important; } .w-2\/5 { width: 40% !important; } .w-3\/5 { width: 60% !important; } .w-4\/5 { width: 80% !important; } .w-1\/6 { width: 16.66667% !important; } .w-5\/6 { width: 83.33333% !important; } .w-full { width: 100% !important; } .w-screen { width: 100vw !important; } .border-b { border-bottom: 1px solid #eaebeb; } .border-t { border-top: 1px solid #eaebeb; } @media screen and (orientation: landscape) { header html.touch .sqmile-contact-info { display: none; } } @media screen and (min-width: 0px) and (max-width: 500px) { .sqmile-single-product .sqmile-single-product-header { /* this will preserve aspect ratio */ } .sqmile-single-product .sqmile-single-product-header:after { padding-top: 110%; display: block; content: ''; } } @media (min-width: 576px) { .sm\:block { display: block !important; } .sm\:inline-block { display: inline-block !important; } .sm\:inline { display: inline !important; } .sm\:table { display: table !important; } .sm\:table-row { display: table-row !important; } .sm\:table-cell { display: table-cell !important; } .sm\:hidden { display: none !important; } .sm\:flex { display: -ms-flexbox !important; display: flex !important; } .sm\:inline-flex { display: -ms-inline-flexbox !important; display: inline-flex !important; } .sm\:flex-row { -ms-flex-direction: row !important; flex-direction: row !important; } .sm\:flex-row-reverse { -ms-flex-direction: row-reverse !important; flex-direction: row-reverse !important; } .sm\:flex-col { -ms-flex-direction: column !important; flex-direction: column !important; } .sm\:flex-col-reverse { -ms-flex-direction: column-reverse !important; flex-direction: column-reverse !important; } .sm\:flex-wrap { -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } .sm\:flex-wrap-reverse { -ms-flex-wrap: wrap-reverse !important; flex-wrap: wrap-reverse !important; } .sm\:flex-no-wrap { -ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important; } .sm\:items-start { -ms-flex-align: start !important; align-items: flex-start !important; } .sm\:items-end { -ms-flex-align: end !important; align-items: flex-end !important; } .sm\:items-center { -ms-flex-align: center !important; align-items: center !important; } .sm\:items-baseline { -ms-flex-align: baseline !important; align-items: baseline !important; } .sm\:items-stretch { -ms-flex-align: stretch !important; align-items: stretch !important; } .sm\:self-auto { -ms-flex-item-align: auto !important; -ms-grid-row-align: auto !important; align-self: auto !important; } .sm\:self-start { -ms-flex-item-align: start !important; align-self: flex-start !important; } .sm\:self-end { -ms-flex-item-align: end !important; align-self: flex-end !important; } .sm\:self-center { -ms-flex-item-align: center !important; -ms-grid-row-align: center !important; align-self: center !important; } .sm\:self-stretch { -ms-flex-item-align: stretch !important; -ms-grid-row-align: stretch !important; align-self: stretch !important; } .sm\:justify-start { -ms-flex-pack: start !important; justify-content: flex-start !important; } .sm\:justify-end { -ms-flex-pack: end !important; justify-content: flex-end !important; } .sm\:justify-center { -ms-flex-pack: center !important; justify-content: center !important; } .sm\:justify-between { -ms-flex-pack: justify !important; justify-content: space-between !important; } .sm\:justify-around { -ms-flex-pack: distribute !important; justify-content: space-around !important; } .sm\:content-center { -ms-flex-line-pack: center !important; align-content: center !important; } .sm\:content-start { -ms-flex-line-pack: start !important; align-content: flex-start !important; } .sm\:content-end { -ms-flex-line-pack: end !important; align-content: flex-end !important; } .sm\:content-between { -ms-flex-line-pack: justify !important; align-content: space-between !important; } .sm\:content-around { -ms-flex-line-pack: distribute !important; align-content: space-around !important; } .sm\:flex-1 { -ms-flex: 1 !important; flex: 1 !important; } .sm\:flex-auto { -ms-flex: auto !important; flex: auto !important; } .sm\:flex-initial { -ms-flex: initial !important; flex: initial !important; } .sm\:flex-none { -ms-flex: none !important; flex: none !important; } .sm\:flex-grow { -ms-flex-positive: 1 !important; flex-grow: 1 !important; } .sm\:flex-shrink { -ms-flex-negative: 1 !important; flex-shrink: 1 !important; } .sm\:flex-no-grow { -ms-flex-positive: 0 !important; flex-grow: 0 !important; } .sm\:flex-no-shrink { -ms-flex-negative: 0 !important; flex-shrink: 0 !important; } .sm\:m-0 { margin: 0 !important; } .sm\:m-1 { margin: .25rem !important; } .sm\:m-2 { margin: .5rem !important; } .sm\:m-3 { margin: .75rem !important; } .sm\:m-4 { margin: 1rem !important; } .sm\:m-5 { margin: 1.25rem !important; } .sm\:m-6 { margin: 1.5rem !important; } .sm\:m-8 { margin: 2rem !important; } .sm\:m-10 { margin: 2.5rem !important; } .sm\:m-12 { margin: 3rem !important; } .sm\:m-16 { margin: 4rem !important; } .sm\:m-20 { margin: 5rem !important; } .sm\:m-24 { margin: 6rem !important; } .sm\:m-32 { margin: 8rem !important; } .sm\:m-auto { margin: auto !important; } .sm\:m-px { margin: 1px !important; } .sm\:my-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .sm\:mx-0 { margin-left: 0 !important; margin-right: 0 !important; } .sm\:my-1 { margin-top: .25rem !important; margin-bottom: .25rem !important; } .sm\:mx-1 { margin-left: .25rem !important; margin-right: .25rem !important; } .sm\:my-2 { margin-top: .5rem !important; margin-bottom: .5rem !important; } .sm\:mx-2 { margin-left: .5rem !important; margin-right: .5rem !important; } .sm\:my-3 { margin-top: .75rem !important; margin-bottom: .75rem !important; } .sm\:mx-3 { margin-left: .75rem !important; margin-right: .75rem !important; } .sm\:my-4 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .sm\:mx-4 { margin-left: 1rem !important; margin-right: 1rem !important; } .sm\:my-5 { margin-top: 1.25rem !important; margin-bottom: 1.25rem !important; } .sm\:mx-5 { margin-left: 1.25rem !important; margin-right: 1.25rem !important; } .sm\:my-6 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .sm\:mx-6 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; } .sm\:my-8 { margin-top: 2rem !important; margin-bottom: 2rem !important; } .sm\:mx-8 { margin-left: 2rem !important; margin-right: 2rem !important; } .sm\:my-10 { margin-top: 2.5rem !important; margin-bottom: 2.5rem !important; } .sm\:mx-10 { margin-left: 2.5rem !important; margin-right: 2.5rem !important; } .sm\:my-12 { margin-top: 3rem !important; margin-bottom: 3rem !important; } .sm\:mx-12 { margin-left: 3rem !important; margin-right: 3rem !important; } .sm\:my-16 { margin-top: 4rem !important; margin-bottom: 4rem !important; } .sm\:mx-16 { margin-left: 4rem !important; margin-right: 4rem !important; } .sm\:my-20 { margin-top: 5rem !important; margin-bottom: 5rem !important; } .sm\:mx-20 { margin-left: 5rem !important; margin-right: 5rem !important; } .sm\:my-24 { margin-top: 6rem !important; margin-bottom: 6rem !important; } .sm\:mx-24 { margin-left: 6rem !important; margin-right: 6rem !important; } .sm\:my-32 { margin-top: 8rem !important; margin-bottom: 8rem !important; } .sm\:mx-32 { margin-left: 8rem !important; margin-right: 8rem !important; } .sm\:my-auto { margin-top: auto !important; margin-bottom: auto !important; } .sm\:mx-auto { margin-left: auto !important; margin-right: auto !important; } .sm\:my-px { margin-top: 1px !important; margin-bottom: 1px !important; } .sm\:mx-px { margin-left: 1px !important; margin-right: 1px !important; } .sm\:mt-0 { margin-top: 0 !important; } .sm\:mr-0 { margin-right: 0 !important; } .sm\:mb-0 { margin-bottom: 0 !important; } .sm\:ml-0 { margin-left: 0 !important; } .sm\:mt-1 { margin-top: .25rem !important; } .sm\:mr-1 { margin-right: .25rem !important; } .sm\:mb-1 { margin-bottom: .25rem !important; } .sm\:ml-1 { margin-left: .25rem !important; } .sm\:mt-2 { margin-top: .5rem !important; } .sm\:mr-2 { margin-right: .5rem !important; } .sm\:mb-2 { margin-bottom: .5rem !important; } .sm\:ml-2 { margin-left: .5rem !important; } .sm\:mt-3 { margin-top: .75rem !important; } .sm\:mr-3 { margin-right: .75rem !important; } .sm\:mb-3 { margin-bottom: .75rem !important; } .sm\:ml-3 { margin-left: .75rem !important; } .sm\:mt-4 { margin-top: 1rem !important; } .sm\:mr-4 { margin-right: 1rem !important; } .sm\:mb-4 { margin-bottom: 1rem !important; } .sm\:ml-4 { margin-left: 1rem !important; } .sm\:mt-5 { margin-top: 1.25rem !important; } .sm\:mr-5 { margin-right: 1.25rem !important; } .sm\:mb-5 { margin-bottom: 1.25rem !important; } .sm\:ml-5 { margin-left: 1.25rem !important; } .sm\:mt-6 { margin-top: 1.5rem !important; } .sm\:mr-6 { margin-right: 1.5rem !important; } .sm\:mb-6 { margin-bottom: 1.5rem !important; } .sm\:ml-6 { margin-left: 1.5rem !important; } .sm\:mt-8 { margin-top: 2rem !important; } .sm\:mr-8 { margin-right: 2rem !important; } .sm\:mb-8 { margin-bottom: 2rem !important; } .sm\:ml-8 { margin-left: 2rem !important; } .sm\:mt-10 { margin-top: 2.5rem !important; } .sm\:mr-10 { margin-right: 2.5rem !important; } .sm\:mb-10 { margin-bottom: 2.5rem !important; } .sm\:ml-10 { margin-left: 2.5rem !important; } .sm\:mt-12 { margin-top: 3rem !important; } .sm\:mr-12 { margin-right: 3rem !important; } .sm\:mb-12 { margin-bottom: 3rem !important; } .sm\:ml-12 { margin-left: 3rem !important; } .sm\:mt-16 { margin-top: 4rem !important; } .sm\:mr-16 { margin-right: 4rem !important; } .sm\:mb-16 { margin-bottom: 4rem !important; } .sm\:ml-16 { margin-left: 4rem !important; } .sm\:mt-20 { margin-top: 5rem !important; } .sm\:mr-20 { margin-right: 5rem !important; } .sm\:mb-20 { margin-bottom: 5rem !important; } .sm\:ml-20 { margin-left: 5rem !important; } .sm\:mt-24 { margin-top: 6rem !important; } .sm\:mr-24 { margin-right: 6rem !important; } .sm\:mb-24 { margin-bottom: 6rem !important; } .sm\:ml-24 { margin-left: 6rem !important; } .sm\:mt-32 { margin-top: 8rem !important; } .sm\:mr-32 { margin-right: 8rem !important; } .sm\:mb-32 { margin-bottom: 8rem !important; } .sm\:ml-32 { margin-left: 8rem !important; } .sm\:mt-auto { margin-top: auto !important; } .sm\:mr-auto { margin-right: auto !important; } .sm\:mb-auto { margin-bottom: auto !important; } .sm\:ml-auto { margin-left: auto !important; } .sm\:mt-px { margin-top: 1px !important; } .sm\:mr-px { margin-right: 1px !important; } .sm\:mb-px { margin-bottom: 1px !important; } .sm\:ml-px { margin-left: 1px !important; } .sm\:-m-0 { margin: 0 !important; } .sm\:-m-1 { margin: -0.25rem !important; } .sm\:-m-2 { margin: -0.5rem !important; } .sm\:-m-3 { margin: -0.75rem !important; } .sm\:-m-4 { margin: -1rem !important; } .sm\:-m-5 { margin: -1.25rem !important; } .sm\:-m-6 { margin: -1.5rem !important; } .sm\:-m-8 { margin: -2rem !important; } .sm\:-m-10 { margin: -2.5rem !important; } .sm\:-m-12 { margin: -3rem !important; } .sm\:-m-16 { margin: -4rem !important; } .sm\:-m-20 { margin: -5rem !important; } .sm\:-m-24 { margin: -6rem !important; } .sm\:-m-32 { margin: -8rem !important; } .sm\:-m-px { margin: -1px !important; } .sm\:-my-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .sm\:-mx-0 { margin-left: 0 !important; margin-right: 0 !important; } .sm\:-my-1 { margin-top: -0.25rem !important; margin-bottom: -0.25rem !important; } .sm\:-mx-1 { margin-left: -0.25rem !important; margin-right: -0.25rem !important; } .sm\:-my-2 { margin-top: -0.5rem !important; margin-bottom: -0.5rem !important; } .sm\:-mx-2 { margin-left: -0.5rem !important; margin-right: -0.5rem !important; } .sm\:-my-3 { margin-top: -0.75rem !important; margin-bottom: -0.75rem !important; } .sm\:-mx-3 { margin-left: -0.75rem !important; margin-right: -0.75rem !important; } .sm\:-my-4 { margin-top: -1rem !important; margin-bottom: -1rem !important; } .sm\:-mx-4 { margin-left: -1rem !important; margin-right: -1rem !important; } .sm\:-my-5 { margin-top: -1.25rem !important; margin-bottom: -1.25rem !important; } .sm\:-mx-5 { margin-left: -1.25rem !important; margin-right: -1.25rem !important; } .sm\:-my-6 { margin-top: -1.5rem !important; margin-bottom: -1.5rem !important; } .sm\:-mx-6 { margin-left: -1.5rem !important; margin-right: -1.5rem !important; } .sm\:-my-8 { margin-top: -2rem !important; margin-bottom: -2rem !important; } .sm\:-mx-8 { margin-left: -2rem !important; margin-right: -2rem !important; } .sm\:-my-10 { margin-top: -2.5rem !important; margin-bottom: -2.5rem !important; } .sm\:-mx-10 { margin-left: -2.5rem !important; margin-right: -2.5rem !important; } .sm\:-my-12 { margin-top: -3rem !important; margin-bottom: -3rem !important; } .sm\:-mx-12 { margin-left: -3rem !important; margin-right: -3rem !important; } .sm\:-my-16 { margin-top: -4rem !important; margin-bottom: -4rem !important; } .sm\:-mx-16 { margin-left: -4rem !important; margin-right: -4rem !important; } .sm\:-my-20 { margin-top: -5rem !important; margin-bottom: -5rem !important; } .sm\:-mx-20 { margin-left: -5rem !important; margin-right: -5rem !important; } .sm\:-my-24 { margin-top: -6rem !important; margin-bottom: -6rem !important; } .sm\:-mx-24 { margin-left: -6rem !important; margin-right: -6rem !important; } .sm\:-my-32 { margin-top: -8rem !important; margin-bottom: -8rem !important; } .sm\:-mx-32 { margin-left: -8rem !important; margin-right: -8rem !important; } .sm\:-my-px { margin-top: -1px !important; margin-bottom: -1px !important; } .sm\:-mx-px { margin-left: -1px !important; margin-right: -1px !important; } .sm\:-mt-0 { margin-top: 0 !important; } .sm\:-mr-0 { margin-right: 0 !important; } .sm\:-mb-0 { margin-bottom: 0 !important; } .sm\:-ml-0 { margin-left: 0 !important; } .sm\:-mt-1 { margin-top: -0.25rem !important; } .sm\:-mr-1 { margin-right: -0.25rem !important; } .sm\:-mb-1 { margin-bottom: -0.25rem !important; } .sm\:-ml-1 { margin-left: -0.25rem !important; } .sm\:-mt-2 { margin-top: -0.5rem !important; } .sm\:-mr-2 { margin-right: -0.5rem !important; } .sm\:-mb-2 { margin-bottom: -0.5rem !important; } .sm\:-ml-2 { margin-left: -0.5rem !important; } .sm\:-mt-3 { margin-top: -0.75rem !important; } .sm\:-mr-3 { margin-right: -0.75rem !important; } .sm\:-mb-3 { margin-bottom: -0.75rem !important; } .sm\:-ml-3 { margin-left: -0.75rem !important; } .sm\:-mt-4 { margin-top: -1rem !important; } .sm\:-mr-4 { margin-right: -1rem !important; } .sm\:-mb-4 { margin-bottom: -1rem !important; } .sm\:-ml-4 { margin-left: -1rem !important; } .sm\:-mt-5 { margin-top: -1.25rem !important; } .sm\:-mr-5 { margin-right: -1.25rem !important; } .sm\:-mb-5 { margin-bottom: -1.25rem !important; } .sm\:-ml-5 { margin-left: -1.25rem !important; } .sm\:-mt-6 { margin-top: -1.5rem !important; } .sm\:-mr-6 { margin-right: -1.5rem !important; } .sm\:-mb-6 { margin-bottom: -1.5rem !important; } .sm\:-ml-6 { margin-left: -1.5rem !important; } .sm\:-mt-8 { margin-top: -2rem !important; } .sm\:-mr-8 { margin-right: -2rem !important; } .sm\:-mb-8 { margin-bottom: -2rem !important; } .sm\:-ml-8 { margin-left: -2rem !important; } .sm\:-mt-10 { margin-top: -2.5rem !important; } .sm\:-mr-10 { margin-right: -2.5rem !important; } .sm\:-mb-10 { margin-bottom: -2.5rem !important; } .sm\:-ml-10 { margin-left: -2.5rem !important; } .sm\:-mt-12 { margin-top: -3rem !important; } .sm\:-mr-12 { margin-right: -3rem !important; } .sm\:-mb-12 { margin-bottom: -3rem !important; } .sm\:-ml-12 { margin-left: -3rem !important; } .sm\:-mt-16 { margin-top: -4rem !important; } .sm\:-mr-16 { margin-right: -4rem !important; } .sm\:-mb-16 { margin-bottom: -4rem !important; } .sm\:-ml-16 { margin-left: -4rem !important; } .sm\:-mt-20 { margin-top: -5rem !important; } .sm\:-mr-20 { margin-right: -5rem !important; } .sm\:-mb-20 { margin-bottom: -5rem !important; } .sm\:-ml-20 { margin-left: -5rem !important; } .sm\:-mt-24 { margin-top: -6rem !important; } .sm\:-mr-24 { margin-right: -6rem !important; } .sm\:-mb-24 { margin-bottom: -6rem !important; } .sm\:-ml-24 { margin-left: -6rem !important; } .sm\:-mt-32 { margin-top: -8rem !important; } .sm\:-mr-32 { margin-right: -8rem !important; } .sm\:-mb-32 { margin-bottom: -8rem !important; } .sm\:-ml-32 { margin-left: -8rem !important; } .sm\:-mt-px { margin-top: -1px !important; } .sm\:-mr-px { margin-right: -1px !important; } .sm\:-mb-px { margin-bottom: -1px !important; } .sm\:-ml-px { margin-left: -1px !important; } .sm\:p-0 { padding: 0 !important; } .sm\:p-1 { padding: .25rem !important; } .sm\:p-2 { padding: .5rem !important; } .sm\:p-3 { padding: .75rem !important; } .sm\:p-4 { padding: 1rem !important; } .sm\:p-5 { padding: 1.25rem !important; } .sm\:p-6 { padding: 1.5rem !important; } .sm\:p-8 { padding: 2rem !important; } .sm\:p-10 { padding: 2.5rem !important; } .sm\:p-12 { padding: 3rem !important; } .sm\:p-16 { padding: 4rem !important; } .sm\:p-20 { padding: 5rem !important; } .sm\:p-24 { padding: 6rem !important; } .sm\:p-32 { padding: 8rem !important; } .sm\:p-px { padding: 1px !important; } .sm\:py-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .sm\:px-0 { padding-left: 0 !important; padding-right: 0 !important; } .sm\:py-1 { padding-top: .25rem !important; padding-bottom: .25rem !important; } .sm\:px-1 { padding-left: .25rem !important; padding-right: .25rem !important; } .sm\:py-2 { padding-top: .5rem !important; padding-bottom: .5rem !important; } .sm\:px-2 { padding-left: .5rem !important; padding-right: .5rem !important; } .sm\:py-3 { padding-top: .75rem !important; padding-bottom: .75rem !important; } .sm\:px-3 { padding-left: .75rem !important; padding-right: .75rem !important; } .sm\:py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .sm\:px-4 { padding-left: 1rem !important; padding-right: 1rem !important; } .sm\:py-5 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; } .sm\:px-5 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; } .sm\:py-6 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .sm\:px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } .sm\:py-8 { padding-top: 2rem !important; padding-bottom: 2rem !important; } .sm\:px-8 { padding-left: 2rem !important; padding-right: 2rem !important; } .sm\:py-10 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; } .sm\:px-10 { padding-left: 2.5rem !important; padding-right: 2.5rem !important; } .sm\:py-12 { padding-top: 3rem !important; padding-bottom: 3rem !important; } .sm\:px-12 { padding-left: 3rem !important; padding-right: 3rem !important; } .sm\:py-16 { padding-top: 4rem !important; padding-bottom: 4rem !important; } .sm\:px-16 { padding-left: 4rem !important; padding-right: 4rem !important; } .sm\:py-20 { padding-top: 5rem !important; padding-bottom: 5rem !important; } .sm\:px-20 { padding-left: 5rem !important; padding-right: 5rem !important; } .sm\:py-24 { padding-top: 6rem !important; padding-bottom: 6rem !important; } .sm\:px-24 { padding-left: 6rem !important; padding-right: 6rem !important; } .sm\:py-32 { padding-top: 8rem !important; padding-bottom: 8rem !important; } .sm\:px-32 { padding-left: 8rem !important; padding-right: 8rem !important; } .sm\:py-px { padding-top: 1px !important; padding-bottom: 1px !important; } .sm\:px-px { padding-left: 1px !important; padding-right: 1px !important; } .sm\:pt-0 { padding-top: 0 !important; } .sm\:pr-0 { padding-right: 0 !important; } .sm\:pb-0 { padding-bottom: 0 !important; } .sm\:pl-0 { padding-left: 0 !important; } .sm\:pt-1 { padding-top: .25rem !important; } .sm\:pr-1 { padding-right: .25rem !important; } .sm\:pb-1 { padding-bottom: .25rem !important; } .sm\:pl-1 { padding-left: .25rem !important; } .sm\:pt-2 { padding-top: .5rem !important; } .sm\:pr-2 { padding-right: .5rem !important; } .sm\:pb-2 { padding-bottom: .5rem !important; } .sm\:pl-2 { padding-left: .5rem !important; } .sm\:pt-3 { padding-top: .75rem !important; } .sm\:pr-3 { padding-right: .75rem !important; } .sm\:pb-3 { padding-bottom: .75rem !important; } .sm\:pl-3 { padding-left: .75rem !important; } .sm\:pt-4 { padding-top: 1rem !important; } .sm\:pr-4 { padding-right: 1rem !important; } .sm\:pb-4 { padding-bottom: 1rem !important; } .sm\:pl-4 { padding-left: 1rem !important; } .sm\:pt-5 { padding-top: 1.25rem !important; } .sm\:pr-5 { padding-right: 1.25rem !important; } .sm\:pb-5 { padding-bottom: 1.25rem !important; } .sm\:pl-5 { padding-left: 1.25rem !important; } .sm\:pt-6 { padding-top: 1.5rem !important; } .sm\:pr-6 { padding-right: 1.5rem !important; } .sm\:pb-6 { padding-bottom: 1.5rem !important; } .sm\:pl-6 { padding-left: 1.5rem !important; } .sm\:pt-8 { padding-top: 2rem !important; } .sm\:pr-8 { padding-right: 2rem !important; } .sm\:pb-8 { padding-bottom: 2rem !important; } .sm\:pl-8 { padding-left: 2rem !important; } .sm\:pt-10 { padding-top: 2.5rem !important; } .sm\:pr-10 { padding-right: 2.5rem !important; } .sm\:pb-10 { padding-bottom: 2.5rem !important; } .sm\:pl-10 { padding-left: 2.5rem !important; } .sm\:pt-12 { padding-top: 3rem !important; } .sm\:pr-12 { padding-right: 3rem !important; } .sm\:pb-12 { padding-bottom: 3rem !important; } .sm\:pl-12 { padding-left: 3rem !important; } .sm\:pt-16 { padding-top: 4rem !important; } .sm\:pr-16 { padding-right: 4rem !important; } .sm\:pb-16 { padding-bottom: 4rem !important; } .sm\:pl-16 { padding-left: 4rem !important; } .sm\:pt-20 { padding-top: 5rem !important; } .sm\:pr-20 { padding-right: 5rem !important; } .sm\:pb-20 { padding-bottom: 5rem !important; } .sm\:pl-20 { padding-left: 5rem !important; } .sm\:pt-24 { padding-top: 6rem !important; } .sm\:pr-24 { padding-right: 6rem !important; } .sm\:pb-24 { padding-bottom: 6rem !important; } .sm\:pl-24 { padding-left: 6rem !important; } .sm\:pt-32 { padding-top: 8rem !important; } .sm\:pr-32 { padding-right: 8rem !important; } .sm\:pb-32 { padding-bottom: 8rem !important; } .sm\:pl-32 { padding-left: 8rem !important; } .sm\:pt-px { padding-top: 1px !important; } .sm\:pr-px { padding-right: 1px !important; } .sm\:pb-px { padding-bottom: 1px !important; } .sm\:pl-px { padding-left: 1px !important; } .sm\:w-1 { width: .25rem !important; } .sm\:w-2 { width: .5rem !important; } .sm\:w-3 { width: .75rem !important; } .sm\:w-4 { width: 1rem !important; } .sm\:w-5 { width: 1.25rem !important; } .sm\:w-6 { width: 1.5rem !important; } .sm\:w-8 { width: 2rem !important; } .sm\:w-10 { width: 2.5rem !important; } .sm\:w-12 { width: 3rem !important; } .sm\:w-16 { width: 4rem !important; } .sm\:w-24 { width: 6rem !important; } .sm\:w-32 { width: 8rem !important; } .sm\:w-48 { width: 12rem !important; } .sm\:w-64 { width: 16rem !important; } .sm\:w-auto { width: auto !important; } .sm\:w-px { width: 1px !important; } .sm\:w-1\/2 { width: 50% !important; } .sm\:w-1\/3 { width: 33.33333% !important; } .sm\:w-2\/3 { width: 66.66667% !important; } .sm\:w-1\/4 { width: 25% !important; } .sm\:w-3\/4 { width: 75% !important; } .sm\:w-1\/5 { width: 20% !important; } .sm\:w-2\/5 { width: 40% !important; } .sm\:w-3\/5 { width: 60% !important; } .sm\:w-4\/5 { width: 80% !important; } .sm\:w-1\/6 { width: 16.66667% !important; } .sm\:w-5\/6 { width: 83.33333% !important; } .sm\:w-full { width: 100% !important; } .sm\:w-screen { width: 100vw !important; } } @media screen and (min-width: 652px) { #sqmile-common-main #sqmile-slide-wrap .ba-product-bundle { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: start; align-items: flex-start; } #sqmile-common-main #sqmile-slide-wrap .ba-product-bundle .bundle-plus, #sqmile-common-main #sqmile-slide-wrap .bundle-total { margin-top: 11%; } #sqmile-common-main #sqmile-slide-wrap .bundle-total { width: auto; min-width: 150px; padding: 0 20px; margin-left: auto; margin-right: auto; -ms-flex: 1 0 150px; flex: 1 0 150px; max-width: 300px; } #sqmile-common-main #sqmile-slide-wrap .bundle-total .add-booster-bundle { width: 100%; } } @media (min-width: 768px) { html, body { background-image: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-main-bg.png?v=7383976945172872428); background-repeat: repeat; } html #sqmile-mobile-notice, body #sqmile-mobile-notice { display: none; } #sqmile-common-spinner { margin-left: -15px; height: 100%; top: auto; left: 50%; } #sqmile-common-main { top: 0; } .sqmile-common-container { margin-left: 174px; margin-right: 5px; margin-top: 58px; padding-top: 0; float: none; clear: none; } .sqmile-common-addtobasket { margin: 3em 0 1em 0; } .sqmile-common-hide-on-mobile { display: block; } .sqmile-common-mobilenotice { display: none; } .sqmile-common-article { width: 454px; margin-top: 50px; padding-left: 60px; padding-right: 60px; } .sqmile-product, .product { width: 50%; } .sqmile-product .outer-wrap, .product .outer-wrap { clear: none; margin-right: 5px; margin-left: 5px; margin-bottom: 10px; min-width: 285px; } .sqmile-product .sqmile-product-name, .product .sqmile-product-name { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 30px; color: #231f20; font-style: normal; text-transform: uppercase; letter-spacing: 0px; } .sqmile-product .sqmile-product-description, .product .sqmile-product-description { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; color: #99080c; font-style: normal; text-transform: uppercase; letter-spacing: 2px; } .sqmile-product .sqmile-product-price, .product .sqmile-product-price { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; color: #231f20; font-style: normal; text-transform: uppercase; letter-spacing: 0px; } .sqmile-product.featured { width: 100%; /* .center-block(); background-image: url(~"//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-svg-featured-red.svg?v=16761922575892754751"); background-size: cover; margin-bottom: 42px; height: 84px; width: 84px; */ /* outer wrap * notes - overflow needed to hide our sliding panel */ } .sqmile-product.featured .outer-wrap { overflow: hidden; } .sqmile-product.featured .sqmile-product-name { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 45px; color: #231f20; font-style: normal; text-transform: uppercase; letter-spacing: 0px; width: 70%; } .sqmile-product.featured .sqmile-product-info-slide { display: block; position: absolute; width: 100%; height: 100%; left: 100%; top: 0; overflow: hidden; background-color: #fff; /* product details overrides */ /* left */ /* right */ /* center outer */ } .sqmile-product.featured .sqmile-product-info-slide .sqmile-product-name { font-size: 35px; } .sqmile-product.featured .sqmile-product-info-slide .sqmile-product-description { font-size: 12px; } .sqmile-product.featured .sqmile-product-info-slide .sqmile-product-info-slide-left { float: left; height: 100%; width: 50%; } .sqmile-product.featured .sqmile-product-info-slide .sqmile-product-info-slide-left .table-center { padding: 12px 0 12px 20px; } .sqmile-product.featured .sqmile-product-info-slide .sqmile-product-info-slide-right { float: right; height: 100%; width: 50%; } .sqmile-product.featured .sqmile-product-info-slide .sqmile-product-info-slide-right .table-center { padding: 12px 20px 12px 0px; } .sqmile-product.featured .sqmile-product-info-slide .sqmile-product-info-slide-right .sqmile-wysiwyg { padding-top: 64px; } .sqmile-product.featured .sqmile-product-info-slide .table-center { display: table; width: 100%; height: 100%; overflow: hidden; } .sqmile-product.featured .sqmile-product-featured { display: block; margin-left: auto; margin-right: auto; background-image: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-svg-featured-red.svg?v=16761922575892754751); background-size: cover; margin-bottom: 42px; height: 84px; width: 84px; } .sqmile-product.featured.filter .sqmile-product-featured { background-image: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-svg-featured-green.svg?v=11531701121239591044); } html.no-svg .sqmile-product.featured .sqmile-product.featured .sqmile-product-featured { background-image: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-featured-red.png?12274); } html.no-svg .sqmile-product.featured .sqmile-product.featured.filter .sqmile-product-featured { background-image: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-featured-green.png?12274); } html.no-svg .sqmile-product.featured .sqmile-product.featured.limited .sqmile-product-featured { background-image: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-limited-red.png?12274); } .sqmile-product.topseller { width: 100%; /* .center-block(); background-image: url(~"//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-svg-popular-red.svg?v=17246172928312359736"); background-size: cover; margin-bottom: 42px; height: 84px; width: 84px; */ /* outer wrap * notes - overflow needed to hide our sliding panel */ } .sqmile-product.topseller .outer-wrap { overflow: hidden; } .sqmile-product.topseller .sqmile-product-name { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 45px; color: #231f20; font-style: normal; text-transform: uppercase; letter-spacing: 0px; width: 70%; } .sqmile-product.topseller .sqmile-product-info-slide { display: block; position: absolute; width: 100%; height: 100%; left: 100%; top: 0; overflow: hidden; background-color: #fff; /* product details overrides */ /* left */ /* right */ /* center outer */ } .sqmile-product.topseller .sqmile-product-info-slide .sqmile-product-name { font-size: 35px; } .sqmile-product.topseller .sqmile-product-info-slide .sqmile-product-description { font-size: 12px; } .sqmile-product.topseller .sqmile-product-info-slide .sqmile-product-info-slide-left { float: left; height: 100%; width: 50%; } .sqmile-product.topseller .sqmile-product-info-slide .sqmile-product-info-slide-left .table-center { padding: 12px 0 12px 20px; } .sqmile-product.topseller .sqmile-product-info-slide .sqmile-product-info-slide-right { float: right; height: 100%; width: 50%; } .sqmile-product.topseller .sqmile-product-info-slide .sqmile-product-info-slide-right .table-center { padding: 12px 20px 12px 0px; } .sqmile-product.topseller .sqmile-product-info-slide .sqmile-product-info-slide-right .sqmile-wysiwyg { padding-top: 64px; } .sqmile-product.topseller .sqmile-product-info-slide .table-center { display: table; width: 100%; height: 100%; overflow: hidden; } .sqmile-product.topseller .sqmile-product-topseller { display: block; margin-left: auto; margin-right: auto; background-image: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-svg-popular-red.svg?v=17246172928312359736); background-size: cover; margin-bottom: 42px; height: 84px; width: 84px; } .sqmile-product.topseller.filter .sqmile-product-topseller { background-image: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-svg-popular-green.svg?v=3744324547412222199); } html.no-svg .sqmile-product.topseller .sqmile-product.topseller .sqmile-product-topseller { background-image: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-popular-red.png?12274); } html.no-svg .sqmile-product.topseller .sqmile-product.topseller.filter .sqmile-product-topseller { background-image: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-popular-green.png?12274); } .sqmile-single-product { width: 454px; /* related products */ } .sqmile-single-product .sqmile-single-product-header { background-image: none; /* this will preserve aspect ratio */ } .sqmile-single-product .sqmile-single-product-header .interior-wrap { width: 100%; } .sqmile-single-product .sqmile-single-product-header:after { /* padding here is changed */ padding-top: 80%; display: block; content: ''; } .sqmile-single-product .sqmile-single-product-row { border-bottom: none; } .sqmile-single-product .sqmile-single-product-column { border-bottom: 1px solid #eaebeb; padding: 50px 50px 30px 50px; width: 100%; } .sqmile-single-product .sqmile-slideshow { position: relative; z-index: 10; width: 100%; } .sqmile-single-product .sqmile-slideshow-images img { min-width: 100%; width: 100%; } .sqmile-single-product .sqmile-single-product-details .sqmile-wysiwyg { width: 50%; } .sqmile-single-product .sqmile-single-product-description { float: right; } .sqmile-single-product .sqmile-product.related { width: 100%; } .sqmile-single-product .sqmile-single-product-related-heading { padding-top: 30px; } .sqmile-single-product.merchandise .sqmile-single-product-header, .sqmile-single-product.equipment .sqmile-single-product-header { max-height: 390px; height: 390px; } #sqmile-module-navigation { width: 454px; padding-top: 14px; } #sqmile-module-navigation .sqmile-navigation-link, #sqmile-module-navigation .sqmile-navigation-view-all { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; color: #7e7d7d; font-style: normal; text-transform: uppercase; letter-spacing: 2px; } #sqmile-module-navigation .sqmile-navigation-view-all { width: 50%; position: absolute; display: inline-block; margin: 0 auto; text-align: center; left: 0; top: 14px; margin-left: 25%; } #sqmile-module-navigation .sqmile-navigation-view-all span { padding-left: 25px; background-image: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-navigation-grid-icon.png?v=5764522646362116153); background-repeat: no-repeat; display: inline-block; background-position: 0 -1px; } #sqmile-module-navigation #navigation-previous-product, #sqmile-module-navigation #navigation-next-product { display: block; background-repeat: no-repeat; background-size: 12px; } #sqmile-module-navigation #navigation-previous-product { padding-left: 22px; float: left; background-image: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-navigation-left.png?v=3305011566780296946); background-position: 0 2px; } #sqmile-module-navigation #navigation-next-product { padding-right: 22px; float: right; background-image: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-navigation-right.png?v=14447724370092723069); background-position: 100% 2px; } .sqmile-subscription-group .sqmile-subscription-group-header { margin-top: 50px; } .sqmile-subscription-group { width: 454px; } .sqmile-subscription-group .sqmile-subscription-group-header { min-height: 213px; } .sqmile-subscription-group .sqmile-subscription-group-header__shallow { min-height: 0; } .sqmile-subscription-group .sqmile-subscription-group-header__shallow h2 { margin-bottom: 50px; } .sqmile-subscription-group .sqmile-subscription-group-column.last .sqmile-subscription-group-column-inner { margin-left: 5px; margin-right: 0; } .sqmile-subscription-group .sqmile-subscription-group-column-inner { background-color: #fff; margin-right: 5px; } .sqmile-module-cart { width: 454px; margin-top: 50px; padding-left: 60px; padding-right: 60px; /* default section */ /* header */ /* totals wrap */ } .sqmile-module-cart section p { width: 50%; } .sqmile-module-cart .sqmile-cart-header h2 { font-size: 45px; } .sqmile-module-cart form#cartform table tr th.sqmile-cart-item-remove-heading { display: table-cell; } .sqmile-module-cart form#cartform table tr th.sqmile-cart-item-total-heading { display: table-cell; } .sqmile-module-cart form#cartform table tr td.sqmile-cart-item-total { display: table-cell; } .sqmile-module-cart form#cartform table tr td.sqmile-cart-item-remove { display: table-cell; } .sqmile-module-cart .sqmile-cart-form-footer .sqmile-cart-total-heading { width: 90%; } .sqmile-module-cart .sqmile-cart-form-footer .sqmile-cart-total-amount { text-align: right; width: 10%; } .sqmile-common-page { width: 454px; margin-top: 50px; /* content specific */ } .sqmile-common-page .sqmile-page-content { float: none; padding-right: 50px; padding-left: 50px; } .sqmile-module-page-about { width: 454px; margin-top: 50px; /* */ /* column */ } .sqmile-module-page-about .sqmile-page-content { padding-left: 20px; padding-right: 20px; padding-bottom: 20px; margin-bottom: 60px; border-bottom: 1px solid #eaebeb; } .sqmile-module-page-about .sqmile-page-content:before, .sqmile-module-page-about .sqmile-page-content:after { content: " "; display: table; } .sqmile-module-page-about .sqmile-page-content:after { clear: both; } .sqmile-module-page-about .sqmile-page-column { width: 100%; float: left; clear: left; padding-left: 20px; padding-right: 20px; } .sqmile-module-page-about .sqmile-page-column .sqmile-slideshow { width: 100%; } .sqmile-module-page-about .sqmile-page-column .sqmile-page-column { padding-left: 0; padding-right: 0; } .sqmile-form { width: 313px; } .sqmile-wysiwyg table.sqmile-customer__orders--horizontal { display: table; } .sqmile-wysiwyg table.sqmile-customer__orders--vertical { display: none; } header { float: none; width: 169px; background-image: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-header-bg.png?v=816893745462214003); background-color: transparent; background-repeat: repeat; position: fixed; height: 100%; left: 0; top: 0; /* Logo */ /* mobile menu */ /* main nav */ /* contact info */ } header .brand { margin-top: 42px; margin-bottom: 42px; margin-left: auto; margin-right: auto; width: 114px; } header #sqmile-mobile-menu { display: none; } header #sqmile-main-nav ul { margin-left: auto; margin-right: auto; display: block; position: relative; background-color: transparent; overflow: display; padding-top: 34px; padding-bottom: 16px; z-index: 90; /* we can use multiple bg images here because this will only show on browsers that support media queries */ background: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-line-dotted-light.png?v=8467257196746364293) top center no-repeat, url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-line-dotted-light.png?v=8467257196746364293) bottom center no-repeat, url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-header-bg.png?v=816893745462214003) center center repeat; } header #sqmile-main-nav ul li { padding: 0; border-bottom: none; margin-bottom: 20px; } header #sqmile-main-nav ul li a { text-align: center; padding-left: 0; } header #sqmile-main-nav button { display: none; } header .sqmile-contact-info { display: block !important; text-align: center; position: absolute; bottom: 22px; z-index: 80; } header .sqmile-contact-info h6 { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; color: #d2d3d4; font-style: normal; text-transform: uppercase; letter-spacing: 0px; } header .sqmile-contact-info a { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; color: #676565; font-style: normal; text-transform: none; letter-spacing: 0px; transition: all 400ms ease-out; } header .sqmile-contact-info a:hover { color: #fff; transition: all 200ms ease-in; } header .sqmile-contact-info a:hover { color: #fff; } header .sqmile-contact-info p.credit { padding-top: 2px; font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; color: #676565; font-style: normal; text-transform: none; letter-spacing: 0px; } header .sqmile-contact-info p.credit a { font-size: 12px; } #sqmile-mobile-trigger { display: none; } #sqmile-mobile-menu { display: none; } #sqmile-top-bar { height: auto; left: 179px; position: fixed; right: 10px; width: auto; top: 0; /* product filter */ } #sqmile-top-bar ul .sqmile-roast-day { display: block; } #sqmile-top-bar ul li span { padding-top: 6px; } #sqmile-top-bar ul li em { padding-bottom: 5px; width: auto; } #sqmile-top-bar ul .sqmile-checkout-link span { padding-top: 0px; } #sqmile-top-bar #sqmile-filter { display: none; margin-left: 9px; padding-top: 10px; left: 0; } #sqmile-top-bar #sqmile-filter li { margin-right: 20px; } #sqmile-top-bar #sqmile-filter li a { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; color: #a8a8a8; font-style: normal; text-transform: none; letter-spacing: 0px; padding-top: 15px; } #sqmile-top-bar #sqmile-filter li a i { position: relative; padding-right: 7px; line-height: 14px; font-size: 8px; top: 0; font-size: 16px; } #sqmile-top-bar #sqmile-filter li.active { /*------------------------------------------------------------------ Hide filter on all but index and collection template -------------------------------------------------------------------*/ } #sqmile-top-bar #sqmile-filter li.active a { color: #282828; } #sqmile-top-bar #sqmile-filter .sqmile-filter-espresso a i { color: #960c14; } #sqmile-top-bar #sqmile-filter .sqmile-filter-filter a i { color: #007e49; } #sqmile-footer { padding-bottom: 0; } #sqmile-footer .sqmile-footer-inner-column { margin-left: 174px; } body.pushStateTransition #sqmile-slide-wrap .slide { top: 0; } html.lt-ie8 .sqmile-product.featured, html.ie8 .sqmile-product.featured { width: 50%; } html.lt-ie8 .sqmile-product.featured .outer-wrap, html.ie8 .sqmile-product.featured .outer-wrap { clear: none; margin-right: 5px; margin-left: 5px; margin-bottom: 10px; min-width: 285px; } html.lt-ie8 .sqmile-product.featured .sqmile-product-name, html.ie8 .sqmile-product.featured .sqmile-product-name { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 30px; color: #231f20; font-style: normal; text-transform: uppercase; letter-spacing: 0px; } html.lt-ie8 .sqmile-product.featured .sqmile-product-description, html.ie8 .sqmile-product.featured .sqmile-product-description { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; color: #99080c; font-style: normal; text-transform: uppercase; letter-spacing: 2px; } html.lt-ie8 .sqmile-product.featured .sqmile-product-price, html.ie8 .sqmile-product.featured .sqmile-product-price { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; color: #231f20; font-style: normal; text-transform: uppercase; letter-spacing: 0px; } .md\:block { display: block !important; } .md\:inline-block { display: inline-block !important; } .md\:inline { display: inline !important; } .md\:table { display: table !important; } .md\:table-row { display: table-row !important; } .md\:table-cell { display: table-cell !important; } .md\:hidden { display: none !important; } .md\:flex { display: -ms-flexbox !important; display: flex !important; } .md\:inline-flex { display: -ms-inline-flexbox !important; display: inline-flex !important; } .md\:flex-row { -ms-flex-direction: row !important; flex-direction: row !important; } .md\:flex-row-reverse { -ms-flex-direction: row-reverse !important; flex-direction: row-reverse !important; } .md\:flex-col { -ms-flex-direction: column !important; flex-direction: column !important; } .md\:flex-col-reverse { -ms-flex-direction: column-reverse !important; flex-direction: column-reverse !important; } .md\:flex-wrap { -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } .md\:flex-wrap-reverse { -ms-flex-wrap: wrap-reverse !important; flex-wrap: wrap-reverse !important; } .md\:flex-no-wrap { -ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important; } .md\:items-start { -ms-flex-align: start !important; align-items: flex-start !important; } .md\:items-end { -ms-flex-align: end !important; align-items: flex-end !important; } .md\:items-center { -ms-flex-align: center !important; align-items: center !important; } .md\:items-baseline { -ms-flex-align: baseline !important; align-items: baseline !important; } .md\:items-stretch { -ms-flex-align: stretch !important; align-items: stretch !important; } .md\:self-auto { -ms-flex-item-align: auto !important; -ms-grid-row-align: auto !important; align-self: auto !important; } .md\:self-start { -ms-flex-item-align: start !important; align-self: flex-start !important; } .md\:self-end { -ms-flex-item-align: end !important; align-self: flex-end !important; } .md\:self-center { -ms-flex-item-align: center !important; -ms-grid-row-align: center !important; align-self: center !important; } .md\:self-stretch { -ms-flex-item-align: stretch !important; -ms-grid-row-align: stretch !important; align-self: stretch !important; } .md\:justify-start { -ms-flex-pack: start !important; justify-content: flex-start !important; } .md\:justify-end { -ms-flex-pack: end !important; justify-content: flex-end !important; } .md\:justify-center { -ms-flex-pack: center !important; justify-content: center !important; } .md\:justify-between { -ms-flex-pack: justify !important; justify-content: space-between !important; } .md\:justify-around { -ms-flex-pack: distribute !important; justify-content: space-around !important; } .md\:content-center { -ms-flex-line-pack: center !important; align-content: center !important; } .md\:content-start { -ms-flex-line-pack: start !important; align-content: flex-start !important; } .md\:content-end { -ms-flex-line-pack: end !important; align-content: flex-end !important; } .md\:content-between { -ms-flex-line-pack: justify !important; align-content: space-between !important; } .md\:content-around { -ms-flex-line-pack: distribute !important; align-content: space-around !important; } .md\:flex-1 { -ms-flex: 1 !important; flex: 1 !important; } .md\:flex-auto { -ms-flex: auto !important; flex: auto !important; } .md\:flex-initial { -ms-flex: initial !important; flex: initial !important; } .md\:flex-none { -ms-flex: none !important; flex: none !important; } .md\:flex-grow { -ms-flex-positive: 1 !important; flex-grow: 1 !important; } .md\:flex-shrink { -ms-flex-negative: 1 !important; flex-shrink: 1 !important; } .md\:flex-no-grow { -ms-flex-positive: 0 !important; flex-grow: 0 !important; } .md\:flex-no-shrink { -ms-flex-negative: 0 !important; flex-shrink: 0 !important; } .md\:m-0 { margin: 0 !important; } .md\:m-1 { margin: .25rem !important; } .md\:m-2 { margin: .5rem !important; } .md\:m-3 { margin: .75rem !important; } .md\:m-4 { margin: 1rem !important; } .md\:m-5 { margin: 1.25rem !important; } .md\:m-6 { margin: 1.5rem !important; } .md\:m-8 { margin: 2rem !important; } .md\:m-10 { margin: 2.5rem !important; } .md\:m-12 { margin: 3rem !important; } .md\:m-16 { margin: 4rem !important; } .md\:m-20 { margin: 5rem !important; } .md\:m-24 { margin: 6rem !important; } .md\:m-32 { margin: 8rem !important; } .md\:m-auto { margin: auto !important; } .md\:m-px { margin: 1px !important; } .md\:my-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .md\:mx-0 { margin-left: 0 !important; margin-right: 0 !important; } .md\:my-1 { margin-top: .25rem !important; margin-bottom: .25rem !important; } .md\:mx-1 { margin-left: .25rem !important; margin-right: .25rem !important; } .md\:my-2 { margin-top: .5rem !important; margin-bottom: .5rem !important; } .md\:mx-2 { margin-left: .5rem !important; margin-right: .5rem !important; } .md\:my-3 { margin-top: .75rem !important; margin-bottom: .75rem !important; } .md\:mx-3 { margin-left: .75rem !important; margin-right: .75rem !important; } .md\:my-4 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .md\:mx-4 { margin-left: 1rem !important; margin-right: 1rem !important; } .md\:my-5 { margin-top: 1.25rem !important; margin-bottom: 1.25rem !important; } .md\:mx-5 { margin-left: 1.25rem !important; margin-right: 1.25rem !important; } .md\:my-6 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .md\:mx-6 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; } .md\:my-8 { margin-top: 2rem !important; margin-bottom: 2rem !important; } .md\:mx-8 { margin-left: 2rem !important; margin-right: 2rem !important; } .md\:my-10 { margin-top: 2.5rem !important; margin-bottom: 2.5rem !important; } .md\:mx-10 { margin-left: 2.5rem !important; margin-right: 2.5rem !important; } .md\:my-12 { margin-top: 3rem !important; margin-bottom: 3rem !important; } .md\:mx-12 { margin-left: 3rem !important; margin-right: 3rem !important; } .md\:my-16 { margin-top: 4rem !important; margin-bottom: 4rem !important; } .md\:mx-16 { margin-left: 4rem !important; margin-right: 4rem !important; } .md\:my-20 { margin-top: 5rem !important; margin-bottom: 5rem !important; } .md\:mx-20 { margin-left: 5rem !important; margin-right: 5rem !important; } .md\:my-24 { margin-top: 6rem !important; margin-bottom: 6rem !important; } .md\:mx-24 { margin-left: 6rem !important; margin-right: 6rem !important; } .md\:my-32 { margin-top: 8rem !important; margin-bottom: 8rem !important; } .md\:mx-32 { margin-left: 8rem !important; margin-right: 8rem !important; } .md\:my-auto { margin-top: auto !important; margin-bottom: auto !important; } .md\:mx-auto { margin-left: auto !important; margin-right: auto !important; } .md\:my-px { margin-top: 1px !important; margin-bottom: 1px !important; } .md\:mx-px { margin-left: 1px !important; margin-right: 1px !important; } .md\:mt-0 { margin-top: 0 !important; } .md\:mr-0 { margin-right: 0 !important; } .md\:mb-0 { margin-bottom: 0 !important; } .md\:ml-0 { margin-left: 0 !important; } .md\:mt-1 { margin-top: .25rem !important; } .md\:mr-1 { margin-right: .25rem !important; } .md\:mb-1 { margin-bottom: .25rem !important; } .md\:ml-1 { margin-left: .25rem !important; } .md\:mt-2 { margin-top: .5rem !important; } .md\:mr-2 { margin-right: .5rem !important; } .md\:mb-2 { margin-bottom: .5rem !important; } .md\:ml-2 { margin-left: .5rem !important; } .md\:mt-3 { margin-top: .75rem !important; } .md\:mr-3 { margin-right: .75rem !important; } .md\:mb-3 { margin-bottom: .75rem !important; } .md\:ml-3 { margin-left: .75rem !important; } .md\:mt-4 { margin-top: 1rem !important; } .md\:mr-4 { margin-right: 1rem !important; } .md\:mb-4 { margin-bottom: 1rem !important; } .md\:ml-4 { margin-left: 1rem !important; } .md\:mt-5 { margin-top: 1.25rem !important; } .md\:mr-5 { margin-right: 1.25rem !important; } .md\:mb-5 { margin-bottom: 1.25rem !important; } .md\:ml-5 { margin-left: 1.25rem !important; } .md\:mt-6 { margin-top: 1.5rem !important; } .md\:mr-6 { margin-right: 1.5rem !important; } .md\:mb-6 { margin-bottom: 1.5rem !important; } .md\:ml-6 { margin-left: 1.5rem !important; } .md\:mt-8 { margin-top: 2rem !important; } .md\:mr-8 { margin-right: 2rem !important; } .md\:mb-8 { margin-bottom: 2rem !important; } .md\:ml-8 { margin-left: 2rem !important; } .md\:mt-10 { margin-top: 2.5rem !important; } .md\:mr-10 { margin-right: 2.5rem !important; } .md\:mb-10 { margin-bottom: 2.5rem !important; } .md\:ml-10 { margin-left: 2.5rem !important; } .md\:mt-12 { margin-top: 3rem !important; } .md\:mr-12 { margin-right: 3rem !important; } .md\:mb-12 { margin-bottom: 3rem !important; } .md\:ml-12 { margin-left: 3rem !important; } .md\:mt-16 { margin-top: 4rem !important; } .md\:mr-16 { margin-right: 4rem !important; } .md\:mb-16 { margin-bottom: 4rem !important; } .md\:ml-16 { margin-left: 4rem !important; } .md\:mt-20 { margin-top: 5rem !important; } .md\:mr-20 { margin-right: 5rem !important; } .md\:mb-20 { margin-bottom: 5rem !important; } .md\:ml-20 { margin-left: 5rem !important; } .md\:mt-24 { margin-top: 6rem !important; } .md\:mr-24 { margin-right: 6rem !important; } .md\:mb-24 { margin-bottom: 6rem !important; } .md\:ml-24 { margin-left: 6rem !important; } .md\:mt-32 { margin-top: 8rem !important; } .md\:mr-32 { margin-right: 8rem !important; } .md\:mb-32 { margin-bottom: 8rem !important; } .md\:ml-32 { margin-left: 8rem !important; } .md\:mt-auto { margin-top: auto !important; } .md\:mr-auto { margin-right: auto !important; } .md\:mb-auto { margin-bottom: auto !important; } .md\:ml-auto { margin-left: auto !important; } .md\:mt-px { margin-top: 1px !important; } .md\:mr-px { margin-right: 1px !important; } .md\:mb-px { margin-bottom: 1px !important; } .md\:ml-px { margin-left: 1px !important; } .md\:-m-0 { margin: 0 !important; } .md\:-m-1 { margin: -0.25rem !important; } .md\:-m-2 { margin: -0.5rem !important; } .md\:-m-3 { margin: -0.75rem !important; } .md\:-m-4 { margin: -1rem !important; } .md\:-m-5 { margin: -1.25rem !important; } .md\:-m-6 { margin: -1.5rem !important; } .md\:-m-8 { margin: -2rem !important; } .md\:-m-10 { margin: -2.5rem !important; } .md\:-m-12 { margin: -3rem !important; } .md\:-m-16 { margin: -4rem !important; } .md\:-m-20 { margin: -5rem !important; } .md\:-m-24 { margin: -6rem !important; } .md\:-m-32 { margin: -8rem !important; } .md\:-m-px { margin: -1px !important; } .md\:-my-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .md\:-mx-0 { margin-left: 0 !important; margin-right: 0 !important; } .md\:-my-1 { margin-top: -0.25rem !important; margin-bottom: -0.25rem !important; } .md\:-mx-1 { margin-left: -0.25rem !important; margin-right: -0.25rem !important; } .md\:-my-2 { margin-top: -0.5rem !important; margin-bottom: -0.5rem !important; } .md\:-mx-2 { margin-left: -0.5rem !important; margin-right: -0.5rem !important; } .md\:-my-3 { margin-top: -0.75rem !important; margin-bottom: -0.75rem !important; } .md\:-mx-3 { margin-left: -0.75rem !important; margin-right: -0.75rem !important; } .md\:-my-4 { margin-top: -1rem !important; margin-bottom: -1rem !important; } .md\:-mx-4 { margin-left: -1rem !important; margin-right: -1rem !important; } .md\:-my-5 { margin-top: -1.25rem !important; margin-bottom: -1.25rem !important; } .md\:-mx-5 { margin-left: -1.25rem !important; margin-right: -1.25rem !important; } .md\:-my-6 { margin-top: -1.5rem !important; margin-bottom: -1.5rem !important; } .md\:-mx-6 { margin-left: -1.5rem !important; margin-right: -1.5rem !important; } .md\:-my-8 { margin-top: -2rem !important; margin-bottom: -2rem !important; } .md\:-mx-8 { margin-left: -2rem !important; margin-right: -2rem !important; } .md\:-my-10 { margin-top: -2.5rem !important; margin-bottom: -2.5rem !important; } .md\:-mx-10 { margin-left: -2.5rem !important; margin-right: -2.5rem !important; } .md\:-my-12 { margin-top: -3rem !important; margin-bottom: -3rem !important; } .md\:-mx-12 { margin-left: -3rem !important; margin-right: -3rem !important; } .md\:-my-16 { margin-top: -4rem !important; margin-bottom: -4rem !important; } .md\:-mx-16 { margin-left: -4rem !important; margin-right: -4rem !important; } .md\:-my-20 { margin-top: -5rem !important; margin-bottom: -5rem !important; } .md\:-mx-20 { margin-left: -5rem !important; margin-right: -5rem !important; } .md\:-my-24 { margin-top: -6rem !important; margin-bottom: -6rem !important; } .md\:-mx-24 { margin-left: -6rem !important; margin-right: -6rem !important; } .md\:-my-32 { margin-top: -8rem !important; margin-bottom: -8rem !important; } .md\:-mx-32 { margin-left: -8rem !important; margin-right: -8rem !important; } .md\:-my-px { margin-top: -1px !important; margin-bottom: -1px !important; } .md\:-mx-px { margin-left: -1px !important; margin-right: -1px !important; } .md\:-mt-0 { margin-top: 0 !important; } .md\:-mr-0 { margin-right: 0 !important; } .md\:-mb-0 { margin-bottom: 0 !important; } .md\:-ml-0 { margin-left: 0 !important; } .md\:-mt-1 { margin-top: -0.25rem !important; } .md\:-mr-1 { margin-right: -0.25rem !important; } .md\:-mb-1 { margin-bottom: -0.25rem !important; } .md\:-ml-1 { margin-left: -0.25rem !important; } .md\:-mt-2 { margin-top: -0.5rem !important; } .md\:-mr-2 { margin-right: -0.5rem !important; } .md\:-mb-2 { margin-bottom: -0.5rem !important; } .md\:-ml-2 { margin-left: -0.5rem !important; } .md\:-mt-3 { margin-top: -0.75rem !important; } .md\:-mr-3 { margin-right: -0.75rem !important; } .md\:-mb-3 { margin-bottom: -0.75rem !important; } .md\:-ml-3 { margin-left: -0.75rem !important; } .md\:-mt-4 { margin-top: -1rem !important; } .md\:-mr-4 { margin-right: -1rem !important; } .md\:-mb-4 { margin-bottom: -1rem !important; } .md\:-ml-4 { margin-left: -1rem !important; } .md\:-mt-5 { margin-top: -1.25rem !important; } .md\:-mr-5 { margin-right: -1.25rem !important; } .md\:-mb-5 { margin-bottom: -1.25rem !important; } .md\:-ml-5 { margin-left: -1.25rem !important; } .md\:-mt-6 { margin-top: -1.5rem !important; } .md\:-mr-6 { margin-right: -1.5rem !important; } .md\:-mb-6 { margin-bottom: -1.5rem !important; } .md\:-ml-6 { margin-left: -1.5rem !important; } .md\:-mt-8 { margin-top: -2rem !important; } .md\:-mr-8 { margin-right: -2rem !important; } .md\:-mb-8 { margin-bottom: -2rem !important; } .md\:-ml-8 { margin-left: -2rem !important; } .md\:-mt-10 { margin-top: -2.5rem !important; } .md\:-mr-10 { margin-right: -2.5rem !important; } .md\:-mb-10 { margin-bottom: -2.5rem !important; } .md\:-ml-10 { margin-left: -2.5rem !important; } .md\:-mt-12 { margin-top: -3rem !important; } .md\:-mr-12 { margin-right: -3rem !important; } .md\:-mb-12 { margin-bottom: -3rem !important; } .md\:-ml-12 { margin-left: -3rem !important; } .md\:-mt-16 { margin-top: -4rem !important; } .md\:-mr-16 { margin-right: -4rem !important; } .md\:-mb-16 { margin-bottom: -4rem !important; } .md\:-ml-16 { margin-left: -4rem !important; } .md\:-mt-20 { margin-top: -5rem !important; } .md\:-mr-20 { margin-right: -5rem !important; } .md\:-mb-20 { margin-bottom: -5rem !important; } .md\:-ml-20 { margin-left: -5rem !important; } .md\:-mt-24 { margin-top: -6rem !important; } .md\:-mr-24 { margin-right: -6rem !important; } .md\:-mb-24 { margin-bottom: -6rem !important; } .md\:-ml-24 { margin-left: -6rem !important; } .md\:-mt-32 { margin-top: -8rem !important; } .md\:-mr-32 { margin-right: -8rem !important; } .md\:-mb-32 { margin-bottom: -8rem !important; } .md\:-ml-32 { margin-left: -8rem !important; } .md\:-mt-px { margin-top: -1px !important; } .md\:-mr-px { margin-right: -1px !important; } .md\:-mb-px { margin-bottom: -1px !important; } .md\:-ml-px { margin-left: -1px !important; } .md\:p-0 { padding: 0 !important; } .md\:p-1 { padding: .25rem !important; } .md\:p-2 { padding: .5rem !important; } .md\:p-3 { padding: .75rem !important; } .md\:p-4 { padding: 1rem !important; } .md\:p-5 { padding: 1.25rem !important; } .md\:p-6 { padding: 1.5rem !important; } .md\:p-8 { padding: 2rem !important; } .md\:p-10 { padding: 2.5rem !important; } .md\:p-12 { padding: 3rem !important; } .md\:p-16 { padding: 4rem !important; } .md\:p-20 { padding: 5rem !important; } .md\:p-24 { padding: 6rem !important; } .md\:p-32 { padding: 8rem !important; } .md\:p-px { padding: 1px !important; } .md\:py-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .md\:px-0 { padding-left: 0 !important; padding-right: 0 !important; } .md\:py-1 { padding-top: .25rem !important; padding-bottom: .25rem !important; } .md\:px-1 { padding-left: .25rem !important; padding-right: .25rem !important; } .md\:py-2 { padding-top: .5rem !important; padding-bottom: .5rem !important; } .md\:px-2 { padding-left: .5rem !important; padding-right: .5rem !important; } .md\:py-3 { padding-top: .75rem !important; padding-bottom: .75rem !important; } .md\:px-3 { padding-left: .75rem !important; padding-right: .75rem !important; } .md\:py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .md\:px-4 { padding-left: 1rem !important; padding-right: 1rem !important; } .md\:py-5 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; } .md\:px-5 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; } .md\:py-6 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .md\:px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } .md\:py-8 { padding-top: 2rem !important; padding-bottom: 2rem !important; } .md\:px-8 { padding-left: 2rem !important; padding-right: 2rem !important; } .md\:py-10 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; } .md\:px-10 { padding-left: 2.5rem !important; padding-right: 2.5rem !important; } .md\:py-12 { padding-top: 3rem !important; padding-bottom: 3rem !important; } .md\:px-12 { padding-left: 3rem !important; padding-right: 3rem !important; } .md\:py-16 { padding-top: 4rem !important; padding-bottom: 4rem !important; } .md\:px-16 { padding-left: 4rem !important; padding-right: 4rem !important; } .md\:py-20 { padding-top: 5rem !important; padding-bottom: 5rem !important; } .md\:px-20 { padding-left: 5rem !important; padding-right: 5rem !important; } .md\:py-24 { padding-top: 6rem !important; padding-bottom: 6rem !important; } .md\:px-24 { padding-left: 6rem !important; padding-right: 6rem !important; } .md\:py-32 { padding-top: 8rem !important; padding-bottom: 8rem !important; } .md\:px-32 { padding-left: 8rem !important; padding-right: 8rem !important; } .md\:py-px { padding-top: 1px !important; padding-bottom: 1px !important; } .md\:px-px { padding-left: 1px !important; padding-right: 1px !important; } .md\:pt-0 { padding-top: 0 !important; } .md\:pr-0 { padding-right: 0 !important; } .md\:pb-0 { padding-bottom: 0 !important; } .md\:pl-0 { padding-left: 0 !important; } .md\:pt-1 { padding-top: .25rem !important; } .md\:pr-1 { padding-right: .25rem !important; } .md\:pb-1 { padding-bottom: .25rem !important; } .md\:pl-1 { padding-left: .25rem !important; } .md\:pt-2 { padding-top: .5rem !important; } .md\:pr-2 { padding-right: .5rem !important; } .md\:pb-2 { padding-bottom: .5rem !important; } .md\:pl-2 { padding-left: .5rem !important; } .md\:pt-3 { padding-top: .75rem !important; } .md\:pr-3 { padding-right: .75rem !important; } .md\:pb-3 { padding-bottom: .75rem !important; } .md\:pl-3 { padding-left: .75rem !important; } .md\:pt-4 { padding-top: 1rem !important; } .md\:pr-4 { padding-right: 1rem !important; } .md\:pb-4 { padding-bottom: 1rem !important; } .md\:pl-4 { padding-left: 1rem !important; } .md\:pt-5 { padding-top: 1.25rem !important; } .md\:pr-5 { padding-right: 1.25rem !important; } .md\:pb-5 { padding-bottom: 1.25rem !important; } .md\:pl-5 { padding-left: 1.25rem !important; } .md\:pt-6 { padding-top: 1.5rem !important; } .md\:pr-6 { padding-right: 1.5rem !important; } .md\:pb-6 { padding-bottom: 1.5rem !important; } .md\:pl-6 { padding-left: 1.5rem !important; } .md\:pt-8 { padding-top: 2rem !important; } .md\:pr-8 { padding-right: 2rem !important; } .md\:pb-8 { padding-bottom: 2rem !important; } .md\:pl-8 { padding-left: 2rem !important; } .md\:pt-10 { padding-top: 2.5rem !important; } .md\:pr-10 { padding-right: 2.5rem !important; } .md\:pb-10 { padding-bottom: 2.5rem !important; } .md\:pl-10 { padding-left: 2.5rem !important; } .md\:pt-12 { padding-top: 3rem !important; } .md\:pr-12 { padding-right: 3rem !important; } .md\:pb-12 { padding-bottom: 3rem !important; } .md\:pl-12 { padding-left: 3rem !important; } .md\:pt-16 { padding-top: 4rem !important; } .md\:pr-16 { padding-right: 4rem !important; } .md\:pb-16 { padding-bottom: 4rem !important; } .md\:pl-16 { padding-left: 4rem !important; } .md\:pt-20 { padding-top: 5rem !important; } .md\:pr-20 { padding-right: 5rem !important; } .md\:pb-20 { padding-bottom: 5rem !important; } .md\:pl-20 { padding-left: 5rem !important; } .md\:pt-24 { padding-top: 6rem !important; } .md\:pr-24 { padding-right: 6rem !important; } .md\:pb-24 { padding-bottom: 6rem !important; } .md\:pl-24 { padding-left: 6rem !important; } .md\:pt-32 { padding-top: 8rem !important; } .md\:pr-32 { padding-right: 8rem !important; } .md\:pb-32 { padding-bottom: 8rem !important; } .md\:pl-32 { padding-left: 8rem !important; } .md\:pt-px { padding-top: 1px !important; } .md\:pr-px { padding-right: 1px !important; } .md\:pb-px { padding-bottom: 1px !important; } .md\:pl-px { padding-left: 1px !important; } .md\:w-1 { width: .25rem !important; } .md\:w-2 { width: .5rem !important; } .md\:w-3 { width: .75rem !important; } .md\:w-4 { width: 1rem !important; } .md\:w-5 { width: 1.25rem !important; } .md\:w-6 { width: 1.5rem !important; } .md\:w-8 { width: 2rem !important; } .md\:w-10 { width: 2.5rem !important; } .md\:w-12 { width: 3rem !important; } .md\:w-16 { width: 4rem !important; } .md\:w-24 { width: 6rem !important; } .md\:w-32 { width: 8rem !important; } .md\:w-48 { width: 12rem !important; } .md\:w-64 { width: 16rem !important; } .md\:w-auto { width: auto !important; } .md\:w-px { width: 1px !important; } .md\:w-1\/2 { width: 50% !important; } .md\:w-1\/3 { width: 33.33333% !important; } .md\:w-2\/3 { width: 66.66667% !important; } .md\:w-1\/4 { width: 25% !important; } .md\:w-3\/4 { width: 75% !important; } .md\:w-1\/5 { width: 20% !important; } .md\:w-2\/5 { width: 40% !important; } .md\:w-3\/5 { width: 60% !important; } .md\:w-4\/5 { width: 80% !important; } .md\:w-1\/6 { width: 16.66667% !important; } .md\:w-5\/6 { width: 83.33333% !important; } .md\:w-full { width: 100% !important; } .md\:w-screen { width: 100vw !important; } } @media (min-width: 960px) and (max-width: 1000px) { .sqmile-wysiwyg p { font-size: 13px; } } @media (min-width: 960px) { .sqmile-common-container { margin-left: 216px; margin-top: 49px; margin-right: 10px; padding-bottom: 5px; } .sqmile-common-article { width: 726px; } .sqmile-product, .product { /* three columns now */ width: 33.33%; } .sqmile-product .outer-wrap, .product .outer-wrap { margin-right: 5px; margin-left: 5px; margin-bottom: 10px; min-width: 236px; } .sqmile-product .sqmile-product-name, .product .sqmile-product-name { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 26px; color: #231f20; font-style: normal; text-transform: uppercase; letter-spacing: 0px; } .sqmile-product .sqmile-product-description, .product .sqmile-product-description { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; color: #99080c; font-style: normal; text-transform: uppercase; letter-spacing: 2px; } .sqmile-product .sqmile-product-price, .product .sqmile-product-price { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; color: #231f20; font-style: normal; text-transform: uppercase; letter-spacing: 0px; } .sqmile-product.featured { width: 66.65%; } .sqmile-product.topseller { width: 66.65%; } .sqmile-single-product { width: 726px; /* product header specific here we are maintaining most of the styling from our index product with a couple of minor changes documented below */ /* related products */ } .sqmile-single-product .sqmile-single-product-row { padding: 45px 22px 30px 22px; border-bottom: 1px solid #eaebeb; } .sqmile-single-product .sqmile-single-product-column { border-bottom: none; padding: 0 22px 0 22px; width: 50%; } .sqmile-single-product .sqmile-single-product-header { display: inline-block; position: relative; background-color: #fff; border-bottom: 1px solid #eaebeb; float: left; clear: left; width: 100%; /* this will preserve aspect ratio */ } .sqmile-single-product .sqmile-single-product-header:after { /* padding here is changed */ padding-top: 50%; display: block; content: ''; } .sqmile-single-product .sqmile-single-product-header .interior-wrap { background-color: #fff; width: 50%; /* this will preserve aspect ratio when scaling */ position: absolute; top: 0; bottom: 0; right: 0; left: 0; } .sqmile-single-product .sqmile-single-product-header .interior { /* table cell hack for centering in the unknown */ display: table; width: 100%; height: 100%; } .sqmile-single-product .sqmile-single-product-header .center { /* table cel hack for centering in the unknown */ display: table-cell; text-align: center; vertical-align: middle; } .sqmile-single-product .sqmile-single-product-header .center .sqmile-common-addtobasket { margin: 1em 0 1em 0; } .sqmile-single-product .sqmile-single-product-header .sqmile-product-name, .sqmile-single-product .sqmile-single-product-header .sqmile-product-description, .sqmile-single-product .sqmile-single-product-header .sqmile-product-price { display: block; text-align: center; line-height: 1; } .sqmile-single-product .sqmile-single-product-header .sqmile-product-name { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 27px; color: #231f20; font-style: normal; text-transform: uppercase; letter-spacing: 0px; background: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-line-dotted-dark.png?v=15202552567575920502) top center no-repeat, url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-line-dotted-dark.png?v=15202552567575920502) bottom center no-repeat; padding-top: 17px; padding-bottom: 12px; margin-bottom: 12px; width: 60%; font-size: 45px; } .sqmile-single-product .sqmile-single-product-header .sqmile-product-description { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; color: #99080c; font-style: normal; text-transform: uppercase; letter-spacing: 2px; padding-bottom: 12px; } .sqmile-single-product .sqmile-single-product-header .sqmile-product-price { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; color: #231f20; font-style: normal; text-transform: uppercase; letter-spacing: 0px; display: block; margin-left: auto; margin-right: auto; width: 58px; height: 58px; border-radius: 29px; border: 1px solid #f3f3f3; } .sqmile-single-product .sqmile-single-product-header .sqmile-product-price span { display: block; text-align: center; line-height: 54px; height: 54px; width: 54px; border-radius: 27px; background-color: #f3f3f3; /* correct positioning */ position: relative; left: 1px; top: 1px; } .sqmile-single-product .sqmile-product.related { width: 33.33%; } .sqmile-single-product .sqmile-single-product-related-heading { padding-top: 0; } .sqmile-single-product.merchandise .sqmile-single-product-header .sqmile-single-product-column, .sqmile-single-product.equipment .sqmile-single-product-header .sqmile-single-product-column { display: block; float: right; padding-top: 30px; padding-right: 32px; } .sqmile-single-product.merchandise .sqmile-single-product-header .sqmile-single-product-column .sqmile-slideshow .sqmile-slideshow-images, .sqmile-single-product.equipment .sqmile-single-product-header .sqmile-single-product-column .sqmile-slideshow .sqmile-slideshow-images { max-height: 376px; } .sqmile-slideshow { width: 327px; margin: 0 auto; } #sqmile-module-navigation { width: 726px; } .sqmile-subscription-group { width: 726px; /* header */ /* 2 columns */ } .sqmile-subscription-group .sqmile-subscription-group-header h2, .sqmile-subscription-group .sqmile-subscription-group-header p { display: block; width: 50%; text-align: center; margin-left: auto; margin-right: auto; } .sqmile-subscription-group .sqmile-subscription-group-header h2 { font-size: 45px; } .sqmile-subscription-group .sqmile-subscription-group-column { background-color: transparent; width: 50%; } .sqmile-module-cart { width: 726px; } .sqmile-common-page { width: 726px; } .sqmile-common-page .sqmile-page-content { width: 454px; margin-left: auto; margin-right: auto; padding-right: 0; padding-left: 0; } .sqmile-module-page-about { width: 726px; /* column */ } .sqmile-module-page-about .sqmile-page-column { width: 50%; float: left; clear: none; padding-left: 20px; padding-right: 20px; } .sqmile-module-page-about .sqmile-page-column .sqmile-slideshow { width: 100%; } .sqmile-module-page-about .sqmile-page-column .sqmile-page-column { padding-left: 0; padding-right: 0; } header { width: 211px; } header .brand { margin-top: 69px; margin-bottom: 49px; width: 130px; } #sqmile-top-bar { left: 221px; /* product filter */ } #sqmile-top-bar #sqmile-top-bar-inner { height: 39px; } #sqmile-top-bar ul li a { padding-top: 11px; } #sqmile-top-bar ul li span { padding-top: 12px; } #sqmile-top-bar ul li em { padding-bottom: 0; display: inline-block; float: none; } #sqmile-top-bar ul li b { clear: none; float: none; padding-left: 4px; display: inline-block; } body[data-section="index"] #sqmile-top-bar #sqmile-filter { padding-top: 0; display: block; } #sqmile-footer .sqmile-footer-inner-column { margin-left: 216px; } #sqmile-footer .sqmile-footer-inner-row:last-child { border-top: 1px solid #cecdcd; } #sqmile-footer .sqmile-footer-column { border-bottom: none; } #sqmile-footer .sqmile-footer-inner-column { background-image: url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-footer-bg-image.png?v=2152518933963568340), url(//cdn.shopify.com/s/files/1/0017/1562/t/18/assets/sqmile-img-footer-bg-image.png?v=2152518933963568340); background-position: 33.33% 50%, 66.69% 50%; background-repeat: repeat-y; } #sqmile-footer .sqmile-footer-inner-column:before, #sqmile-footer .sqmile-footer-inner-column:after { content: " "; display: table; } #sqmile-footer .sqmile-footer-inner-column:after { clear: both; } #sqmile-footer .sqmile-footer-column { float: left; clear: none; width: 33.33%; padding: 19px; } #sqmile-general-notice { width: 400px; margin-left: -200px; } html.lt-ie8 .sqmile-product.featured, html.ie8 .sqmile-product.featured { /* three columns now */ width: 33.33%; } html.lt-ie8 .sqmile-product.featured .outer-wrap, html.ie8 .sqmile-product.featured .outer-wrap { margin-right: 5px; margin-left: 5px; margin-bottom: 10px; min-width: 236px; } html.lt-ie8 .sqmile-product.featured .sqmile-product-name, html.ie8 .sqmile-product.featured .sqmile-product-name { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 26px; color: #231f20; font-style: normal; text-transform: uppercase; letter-spacing: 0px; } html.lt-ie8 .sqmile-product.featured .sqmile-product-description, html.ie8 .sqmile-product.featured .sqmile-product-description { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; color: #99080c; font-style: normal; text-transform: uppercase; letter-spacing: 2px; } html.lt-ie8 .sqmile-product.featured .sqmile-product-price, html.ie8 .sqmile-product.featured .sqmile-product-price { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; color: #231f20; font-style: normal; text-transform: uppercase; letter-spacing: 0px; } } @media (min-width: 992px) { .lg\:block { display: block !important; } .lg\:inline-block { display: inline-block !important; } .lg\:inline { display: inline !important; } .lg\:table { display: table !important; } .lg\:table-row { display: table-row !important; } .lg\:table-cell { display: table-cell !important; } .lg\:hidden { display: none !important; } .lg\:flex { display: -ms-flexbox !important; display: flex !important; } .lg\:inline-flex { display: -ms-inline-flexbox !important; display: inline-flex !important; } .lg\:flex-row { -ms-flex-direction: row !important; flex-direction: row !important; } .lg\:flex-row-reverse { -ms-flex-direction: row-reverse !important; flex-direction: row-reverse !important; } .lg\:flex-col { -ms-flex-direction: column !important; flex-direction: column !important; } .lg\:flex-col-reverse { -ms-flex-direction: column-reverse !important; flex-direction: column-reverse !important; } .lg\:flex-wrap { -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } .lg\:flex-wrap-reverse { -ms-flex-wrap: wrap-reverse !important; flex-wrap: wrap-reverse !important; } .lg\:flex-no-wrap { -ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important; } .lg\:items-start { -ms-flex-align: start !important; align-items: flex-start !important; } .lg\:items-end { -ms-flex-align: end !important; align-items: flex-end !important; } .lg\:items-center { -ms-flex-align: center !important; align-items: center !important; } .lg\:items-baseline { -ms-flex-align: baseline !important; align-items: baseline !important; } .lg\:items-stretch { -ms-flex-align: stretch !important; align-items: stretch !important; } .lg\:self-auto { -ms-flex-item-align: auto !important; -ms-grid-row-align: auto !important; align-self: auto !important; } .lg\:self-start { -ms-flex-item-align: start !important; align-self: flex-start !important; } .lg\:self-end { -ms-flex-item-align: end !important; align-self: flex-end !important; } .lg\:self-center { -ms-flex-item-align: center !important; -ms-grid-row-align: center !important; align-self: center !important; } .lg\:self-stretch { -ms-flex-item-align: stretch !important; -ms-grid-row-align: stretch !important; align-self: stretch !important; } .lg\:justify-start { -ms-flex-pack: start !important; justify-content: flex-start !important; } .lg\:justify-end { -ms-flex-pack: end !important; justify-content: flex-end !important; } .lg\:justify-center { -ms-flex-pack: center !important; justify-content: center !important; } .lg\:justify-between { -ms-flex-pack: justify !important; justify-content: space-between !important; } .lg\:justify-around { -ms-flex-pack: distribute !important; justify-content: space-around !important; } .lg\:content-center { -ms-flex-line-pack: center !important; align-content: center !important; } .lg\:content-start { -ms-flex-line-pack: start !important; align-content: flex-start !important; } .lg\:content-end { -ms-flex-line-pack: end !important; align-content: flex-end !important; } .lg\:content-between { -ms-flex-line-pack: justify !important; align-content: space-between !important; } .lg\:content-around { -ms-flex-line-pack: distribute !important; align-content: space-around !important; } .lg\:flex-1 { -ms-flex: 1 !important; flex: 1 !important; } .lg\:flex-auto { -ms-flex: auto !important; flex: auto !important; } .lg\:flex-initial { -ms-flex: initial !important; flex: initial !important; } .lg\:flex-none { -ms-flex: none !important; flex: none !important; } .lg\:flex-grow { -ms-flex-positive: 1 !important; flex-grow: 1 !important; } .lg\:flex-shrink { -ms-flex-negative: 1 !important; flex-shrink: 1 !important; } .lg\:flex-no-grow { -ms-flex-positive: 0 !important; flex-grow: 0 !important; } .lg\:flex-no-shrink { -ms-flex-negative: 0 !important; flex-shrink: 0 !important; } .lg\:m-0 { margin: 0 !important; } .lg\:m-1 { margin: .25rem !important; } .lg\:m-2 { margin: .5rem !important; } .lg\:m-3 { margin: .75rem !important; } .lg\:m-4 { margin: 1rem !important; } .lg\:m-5 { margin: 1.25rem !important; } .lg\:m-6 { margin: 1.5rem !important; } .lg\:m-8 { margin: 2rem !important; } .lg\:m-10 { margin: 2.5rem !important; } .lg\:m-12 { margin: 3rem !important; } .lg\:m-16 { margin: 4rem !important; } .lg\:m-20 { margin: 5rem !important; } .lg\:m-24 { margin: 6rem !important; } .lg\:m-32 { margin: 8rem !important; } .lg\:m-auto { margin: auto !important; } .lg\:m-px { margin: 1px !important; } .lg\:my-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .lg\:mx-0 { margin-left: 0 !important; margin-right: 0 !important; } .lg\:my-1 { margin-top: .25rem !important; margin-bottom: .25rem !important; } .lg\:mx-1 { margin-left: .25rem !important; margin-right: .25rem !important; } .lg\:my-2 { margin-top: .5rem !important; margin-bottom: .5rem !important; } .lg\:mx-2 { margin-left: .5rem !important; margin-right: .5rem !important; } .lg\:my-3 { margin-top: .75rem !important; margin-bottom: .75rem !important; } .lg\:mx-3 { margin-left: .75rem !important; margin-right: .75rem !important; } .lg\:my-4 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .lg\:mx-4 { margin-left: 1rem !important; margin-right: 1rem !important; } .lg\:my-5 { margin-top: 1.25rem !important; margin-bottom: 1.25rem !important; } .lg\:mx-5 { margin-left: 1.25rem !important; margin-right: 1.25rem !important; } .lg\:my-6 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .lg\:mx-6 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; } .lg\:my-8 { margin-top: 2rem !important; margin-bottom: 2rem !important; } .lg\:mx-8 { margin-left: 2rem !important; margin-right: 2rem !important; } .lg\:my-10 { margin-top: 2.5rem !important; margin-bottom: 2.5rem !important; } .lg\:mx-10 { margin-left: 2.5rem !important; margin-right: 2.5rem !important; } .lg\:my-12 { margin-top: 3rem !important; margin-bottom: 3rem !important; } .lg\:mx-12 { margin-left: 3rem !important; margin-right: 3rem !important; } .lg\:my-16 { margin-top: 4rem !important; margin-bottom: 4rem !important; } .lg\:mx-16 { margin-left: 4rem !important; margin-right: 4rem !important; } .lg\:my-20 { margin-top: 5rem !important; margin-bottom: 5rem !important; } .lg\:mx-20 { margin-left: 5rem !important; margin-right: 5rem !important; } .lg\:my-24 { margin-top: 6rem !important; margin-bottom: 6rem !important; } .lg\:mx-24 { margin-left: 6rem !important; margin-right: 6rem !important; } .lg\:my-32 { margin-top: 8rem !important; margin-bottom: 8rem !important; } .lg\:mx-32 { margin-left: 8rem !important; margin-right: 8rem !important; } .lg\:my-auto { margin-top: auto !important; margin-bottom: auto !important; } .lg\:mx-auto { margin-left: auto !important; margin-right: auto !important; } .lg\:my-px { margin-top: 1px !important; margin-bottom: 1px !important; } .lg\:mx-px { margin-left: 1px !important; margin-right: 1px !important; } .lg\:mt-0 { margin-top: 0 !important; } .lg\:mr-0 { margin-right: 0 !important; } .lg\:mb-0 { margin-bottom: 0 !important; } .lg\:ml-0 { margin-left: 0 !important; } .lg\:mt-1 { margin-top: .25rem !important; } .lg\:mr-1 { margin-right: .25rem !important; } .lg\:mb-1 { margin-bottom: .25rem !important; } .lg\:ml-1 { margin-left: .25rem !important; } .lg\:mt-2 { margin-top: .5rem !important; } .lg\:mr-2 { margin-right: .5rem !important; } .lg\:mb-2 { margin-bottom: .5rem !important; } .lg\:ml-2 { margin-left: .5rem !important; } .lg\:mt-3 { margin-top: .75rem !important; } .lg\:mr-3 { margin-right: .75rem !important; } .lg\:mb-3 { margin-bottom: .75rem !important; } .lg\:ml-3 { margin-left: .75rem !important; } .lg\:mt-4 { margin-top: 1rem !important; } .lg\:mr-4 { margin-right: 1rem !important; } .lg\:mb-4 { margin-bottom: 1rem !important; } .lg\:ml-4 { margin-left: 1rem !important; } .lg\:mt-5 { margin-top: 1.25rem !important; } .lg\:mr-5 { margin-right: 1.25rem !important; } .lg\:mb-5 { margin-bottom: 1.25rem !important; } .lg\:ml-5 { margin-left: 1.25rem !important; } .lg\:mt-6 { margin-top: 1.5rem !important; } .lg\:mr-6 { margin-right: 1.5rem !important; } .lg\:mb-6 { margin-bottom: 1.5rem !important; } .lg\:ml-6 { margin-left: 1.5rem !important; } .lg\:mt-8 { margin-top: 2rem !important; } .lg\:mr-8 { margin-right: 2rem !important; } .lg\:mb-8 { margin-bottom: 2rem !important; } .lg\:ml-8 { margin-left: 2rem !important; } .lg\:mt-10 { margin-top: 2.5rem !important; } .lg\:mr-10 { margin-right: 2.5rem !important; } .lg\:mb-10 { margin-bottom: 2.5rem !important; } .lg\:ml-10 { margin-left: 2.5rem !important; } .lg\:mt-12 { margin-top: 3rem !important; } .lg\:mr-12 { margin-right: 3rem !important; } .lg\:mb-12 { margin-bottom: 3rem !important; } .lg\:ml-12 { margin-left: 3rem !important; } .lg\:mt-16 { margin-top: 4rem !important; } .lg\:mr-16 { margin-right: 4rem !important; } .lg\:mb-16 { margin-bottom: 4rem !important; } .lg\:ml-16 { margin-left: 4rem !important; } .lg\:mt-20 { margin-top: 5rem !important; } .lg\:mr-20 { margin-right: 5rem !important; } .lg\:mb-20 { margin-bottom: 5rem !important; } .lg\:ml-20 { margin-left: 5rem !important; } .lg\:mt-24 { margin-top: 6rem !important; } .lg\:mr-24 { margin-right: 6rem !important; } .lg\:mb-24 { margin-bottom: 6rem !important; } .lg\:ml-24 { margin-left: 6rem !important; } .lg\:mt-32 { margin-top: 8rem !important; } .lg\:mr-32 { margin-right: 8rem !important; } .lg\:mb-32 { margin-bottom: 8rem !important; } .lg\:ml-32 { margin-left: 8rem !important; } .lg\:mt-auto { margin-top: auto !important; } .lg\:mr-auto { margin-right: auto !important; } .lg\:mb-auto { margin-bottom: auto !important; } .lg\:ml-auto { margin-left: auto !important; } .lg\:mt-px { margin-top: 1px !important; } .lg\:mr-px { margin-right: 1px !important; } .lg\:mb-px { margin-bottom: 1px !important; } .lg\:ml-px { margin-left: 1px !important; } .lg\:-m-0 { margin: 0 !important; } .lg\:-m-1 { margin: -0.25rem !important; } .lg\:-m-2 { margin: -0.5rem !important; } .lg\:-m-3 { margin: -0.75rem !important; } .lg\:-m-4 { margin: -1rem !important; } .lg\:-m-5 { margin: -1.25rem !important; } .lg\:-m-6 { margin: -1.5rem !important; } .lg\:-m-8 { margin: -2rem !important; } .lg\:-m-10 { margin: -2.5rem !important; } .lg\:-m-12 { margin: -3rem !important; } .lg\:-m-16 { margin: -4rem !important; } .lg\:-m-20 { margin: -5rem !important; } .lg\:-m-24 { margin: -6rem !important; } .lg\:-m-32 { margin: -8rem !important; } .lg\:-m-px { margin: -1px !important; } .lg\:-my-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .lg\:-mx-0 { margin-left: 0 !important; margin-right: 0 !important; } .lg\:-my-1 { margin-top: -0.25rem !important; margin-bottom: -0.25rem !important; } .lg\:-mx-1 { margin-left: -0.25rem !important; margin-right: -0.25rem !important; } .lg\:-my-2 { margin-top: -0.5rem !important; margin-bottom: -0.5rem !important; } .lg\:-mx-2 { margin-left: -0.5rem !important; margin-right: -0.5rem !important; } .lg\:-my-3 { margin-top: -0.75rem !important; margin-bottom: -0.75rem !important; } .lg\:-mx-3 { margin-left: -0.75rem !important; margin-right: -0.75rem !important; } .lg\:-my-4 { margin-top: -1rem !important; margin-bottom: -1rem !important; } .lg\:-mx-4 { margin-left: -1rem !important; margin-right: -1rem !important; } .lg\:-my-5 { margin-top: -1.25rem !important; margin-bottom: -1.25rem !important; } .lg\:-mx-5 { margin-left: -1.25rem !important; margin-right: -1.25rem !important; } .lg\:-my-6 { margin-top: -1.5rem !important; margin-bottom: -1.5rem !important; } .lg\:-mx-6 { margin-left: -1.5rem !important; margin-right: -1.5rem !important; } .lg\:-my-8 { margin-top: -2rem !important; margin-bottom: -2rem !important; } .lg\:-mx-8 { margin-left: -2rem !important; margin-right: -2rem !important; } .lg\:-my-10 { margin-top: -2.5rem !important; margin-bottom: -2.5rem !important; } .lg\:-mx-10 { margin-left: -2.5rem !important; margin-right: -2.5rem !important; } .lg\:-my-12 { margin-top: -3rem !important; margin-bottom: -3rem !important; } .lg\:-mx-12 { margin-left: -3rem !important; margin-right: -3rem !important; } .lg\:-my-16 { margin-top: -4rem !important; margin-bottom: -4rem !important; } .lg\:-mx-16 { margin-left: -4rem !important; margin-right: -4rem !important; } .lg\:-my-20 { margin-top: -5rem !important; margin-bottom: -5rem !important; } .lg\:-mx-20 { margin-left: -5rem !important; margin-right: -5rem !important; } .lg\:-my-24 { margin-top: -6rem !important; margin-bottom: -6rem !important; } .lg\:-mx-24 { margin-left: -6rem !important; margin-right: -6rem !important; } .lg\:-my-32 { margin-top: -8rem !important; margin-bottom: -8rem !important; } .lg\:-mx-32 { margin-left: -8rem !important; margin-right: -8rem !important; } .lg\:-my-px { margin-top: -1px !important; margin-bottom: -1px !important; } .lg\:-mx-px { margin-left: -1px !important; margin-right: -1px !important; } .lg\:-mt-0 { margin-top: 0 !important; } .lg\:-mr-0 { margin-right: 0 !important; } .lg\:-mb-0 { margin-bottom: 0 !important; } .lg\:-ml-0 { margin-left: 0 !important; } .lg\:-mt-1 { margin-top: -0.25rem !important; } .lg\:-mr-1 { margin-right: -0.25rem !important; } .lg\:-mb-1 { margin-bottom: -0.25rem !important; } .lg\:-ml-1 { margin-left: -0.25rem !important; } .lg\:-mt-2 { margin-top: -0.5rem !important; } .lg\:-mr-2 { margin-right: -0.5rem !important; } .lg\:-mb-2 { margin-bottom: -0.5rem !important; } .lg\:-ml-2 { margin-left: -0.5rem !important; } .lg\:-mt-3 { margin-top: -0.75rem !important; } .lg\:-mr-3 { margin-right: -0.75rem !important; } .lg\:-mb-3 { margin-bottom: -0.75rem !important; } .lg\:-ml-3 { margin-left: -0.75rem !important; } .lg\:-mt-4 { margin-top: -1rem !important; } .lg\:-mr-4 { margin-right: -1rem !important; } .lg\:-mb-4 { margin-bottom: -1rem !important; } .lg\:-ml-4 { margin-left: -1rem !important; } .lg\:-mt-5 { margin-top: -1.25rem !important; } .lg\:-mr-5 { margin-right: -1.25rem !important; } .lg\:-mb-5 { margin-bottom: -1.25rem !important; } .lg\:-ml-5 { margin-left: -1.25rem !important; } .lg\:-mt-6 { margin-top: -1.5rem !important; } .lg\:-mr-6 { margin-right: -1.5rem !important; } .lg\:-mb-6 { margin-bottom: -1.5rem !important; } .lg\:-ml-6 { margin-left: -1.5rem !important; } .lg\:-mt-8 { margin-top: -2rem !important; } .lg\:-mr-8 { margin-right: -2rem !important; } .lg\:-mb-8 { margin-bottom: -2rem !important; } .lg\:-ml-8 { margin-left: -2rem !important; } .lg\:-mt-10 { margin-top: -2.5rem !important; } .lg\:-mr-10 { margin-right: -2.5rem !important; } .lg\:-mb-10 { margin-bottom: -2.5rem !important; } .lg\:-ml-10 { margin-left: -2.5rem !important; } .lg\:-mt-12 { margin-top: -3rem !important; } .lg\:-mr-12 { margin-right: -3rem !important; } .lg\:-mb-12 { margin-bottom: -3rem !important; } .lg\:-ml-12 { margin-left: -3rem !important; } .lg\:-mt-16 { margin-top: -4rem !important; } .lg\:-mr-16 { margin-right: -4rem !important; } .lg\:-mb-16 { margin-bottom: -4rem !important; } .lg\:-ml-16 { margin-left: -4rem !important; } .lg\:-mt-20 { margin-top: -5rem !important; } .lg\:-mr-20 { margin-right: -5rem !important; } .lg\:-mb-20 { margin-bottom: -5rem !important; } .lg\:-ml-20 { margin-left: -5rem !important; } .lg\:-mt-24 { margin-top: -6rem !important; } .lg\:-mr-24 { margin-right: -6rem !important; } .lg\:-mb-24 { margin-bottom: -6rem !important; } .lg\:-ml-24 { margin-left: -6rem !important; } .lg\:-mt-32 { margin-top: -8rem !important; } .lg\:-mr-32 { margin-right: -8rem !important; } .lg\:-mb-32 { margin-bottom: -8rem !important; } .lg\:-ml-32 { margin-left: -8rem !important; } .lg\:-mt-px { margin-top: -1px !important; } .lg\:-mr-px { margin-right: -1px !important; } .lg\:-mb-px { margin-bottom: -1px !important; } .lg\:-ml-px { margin-left: -1px !important; } .lg\:p-0 { padding: 0 !important; } .lg\:p-1 { padding: .25rem !important; } .lg\:p-2 { padding: .5rem !important; } .lg\:p-3 { padding: .75rem !important; } .lg\:p-4 { padding: 1rem !important; } .lg\:p-5 { padding: 1.25rem !important; } .lg\:p-6 { padding: 1.5rem !important; } .lg\:p-8 { padding: 2rem !important; } .lg\:p-10 { padding: 2.5rem !important; } .lg\:p-12 { padding: 3rem !important; } .lg\:p-16 { padding: 4rem !important; } .lg\:p-20 { padding: 5rem !important; } .lg\:p-24 { padding: 6rem !important; } .lg\:p-32 { padding: 8rem !important; } .lg\:p-px { padding: 1px !important; } .lg\:py-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .lg\:px-0 { padding-left: 0 !important; padding-right: 0 !important; } .lg\:py-1 { padding-top: .25rem !important; padding-bottom: .25rem !important; } .lg\:px-1 { padding-left: .25rem !important; padding-right: .25rem !important; } .lg\:py-2 { padding-top: .5rem !important; padding-bottom: .5rem !important; } .lg\:px-2 { padding-left: .5rem !important; padding-right: .5rem !important; } .lg\:py-3 { padding-top: .75rem !important; padding-bottom: .75rem !important; } .lg\:px-3 { padding-left: .75rem !important; padding-right: .75rem !important; } .lg\:py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .lg\:px-4 { padding-left: 1rem !important; padding-right: 1rem !important; } .lg\:py-5 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; } .lg\:px-5 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; } .lg\:py-6 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .lg\:px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } .lg\:py-8 { padding-top: 2rem !important; padding-bottom: 2rem !important; } .lg\:px-8 { padding-left: 2rem !important; padding-right: 2rem !important; } .lg\:py-10 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; } .lg\:px-10 { padding-left: 2.5rem !important; padding-right: 2.5rem !important; } .lg\:py-12 { padding-top: 3rem !important; padding-bottom: 3rem !important; } .lg\:px-12 { padding-left: 3rem !important; padding-right: 3rem !important; } .lg\:py-16 { padding-top: 4rem !important; padding-bottom: 4rem !important; } .lg\:px-16 { padding-left: 4rem !important; padding-right: 4rem !important; } .lg\:py-20 { padding-top: 5rem !important; padding-bottom: 5rem !important; } .lg\:px-20 { padding-left: 5rem !important; padding-right: 5rem !important; } .lg\:py-24 { padding-top: 6rem !important; padding-bottom: 6rem !important; } .lg\:px-24 { padding-left: 6rem !important; padding-right: 6rem !important; } .lg\:py-32 { padding-top: 8rem !important; padding-bottom: 8rem !important; } .lg\:px-32 { padding-left: 8rem !important; padding-right: 8rem !important; } .lg\:py-px { padding-top: 1px !important; padding-bottom: 1px !important; } .lg\:px-px { padding-left: 1px !important; padding-right: 1px !important; } .lg\:pt-0 { padding-top: 0 !important; } .lg\:pr-0 { padding-right: 0 !important; } .lg\:pb-0 { padding-bottom: 0 !important; } .lg\:pl-0 { padding-left: 0 !important; } .lg\:pt-1 { padding-top: .25rem !important; } .lg\:pr-1 { padding-right: .25rem !important; } .lg\:pb-1 { padding-bottom: .25rem !important; } .lg\:pl-1 { padding-left: .25rem !important; } .lg\:pt-2 { padding-top: .5rem !important; } .lg\:pr-2 { padding-right: .5rem !important; } .lg\:pb-2 { padding-bottom: .5rem !important; } .lg\:pl-2 { padding-left: .5rem !important; } .lg\:pt-3 { padding-top: .75rem !important; } .lg\:pr-3 { padding-right: .75rem !important; } .lg\:pb-3 { padding-bottom: .75rem !important; } .lg\:pl-3 { padding-left: .75rem !important; } .lg\:pt-4 { padding-top: 1rem !important; } .lg\:pr-4 { padding-right: 1rem !important; } .lg\:pb-4 { padding-bottom: 1rem !important; } .lg\:pl-4 { padding-left: 1rem !important; } .lg\:pt-5 { padding-top: 1.25rem !important; } .lg\:pr-5 { padding-right: 1.25rem !important; } .lg\:pb-5 { padding-bottom: 1.25rem !important; } .lg\:pl-5 { padding-left: 1.25rem !important; } .lg\:pt-6 { padding-top: 1.5rem !important; } .lg\:pr-6 { padding-right: 1.5rem !important; } .lg\:pb-6 { padding-bottom: 1.5rem !important; } .lg\:pl-6 { padding-left: 1.5rem !important; } .lg\:pt-8 { padding-top: 2rem !important; } .lg\:pr-8 { padding-right: 2rem !important; } .lg\:pb-8 { padding-bottom: 2rem !important; } .lg\:pl-8 { padding-left: 2rem !important; } .lg\:pt-10 { padding-top: 2.5rem !important; } .lg\:pr-10 { padding-right: 2.5rem !important; } .lg\:pb-10 { padding-bottom: 2.5rem !important; } .lg\:pl-10 { padding-left: 2.5rem !important; } .lg\:pt-12 { padding-top: 3rem !important; } .lg\:pr-12 { padding-right: 3rem !important; } .lg\:pb-12 { padding-bottom: 3rem !important; } .lg\:pl-12 { padding-left: 3rem !important; } .lg\:pt-16 { padding-top: 4rem !important; } .lg\:pr-16 { padding-right: 4rem !important; } .lg\:pb-16 { padding-bottom: 4rem !important; } .lg\:pl-16 { padding-left: 4rem !important; } .lg\:pt-20 { padding-top: 5rem !important; } .lg\:pr-20 { padding-right: 5rem !important; } .lg\:pb-20 { padding-bottom: 5rem !important; } .lg\:pl-20 { padding-left: 5rem !important; } .lg\:pt-24 { padding-top: 6rem !important; } .lg\:pr-24 { padding-right: 6rem !important; } .lg\:pb-24 { padding-bottom: 6rem !important; } .lg\:pl-24 { padding-left: 6rem !important; } .lg\:pt-32 { padding-top: 8rem !important; } .lg\:pr-32 { padding-right: 8rem !important; } .lg\:pb-32 { padding-bottom: 8rem !important; } .lg\:pl-32 { padding-left: 8rem !important; } .lg\:pt-px { padding-top: 1px !important; } .lg\:pr-px { padding-right: 1px !important; } .lg\:pb-px { padding-bottom: 1px !important; } .lg\:pl-px { padding-left: 1px !important; } .lg\:w-1 { width: .25rem !important; } .lg\:w-2 { width: .5rem !important; } .lg\:w-3 { width: .75rem !important; } .lg\:w-4 { width: 1rem !important; } .lg\:w-5 { width: 1.25rem !important; } .lg\:w-6 { width: 1.5rem !important; } .lg\:w-8 { width: 2rem !important; } .lg\:w-10 { width: 2.5rem !important; } .lg\:w-12 { width: 3rem !important; } .lg\:w-16 { width: 4rem !important; } .lg\:w-24 { width: 6rem !important; } .lg\:w-32 { width: 8rem !important; } .lg\:w-48 { width: 12rem !important; } .lg\:w-64 { width: 16rem !important; } .lg\:w-auto { width: auto !important; } .lg\:w-px { width: 1px !important; } .lg\:w-1\/2 { width: 50% !important; } .lg\:w-1\/3 { width: 33.33333% !important; } .lg\:w-2\/3 { width: 66.66667% !important; } .lg\:w-1\/4 { width: 25% !important; } .lg\:w-3\/4 { width: 75% !important; } .lg\:w-1\/5 { width: 20% !important; } .lg\:w-2\/5 { width: 40% !important; } .lg\:w-3\/5 { width: 60% !important; } .lg\:w-4\/5 { width: 80% !important; } .lg\:w-1\/6 { width: 16.66667% !important; } .lg\:w-5\/6 { width: 83.33333% !important; } .lg\:w-full { width: 100% !important; } .lg\:w-screen { width: 100vw !important; } } @media (min-width: 1200px) { .xl\:block { display: block !important; } .xl\:inline-block { display: inline-block !important; } .xl\:inline { display: inline !important; } .xl\:table { display: table !important; } .xl\:table-row { display: table-row !important; } .xl\:table-cell { display: table-cell !important; } .xl\:hidden { display: none !important; } .xl\:flex { display: -ms-flexbox !important; display: flex !important; } .xl\:inline-flex { display: -ms-inline-flexbox !important; display: inline-flex !important; } .xl\:flex-row { -ms-flex-direction: row !important; flex-direction: row !important; } .xl\:flex-row-reverse { -ms-flex-direction: row-reverse !important; flex-direction: row-reverse !important; } .xl\:flex-col { -ms-flex-direction: column !important; flex-direction: column !important; } .xl\:flex-col-reverse { -ms-flex-direction: column-reverse !important; flex-direction: column-reverse !important; } .xl\:flex-wrap { -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } .xl\:flex-wrap-reverse { -ms-flex-wrap: wrap-reverse !important; flex-wrap: wrap-reverse !important; } .xl\:flex-no-wrap { -ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important; } .xl\:items-start { -ms-flex-align: start !important; align-items: flex-start !important; } .xl\:items-end { -ms-flex-align: end !important; align-items: flex-end !important; } .xl\:items-center { -ms-flex-align: center !important; align-items: center !important; } .xl\:items-baseline { -ms-flex-align: baseline !important; align-items: baseline !important; } .xl\:items-stretch { -ms-flex-align: stretch !important; align-items: stretch !important; } .xl\:self-auto { -ms-flex-item-align: auto !important; -ms-grid-row-align: auto !important; align-self: auto !important; } .xl\:self-start { -ms-flex-item-align: start !important; align-self: flex-start !important; } .xl\:self-end { -ms-flex-item-align: end !important; align-self: flex-end !important; } .xl\:self-center { -ms-flex-item-align: center !important; -ms-grid-row-align: center !important; align-self: center !important; } .xl\:self-stretch { -ms-flex-item-align: stretch !important; -ms-grid-row-align: stretch !important; align-self: stretch !important; } .xl\:justify-start { -ms-flex-pack: start !important; justify-content: flex-start !important; } .xl\:justify-end { -ms-flex-pack: end !important; justify-content: flex-end !important; } .xl\:justify-center { -ms-flex-pack: center !important; justify-content: center !important; } .xl\:justify-between { -ms-flex-pack: justify !important; justify-content: space-between !important; } .xl\:justify-around { -ms-flex-pack: distribute !important; justify-content: space-around !important; } .xl\:content-center { -ms-flex-line-pack: center !important; align-content: center !important; } .xl\:content-start { -ms-flex-line-pack: start !important; align-content: flex-start !important; } .xl\:content-end { -ms-flex-line-pack: end !important; align-content: flex-end !important; } .xl\:content-between { -ms-flex-line-pack: justify !important; align-content: space-between !important; } .xl\:content-around { -ms-flex-line-pack: distribute !important; align-content: space-around !important; } .xl\:flex-1 { -ms-flex: 1 !important; flex: 1 !important; } .xl\:flex-auto { -ms-flex: auto !important; flex: auto !important; } .xl\:flex-initial { -ms-flex: initial !important; flex: initial !important; } .xl\:flex-none { -ms-flex: none !important; flex: none !important; } .xl\:flex-grow { -ms-flex-positive: 1 !important; flex-grow: 1 !important; } .xl\:flex-shrink { -ms-flex-negative: 1 !important; flex-shrink: 1 !important; } .xl\:flex-no-grow { -ms-flex-positive: 0 !important; flex-grow: 0 !important; } .xl\:flex-no-shrink { -ms-flex-negative: 0 !important; flex-shrink: 0 !important; } .xl\:m-0 { margin: 0 !important; } .xl\:m-1 { margin: .25rem !important; } .xl\:m-2 { margin: .5rem !important; } .xl\:m-3 { margin: .75rem !important; } .xl\:m-4 { margin: 1rem !important; } .xl\:m-5 { margin: 1.25rem !important; } .xl\:m-6 { margin: 1.5rem !important; } .xl\:m-8 { margin: 2rem !important; } .xl\:m-10 { margin: 2.5rem !important; } .xl\:m-12 { margin: 3rem !important; } .xl\:m-16 { margin: 4rem !important; } .xl\:m-20 { margin: 5rem !important; } .xl\:m-24 { margin: 6rem !important; } .xl\:m-32 { margin: 8rem !important; } .xl\:m-auto { margin: auto !important; } .xl\:m-px { margin: 1px !important; } .xl\:my-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .xl\:mx-0 { margin-left: 0 !important; margin-right: 0 !important; } .xl\:my-1 { margin-top: .25rem !important; margin-bottom: .25rem !important; } .xl\:mx-1 { margin-left: .25rem !important; margin-right: .25rem !important; } .xl\:my-2 { margin-top: .5rem !important; margin-bottom: .5rem !important; } .xl\:mx-2 { margin-left: .5rem !important; margin-right: .5rem !important; } .xl\:my-3 { margin-top: .75rem !important; margin-bottom: .75rem !important; } .xl\:mx-3 { margin-left: .75rem !important; margin-right: .75rem !important; } .xl\:my-4 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .xl\:mx-4 { margin-left: 1rem !important; margin-right: 1rem !important; } .xl\:my-5 { margin-top: 1.25rem !important; margin-bottom: 1.25rem !important; } .xl\:mx-5 { margin-left: 1.25rem !important; margin-right: 1.25rem !important; } .xl\:my-6 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .xl\:mx-6 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; } .xl\:my-8 { margin-top: 2rem !important; margin-bottom: 2rem !important; } .xl\:mx-8 { margin-left: 2rem !important; margin-right: 2rem !important; } .xl\:my-10 { margin-top: 2.5rem !important; margin-bottom: 2.5rem !important; } .xl\:mx-10 { margin-left: 2.5rem !important; margin-right: 2.5rem !important; } .xl\:my-12 { margin-top: 3rem !important; margin-bottom: 3rem !important; } .xl\:mx-12 { margin-left: 3rem !important; margin-right: 3rem !important; } .xl\:my-16 { margin-top: 4rem !important; margin-bottom: 4rem !important; } .xl\:mx-16 { margin-left: 4rem !important; margin-right: 4rem !important; } .xl\:my-20 { margin-top: 5rem !important; margin-bottom: 5rem !important; } .xl\:mx-20 { margin-left: 5rem !important; margin-right: 5rem !important; } .xl\:my-24 { margin-top: 6rem !important; margin-bottom: 6rem !important; } .xl\:mx-24 { margin-left: 6rem !important; margin-right: 6rem !important; } .xl\:my-32 { margin-top: 8rem !important; margin-bottom: 8rem !important; } .xl\:mx-32 { margin-left: 8rem !important; margin-right: 8rem !important; } .xl\:my-auto { margin-top: auto !important; margin-bottom: auto !important; } .xl\:mx-auto { margin-left: auto !important; margin-right: auto !important; } .xl\:my-px { margin-top: 1px !important; margin-bottom: 1px !important; } .xl\:mx-px { margin-left: 1px !important; margin-right: 1px !important; } .xl\:mt-0 { margin-top: 0 !important; } .xl\:mr-0 { margin-right: 0 !important; } .xl\:mb-0 { margin-bottom: 0 !important; } .xl\:ml-0 { margin-left: 0 !important; } .xl\:mt-1 { margin-top: .25rem !important; } .xl\:mr-1 { margin-right: .25rem !important; } .xl\:mb-1 { margin-bottom: .25rem !important; } .xl\:ml-1 { margin-left: .25rem !important; } .xl\:mt-2 { margin-top: .5rem !important; } .xl\:mr-2 { margin-right: .5rem !important; } .xl\:mb-2 { margin-bottom: .5rem !important; } .xl\:ml-2 { margin-left: .5rem !important; } .xl\:mt-3 { margin-top: .75rem !important; } .xl\:mr-3 { margin-right: .75rem !important; } .xl\:mb-3 { margin-bottom: .75rem !important; } .xl\:ml-3 { margin-left: .75rem !important; } .xl\:mt-4 { margin-top: 1rem !important; } .xl\:mr-4 { margin-right: 1rem !important; } .xl\:mb-4 { margin-bottom: 1rem !important; } .xl\:ml-4 { margin-left: 1rem !important; } .xl\:mt-5 { margin-top: 1.25rem !important; } .xl\:mr-5 { margin-right: 1.25rem !important; } .xl\:mb-5 { margin-bottom: 1.25rem !important; } .xl\:ml-5 { margin-left: 1.25rem !important; } .xl\:mt-6 { margin-top: 1.5rem !important; } .xl\:mr-6 { margin-right: 1.5rem !important; } .xl\:mb-6 { margin-bottom: 1.5rem !important; } .xl\:ml-6 { margin-left: 1.5rem !important; } .xl\:mt-8 { margin-top: 2rem !important; } .xl\:mr-8 { margin-right: 2rem !important; } .xl\:mb-8 { margin-bottom: 2rem !important; } .xl\:ml-8 { margin-left: 2rem !important; } .xl\:mt-10 { margin-top: 2.5rem !important; } .xl\:mr-10 { margin-right: 2.5rem !important; } .xl\:mb-10 { margin-bottom: 2.5rem !important; } .xl\:ml-10 { margin-left: 2.5rem !important; } .xl\:mt-12 { margin-top: 3rem !important; } .xl\:mr-12 { margin-right: 3rem !important; } .xl\:mb-12 { margin-bottom: 3rem !important; } .xl\:ml-12 { margin-left: 3rem !important; } .xl\:mt-16 { margin-top: 4rem !important; } .xl\:mr-16 { margin-right: 4rem !important; } .xl\:mb-16 { margin-bottom: 4rem !important; } .xl\:ml-16 { margin-left: 4rem !important; } .xl\:mt-20 { margin-top: 5rem !important; } .xl\:mr-20 { margin-right: 5rem !important; } .xl\:mb-20 { margin-bottom: 5rem !important; } .xl\:ml-20 { margin-left: 5rem !important; } .xl\:mt-24 { margin-top: 6rem !important; } .xl\:mr-24 { margin-right: 6rem !important; } .xl\:mb-24 { margin-bottom: 6rem !important; } .xl\:ml-24 { margin-left: 6rem !important; } .xl\:mt-32 { margin-top: 8rem !important; } .xl\:mr-32 { margin-right: 8rem !important; } .xl\:mb-32 { margin-bottom: 8rem !important; } .xl\:ml-32 { margin-left: 8rem !important; } .xl\:mt-auto { margin-top: auto !important; } .xl\:mr-auto { margin-right: auto !important; } .xl\:mb-auto { margin-bottom: auto !important; } .xl\:ml-auto { margin-left: auto !important; } .xl\:mt-px { margin-top: 1px !important; } .xl\:mr-px { margin-right: 1px !important; } .xl\:mb-px { margin-bottom: 1px !important; } .xl\:ml-px { margin-left: 1px !important; } .xl\:-m-0 { margin: 0 !important; } .xl\:-m-1 { margin: -0.25rem !important; } .xl\:-m-2 { margin: -0.5rem !important; } .xl\:-m-3 { margin: -0.75rem !important; } .xl\:-m-4 { margin: -1rem !important; } .xl\:-m-5 { margin: -1.25rem !important; } .xl\:-m-6 { margin: -1.5rem !important; } .xl\:-m-8 { margin: -2rem !important; } .xl\:-m-10 { margin: -2.5rem !important; } .xl\:-m-12 { margin: -3rem !important; } .xl\:-m-16 { margin: -4rem !important; } .xl\:-m-20 { margin: -5rem !important; } .xl\:-m-24 { margin: -6rem !important; } .xl\:-m-32 { margin: -8rem !important; } .xl\:-m-px { margin: -1px !important; } .xl\:-my-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .xl\:-mx-0 { margin-left: 0 !important; margin-right: 0 !important; } .xl\:-my-1 { margin-top: -0.25rem !important; margin-bottom: -0.25rem !important; } .xl\:-mx-1 { margin-left: -0.25rem !important; margin-right: -0.25rem !important; } .xl\:-my-2 { margin-top: -0.5rem !important; margin-bottom: -0.5rem !important; } .xl\:-mx-2 { margin-left: -0.5rem !important; margin-right: -0.5rem !important; } .xl\:-my-3 { margin-top: -0.75rem !important; margin-bottom: -0.75rem !important; } .xl\:-mx-3 { margin-left: -0.75rem !important; margin-right: -0.75rem !important; } .xl\:-my-4 { margin-top: -1rem !important; margin-bottom: -1rem !important; } .xl\:-mx-4 { margin-left: -1rem !important; margin-right: -1rem !important; } .xl\:-my-5 { margin-top: -1.25rem !important; margin-bottom: -1.25rem !important; } .xl\:-mx-5 { margin-left: -1.25rem !important; margin-right: -1.25rem !important; } .xl\:-my-6 { margin-top: -1.5rem !important; margin-bottom: -1.5rem !important; } .xl\:-mx-6 { margin-left: -1.5rem !important; margin-right: -1.5rem !important; } .xl\:-my-8 { margin-top: -2rem !important; margin-bottom: -2rem !important; } .xl\:-mx-8 { margin-left: -2rem !important; margin-right: -2rem !important; } .xl\:-my-10 { margin-top: -2.5rem !important; margin-bottom: -2.5rem !important; } .xl\:-mx-10 { margin-left: -2.5rem !important; margin-right: -2.5rem !important; } .xl\:-my-12 { margin-top: -3rem !important; margin-bottom: -3rem !important; } .xl\:-mx-12 { margin-left: -3rem !important; margin-right: -3rem !important; } .xl\:-my-16 { margin-top: -4rem !important; margin-bottom: -4rem !important; } .xl\:-mx-16 { margin-left: -4rem !important; margin-right: -4rem !important; } .xl\:-my-20 { margin-top: -5rem !important; margin-bottom: -5rem !important; } .xl\:-mx-20 { margin-left: -5rem !important; margin-right: -5rem !important; } .xl\:-my-24 { margin-top: -6rem !important; margin-bottom: -6rem !important; } .xl\:-mx-24 { margin-left: -6rem !important; margin-right: -6rem !important; } .xl\:-my-32 { margin-top: -8rem !important; margin-bottom: -8rem !important; } .xl\:-mx-32 { margin-left: -8rem !important; margin-right: -8rem !important; } .xl\:-my-px { margin-top: -1px !important; margin-bottom: -1px !important; } .xl\:-mx-px { margin-left: -1px !important; margin-right: -1px !important; } .xl\:-mt-0 { margin-top: 0 !important; } .xl\:-mr-0 { margin-right: 0 !important; } .xl\:-mb-0 { margin-bottom: 0 !important; } .xl\:-ml-0 { margin-left: 0 !important; } .xl\:-mt-1 { margin-top: -0.25rem !important; } .xl\:-mr-1 { margin-right: -0.25rem !important; } .xl\:-mb-1 { margin-bottom: -0.25rem !important; } .xl\:-ml-1 { margin-left: -0.25rem !important; } .xl\:-mt-2 { margin-top: -0.5rem !important; } .xl\:-mr-2 { margin-right: -0.5rem !important; } .xl\:-mb-2 { margin-bottom: -0.5rem !important; } .xl\:-ml-2 { margin-left: -0.5rem !important; } .xl\:-mt-3 { margin-top: -0.75rem !important; } .xl\:-mr-3 { margin-right: -0.75rem !important; } .xl\:-mb-3 { margin-bottom: -0.75rem !important; } .xl\:-ml-3 { margin-left: -0.75rem !important; } .xl\:-mt-4 { margin-top: -1rem !important; } .xl\:-mr-4 { margin-right: -1rem !important; } .xl\:-mb-4 { margin-bottom: -1rem !important; } .xl\:-ml-4 { margin-left: -1rem !important; } .xl\:-mt-5 { margin-top: -1.25rem !important; } .xl\:-mr-5 { margin-right: -1.25rem !important; } .xl\:-mb-5 { margin-bottom: -1.25rem !important; } .xl\:-ml-5 { margin-left: -1.25rem !important; } .xl\:-mt-6 { margin-top: -1.5rem !important; } .xl\:-mr-6 { margin-right: -1.5rem !important; } .xl\:-mb-6 { margin-bottom: -1.5rem !important; } .xl\:-ml-6 { margin-left: -1.5rem !important; } .xl\:-mt-8 { margin-top: -2rem !important; } .xl\:-mr-8 { margin-right: -2rem !important; } .xl\:-mb-8 { margin-bottom: -2rem !important; } .xl\:-ml-8 { margin-left: -2rem !important; } .xl\:-mt-10 { margin-top: -2.5rem !important; } .xl\:-mr-10 { margin-right: -2.5rem !important; } .xl\:-mb-10 { margin-bottom: -2.5rem !important; } .xl\:-ml-10 { margin-left: -2.5rem !important; } .xl\:-mt-12 { margin-top: -3rem !important; } .xl\:-mr-12 { margin-right: -3rem !important; } .xl\:-mb-12 { margin-bottom: -3rem !important; } .xl\:-ml-12 { margin-left: -3rem !important; } .xl\:-mt-16 { margin-top: -4rem !important; } .xl\:-mr-16 { margin-right: -4rem !important; } .xl\:-mb-16 { margin-bottom: -4rem !important; } .xl\:-ml-16 { margin-left: -4rem !important; } .xl\:-mt-20 { margin-top: -5rem !important; } .xl\:-mr-20 { margin-right: -5rem !important; } .xl\:-mb-20 { margin-bottom: -5rem !important; } .xl\:-ml-20 { margin-left: -5rem !important; } .xl\:-mt-24 { margin-top: -6rem !important; } .xl\:-mr-24 { margin-right: -6rem !important; } .xl\:-mb-24 { margin-bottom: -6rem !important; } .xl\:-ml-24 { margin-left: -6rem !important; } .xl\:-mt-32 { margin-top: -8rem !important; } .xl\:-mr-32 { margin-right: -8rem !important; } .xl\:-mb-32 { margin-bottom: -8rem !important; } .xl\:-ml-32 { margin-left: -8rem !important; } .xl\:-mt-px { margin-top: -1px !important; } .xl\:-mr-px { margin-right: -1px !important; } .xl\:-mb-px { margin-bottom: -1px !important; } .xl\:-ml-px { margin-left: -1px !important; } .xl\:p-0 { padding: 0 !important; } .xl\:p-1 { padding: .25rem !important; } .xl\:p-2 { padding: .5rem !important; } .xl\:p-3 { padding: .75rem !important; } .xl\:p-4 { padding: 1rem !important; } .xl\:p-5 { padding: 1.25rem !important; } .xl\:p-6 { padding: 1.5rem !important; } .xl\:p-8 { padding: 2rem !important; } .xl\:p-10 { padding: 2.5rem !important; } .xl\:p-12 { padding: 3rem !important; } .xl\:p-16 { padding: 4rem !important; } .xl\:p-20 { padding: 5rem !important; } .xl\:p-24 { padding: 6rem !important; } .xl\:p-32 { padding: 8rem !important; } .xl\:p-px { padding: 1px !important; } .xl\:py-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .xl\:px-0 { padding-left: 0 !important; padding-right: 0 !important; } .xl\:py-1 { padding-top: .25rem !important; padding-bottom: .25rem !important; } .xl\:px-1 { padding-left: .25rem !important; padding-right: .25rem !important; } .xl\:py-2 { padding-top: .5rem !important; padding-bottom: .5rem !important; } .xl\:px-2 { padding-left: .5rem !important; padding-right: .5rem !important; } .xl\:py-3 { padding-top: .75rem !important; padding-bottom: .75rem !important; } .xl\:px-3 { padding-left: .75rem !important; padding-right: .75rem !important; } .xl\:py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .xl\:px-4 { padding-left: 1rem !important; padding-right: 1rem !important; } .xl\:py-5 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; } .xl\:px-5 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; } .xl\:py-6 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .xl\:px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } .xl\:py-8 { padding-top: 2rem !important; padding-bottom: 2rem !important; } .xl\:px-8 { padding-left: 2rem !important; padding-right: 2rem !important; } .xl\:py-10 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; } .xl\:px-10 { padding-left: 2.5rem !important; padding-right: 2.5rem !important; } .xl\:py-12 { padding-top: 3rem !important; padding-bottom: 3rem !important; } .xl\:px-12 { padding-left: 3rem !important; padding-right: 3rem !important; } .xl\:py-16 { padding-top: 4rem !important; padding-bottom: 4rem !important; } .xl\:px-16 { padding-left: 4rem !important; padding-right: 4rem !important; } .xl\:py-20 { padding-top: 5rem !important; padding-bottom: 5rem !important; } .xl\:px-20 { padding-left: 5rem !important; padding-right: 5rem !important; } .xl\:py-24 { padding-top: 6rem !important; padding-bottom: 6rem !important; } .xl\:px-24 { padding-left: 6rem !important; padding-right: 6rem !important; } .xl\:py-32 { padding-top: 8rem !important; padding-bottom: 8rem !important; } .xl\:px-32 { padding-left: 8rem !important; padding-right: 8rem !important; } .xl\:py-px { padding-top: 1px !important; padding-bottom: 1px !important; } .xl\:px-px { padding-left: 1px !important; padding-right: 1px !important; } .xl\:pt-0 { padding-top: 0 !important; } .xl\:pr-0 { padding-right: 0 !important; } .xl\:pb-0 { padding-bottom: 0 !important; } .xl\:pl-0 { padding-left: 0 !important; } .xl\:pt-1 { padding-top: .25rem !important; } .xl\:pr-1 { padding-right: .25rem !important; } .xl\:pb-1 { padding-bottom: .25rem !important; } .xl\:pl-1 { padding-left: .25rem !important; } .xl\:pt-2 { padding-top: .5rem !important; } .xl\:pr-2 { padding-right: .5rem !important; } .xl\:pb-2 { padding-bottom: .5rem !important; } .xl\:pl-2 { padding-left: .5rem !important; } .xl\:pt-3 { padding-top: .75rem !important; } .xl\:pr-3 { padding-right: .75rem !important; } .xl\:pb-3 { padding-bottom: .75rem !important; } .xl\:pl-3 { padding-left: .75rem !important; } .xl\:pt-4 { padding-top: 1rem !important; } .xl\:pr-4 { padding-right: 1rem !important; } .xl\:pb-4 { padding-bottom: 1rem !important; } .xl\:pl-4 { padding-left: 1rem !important; } .xl\:pt-5 { padding-top: 1.25rem !important; } .xl\:pr-5 { padding-right: 1.25rem !important; } .xl\:pb-5 { padding-bottom: 1.25rem !important; } .xl\:pl-5 { padding-left: 1.25rem !important; } .xl\:pt-6 { padding-top: 1.5rem !important; } .xl\:pr-6 { padding-right: 1.5rem !important; } .xl\:pb-6 { padding-bottom: 1.5rem !important; } .xl\:pl-6 { padding-left: 1.5rem !important; } .xl\:pt-8 { padding-top: 2rem !important; } .xl\:pr-8 { padding-right: 2rem !important; } .xl\:pb-8 { padding-bottom: 2rem !important; } .xl\:pl-8 { padding-left: 2rem !important; } .xl\:pt-10 { padding-top: 2.5rem !important; } .xl\:pr-10 { padding-right: 2.5rem !important; } .xl\:pb-10 { padding-bottom: 2.5rem !important; } .xl\:pl-10 { padding-left: 2.5rem !important; } .xl\:pt-12 { padding-top: 3rem !important; } .xl\:pr-12 { padding-right: 3rem !important; } .xl\:pb-12 { padding-bottom: 3rem !important; } .xl\:pl-12 { padding-left: 3rem !important; } .xl\:pt-16 { padding-top: 4rem !important; } .xl\:pr-16 { padding-right: 4rem !important; } .xl\:pb-16 { padding-bottom: 4rem !important; } .xl\:pl-16 { padding-left: 4rem !important; } .xl\:pt-20 { padding-top: 5rem !important; } .xl\:pr-20 { padding-right: 5rem !important; } .xl\:pb-20 { padding-bottom: 5rem !important; } .xl\:pl-20 { padding-left: 5rem !important; } .xl\:pt-24 { padding-top: 6rem !important; } .xl\:pr-24 { padding-right: 6rem !important; } .xl\:pb-24 { padding-bottom: 6rem !important; } .xl\:pl-24 { padding-left: 6rem !important; } .xl\:pt-32 { padding-top: 8rem !important; } .xl\:pr-32 { padding-right: 8rem !important; } .xl\:pb-32 { padding-bottom: 8rem !important; } .xl\:pl-32 { padding-left: 8rem !important; } .xl\:pt-px { padding-top: 1px !important; } .xl\:pr-px { padding-right: 1px !important; } .xl\:pb-px { padding-bottom: 1px !important; } .xl\:pl-px { padding-left: 1px !important; } .xl\:w-1 { width: .25rem !important; } .xl\:w-2 { width: .5rem !important; } .xl\:w-3 { width: .75rem !important; } .xl\:w-4 { width: 1rem !important; } .xl\:w-5 { width: 1.25rem !important; } .xl\:w-6 { width: 1.5rem !important; } .xl\:w-8 { width: 2rem !important; } .xl\:w-10 { width: 2.5rem !important; } .xl\:w-12 { width: 3rem !important; } .xl\:w-16 { width: 4rem !important; } .xl\:w-24 { width: 6rem !important; } .xl\:w-32 { width: 8rem !important; } .xl\:w-48 { width: 12rem !important; } .xl\:w-64 { width: 16rem !important; } .xl\:w-auto { width: auto !important; } .xl\:w-px { width: 1px !important; } .xl\:w-1\/2 { width: 50% !important; } .xl\:w-1\/3 { width: 33.33333% !important; } .xl\:w-2\/3 { width: 66.66667% !important; } .xl\:w-1\/4 { width: 25% !important; } .xl\:w-3\/4 { width: 75% !important; } .xl\:w-1\/5 { width: 20% !important; } .xl\:w-2\/5 { width: 40% !important; } .xl\:w-3\/5 { width: 60% !important; } .xl\:w-4\/5 { width: 80% !important; } .xl\:w-1\/6 { width: 16.66667% !important; } .xl\:w-5\/6 { width: 83.33333% !important; } .xl\:w-full { width: 100% !important; } .xl\:w-screen { width: 100vw !important; } } @media (min-width: 1281px) { .sqmile-common-container { margin-left: 229px; margin-top: 49px; margin-right: 10px; padding-bottom: 5px; } .sqmile-common-article { width: 860px; } .sqmile-product, .product { /* four columns now */ width: 25%; } .sqmile-product .outer-wrap, .product .outer-wrap { margin-right: 5px; margin-left: 5px; margin-bottom: 10px; min-width: 250px; } .sqmile-product .sqmile-product-name, .product .sqmile-product-name { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 28px; color: #231f20; font-style: normal; text-transform: uppercase; letter-spacing: 0px; } .sqmile-product .sqmile-product-description, .product .sqmile-product-description { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; color: #99080c; font-style: normal; text-transform: uppercase; letter-spacing: 2px; } .sqmile-product .sqmile-product-price, .product .sqmile-product-price { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; color: #231f20; font-style: normal; text-transform: uppercase; letter-spacing: 0px; } .sqmile-product.featured { width: 50%; } .sqmile-product.topseller { width: 50%; } .sqmile-single-product { width: 860px; } .sqmile-single-product .sqmile-single-product-header { max-height: 395px; height: 395px; } .sqmile-single-product.merchandise .sqmile-single-product-header, .sqmile-single-product.equipment .sqmile-single-product-header { max-height: 450px; height: 450px; } #sqmile-module-navigation { width: 860px; } .sqmile-subscription-group { width: 860px; } .sqmile-module-cart { width: 860px; } .sqmile-common-page { width: 860px; } .sqmile-module-page-about { width: 860px; } header { width: 224px; } #sqmile-top-bar { left: 234px; } #sqmile-footer .sqmile-footer-inner-column { margin-left: 229px; position: relative; left: -3px; } #sqmile-cookie-notice .cookie-notie-container { max-width: 1423px; width: 100%; } html.lt-ie8 .sqmile-product.featured, html.ie8 .sqmile-product.featured { /* four columns now */ width: 25%; } html.lt-ie8 .sqmile-product.featured .outer-wrap, html.ie8 .sqmile-product.featured .outer-wrap { margin-right: 5px; margin-left: 5px; margin-bottom: 10px; min-width: 250px; } html.lt-ie8 .sqmile-product.featured .sqmile-product-name, html.ie8 .sqmile-product.featured .sqmile-product-name { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 28px; color: #231f20; font-style: normal; text-transform: uppercase; letter-spacing: 0px; } html.lt-ie8 .sqmile-product.featured .sqmile-product-description, html.ie8 .sqmile-product.featured .sqmile-product-description { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; color: #99080c; font-style: normal; text-transform: uppercase; letter-spacing: 2px; } html.lt-ie8 .sqmile-product.featured .sqmile-product-price, html.ie8 .sqmile-product.featured .sqmile-product-price { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; color: #231f20; font-style: normal; text-transform: uppercase; letter-spacing: 0px; } } @media (min-width: 1600px) { .sqmile-product, .product { /* five columns */ width: 20%; } .sqmile-product .sqmile-product-name, .product .sqmile-product-name { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 30px; color: #231f20; font-style: normal; text-transform: uppercase; letter-spacing: 0px; padding-top: 19px; padding-bottom: 15px; margin-bottom: 15px; } .sqmile-product .sqmile-product-description, .product .sqmile-product-description { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; color: #99080c; font-style: normal; text-transform: uppercase; letter-spacing: 2px; padding-bottom: 15px; } .sqmile-product .sqmile-product-price, .product .sqmile-product-price { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; color: #231f20; font-style: normal; text-transform: uppercase; letter-spacing: 0px; } .sqmile-product.featured { width: 40%; } .sqmile-product.topseller { width: 40%; } } @media (min-width: 1920px) { .sqmile-common-container { /* we need to go slightly over max here to account for margin on our products */ max-width: 1659px; margin-left: 266px; margin-right: 12px; padding-bottom: 6px; } .sqmile-product.filter .sqmile-product-description { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; color: #007442; font-style: normal; text-transform: uppercase; letter-spacing: 2px; padding-bottom: 15px; } header { width: 260px; } #sqmile-top-bar { max-width: 1648px; left: 272px; } #sqmile-footer { max-width: 1920px; } #sqmile-footer .sqmile-footer-inner-column { margin-left: 266px; left: 0; } html.lt-ie8 .sqmile-product.featured, html.ie8 .sqmile-product.featured { /* four columns */ width: 25%; } html.lt-ie8 .sqmile-product.featured .sqmile-product-name, html.ie8 .sqmile-product.featured .sqmile-product-name { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 30px; color: #231f20; font-style: normal; text-transform: uppercase; letter-spacing: 0px; padding-top: 19px; padding-bottom: 15px; margin-bottom: 15px; } html.lt-ie8 .sqmile-product.featured .sqmile-product-description, html.ie8 .sqmile-product.featured .sqmile-product-description { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; color: #99080c; font-style: normal; text-transform: uppercase; letter-spacing: 2px; padding-bottom: 15px; } html.lt-ie8 .sqmile-product.featured .sqmile-product-price, html.ie8 .sqmile-product.featured .sqmile-product-price { font-family: 'TradeGothicLTPro-BdCn20', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; color: #231f20; font-style: normal; text-transform: uppercase; letter-spacing: 0px; } } @media screen and (max-width: 768px) { .sqmile-subscription-group { max-width: 100%; width: 100%; } .subscription_pickers .options_row h2, .section_choose h2, #results h2 { font-size: 14px; } .subscription_pickers .options_row.open h2, .section_choose.open h2, #results.open h2 { font-size: 20px; line-height: 1.2; } .subscription_pickers .options_row .row_outer > ul, .section_choose .row_outer > ul, #results .row_outer > ul { display: block; } .subscription_pickers .options_row .row_outer > ul .option-item, .section_choose .row_outer > ul .option-item, #results .row_outer > ul .option-item { max-width: 100%; } .subscription_pickers .options_row .row_outer > ul .option-item label, .section_choose .row_outer > ul .option-item label, #results .row_outer > ul .option-item label, .subscription_pickers .options_row .row_outer > ul .option-item .inner, .section_choose .row_outer > ul .option-item .inner, #results .row_outer > ul .option-item .inner { padding-top: 25px; padding-bottom: 80px; } .subscription_pickers .options_row .row_outer > ul .option-item h3, .section_choose .row_outer > ul .option-item h3, #results .row_outer > ul .option-item h3 { padding-top: 16px; padding-bottom: 14px; } .subscription_pickers .options_row .row_outer > ul .option-item .circle, .section_choose .row_outer > ul .option-item .circle, #results .row_outer > ul .option-item .circle, .subscription_pickers .options_row .row_outer > ul .option-item .section_choose_button, .section_choose .row_outer > ul .option-item .section_choose_button, #results .row_outer > ul .option-item .section_choose_button { bottom: 25px; } #results .inner .results-message { padding-left: 20px; padding-right: 20px; } } @media screen and (max-width: 651px) { #sqmile-common-main #sqmile-slide-wrap .ba-price, #sqmile-common-main #sqmile-slide-wrap .ba-info-wrapper { text-align: left; } #sqmile-common-main #sqmile-slide-wrap .bundle-total { margin: 20px 0 40px; width: auto !important; } #sqmile-common-main #sqmile-slide-wrap .ba-product-bundle .bundle-plus { margin-left: auto !important; margin-right: auto !important; border: none; display: block; margin: 20px auto !important; width: auto !important; } #sqmile-common-main #sqmile-slide-wrap .ba-product-bundle .bundle-plus img { position: relative !important; margin: 0 auto !important; } #sqmile-common-main #sqmile-slide-wrap .ba-bundle-wrapper .booster-variants-container select.ba-variants { margin-left: 0; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes fadeInLeftBig { 0% { opacity: 0; transform: translateX(-2000px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes fadeOutUp { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-20px); } } @keyframes fadeOutDown { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(20px); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 1; transform: translateX(-1400px); } } @keyframes fadeInLeftBig { 0% { opacity: 0; transform: translateX(-1400px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes fadeInRightBig { 0% { opacity: 1; transform: translateX(2000px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes fadeOutRightBig { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 1; transform: translateX(2000px); } } @keyframes moveToLeft { to { transform: translateX(-100%); } } @keyframes moveFromRight { from { transform: translateX(100%); } } @keyframes scaleDown { to { opacity: 0; transform: scale(.9); } } @keyframes scaleUp { from { opacity: 0; transform: scale(.9); } } @keyframes scaleDownUp { to { opacity: 0; transform: scale(1.1); } } @keyframes sqmScaleDownIn { from { opacity: 0; -webkit-transform: scale(1.2); } to { opacity: .5; -webkit-transform: scale(1); } } @keyframes sqmCustomFadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes sqmCustomFadeIn { 0% { opacity: 0; transform: translateY(100px); } 60% { opacity: 0; } 100% { opacity: 1; transform: translateY(0); } } .gwbutton { display: block !important; }