@charset "UTF-8"; /*============================================================================ - The output CSS is compressed and comments are removed - You cannot use native CSS/Sass @imports in this file without a build script ==============================================================================*/ /*================ SASS HELPERS ================*/ /*============================================================================ Convert pixels to ems eg. for a relational value of 12px write em(12) when the parent is 16px if the parent is another value say 24px write em(12, 24) Based on https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/functions/_px-to-em.scss ==============================================================================*/ /*============================================================================ Strips the unit from a number. @param {Number (With Unit)} $value @example scss - Usage $dimension: strip-units(10em); @example css - CSS Output $dimension: 10; @return {Number (Unitless)} based on https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/functions/_strip-units.scss ==============================================================================*/ /*================ #Mixins ================*/ /*============================================================================ Prefix mixin for generating vendor prefixes. Based on https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_prefixer.scss Usage: // Input: .element { @include prefix(transform, scale(1), ms webkit spec); } // Output: .element { -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } ==============================================================================*/ /*================ Media Query Mixin ================*/ /*================ Responsive Show/Hide Helper ================*/ /*================ Responsive Text Alignment Helper ================*/ /*============================================================================ Flexbox prefix mixins from Bourbon https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_flex-box.scss ==============================================================================*/ /*================ VARIABLES ================*/ /*============================================================================ Grid Breakpoints and Class Names - Do not change the variable names ==============================================================================*/ /*============================================================================ Generate breakpoint-specific column widths and push classes - Default column widths: $grid-breakpoint-has-widths: ($small, $medium-up); - Default is no push classes ==============================================================================*/ /*================ Color Variables ================*/ /*================ Sizing Variables ================*/ /*================ Z-Index ================*/ /*================ SVG ================*/ /*================ Drawers ================*/ /*================ Hero ================*/ /*================ Hero Slider ================*/ /*================ Typography ================*/ /*================ Products Title and Price ================*/ /*================ Gift Cards ================*/ /*================ Z-index ================*/ /*================ VENDOR ================*/ /*============================================================================ Slick Slider 1.6.0 - If upgrading Slick's styles, use the following variables/functions instead of the slick defaults (from slick-theme.scss) - This file includes default slick.scss styles (at Slick Slider SCSS) and slick-theme.scss (at Slick Slider Theme). Upgrade each area individually. - Remove `outline: none` from `.slick-dots li button` ==============================================================================*/ /*================ Slick Slider SCSS ================*/ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; overflow: hidden; display: block; margin: 0 auto; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; left: 0; top: 0; display: block; } .slick-track:before, .slick-track:after { content: ""; display: table; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { float: left; height: 100%; min-height: 1px; display: none; } [dir="rtl"] .slick-slide { float: right; } .slick-slide img { display: block; margin: 0 auto; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: inline-block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } /*================ Slick Slider Theme ================*/ .slick-loading .slick-list { background: #fff url(//cdn.cartx.com/s/files/1/0296/4842/0923/t/4/assets/ajax-loader.gif?73) center center no-repeat; } /* Icons */ /* Arrows */ .slick-prev, .slick-next { position: absolute; display: block; height: 20px; width: 20px; line-height: 0px; font-size: 0px; cursor: pointer; background: transparent; color: transparent; top: 50%; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); padding: 0; border: none; } .slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { background: transparent; color: transparent; } .slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; } .slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: 0.25; } .slick-prev:before, .slick-next:before { font-family: "slick-icons, sans-serif"; font-size: 20px; line-height: 1; color: #000; opacity: 0.75; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-prev { left: -25px; } [dir="rtl"] .slick-prev { left: auto; right: -25px; } .slick-prev:before { content: "←"; } [dir="rtl"] .slick-prev:before { content: "→"; } .slick-next { right: -25px; } [dir="rtl"] .slick-next { left: -25px; right: auto; } .slick-next:before { content: "→"; } [dir="rtl"] .slick-next:before { content: "←"; } /* Dots */ .slick-dotted.slick-slider { margin-bottom: 30px; } .slick-dots { position: absolute; bottom: -25px; list-style: none; display: block; text-align: center; padding: 0; margin: 0; width: 100%; } .slick-dots li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0 5px; padding: 0; cursor: pointer; } .slick-dots li button { border: 0; background: transparent; display: block; height: 20px; width: 20px; line-height: 0px; font-size: 0px; color: transparent; padding: 5px; cursor: pointer; } .slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; } .slick-dots li button:before { position: absolute; top: 0; left: 0; content: "•"; width: 20px; height: 20px; font-family: "slick-icons, sans-serif"; font-size: 6px; line-height: 20px; text-align: center; color: #fff; opacity: 0.25; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-dots li.slick-active button:before { color: #fff; opacity: 0.75; } /*================ GLOBAL ================*/ /*============================================================================ #Normalize Based on normalize.css v3.0.2 | MIT License | git.io/normalize ==============================================================================*/ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } body, input, textarea, button, select { -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; } a { background-color: transparent; } b, strong { font-weight: 700; } em { font-style: italic; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { max-width: 100%; border: 0; } button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; } button[disabled], html input[disabled] { cursor: default; } button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } input[type="search"], input[type="number"], input[type="email"], input[type="password"] { -webkit-appearance: none; -moz-appearance: none; } table { width: 100%; border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } textarea { overflow: auto; -webkit-appearance: none; -moz-appearance: none; } [tabindex='-1']:focus { outline: none; } /*============================================================================ Fast Tap enables no-delay taps (FastClick-esque) on supporting browsers ==============================================================================*/ a, button, [role="button"], input, label, select, textarea { touch-action: manipulation; } /*============================================================================ #Grid ==============================================================================*/ /*============================================================================ Grid Setup 1. Allow the grid system to be used on lists. 2. Remove any margins and paddings that might affect the grid system. 3. Apply a negative `margin-left` to negate the columns' gutters. ==============================================================================*/ .grid { *zoom: 1; list-style: none; margin: 0; padding: 0; margin-left: -30px; } .grid::after { content: ''; display: table; clear: both; } @media only screen and (max-width: 749px) { .grid { margin-left: -22px; } } .grid__item { float: left; padding-left: 30px; width: 100%; } @media only screen and (max-width: 749px) { .grid__item { padding-left: 22px; } } .grid__item[class*="--push"] { position: relative; } /*============================================================================ Reversed grids allow you to structure your source in the opposite order to how your rendered layout will appear. ==============================================================================*/ .grid--rev { direction: rtl; text-align: left; } .grid--rev > .grid__item { direction: ltr; text-align: left; float: right; } /*============================================================================ Grid Columns - Create width classes, prepended by the breakpoint name. ==============================================================================*/ /*================ Grid push classes ================*/ /*================ Clearfix helper on uniform grids ================*/ /*================ Build Base Grid Classes ================*/ /* Whole */ .one-whole { width: 100%; } /* Halves */ .one-half { width: 50%; } /* Thirds */ .one-third { width: 33.33333%; } .two-thirds { width: 66.66667%; } /* Quarters */ .one-quarter { width: 25%; } .two-quarters { width: 50%; } .three-quarters { width: 75%; } /* Fifths */ .one-fifth { width: 20%; } .two-fifths { width: 40%; } .three-fifths { width: 60%; } .four-fifths { width: 80%; } /* Sixths */ .one-sixth { width: 16.66667%; } .two-sixths { width: 33.33333%; } .three-sixths { width: 50%; } .four-sixths { width: 66.66667%; } .five-sixths { width: 83.33333%; } /* Eighths */ .one-eighth { width: 12.5%; } .two-eighths { width: 25%; } .three-eighths { width: 37.5%; } .four-eighths { width: 50%; } .five-eighths { width: 62.5%; } .six-eighths { width: 75%; } .seven-eighths { width: 87.5%; } /* Tenths */ .one-tenth { width: 10%; } .two-tenths { width: 20%; } .three-tenths { width: 30%; } .four-tenths { width: 40%; } .five-tenths { width: 50%; } .six-tenths { width: 60%; } .seven-tenths { width: 70%; } .eight-tenths { width: 80%; } .nine-tenths { width: 90%; } /* Twelfths */ .one-twelfth { width: 8.33333%; } .two-twelfths { width: 16.66667%; } .three-twelfths { width: 25%; } .four-twelfths { width: 33.33333%; } .five-twelfths { width: 41.66667%; } .six-twelfths { width: 50%; } .seven-twelfths { width: 58.33333%; } .eight-twelfths { width: 66.66667%; } .nine-twelfths { width: 75%; } .ten-twelfths { width: 83.33333%; } .eleven-twelfths { width: 91.66667%; } .show { display: block !important; } .hide { display: none !important; } .text-left { text-align: left !important; } .text-right { text-align: right !important; } .text-center { text-align: center !important; } /*================ Build Responsive Grid Classes ================*/ @media only screen and (max-width: 749px) { /* Whole */ .small--one-whole { width: 100%; } /* Halves */ .small--one-half { width: 50%; } /* Thirds */ .small--one-third { width: 33.33333%; } .small--two-thirds { width: 66.66667%; } /* Quarters */ .small--one-quarter { width: 25%; } .small--two-quarters { width: 50%; } .small--three-quarters { width: 75%; } /* Fifths */ .small--one-fifth { width: 20%; } .small--two-fifths { width: 40%; } .small--three-fifths { width: 60%; } .small--four-fifths { width: 80%; } /* Sixths */ .small--one-sixth { width: 16.66667%; } .small--two-sixths { width: 33.33333%; } .small--three-sixths { width: 50%; } .small--four-sixths { width: 66.66667%; } .small--five-sixths { width: 83.33333%; } /* Eighths */ .small--one-eighth { width: 12.5%; } .small--two-eighths { width: 25%; } .small--three-eighths { width: 37.5%; } .small--four-eighths { width: 50%; } .small--five-eighths { width: 62.5%; } .small--six-eighths { width: 75%; } .small--seven-eighths { width: 87.5%; } /* Tenths */ .small--one-tenth { width: 10%; } .small--two-tenths { width: 20%; } .small--three-tenths { width: 30%; } .small--four-tenths { width: 40%; } .small--five-tenths { width: 50%; } .small--six-tenths { width: 60%; } .small--seven-tenths { width: 70%; } .small--eight-tenths { width: 80%; } .small--nine-tenths { width: 90%; } /* Twelfths */ .small--one-twelfth { width: 8.33333%; } .small--two-twelfths { width: 16.66667%; } .small--three-twelfths { width: 25%; } .small--four-twelfths { width: 33.33333%; } .small--five-twelfths { width: 41.66667%; } .small--six-twelfths { width: 50%; } .small--seven-twelfths { width: 58.33333%; } .small--eight-twelfths { width: 66.66667%; } .small--nine-twelfths { width: 75%; } .small--ten-twelfths { width: 83.33333%; } .small--eleven-twelfths { width: 91.66667%; } .grid--uniform .small--one-half:nth-child(2n+1), .grid--uniform .small--one-third:nth-child(3n+1), .grid--uniform .small--one-quarter:nth-child(4n+1), .grid--uniform .small--one-fifth:nth-child(5n+1), .grid--uniform .small--one-sixth:nth-child(6n+1), .grid--uniform .small--two-sixths:nth-child(3n+1), .grid--uniform .small--three-sixths:nth-child(2n+1), .grid--uniform .small--one-eighth:nth-child(8n+1), .grid--uniform .small--two-eighths:nth-child(4n+1), .grid--uniform .small--four-eighths:nth-child(2n+1), .grid--uniform .small--five-tenths:nth-child(2n+1), .grid--uniform .small--one-twelfth:nth-child(12n+1), .grid--uniform .small--two-twelfths:nth-child(6n+1), .grid--uniform .small--three-twelfths:nth-child(4n+1), .grid--uniform .small--four-twelfths:nth-child(3n+1), .grid--uniform .small--six-twelfths:nth-child(2n+1) { clear: both; } .small--show { display: block !important; } .small--hide { display: none !important; } .small--text-left { text-align: left !important; } .small--text-right { text-align: right !important; } .small--text-center { text-align: center !important; } } @media only screen and (min-width: 750px) { /* Whole */ .medium-up--one-whole { width: 100%; } /* Halves */ .medium-up--one-half { width: 50%; } /* Thirds */ .medium-up--one-third { width: 33.33333%; } .medium-up--two-thirds { width: 66.66667%; } /* Quarters */ .medium-up--one-quarter { width: 25%; } .medium-up--two-quarters { width: 50%; } .medium-up--three-quarters { width: 75%; } /* Fifths */ .medium-up--one-fifth { width: 20%; } .medium-up--two-fifths { width: 40%; } .medium-up--three-fifths { width: 60%; } .medium-up--four-fifths { width: 80%; } /* Sixths */ .medium-up--one-sixth { width: 16.66667%; } .medium-up--two-sixths { width: 33.33333%; } .medium-up--three-sixths { width: 50%; } .medium-up--four-sixths { width: 66.66667%; } .medium-up--five-sixths { width: 83.33333%; } /* Eighths */ .medium-up--one-eighth { width: 12.5%; } .medium-up--two-eighths { width: 25%; } .medium-up--three-eighths { width: 37.5%; } .medium-up--four-eighths { width: 50%; } .medium-up--five-eighths { width: 62.5%; } .medium-up--six-eighths { width: 75%; } .medium-up--seven-eighths { width: 87.5%; } /* Tenths */ .medium-up--one-tenth { width: 10%; } .medium-up--two-tenths { width: 20%; } .medium-up--three-tenths { width: 30%; } .medium-up--four-tenths { width: 40%; } .medium-up--five-tenths { width: 50%; } .medium-up--six-tenths { width: 60%; } .medium-up--seven-tenths { width: 70%; } .medium-up--eight-tenths { width: 80%; } .medium-up--nine-tenths { width: 90%; } /* Twelfths */ .medium-up--one-twelfth { width: 8.33333%; } .medium-up--two-twelfths { width: 16.66667%; } .medium-up--three-twelfths { width: 25%; } .medium-up--four-twelfths { width: 33.33333%; } .medium-up--five-twelfths { width: 41.66667%; } .medium-up--six-twelfths { width: 50%; } .medium-up--seven-twelfths { width: 58.33333%; } .medium-up--eight-twelfths { width: 66.66667%; } .medium-up--nine-twelfths { width: 75%; } .medium-up--ten-twelfths { width: 83.33333%; } .medium-up--eleven-twelfths { width: 91.66667%; } .grid--uniform .medium-up--one-half:nth-child(2n+1), .grid--uniform .medium-up--one-third:nth-child(3n+1), .grid--uniform .medium-up--one-quarter:nth-child(4n+1), .grid--uniform .medium-up--one-fifth:nth-child(5n+1), .grid--uniform .medium-up--one-sixth:nth-child(6n+1), .grid--uniform .medium-up--two-sixths:nth-child(3n+1), .grid--uniform .medium-up--three-sixths:nth-child(2n+1), .grid--uniform .medium-up--one-eighth:nth-child(8n+1), .grid--uniform .medium-up--two-eighths:nth-child(4n+1), .grid--uniform .medium-up--four-eighths:nth-child(2n+1), .grid--uniform .medium-up--five-tenths:nth-child(2n+1), .grid--uniform .medium-up--one-twelfth:nth-child(12n+1), .grid--uniform .medium-up--two-twelfths:nth-child(6n+1), .grid--uniform .medium-up--three-twelfths:nth-child(4n+1), .grid--uniform .medium-up--four-twelfths:nth-child(3n+1), .grid--uniform .medium-up--six-twelfths:nth-child(2n+1) { clear: both; } .medium-up--show { display: block !important; } .medium-up--hide { display: none !important; } .medium-up--text-left { text-align: left !important; } .medium-up--text-right { text-align: right !important; } .medium-up--text-center { text-align: center !important; } } @media only screen and (min-width: 750px) and (max-width: 989px) { /* Whole */ .medium--one-whole { width: 100%; } /* Halves */ .medium--one-half { width: 50%; } /* Thirds */ .medium--one-third { width: 33.33333%; } .medium--two-thirds { width: 66.66667%; } /* Quarters */ .medium--one-quarter { width: 25%; } .medium--two-quarters { width: 50%; } .medium--three-quarters { width: 75%; } /* Fifths */ .medium--one-fifth { width: 20%; } .medium--two-fifths { width: 40%; } .medium--three-fifths { width: 60%; } .medium--four-fifths { width: 80%; } /* Sixths */ .medium--one-sixth { width: 16.66667%; } .medium--two-sixths { width: 33.33333%; } .medium--three-sixths { width: 50%; } .medium--four-sixths { width: 66.66667%; } .medium--five-sixths { width: 83.33333%; } /* Eighths */ .medium--one-eighth { width: 12.5%; } .medium--two-eighths { width: 25%; } .medium--three-eighths { width: 37.5%; } .medium--four-eighths { width: 50%; } .medium--five-eighths { width: 62.5%; } .medium--six-eighths { width: 75%; } .medium--seven-eighths { width: 87.5%; } /* Tenths */ .medium--one-tenth { width: 10%; } .medium--two-tenths { width: 20%; } .medium--three-tenths { width: 30%; } .medium--four-tenths { width: 40%; } .medium--five-tenths { width: 50%; } .medium--six-tenths { width: 60%; } .medium--seven-tenths { width: 70%; } .medium--eight-tenths { width: 80%; } .medium--nine-tenths { width: 90%; } /* Twelfths */ .medium--one-twelfth { width: 8.33333%; } .medium--two-twelfths { width: 16.66667%; } .medium--three-twelfths { width: 25%; } .medium--four-twelfths { width: 33.33333%; } .medium--five-twelfths { width: 41.66667%; } .medium--six-twelfths { width: 50%; } .medium--seven-twelfths { width: 58.33333%; } .medium--eight-twelfths { width: 66.66667%; } .medium--nine-twelfths { width: 75%; } .medium--ten-twelfths { width: 83.33333%; } .medium--eleven-twelfths { width: 91.66667%; } .grid--uniform .medium--one-half:nth-child(2n+1), .grid--uniform .medium--one-third:nth-child(3n+1), .grid--uniform .medium--one-quarter:nth-child(4n+1), .grid--uniform .medium--one-fifth:nth-child(5n+1), .grid--uniform .medium--one-sixth:nth-child(6n+1), .grid--uniform .medium--two-sixths:nth-child(3n+1), .grid--uniform .medium--three-sixths:nth-child(2n+1), .grid--uniform .medium--one-eighth:nth-child(8n+1), .grid--uniform .medium--two-eighths:nth-child(4n+1), .grid--uniform .medium--four-eighths:nth-child(2n+1), .grid--uniform .medium--five-tenths:nth-child(2n+1), .grid--uniform .medium--one-twelfth:nth-child(12n+1), .grid--uniform .medium--two-twelfths:nth-child(6n+1), .grid--uniform .medium--three-twelfths:nth-child(4n+1), .grid--uniform .medium--four-twelfths:nth-child(3n+1), .grid--uniform .medium--six-twelfths:nth-child(2n+1) { clear: both; } .medium--show { display: block !important; } .medium--hide { display: none !important; } .medium--text-left { text-align: left !important; } .medium--text-right { text-align: right !important; } .medium--text-center { text-align: center !important; } } @media only screen and (min-width: 990px) { /* Whole */ .large-up--one-whole { width: 100%; } /* Halves */ .large-up--one-half { width: 50%; } /* Thirds */ .large-up--one-third { width: 33.33333%; } .large-up--two-thirds { width: 66.66667%; } /* Quarters */ .large-up--one-quarter { width: 25%; } .large-up--two-quarters { width: 50%; } .large-up--three-quarters { width: 75%; } /* Fifths */ .large-up--one-fifth { width: 20%; } .large-up--two-fifths { width: 40%; } .large-up--three-fifths { width: 60%; } .large-up--four-fifths { width: 80%; } /* Sixths */ .large-up--one-sixth { width: 16.66667%; } .large-up--two-sixths { width: 33.33333%; } .large-up--three-sixths { width: 50%; } .large-up--four-sixths { width: 66.66667%; } .large-up--five-sixths { width: 83.33333%; } /* Eighths */ .large-up--one-eighth { width: 12.5%; } .large-up--two-eighths { width: 25%; } .large-up--three-eighths { width: 37.5%; } .large-up--four-eighths { width: 50%; } .large-up--five-eighths { width: 62.5%; } .large-up--six-eighths { width: 75%; } .large-up--seven-eighths { width: 87.5%; } /* Tenths */ .large-up--one-tenth { width: 10%; } .large-up--two-tenths { width: 20%; } .large-up--three-tenths { width: 30%; } .large-up--four-tenths { width: 40%; } .large-up--five-tenths { width: 50%; } .large-up--six-tenths { width: 60%; } .large-up--seven-tenths { width: 70%; } .large-up--eight-tenths { width: 80%; } .large-up--nine-tenths { width: 90%; } /* Twelfths */ .large-up--one-twelfth { width: 8.33333%; } .large-up--two-twelfths { width: 16.66667%; } .large-up--three-twelfths { width: 25%; } .large-up--four-twelfths { width: 33.33333%; } .large-up--five-twelfths { width: 41.66667%; } .large-up--six-twelfths { width: 50%; } .large-up--seven-twelfths { width: 58.33333%; } .large-up--eight-twelfths { width: 66.66667%; } .large-up--nine-twelfths { width: 75%; } .large-up--ten-twelfths { width: 83.33333%; } .large-up--eleven-twelfths { width: 91.66667%; } .grid--uniform .large-up--one-half:nth-child(2n+1), .grid--uniform .large-up--one-third:nth-child(3n+1), .grid--uniform .large-up--one-quarter:nth-child(4n+1), .grid--uniform .large-up--one-fifth:nth-child(5n+1), .grid--uniform .large-up--one-sixth:nth-child(6n+1), .grid--uniform .large-up--two-sixths:nth-child(3n+1), .grid--uniform .large-up--three-sixths:nth-child(2n+1), .grid--uniform .large-up--one-eighth:nth-child(8n+1), .grid--uniform .large-up--two-eighths:nth-child(4n+1), .grid--uniform .large-up--four-eighths:nth-child(2n+1), .grid--uniform .large-up--five-tenths:nth-child(2n+1), .grid--uniform .large-up--one-twelfth:nth-child(12n+1), .grid--uniform .large-up--two-twelfths:nth-child(6n+1), .grid--uniform .large-up--three-twelfths:nth-child(4n+1), .grid--uniform .large-up--four-twelfths:nth-child(3n+1), .grid--uniform .large-up--six-twelfths:nth-child(2n+1) { clear: both; } .large-up--show { display: block !important; } .large-up--hide { display: none !important; } .large-up--text-left { text-align: left !important; } .large-up--text-right { text-align: right !important; } .large-up--text-center { text-align: center !important; } } /*================ Build Grid Push Classes ================*/ @media only screen and (max-width: 749px) { /* Halves */ .small--push-one-half { left: 50%; } /* Thirds */ .small--push-one-third { left: 33.33333%; } .small--push-two-thirds { left: 66.66667%; } /* Quarters */ .small--push-one-quarter { left: 25%; } .small--push-two-quarters { left: 50%; } .small--push-three-quarters { left: 75%; } /* Fifths */ .small--push-one-fifth { left: 20%; } .small--push-two-fifths { left: 40%; } .small--push-three-fifths { left: 60%; } .small--push-four-fifths { left: 80%; } /* Sixths */ .small--push-one-sixth { left: 16.66667%; } .small--push-two-sixths { left: 33.33333%; } .small--push-three-sixths { left: 50%; } .small--push-four-sixths { left: 66.66667%; } .small--push-five-sixths { left: 83.33333%; } /* Eighths */ .small--push-one-eighth { left: 12.5%; } .small--push-two-eighths { left: 25%; } .small--push-three-eighths { left: 37.5%; } .small--push-four-eighths { left: 50%; } .small--push-five-eighths { left: 62.5%; } .small--push-six-eighths { left: 75%; } .small--push-seven-eighths { left: 87.5%; } /* Tenths */ .small--push-one-tenth { left: 10%; } .small--push-two-tenths { left: 20%; } .small--push-three-tenths { left: 30%; } .small--push-four-tenths { left: 40%; } .small--push-five-tenths { left: 50%; } .small--push-six-tenths { left: 60%; } .small--push-seven-tenths { left: 70%; } .small--push-eight-tenths { left: 80%; } .small--push-nine-tenths { left: 90%; } /* Twelfths */ .small--push-one-twelfth { left: 8.33333%; } .small--push-two-twelfths { left: 16.66667%; } .small--push-three-twelfths { left: 25%; } .small--push-four-twelfths { left: 33.33333%; } .small--push-five-twelfths { left: 41.66667%; } .small--push-six-twelfths { left: 50%; } .small--push-seven-twelfths { left: 58.33333%; } .small--push-eight-twelfths { left: 66.66667%; } .small--push-nine-twelfths { left: 75%; } .small--push-ten-twelfths { left: 83.33333%; } .small--push-eleven-twelfths { left: 91.66667%; } } @media only screen and (min-width: 750px) { /* Halves */ .medium-up--push-one-half { left: 50%; } /* Thirds */ .medium-up--push-one-third { left: 33.33333%; } .medium-up--push-two-thirds { left: 66.66667%; } /* Quarters */ .medium-up--push-one-quarter { left: 25%; } .medium-up--push-two-quarters { left: 50%; } .medium-up--push-three-quarters { left: 75%; } /* Fifths */ .medium-up--push-one-fifth { left: 20%; } .medium-up--push-two-fifths { left: 40%; } .medium-up--push-three-fifths { left: 60%; } .medium-up--push-four-fifths { left: 80%; } /* Sixths */ .medium-up--push-one-sixth { left: 16.66667%; } .medium-up--push-two-sixths { left: 33.33333%; } .medium-up--push-three-sixths { left: 50%; } .medium-up--push-four-sixths { left: 66.66667%; } .medium-up--push-five-sixths { left: 83.33333%; } /* Eighths */ .medium-up--push-one-eighth { left: 12.5%; } .medium-up--push-two-eighths { left: 25%; } .medium-up--push-three-eighths { left: 37.5%; } .medium-up--push-four-eighths { left: 50%; } .medium-up--push-five-eighths { left: 62.5%; } .medium-up--push-six-eighths { left: 75%; } .medium-up--push-seven-eighths { left: 87.5%; } /* Tenths */ .medium-up--push-one-tenth { left: 10%; } .medium-up--push-two-tenths { left: 20%; } .medium-up--push-three-tenths { left: 30%; } .medium-up--push-four-tenths { left: 40%; } .medium-up--push-five-tenths { left: 50%; } .medium-up--push-six-tenths { left: 60%; } .medium-up--push-seven-tenths { left: 70%; } .medium-up--push-eight-tenths { left: 80%; } .medium-up--push-nine-tenths { left: 90%; } /* Twelfths */ .medium-up--push-one-twelfth { left: 8.33333%; } .medium-up--push-two-twelfths { left: 16.66667%; } .medium-up--push-three-twelfths { left: 25%; } .medium-up--push-four-twelfths { left: 33.33333%; } .medium-up--push-five-twelfths { left: 41.66667%; } .medium-up--push-six-twelfths { left: 50%; } .medium-up--push-seven-twelfths { left: 58.33333%; } .medium-up--push-eight-twelfths { left: 66.66667%; } .medium-up--push-nine-twelfths { left: 75%; } .medium-up--push-ten-twelfths { left: 83.33333%; } .medium-up--push-eleven-twelfths { left: 91.66667%; } } @media only screen and (min-width: 750px) and (max-width: 989px) { /* Halves */ .medium--push-one-half { left: 50%; } /* Thirds */ .medium--push-one-third { left: 33.33333%; } .medium--push-two-thirds { left: 66.66667%; } /* Quarters */ .medium--push-one-quarter { left: 25%; } .medium--push-two-quarters { left: 50%; } .medium--push-three-quarters { left: 75%; } /* Fifths */ .medium--push-one-fifth { left: 20%; } .medium--push-two-fifths { left: 40%; } .medium--push-three-fifths { left: 60%; } .medium--push-four-fifths { left: 80%; } /* Sixths */ .medium--push-one-sixth { left: 16.66667%; } .medium--push-two-sixths { left: 33.33333%; } .medium--push-three-sixths { left: 50%; } .medium--push-four-sixths { left: 66.66667%; } .medium--push-five-sixths { left: 83.33333%; } /* Eighths */ .medium--push-one-eighth { left: 12.5%; } .medium--push-two-eighths { left: 25%; } .medium--push-three-eighths { left: 37.5%; } .medium--push-four-eighths { left: 50%; } .medium--push-five-eighths { left: 62.5%; } .medium--push-six-eighths { left: 75%; } .medium--push-seven-eighths { left: 87.5%; } /* Tenths */ .medium--push-one-tenth { left: 10%; } .medium--push-two-tenths { left: 20%; } .medium--push-three-tenths { left: 30%; } .medium--push-four-tenths { left: 40%; } .medium--push-five-tenths { left: 50%; } .medium--push-six-tenths { left: 60%; } .medium--push-seven-tenths { left: 70%; } .medium--push-eight-tenths { left: 80%; } .medium--push-nine-tenths { left: 90%; } /* Twelfths */ .medium--push-one-twelfth { left: 8.33333%; } .medium--push-two-twelfths { left: 16.66667%; } .medium--push-three-twelfths { left: 25%; } .medium--push-four-twelfths { left: 33.33333%; } .medium--push-five-twelfths { left: 41.66667%; } .medium--push-six-twelfths { left: 50%; } .medium--push-seven-twelfths { left: 58.33333%; } .medium--push-eight-twelfths { left: 66.66667%; } .medium--push-nine-twelfths { left: 75%; } .medium--push-ten-twelfths { left: 83.33333%; } .medium--push-eleven-twelfths { left: 91.66667%; } } @media only screen and (min-width: 990px) { /* Halves */ .large-up--push-one-half { left: 50%; } /* Thirds */ .large-up--push-one-third { left: 33.33333%; } .large-up--push-two-thirds { left: 66.66667%; } /* Quarters */ .large-up--push-one-quarter { left: 25%; } .large-up--push-two-quarters { left: 50%; } .large-up--push-three-quarters { left: 75%; } /* Fifths */ .large-up--push-one-fifth { left: 20%; } .large-up--push-two-fifths { left: 40%; } .large-up--push-three-fifths { left: 60%; } .large-up--push-four-fifths { left: 80%; } /* Sixths */ .large-up--push-one-sixth { left: 16.66667%; } .large-up--push-two-sixths { left: 33.33333%; } .large-up--push-three-sixths { left: 50%; } .large-up--push-four-sixths { left: 66.66667%; } .large-up--push-five-sixths { left: 83.33333%; } /* Eighths */ .large-up--push-one-eighth { left: 12.5%; } .large-up--push-two-eighths { left: 25%; } .large-up--push-three-eighths { left: 37.5%; } .large-up--push-four-eighths { left: 50%; } .large-up--push-five-eighths { left: 62.5%; } .large-up--push-six-eighths { left: 75%; } .large-up--push-seven-eighths { left: 87.5%; } /* Tenths */ .large-up--push-one-tenth { left: 10%; } .large-up--push-two-tenths { left: 20%; } .large-up--push-three-tenths { left: 30%; } .large-up--push-four-tenths { left: 40%; } .large-up--push-five-tenths { left: 50%; } .large-up--push-six-tenths { left: 60%; } .large-up--push-seven-tenths { left: 70%; } .large-up--push-eight-tenths { left: 80%; } .large-up--push-nine-tenths { left: 90%; } /* Twelfths */ .large-up--push-one-twelfth { left: 8.33333%; } .large-up--push-two-twelfths { left: 16.66667%; } .large-up--push-three-twelfths { left: 25%; } .large-up--push-four-twelfths { left: 33.33333%; } .large-up--push-five-twelfths { left: 41.66667%; } .large-up--push-six-twelfths { left: 50%; } .large-up--push-seven-twelfths { left: 58.33333%; } .large-up--push-eight-twelfths { left: 66.66667%; } .large-up--push-nine-twelfths { left: 75%; } .large-up--push-ten-twelfths { left: 83.33333%; } .large-up--push-eleven-twelfths { left: 91.66667%; } } /*================ #Helper Classes ================*/ .clearfix { *zoom: 1; } .clearfix::after { content: ''; display: table; clear: both; } .visually-hidden, .icon__fallback-text { position: absolute !important; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; } .visibility-hidden { visibility: hidden; } .js-focus-hidden:focus { outline: none; } .no-js:not(html) { display: none; } .no-js .no-js:not(html) { display: block; } .no-js .js { display: none; } .hide { display: none !important; } /*============================================================================ Skip to content button - Overrides .visually-hidden when focused ==============================================================================*/ .skip-link:focus { clip: auto; width: auto; height: auto; margin: 0; color: #3d4246; background-color: #ffffff; padding: 10px; opacity: 1; z-index: 10000; transition: none; } /*=============== Lazy loading ===================*/ .box { background: no-repeat; background-color: #f7f7f7; background-size: contain; } .ratio-container { position: relative; } .ratio-container:after { content: ''; display: block; height: 0; width: 100%; /* 16:9 = 56.25% = calc(9 / 16 * 100%) */ padding-bottom: 50%; content: ""; } .ratio-container > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /*================ #Basic Styles ================*/ body, html { background-color: #ffffff; color: #000000; } .page-width { *zoom: 1; max-width: 1200px; margin: 0 auto; } .page-width::after { content: ''; display: table; clear: both; } .main-content { display: block; padding-top: 15px; } @media only screen and (min-width: 750px) { .main-content { padding-top: 30px; } } .section-header { margin-bottom: 15px; } @media only screen and (min-width: 750px) { .section-header { margin-bottom: 10px; } } /*================ Typography ================*/ blockquote { font-size: 1.2em; font-style: normal; text-align: center; padding: 0 30px; margin: 0; } .rte blockquote { border-color: #ebebeb; border-width: 1px 0; border-style: solid; padding: 30px 0; margin-bottom: 27.5px; } blockquote p + cite { margin-top: 27.5px; } blockquote cite { display: block; font-size: 0.85em; font-weight: 400; } blockquote cite::before { content: '\2014 \0020'; } code, pre { font-family: Consolas, monospace; font-size: 1em; } pre { overflow: auto; } body, input, textarea, button, select { font-size: 15px; font-family: Poppins; color: #000000; line-height: 1.5; } @media only screen and (max-width: 989px) { input, textarea, select, button { font-size: 16px; } } /*================ Headings ================*/ h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { margin: 0 0 7.5px; font-family: "Ubuntu", "HelveticaNeue", "Helvetica Neue", sans-serif; font-weight: 400; line-height: 1.2; overflow-wrap: break-word; word-wrap: break-word; } h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a, h6 a, .h6 a { color: inherit; text-decoration: none; font-weight: inherit; } h1, .h1 { font-size: 2.33333em; text-transform: none; letter-spacing: 0; } @media only screen and (max-width: 749px) { h1, .h1 { font-size: 2.13333em; } } h2, .h2 { font-size: 1.33333em; text-transform: uppercase; letter-spacing: 0.1em; } @media only screen and (max-width: 749px) { h2, .h2 { font-size: 1.2em; } } h3, .h3 { font-size: 1.73333em; text-transform: none; letter-spacing: 0; } @media only screen and (max-width: 749px) { h3, .h3 { font-size: 1.33333em; } } h4, .h4 { font-size: 1.13333em; } @media only screen and (max-width: 749px) { h4, .h4 { font-size: 1em; } } h5, .h5 { font-size: 1em; } @media only screen and (max-width: 749px) { h5, .h5 { font-size: 0.86667em; } } h6, .h6 { font-size: 0.93333em; } @media only screen and (max-width: 749px) { h6, .h6 { font-size: 0.8em; } } /*================ RTE headings ================*/ .rte { color: #000000; margin-bottom: 15px; } .rte:last-child { margin-bottom: 0; } .rte h1, .rte .h1, .rte h2, .rte .h2, .rte h3, .rte .h3, .rte h4, .rte .h4, .rte h5, .rte .h5, .rte h6, .rte .h6 { margin-top: 55px; margin-bottom: 27.5px; } .rte h1:first-child, .rte .h1:first-child, .rte h2:first-child, .rte .h2:first-child, .rte h3:first-child, .rte .h3:first-child, .rte h4:first-child, .rte .h4:first-child, .rte h5:first-child, .rte .h5:first-child, .rte h6:first-child, .rte .h6:first-child { margin-top: 0; } .rte li { margin-bottom: 4px; list-style: inherit; } .rte li:last-child { margin-bottom: 0; } .rte-setting { margin-bottom: 8.33333px; } .rte-setting:last-child { margin-bottom: 0; } /*================ Paragraph styles ================*/ p { color: #000000; margin: 0 0 8.33333px; } @media only screen and (max-width: 749px) { p { font-size: 0.93333em; } } p:last-child { margin-bottom: 0; } /*================ Lists ================*/ li { list-style: none; } /*================ Misc styles ================*/ .fine-print { font-size: 0.93333em; font-style: italic; } .txt--minor { font-size: 80%; } .txt--emphasis { font-style: italic; } .address { margin-bottom: 55px; } /*================ Hero and slideshow headers ================*/ .mega-title, .mega-subtitle { text-shadow: 0 0 15px rgba(0, 0, 0, 0.1); } .mega-title { margin-bottom: 0px; } .mega-title--large { font-size: 2.26667em; } @media only screen and (min-width: 750px) { .mega-title--large { font-size: 4.33333em; } } @media only screen and (min-width: 750px) { .mega-subtitle { font-size: 1.26667em; margin: 0 auto; max-width: 75%; } } .mega-subtitle p { color: inherit; } .mega-subtitle--large { font-size: 1.13333em; font-weight: 400; } @media only screen and (min-width: 750px) { .mega-subtitle--large { font-size: 1.53333em; } } /*================ #Icons ================*/ .icon { display: inline-block; width: 20px; height: 20px; vertical-align: middle; fill: currentColor; } .no-svg .icon { display: none; } svg.icon:not(.icon--full-color) circle, svg.icon:not(.icon--full-color) ellipse, svg.icon:not(.icon--full-color) g, svg.icon:not(.icon--full-color) line, svg.icon:not(.icon--full-color) path, svg.icon:not(.icon--full-color) polygon, svg.icon:not(.icon--full-color) polyline, svg.icon:not(.icon--full-color) rect, symbol.icon:not(.icon--full-color) circle, symbol.icon:not(.icon--full-color) ellipse, symbol.icon:not(.icon--full-color) g, symbol.icon:not(.icon--full-color) line, symbol.icon:not(.icon--full-color) path, symbol.icon:not(.icon--full-color) polygon, symbol.icon:not(.icon--full-color) polyline, symbol.icon:not(.icon--full-color) rect { fill: inherit; stroke: inherit; } /*============================================================================ A generic way to visually hide content while remaining accessible to screen readers (h5bp.com) ==============================================================================*/ .no-svg .icon__fallback-text { position: static !important; overflow: inherit; clip: none; height: auto; width: auto; margin: 0; } /*================ Payment Icons ================*/ .payment-icons { -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; cursor: default; } .payment-icons .icon { width: 30px; height: 30px; } .payment-icons .icon-cartx_pay { width: 75px; height: auto; } .payment-icons .icon-klarna { width: 48px; height: auto; } /*================ Social Icons ================*/ .social-icons .icon { width: 18px; height: 18px; } @media only screen and (min-width: 750px) { .social-icons .icon { width: 20px; height: 20px; } } .social-icons .icon.icon--wide { width: 40px; } /*================ #Lists ================*/ ul, ol { margin: 0; padding: 0; } ol { list-style: decimal; } .list--inline { padding: 0; margin: 0; } .list--inline > li { display: inline-block; margin-bottom: 0; vertical-align: middle; } /*================ #Rich Text Editor ================*/ .rte img { height: auto; } .rte table { table-layout: fixed; } .rte ul, .rte ol { margin: 0 0 7.5px 18px; } .rte ul.list--inline, .rte ol.list--inline { margin-left: 0; } .rte ul { list-style: disc outside; } .rte ul ul { list-style: circle outside; } .rte ul ul ul { list-style: square outside; } .rte a:not(.btn) { border-bottom: 1px solid currentColor; padding-bottom: 1px; } .text-center.rte ul, .text-center.rte ol, .text-center .rte ul, .text-center .rte ol { margin-left: 0; list-style-position: inside; } .scrollable-wrapper { max-width: 100%; overflow: auto; -webkit-overflow-scrolling: touch; } /*================ #Links and Buttons ================*/ a { color: #3d4246; text-decoration: none; } a:hover, a:focus { /* opacity: $opacity-link-hover; */ } a.classic-link { text-decoration: underline; } a[href^="tel"], a[href^="mailto"] { color: inherit; } /*================ Buttons ================*/ .btn { -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; display: inline-block; width: auto; text-decoration: none; text-align: center; vertical-align: middle; cursor: pointer; border: 1px solid transparent; border-radius: 2px; padding: 8px 15px; background-color: #f042a8; color: #ffffff; font-family: "Ubuntu", "HelveticaNeue", "Helvetica Neue", sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; white-space: normal; font-size: 13px; } @media only screen and (min-width: 750px) { .btn { padding: 7px 18px; } } .btn:hover, .btn:focus { opacity: 0.9; } .btn .icon-arrow-right, .btn .icon-arrow-left { height: 9px; } .btn[disabled] { cursor: default; opacity: 0.5; background-color: #f042a8; color: #ffffff; } .btn_sp { -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; display: inline-block; width: auto; text-decoration: none; text-align: center; vertical-align: middle; cursor: pointer; border: 1px solid transparent; border-radius: 2px; padding: 8px 15px; background-color: #f042a8; color: #ffffff; font-family: "Ubuntu", "HelveticaNeue", "Helvetica Neue", sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; white-space: normal; font-size: 13px; } @media only screen and (min-width: 750px) { .btn_sp { padding: 7px 18px; } } .btn_sp:hover, .btn_sp:focus { opacity: 0.9; } .btn_sp .icon-arrow-right, .btn_sp .icon-arrow-left { height: 9px; } .btn_sp[disabled] { cursor: default; opacity: 0.5; background-color: #f042a8; color: #ffffff; } .btn--secondary { background-color: #fff; color: #3d4246; border-color: #ebebeb; } .btn--small { font-family: Poppins; padding: 8px 10px; font-size: 0.8em; line-height: 1; } .btn--secondary { background-color: #fff; color: #3d4246; border-color: #ebebeb; } /*================ Button variations ================*/ @media only screen and (max-width: 749px) { .btn--small-wide { padding-left: 50px; padding-right: 50px; } } .btn--link { background-color: transparent; border: 0; margin: 0; color: #3d4246; text-align: left; } .btn--link:hover, .btn--link:focus { opacity: 0.9; } .btn--link .icon { vertical-align: middle; } .btn--narrow { padding-left: 15px; padding-right: 15px; } .btn--disabled { opacity: 0.5; cursor: default; } .btn--disabled:hover, .btn--disabled:focus { opacity: 0.5; } .btn--has-icon-after .icon { margin-left: 10px; } .btn--has-icon-before .icon { margin-right: 10px; } /*================ Force an input/button to look like a text link ================*/ .text-link { display: inline; border: 0 none; background: none; padding: 0; margin: 0; } /*================ Return to collection/blog links ================*/ .return-link-wrapper { margin: 27.5px auto; } @media only screen and (max-width: 749px) { .return-link-wrapper { margin-bottom: -15px; } .return-link-wrapper .btn { display: block; } } /*================ #Tables ================*/ table { margin-bottom: 27.5px; } th { font-family: "Ubuntu", "HelveticaNeue", "Helvetica Neue", sans-serif; font-weight: 700; } th, td { text-align: left; border: 1px solid #ebebeb; padding: 10px 14px; } /*============================================================================ Responsive tables, defined with .responsive-table on table element. ==============================================================================*/ @media only screen and (max-width: 749px) { .responsive-table thead { display: none; } .responsive-table tr { display: block; } .responsive-table tr, .responsive-table td { float: left; clear: both; width: 100%; } .responsive-table th, .responsive-table td { display: block; text-align: right; padding: 27.5px; border: 0; margin: 0; } .responsive-table td::before { content: attr(data-label); float: left; text-align: center; font-size: 12px; padding-right: 10px; } .responsive-table__row + .responsive-table__row, tfoot > .responsive-table__row:first-child { position: relative; margin-top: 10px; padding-top: 55px; } .responsive-table__row + .responsive-table__row::after, tfoot > .responsive-table__row:first-child::after { content: ''; display: block; position: absolute; top: 0; left: 27.5px; right: 27.5px; border-bottom: 1px solid #ebebeb; } } /*================ #Images and Iframes ================*/ svg:not(:root) { overflow: hidden; } .video-wrapper { position: relative; overflow: hidden; max-width: 100%; padding-bottom: 56.25%; height: 0; height: auto; } .video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /*================ Forms ================*/ form { margin: 0; } fieldset { border: 1px solid #ebebeb; margin: 0 0 55px; padding: 27.5px; } legend { border: 0; padding: 0; } button { cursor: pointer; } input[type="submit"] { cursor: pointer; } label { display: block; margin-bottom: 5px; } @media only screen and (max-width: 749px) { label { font-size: 0.86667em; } } [type="radio"] + label, [type="checkbox"] + label { display: inline-block; margin-bottom: 0; } label[for] { cursor: pointer; } input, textarea, select { border: 1px solid #ebebeb; background-color: #ffffff; color: #000; max-width: 100%; line-height: 1.5; border-radius: 2px; } input:focus, textarea:focus, select:focus { border-color: #d2d2d2; } input[disabled], textarea[disabled], select[disabled] { cursor: default; background-color: #f4f4f4; border-color: #f4f4f4; } input.input--error::-webkit-input-placeholder, textarea.input--error::-webkit-input-placeholder, select.input--error::-webkit-input-placeholder { color: #d20000; opacity: 0.5; } input.input--error::-moz-placeholder, textarea.input--error::-moz-placeholder, select.input--error::-moz-placeholder { color: #d20000; opacity: 0.5; } input.input--error:-ms-input-placeholder, textarea.input--error:-ms-input-placeholder, select.input--error:-ms-input-placeholder { color: #d20000; opacity: 0.5; } input.input--error::-ms-input-placeholder, textarea.input--error::-ms-input-placeholder, select.input--error::-ms-input-placeholder { color: #d20000; opacity: 1; } input.hidden-placeholder::-webkit-input-placeholder, textarea.hidden-placeholder::-webkit-input-placeholder, select.hidden-placeholder::-webkit-input-placeholder { color: transparent; } input.hidden-placeholder::-moz-placeholder, textarea.hidden-placeholder::-moz-placeholder, select.hidden-placeholder::-moz-placeholder { color: transparent; } input.hidden-placeholder:-ms-input-placeholder, textarea.hidden-placeholder:-ms-input-placeholder, select.hidden-placeholder:-ms-input-placeholder { color: transparent; } input.hidden-placeholder::-ms-input-placeholder, textarea.hidden-placeholder::-ms-input-placeholder, select.hidden-placeholder::-ms-input-placeholder { opacity: 1; } textarea { min-height: 100px; } /*================ Error styles ================*/ input.input--error, select.input--error, textarea.input--error { border-color: #d20000; background-color: #fff8f8; color: #d20000; } select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-position: right center; background-image: url(//cdn.cartx.com/s/files/1/0296/4842/0923/t/4/assets/ico-select.svg?73); background-repeat: no-repeat; background-position: right 10px center; line-height: 1.2; padding-right: 28px; text-indent: 0.01px; text-overflow: ''; cursor: pointer; padding-top: 8px; padding-left: 15px; padding-bottom: 8px; /*================ Hide the svg arrow in IE9 and below ================*/ } @media only screen and (min-width: 750px) { select { padding-top: 10px; padding-left: 18px; padding-bottom: 10px; } } .ie9 select { padding-right: 10px; background-image: none; } optgroup { font-weight: 700; } option { color: #3d4246; background-color: #ffffff; } select::-ms-expand { display: none; } /*================ Form labels ================*/ .label--hidden { position: absolute; height: 0; width: 0; margin-bottom: 0; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } .ie9 .label--hidden { position: static; height: auto; width: auto; margin-bottom: 2px; overflow: visible; clip: initial; } ::-webkit-input-placeholder { color: #000; opacity: 0.6; } ::-moz-placeholder { color: #000; opacity: 0.6; } :-ms-input-placeholder { color: #000; opacity: 0.6; } ::-ms-input-placeholder { color: #000; opacity: 1; } /*================ Labels ================*/ .label--error { color: #d20000; } input, textarea { padding: 8px 15px; } @media only screen and (min-width: 750px) { input, textarea { padding: 10px 18px; } } /*================ Vertical forms ================*/ .form-vertical input, .form-vertical select, .form-vertical textarea { display: block; width: 100%; margin-bottom: 8.33333px; } .form-vertical [type="radio"], .form-vertical [type="checkbox"] { display: inline-block; width: auto; margin-right: 5px; } .form-vertical [type="submit"], .form-vertical .btn { display: inline-block; width: auto; } /*================ Form feedback messages ================*/ .note, .form--success, .errors { padding: 8px; margin: 0 0 27.5px; } @media only screen and (min-width: 750px) { .note, .form--success, .errors { padding: 10px; } } .note { border: 1px solid #ebebeb; } .form--success { border: 1px solid #19a340; background-color: #f8fff9; color: #19a340; } .errors { border: 1px solid #d20000; background-color: #fff8f8; color: #d20000; } .errors ul { list-style: none; padding: 0; margin: 0; } .errors a { color: #d20000; text-decoration: underline; } /*================ Input Groups ================*/ .input-group { position: relative; display: table; width: 100%; border-collapse: separate; } .form-vertical .input-group { margin-bottom: 55px; } .input-group__field, .input-group__btn { display: table-cell; vertical-align: middle; margin: 0; } .input-group__field, .input-group__btn .btn { height: 42px; padding-top: 0; padding-bottom: 0; } @media only screen and (min-width: 750px) { .input-group__field, .input-group__btn .btn { height: 40px; } } .input-group__field { width: 100%; border-right: 0; border-radius: 2px 0 0 2px; } .form-vertical .input-group__field { margin: 0; } .input-group__btn { white-space: nowrap; width: 1%; } .input-group__btn .btn { border-radius: 0 2px 2px 0; white-space: nowrap; } /*================ #Site Nav and Dropdowns ================*/ .site-header__logo img { display: block; } .site-nav { padding: 0; text-align: left; /* margin: 25px 0; */ } .site-nav a { padding: 30px 8px; } /* .count-column .collection-grid-item__title-wrapper::before { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; } */ .count-column.center { text-align: center; } .site-nav--has-dropdown:hover .site-nav__dropdown, .site-nav--has-dropdown:focus .site-nav__dropdown { display: block; } .site-nav__dropdown { top: 100%; } .site-nav--centered { padding-bottom: 22px; } /*================ Site Nav Links ================*/ .site-nav__link { display: block; white-space: nowrap; } .site-nav--centered .site-nav__link { padding-top: 0; } .site-nav__link .icon-chevron-down { width: 8px; height: 8px; margin-left: 2px; } .site-nav__link.site-nav--active-dropdown { border: 1px solid #ebebeb; border-bottom: 1px solid transparent; z-index: 2; } /*================ Dropdowns ================*/ .site-nav--has-dropdown { position: relative; } .site-nav--has-centered-dropdown { position: static; } .site-nav__dropdown { display: none; position: absolute; left: 0; padding: 11px 0; margin: 0; z-index: 7; text-align: left; border: 1px solid #ebebeb; background: #ffffff; left: -1px; top: 52px; } .site-nav__dropdown .site-nav__link { padding: 4px 15px; } .site-nav--active-dropdown .site-nav__dropdown { display: block; } .site-nav__dropdown li { display: block; } .site-nav li.grand { position: relative; } .site-nav--dropdown--sub { position: absolute; display: none; min-width: 160px; right: -160px; top: -1px; border: 1px solid #ebebeb; background-color: #ffffff; } .site-nav li.grand:hover > .site-nav--dropdown--sub { display: block; } .site-nav__dropdown--centered { width: 100%; border: 0; background: none; padding: 0; text-align: center; } /*================ Child list ================*/ .site-nav__childlist { display: inline-block; border: 1px solid #ebebeb; background: #ffffff; padding: 11px 17px; text-align: left; } .site-nav__child-link:hover { color: #f042a8; } .site-nav__childlist-grid { display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; width: auto; /* margin-bottom: -15px; */ } .site-nav__childlist-grid .grid-view-item__link { padding: 0px; } .site-nav__childlist-item { -webkit-flex: 0 1 auto; -moz-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; margin-bottom: 15px; } .site-nav__child-link--parent { font-weight: 700; margin: 4px 0; } .page-width { padding-left: 55px; padding-right: 55px; } @media only screen and (max-width: 749px) { .page-width { padding-left: 22px; padding-right: 22px; } } @media only screen and (min-width: 750px) and (max-width: 989px) { .page-width { padding-left: 30px; padding-right: 30px; } } .page-container { transition: all 0.45s cubic-bezier(0.29, 0.63, 0.44, 1); position: relative; overflow: hidden; } @media only screen and (min-width: 750px) { .page-container { /* @include transform(translate3d(0, 0, 0)); */ } } hr { margin: 25px 0; border: 0; border-bottom: 1px solid #ebebeb; } .hr--small { padding: 10px 0; margin: 0; } .hr--invisible { border-bottom: 0; } .border-bottom { border-bottom: 1px solid #ebebeb; } .border-top { border-top: 1px solid #ebebeb; } .empty-page-content { padding: 125px 55px; } @media only screen and (max-width: 749px) { .empty-page-content { padding-left: 22px; padding-right: 22px; } } .grid--table { display: table; table-layout: fixed; width: 100%; } .grid--table > .grid__item { float: none; display: table-cell; vertical-align: middle; } .grid--no-gutters { margin-left: 0; } .grid--no-gutters .grid__item { padding-left: 0; } .grid--half-gutters { margin-left: -15px; } .grid--half-gutters > .grid__item { padding-left: 15px; } .grid--double-gutters { margin-left: -60px; } .grid--double-gutters > .grid__item { padding-left: 60px; } .grid--flush-bottom { margin-bottom: -30px; overflow: auto; } .grid--flush-bottom > .grid__item { margin-bottom: 30px; } /*============================================================================ Animation Classes and Keyframes ==============================================================================*/ .is-transitioning { display: block !important; visibility: visible !important; } @-webkit-keyframes spin { 0% { -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes spin { 0% { -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-ms-keyframes spin { 0% { -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { 0% { -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .drawer { display: none; position: absolute; overflow: hidden; -webkit-overflow-scrolling: touch; z-index: 9; background-color: #ffffff; transition: all 0.45s cubic-bezier(0.29, 0.63, 0.44, 1); } .drawer input[type="text"], .drawer textarea { background-color: #ffffff; color: #3d4246; } .js-drawer-open { overflow: hidden; } .drawer--top { width: 100%; } .js-drawer-open-top .drawer--top { -ms-transform: translateY(100%); -webkit-transform: translateY(100%); transform: translateY(100%); display: block; } .drawer-page-content::after { visibility: hidden; opacity: 0; content: ''; display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); z-index: 8; transition: all 0.45s cubic-bezier(0.29, 0.63, 0.44, 1); } .js-drawer-open .drawer-page-content::after { visibility: visible; opacity: 1; } .drawer__title, .drawer__close { display: table-cell; vertical-align: middle; } .drawer__close-button { background: none; border: 0 none; position: relative; right: -15px; height: 100%; width: 60px; padding: 0 20px; color: inherit; font-size: 1.2em; } .drawer__close-button:active, .drawer__close-button:focus { background-color: rgba(0, 0, 0, 0.6); } .grid--view-items { overflow: auto; margin-bottom: -15px; } .grid-view-item { margin: 0 auto 15px; } .custom__item .grid-view-item { margin-bottom: 0; } .grid-view-item__title { margin-bottom: 0; color: #3d4246; font-weight: normal; color: #494343; } .grid-view-item__meta { margin-top: 8px; } @media only screen and (max-width: 749px) { .grid-view-item__title, .grid-view-item__meta { font-size: 0.93333em; } } .product-price__price { display: inline-block; color: #000000; } .product-price__sale { padding-right: 0; } .grid-view-item .product-price__price { font-size: 18px; color: #3a4247; font-weight: 700; } .grid-view-item .product-price__sale, .grid-view-item .product__price--sale { color: #f042a8; } .grid-view-item__link { display: block; } .grid-view-item__vendor { margin-top: 4px; color: #000000; font-size: 0.86667em; text-transform: uppercase; } @media only screen and (max-width: 749px) { .grid-view-item__vendor { font-size: 0.8em; } } .grid-view-item__image-wrapper { margin: 0 auto 15px; position: relative; width: 100%; } .grid-view-item__image { display: block; margin: 0 auto; width: 100%; } .grid-view-item__image-wrapper .grid-view-item__image { position: absolute; top: 0; } .grid-view-item--sold-out .grid-view-item__image { opacity: 0.5; } .grid-view-item__image.lazyload { opacity: 0; } .ie9 .grid-view-item__image { opacity: 1; } .list-view-item { display: table; table-layout: fixed; margin-bottom: 22px; width: 100%; } .list-view-item:last-child { margin-bottom: 0; } @media only screen and (min-width: 750px) { .list-view-item { border-bottom: 1px solid #ebebeb; padding-bottom: 22px; } .list-view-item:last-child { padding-bottom: 0; border-bottom: 0; } } .list-view-item__image { max-height: 95px; } .list-view-item__image-column { display: table-cell; vertical-align: middle; width: 130px; } @media only screen and (max-width: 749px) { .list-view-item__image-column { width: 85px; } } .list-view-item__image-wrapper { position: relative; margin-right: 15px; } @media only screen and (max-width: 749px) { .list-view-item__image-wrapper { margin-right: 7.5px; } } .list-view-item__title-column { display: table-cell; vertical-align: middle; } .list-view-item__title { color: #3d4246; font-size: 1.13333em; min-width: 100px; } @media only screen and (max-width: 749px) { .list-view-item__title { font-size: 0.93333em; } } .list-view-item__sold-out { font-size: 0.93333em; } .list-view-item__on-sale { color: #f042a8; font-size: 0.93333em; } @media only screen and (max-width: 749px) { .list-view-item__on-sale { display: none; } } .list-view-item__vendor-column { display: table-cell; text-align: center; vertical-align: middle; width: 20%; } .list-view-item__vendor { font-size: 0.93333em; font-style: italic; } @media only screen and (max-width: 749px) { .list-view-item__vendor { font-size: 0.86667em; } } .list-view-item__price-column { display: table-cell; text-align: right; vertical-align: middle; width: 20%; font-size: 1.06667em; } @media only screen and (max-width: 749px) { .list-view-item__price-column { font-size: 0.93333em; } } .list-view-item__price-column .product-price__sale { display: block; } .list-view-item__price-column .product-price__sale-label, .list-view-item__price-column .product-price__sold-out { display: none; } .list-view-item__price { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .list-view-item__price--reg { color: #f042a8; } @media only screen and (max-width: 749px) { .list-view-item__price--reg { display: block; } } @media only screen and (max-width: 749px) { .list-view-item__price--sale { display: block; } } /*============================================================================ Slick slider overrides ==============================================================================*/ .slick-dotted.slick-slider { margin-bottom: 0; } /*================ Slick dots and prev/next pagination ================*/ .slick-slider .slick-dots { margin: 0; width: 100%; } .slick-slider .slick-dots li { margin: 0; vertical-align: middle; width: 10px; height: 10px; margin-left: 6px; } .slick-slider .slick-dots li:first-of-type { margin-left: 0; } @media only screen and (min-width: 750px) { .slick-slider .slick-dots li { width: 12px; height: 12px; margin-left: 8px; } } .slick-slider .slick-dots li button { position: relative; padding: 0; width: 10px; height: 10px; } @media only screen and (min-width: 750px) { .slick-slider .slick-dots li button { width: 12px; height: 12px; } } .slick-slider .slick-dots li button::before { text-indent: -9999px; background-color: transparent; border-radius: 100%; background-color: #000; width: 10px; height: 10px; opacity: 0.4; transition: all 0.2s; } @media only screen and (min-width: 750px) { .slick-slider .slick-dots li button::before { width: 12px; height: 12px; } } .slick-slider .slick-dots li.slick-active button::before { opacity: 1; } .slick-slider .slick-dots li button:active::before { opacity: 0.7; } /*================ Index sections ================*/ .index-section { margin-top: 15px; margin-bottom: 15px; } @media only screen and (min-width: 750px) { .index-section { margin-top: 30px; margin-bottom: 30px; } } .index-section:first-child { padding-top: 0; border-top: 0; } .index-section:last-child { padding-bottom: 0; } .index-section--flush + .index-section--flush { margin-top: -30px; } @media only screen and (min-width: 750px) { [class*="index-section--flush"] + [class*="index-section--flush"] { margin-top: -60px; } } .index-section--flush:first-child { margin-top: -15px; } @media only screen and (min-width: 750px) { [class*="index-section--flush"]:first-child { margin-top: -30px; } } .index-section--flush:last-child { margin-bottom: -15px; } @media only screen and (min-width: 750px) { [class*="index-section--flush"]:last-child { margin-bottom: -30px; } } @media only screen and (max-width: 749px) { .index-section--featured-product:first-child { margin-top: -12px; } } .placeholder-svg { display: block; fill: rgba(0, 0, 0, 0.35); background-color: rgba(0, 0, 0, 0.1); width: 100%; height: 100%; max-width: 100%; max-height: 100%; border: 1px solid rgba(0, 0, 0, 0.2); } .placeholder-noblocks { padding: 40px; text-align: center; } .placeholder-background { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .placeholder-background .icon { border: 0; } .image-bar__content .placeholder-svg { position: absolute; top: 0; left: 0; } /*================ TEMPLATES ================*/ /*============= Templates | Password =============*/ .template-password { height: 100vh; } .password-page { display: table; height: 100%; width: 100%; color: #000000; background-color: #ffffff; background-size: cover; } .ie9 .password-page { height: auto; } .password-page .errors, .password-page .form--success { max-width: 500px; margin-left: auto; margin-right: auto; } .password-header { height: 85px; display: table-row; } .password-header__inner { display: table-cell; vertical-align: middle; } .password-login { padding: 0 30px; text-align: right; } .password-logo .logo { color: #3d4246; font-weight: 700; max-width: 100%; } .password-main { display: table-row; width: 100%; height: 100%; margin: 0 auto; } .password-main__inner { display: table-cell; vertical-align: middle; padding: 27.5px 55px; } .password-message { max-width: 500px; margin: 82.5px auto 27.5px; } .password__input-group { max-width: 340px; margin: 0 auto 55px; } .password__title { margin-bottom: 82.5px; } .password__form-heading { margin-bottom: 55px; } .password-powered-by { margin-top: 82.5px; } .product-single { overflow-anchor: none; } .product-single__title { margin-bottom: 10px; border-bottom: 3px solid #000000; padding-bottom: 3px; } @media only screen and (min-width: 750px) { .product-single__title { margin-top: -8px; } } .product-single__price { color: #000000; font-size: 18px; font-weight: 400; margin-bottom: 10px; font-weight: 700; } @media only screen and (max-width: 749px) { .product-single__price { display: block; font-size: 1.13333em; } } .product-single__vendor { color: #000000; font-size: 1em; text-transform: uppercase; letter-spacing: 1px; margin: 5px 0 10px; } /*================ Add to cart form ================*/ .product-form { display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: end; -webkit-align-items: flex-end; -moz-align-items: flex-end; -ms-align-items: flex-end; -o-align-items: flex-end; align-items: flex-end; /* width: auto; */ /* margin: 0 -5px -10px; */ } .product-form__item { margin-bottom: 10px; /* padding: 0 5px; */ } @media only screen and (min-width: 750px) { .product-form__item { -webkit-flex: 1 1 200px; -moz-flex: 1 1 200px; -ms-flex: 1 1 200px; flex: 1 1 200px; } } .product-form__item label { display: block; } .product-form__variants { display: none; } .no-js .product-form__variants { display: block; } .product-form__item--quantity { -webkit-flex: 0 0 100px; -moz-flex: 0 0 100px; -ms-flex: 0 0 100px; flex: 0 0 100px; } .product-form__item--submit { -ms-flex-preferred-size: 200px; -webkit-flex-basis: 200px; -moz-flex-basis: 200px; flex-basis: 200px; } .product-form__input { display: block; width: 100%; } .product-form__cart-submit { display: block; width: 100%; line-height: 1.4; padding-left: 5px; padding-right: 5px; white-space: normal; } @media only screen and (min-width: 750px) { .product-form__cart-submit--small { /* max-width: 300px; */ } } .product-single__description { margin-top: 0; width: 100%; margin-bottom: 0; } @media only screen and (min-width: 749px) and (max-width: 899px) { .text-right .cart__update--large { margin-bottom: 15px; margin-right: 0; } } /*================ Product Images ================*/ .product-single__thumbnail { display: block; margin: 0; border: 2px solid transparent; } @media only screen and (min-width: 750px) { .product-single__thumbnail.active-thumb { border-color: #3d4246; } } .product-single__thumbnail-image { max-width: 100%; display: block; } .product-featured-img { display: block; margin: 0 auto; position: absolute; top: 0; width: 100%; } .no-js .product-featured-img { position: relative; } .zoomImg { background-color: #ffffff; } @media only screen and (min-width: 750px) { .product-single__thumbnails { margin-top: 30px; } } @media only screen and (max-width: 749px) { .product-single__photos { margin-bottom: 0; } .product-single__photo--has-thumbnails { margin-bottom: 30px; } } .product-single__photos--full { margin-bottom: 30px; } .product-single__photo-wrapper { margin: 0 auto; width: 100%; } .product-single__photo { margin: 0 auto; min-height: 1px; width: 100%; height: 100%; position: relative; } @media only screen and (min-width: 750px) { .product-single__photos { position: relative; } .thumbnails-wrapper { position: relative; top: 30px; text-align: center; margin-bottom: 30px; } .thumbnails-slider__btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 9; } .thumbnails-slider__prev { left: -20px; } .thumbnails-slider__next { right: -20px; } } @media only screen and (max-width: 749px) { .thumbnails-wrapper { padding-bottom: 40px; } #related_popup_upsell .thumbnails-slider__btn { position: absolute; top: auto; transform: translateY(-50%); z-index: 9; bottom: 12%; } #related_popup_upsell .thumbnails-slider__prev { left: -3px; } #related_popup_upsell .thumbnails-slider__next { right: -3px; } } .product-single__thumbnails-item { display: inline-block; padding-bottom: 10px; width: 300px; /* float: none; vertical-align: middle; */ } @media only screen and (max-width: 749px) { .product-single__thumbnails-item { padding-left: 0; } } .slick-slider .product-single__thumbnails-item { /* float: none; */ } @media only screen and (max-width: 749px) { .template-product .main-content { padding-top: 22px; } .thumbnails-slider--active .product-single__thumbnails { display: none; } .thumbnails-slider--active .product-single__thumbnails.slick-initialized, .ie9 .thumbnails-slider--active .product-single__thumbnails { display: block; margin: 0 auto; max-width: 100%; } .product-single__thumbnail { margin: 0 auto; /* width: 50px; */ } } /*================ Template | Collections ================*/ .collection-hero { position: relative; overflow: hidden; margin-top: -30px; margin-bottom: 0; } .collection-description { margin-bottom: 22px; margin-top: 22px; } @media only screen and (min-width: 750px) { .collection-description { margin-bottom: 15px; margin-top: 15px; } } .collection-hero__image { background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; height: 300px; opacity: 1; } @media only screen and (max-width: 749px) { .collection-hero__image { height: 180px; } } .collection-hero__title-wrapper::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #5c5c5c; opacity: 0.25; } .over_image_content { position: absolute; color: #ffffff; width: 100%; text-align: center; left: 0; right: 0; top: 50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); } .over_image_content .rte.collection-description { color: #ffffff; } @media only screen and (min-width: 750px) { .over_image_content .collection-hero__title { font-size: 2.13333em; } } .template-blog .social-sharing { margin-bottom: 7.5px; } .blog--list-view .pagination { padding-top: 0; } /*================ Cart page ================*/ .cart th, .cart td { border: 0; } .cart td { padding: 22px 0; } .cart th { font-weight: 400; padding: 27.5px 0; } .cart .cart__meta { padding-right: 15px; } .cart__meta-text { padding: 5px 0; font-size: 0.86667em; font-style: italic; } .cart__qty-label { position: absolute !important; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; } .cart__qty-input { text-align: center; width: 60px; padding-left: 5px; padding-right: 5px; } @media only screen and (max-width: 749px) { .cart__qty-input { padding-top: 2px; padding-bottom: 2px; } } .cart__edit { margin-top: 10px; } .cart__edit-text--cancel { display: block; } .cart__edit--active .cart__edit-text--cancel { display: none; } .cart__edit-text--edit { display: none; } .cart__edit--active .cart__edit-text--edit { display: block; } .cart__edit-text--cancel, .cart__edit-text--edit { pointer-events: none; } .cart__row p { margin-bottom: 0; } .cart__row p + p { margin-top: 10px; } .cart__subtotal-title { font-size: 1.13333em; font-weight: bold; text-transform: uppercase; } .cart__subtotal { padding-left: 27.5px; } @media only screen and (min-width: 750px) { .cart__subtotal { padding-left: 55px; min-width: 150px; display: inline-block; margin-bottom: 10px; } } .cart__savings { padding-top: 18px; } .cart__savings-amount { padding-left: 27.5px; } @media only screen and (min-width: 750px) { .cart__savings-amount { padding-left: 55px; min-width: 150px; display: inline-block; } } .cart__footer { /* padding-top: $section-spacing-small; */ } .cart__update--large { margin-right: 10px; border-width: 3px; } .cart__continue--large { margin-right: 10px; line-height: 1.2; border-width: 3px; } .cart__shipping { font-style: italic; font-size: 0.86667em; padding: 18px 0 20px; } .cart-note__label, .cart-note__input { display: block; } @media only screen and (max-width: 749px) { .cart-note__label, .cart-note__input { margin: 0 auto; } } .cart-note__label { margin-bottom: 15px; } .cart-note__input { min-height: 50px; width: 100%; } @media only screen and (max-width: 749px) { .cart-note__input { margin-bottom: 40px; } } .cart__image { max-height: 95px; } .cart__image-wrapper a { display: block; padding-right: 7.5px; } @media only screen and (min-width: 750px) { .cart__image-wrapper a { padding-right: 15px; } } @media only screen and (min-width: 750px) { .cart__image-wrapper { width: 172px; } .cart__meta { max-width: 134px; } .cart__remove { margin-top: 4px; } /* .cart__qty { text-align: center; } */ } @media only screen and (max-width: 749px) { .cart table { display: block; width: 100%; } .cart thead { display: none; } .cart tr, .cart tbody { width: 100%; } .cart tbody { display: block; } .cart .cart__update-wrapper { display: none; padding-top: 0; padding-bottom: 22px; } .cart__update--show td { padding-bottom: 10px; } .cart__update--show .cart__update-wrapper { display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -webkit-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .cart-flex { display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; } .cart-flex-item { display: block; min-width: 0; -webkit-flex: 1 1 100%; -moz-flex: 1 1 100%; -ms-flex: 1 1 100%; flex: 1 1 100%; } .cart__meta { -webkit-flex: 1 1 0%; -moz-flex: 1 1 0%; -ms-flex: 1 1 0%; flex: 1 1 0%; } .cart__image-wrapper { -webkit-flex: 0 0 85px; -moz-flex: 0 0 85px; -ms-flex: 0 0 85px; flex: 0 0 85px; } .cart__price-wrapper { -webkit-flex: 0 1 24%; -moz-flex: 0 1 24%; -ms-flex: 0 1 24%; flex: 0 1 24%; text-align: right; } .cart__header { position: absolute !important; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; } .cart-message { padding-top: 20px; } .cart__qty { padding: 0 10px; } .cart__qty-label { position: inherit !important; overflow: auto; clip: auto; width: auto; height: auto; margin: 0; display: inline-block; vertical-align: middle; font-size: 0.86667em; margin-right: 5px; } } .cart--no-cookies .cart__continue-btn { display: none; } .cart--no-cookies .cart--empty-message { display: none; } .cookie-message { display: none; padding-bottom: 25px; } .cart--no-cookies .cookie-message { display: block; } .additional-checkout-buttons { margin-top: 22px; } .additional-checkout-buttons input[type="image"] { padding: 0; border: 0; background: transparent; } /*================ MODULES ================*/ /* ============ Header part ============*/ .head_right { text-align: right; padding-right: 55px; } .h_left { text-align: left; padding-left: 55px; } select.currency-picker { border: 0; display: inline; vertical-align: inherit; } .currency-picker__wrapper { display: inline-block; vertical-align: middle; margin: 0; padding: 0 10px; } .currency-picker { background: none; } .sign_in { vertical-align: middle; } .h_email { padding-left: 20px; } .announcement-bar { height: 25px; font-size: 11px; } .head_icon a { color: #ffffff; } .head_icon a:hover { color: #474545; } .head_icon .icon { height: 15px; } .site-header__cart { border: 2px solid; padding: 10px 5px; } @media only screen and (max-width: 749px) { .mobile_header_logo img { display: inline; } .mobile_hide { display: none; } .head_cart { text-align: center; } } #CartCost { vertical-align: middle; /* vertical-align:-webkit-baseline-middle */ } .site-nav__childlist { width: 100%; } .site-nav__dropdown--centered { top: 77px; left: 0; } .site-nav__dropdown { /* width: 100%; */ left: 0; top: 77px; } .site-nav--has-dropdown { position: initial; } .site-nav__dropdown li { display: table-cell; width: 16.666%; } .site-nav__childlist-item ul li { display: block; } .site-nav__childlist-grid { display: table; width: 100%; padding: 10px; } .site-nav--has-dropdown.hover .site-nav__dropdown { display: block; } .count-column { position: relative; -moz-box-flex: 1; display: table-cell; flex: 1 0 16.666%; flex-wrap: wrap; vertical-align: top; padding: 0 25px; } .site-nav--has-dropdown.count_li { position: relative; } .count_li .site-nav__dropdown li { display: block; width: 100%; position: relative; } ul.drop_down_nav { display: none; position: absolute; background: #fff; } .site_nav-has-dropdown:hover ul.drop_down_nav { display: block; left: 100%; top: -4px; padding: 8px 0; } .site-nav__link.site-nav__child-link.site-nav__child-link--parent { font-size: 14px; text-transform: uppercase; border-bottom: 1px solid; padding: 3px 0; } .image_transtion { transform: translate3d(15%, 140px, 0px); color: #fff; } .coll_image > a { display: block; padding: 0; } .collection-link-menu:hover .collection-grid-item__title { top: 40%; transition: all 0.2s ease-in 0s; } .collection-link-menu:hover .text-center.coll_all { bottom: 36%; transition: all 0.3s ease-in 0s; visibility: visible; } .coll_image { display: inline-block; position: relative; } .site-nav__childlist-item.count-column li { display: block; width: 100%; } .count-column .site-nav__link { display: block; padding: 4px 0; text-transform: capitalize; } .site-header__search { display: inline-block; margin: 15px 0; padding: 0 20px; } #MobileNav .search-header.search { border: 1px solid; } .site-nav__childlist { width: 100%; } .site-nav__dropdown--centered { top: 100%; left: 0; } .site-nav__dropdown { /* width: 100%; */ left: 0; top: 100%; } .site-nav--has-dropdown { position: initial; } .site-nav__childlist-item ul li { display: block; } .site-nav__childlist-grid { display: table; width: 100%; padding: 10px; } .site-nav--has-dropdown.hover .site-nav__dropdown { display: block; } .count-column { position: relative; -moz-box-flex: 1; display: table-cell; flex: 1 0 16.666%; flex-wrap: wrap; vertical-align: top; padding: 0 25px; } .site-nav--has-dropdown.count_li { position: relative; } .count_li .site-nav__dropdown li { display: block; } .image_transtion { transform: translate3d(15%, 140px, 0px); color: #fff; } .site-nav__childlist .count-column .site-nav__child-link--parent { margin-top: 0; padding-top: 0; } .coll_image > a { display: block; padding: 0; } .collection-link-menu:hover .collection-grid-item__title { top: 40%; transition: all 0.2s ease-in 0s; } .collection-link-menu:hover .text-center.coll_all { bottom: 36%; transition: all 0.3s ease-in 0s; visibility: visible; } .coll_image { display: inline-block; position: relative; } .site-nav__link.site-nav__child-link.site-nav__child-link--parent { border-bottom: 1px solid; padding: 3px 0; } .site-nav__childlist-item.count-column li { display: block; width: 100%; } .count-column .site-nav__link { display: block; padding: 4px 0; text-transform: capitalize; } .site-header__search { display: inline-block; margin-top: 15px; padding: 0 20px; } #MobileNav .search-header.search { border: 1px solid; } .site-header { background-color: #080808; position: relative; padding: 0 55px; /* z-index:100; */ } @media only screen and (max-width: 749px) { .site-header { /* border-bottom: 1px solid $color-border; */ padding: 10px; } } textarea:focus, input:focus, button:focus, select:focus { outline: none; } .site-nav__link--main { color: #f8f2f2; } .currency-picker { color: #f8f2f2; -webkit-appearance: none; box-shadow: none; } .sign_inmobile { display: inline-block; } .mobile_currency .currency-picker { color: #3d4246; width: 64px; } .mobile_currency .icon.icon-chevron-down { position: relative; /* left: -20px; */ left: 1px; top: auto; margin: 0 auto; cursor: pointer; } .currency-picker__wrapper.mobile_currency { border-left: 1px solid #ebebeb; /* padding-left:30px; */ padding-left: 16px; } @media only screen and (max-width: 1024px) { .currency-picker__wrapper.mobile_currency { position: relative; } } .announcement_mobile { border-bottom: 1px solid #ebebeb; font-size: 10px; padding: 5px 0; text-align: center; background-color: #f042a8; color: #ffffff; } .announcement_mobile:hover { color: #474545; } .announcement_mobile .h_msg_text { letter-spacing: 1px; } .phone_icon, .email_icon { border-left: 1px solid #ebebeb; margin-top: 15px; margin-bottom: 15px; padding: 1px 20px; } .phone_icon .fas.fa-phone { font-size: 15px; transform: rotate(100deg); } .email_icon .fas.fa-envelope { font-size: 17px; } .phone_icon, .email_icon { display: inline-block; } .currency-picker > option { padding-left: 0; } .site-header__account, .site-header__search-toggle { color: #f8f2f2; } .site-header__cart, .site-header__menu { color: #f8f2f2; } .site-header { color: #f8f2f2; } /* .search-header__submit.search__submit.btn--link { color: $color-header-text; } */ .announcement-bar { text-align: center; position: relative; z-index: 10; color: #ffffff; } .announcement-bar .h_msg_text:hover, .announcement-bar .h_number:hover, .announcement-bar .h_email:hover { color: #474545; } .announcement-bar--link { display: block; } .announcement-bar__message { display: block; font-size: 1.06667em; font-weight: 400; padding: 10px 22px; } @media only screen and (min-width: 750px) { .announcement-bar__message { padding: 10px 55px; } } .site-header__logo { margin: 15px 0; } .logo-align--center .site-header__logo { text-align: center; margin: 0 auto; } @media only screen and (max-width: 749px) { .logo-align--center .site-header__logo { text-align: center; margin: 15px 0; } } .logo-align--left .site-header__logo { margin: 0 auto; } @media only screen and (max-width: 749px) { .logo-align--left .site-header__logo { margin: 15px 0; } } .site-header__logo-link { display: inline-block; word-break: break-word; vertical-align: middle; } .site-header__logo-image { display: block; } @media only screen and (min-width: 750px) { .site-header__logo-image { margin: 0 auto; } } .site-header__logo-image img { width: 100%; } .site-header__logo-image--centered img { margin: 0 auto; } @media only screen and (min-width: 750px) { .logo-align--center .site-header__logo-link { margin: 0 auto; } } @media only screen and (max-width: 749px) { .site-header__icons .btn--link { font-size: 1em; } .site-header__cart { font-size: 1.3em; } } .site-header__icons { position: relative; white-space: nowrap; } .site-header__icons-wrapper { position: relative; } .site-header__cart, .site-header__search, .site-header__account { position: relative; } .site-header__search { display: inline-block; width: 100%; } .currency-picker { padding: 0; } @media only screen and (min-width: 750px) { .site-header__cart, .site-header__account { display: inline-block; } } .site-header__cart-title, .site-header__search-title { display: inline-block; vertical-align: middle; position: absolute !important; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; } .site-header__cart-title { margin-right: 3px; } .site-header__cart-count { display: block; position: absolute; top: -1px; font-weight: bold; background-color: #f042a8; color: #ffffff; border-radius: 9px; min-width: 16px; height: 16px; } .site-header__cart-count span { font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; display: block; padding: 2px 5px; font-size: 11px; line-height: 1; } @media only screen and (min-width: 750px) { .logo--center .site-header__cart-count { right: -2px; } .logo--left .site-header__cart-count { left: 12px; top: 4px; } } @media only screen and (max-width: 749px) { .site-header__cart-count { top: -3px; left: 16px; border-radius: 11px; width: 20px; height: 20px; } .site-header__cart-count span { padding: 0; line-height: 20px; font-size: 11px; letter-spacing: 1px; } } .site-header__menu { display: none; } .site-header .icon-search, .site-header .icon-hamburger, .site-header .icon-close, .site-header .icon-cart { height: 30px; } @media only screen and (min-width: 750px) { .site-header .icon-search, .site-header .icon-hamburger, .site-header .icon-close, .site-header .icon-cart { margin-right: 3px; } } @media only screen and (min-width: 1025px) { .site-header .icon-search, .site-header .icon-hamburger, .site-header .icon-close, .site-header .icon-cart { height: 16px; } } @media only screen and (min-width: 750px) { .grid__item.logo_part { padding-top: 23px; padding-bottom: 23px; } } @media only screen and (min-width: 800px) and (max-width: 1200px) { /* .site-header{ padding:0 15px; } */ .site-nav__childlist-grid .count-column { padding: 0 10px; } .count-column .collection-grid-item__title { font-size: 14px; } .site-header, .currency-picker { font-size: 13px; } } @media only screen and (min-width: 1200px) { .currency-picker { line-height: 2.2; } } @media only screen and (min-width: 901px) and (max-width: 1100px) { .count-column .coll_all .btn_all { font-size: 12px; padding: 5px; } #CartCost { font-size: 14px; } } @media only screen and (min-width: 800px) and (max-width: 900px) { .count-column .coll_all { display: none; } .collection-grid-item__title { font-size: 15px; } } @media only screen and (min-width: 1025px) { .mobile-nav-wrapper, .grid .left_menu { display: none; } .currency-picker__wrapper .icon-chevron-down { width: 8px; height: 8px; cursor: pointer; } } @media only screen and (min-width: 1025px) and (max-width: 1190px) { .site-header__logo .logo_text { letter-spacing: 1px; font-size: 14px; } .announcement-bar .h_msg_text { letter-spacing: 1px; } } @media only screen and (min-width: 1025px) { .grid__item.logo_part.shop_name_withicon { padding-left: 5px; } } @media only screen and (max-width: 1024px) { .site-header__menu, .site-header__search-toggle, .site-header__cart, .site-header__account { display: inline-block; } #AccessibleNav { display: none; } .currency-picker__wrapper.small--hide, .site-header__account.small--hide, .site-header__search-toggle { display: none; } .logo_part { width: 60%; } .site-header__logo.small--hide { margin: 0; } .collection-grid-item__title { font-size: 15px; } .logo-align--left.logo_part .site-header__logo { text-align: center; } .desktop_header_logo.site-header__logo-image img { margin: 0 auto; } .head_cart .head-crt-icon { font-size: 16px; } .logo-align--center .site-header__logo { margin: 0; line-height: 1; } .left_part .site-header__menu { padding: 0 8px; } .site-header { padding: 10px; } } .count-column .collection-grid-item__title { font-size: 18px; } .count-column .collection-link-menu:hover .text-center.coll_all { bottom: 32%; } @media only screen and (max-width: 749px) { /* .site-header__logo { padding-left: $gutter-site-mobile; } */ /* .site-header__icons { padding-right: $gutter-site-mobile; } */ .site-header__menu, .site-header__search-toggle, .site-header__cart, .site-header__account { display: inline-block; vertical-align: middle; padding: 18px 8px; margin: 0; } .site-header__icons--plus .site-header__menu, .site-header__icons--plus .site-header__search-toggle, .site-header__icons--plus .site-header__cart, .site-header__icons--plus .site-header__account { padding: 18px 6px; } .site-header__logo img { margin: 0 auto; } } .article--listing { padding-top: 55px; margin-bottom: 55px; } .article__title { margin-bottom: 11px; letter-spacing: normal; } .article__author { margin-right: 10px; } .article__author, .article__date { display: inline-block; margin-bottom: 22px; } .template-article .article__author, .template-article .article__date { margin-bottom: 0; } .article__tags { margin-bottom: 15px; } .article__tags--list { font-style: italic; } /*============================================================================ Blog article grid ==============================================================================*/ .grid--blog { margin-bottom: -30px; overflow: auto; } .article__grid-tag { margin-right: 10px; } .article__grid-meta { margin-bottom: 30px; } .blog_grid, .blog_details { padding-top: 50px; } .blog_details .article__title { margin: 20px 0; } @media only screen and (max-width: 749px) { .article__grid-meta--has-image { float: left; padding-left: 22px; } } .article__grid-excerpt { margin-bottom: 7.5px; } .article__grid-image-wrapper { margin: 0 auto; width: 100%; } .article__grid-image-container { display: block; clear: both; position: relative; margin: 0 auto 15px 0; min-height: 1px; width: 100%; height: 100%; } @media only screen and (max-width: 749px) { .article__grid-image-container { float: left; margin: 0 0 30px 0; } } .article__grid-image-container img { display: block; } .article__grid-image { margin: 0 auto; width: 100%; } .js .article__grid-image { position: absolute; top: 0; } .article__list-image-container { display: block; clear: both; position: relative; min-height: 1px; width: 100%; height: 100%; } .article__list-image-wrapper { width: 100%; margin-bottom: 20px; } .article__list-image-container { display: block; clear: both; position: relative; min-height: 1px; width: 100%; height: 100%; } .article__list-image-wrapper { width: 100%; margin-bottom: 20px; } .article__list-image { margin: 0 auto; width: 100%; position: absolute; top: 0; } .sidebar { margin-top: 40px; } .sidebar__list { list-style: none; margin-bottom: 55px; } .sidebar__list li { margin-bottom: 10px; } .pagination { text-align: left; list-style: none; font-size: 1em; padding-top: 30px; } .pagination li { display: inline-block; } .pagination .icon { display: block; height: 20px; vertical-align: middle; } .pagination__text { padding: 0 27.5px; } .comment { margin-bottom: 30px; } .comment:last-child { margin-bottom: 0; } .comment__content { margin-bottom: 5px; } .comment__meta-item { margin-right: 10px; font-size: 0.93333em; } .comment__meta-item:first-child::before { content: '\2014 \0020'; } .btn--share { margin-right: 5px; margin-bottom: 10px; } .btn--share .icon { vertical-align: middle; width: 20px; height: 20px; margin-right: 4px; } .btn--share .icon-facebook { fill: #3b5998; } .btn--share .icon-twitter { fill: #00aced; } .btn--share .icon-pinterest { fill: #cb2027; } .share-title { display: inline-block; vertical-align: middle; } .blog_details .social-sharing { text-align: center; } .blog_details .social-sharing .title { font-size: 18px; padding-right: 20px; vertical-align: middle; } .comment_article { background: #f7f7f7 none repeat scroll 0 0; padding: 40px 0 20px; margin: 30px 0; } #comment_form input { margin-bottom: 20px; } #comment_form .comment_submit { margin: 0; } .submit_comment { margin-top: 20px; } .submit_comment > span { padding-right: 20px; } .comment_article .comment { background: #ffffff none repeat scroll 0 0; margin-bottom: 30px; padding: 15px; } .search-bar__form { display: table; width: 100%; position: relative; height: 40px; border: 1px solid transparent; } @media only screen and (max-width: 749px) { .search-bar__form { width: 100%; } } .search-bar__submit .icon { position: relative; top: -1px; height: 30px; } .search-bar__submit, .search-header__submit { display: inline-block; vertical-align: middle; position: absolute; left: 0; top: -2px; padding: 0 0 0 5px; height: 100%; z-index: 1; } .search-header__input, .search-bar__input { background-color: transparent; border-radius: 2px; color: #3d4246; border-color: transparent; padding-left: 35px; width: 100%; } .search-header__input::-webkit-input-placeholder, .search-bar__input::-webkit-input-placeholder { color: #3d4246; opacity: 0.6; } .search-header__input::-moz-placeholder, .search-bar__input::-moz-placeholder { color: #3d4246; opacity: 0.6; } .search-header__input:-ms-input-placeholder, .search-bar__input:-ms-input-placeholder { color: #3d4246; opacity: 0; } .search-header__input::-ms-input-placeholder, .search-bar__input::-ms-input-placeholder { color: #3d4246; opacity: 1; } .search-bar__input { border: 1px solid transparent; } .search-bar__input:focus { border-color: transparent; } /*============================================================================ The search submit button has pointer-events: none which also effects the :hover style. This forces the style to be applied. ==============================================================================*/ .search-header__input:hover + .btn--link { opacity: 0.9; } /*================ Mobile Search Bar ================*/ .search-bar { border-bottom: 1px solid #ebebeb; padding: 0 27.5px; } .search-bar__table { display: table; table-layout: fixed; width: 100%; height: 100%; } .search-bar__table-cell { display: table-cell; vertical-align: middle; } .search-bar__form-wrapper { width: 90%; } /*================ Header Search ================*/ .search-header { display: inline-block; position: relative; width: 100%; vertical-align: middle; } .search-header.search--focus { max-width: 250px; } /* .search-header__input { cursor: pointer; } */ .search--focus .search-header__input { outline: none; border-color: #ebebeb; cursor: auto; } .search--focus .search-header__submit { padding-left: 10px; pointer-events: auto; } .search-header__submit { pointer-events: none; } .search-header, .search-header__submit { transition: all 0.35s cubic-bezier(0.29, 0.63, 0.44, 1); } .no-svg .site-header__search { display: inline-block; } .no-svg .search-header { max-width: none; } .no-svg .search__input { width: auto; padding-left: 60px; } /*================ Mobile Site Nav ================*/ .mobile-nav { display: block; -ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); transition: all 0.45s cubic-bezier(0.29, 0.63, 0.44, 1); } .sub-nav--is-open .mobile-nav { -ms-transform: translate3d(-100%, 0, 0); -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .third-nav--is-open .mobile-nav { -ms-transform: translate3d(-200%, 0, 0); -webkit-transform: translate3d(-200%, 0, 0); transform: translate3d(-200%, 0, 0); } .mobile-nav__link, .mobile-nav__sublist-link { display: block; width: 100%; padding: 15px 30px; font-size: 15px; text-transform: uppercase; } .mobile-nav__link { position: relative; } .mobile-nav__sublist-link:not(.mobile-nav__sublist-header) { padding-left: 70px; padding-right: 30px; } .mobile-nav__item { display: block; width: 100%; } .mobile-nav__item .icon { position: absolute; top: 50%; left: 50%; height: 12px; width: 10px; margin: -6px 0 0 -5px; } .mobile-nav__return { border-right: 1px solid #ebebeb; } .mobile-nav__return-btn { position: relative; padding: 24px 0; width: 55px; } .mobile-nav__icon { position: absolute; right: 0; top: 0; bottom: 0; padding-left: 22px; padding-right: 22px; pointer-events: none; overflow: hidden; } .mobile-nav__table { display: table; width: 100%; } .mobile-nav__table-cell { display: table-cell; vertical-align: middle; width: 1%; text-align: left; white-space: normal; } .mobile-nav__toggle-button { padding: 20px 15px; } .mobile-nav__dropdown { position: absolute; background-color: #ffffff; z-index: 8; width: 100%; top: 0; right: -100%; display: none; } .is-active + .mobile-nav__dropdown { display: block; opacity: 1; } .mobile-nav__dropdown.is-closing { transition: all 0.45s cubic-bezier(0.29, 0.63, 0.44, 1); opacity: 0.99; } .mobile-nav__dropdown .mobile-nav__sublist-header { font-family: "Ubuntu", "HelveticaNeue", "Helvetica Neue", sans-serif; font-weight: 400; display: table-cell; vertical-align: middle; padding-left: 15px; } /*================ Mobile nav wrapper ================*/ .icon.icon-hamburger { width: 30px; } .mobile-nav-wrapper { -ms-transform: translateY(-100%); -webkit-transform: translateY(-100%); transform: translateY(-100%); position: absolute; top: 0; background-color: #ffffff; transition: all 0.45s cubic-bezier(0.29, 0.63, 0.44, 1); display: none; overflow: hidden; width: 100%; /* &::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; border-bottom: 1px solid $color-border; } */ } .mobile-nav-wrapper.js-menu--is-open { display: block; } .mobile-nav--open .icon-close { display: none; } .mobile-nav--close .icon-hamburger { display: none; } /*================ Modals ================*/ #LoginModal.modal { -ms-transform: translateY(-20px); -webkit-transform: translateY(-20px); transform: translateY(-20px); background-color: #ffffff; bottom: 0; color: #3d4246; display: none; left: 0; opacity: 0; overflow: hidden; position: fixed; right: 0; top: 0; } #LoginModal.modal--is-active { -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); display: block; opacity: 1; overflow: hidden; } .modal__inner { -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; height: 100%; } .modal__centered { -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); position: relative; top: 50%; } .no-csstransforms .modal__centered { top: 20%; } .modal__close { border: 0; padding: 55px; position: fixed; top: 0; right: 0; } .modal__close .icon { font-size: 1.33333em; } /*============================================================================ Hero slider Extends default slick slider styles. Extra specificity in selectors is used to override defaults. ==============================================================================*/ .slideshow-wrapper { position: relative; } .slideshow { overflow: hidden; /* height: $slideshow-height-small - 150; */ margin-bottom: 0; } .slideshow.slideshow--small { height: 325px; } .slideshow.slideshow--medium { height: 500px; } .slideshow.slideshow--large { height: 575px; } @media only screen and (min-width: 750px) and (max-width: 989px) { .slideshow { height: 546px; } .slideshow.slideshow--small { height: 475px; } .slideshow.slideshow--medium { height: 650px; } .slideshow.slideshow--large { height: 775px; } } @media only screen and (min-width: 990px) { .slideshow { height: 650px; } .slideshow.slideshow--small { height: 475px; } .slideshow.slideshow--medium { height: 650px; } .slideshow.slideshow--large { height: 775px; } } .slideshow .slideshow__slide, .slideshow .slick-list, .slideshow .slick-track { height: 100%; } .slideshow .slick-prev, .slideshow .slick-next { top: 0; height: 100%; margin-top: 0; width: 40px; } .slideshow .slick-prev { left: 0; } .slideshow .slick-next { right: 0; } .slideshow .slick-dots { bottom: 22px; text-align: center; left: 50%; transform: translateX(-50%); } .slideshow .slick-dots li button::before { color: #fff; } .video-is-playing .slick-dots { display: none !important; } .slideshow__pause:focus { clip: auto; width: auto; height: auto; margin: 0; color: #ffffff; background-color: #f042a8; padding: 27.5px; z-index: 10000; transition: none; } .video-is-playing .slideshow__pause:focus { display: none; } .slideshow__pause-stop { display: block; } .is-paused .slideshow__pause-stop { display: none; } .slideshow__pause-play { display: none; } .is-paused .slideshow__pause-play { display: block; } /*================ General slide styles ================*/ .slideshow__slide { position: relative; overflow: hidden; } .slideshow__link { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .slideshow__link:active, .slideshow__link:focus { opacity: 1; } .slideshow__overlay::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #5c5c5c; opacity: 0.25; /* z-index: $z-index; */ } /*================ Slide images ================*/ .slideshow__image { transition: opacity 0.8s cubic-bezier(0.44, 0.13, 0.48, 0.87); position: absolute; top: 0; left: 0; opacity: 0; height: 100%; width: 100%; background-repeat: no-repeat; background-size: cover; background-position: top center; z-index: 1; } .slick-initialized .slideshow__image, .no-js .slideshow__image { opacity: 1; } .slideshow__slide--background-video .slideshow__image { opacity: 0; } .no-autoplay .slideshow__image { opacity: 1; } .ie9 .slideshow__slide { z-index: 1 !important; } .ie9 .slick-dots { z-index: 2; } /*================ Slide text ================*/ .slideshow__text-wrap { height: 100%; } .slideshow__link .slideshow__text-wrap { cursor: inherit; } .slideshow__slide--has-background-video .slideshow__text-wrap { padding-top: 165px; } .video-is-playing .slideshow__text-wrap { display: none; } .slideshow__slide.video-is-paused .slideshow__text-wrap { display: none; } .slideshow__text-content { text-align: center; position: absolute; width: 100%; top: 50%; -ms-transform: translateY(-40%); -webkit-transform: translateY(-40%); transform: translateY(-40%); opacity: 0; transition: all 0.6s cubic-bezier(0.44, 0.13, 0.48, 0.87); transition-delay: 0.3s; z-index: 3; } .slick-active .slideshow__text-content, .no-js .slideshow__text-content { -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); opacity: 1; } .slideshow__text-content::after { content: ''; content: ''; display: block; width: 40px; height: 40px; position: absolute; margin-left: -20px; margin-top: -20px; border-radius: 50%; border: 3px solid #fff; border-top-color: transparent; -moz-animation: spin 0.65s infinite linear; -o-animation: spin 0.65s infinite linear; -webkit-animation: spin 0.65s infinite linear; animation: spin 0.65s infinite linear; opacity: 1; transition: all 1s cubic-bezier(0.29, 0.63, 0.44, 1); bottom: -55px; left: 50%; } .slick-initialized .slideshow__text-content::after, .no-js .slideshow__text-content::after { opacity: 0; visibility: hidden; content: none; } .slideshow__title { color: #ffffff; } .slideshow__subtitle { display: block; color: #ffffff; } /*================ Video styles ================*/ .slideshow__slide--has-background-video::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; } .slideshow__video { display: none; position: absolute; left: 0; top: 0; z-index: 2; } .slideshow__video--background { position: relative; visibility: hidden; opacity: 0; transition: all 0.2s ease-in; } .autoplay .slideshow__video--background.video-is-loaded { display: block; visibility: visible; opacity: 1; } .slideshow__slide--background-video::after { content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; } .slideshow__video--chrome { display: none; opacity: 0; visibility: none; width: 100%; height: 100%; transition: all 0.2s ease-in; } .ie9 .slideshow__video--chrome { display: block; } .slideshow__slide.video-is-playing .slideshow__video--chrome, .slideshow__slide.video-is-paused .slideshow__video--chrome { display: block; visibility: visible; opacity: 1; } /*================ Video control buttons ================*/ .slideshow__video-control { display: none; visibility: hidden; opacity: 0; position: absolute; padding: 5px; z-index: 4; transition: all 0.1s ease-out; } .slideshow__video-control:hover, .slideshow__video-control:focus { opacity: 0.7; } .video-loader { content: ''; display: block; width: 40px; height: 40px; position: absolute; margin-left: -20px; margin-top: -20px; border-radius: 50%; border: 3px solid #fff; border-top-color: transparent; -moz-animation: spin 0.65s infinite linear; -o-animation: spin 0.65s infinite linear; -webkit-animation: spin 0.65s infinite linear; animation: spin 0.65s infinite linear; transition: all 0.1s ease-out 0.5s; z-index: 4; top: 50%; left: 50%; } .ie9 .video-loader, .video-is-loaded .video-loader, .video-is-playing .video-loader, .video-is-paused .video-loader, .autoplay .video-loader, .no-autoplay .video-loader { content: none; display: none; } .video-is-loading .video-loader, .autoplay .video-is-loading .video-loader, .no-autoplay .video-is-loading .video-loader { display: block; visibility: visible; opacity: 1; } .slideshow__video-control--play-wrapper { height: 30px; } @media only screen and (min-width: 750px) { .slideshow__video-control--play-wrapper { height: 45px; } } @media only screen and (min-width: 750px) { .slideshow__video-control--play-wrapper--push { margin-top: 30px; } } .slideshow__video-control--play { opacity: 0; color: #ffffff; position: relative; margin: 0 auto; } .slideshow__video-control--play .slideshow__video--background { top: 50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); } .video-is-loaded .slideshow__video-control--play { display: block; visibility: visible; opacity: 1; } .video-is-loading .slideshow__video-control--play, .video-is-playing .slideshow__video-control--play, .slideshow__slide.video-is-paused .slideshow__video-control--play { display: none; visibility: hidden; opacity: 0; } .slideshow__video-control--play .icon { width: 42px; height: 100%; } @media only screen and (min-width: 750px) { .slideshow__video-control--play .icon { width: 65px; } } .slideshow__video-control--close { top: 10px; right: 10px; background-color: #fff; color: #000; } .video-is-playing .slideshow__video-control--close, .slideshow__slide.video-is-paused .slideshow__video-control--close { display: block; visibility: visible; opacity: 1; } .slideshow__video-control--close .icon { display: block; width: 20px; height: 20px; } .product-price__price { /* font-weight: $font-weight-header; */ } .grid-view-item.product-price--sold-out .product-price__price { /* text-decoration: line-through; */ } .product-price__sale--single { padding-left: 10px; } .product-price__sale, .product__price--sale { color: #f042a8; } .product-price__sale-label { display: inline-block; white-space: nowrap; font-size: 0.93333em; } .product-price__sold-out { font-weight: 400; white-space: nowrap; } /*================ Module | Filters and Sort toolbar and selection ================*/ .filters-toolbar-wrapper { border-bottom: 1px solid #ebebeb; border-top: 1px solid #ebebeb; margin-bottom: 22px; } @media only screen and (min-width: 750px) { .filters-toolbar-wrapper { margin-bottom: 30px; } } .filters-toolbar { display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; } .filters-toolbar__item { min-width: 33%; -webkit-flex: 1 1 33%; -moz-flex: 1 1 33%; -ms-flex: 1 1 33%; flex: 1 1 33%; } .no-flexbox .filters-toolbar__item { text-align: left !important; } .filters-toolbar__item--count { min-width: 0; -webkit-flex: 0 1 auto; -moz-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; text-align: center; } .no-flexbox .filters-toolbar select { width: 100% !important; } .filters-toolbar__input { -ms-transition: all ease-out 0.15s; -webkit-transition: all ease-out 0.15s; transition: all ease-out 0.15s; background-color: #ffffff; border: 0 solid transparent; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; height: 55px; opacity: 1; } @media only screen and (max-width: 749px) { .filters-toolbar__input { height: 46px; } } .filters-toolbar__input.hidden { opacity: 0; } .filters-toolbar__input option { text-overflow: ellipsis; overflow: hidden; } .filters-toolbar__input--sort { margin-right: -10px; } .no-flexbox .filters-toolbar__input--sort { margin: 0; } .filters-toolbar__input--filter { margin-left: -15px; } .no-flexbox .filters-toolbar__input--filter { margin: 0; } .filters-toolbar__product-count { font-size: 0.93333em; font-style: italic; line-height: 55px; margin-bottom: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media only screen and (max-width: 749px) { .filters-toolbar__product-count { font-size: 0.86667em; line-height: 46px; } } .site-footer { margin: 30px 0 20px; border-top: 1px solid; } @media only screen and (max-width: 749px) { .site-footer { text-align: center; } } @media only screen and (min-width: 750px) { .site-footer__linklist--center { margin-top: 15px; padding-right: 0; } } .site-footer__linklist, .site-footer__newsletter { margin-top: 15px; } @media only screen and (min-width: 750px) { .site-footer__linklist, .site-footer__newsletter { margin-top: 30px; } } .site-footer__linklist-item { display: inline-block; padding: 5px 10px; } @media only screen and (min-width: 750px) { .site-footer__linklist-item { display: block; padding: 0 20px 6px 0; } .site-footer__linklist--center .site-footer__linklist-item { display: inline-block; padding: 3px 10px; } } .site-footer__newsletter { margin: 15px auto 0; max-width: 320px; } @media only screen and (min-width: 750px) { .site-footer__newsletter { margin: 30px 0 0; max-width: none; } } .site-footer__social-icons, .site-footer__copyright { margin-top: 15px; } @media only screen and (min-width: 750px) { .site-footer__social-icons, .site-footer__copyright { margin-top: 15px; } } .social-icons__link { display: block; padding: 0 3px; } .social-icons__link:first-child { margin-left: 0; } .site-footer__copyright { text-align: center; } .site-footer__copyright-content { font-size: 0.8em; padding-right: 20px; } .site-footer__copyright--right .site-footer__copyright-content { padding: 0 0 0 20px; } .site-footer__copyright--right .site-footer__copyright-content:first-child { padding-left: 0; } @media only screen and (min-width: 750px) { .site-footer__copyright--right .site-footer__copyright-content { padding: 0 0 0 30px; } } .site-footer__copyright-content--powered-by { padding-right: 0; } .site-footer__payment-icons { margin-top: 22px; } @media only screen and (min-width: 750px) { .site-footer__payment-icons { margin-top: 22px; } .site-footer__copyright--right .site-footer__payment-icons { padding-left: 30px; } } .site-footer__payment-icons .payment-icon { margin-right: 5px; } .site-footer__payment-icons .payment-icon:last-child { margin-right: 0; } .site-footer__copyright--bottom { margin-top: 15px; } @media only screen and (min-width: 750px) { .site-footer__payment-icons--right { float: right; margin-top: 0; } } .feature-row { display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; -webkit-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; } @media only screen and (max-width: 749px) { .feature-row { -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; /* display: block; */ } } .feature-row__item { -webkit-flex: 0 1 50%; -moz-flex: 0 1 50%; -ms-flex: 0 1 50%; flex: 0 1 50%; } @media only screen and (max-width: 749px) { .feature-row__item { -webkit-flex: 1 1 auto; -moz-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; max-width: 100%; width: 100%; } } .feature-row__image-wrapper { /* margin: 0 auto $section-spacing-small / 1.8; */ position: relative; width: 100%; margin: 0 auto; } @media only screen and (max-width: 749px) { .feature-row__image-wrapper .medium-up--hide { padding-top: 0 !important; } } @media only screen and (min-width: 750px) { .feature-row__image-wrapper .small--hide { padding-top: 0 !important; } } .feature-row__image { display: block; margin: 0 auto; } .feature-row__image-wrapper .feature-row__image { width: 100%; position: absolute; top: 0; } @media only screen and (max-width: 749px) { .feature-row__image { order: 1; } } .feature-row__text { padding-top: 15px; padding-bottom: 15px; } @media only screen and (max-width: 749px) { .feature-row__text { order: 2; padding-left: 15px; padding-right: 15px; } } @media only screen and (min-width: 750px) { .feature-row__text--left { padding-left: 15px; padding-right: 15px; } .feature-row__text--center { padding-left: 15px; padding-right: 15px; } .feature-row__text--right { padding-left: 15px; padding-right: 15px; } } @media only screen and (min-width: 750px) { .featured-row__subtext { font-size: 0.86667em; } } .hero { position: relative; height: 475px; display: table; width: 100%; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; } .hero--x-small { height: 94px; } .hero--small { height: 225px; } .hero--medium { height: 357px; } .hero--large { height: 488px; } .hero--x-large { height: 582px; } @media only screen and (min-width: 750px) { .hero--x-small { height: 125px; } .hero--small { height: 300px; } .hero--medium { height: 475px; } .hero--large { height: 650px; } .hero--x-large { height: 775px; } } .hero__overlay::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #5c5c5c; opacity: 0.25; /* z-index: $z-index; */ } .hero__inner { position: relative; display: table-cell; vertical-align: middle; padding: 30px 0; color: #ffffff; z-index: 2; } .hero__btn { background-color: #fff; color: #3d4246; margin-top: 15px; } .custom-content { color: #000000; } .custom-content p { color: #000000; } /*================ Quote slider ================*/ .quote-icon { display: block; margin: 0 auto 10px; } .quotes-slider__text { font-size: 1.11667em; font-weight: 400; font-style: normal; padding: 0 15px; } .quotes-slider__text cite { font-size: 0.78947em; font-style: normal; } .quotes-slider__text p { margin-bottom: 15px; } .quotes-slider__text p + cite { margin-top: 0; } span.quote-icon img, .svgnoimg { border-radius: 100%; height: 85px; width: 85px; margin: 0 auto 10px; object-fit: cover; } .svgnoimg svg { border-radius: 100%; } .slick-dotted.quotes-slider.slick-initialized { cursor: grab; cursor: -moz-grab; cursor: -webkit-grab; } .quotes-wrapper .slick-dots { position: relative; bottom: 0; margin-top: 30px; } .quotes-wrapper .slick-dots li button::before { color: #3d4246; opacity: 0.2; } .quotes-wrapper .slick-slide[tabindex="0"] { outline: none; } .logo-bar { text-align: center; margin-bottom: -15px; } @media only screen and (min-width: 750px) { .logo-bar--large { margin-bottom: -30px; } } .logo-bar__item { display: inline-block; vertical-align: middle; max-width: 160px; margin: 0 10px 15px; } @media only screen and (min-width: 750px) { .logo-bar__item--large { margin-bottom: 30px; } } .logo-bar__image { display: block; margin: 0 auto; } .logo-bar__link { display: block; } .map-section { position: relative; width: 100%; overflow: hidden; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } @media only screen and (min-width: 750px) { .map-section { min-height: 500px; } } .map-section--load-error { height: auto; } .map-section__wrapper { height: 100%; flex-shrink: 0; flex-grow: 1; -ms-flex-preferred-size: 100%; -webkit-flex-basis: 100%; -moz-flex-basis: 100%; flex-basis: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .map-section__overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; z-index: 2; } .map-section__error { position: relative; z-index: 3; } @media only screen and (min-width: 750px) { .map-section__error { position: absolute; margin: 0 2rem; top: 50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); } } .map-section__content-wrapper { position: relative; text-align: center; height: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; -ms-flex-preferred-size: 100%; -webkit-flex-basis: 100%; -moz-flex-basis: 100%; flex-basis: 100%; flex-grow: 0; } @media only screen and (min-width: 750px) and (max-width: 989px) { .map-section__content-wrapper { -ms-flex-preferred-size: 50%; -webkit-flex-basis: 50%; -moz-flex-basis: 50%; flex-basis: 50%; } } @media only screen and (min-width: 990px) { .map-section__content-wrapper { -ms-flex-preferred-size: 33%; -webkit-flex-basis: 33%; -moz-flex-basis: 33%; flex-basis: 33%; } } .map-section__content { position: relative; display: inline-block; background-color: rgba(0, 0, 0, 0.05); padding: 15px; width: 100%; text-align: center; z-index: 3; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-content: center; -ms-align-content: center; align-content: center; } .map-section__content > * { width: 100%; } .map-section__content img { padding-bottom: 16px; margin: 0 auto; } @media only screen and (min-width: 750px) { .map-section__content { background-color: #ffffff; margin: 55px 0; min-height: 280px; } .ie9 .map-section__content { top: 10%; } } .map-section--load-error .map-section__content { position: static; transform: translateY(0); } .map-section__link { display: block; position: absolute; top: 0; left: 50%; max-width: none; width: 100%; height: 100%; z-index: 2; -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); } .map-section__container { max-width: none; width: 100%; height: 55vh; left: 0; } @media only screen and (min-width: 750px) { .map-section__container { position: absolute; height: 100%; top: 0; width: 130%; } } .map_section__directions-btn [class^="icon"] { height: 1em; } .map_section__directions-btn * { vertical-align: middle; } .map-section__background-wrapper { overflow: hidden; position: relative; -ms-flex-preferred-size: 100%; -webkit-flex-basis: 100%; -moz-flex-basis: 100%; flex-basis: 100%; } @media only screen and (min-width: 750px) { .map-section__background-wrapper { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } } .ie9 .map-section__background-wrapper { width: 100%; height: 500px; } .map-section--onboarding .map-section__background-wrapper { min-height: 55vh; } .map-section__image { height: 100%; position: relative; top: 0; left: 0; width: 100%; background-size: cover; background-position: center; } @media only screen and (min-width: 750px) { .map-section__image { position: absolute; } } .map-section--display-map .map-section__image { display: none !important; } .map-section--load-error .map-section__image { display: block !important; } .gm-style-cc, .gm-style-cc + div { visibility: hidden; } .image-bar { overflow: hidden; } @media only screen and (max-width: 749px) { .image-bar { max-width: 400px; margin: 0 auto; } } .image-bar__item { display: block; color: #ffffff; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; } .image-bar__link:focus .image-bar__content { border-color: #5c5c5c; } .image-bar__content, .image-bar__item { position: relative; width: 100%; } .image-bar--x-small .image-bar__content, .image-bar--x-small .image-bar__item { height: 94px; } .image-bar--small .image-bar__content, .image-bar--small .image-bar__item { height: 225px; } .image-bar--medium .image-bar__content, .image-bar--medium .image-bar__item { height: 357px; } .image-bar--large .image-bar__content, .image-bar--large .image-bar__item { height: 488px; } .image-bar--x-large .image-bar__content, .image-bar--x-large .image-bar__item { height: 582px; } @media only screen and (min-width: 750px) { .image-bar--x-small .image-bar__content, .image-bar--x-small .image-bar__item { height: 125px; } .image-bar--small .image-bar__content, .image-bar--small .image-bar__item { height: 300px; } .image-bar--medium .image-bar__content, .image-bar--medium .image-bar__item { height: 475px; } .image-bar--large .image-bar__content, .image-bar--large .image-bar__item { height: 650px; } .image-bar--x-large .image-bar__content, .image-bar--x-large .image-bar__item { height: 775px; } } .image-bar__overlay::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #5c5c5c; opacity: 0.25; } .image-bar__caption { position: absolute; top: 50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); transition: 0.1s cubic-bezier(0.44, 0.13, 0.48, 0.87); width: 100%; text-align: center; } .collection-grid { /* margin-bottom: -$gutter-site-mobile; */ overflow: auto; } .collection-grid-item { position: relative; width: 100%; padding-bottom: 100%; margin-bottom: 22px; } @media only screen and (min-width: 750px) { .collection-grid-item { margin-bottom: 30px; } } .collection-grid-item__title { color: #ffffff; position: absolute; text-align: center; width: 100%; top: 50%; padding: 0 5px; text-transform: uppercase; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); transition: 0.1s cubic-bezier(0.44, 0.13, 0.48, 0.87); text-shadow: 0 0 15px rgba(0, 0, 0, 0.1); font-size: 20px; } @media only screen and (min-width: 750px) { .collection-grid-item__title { padding: 0 15px; } } .four_image .collection-grid-item__title { font-size: 18px; } .five_image .collection-grid-item__title { font-size: 16px; } .collection-grid-item__link { border: 2px solid transparent; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .collection-grid-item__link:focus { border-color: #5c5c5c; } .collection-grid-item__overlay { position: relative; display: block; height: 100%; width: 100%; background-size: cover; background-repeat: no-repeat; background-position: center top; } .collection-grid-item__title-wrapper::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #5c5c5c; opacity: 0.25; } .collection-grid-item__link:hover .collection-grid-item__title-wrapper::before { background-color: #000; opacity: 0.5; } .collection-link-menu:hover .collection-grid-item__title-wrapper::before { background-color: #000; opacity: 0.5; } .coll_all .btn_all { background: transparent; color: #ffffff; border: 1px solid #ffffff; max-width: 75%; } .custom-content { display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; -ms-flex-align: stretch; -webkit-align-items: stretch; -moz-align-items: stretch; -ms-align-items: stretch; -o-align-items: stretch; align-items: stretch; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; width: auto; margin-bottom: 0; margin-left: 0; } @media only screen and (max-width: 749px) { .custom-content { margin-bottom: 0; margin-left: 0; } } .custom__item { -webkit-flex: 0 0 auto; -moz-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; margin-bottom: 18px; padding-left: 18px; max-width: 100%; } @media only screen and (max-width: 749px) { .custom__item { -webkit-flex: 0 0 auto; -moz-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; padding-left: 0px; margin-bottom: 28px; } .custom__item.small--one-half { -webkit-flex: 1 0 50%; -moz-flex: 1 0 50%; -ms-flex: 1 0 50%; flex: 1 0 50%; max-width: 400px; margin-left: auto; margin-right: auto; } } .custom__item .collection-grid-item { margin-bottom: 0; } .custom__item--image { margin: 0 auto; padding-left: 0; } .custom__item-inner { position: relative; display: block; text-align: left; max-width: 100%; } .custom__item-inner--video, .custom__item-inner--collection, .custom__item-inner--html { display: block; } .custom__item-inner--image { position: relative; margin: 0 auto; } .custom__image { width: 100%; display: block; position: absolute; top: 0; } /*================ Flex item alignment ================*/ .align--top-middle { text-align: center; } .align--top-right { text-align: right; } .align--middle-left { -ms-flex-item-align: center; -webkit-align-self: center; align-self: center; } .align--center { -ms-flex-item-align: center; -webkit-align-self: center; align-self: center; text-align: center; } .align--middle-right { -ms-flex-item-align: center; -webkit-align-self: center; align-self: center; text-align: right; } .align--bottom-left { -ms-flex-item-align: flex-end; -webkit-align-self: flex-end; align-self: flex-end; } .align--bottom-middle { -ms-flex-item-align: flex-end; -webkit-align-self: flex-end; align-self: flex-end; text-align: center; } .align--bottom-right { -ms-flex-item-align: flex-end; -webkit-align-self: flex-end; align-self: flex-end; text-align: right; } .newsletter-section { padding-top: 30px; } .newsletter_section { position: relative; } .newsletter_section .btn { font-size: 13px; } .newsletter_section.newsletter-bgr-true.hero__overlay::before, .custom_bg.hero__overlay::before { z-index: 0; } .index-section--newsletter-background { background-color: rgba(0, 0, 0, 0.05); } .rich-text__heading--large { font-size: 1.4em; } .rich-text__heading--small { font-size: 0.88em; } .rich-text__text--large { font-size: 1.13333em; } .rich-text__text--small { font-size: 0.86667em; } /* CSS BY J */ /*=========== START PRODUCT PAGE ==========*/ .per_discount { border: 2px solid #000; padding: 2px 6px; color: #000; } .delivery_time_new { width: 100%; clear: both; margin-bottom: 15px; margin-top: 15px; } .spr-badge { margin-bottom: 10px; } @media only screen and (min-width: 990px) { .grid__item.cst-small-crtbtn { padding-left: 7px; } } @media only screen and (max-width: 749px) { .grid__item.cst-small-crtbtn, .grid__item.more_payment_btn { padding-left: 0; } } div#progress_bar_text_sale { width: 100%; margin-bottom: 15px; margin-top: 0; text-align: center; } .progressbar_text_sale { color: #ff8e3b; text-transform: capitalize; margin-top: 8px; } /*===== SWATCHES STYLES ======*/ .swatch { margin-bottom: 5px; width: 100%; } /* Label */ .swatch .header { margin: 0 0 0.5em; font-weight: bold; } /* Hide radio buttons.*/ .swatch input { display: none; } .swatch label { /* Rounded corners */ /* To give width and height */ float: left; /* Color swatches contain no text so they need to have a width. */ min-width: 50px !important; height: 35px !important; /* No extra spacing between them */ margin: 0; /* The border when the button is not selected */ border: #ccc 1px solid; /* Background color */ background-color: transparent; /* Styling text */ font-size: 13px; text-align: center; line-height: 35px; white-space: nowrap; text-transform: uppercase; } .swatch-element label { padding: 0 10px; } .color.swatch-element label { padding: 0; } .color.color_without_bg.swatch-element label { padding: 0 10px; } .color.with_bg_color.round_shape.swatch-element label { border-radius: 50%; } .swatch .color.with_bg_color.swatch-element label { padding: 0; /* width: 30px; */ height: 30px !important; min-width: 30px !important; } /* Styling selected swatch */ /* Slightly raised */ .swatch input:checked + label { border: 1px solid #000; background-color: #000; color: #fff; } .swatch .color.swatch-element input:checked + label { -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.8); box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.8); border-color: transparent; background-color: transparent; border-radius: 0; } .swatch .color.color_without_bg.swatch-element input:checked + label { box-shadow: none; border: 1px solid #000; background-color: #000; color: #fff; } .swatch .color.with_bg_color.round_shape.swatch-element input:checked + label { border: 3px solid; border-radius: 50%; } .swatch .swatch-element { float: left; -webkit-transform: translateZ(0); /* webkit flicker fix */ -webkit-font-smoothing: antialiased; /* webkit text rendering fix */ /* Spacing between buttons */ margin: 0px 10px 10px 0; /* To position the sold out graphic and tooltip */ position: relative; } /* Image with the cross in it */ .crossed-out { position: absolute; width: 100%; height: 100%; left: 0; top: 0; } .swatch .swatch-element .crossed-out { display: none; } .swatch .swatch-element.soldout .crossed-out { display: block; } .swatch .swatch-element.soldout label { filter: alpha(opacity=60); /* internet explorer */ -khtml-opacity: 0.6; /* khtml, old safari */ -moz-opacity: 0.6; /* mozilla, netscape */ opacity: 0.6; /* fx, safari, opera */ } /* Tooltips */ .swatch .tooltip { text-align: center; background: gray; color: #fff; bottom: 100%; padding: 10px; display: block; position: absolute; width: 100px; left: -23px; margin-bottom: 15px; /* Make it invisible by default */ filter: alpha(opacity=0); -khtml-opacity: 0; -moz-opacity: 0; opacity: 0; visibility: hidden; /* Animations */ -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -ms-transform: translateY(10px); -o-transform: translateY(10px); transform: translateY(10px); -webkit-transition: all .25s ease-out; -moz-transition: all .25s ease-out; -ms-transition: all .25s ease-out; -o-transition: all .25s ease-out; transition: all .25s ease-out; -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); z-index: 10000; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .swatch .tooltip:before { bottom: -20px; content: " "; display: block; height: 20px; left: 0; position: absolute; width: 100%; } /* CSS triangle */ .swatch .tooltip:after { border-left: solid transparent 10px; border-right: solid transparent 10px; border-top: solid gray 10px; bottom: -10px; content: " "; height: 0; left: 50%; margin-left: -13px; position: absolute; width: 0; } .swatch .swatch-element:hover .tooltip { filter: alpha(opacity=100); -khtml-opacity: 1; -moz-opacity: 1; opacity: 1; visibility: visible; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } .swatch.error { background-color: #E8D2D2 !important; color: #333 !important; padding: 1em; border-radius: 5px; } .swatch.error p { margin: 0.7em 0; } .swatch.error p:first-child { margin-top: 0; } .swatch.error p:last-child { margin-bottom: 0; } .bar_adjustment.unvble_hide { display: none; } /*=========== START PRODUCT DESCRIPTION CSS ==========*/ .rte a:not(.btn).more_load { text-align: center; line-height: 25px; font-size: 15px; border: 1px solid #000000; text-transform: capitalize; color: #000000; margin: 20px auto; max-width: 150px; } .rte a:not(.btn).more_load:hover { text-decoration: none; color: #000000; } /*=========== START PROGRESS-BAR CSS ==========*/ div#progress_bar1 { clear: both; width: 100%; } .progress_bar_text { font-weight: bold; color: #000000; } .progress_bar_text #counter_left, .progress_bar_text #counter_left1 { color: #ff8e3b; } /* BOOTSTARP CSS */ .progress { height: 11px; margin-bottom: 15px; background-color: #f5f5f5; border-radius: 4px; } .progress-bar { float: left; width: 0; height: 100%; font-size: 12px; line-height: 20px; color: #fff; text-align: center; background-color: #337ab7; -webkit-transition: width .6s ease; -o-transition: width .6s ease; transition: width .6s ease; } .progress-bar-striped, .progress-striped .progress-bar { background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); -webkit-background-size: 40px 40px; background-size: 40px 40px; } .progress-bar.active, .progress.active .progress-bar { -webkit-animation: progress-bar-stripes 2s linear infinite; -o-animation: progress-bar-stripes 2s linear infinite; animation: progress-bar-stripes 2s linear infinite; } .progress-bar-success { background-color: #f042a8; } .progress-striped .progress-bar-success { background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } .progress-striped .progress-bar-info, .progress-striped .progress-bar-warning { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } .progress-bar-info { background-color: #5bc0de; } .progress-striped .progress-bar-info { background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } .progress-bar-warning { background-color: #f0ad4e; } .progress-striped .progress-bar-warning { background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } .progress-bar-danger { background-color: #d9534f; } .progress-striped .progress-bar-danger { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } /*=========== END PROGRESS-BAR CSS ==========*/ /*============ PRODUCT TAB CSS ===========*/ ul.tabs { border-bottom: 2px solid #000000; display: block; margin: 20px 0; padding: 0; } ul.tabs li { display: block; float: left; margin-bottom: 0; padding: 0; } .rte ul.tabs li a { -moz-border-bottom-colors: none; -moz-border-image: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; display: block; margin: 0; margin: 0px 10px 0px 0px !important; text-decoration: none; width: auto; border-bottom: none; text-transform: uppercase; font-weight: bold; } ul.tabs li a.active { color: #000000; margin: 0; display: inline-block; } ul.tabs li:first-child a.active { margin-left: 0; } ul.tabs:before, ul.tabs:after { content: " "; display: block; height: 0; overflow: hidden; visibility: hidden; width: 0; } ul.tabs:after { clear: both; } @media only screen and (min-width: 320px) and (max-width: 479px) { ul.tabs li a { border-bottom: 0 none; display: block; width: 100%; } ul.tabs li { width: 100%; } .site-header__icons .site-header__cart { border: none; } } /*========== END PRODUCT TAB CSS ================*/ #cartx-section-related-product { margin-top: 30px; } /*========================= MEDIA QUERY ========================*/ @media only screen and (min-width: 750px) { .hide-lg { display: none; } .pad_zero { padding: 0; } .vertical-alignment-helper { display: table !important; height: 100%; width: 750px; pointer-events: none; margin: 0 auto; } .vertical-alignment-helper_pro { display: table !important; height: 100%; width: 478px; pointer-events: none; margin: 0 auto; } .vertical-align-center { /* To center vertically */ display: table-cell; vertical-align: middle; pointer-events: none; } .modal-content { /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */ /* width:inherit; height:inherit; */ /* To center horizontally */ margin: 0 auto; pointer-events: all; } } /*=========== UPSELL POP UP CSS ==================== */ /* START BOOTSTRAP CSS */ .fade { opacity: 0; -webkit-transition: opacity .15s linear; -o-transition: opacity .15s linear; transition: opacity .15s linear; } .fade.in { opacity: 1; } .close { float: right; font-size: 21px; line-height: 1; color: #000; text-shadow: 0 1px 0 #fff; filter: alpha(opacity=20); opacity: .2; } .close:focus, .close:hover { color: #000; text-decoration: none; cursor: pointer; filter: alpha(opacity=50); opacity: .5; } button.close { -webkit-appearance: none; padding: 0; cursor: pointer; background: 0 0; border: 0; } .modal-content { -webkit-background-clip: padding-box; } .embed-responsive, .modal, .progress { overflow: hidden; } .modal { top: 0; right: 0; bottom: 0; left: 0; } .modal { position: fixed; z-index: 1050; display: none; -webkit-overflow-scrolling: touch; outline: 0; } .modal.fade .modal-dialog { -webkit-transition: -webkit-transform .3s ease-out; -o-transition: -o-transform .3s ease-out; transition: transform .3s ease-out; -webkit-transform: translate(0, -25%); -ms-transform: translate(0, -25%); -o-transform: translate(0, -25%); transform: translate(0, -25%); } .modal.in .modal-dialog { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } .modal-dialog { position: relative; width: auto; margin: 10px; } .modal-content { position: relative; background-color: #fff; background-clip: padding-box; border: 1px solid #999; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 6px; outline: 0; -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); } .modal-header { padding: 15px; border-bottom: 1px solid #e5e5e5; } .modal-header .close { margin-top: -2px; } .modal-title { margin: 0; line-height: 1.42857143; } .modal-body { position: relative; padding: 15px; } .modal-footer { padding: 12px; text-align: right; border-top: 1px solid #e5e5e5; } /* .modal-footer .btn+.btn{ margin-bottom:0; margin-left:5px } */ .modal-footer .btn-group .btn + .btn { margin-left: -1px; } .modal-footer .btn-block + .btn-block { margin-left: 0; } .modal-scrollbar-measure { position: absolute; top: -9999px; width: 50px; height: 50px; overflow: scroll; } @media (min-width: 768px) { .modal-dialog { width: 600px; margin: 30px auto; } .modal-content { -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); } .modal-sm { width: 300px; } #CartCount { display: none; } } @media (min-width: 992px) { .modal-lg { width: 900px; } } .modal-backdrop { top: 0; right: 0; bottom: 0; left: 0; } .modal-backdrop { position: fixed; z-index: 1040; background-color: #000; } .modal-backdrop.fade { filter: alpha(opacity=0); opacity: 0; } .modal-backdrop.in { filter: alpha(opacity=50); opacity: .5; } .modal-open { overflow: hidden; } .modal-open .modal { overflow-x: hidden; overflow-y: auto; } /* END BOOTSTRAP CSS*/ .related_popup_heading { color: #f042a8; font-size: 30px; font-family: Arial; text-transform: uppercase; font-weight: bold; } @media only screen and (max-width: 749px) { .related_popup_heading { font-size: 24px; } } /* .r_continue_shoping_color { background-color:#ffffff !important; color: #000 !important; padding: 10px 8px !important; float: left; margin-top: 1px; } .r_view_cart_color{ background-color:#6c756c !important; font-weight:bold; font-size:16px; } .r_checkout_color{ font-size:16px; font-weight:bold; color:#fff !important; @include media-query($small) { width:100%; } } */ .modal-footer.related_popup_footer .btn { color: #fff; padding: 7px 20px; line-height: 1.5; border-radius: 0; font-weight: bold; } @media only screen and (max-width: 749px) { .modal-footer.related_popup_footer .btn.half_button { width: 48%; margin-bottom: 10px; padding: 7px 3px; } .modal-footer.related_popup_footer .btn.width_full_button { width: 100%; margin-bottom: 10px; padding: 7px 3px; } } @media only screen and (max-width: 749px) { .r_addtocartbutton { padding: 0 15px; } } .modal-footer.related_popup_footer .btn.r_continue_shoping_color { background-color: #ffffff; color: #000; padding: 10px 15px; } @media only screen and (max-width: 749px) { .modal-footer.related_popup_footer .btn.r_continue_shoping_color { padding: 10px 2px; float: left; } } .modal-footer.related_popup_footer .btn.r_view_cart_color { background-color: #6c756c; border-color: #6c756c; font-size: 15px; } @media only screen and (min-width: 750px) { .modal-footer.related_popup_footer .btn.r_view_cart_color { margin-left: 5px; margin-right: 5px; } } .modal-footer.related_popup_footer .btn.r_checkout_color { font-size: 15px; } @media only screen and (max-width: 749px) { .modal-footer.related_popup_footer .btn.r_checkout_color { width: 100%; } } .related_popup_footer a { display: inline-block; color: #fff; border: 1px solid; } .modal-footer.related_popup_footer form { display: inline-block; } @media only screen and (max-width: 749px) { .modal-footer.related_popup_footer form { display: block; width: 100% !important; } } .related_popup_text { color: #000000; font-size: 20px; font-family: Ek Mukta; } img.addcartloader { height: 19px; width: 20px; } div#related_cart_sucsses_msg { width: 74%; left: 0; right: 0; margin: 0 auto; top: 40px !important; position: fixed !important; z-index: 99999999; } div#related_cart_sucsses_msg .alert-dismissable, div#related_cart_sucsses_msg .alert-dismissible { padding-right: 35px; } div#related_cart_sucsses_msg .alert-dismissable .close, div#related_cart_sucsses_msg .alert-dismissible .close { position: relative; top: -2px; right: -21px; color: inherit; } div#related_cart_sucsses_msg .modal, div#related_cart_sucsses_msg .modal-backdrop { top: 0; right: 0; bottom: 0; left: 0; } div#related_cart_sucsses_msg .alert-success { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; padding: 10px; } div#related_cart_sucsses_msg .alert-success hr { border-top-color: #c9e2b3; } div#related_cart_sucsses_msg .alert-success .alert-link { color: #2b542c; } .related_popup_text { text-align: left !important; } #related_popup_upsell { background: transparent; } .modal-backdrop.in { opacity: 0.7 !important; } div#related_popup_upsell .modal-dialog { max-width: 750px; width: 100%; } div#related_popup_upsell .close.thanks_line { float: none; border-bottom: 1px solid; color: #000; opacity: 1; } div#related_popup_upsell { padding-left: 0 !important; } div#related_popup_upsell .modal-dialog .modal-content { overflow: hidden; } div#related_popup_upsell .modal-dialog .modal-header { /* background-color: #32ac0b; */ padding: 15px 15px 0px 15px; color: #fff; } div#related_popup_upsell .modal-dialog .modal-content .modal-body { background-color: #fff; overflow: hidden; padding: 0; } #related_popup_upsell .modal-header { border-bottom: none; } #comment_child_like img.loder_black { margin: 20vh auto; } #comment_child_like { text-align: center; width: 100%; } div#related_popup_upsell .modal-dialog .modal-content .modal-body p.related_popup_text { color: #464646; } div#related_popup_upsell .modal-dialog .modal-content .modal-body .grid-view-item a.grid-view-item__link { margin-bottom: 0; } div#related_popup_upsell .modal-dialog .modal-content .modal-body .grid-view-item .h4.grid-view-item__title { font-size: 16px; font-weight: 500; margin-bottom: 0; } div#related_popup_upsell .modal-dialog .modal-content .modal-body .small--one-half { padding-left: 0; margin: 1%; width: 31%; padding: 5px; } div#related_popup_upsell .modal-dialog .modal-content .modal-body .pro_upsell_unique { padding-left: 0; margin: 1%; width: 50%; padding: 5px; } @media only screen and (max-width: 749px) { div#related_popup_upsell .modal-dialog .modal-content .modal-body .pro_upsell_unique { width: 80%; } } /*=========== END UPSELL POPUP CSS =================*/ .payment-icon { width: 100%; float: left; margin-top: 5px; } .payment-img { padding-top: 10px; display: inline-block; width: 100%; } .payment-img img { width: 100%; } .line { display: block; width: 100%; border-bottom: 2px solid #000; margin-top: 0; text-transform: uppercase; font-weight: bold; padding-bottom: 1px; } .prod_tags { float: left; width: 100%; margin-bottom: 15px; } .prod_tags h5, .prod_tags .h5 { display: inline; font-weight: bold; } .enable_sticky { bottom: 0; position: fixed; z-index: 99999; opacity: 1 !important; left: 0; width: 100%; } .stiky_form div#mst-stiky-box { bottom: 0px; top: auto !important; z-index: 999; background-color: #fff; border: 1px solid #ddd; padding: 5px 10px; box-shadow: 0px 1px 7px #717171; } @media only screen and (min-width: 992px) { span.tm_lbl { width: 26%; float: left; text-transform: uppercase; } span.tm_lbl_cok { width: 15%; float: left; } } .tm_sap_cok { padding-right: 5%; padding-left: 5%; float: left; font-size: 24px; height: 1em; } .tm_sap { float: left; padding-right: 16px; padding-left: 16px; width: 11%; } .fake_counter_p { width: 100%; float: left; margin-top: 10px; } .fake_counter_p img { margin-right: 7px; vertical-align: middle; } .page-container { -ms-transform: none; -webkit-transform: none; transform: none; } .showdeltime, .fake_counter_p { color: #000000; font-family: Poppins; } @media only screen and (min-width: 480px) { .showdeltime, .fake_counter_p { font-size: 14px; } } .showdeltime .fa-plane, .fake_counter_p .fa-eye { font-size: 20px; color: #000000; vertical-align: middle; margin-right: 7px; } .r_addtocartbutton .btn { width: 100%; border-radius: 0; font-weight: bold; font-size: 17px; } @media only screen and (min-width: 320px) and (max-width: 375px) { .tm_sap_cok { padding-right: 4%; padding-left: 4%; } } @media only screen and (min-width: 750px) { .stiky_form div#mst-stiky-box { display: none !important; } } @media only screen and (min-width: 768px) and (max-width: 991px) { span.tm_lbl { width: 26%; float: left; text-transform: uppercase; } .tm_sap { float: left; padding-right: 13px; padding-left: 13px; width: 11%; } span.tm_lbl_cok { width: 15%; float: left; font-size: 10px; } } @media only screen and (max-width: 767px) { span.tm_lbl_cok { width: 15%; float: left; } span.tm_lbl { width: 26%; float: left; text-transform: uppercase; } .tm_sap { float: left; padding-right: 13px; padding-left: 13px; width: 11%; } .more_load { display: inline-block !important; } .hide-xs { display: none; } #related_popup_upsell .modal-dialog { margin: 15px auto !important; } #AddToCartForm1.stiky_form button#AddToCart { float: left; width: 100%; padding: 4px 12px; } } @media only screen and (max-width: 419px) { #AddToCartForm1.stiky_form button#AddToCart { float: left; width: 100%; padding: 8px 12px; } } @media only screen and (min-width: 320px) and (max-width: 479px) { span.tm_lbl_cok { font-size: 10px; } } @media only screen and (max-width: 749px) { .min_price { text-align: left; } } .day_1 { display: none; } .cartx-payment-button__button { margin-top: 10px; } .cartx-payment-button__button--hidden { visibility: hidden !important; } .cartx-payment-button__button--unbranded { background-color: #0dbd21 !important; color: #fff !important; padding: 0.58em 2em !important; font-size: 21px !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; border-radius: 2px !important; } .dynamic_paybtn { background: #ff8e00 !important; color: #fff !important; } #AddToCartZero span, #AddToCart > span { font-size: 21px !important; vertical-align: middle; display: block; } .row_grid_qnt { padding: 0; } .free_itm { color: #ff8e00; } .ajaxified-cart-feedback { display: block; line-height: 36px; font-size: 90%; vertical-align: middle; } .ajaxified-cart-feedback.success { color: #3D9970; text-align: center; } .ajaxified-cart-feedback.error { color: #FF4136; text-align: center; } .ajaxified-cart-feedback a { border-bottom: 1px solid; } .inverted span { color: #fff; } /*=========== END PRODUCT PAGE ==========*/ /*========== CUSTOM CSS ===========*/ /*======== css for header cart button =====*/ .head-crt-icon { margin-top: 3px; } /*===== SALE BUTTON CSS ======*/ p.sale_wheel strong { display: table-cell; vertical-align: middle; } p.sale_wheel { border: 1px solid #f042a8; background-color: #f042a8; color: #ffffff; position: absolute; width: 78px; text-align: center; line-height: normal; padding: 8px 0; font-size: 15px; display: table; z-index: 99; } p.sale_wheel.free_badges { border: #ff8e00; background-color: #ff8e00; color: #ffffff; } p.sale_wheel.sld-out { border: 1px solid #e80b0b; background-color: #e80b0b; color: #ffffff; } .sale_btn_2 { text-align: center; position: absolute; z-index: 99; color: #ffffff; } .sale_wheel-two { border-color: #f042a8 transparent #f042a8 #f042a8; border-style: solid; border-width: 25px 12px 25px 46px; height: 0; left: -4px; top: 4px; position: absolute; transform: rotate(90deg); width: 0; } .sale_wheel-two.free_badges { border-color: #ff8e00 transparent #ff8e00 #ff8e00; color: #ffffff; } .sale_wheel-two.sld-out { border-color: #e80b0b transparent #e80b0b #e80b0b; color: #ffffff; } .sale_btn_2 > strong { /* left: 8px; */ position: absolute; top: 3px; width: 50px; padding: 0 2px; } .sale_wheel-three.free_badges strong, .sale_btn_2.free_badges strong { padding-top: 10px; } p.sale_wheel-three strong { display: block; margin-top: 2px; position: relative; text-align: center; top: -74px; vertical-align: middle; width: 44px; } p.sale_wheel-three { border-right: 75px solid transparent; border-top: 75px solid #f042a8; height: 0; width: 0; color: #ffffff; line-height: normal; position: absolute; text-align: left; text-transform: uppercase; z-index: 99; } p.sale_wheel-three.free_badges { border-right: 75px solid transparent; border-top: 75px solid #ff8e00; color: #ffffff; } p.sale_wheel-three.sld-out { border-right: 75px solid transparent; border-top: 75px solid #e80b0b; color: #ffffff; } .sale-sold { position: relative; } .sale-sold strong { text-transform: uppercase; font-size: 13px; } .sale_wheel-five.sld-out { left: 0; } .rel_hr { border-bottom: 3px solid #000; display: block; width: 100%; } .set_mar { margin-bottom: 15px; } /*===== PAGINATION BUTTON CSS ======*/ .pagination .btn.btn--secondary { padding: 8px 15px; } .pagination a.btn.btn--secondary { background-color: #f042a8; color: #ffffff; opacity: 1; z-index: 2; } /*====== CART PAGE ======*/ input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; } .cart__row.cart__header { border-top: 1px solid #ebebeb; } .cart__footer .timer_box { font-size: 15px; font-weight: bold; } .text-center.set_align { position: relative; right: 52px; } .cart .cart__meta { left: 15px; padding-right: 15px; position: relative; } .cart__row.cart_boxS { border-bottom: 1px solid #e8e9eb; border-top: 1px solid #e8e9eb; clear: both; display: inline-block; margin-top: 20px; padding-top: 20px; width: 100%; } @media only screen and (min-width: 750px) { .cart__row .grid__item.checkout-logos { padding-left: 30px; } } @media only screen and (max-width: 749px) { .cart__row .grid__item.checkout-logos { margin-bottom: 24px; } } .checkout-logos .we-accept p + img { margin-top: 18px; } .grid__item.currency_info { margin-bottom: 20px; } @media only screen and (min-width: 750px) { .cart__row .grid__item.secure-shopping { padding-left: 30px; } } @media only screen and (min-width: 750px) { .cart__footer .table_medium_up { display: table; table-layout: fixed; width: 100%; margin-left: 0; margin-bottom: 15px; } .cart__footer .table_medium_up > .grid__item { padding-left: 0; float: none; display: table-cell; vertical-align: middle; } .cart__row.cart_boxS { margin-left: 0; } } .cart-sale_price { border: 2px solid; padding: 4px; font-weight: bold; font-size: 15px; } .crt_total span { color: #f042a8; font-size: 15px; font-weight: bold; } .section-header_1.grid { margin-bottom: 15px; } .section-header_1 h3, .section-header_1 .h3 { margin-top: 7.5px; } .checkout_btn.btn > img { vertical-align: middle; } .checkout_btn, .cart__update { border-radius: 0; font-size: 16px; font-weight: bold; letter-spacing: 0; padding: 15px 30px; } @media only screen and (max-width: 749px) { .checkout_btn, .cart__update { padding: 15px 25px; width: 100%; } } .clear-cart.my-super-fancy-button-style { display: none; } @media only screen and (max-width: 749px) { .cart__update.cart__continue--large { width: 100%; } .cart-note__input { margin-bottom: 10px; } .btn--small.cart__update, .btn--small.cart__remove { font-size: 14px; font-weight: normal; letter-spacing: 2px; padding: 12px 5px; width: 85px; } .btn--small.js-edit-toggle { padding: 0; } .btn--small.js-edit-toggle .cart__edit-text--edit { font-size: 14px; font-weight: normal; letter-spacing: 2px; padding: 10px; } .btn--small.js-edit-toggle .cart__edit-text--cancel { font-size: 14px; font-weight: normal; letter-spacing: 2px; padding: 8px 4px; } .btn--small.cart__update { float: right; } .btn--small.cart__remove { float: left; } .cart__qty { float: left; flex: 1 1 0; } .cart__qty .cart__qty-input { padding: 7px 5px; } .grid__item.totle_cart { margin-top: 20px; } .grid__item.currency_info { margin-top: 20px; } } /*================== FOOTER CSS =================*/ .footer_logo, .footer_content { margin-top: 30px; } @media only screen and (max-width: 749px) { .footer_logo, .footer_content { margin-top: 15px; } } .footer__title { text-transform: uppercase; } .footer_title, .h5 { text-transform: uppercase; } @media only screen and (min-width: 750px) { .grid__item.seaction_gape:first-child { padding-left: 0; } .grid__item.seaction_gape:last-child { padding-right: 0; } } .grid__item.seaction_gape { padding: 0 10px; } #Email, #k_id_email { /* font-size: 14px; */ padding: 0 8px; } .site-footer #Email, .site-footer #k_id_email { font-size: 10px; } .footer-social-icons { margin-top: 14px; } .footer-social-icons .icon { height: 15px; width: 15px; } .grid__item.footer_credits { margin-top: 28px; } .credits { float: left; margin-top: 5px; font-size: 13px; } @media only screen and (max-width: 749px) { .credits { float: none; } } .payment-icons .icon { font-size: 30px; line-height: 30px; width: 52px; height: 30px; } .payment-icons .fallback-text { text-transform: capitalize; font-size: 0px; } /*=================== CORE OWL CAROUSEL OWL DEMO THEME CSS FILE [v1.23] ======================*/ .owl-theme .owl-controls { /* margin-top: 10px; */ text-align: center; } /* Styling Next and Prev buttons */ .owl-theme .owl-controls .owl-buttons div { color: #FFF; display: inline-block; zoom: 1; *display: inline; /*IE7 life-saver */ background: #869791; filter: Alpha(Opacity=50); /*IE7 fix*/ opacity: 0.5; position: absolute; top: 50%; } /* Clickable class fix problem with hover on touch devices */ /* Use it for non-touch hover action */ .owl-theme .owl-controls.clickable .owl-buttons div:hover { filter: Alpha(Opacity=100); /*IE7 fix*/ opacity: 1; text-decoration: none; } /* Styling Pagination*/ .owl-theme .owl-controls .owl-page { display: inline-block; zoom: 1; *display: inline; /*IE7 life-saver */ } .owl-theme .owl-controls .owl-page span { display: block; width: 12px; height: 12px; margin: 5px 7px; filter: Alpha(Opacity=50); /*IE7 fix*/ opacity: 0.5; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; background: #869791; } .owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page:hover span { filter: Alpha(Opacity=100); /*IE7 fix*/ opacity: 1; } /* If PaginationNumbers is true */ .owl-theme .owl-controls .owl-page span.owl-numbers { height: auto; width: auto; color: #FFF; padding: 2px 10px; font-size: 12px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; } /* preloading images */ .owl-item.loading { min-height: 150px; background: url(AjaxLoader.gif) no-repeat center center; } .owl-theme .owl-controls .owl-buttons .owl-prev { background: transparent url("//cdn.cartx.com/s/files/1/3096/8844/t/1/assets/left-arrow1.png") no-repeat scroll center center; opacity: 1; width: 30px; height: 30px; left: 0; } .owl-theme .owl-controls .owl-buttons .owl-next { background: transparent url("//cdn.cartx.com/s/files/1/3096/8844/t/1/assets/right-arrow1.png") no-repeat scroll center center; opacity: 1; width: 30px; height: 30px; right: 0; } /*======= NEWSLETTER ========*/ .newsletter_section.newsletter-both-names--false .newsletter input[type="text"] { width: 100%; margin-bottom: 15px; height: 40px; line-height: 40px; padding: 0 8px; border: none; border-radius: 0px; } .newsletter_section.newsletter-both-names--true .newsletter input[type="text"] { width: 49%; float: left; margin-bottom: 15px; height: 40px; line-height: 40px; padding: 0 8px; border: none; border-radius: 0px; } @media only screen and (max-width: 749px) { .newsletter_section.newsletter-both-names--true .newsletter input[type="text"] { width: 100%; } } .newsletter_section.newsletter-both-names--true .firstName { margin-right: 2%; } .newsletter_section .section_form { padding: 40px 20px; position: relative; } .newsletter_section .section_form .section-header { margin-bottom: 30px; color: #ffffff; } .newsletter_section .section_form .section-header p { color: #ffffff; } .newsletter_section .password__input-group { max-width: 450px; margin-bottom: 0; } @media only screen and (max-width: 749px) { .newsletter_section .password__input-group { max-width: 100%; } } .newsletter_section #Email, .newsletter_section #k_id_email { display: inline-block; width: 80%; float: left; line-height: 40px; } @media only screen and (max-width: 749px) { .newsletter_section #Email, .newsletter_section #k_id_email { width: 100%; } } .newsletter_section .input-group__btn { display: inline-block; white-space: normal; width: 20%; } @media only screen and (max-width: 749px) { .newsletter_section .input-group__btn { width: 100%; } .newsletter_section .input-group__btn .btn { width: 100%; margin-top: 15px; } } #instafeed { margin-left: -10px; } #instafeed .grid__item { padding: 10px 10px 0; } #instafeed img, #instafeed svg, #instafeed video { /* margin-bottom: 0; display:inline; */ max-width: 100%; } /*======= START SALE BUTTON ======*/ a#sale_button_home.large, a#sale_button_section.large { padding: 20px 25px; font-size: 30px; letter-spacing: 0px; } a#sale_button_home.medium, a#sale_button_section.medium { padding: 15px 20px; letter-spacing: 0px; font-size: 20px; } @media only screen and (min-width: 320px) and (max-width: 359px) { a#sale_button_home.large, a#sale_button_section.large { padding: 20px 25px; font-size: 24px; letter-spacing: 0px; } a.btn.btn--secondary.large { width: 95%; } a.btn.btn--secondary.medium { width: 96%; } } @media only screen and (min-width: 479px) and (max-width: 749px) { a#sale_button_home.large, a#sale_button_section.large { padding: 20px 25px; font-size: 24px; letter-spacing: 0px; } a.btn.btn--secondary.large, a.btn.btn--secondary.medium { width: 80%; } } /*======= END SALE BUTTON ======*/ /*======= START HERO ======*/ .hero a.hero__btn.large { padding: 20px 25px; font-size: 30px; letter-spacing: 0px; } .hero a.hero__btn.medium { padding: 15px 20px; letter-spacing: 0px; font-size: 20px; } @media only screen and (min-width: 320px) and (max-width: 359px) { .hero a.hero__btn.large { padding: 20px 25px; font-size: 24px; letter-spacing: 0px; } .hero a.btn.hero__btn.large { width: 95%; } .hero a.btn.hero__btn.medium { width: 96%; } } @media only screen and (min-width: 479px) and (max-width: 749px) { .hero a.hero__btn.large { padding: 20px 25px; font-size: 24px; letter-spacing: 0px; } .hero a.btn.hero__btn.large, .hero a.btn.hero__btn.medium { width: 80%; } } /*======= END HERO ======*/ /*======= START HOME-BLOG LIST ======*/ .comment_box { float: right; } .btn_read { color: #f042a8; text-transform: capitalize; } .btn_read .icon.icon-chevron-right { width: 12px; height: 12px; } /*======= END HOME-BLOG LIST ======*/ /*======= START FAQ LIST ======*/ .masonry { margin: 1.5em 0; padding: 0; -moz-column-gap: 1.5em; -webkit-column-gap: 1.5em; column-gap: 1.5em; font-size: .85em; } .masonry .item { display: inline-block; /* background: #fff; */ /*padding: 0.5em;*/ margin: 10px 0; width: 100%; } .faq_title { font-size: 18px; } .faq_text p { font-size: 14px; } .faq_title span.for-qicon { margin-right: 10px; width: 20px; height: 20px; background-color: #f042a8; display: inline-block; text-align: center; border-radius: 50%; line-height: 1; } .faq_title span.for-qicon i.fa { font-size: 12px; color: #ffffff; } @media only screen and (min-width: 700px) { .masonry { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; } } @media only screen and (min-width: 900px) { .masonry { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; } } /*======= END FAQ LIST ======*/ /*======= START COLLECTIONS LIST ======*/ .text-center.coll_all { position: absolute; bottom: 0; visibility: hidden; left: 0; right: 0; } @media only screen and (max-width: 749px) { .text-center.coll_all { display: none; } } .collection-grid-item__link:hover .collection-grid-item__title { top: 40%; transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; /* Safari 3.1 to 6.0 */ -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; } @media only screen and (max-width: 749px) { .collection-grid-item__link:hover .collection-grid-item__title { top: 50%; } } .collection-grid-item__link:hover .text-center.coll_all { bottom: 30%; visibility: visible; transition: all 0.3s ease-in; -webkit-transition: all 0.3s ease-in; /* Safari 3.1 to 6.0 */ -moz-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; } .four_image .collection-grid-item__link:hover .text-center.coll_all { bottom: 25%; } .five_image .collection-grid-item__link:hover .text-center.coll_all { bottom: 20%; } /* =============================================== // Reveal module // =============================================== */ /* .reveal .hidden { display: block !important; visibility: visible !important;} */ .reveal { position: relative; line-height: 0; margin-bottom: 12px; } @media only screen and (max-width: 1024px) { .reveal .hidden { display: none; } } @media only screen and (min-width: 1025px) { .product:hover .reveal img { opacity: 1; } .reveal .hidden { position: absolute; z-index: -1; top: 0; left: 0; right: 0; width: 100%; height: 100%; opacity: 0; -webkit-transition: opacity 0.3s ease-in-out; -moz-transition: opacity 0.3s ease-in-out; -o-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; } .reveal:hover .hidden { z-index: 98; opacity: 1; } } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } .shop-now.fadeInUp.animated { animation-name: fadeInUp; -webkit-animation-name: fadeInUp; animation-duration: 1s; -webkit-animation-duration: 1s; animation-fill-mode: both; -webkit-animation-fill-mode: both; } .shop-now { position: absolute; bottom: 2px; background-color: #f042a8; color: #ffffff; padding: 18px; display: none; } .reveal:hover .shop-now.fadeInUp.animated { display: block !important; } span.salePrice { display: inline-block; text-transform: uppercase; font-size: 13px; font-weight: 900; padding: 0 8px; border-radius: 3px; vertical-align: text-bottom; color: #f042a8; border: 2px solid #f042a8; } .save_discount_pro span.salePrice { margin-bottom: 2px; margin-left: 6px; } /*======= END COLLECTIONS LIST ======*/ /*===== START FONT STYLE FOR TIMER =====*/ span samp { font-family: Poppins; } #timertwohour span { font-family: Poppins; } #AddToCartForm1 .price-lable { font-family: Poppins; } #AddToCartForm1 #hm_timer1201 { font-family: Poppins; } @media only screen and (max-width: 749px) { .timer-section #timertwohour span.cokies1_timer { font-size: 27px; } } /*===== END FONT STYLE FOR TIMER =====*/ /*===== START DISCOUNT POPUP =====*/ @media only screen and (min-width: 900px) { #OfferCartpopup .vertical-alignment-helper { width: 870px; } } #OfferCartpopup .modal-header { position: absolute; } div#OfferCartpopup .modal-content { float: left; width: 100%; /* border: 2px solid #000000; */ background-color: #ffffff; /* border-radius: 3px; */ overflow: hidden; font-family: sans-serif; } .popp-msg span, .popp-msg-dtl span { color: #000000 !important; } .body-right span b { color: #000000 !important; font-size: 24px; } div#OfferCartpopup .modal-header { float: left; width: 100%; border: none; padding: 5px; z-index: 9; } div#OfferCartpopup .modal-body { float: left; width: 100%; padding: 0; } div#OfferCartpopup .modal-footer { float: left; padding-bottom: 15%; width: 100%; border: none; display: none; } .body-left { float: left; width: 50%; line-height: 0; } .body-right { float: left; width: 40%; text-align: center; margin-left: 5%; margin-right: 5%; } .body-right-full { width: 90%; text-align: center; margin-left: 5%; margin-right: 5%; } #OfferCartpopup .suc_hide { display: inline-block; } .body-right span { font-weight: 100; font-size: 3em; } .body-right-full span { font-weight: 100; font-size: 3em; } .body-right span.title { color: #f042a8; float: left; margin: 18% 0 12%; width: 100%; font-weight: bold; } .body-right-full span.title { color: #f042a8; float: left; margin: 5% 0 3%; width: 100%; font-weight: bold; } .popp-msg { float: left; width: 100%; } .popp-msg span { color: #fff; float: left; width: 100%; font-size: 1.4em; font-weight: 100; line-height: 30px; text-transform: uppercase; } .body-right h1, .body-right .h1 { color: #fff; font-weight: 100; } div#OfferCartpopup .modal-header button.close { opacity: 1; /* color: #fff; */ text-shadow: none; } .popp-msg-dtl { float: left; width: 100%; margin-top: 5%; margin-bottom: 5%; } .popp-msg-dtl span { font-size: 16px; color: #fff; } .popp-msg span b { color: #fff; } .popp-msg-dtl span b { color: #fff; } div#OfferCartpopup .modal-footer a { display: table; margin: 0 auto; background-color: #618da7; color: #ffffff; font-size: 16px; padding: 10px 30px; border-radius: 10px; font-weight: 600; } .popup-container { padding-bottom: 5%; display: inline-block; } .grid_new_align { direction: ltr; text-align: left; float: left !important; } .body-right .popup-container .input-group { margin-top: 12%; float: left; } .body-right-full .popup-container .input-group { margin-top: 6%; float: left; } .popup-container input.input-group-field { float: left; width: 100%; border: none; border-bottom: 3px solid #000; font-size: 18px; text-align: center; } .popup-container input.input-group-field#Email { padding: 10px 18px; } .popup-container span.input-group-btn { float: left; width: 100%; margin: 0; padding: 0; line-height: 0; text-align: left; } /* .popup-container .input-group { margin-top: 20px; float: left; width: 100%; } */ .popup-container span.input-group-btn input#subscribe { background: #f042a8 !important; color: #ffffff; /* height: 38px; */ line-height: 2; width: 100%; margin-top: 6%; border-radius: 10px; font-weight: bold; } #OfferCartpopup .modal-footer { margin-top: 0; } @media only screen and (min-width: 320px) and (max-width: 599px) { .body-left { float: none; width: auto; margin: 0 auto; display: table; } .body-right { float: left; width: 90%; text-align: center; } .body-right span.title { margin: 20px 0 20px; font-size: 30px; } .popp-msg span { font-size: 1.2em; line-height: 25px; } .popp-msg { float: left; width: 100%; font-size: 13px; } .popup-container .input-group { margin-top: 20px; } .popup-container span.input-group-btn input#subscribe { margin-bottom: 20px; margin-top: 20px; } div#OfferCartpopup .discount_image_enable { display: none; } .site-header__cart.head_cart { padding: 5px 9px; } .td_price { margin-bottom: 15px; } .continue_shopping { margin: 15px 0; } .cart table { margin-bottom: 7px; } .site-footer__payment-icons { clear: both; float: none; text-align: center; } #CartCost { display: none; } .site-header__cart.head_cart { border: none; } .icon.icon-hamburger { width: 25px; } .head_cart .head-crt-icon { font-size: 20px; } .body-left { width: 100%; } } @media only screen and (min-width: 600px) and (max-width: 767px) { .popp-msg span { font-size: 1.1em; } .body-right span.title { margin: 6% 0; } .popup-container .input-group { margin-top: 6%; } .popup-container input.input-group-field { font-size: 14px; } .popup-container span.input-group-btn input#subscribe { margin-top: 6%; } .site-header__cart.head_cart { padding: 5px 6px; } .continue_shopping { margin: 15px 0; } .td_price { margin-bottom: 15px; } .cart table { margin-bottom: 7px; } .site-footer__payment-icons { clear: both; float: none; text-align: center; } #CartCount { display: none; } } @media only screen and (min-width: 768px) and (max-width: 860px) { .site-footer__payment-icons { clear: both; float: none; text-align: center; } } @media only screen and (min-width: 768px) and (max-width: 899px) { .popp-msg span { font-size: 1.2em; } .body-right span.title { margin: 12% 0; } #CartCost { font-size: 14px; } } /*===== END DISCOUNT POPUP =====*/ /*===== START CONTACT PAGE =====*/ .contact-form .contact_comment { padding: 20px 0 10px; } .contact-form.contact_page input, .contact-form.contact_page textarea { margin-bottom: 20px; } .contact-form.contact_page .btn { display: block; padding: 10px; width: 100%; } .contact_map { margin: 30px 0 0; } /*========= Start Notification Pop up ==============*/ #someone-purchased { background: #fff; border: 0; display: none; border-radius: 0; bottom: 20px; top: auto; left: 20px; right: auto; padding: 0; position: fixed; text-align: left; width: auto; z-index: 99999; -webkit-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.4); box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.4); } #someone-purchased div img { cursor: pointer; float: left; max-height: 85px; max-width: 120px; width: auto; } #someone-purchased div p { float: left; font-size: 13px; margin: 0 0 0 13px; width: auto; padding: 10px 10px 0 0; line-height: 20px; } #someone-purchased div p span { padding-right: 51px; display: block; font-size: 15px; font-weight: 700; } #someone-purchased div p span:hover { color: #000; } #someone-purchased div p small { text-align: right; display: block; font-size: 10px; margin-bottom: 8px; } .close_notification { padding: 0 5px; cursor: pointer; position: absolute; top: 4px; right: 4px; } @media screen and (max-width: 767px) { #someone-purchased { left: 0; width: 100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; max-width: auto; } #someone-purchased div img { max-width: 20%; max-height: auto; } #someone-purchased div p { font-size: 11px; width: 70%; } #someone-purchased div p span { font-size: 13px; } } @keyframes nFadeIn { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: none; } } #someone-purchased.fade-in { opacity: 0; animation-name: nFadeIn; animation-duration: 1s; animation-fill-mode: both; } @keyframes nFadeOut { from { opacity: 1; } to { opacity: 0; transform: translate3d(0, 100%, 0); bottom: 0; } } #someone-purchased.fade-out { opacity: 0; animation-name: nFadeOut; animation-duration: 1s; animation-fill-mode: both; } @media screen and (max-width: 767px) { #someone-purchased { bottom: auto; top: 0; } } @media screen and (max-width: 767px) { @keyframes nFadeIn { from { opacity: 0; transform: translate3d(0, -100%, 0); } to { opacity: 1; transform: none; } } } @media screen and (max-width: 767px) { @keyframes nFadeOut { from { opacity: 1; } to { opacity: 0; transform: translate3d(0, -100%, 0); top: 0; } } } /*========= End Notification Pop up ==============*/ .block-logo svg.placeholder-svg, .shipping_bdges_img { width: 66px; height: auto; } /*========= Contact page ==============*/ #create_customer #Email { padding: 10px 18px; } /*! * Hover.css (http://ianlunn.github.io/Hover/) * Version: 2.1.1 * Author: Ian Lunn @IanLunn * Author URL: http://ianlunn.co.uk/ * Github: https://github.com/IanLunn/Hover * Made available under a MIT License: * http://www.opensource.org/licenses/mit-license.php * Hover.css Copyright Ian Lunn 2014. Generated with Sass. */ @-webkit-keyframes hvr-pulse-grow { to { -webkit-transform: scale(1.1); transform: scale(1.1); } } @keyframes hvr-pulse-grow { to { -webkit-transform: scale(1.1); transform: scale(1.1); } } .hvr-pulse-grow { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; } .hvr-pulse-grow.is-animated { -webkit-animation-name: hvr-pulse-grow; animation-name: hvr-pulse-grow; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; } .hvr-bounce-in { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; } .hvr-bounce-in.is-animated { -webkit-transform: scale(1.2); transform: scale(1.2); -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); } .hvr-grow-rotate { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-grow-rotate.is-animated { -webkit-transform: scale(1.1) rotate(4deg); transform: scale(1.1) rotate(4deg); } .hvr-skew { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-skew.is-animated { -webkit-transform: skew(-10deg); transform: skew(-10deg); } .hvr-skew-forward { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transform-origin: 0 100%; transform-origin: 0 100%; } .hvr-skew-forward.is-animated { -webkit-transform: skew(-10deg); transform: skew(-10deg); } @-webkit-keyframes hvr-wobble-vertical { 16.65% { -webkit-transform: translateY(8px); transform: translateY(8px); } 33.3% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } 49.95% { -webkit-transform: translateY(4px); transform: translateY(4px); } 66.6% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } 83.25% { -webkit-transform: translateY(1px); transform: translateY(1px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes hvr-wobble-vertical { 16.65% { -webkit-transform: translateY(8px); transform: translateY(8px); } 33.3% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } 49.95% { -webkit-transform: translateY(4px); transform: translateY(4px); } 66.6% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } 83.25% { -webkit-transform: translateY(1px); transform: translateY(1px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } .hvr-wobble-vertical { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; } .hvr-wobble-vertical.is-animated { -webkit-animation-name: hvr-wobble-vertical; animation-name: hvr-wobble-vertical; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } @-webkit-keyframes hvr-wobble-horizontal { 16.65% { -webkit-transform: translateX(8px); transform: translateX(8px); } 33.3% { -webkit-transform: translateX(-6px); transform: translateX(-6px); } 49.95% { -webkit-transform: translateX(4px); transform: translateX(4px); } 66.6% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 83.25% { -webkit-transform: translateX(1px); transform: translateX(1px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes hvr-wobble-horizontal { 16.65% { -webkit-transform: translateX(8px); transform: translateX(8px); } 33.3% { -webkit-transform: translateX(-6px); transform: translateX(-6px); } 49.95% { -webkit-transform: translateX(4px); transform: translateX(4px); } 66.6% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 83.25% { -webkit-transform: translateX(1px); transform: translateX(1px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } .hvr-wobble-horizontal { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; } .hvr-wobble-horizontal.is-animated { -webkit-animation-name: hvr-wobble-horizontal; animation-name: hvr-wobble-horizontal; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } @-webkit-keyframes hvr-wobble-to-bottom-right { 16.65% { -webkit-transform: translate(8px, 8px); transform: translate(8px, 8px); } 33.3% { -webkit-transform: translate(-6px, -6px); transform: translate(-6px, -6px); } 49.95% { -webkit-transform: translate(4px, 4px); transform: translate(4px, 4px); } 66.6% { -webkit-transform: translate(-2px, -2px); transform: translate(-2px, -2px); } 83.25% { -webkit-transform: translate(1px, 1px); transform: translate(1px, 1px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes hvr-wobble-to-bottom-right { 16.65% { -webkit-transform: translate(8px, 8px); transform: translate(8px, 8px); } 33.3% { -webkit-transform: translate(-6px, -6px); transform: translate(-6px, -6px); } 49.95% { -webkit-transform: translate(4px, 4px); transform: translate(4px, 4px); } 66.6% { -webkit-transform: translate(-2px, -2px); transform: translate(-2px, -2px); } 83.25% { -webkit-transform: translate(1px, 1px); transform: translate(1px, 1px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } .hvr-wobble-to-bottom-right { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; } .hvr-wobble-to-bottom-right.is-animated { -webkit-animation-name: hvr-wobble-to-bottom-right; animation-name: hvr-wobble-to-bottom-right; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } @-webkit-keyframes hvr-wobble-to-top-right { 16.65% { -webkit-transform: translate(8px, -8px); transform: translate(8px, -8px); } 33.3% { -webkit-transform: translate(-6px, 6px); transform: translate(-6px, 6px); } 49.95% { -webkit-transform: translate(4px, -4px); transform: translate(4px, -4px); } 66.6% { -webkit-transform: translate(-2px, 2px); transform: translate(-2px, 2px); } 83.25% { -webkit-transform: translate(1px, -1px); transform: translate(1px, -1px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes hvr-wobble-to-top-right { 16.65% { -webkit-transform: translate(8px, -8px); transform: translate(8px, -8px); } 33.3% { -webkit-transform: translate(-6px, 6px); transform: translate(-6px, 6px); } 49.95% { -webkit-transform: translate(4px, -4px); transform: translate(4px, -4px); } 66.6% { -webkit-transform: translate(-2px, 2px); transform: translate(-2px, 2px); } 83.25% { -webkit-transform: translate(1px, -1px); transform: translate(1px, -1px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } .hvr-wobble-to-top-right { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; } .hvr-wobble-to-top-right.is-animated { -webkit-animation-name: hvr-wobble-to-top-right; animation-name: hvr-wobble-to-top-right; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } @-webkit-keyframes hvr-wobble-top { 16.65% { -webkit-transform: skew(-12deg); transform: skew(-12deg); } 33.3% { -webkit-transform: skew(10deg); transform: skew(10deg); } 49.95% { -webkit-transform: skew(-6deg); transform: skew(-6deg); } 66.6% { -webkit-transform: skew(4deg); transform: skew(4deg); } 83.25% { -webkit-transform: skew(-2deg); transform: skew(-2deg); } 100% { -webkit-transform: skew(0); transform: skew(0); } } @keyframes hvr-wobble-top { 16.65% { -webkit-transform: skew(-12deg); transform: skew(-12deg); } 33.3% { -webkit-transform: skew(10deg); transform: skew(10deg); } 49.95% { -webkit-transform: skew(-6deg); transform: skew(-6deg); } 66.6% { -webkit-transform: skew(4deg); transform: skew(4deg); } 83.25% { -webkit-transform: skew(-2deg); transform: skew(-2deg); } 100% { -webkit-transform: skew(0); transform: skew(0); } } .hvr-wobble-top { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; -webkit-transform-origin: 0 100%; transform-origin: 0 100%; } .hvr-wobble-top.is-animated { -webkit-animation-name: hvr-wobble-top; animation-name: hvr-wobble-top; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } @-webkit-keyframes hvr-wobble-bottom { 16.65% { -webkit-transform: skew(-12deg); transform: skew(-12deg); } 33.3% { -webkit-transform: skew(10deg); transform: skew(10deg); } 49.95% { -webkit-transform: skew(-6deg); transform: skew(-6deg); } 66.6% { -webkit-transform: skew(4deg); transform: skew(4deg); } 83.25% { -webkit-transform: skew(-2deg); transform: skew(-2deg); } 100% { -webkit-transform: skew(0); transform: skew(0); } } @keyframes hvr-wobble-bottom { 16.65% { -webkit-transform: skew(-12deg); transform: skew(-12deg); } 33.3% { -webkit-transform: skew(10deg); transform: skew(10deg); } 49.95% { -webkit-transform: skew(-6deg); transform: skew(-6deg); } 66.6% { -webkit-transform: skew(4deg); transform: skew(4deg); } 83.25% { -webkit-transform: skew(-2deg); transform: skew(-2deg); } 100% { -webkit-transform: skew(0); transform: skew(0); } } .hvr-wobble-bottom { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; -webkit-transform-origin: 100% 0; transform-origin: 100% 0; } .hvr-wobble-bottom.is-animated { -webkit-animation-name: hvr-wobble-bottom; animation-name: hvr-wobble-bottom; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } @-webkit-keyframes hvr-wobble-skew { 16.65% { -webkit-transform: skew(-12deg); transform: skew(-12deg); } 33.3% { -webkit-transform: skew(10deg); transform: skew(10deg); } 49.95% { -webkit-transform: skew(-6deg); transform: skew(-6deg); } 66.6% { -webkit-transform: skew(4deg); transform: skew(4deg); } 83.25% { -webkit-transform: skew(-2deg); transform: skew(-2deg); } 100% { -webkit-transform: skew(0); transform: skew(0); } } @keyframes hvr-wobble-skew { 16.65% { -webkit-transform: skew(-12deg); transform: skew(-12deg); } 33.3% { -webkit-transform: skew(10deg); transform: skew(10deg); } 49.95% { -webkit-transform: skew(-6deg); transform: skew(-6deg); } 66.6% { -webkit-transform: skew(4deg); transform: skew(4deg); } 83.25% { -webkit-transform: skew(-2deg); transform: skew(-2deg); } 100% { -webkit-transform: skew(0); transform: skew(0); } } .hvr-wobble-skew { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; } .hvr-wobble-skew.is-animated { -webkit-animation-name: hvr-wobble-skew; animation-name: hvr-wobble-skew; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } @-webkit-keyframes hvr-buzz-out { 10% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 20% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 30% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 40% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 50% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 60% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 70% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 80% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 90% { -webkit-transform: translateX(1px) rotate(0); transform: translateX(1px) rotate(0); } 100% { -webkit-transform: translateX(-1px) rotate(0); transform: translateX(-1px) rotate(0); } } @keyframes hvr-buzz-out { 10% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 20% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 30% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 40% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 50% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 60% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 70% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 80% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 90% { -webkit-transform: translateX(1px) rotate(0); transform: translateX(1px) rotate(0); } 100% { -webkit-transform: translateX(-1px) rotate(0); transform: translateX(-1px) rotate(0); } } .hvr-buzz-out { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; } .hvr-buzz-out.is-animated { -webkit-animation-name: hvr-buzz-out; animation-name: hvr-buzz-out; -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } .hvr-forward { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-forward.is-animated { -webkit-transform: translateX(8px); transform: translateX(8px); } .hvr-float-shadow { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; position: relative; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-float-shadow:before { pointer-events: none; position: absolute; z-index: -1; content: ''; top: 100%; left: 5%; height: 10px; width: 90%; opacity: 0; background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, transparent 80%); background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, transparent 80%); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform, opacity; transition-property: transform, opacity; } .hvr-float-shadow.is-animated { -webkit-transform: translateY(-5px); transform: translateY(-5px); } .hvr-float-shadow.is-animated:before { opacity: 1; -webkit-transform: translateY(5px); transform: translateY(5px); } .dropdown-menu { background: #fff none repeat scroll 0 0; display: none; left: 0; margin-bottom: 0; margin-top: 0; padding: 6px 11px 1px; position: absolute; width: 84px; z-index: 999; left: -10px; text-align: left; border: 1px solid #ccc; } li.currencies { margin-bottom: 5px; } @media only screen and (min-width: 1025px) { .top-bar-left .tbl-list > li.currency { position: relative; } } .top-bar-left .tbl-list > li { display: inline-block; list-style: outside none none; padding: 10px 0; margin: 0; } .top-bar-left select { display: none; } .mar-zero { margin: 0; } .currencies.dropdown-menu { list-style: none; margin-top: 10px; padding-left: 10px; } #selected__curency li.currencies { padding: 3px 0px; } #selected__curency span.country_cod { line-height: 20px; } @media only screen and (max-width: 1024px) { #selected__curency .tbl-list > li { padding: 0; } #selected__curency .currencies.dropdown-menu { width: 100px; top: -255px; left: -20px; } } @media only screen and (min-width: 1025px) { .dropdown-toggle { vertical-align: middle; } } .currency-block .currencies.dropdown-menu { display: none; } .currency-block.open .currencies.dropdown-menu { display: block; } #auto__currency .currencies.dropdown-menu { background-color: #fff; border-radius: 5px; box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11); box-sizing: border-box; margin: 4px 0 0 !important; opacity: 1; overflow: scroll; overflow-x: hidden; padding: 0; pointer-events: auto; position: absolute; top: auto; max-height: 260px; -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform: scale(1) translateY(0); transform: scale(1) translateY(0); transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out; z-index: 100000; width: auto; left: auto; right: 0; padding: 10px 0; } #auto__currency .option { text-align: left !important; margin: 0px !important; text-transform: none; display: block !important; cursor: pointer; font-weight: 400; line-height: 22px; list-style: none; min-height: 40px; min-width: 55px; margin-bottom: 0; outline: 0; padding-left: 18px; padding-right: 5px; text-align: left; transition: all .2s; } @media only screen and (max-width: 1024px) { #auto__currency .tbl-list > li { padding: 0; } #auto__currency .currencies.dropdown-menu { top: -266px; right: auto; left: 9px; } #auto__currency .option { min-width: 224px; } } .flags { background-image: url(//cdn.cartx.com/s/files/1/0296/4842/0923/t/4/assets/currency-flags.png?73); background-repeat: no-repeat; display: block; margin: 0 4px 0 0; float: left; width: 30px; height: 20px; } .flags-ZMW { background-position: -45px -5px; } .flags-YER { background-position: -85px -5px; } .flags-VND { background-position: -125px -5px; } .flags-VEF { background-position: -165px -5px; } .flags-VUV { background-position: -245px -5px; } .flags-UZS { background-position: -285px -5px; } .flags-UYU { background-position: -325px -5px; } .flags-USD { background-position: -365px -5px; } .flags-GBP { background-position: -405px -5px; } .flags-AED { background-position: -445px -5px; } .flags-UAH { background-position: -5px -35px; } .flags-UGX { background-position: -45px -35px; } .flags-TMT { background-position: -125px -35px; } .flags-TRY { background-position: -165px -35px; } .flags-TND { background-position: -205px -35px; } .flags-TTD { background-position: -245px -35px; } .flags-TOP { background-position: -285px -35px; } .flags-THB { background-position: -365px -35px; } .flags-TZS { background-position: -405px -35px; } .flags-TJS { background-position: -445px -35px; } .flags-TWD { background-position: -5px -65px; } .flags-SYP { background-position: -45px -65px; } .flags-CHF { background-position: -85px -65px; } .flags-SEK { background-position: -125px -65px; } .flags-SZL { background-position: -165px -65px; } .flags-SRD { background-position: -205px -65px; } .flags-SDG { background-position: -245px -65px; } .flags-LKR { background-position: -285px -65px; } .flags-ZAR { background-position: -405px -65px; } .flags-SOS { background-position: -445px -65px; } .flags-SBD { background-position: -5px -95px; } .flags-SGD { background-position: -125px -95px; } .flags-SLL { background-position: -165px -95px; } .flags-SCR { background-position: -205px -95px; } .flags-RSD { background-position: -245px -95px; } .flags-SAR { background-position: -325px -95px; } .flags-STD { background-position: -365px -95px; } .flags-WST { background-position: -445px -95px; } .flags-XCD { background-position: -5px -125px; } .flags-RWF { background-position: -125px -125px; } .flags-RUB { background-position: -165px -125px; } .flags-RON { background-position: -205px -125px; } .flags-QAR { background-position: -245px -125px; } .flags-PLN { background-position: -325px -125px; } .flags-PHP { background-position: -365px -125px; } .flags-PEN { background-position: -405px -125px; } .flags-PYG { background-position: -445px -125px; } .flags-PGK { background-position: -5px -155px; } .flags-PAB { background-position: -45px -155px; } .flags-PKR { background-position: -125px -155px; } .flags-OMR { background-position: -165px -155px; } .flags-NOK { background-position: -205px -155px; } .flags-NGN { background-position: -245px -155px; } .flags-NIO { background-position: -325px -155px; } .flags-NZD { background-position: -365px -155px; } .flags-NPR { background-position: -445px -155px; } .flags-NAD { background-position: -45px -185px; } .flags-MMK { background-position: -85px -185px; } .flags-MZN { background-position: -125px -185px; } .flags-MAD { background-position: -165px -185px; } .flags-MNT { background-position: -245px -185px; } .flags-MDL { background-position: -325px -185px; } .flags-MXN { background-position: -405px -185px; } .flags-MUR { background-position: -445px -185px; } .flags-MRO { background-position: -5px -215px; } .flags-MVR { background-position: -165px -215px; } .flags-MYR { background-position: -205px -215px; } .flags-MWK { background-position: -245px -215px; } .flags-MGA { background-position: -285px -215px; } .flags-MKD { background-position: -325px -215px; } .flags-LTL { background-position: -405px -215px; } .flags-LYD { background-position: -5px -245px; } .flags-LRD { background-position: -45px -245px; } .flags-LSL { background-position: -85px -245px; } .flags-LBP { background-position: -125px -245px; } .flags-LVL { background-position: -165px -245px; } .flags-LAK { background-position: -205px -245px; } .flags-KGS { background-position: -245px -245px; } .flags-KWD { background-position: -285px -245px; } .flags-KRW { background-position: -365px -245px; } .flags-KPW { background-position: -405px -245px; } .flags-KES { background-position: -5px -275px; } .flags-KZT { background-position: -45px -275px; } .flags-JOD { background-position: -85px -275px; } .flags-JPY { background-position: -125px -275px; } .flags-JMD { background-position: -165px -275px; } .flags-ILS { background-position: -245px -275px; } .flags-IQD { background-position: -325px -275px; } .flags-IRR { background-position: -365px -275px; } .flags-IDR { background-position: -405px -275px; } .flags-INR { background-position: -445px -275px; } .flags-ISK { background-position: -5px -305px; } .flags-HUF { background-position: -45px -305px; } .flags-HNL { background-position: -85px -305px; } .flags-HTG { background-position: -125px -305px; } .flags-GYD { background-position: -165px -305px; } .flags-GNF { background-position: -205px -305px; } .flags-GTQ { background-position: -285px -305px; } .flags-GHS { background-position: -405px -305px; } .flags-GEL { background-position: -5px -335px; } .flags-GMD { background-position: -45px -335px; } .flags-XAF { background-position: -85px -335px; } .flags-FJD { background-position: -205px -335px; } .flags-ETB { background-position: -245px -335px; } .flags-ERN { background-position: -325px -335px; } .flags-SVC { background-position: -405px -335px; } .flags-EGP { background-position: -445px -335px; } .flags-DOP { background-position: -85px -365px; } .flags-DJF { background-position: -165px -365px; } .flags-DKK { background-position: -205px -365px; } .flags-CZK { background-position: -245px -365px; } .flags-CUC { background-position: -325px -365px; } .flags-CUP { background-position: -325px -365px; } .flags-HRK { background-position: -365px -365px; } .flags-CRC { background-position: -445px -365px; } .flags-CDF { background-position: -45px -395px; } .flags-KMF { background-position: -85px -395px; } .flags-COP { background-position: -125px -395px; } .flags-CNY { background-position: -165px -395px; } .flags-CLP { background-position: -205px -395px; } .flags-CVE { background-position: -325px -395px; } .flags-CAD { background-position: -365px -395px; } .flags-KHR { background-position: -445px -395px; } .flags-BIF { background-position: -5px -425px; } .flags-XOF { background-position: -45px -425px; } .flags-BGN { background-position: -85px -425px; } .flags-BND { background-position: -125px -425px; } .flags-BRL { background-position: -165px -425px; } .flags-BWP { background-position: -205px -425px; } .flags-BAM { background-position: -245px -425px; } .flags-BOB { background-position: -285px -425px; } .flags-BTN { background-position: -325px -425px; } .flags-BZD { background-position: -405px -425px; } .flags-BYN { background-position: -5px -455px; } .flags-BBD { background-position: -45px -455px; } .flags-BDT { background-position: -85px -455px; } .flags-BHD { background-position: -125px -455px; } .flags-BSD { background-position: -165px -455px; } .flags-AZN { background-position: -205px -455px; } .flags-AUD { background-position: -285px -455px; } .flags-AMD { background-position: -325px -455px; } .flags-ARS { background-position: -365px -455px; } .flags-DZD { background-position: -5px -485px; } .flags-ALL { background-position: -45px -485px; } .flags-AFN { background-position: -85px -485px; } .flags-BMD { background-position: -125px -485px; } .flags-EUR { background-position: -165px -485px; } .flags-XPT { background-position: -205px -485px; } .flags-XAU { background-position: -245px -485px; } .flags-XAG { background-position: -285px -485px; } .flags-XPF { background-position: -325px -485px; } .flags-AWG { background-position: -405px -485px; } .flags-AOA { background-position: -445px -485px; } .flags-SHP { background-position: -485px -5px; } .flags-MOP { background-position: -485px -35px; } .flags-JEP { background-position: -485px -65px; } .flags-IMP { background-position: -485px -95px; } .flags-IMF { background-position: -485px -125px; } .flags-HKD { background-position: -485px -155px; } .flags-GGP { background-position: -485px -185px; } .flags-GIP { background-position: -485px -215px; } .flags-FKP { background-position: -485px -245px; } .flags-ANG { background-position: -485px -275px; } .flags-KYD { background-position: -485px -305px; }