/* -------------------------------------------------------------------------- *\ GROOVE BASE THEME Created by Groove Commerce This is a boilerplate theme used as a starting point when building BigCommerce themes using Stencil. This theme is based on the Cornerstone theme, but stripped down for only our customers specific needs. This file is used to load globally used elements and basic styling. It is loaded in the base.html for site wide use. \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ BASE FILES These files establish the base of the theme, they include variables, mixins, resets, functions, and fonts. Variables, Functions, and Mixins should be loaded with every stylesheet. Fonts and resets should only be loaded in the global-elements.scss file to reduce the overall file size. \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ FONTS \* -------------------------------------------------------------------------- */ @font-face { font-family: 'bellyswing'; src: url("../fonts/bellyswing-webfont.otf") format("otf"), url("../fonts/bellyswing-webfont.woff2") format("woff2"), url("../fonts/bellyswing-webfont.woff") format("woff"); font-display: swap; } @font-face { font-family: 'bellyswing'; src: url("../fonts/bellyswing_italic-webfont.otf") format("otf"), url("../fonts/bellyswing_italic-webfont.woff2") format("woff2"), url("../fonts/bellyswing_italic-webfont.woff") format("woff"); font-style: italic; font-display: swap; } @font-face { font-family: "ico"; src: url("../fonts/ico.eot?a2c6c09773671945479e61924d668b14"); src: url("../fonts/ico.eot?a2c6c09773671945479e61924d668b14#iefix") format("embedded-opentype"), url("../fonts/ico.woff?a2c6c09773671945479e61924d668b14") format("woff"), url("../fonts/ico.ttf?a2c6c09773671945479e61924d668b14") format("truetype"); font-weight: normal; font-style: normal; } [class^="icon-"]:before, [class*=" icon-"]:before { font-family: "ico"; display: inline-block; line-height: 1; font-weight: normal; font-style: normal; speak: none; text-decoration: inherit; text-transform: none; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-account:before { content: "\f101"; } .icon-arrow-down:before { content: "\f102"; } .icon-arrow-left:before { content: "\f103"; } .icon-arrow-long-left:before { content: "\f104"; } .icon-arrow-long-right:before { content: "\f105"; } .icon-arrow-right:before { content: "\f106"; } .icon-brand-facebook:before { content: "\f107"; } .icon-brand-instagram:before { content: "\f108"; } .icon-brand-linkedin:before { content: "\f109"; } .icon-brand-pinterest:before { content: "\f10a"; } .icon-brand-snapchat:before { content: "\f10b"; } .icon-brand-tiktok:before { content: "\f10c"; } .icon-brand-twitter:before { content: "\f10d"; } .icon-brand-youtube:before { content: "\f10e"; } .icon-cart-plus:before { content: "\f10f"; } .icon-cart:before { content: "\f110"; } .icon-check-circle:before { content: "\f111"; } .icon-chevron-down:before { content: "\f112"; } .icon-chevron-left:before { content: "\f113"; } .icon-chevron-right:before { content: "\f114"; } .icon-chevron-up:before { content: "\f115"; } .icon-download:before { content: "\f116"; } .icon-envelope-open:before { content: "\f117"; } .icon-envelope:before { content: "\f118"; } .icon-exclamation-triangle:before { content: "\f119"; } .icon-ice:before { content: "\f11a"; } .icon-info-circle:before { content: "\f11b"; } .icon-map-marker:before { content: "\f11c"; } .icon-minus:before { content: "\f11d"; } .icon-online:before { content: "\f11e"; } .icon-package:before { content: "\f11f"; } .icon-pencil:before { content: "\f120"; } .icon-phone:before { content: "\f121"; } .icon-plus:before { content: "\f122"; } .icon-print:before { content: "\f123"; } .icon-question-circle:before { content: "\f124"; } .icon-rss:before { content: "\f125"; } .icon-search:before { content: "\f126"; } .icon-share:before { content: "\f127"; } .icon-star-empty:before { content: "\f128"; } .icon-star-full:before { content: "\f129"; } .icon-times:before { content: "\f12a"; } .icon-trash:before { content: "\f12b"; } .icon-user:before { content: "\f12c"; } /* -------------------------------------------------------------------------- *\ GLOBAL SITE VARIABLES ORGANIZATION OF OUR CSS DEFINITIONS GROUP CLASS DEFINITIONS BY THE FOLLOWING TYPES POSITIONING (DISPLAY, FLEX, FLEX ITEM, POSITION, LEFT, TOP, TRANSFORM) BOX SIZING (WIDTH, HEIGHT, MARGIN, PADDING) BOX STYLING (OPACITY, BACKGROUND, BOX SHADOW, BORDER, BORDER RADIUS, OVERFLOW) FONT STYLING (FONT, FONT-FAMILY, FONT-STYLE, FONT-SIZE, LINE-HEIGHT, FONT-WEIGHT) TEXT STYLING (TEXT-DECORATION, TEXT-TRANSFORM, TEXT-ALIGN, TEXT-SHADOW) OTHER (TRANSITONS, ANIMATIONS, CURSOR) IF A MIXIN IS AVAILABLE USE THAT INSTEAD WRITING ALL PROPERTIES OUT \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ COLORS IT'S IMPORTANT TO USE A GENERIC NAMING SYSTEM FOR COLORS USED THROUGHOUT THE SITE. THIS ALLOWS US TO BUILD UPDATE VARIABLES IN THE FUTURE WITHOUT HAVING POTENTIAL ISSUES LIKE RED BECOMING GREEN DUE TO A RE-BRAND. Primary, Seoncdary, and Tertiary refer to the most used, second most used and third most used color in the pallete. These are generally shades of gray used to set the color of copy and backgrounds of elements. Aceent colors are used to set the brand colors used throughout the web design. These are commonly used to accent an element like when used as a border or design element to a heading, or draw the users attention to a call to action like a button. The reason we want to stick to this style naming convention for colors is so that if the branding of the company changes, we can quickly update a variable from a light shade of green to a WCAG compliant shade of green and not have to do a find and replace for $lt-green and change it to $dk-green. \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ FONT SETTINGS These variables define the font settings used throughout the website. Setting the copies font family, size, color and line-height allows us to use these variables throughout our files and ensure we are consistently setting things up. These are all used in the reset file on the body and html element, which should mean the only time you need to re-use these are when you are resetting a more specific class back to these values. The headings file under structure utilize the heading variables. \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ MEDIA QUERIES Common media queries that we utilize throughout the SCSS for the website. \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ GRID SETUP Grid variables that are used to set the base variables of the Grid Mixins. \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ GUTTER This is probably the most used set of variables found throuhgout the base styling of the component library. Utilizing a standard set of gutters for spacing will help maintain consistency throughout the website. Most of our designers use at least 3 common sizes for gutters in their designs. We utilize the Normal, Small and Large gutters to create the spacing for all of our components that have sm and lg variations. The core styling utilizes the $gutter variable, while the sm and lg utilize $gutterSm and $gutterLg respectively. \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ FEED SPACING FOR CARDS \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ GLOBAL MIXINS These are a common set of mixins that are commonly \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ SCREEN READER ONLY This mixin hides all content from the view, but keeps it audible for screen readers. \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ CLEARS Both of the following mixins can be used to clear floated elements. Clearfix makes the before and after of the wrapping element able to clear the floats contained within it. This is good to use when all floated elements are contained with in a single parent element. Clear makes the element itself clear the floats, this is used when an element is following a floated element and needs to be on a new row. While floating is older and not as prefered as using newer techniques for page layout, it still serves a useful purpose and should be used appropriately. \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ THE APPEARANCE MIXIN This is used to reset an objects experience of the default settings applied by the browser. \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ THE HOVER/FOCUS MIXIN 90% of the time when a hover psuedo class is added to an element the focus psuedo class should be defined as well. These psuedo classes are also generally the same styles. We've created the hover mixin to apply both the hover & focus states. This MUST be used whenever defining a hover state, unless the focus state requires different behavior to be applied. \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ THE TRAMSFORM MIXINS Transform is used to move an element on the page, without triggering a re-paint. This is key when animating either through animate or transition on an element, the animation will be faster and work better when using the transform property rather than the left, top, right, and bottom properties. The transform mixins are a set of commonly coupled CSS 3 properties used together. They are each individually defined because they don't all need to be used all the time. Transform is a must for all of the others to work, and the others are useless without it. Transform Origin will change the location where the transform will start to take effect from. Perspective will be be amount of distance in space the transform should be applied from. Backface is used to hide the backside of an element when it's rotated and the back of the parent element is not visible. Without this applied, the back side of the element will appear behind the front of the element. \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ THE POSITION MIXIN The position mixin was created to help position elements by combining severally coupled properties into the mixin. When positioning something relative, absolute, fixed, or sticky we almost always are defining the z-index, so that is our second variable. Setting the variable to null will ignore the z-index property completely and the z-index will be inherited from it's natural position in the dom. Otherwise pass in an integer and the z-index will be defined. The next variable applies the direction, this can either be an array of directions passed in like (top, left), or it can be a single direction like left. The next variable applies the coordinates corresponding to the direction. For each direction passed in, a corresponding coordinate needs to accompany it. For example if (top, left) is set as our direction, then (0, 0) would set the top: 0; left: 0; properties. The last variable to be passed in is the transform property which will call the transform mixin. Only the position variable is required to make the mixin wor, which is why we default to relative, the rest are preset to null. \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ THE FLEX MIXINS This group of mixins can be used to ensure all vendor prefixing is correctly applied to support older browsers. In addition, we couple the common properties that work with flex. When the flex mixin is called, the first property will set the display of the object to flex. The first variable allows you to set the justify content property which aligns the child elements accross the first axis. Remember: - when setting flex-flow to column the first axis is the Y-axis - when setting flex-flow to row the first axis is the X-axis The second variable allows you to set the align items property which aligns the child elements accross the second axis. Remember: - when setting flex-flow to column the second axis is the Y-axis - when setting flex-flow to row the second axis is the X-axis The third variable allows you to set align content, which has no effect when there is only one line of items, The final variable is flex-flow which allows you to set the direction and whether the items inside can wrap or not. The Flex Item mixin is used to apply properties to the flexed item. The first three variables are required in order for this mixin to work. The grow variable tells the flex item whether it's allowed to grow to fill the unused space. The shrink variable tells the flex item whether it's allowed to shrink to accomodate more elements within the space. The flex basis variable defines how much space the element should take up initially, then scale proportionatly based on that with the other sibling elements. Generally we leave this set to auto. The final variable defines the order for the element to appear. \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ THE CSS COLUMNS MIXIN This is used to set a parent element to X number of columns. This is not to be confused with our grid columns, or grid-template-columns mixins. The multicolumn mixin breaks the content contained within a parent element into multiple columns. This is helpful for breaking lists or paragraphs into multiple columns. The first variable defines how many columns are desired. The second variable defines the space between each column. The third variable defines the rule styling (same definition as a border) applied between each column. \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ THE SET WIDTH MIXIN This mixin is used to set the width of an element based on a group of media queries and their corresponding widths. For example the div within the header, section, and footer elements all use this mixin to set the width of the element at a corresponding media query so they are all styled with the same width. The first variable is a set of media queries, the first item in the array will be set as the default. The following items will all be set to their corresponding media queries. The second variable is an array of widths, normally % based, but could be any value acceptable to be defined in the width property. \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ THE CSS3 GRID MIXINS This set of mixins are used to build grid layouts using the CSS3 Grid property. Grid Columns is used to set the columns on a parent element. Grid Rows is used to set the rows on a parent element. Grid Column Gap will define the space between the columns. Grid Row Gap will define the space between the rows. Grid will combine all of the above mixins into 1 mixin used to define the base of the parent item. The above mixins can be used on their own to change their values at various media queries. IE11 does support grid, so we can utilize it to create complex layouts, however there are some elements of the grid which it does not support. This mixin will fix all of that and write out the proper settings to support IE. We utilize the @supports feature which is not supported by IE11, but is supported by all browsers that also happen to use grid. So using this feature we can reset some of the settings applied to IE11. The grid item mixin will set specific values needed for the placement of the item itself. \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ THE GRID LAYOUT MIXINS This mixin is used to create a row and column based grid structure, like the one found in bootstrap, actually exactly like the one found in bootstrap. The Set Col Widths mixin is looped over and sets the width based of an element based on how many columns are defined. Generate Columns is used to loop over each media query and then calls the Set Col Widths mixin to build each group out. \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ CSS 3 EFFECTS These mixins in the past have had lots of browser prefixes to make them work across all the browsers. We will maintain the prefixes, and remove them as needed. The mixins will continue to work, as to not break the code, but as older browsers decline in use, we will remove unnecessary prefixes to help keep our file size limited. Effects include: * Box Shadow * Animations * Filters * Tranistions \* -------------------------------------------------------------------------- */ /*--- FILTERS ---*/ /*--- TRANSITION ---*/ /* -------------------------------------------------------------------------- *\ THE FONT SIZE MIXIN This mixin was originally used to support REM and PX based measurement for fonts. However, since we have moved to a completely rem based measurement this mixin is less likely to be used. This is marked for deletion in an upcoming update, but we want to keep this around for a little while longer. \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ THE BUTTON MIXIN This mixin controls the base button styles since there are several different buttons class structures used throughout BigCommerce. \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ BORDER MIXIN This mixin creates border around given selector for testing purposes \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ FOCUS TOOLTIP This mixin creates a tooltip on focus for accessibility \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ COMMON RESETS TO HELP MAKE BROWSERS DISPLAY MORE CONSISTANTLY \* -------------------------------------------------------------------------- */ * { box-sizing: border-box; padding: 0; margin: 0; } /* -------------------------------------------------------------------------- *\ RESETS THE FONT SIZE TO BE BASE 10 \* -------------------------------------------------------------------------- */ html { font-size: 100%; scroll-behavior: smooth; height: 100%; } /* -------------------------------------------------------------------------- *\ PREVENTS HORIZONTAL SCROLLING WHEN IT'S UNDESIRED \* -------------------------------------------------------------------------- */ @media (max-width: 1059.9px) { html, body { width: 100%; } } /* -------------------------------------------------------------------------- *\ REMOVES OUTLINE ON FOCUS \* -------------------------------------------------------------------------- */ :focus { outline: none; } /* -------------------------------------------------------------------------- *\ ANCHOR STYLES SETS A TRANSITION DEFAULT HERE FOR ALL ANCHORS. SETS UP THE SKIP CONTENT BUTTON THAT SHOULD BE FOUND AS THE FIRST ELEMENT AFTER THE OPENING BODY TAG ON ALL PAGES. \* -------------------------------------------------------------------------- */ a.skip-content { position: fixed; z-index: 10000; left: 50%; top: 0; -webkit-transform: translate(-50%, -101%); -ms-transform: translate(-50%, -101%); transform: translate(-50%, -101%); padding: 0.75rem; background: #fff; color: #00369d; transition: transform 0.25s, background 0.25s, color 0.25s; } a.skip-content:focus { background: #00369d; color: #fff; -webkit-transform: translate(-50%, 1.875rem); -ms-transform: translate(-50%, 1.875rem); transform: translate(-50%, 1.875rem); } @media print { a.skip-content { display: none; } } /* -------------------------------------------------------------------------- *\ RESETS THE BUTTON TO BE JUST LIKE ALL OTHER INLINE ELEMENTS \* -------------------------------------------------------------------------- */ button { background: none; border: none; font-size: 1em; font-family: "Futura-PT", Helvetica, Arial, sans-serif; cursor: pointer; } /* -------------------------------------------------------------------------- *\ RESETS STYLES ON INPUT ELEMENTS FOR FORMS \* -------------------------------------------------------------------------- */ input, select, textarea { border-radius: 0px; font-family: "Futura-PT", Helvetica, Arial, sans-serif; } /* -------------------------------------------------------------------------- *\ PROVIDES A CLASS FOR SCREEN READER ONLY ELEMENTS \* -------------------------------------------------------------------------- */ .sr-only { position: absolute; width: 1px !important; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip: rect(0, 0, 0, 0); } .icons-svg-sprite { display: none; } /* -------------------------------------------------------------------------- *\ PROVIDES A CLASS FOR FOCUSED ELEMENTS -- disabled by default \* -------------------------------------------------------------------------- */ [contenteditable="true"]:focus, [href]:focus, [tabindex]:not([tabindex="-1"]):focus, button:focus, details:focus, input:focus, select:focus, textarea:focus { outline: 2px solid #2e8fff !important; outline-offset: 1px !important; } input:focus + label { outline: 2px solid #2e8fff !important; outline-offset: 1px !important; } /* -------------------------------------------------------------------------- *\ GLOBAL ELEMENTS These files establish global elements that appear throughout the website. They include the header, footer, grid, section, base copy styling and modals. \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ ACCORDION STYLING This establishes global styles used for all Accordions Styling. For custom variations of the accordions, refer to their specific styling located in their respective files. We utilize a modified version of W3C Accordions, for documentation please see: https://www.w3.org/TR/wai-aria-practices-1.1/examples/accordion/accordion.html \* -------------------------------------------------------------------------- */ .accordion dt button { position: relative; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: space-between; align-items: center; flex-flow: row nowrap; width: 100%; text-align: left; background: #eff1f5; padding: 0.375rem 0.5rem; } .accordion dt button span { display: block; transition: all .25s linear; } .accordion dt button[aria-expanded="true"] span { transform: rotate(45deg) rotate(90deg); color: #b4bcca; } .accordion dt button > * { pointer-events: none; } .accordion dd { padding: 0; } .accordion dd [hidden] { display: none; } .aria-description--hidden { position: absolute; top: 0; left: 0; height: 1px; width: 1px; overflow: hidden; margin-left: -10000px; } /* -------------------------------------------------------------------------- *\ GLOBAL ELEMENTS - ALERTS \* -------------------------------------------------------------------------- */ .alertBox { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: flex-start; align-items: center; flex-flow: row nowrap; padding: 0.5rem; margin: 0 0 1.5rem; background: #eff1f5; border: 0.0625rem solid #b4bcca; border-radius: 6.25rem; } .alertBox .icon { color: #ed6c00; } .alertBox > * { padding: 0.5rem; line-height: 1.2em; } .alertBox .fas { margin: 0 0.75rem 0 0; } .alertBox p { margin: 0; font-size: 1rem; } .alertBox.error { background: #ffe6e6; color: #FF0000; border-color: #FF0000; } .alertBox.success { background: #e6ffe6; color: green; border-color: green; } .alertBox.info { background: #ebf5ff; color: #004085; border-color: #004085; } /* -------------------------------------------------------------------------- *\ Buttons These are used throughout the website to create a call to action for another element like submitting a form, linking to another page, or linking to another element on the same page. GENERIC BUTTON STYLES This sets up the base of all our styles, it's also the btn-default styles \* -------------------------------------------------------------------------- */ [class*="btn-"], .button { appearance: none; position: relative; display: inline-flex; flex-flow: row nowrap; justify-content: center; align-items: center; padding: 0 2rem; margin: 0; border: 0.0625rem solid currentColor; border-radius: 6.25rem; font-size: 1.25rem; height: 3rem; text-align: center; text-decoration: none; width: auto; font-family: "bellyswing", Helvetica, Arial, sans-serif; text-transform: uppercase; letter-spacing: 0.04em; /* ---------------------------------------------------------------------- *\ Button Arrow Options @import 'icon/_icon-top'; @import 'icon/_icon-bottom'; @import 'icon/_icon-left'; @import 'icon/_icon-right'; \* ---------------------------------------------------------------------- */ } [class*="btn-"] svg, .button svg { display: inline-block; width: 1.25rem; height: 1rem; fill: currentColor; } [class*="btn-"]:hover, [class*="btn-"]:focus, [class*="btn-"].hover, .button:hover, .button:focus, .button.hover { text-decoration: none; } [class*="btn-"] [class*="icon-"], .button [class*="icon-"] { margin: 0 0.5rem 0 0; } [class*="btn-"]:hover, [class*="btn-"]:focus, [class*="btn-"].hover, .button:hover, .button:focus, .button.hover { cursor: pointer; } /* -------------------------------------------------------------------------- *\ Button Color Options @import 'buttons/colors/primary'; @import 'buttons/colors/secondary'; @import 'buttons/colors/tertiary'; @import 'buttons/colors/text'; @import 'buttons/dropdown'; @import 'buttons/colors/tag'; @import 'buttons/colors/success'; @import 'buttons/colors/danger'; @import 'buttons/colors/warning'; \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ Button - Primary \* -------------------------------------------------------------------------- */ :root { --btnColor: #00369d; --btnColor2: #CB4718; } .btn-primary, .button--primary { background: transparent; border: 1px dashed var(--btnColor); color: #fff; white-space: nowrap; position: relative; margin-bottom: 0.3125rem; top: 4px; left: -4px; transition: all .2s ease; } .btn-primary::after, .button--primary::after { content: attr(title); background: var(--btnColor); color: #fff; border: 1px solid var(--btnColor); white-space: nowrap; position: absolute; top: -6px; bottom: 4px; left: 3px; right: -5px; border-radius: 6.25rem; transition: all .2s ease; display: inline-flex; flex-flow: row nowrap; justify-content: center; align-items: center; } .btn-primary:hover, .btn-primary:focus, .btn-primary.hover, .button--primary:hover, .button--primary:focus, .button--primary.hover { transform: translate(4px, -5px); color: transparent; } .btn-primary:hover::after, .btn-primary:focus::after, .btn-primary.hover::after, .button--primary:hover::after, .button--primary:focus::after, .button--primary.hover::after { transform: translate(-4px, 5px); background: transparent; color: var(--btnColor); border: 1px dashed transparent; } .btn-primary:active, .btn-primary.active, .button--primary:active, .button--primary.active { transform: translate(4px, -5px); } .btn-primary:active::after, .btn-primary.active::after, .button--primary:active::after, .button--primary.active::after { transform: translate(-4px, 5px); background: #001338; color: #fff; border: 1px solid #70b3e3; box-shadow: inset 0px 0px 0px 1px #70b3e3; } .btn-primary[disabled], .button--primary[disabled] { cursor: not-allowed; opacity: .3; } .btn-primary[disabled]:hover, .btn-primary[disabled]:focus, .btn-primary[disabled].hover, .button--primary[disabled]:hover, .button--primary[disabled]:focus, .button--primary[disabled].hover { transform: none; } .btn-primary[disabled]:hover::after, .btn-primary[disabled]:focus::after, .btn-primary[disabled].hover::after, .button--primary[disabled]:hover::after, .button--primary[disabled]:focus::after, .button--primary[disabled].hover::after { transform: none; background-color: var(--btnColor); color: #fff; } .invert .btn-primary, .invert .button--primary { background: transparent; border-color: #fff; color: transparent; } .invert .btn-primary::after, .invert .button--primary::after { border: 1px solid #70b3e3; background-color: #70b3e3; color: var(--btnColor); } .invert .btn-primary:hover::after, .invert .btn-primary:focus::after, .invert .btn-primary.hover::after, .invert .button--primary:hover::after, .invert .button--primary:focus::after, .invert .button--primary.hover::after { background-color: transparent; color: #fff; border: transparent; } .invert .btn-primary:active::after, .invert .btn-primary.active::after, .invert .button--primary:active::after, .invert .button--primary.active::after { background-color: #001338; color: #fff; border: 1px solid #70b3e3; } .invert .btn-primary[disabled], .invert .button--primary[disabled] { cursor: not-allowed; opacity: .3; } .invert .btn-primary[disabled]:hover, .invert .btn-primary[disabled]:focus, .invert .btn-primary[disabled].hover, .invert .button--primary[disabled]:hover, .invert .button--primary[disabled]:focus, .invert .button--primary[disabled].hover { transform: none; } .invert .btn-primary[disabled]:hover::after, .invert .btn-primary[disabled]:focus::after, .invert .btn-primary[disabled].hover::after, .invert .button--primary[disabled]:hover::after, .invert .button--primary[disabled]:focus::after, .invert .button--primary[disabled].hover::after { transform: none; background-color: #70b3e3; color: var(--btnColor); } #form-action-addToCart { padding-left: 1.5rem; padding-right: 1.5rem; width: 11.875rem; border: 1px dashed var(--btnColor2); } #form-action-addToCart::after { background: var(--btnColor2); border: 1px solid var(--btnColor2); } #form-action-addToCart:hover::after, #form-action-addToCart:focus::after, #form-action-addToCart.hover::after { background: transparent; color: var(--btnColor2); } /* -------------------------------------------------------------------------- *\ Button - Secondary \* -------------------------------------------------------------------------- */ .btn-secondary, .button--secondary { background: #fff; color: #00369d; border: 1px dashed #00369d; transition: all .2s ease; font-size: 1.125rem; height: 2.25rem; padding: 0 1.5rem; } .btn-secondary:hover, .btn-secondary:focus, .btn-secondary.hover, .button--secondary:hover, .button--secondary:focus, .button--secondary.hover { background: #00369d; color: #fff; } .btn-secondary:active, .btn-secondary.active, .button--secondary:active, .button--secondary.active { background: #001338; color: #fff; box-shadow: inset 0px 0px 0px 1px #70b3e3; border: 1px solid #70b3e3; } .btn-secondary[disabled], .button--secondary[disabled] { cursor: not-allowed; opacity: .3; } .btn-secondary[disabled]:hover, .btn-secondary[disabled]:focus, .btn-secondary[disabled].hover, .button--secondary[disabled]:hover, .button--secondary[disabled]:focus, .button--secondary[disabled].hover { background: #fff; color: #00369d; } .invert .btn-secondary, .invert .button--secondary { border-color: #fff; background: transparent; color: #fff; } .invert .btn-secondary:hover, .invert .btn-secondary:focus, .invert .btn-secondary.hover, .invert .button--secondary:hover, .invert .button--secondary:focus, .invert .button--secondary.hover { background-color: #fff; border: 1px solid #fff; color: #00369d; } .invert .btn-secondary:active, .invert .btn-secondary.active, .invert .button--secondary:active, .invert .button--secondary.active { background: #fff; border-color: #70b3e3; color: #00369d; } .invert .btn-secondary[disabled], .invert .button--secondary[disabled] { cursor: not-allowed; opacity: .3; } .invert .btn-secondary[disabled]:hover, .invert .btn-secondary[disabled]:focus, .invert .btn-secondary[disabled].hover, .invert .button--secondary[disabled]:hover, .invert .button--secondary[disabled]:focus, .invert .button--secondary[disabled].hover { border-color: #fff; background: transparent; color: #fff; } /* -------------------------------------------------------------------------- *\ Button - Tertiary \* -------------------------------------------------------------------------- */ .btn-tertiary, .button--tertiary { background: #00748b; border-color: #00748b; color: #00369d; } .btn-tertiary:hover, .btn-tertiary:focus, .btn-tertiary.hover, .button--tertiary:hover, .button--tertiary:focus, .button--tertiary.hover { background: #fff; color: #00748b; } .btn-tertiary:active, .button--tertiary:active { background: #fff; color: #00748b; } /* -------------------------------------------------------------------------- *\ Button - Text \* -------------------------------------------------------------------------- */ .btn-text { border: 0; padding: 0; margin: 0; color: #00369d; } .btn-text:hover, .btn-text:focus, .btn-text.hover { color: #70b3e3; } .btn-text:active { color: #001338; } .btn-dropdown { position: relative; z-index: 1; } .btn-dropdown:hover > ul { display: block; } .btn-dropdown:focus-within > ul { display: block; } .btn-dropdown ul { display: none; position: absolute; left: 0 !important; top: 100% !important; border: 0.0625rem solid #00369d; background: #fff; overflow: hidden; width: 100%; } .btn-dropdown ul li { padding: 0; } .btn-dropdown ul li:before { display: none; } .btn-dropdown ul li + li { border-top: 0.0625rem solid #00369d; margin: 0; } .btn-dropdown ul a, .btn-dropdown ul button, .btn-dropdown ul input[type="button"], .btn-dropdown ul input[type="submit"] { display: block; padding: 0.9375rem 2.0625rem; margin: 0; width: 100%; background: none; border: none; } .btn-dropdown ul a:hover, .btn-dropdown ul a:focus, .btn-dropdown ul a.hover, .btn-dropdown ul button:hover, .btn-dropdown ul button:focus, .btn-dropdown ul button.hover, .btn-dropdown ul input[type="button"]:hover, .btn-dropdown ul input[type="button"]:focus, .btn-dropdown ul input[type="button"].hover, .btn-dropdown ul input[type="submit"]:hover, .btn-dropdown ul input[type="submit"]:focus, .btn-dropdown ul input[type="submit"].hover { background: #00369d; color: #fff; } .btn-dropdown [class*="btn-"][aria-expanded="true"] { border-radius: 1.4375rem 1.4375rem 0 0; } .btn-dropdown [class*="btn-"][aria-expanded="true"] + ul { display: block; } /* -------------------------------------------------------------------------- *\ CAROUSEL STYLING This establishes global styles used for all Carousel Styling. For custom variations of the carousel, refer to their specific styling located in their respective files. We utilize slick slider for carousels, for documentation please see: https://kenwheeler.github.io/slick/ \* -------------------------------------------------------------------------- */ [data-slick] { display: flex; flex-direction: row; opacity: 0; } [data-slick].slick-initialized { opacity: 1; } .pagebuilder [data-slick] { opacity: 1; } .carousel-heading-container button { display: none; } .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; width: 100%; } .slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; width: 100%; } .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); display: flex; } .slick-track { position: relative; left: 0; top: 0; display: block; margin-left: auto; margin-right: auto; } .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; padding: 0; display: none; } [dir="rtl"] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } /* -------------------------------------------------------------------------- *\ CAROUSEL EXTRAS \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ CAROUSEL > ARROWS \* -------------------------------------------------------------------------- */ .slick-arrow { height: 3.75rem; width: 3.75rem; border-radius: 3.75rem; font-size: 1.0625rem; background: #00369d; color: #fff; transition: background .25s linear; z-index: 1; position: relative; right: auto; left: auto; flex-shrink: 1; order: 4; } .slick-arrow:hover { background: #001338; color: #fff; } .slick-arrow:active { background: #000; border: 2px solid #70b3e3; } .slick-arrow.slick-hidden { display: none; } .slick-arrow.slick-prev { margin-right: 0.5rem; } .slick-disabled { opacity: 0.3; } .slick-disabled .carousel-tooltip { display: none; } .slick-disabled:hover { cursor: not-allowed; } .arrows-pos-side .slick-arrow { position: absolute; top: 45%; } .arrows-pos-side .slick-arrow.slick-prev { left: 0.9375rem; } .arrows-pos-side .slick-arrow.slick-next { right: 0.9375rem; } /* -------------------------------------------------------------------------- *\ CAROUSEL > DOTS \* -------------------------------------------------------------------------- */ .slick-dots { padding-top: 2rem; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: center; align-items: center; flex-flow: row nowrap; display: flex !important; } .slick-dots li { margin: 0 0.25rem; padding: 0; font-size: 0; } .slick-dots li button { display: block; width: 0.625rem; height: 0.625rem; border-radius: 0.5rem; background: #b4bcca; } .slick-dots li button:hover { background: #56637b; } .slick-dots li:before { display: none; } .slick-dots li.slick-active button { background: #00369d; } .carousel-tooltip { display: block; position: relative; } .carousel-tooltip:before { content: " "; position: absolute; right: 0; top: 50%; border-width: 0.625rem; border-style: solid; border-color: transparent transparent #70b3e3 transparent; } .carousel-tooltip:after { content: attr(aria-label); padding: 0.25rem 0.375rem; background-color: #70b3e3; color: #000; position: absolute; font-size: 1rem; white-space: nowrap; right: 0; top: 100%; cursor: default; border-radius: 0.5rem; } .carousel-tooltip:before, .carousel-tooltip:after { display: none; } .carousel-tooltip:focus:before, .carousel-tooltip:focus:after { display: block; } .carousel-tooltip:after { padding: 0.5rem; top: 0.625rem; } .slick-prev:focus .carousel-tooltip:before, .slick-prev:focus .carousel-tooltip:after, .slick-next:focus .carousel-tooltip:before, .slick-next:focus .carousel-tooltip:after, .slick-dots button:focus .carousel-tooltip:before, .slick-dots button:focus .carousel-tooltip:after { display: block; } .slick-prev .carousel-tooltip, .slick-next .carousel-tooltip { top: 1.125rem; right: 1.125rem; } .slick-prev .carousel-tooltip:before, .slick-next .carousel-tooltip:before { top: -0.4375rem; } .slick-prev .carousel-tooltip:before { right: -0.125rem; } .slick-prev .carousel-tooltip:after { right: auto; left: -0.3125rem; } .slick-next .carousel-tooltip:after { right: -0.3125rem; } .slick-dots button .carousel-tooltip { top: 0.5rem; } .slick-dots button .carousel-tooltip:before, .slick-dots button .carousel-tooltip:after { right: 50%; transform: translateX(50%); } .slick-dots button .carousel-tooltip:before { top: -0.4375rem; } .compare-container { position: sticky; display: none; pointer-events: inherit; bottom: 0; width: 100%; height: auto; text-align: center; z-index: 1001; transition: bottom 0.5s cubic-bezier(0.3, -0.01, 0.49, 1); background-color: #eff1f5; font-family: "bellyswing", Helvetica, Arial, sans-serif; text-transform: uppercase; font-weight: 400; opacity: 0; padding: 1.5rem 0; } @media (min-width: 768px) { .compare-container { padding: 0; height: 6.25rem; } } .compare-container.show { opacity: 1; display: block; } .compare-container .container { display: flex; flex-direction: column; align-items: center; justify-content: space-between; position: relative; } @media (min-width: 768px) { .compare-container .container { flex-direction: row; } } .compare-container .text { position: relative; width: auto; color: #000; font-weight: 400; font-size: 1.75rem; line-height: 1.875rem; font-family: "bellyswing", Helvetica, Arial, sans-serif; text-transform: uppercase; display: flex; flex-direction: row; align-items: center; margin: 0 0 1.5rem; } @media (min-width: 768px) { .compare-container .text { padding: 0 0 0 11.3125rem; height: 6.25rem; margin: 0; } } .compare-container .text img { display: none; width: 9.4375rem; position: absolute; bottom: 0; left: 0; } @media (min-width: 768px) { .compare-container .text img { display: block; } } .compare-container .text .countPill--positive { display: inline-block; margin: 0 0.5rem 0 0; } .compare-grid > div > div > div { border: 2px solid fuchsia; display: flex; flex-direction: column; } .heading { font-size: 1.5rem; } @media (min-width: 992px) { .heading { font-size: 2.25rem; } } @media (max-width: 767.9px) { .page-content { overflow: scroll; } } .compareTable { table-layout: fixed; width: 100%; margin-top: 2rem; } .compareTable-row { vertical-align: top; } .compareTable-row + .compareTable-row .compareTable-heading, .compareTable-row + .compareTable-row .compareTable-item { border-top: 1px solid #eff1f5; } .compareTable-row + .compareTable-row .compareTable-heading:empty { border-top: 0; } .compareTable-heading { padding: 1rem 0; position: relative; text-align: left; width: 0; } @media (min-width: 992px) { .compareTable-heading { width: 15%; } } .compareTable-headingText { position: absolute; white-space: nowrap; } @media (min-width: 992px) { .compareTable-headingText { position: inherit; top: inherit; } } .compareTable-item { padding: 3rem 0 1rem; font-size: 0.875rem; } @media (min-width: 992px) { .compareTable-item { font-size: 1rem; padding: 1rem 1rem 1rem 0; } } .compareTable-removeProduct { position: absolute; right: 0; top: 0; transition: .25s all ease-in-out; } .compareTable-removeProduct:hover { transform: scale(0.9); } .compareTable-removeProduct [class*='icon-'] { font-size: 0.875rem; color: #00369d; background-color: #eff1f5; padding: 0.375rem 0.625rem; border-radius: 3.125rem; } @media (min-width: 992px) { .compareTable-removeProduct [class*='icon-'] { font-size: 1.125rem; } } .compareTable-product { padding: 0 1rem 0 0; } @media (max-width: 767.9px) { .compareTable-product { width: 12.5rem; } } .compareTable-product .card { margin-bottom: 0; } .compareTable-product .card img { width: 100%; } .compareTable-product .card-body { min-height: 7.5rem; text-align: left; font-size: 0.875rem; } .compareTable-product .card-body .card-brand { margin-bottom: 0.5rem; } .compareTable-product .card-body a { color: #00369d; font-weight: 600; } @media (min-width: 992px) { .compareTable-product .card-body { font-size: 1rem; } } .compareTable-action { padding: 0 1rem 2rem 0; } .compareTable-action [class*='btn'] { width: 100%; font-size: 0.875rem; } @media (max-width: 991.9px) { .compareTable-action [class*='btn'] { padding: 0.5rem; } } @media (max-width: 991.9px) { .compareTable-action [class*='btn'] [class*='icon-'] { display: none; } } @media (min-width: 992px) { .compareTable-action [class*='btn'] { font-size: 1rem; } } /* -------------------------------------------------------------------------- *\ COPY STYLING Global styles for all basic copy styling. This should set all basic copy elements at the root level for each, then you can modify for specific components later. \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ COPY - BODY STYLES \* -------------------------------------------------------------------------- */ body { color: #001338; font-family: "Futura-PT", Helvetica, Arial, sans-serif; font-size: 1rem; line-height: 1.5rem; background: #fff; } strong, b { font-weight: 500; } .invert { color: #fff; } /* -------------------------------------------------------------------------- *\ COPY - BASIC LINK STYLES BUTTONS are located in the Components > Basic > Button file. \* -------------------------------------------------------------------------- */ a { color: #00369d; text-decoration: none; font-weight: 600; } a:hover, a:focus, a.hover { color: #70b3e3; text-decoration: underline; } address a, a[href*="tel:"] { text-decoration: none; } .invert a { color: #fff; } /* -------------------------------------------------------------------------- *\ COPY - BLOCK ELEMENTS \* -------------------------------------------------------------------------- */ p, ul, ol, dl, table, blockquote, figure, address { margin: 0 0 1rem; } @media (min-width: 768px) { p, ul, ol, dl, table, blockquote, figure, address { margin: 0 0 1.5rem; } } p:last-child, ul:last-child, ol:last-child, dl:last-child, table:last-child, blockquote:last-child, figure:last-child, address:last-child { margin-bottom: 0 !important; } p { margin: 0 0 0.5rem; } @media (min-width: 768px) { p { margin: 0 0 1rem; } } p:last-of-type { margin: 0 0 1rem; } @media (min-width: 768px) { p:last-of-type { margin: 0 0 1.5rem; } } hr, [class^="sd-divider-"] hr { margin: auto; height: 0.0625rem; max-width: 1400px; background: repeating-linear-gradient(90deg, #00369d, #00369d 6px, transparent 6px, transparent 12px); border: none; } /* -------------------------------------------------------------------------- *\ COPY - BODY STYLES \* -------------------------------------------------------------------------- */ h1, .h1, h2, .h2, h3, .h3, h4, .h4 { color: #00369d; font-family: "bellyswing", Helvetica, Arial, sans-serif; text-transform: uppercase; font-weight: 400; margin-bottom: 0.5rem; } @media (min-width: 576px) { h1, .h1, h2, .h2, h3, .h3, h4, .h4 { margin-bottom: 1rem; } } .invert h1, .invert .h1, .invert h2, .invert .h2, .invert h3, .invert .h3, .invert h4, .invert .h4 { color: #fff; } h1.pad-extra, .h1.pad-extra, h2.pad-extra, .h2.pad-extra, h3.pad-extra, .h3.pad-extra, h4.pad-extra, .h4.pad-extra { padding: 2rem 0; } h1.print-heading, .h1.print-heading, h2.print-heading, .h2.print-heading, h3.print-heading, .h3.print-heading, h4.print-heading, .h4.print-heading { display: none; } @media print { h1.print-heading, .h1.print-heading, h2.print-heading, .h2.print-heading, h3.print-heading, .h3.print-heading, h4.print-heading, .h4.print-heading { display: block; } } h5, .h5, h6, .h6 { color: #001338; font-family: "Futura-PT", Helvetica, Arial, sans-serif; font-weight: 500; margin-bottom: 0.5rem; } @media (min-width: 576px) { h5, .h5, h6, .h6 { margin-bottom: 1rem; } } .invert h5, .invert .h5, .invert h6, .invert .h6 { color: #fff; } h5.pad-extra, .h5.pad-extra, h6.pad-extra, .h6.pad-extra { padding: 2rem 0; } h1, .h1 { font-size: 2.5rem; line-height: 3rem; } @media (min-width: 992px) { h1, .h1 { font-size: 3.75rem; line-height: 3.75rem; } } h2, .h2 { font-size: 2rem; line-height: 2.5rem; } @media (min-width: 992px) { h2, .h2 { font-size: 3rem; line-height: 3.25rem; } } h3, .h3 { font-size: 1.5rem; line-height: 1.875rem; } @media (min-width: 992px) { h3, .h3 { font-size: 1.75rem; line-height: 1.875rem; } } h4, .h4 { font-size: 1.3125rem; line-height: 1.875rem; } @media (min-width: 992px) { h4, .h4 { font-size: 1.5rem; line-height: 1.875rem; } } h5, .h5 { font-size: 1.125rem; line-height: 1.6875rem; } h5.upper, .h5.upper { text-transform: uppercase; } h5.sentence, .h5.sentence { font-weight: 400; } .bg-scroll { text-align: center; position: relative; padding-bottom: 2rem; } .bg-scroll h2 { position: relative; z-index: 1; } .bg-scroll .marquee { z-index: 10; } .marquee { position: absolute; font-family: "bellyswing", Helvetica, Arial, sans-serif; text-transform: uppercase; font-size: 3rem; white-space: nowrap; top: 0.3125rem; height: 100px; line-height: 1; z-index: 1; width: 100%; overflow: hidden; } @media (min-width: 992px) { .marquee { font-size: 7.5rem; } } .scrolling { animation: marquee 40s linear infinite; color: #eff1f5; opacity: 0.5; display: inline-block; } .bg-color .scrolling { opacity: 1; } @media (prefers-reduced-motion) { .scrolling { animation: marquee 0s linear infinite; } } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } } /* -------------------------------------------------------------------------- *\ COPY - LIST STYLES Below are resets that will make working with custom bullets and numbers much easier. \* -------------------------------------------------------------------------- */ ul, ol { list-style: none; } ul li, ol li { position: relative; z-index: 0; padding: 0 0 0 1.25rem; } @media (max-width: 767.9px) { ul li:before, ol li:before { margin-right: 0.25rem; } } @media (min-width: 768px) { ul li:before, ol li:before { position: absolute; z-index: 0; left: 0; top: 12px; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); } } ul li + li, ol li + li { margin: 0.625rem 0 0; } ul ul, ul ol, ol ul, ol ol { margin-bottom: 0; } nav ul li, nav ol li { padding: 0; margin: 0; } nav ul li:before, nav ol li:before { display: none; } /* -------------------------------------------------------------------------- *\ IMPORTS FOR EACH LIST DEFINITION \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ COPY - LISTS - UNORDERED \* -------------------------------------------------------------------------- */ ul li:before { width: 0.3125rem; height: 0.3125rem; background: #00369d; border-radius: 0.25rem; content: ""; } ul ul li:before { border-radius: 0; } ul ul ul li:before { -webkit-transform: translate(0, -50%) rotate(45deg); -ms-transform: translate(0, -50%) rotate(45deg); transform: translate(0, -50%) rotate(45deg); } /* -------------------------------------------------------------------------- *\ COPY - LISTS - ORDERED \* -------------------------------------------------------------------------- */ ol { counter-reset: grv-counter; } ol li { counter-increment: grv-counter; } ol li:before { content: counter(grv-counter) "."; font-size: 0.75rem; font-weight: 600; top: 1em; } ol ol { margin: 0 0 0 2em; } ol ol li:before { content: counter(grv-counter, lower-alpha) "."; } ol ol ol li:before { content: counter(grv-counter, lower-roman) "."; } ol.alpha li:before { content: counter(grv-counter, upper-alpha) "."; } /* -------------------------------------------------------------------------- *\ COPY - LISTS - DEFINITION \* -------------------------------------------------------------------------- */ dl dt { font-size: 1.8; font-weight: bold; } dl dt ~ dt { margin: .5em 0 0; } dl dd { padding: 0 0 0 1em; } /* -------------------------------------------------------------------------- *\ COPY - ALIGNMENTS \* -------------------------------------------------------------------------- */ .ta-left { text-align: left !important; } .ta-center { text-align: center !important; } .ta-right { text-align: right !important; } input:focus { outline: 1px solid #00369d; } /* -------------------------------------------------------------------------- *\ FOOTER \* -------------------------------------------------------------------------- */ body > footer { background: #001338; position: relative; /* -------------------------------------------------------------------------- *\ FOOTER - NAV - SOCIAL \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ FOOTER - NAVS - HOT LINKS \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ FOOTER - COPYRIGHT \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ FOOTER - NEWSLETTER \* -------------------------------------------------------------------------- */ } body > footer:before { content: ""; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: auto; height: 32.8125rem; width: 100%; background-color: #00369d; z-index: 0; } @media (min-width: 768px) { body > footer:before { height: 24.875rem; } } @media (min-width: 992px) { body > footer:before { height: auto; left: auto; bottom: 0; width: calc(33.334% + 1rem); } } @media (min-width: 1400px) { body > footer:before { width: calc(50% - 216px); } } body > footer > div.container { padding-top: 3rem; padding-bottom: 1rem; display: flex; flex-direction: column; justify-content: flex-start; position: relative; z-index: 1; background: no-repeat top left url("../img/ice-cap-left.svg"), no-repeat top right url("../img/ice-cap-right.svg"); background-position-y: -48px; } @media (min-width: 768px) { body > footer > div.container { padding-top: 2.5rem; } } @media (min-width: 992px) { body > footer > div.container { flex-direction: row; flex-wrap: nowrap; padding-top: 4rem; } } @media (min-width: 992px) { body > footer .footer-body { order: 0; width: 66.666%; } } body > footer .footer-body dl { display: grid; grid-template-columns: 1fr; margin: 0 0 3rem; padding: 2rem 0 0; } @media (min-width: 768px) { body > footer .footer-body dl { grid-template-columns: 1fr 1fr 1fr 1fr; padding: 2.5rem 0 0; } } @media (min-width: 992px) { body > footer .footer-body dl { padding: 0; margin: 0 0 7.625rem; } } body > footer .social { margin: 0 0 2rem; } @media (min-width: 768px) { body > footer .social { margin: 0 0 1rem; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; } } body > footer .social h5 { color: #fff; font-weight: 500; font-size: 1rem; line-height: 1.5rem; margin: 0 0 1rem; } @media (min-width: 768px) { body > footer .social h5 { margin: 0 1.5rem 0 0; } } body > footer .social ul { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; max-width: 17.1875rem; } @media (min-width: 768px) { body > footer .social ul { max-width: none; } } body > footer .social ul li { margin: 0 1.375rem 1rem 0; } @media (min-width: 768px) { body > footer .social ul li { margin: 0 1rem 0 0; } } body > footer .social ul li a { display: block; border: 1px solid transparent; border-radius: 0.25rem; } body > footer .social ul li a:hover, body > footer .social ul li a:focus, body > footer .social ul li a.hover { text-decoration: none; } body > footer .social ul li a:hover span, body > footer .social ul li a:focus span, body > footer .social ul li a.hover span { color: #70b3e3; } body > footer .social ul li a:hover span.brand-snapchat svg path, body > footer .social ul li a:focus span.brand-snapchat svg path, body > footer .social ul li a.hover span.brand-snapchat svg path { fill: #70b3e3; } body > footer .social ul li a:active { border: 1px solid #70b3e3; } body > footer .social ul li a span { position: relative; height: 2.5rem; width: 2.5rem; text-align: center; display: flex; flex-direction: row; align-items: center; justify-content: center; color: #fff; } @media (min-width: 768px) { body > footer .social ul li a span { height: 1.875rem; width: 1.875rem; } } body > footer .social ul li a span:before { color: currentColor; font-size: 1.6875rem; } @media (min-width: 768px) { body > footer .social ul li a span:before { font-size: 1.25rem; } } body > footer .social ul li a span.brand-snapchat svg path { fill: #fff; } body > footer nav.hot-links dt button { padding: 1rem 0; margin: 0; color: #fff; font-size: 1rem; line-height: 1.5rem; font-weight: 500; background: none !important; border-bottom: 1px solid #56637b; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; } @media (min-width: 768px) { body > footer nav.hot-links dt button { border-bottom: none; padding: 0; margin: 0 0 0.5rem; } } @media (min-width: 992px) { body > footer nav.hot-links dt button { margin: 0 0 1rem; } } body > footer nav.hot-links dt button:hover, body > footer nav.hot-links dt button:focus, body > footer nav.hot-links dt button.hover { cursor: default; } body > footer nav.hot-links dt button:after { transition: all .2s ease; content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxNCAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAuMjIxMjM5IDEuODc2OTdDMC4zNzc2MDEgMS43ODE0IDAuNjE3MDI5IDEuNzg1MDggMC45ODgzODYgMS45NjUxOUMxLjc5MDYxIDIuNDA5OTQgMi41Mjc3IDIuOTE3NTkgMy4xODcyMSAzLjQ3OTU5QzQuNTk0NDYgNC41NDE4OCA3LjAwMTAxIDkuMTkyNzYgOC4yNTkxNyA3LjE1NTMzQzguMzI3NTggNy4wNTI0MSAxMC44ODMxIDIuNTI3NTggMTEuMjI1MSAyLjAwOTNDMTEuNTExNyAxLjQ2NjcgMTEuODY2NyAwLjk0NjAzNyAxMi4yODU1IDAuNDU0NDYzQzEyLjczOTkgMC4wMTcwNSAxMy43OTUzIC0wLjI5MTcxMiAxMy45NjE1IDAuNDM2MDg0QzE0LjE0NzEgMS4yNTIxIDEzLjYxOTQgMi4yNzM5NSAxMy4yODIzIDMuMDM4NTFDMTIuMzA1IDUuMTkyNDkgMTEuMDQ5MiA3LjI0NzIzIDkuOTU0NzEgOS4zNTcxQzkuNjMxNSAxMC4wMTM3IDkuMjMwODYgMTAuNjQ3MiA4Ljc1NzU3IDExLjI1MDFDOC4xMzcwMiAxMS45NjMyIDcuNDc3MzcgMTIuMjk3NyA2Ljc2ODg2IDExLjY2NTVDNi4xNDM0MSAxMS4xMTA0IDUuNzIzMTkgMTAuMjQ2NiA1LjI3MzY1IDkuNjA3MDVDNC41MjE4MyA4LjQ0MzQxIDMuNjU0NSA3LjMyNDA0IDIuNjc5MDQgNi4yNTg0NUMxLjcwMTc4IDUuMjQwMjcgMC41NDM3MzMgNC4yNDc4MiAwLjEwMzk2OCAyLjk5ODA3Qy0wLjAzMjg0NzUgMi42MjMxNSAtMC4wNzE5Mzc3IDIuMDY0NDQgMC4yMjEyMzkgMS44NzY5N1oiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPg=="); } @media (min-width: 768px) { body > footer nav.hot-links dt button:after { display: none; } } body > footer nav.hot-links dt button[aria-expanded="true"] { border-bottom: none; } body > footer nav.hot-links dt button[aria-expanded="true"]:after { transform: rotate(180deg); } body > footer nav.hot-links dd { padding: 0 0 1rem; border-bottom: 1px solid #56637b; } @media (min-width: 768px) { body > footer nav.hot-links dd { border-bottom: none; } body > footer nav.hot-links dd[hidden] { display: block; } } body > footer nav.hot-links dd ul li a { color: #b4bcca; font-weight: normal; font-size: 1rem; line-height: 1.5rem; } body > footer nav.hot-links dd ul li a:hover, body > footer nav.hot-links dd ul li a:focus, body > footer nav.hot-links dd ul li a.hover { color: #fff; text-decoration: none; } body > footer nav.hot-links dd ul li + li { margin: 0.875rem 0 0; } body > footer .copyright { margin: 0; font-weight: normal; font-size: 0.875rem; line-height: 1.3125rem; color: #fff; } body > footer .copyright a { color: #70b3e3; font-weight: 700; } body > footer .copyright a:hover, body > footer .copyright a:focus, body > footer .copyright a.hover { text-decoration: underline; color: #70b3e3; } @media (min-width: 768px) { body > footer .copyright { margin: 0 1rem 0 0; } } body > footer .newsletter { width: 100%; background: #00369d; padding: 0 0 2.25rem; min-height: 17.75rem; } @media (min-width: 768px) { body > footer .newsletter { padding: 0 0 1.875rem; min-height: 0; } } @media (min-width: 992px) { body > footer .newsletter { order: 1; width: 33.334%; padding: 0 0 0 2.5rem; } } body > footer .newsletter .newsletter-form { display: flex; flex-direction: column; justify-content: flex-start; text-align: center; } @media (min-width: 768px) { body > footer .newsletter .newsletter-form { flex-direction: row; text-align: left; align-items: center; } } @media (min-width: 992px) { body > footer .newsletter .newsletter-form { flex-direction: column; text-align: center; } } body > footer .newsletter .newsletter-form > div { width: 100%; } @media (min-width: 768px) { body > footer .newsletter .newsletter-form > div { width: 50%; } body > footer .newsletter .newsletter-form > div:first-child { padding: 0 3.75rem 0 0; } } @media (min-width: 992px) { body > footer .newsletter .newsletter-form > div { width: 100%; } body > footer .newsletter .newsletter-form > div:first-child { padding: 0; } } body > footer .newsletter .newsletter-form > div h3 { color: #fff; margin: 0 0 0.5rem; font-weight: normal; font-size: 2rem; line-height: 2.5rem; } @media (min-width: 992px) { body > footer .newsletter .newsletter-form > div h3 { margin: 0 auto 0.875rem; font-size: 3rem; line-height: 3.25rem; max-width: 15rem; } } body > footer .newsletter .newsletter-form > div p { color: #fff; font-weight: normal; font-size: 1rem; line-height: 1.5rem; margin: 0; } @media (min-width: 992px) { body > footer .newsletter .newsletter-form > div p { margin: 0 0 2rem !important; font-size: 1.125rem; line-height: 1.6875rem; } } body > footer .newsletter .newsletter-form > div form { margin: 0; } @media (max-width: 767.9px) { body > footer .newsletter .newsletter-form > div form { margin-top: 1rem; } } body > footer .newsletter .newsletter-form > div form .form-el { margin: 0 0 1rem; } body > footer .newsletter .newsletter-form > div form .form-el .form-input, body > footer .newsletter .newsletter-form > div form .form-el .button-wrap { width: 100%; height: 3rem; line-height: 3rem; display: block; margin: 0; border-radius: 1.5rem; } body > footer .newsletter .newsletter-form > div form .form-el .form-input { color: #001338; font-weight: normal; font-size: 1rem; line-height: 1.5rem; padding: 0 1.5rem; border: none; background: rgba(255, 255, 255, 0.75); } body > footer .newsletter .newsletter-form > div form .form-el .form-input:hover { background: white; } body > footer .newsletter .newsletter-form > div form .form-el .form-input:active, body > footer .newsletter .newsletter-form > div form .form-el .form-input:focus { background: white; outline: 1.5px solid #70b3e3; } body > footer .newsletter .newsletter-form > div form .form-el .form-input::-webkit-input-placeholder { color: #001338; font-weight: normal; font-size: 1rem; line-height: 1.5rem; } body > footer .newsletter .newsletter-form > div form .form-el .form-input::-moz-placeholder { color: #001338; font-weight: normal; font-size: 1rem; line-height: 1.5rem; } body > footer .newsletter .newsletter-form > div form .form-el .form-input:-ms-input-placeholder { color: #001338; font-weight: normal; font-size: 1rem; line-height: 1.5rem; } body > footer .newsletter .newsletter-form > div form .form-el .form-input:-moz-placeholder { color: #001338; font-weight: normal; font-size: 1rem; line-height: 1.5rem; } body > footer .newsletter .newsletter-form > div form .form-el .button-wrap { background: #70b3e3; position: relative; z-index: 0; transition: all .2s ease; } body > footer .newsletter .newsletter-form > div form .form-el .button-wrap:before { content: ""; display: block; position: absolute; top: 0.3125rem; right: 0.3125rem; border: 1px dashed #70b3e3; border-radius: 1.5rem; height: 100%; width: 100%; transition: all .2s ease; } body > footer .newsletter .newsletter-form > div form .form-el .button-wrap:hover, body > footer .newsletter .newsletter-form > div form .form-el .button-wrap:focus, body > footer .newsletter .newsletter-form > div form .form-el .button-wrap.hover { background: transparent; cursor: pointer; } body > footer .newsletter .newsletter-form > div form .form-el .button-wrap:hover:before, body > footer .newsletter .newsletter-form > div form .form-el .button-wrap:focus:before, body > footer .newsletter .newsletter-form > div form .form-el .button-wrap.hover:before { border: 1px dashed #fff; top: 0; right: 0; } body > footer .newsletter .newsletter-form > div form .form-el .button-wrap:hover input, body > footer .newsletter .newsletter-form > div form .form-el .button-wrap:focus input, body > footer .newsletter .newsletter-form > div form .form-el .button-wrap.hover input { color: white; } body > footer .newsletter .newsletter-form > div form .form-el .button-wrap input { padding: 0; border: none; border-radius: 0; background: transparent; font-family: "bellyswing", Helvetica, Arial, sans-serif; text-transform: uppercase; font-weight: normal; font-size: 1.25rem; line-height: 3.25rem; letter-spacing: 0.04em; color: #00369d; display: block; margin: 0; position: relative; z-index: 1; } body > footer .newsletter .newsletter-form > div form .form-el .button-wrap input:hover, body > footer .newsletter .newsletter-form > div form .form-el .button-wrap input:focus, body > footer .newsletter .newsletter-form > div form .form-el .button-wrap input.hover { cursor: pointer; } body > footer .newsletter .newsletter-form > div form .policy { color: white; } body > footer .newsletter .newsletter-form > div form .policy a { color: white; } body > footer .newsletter .newsletter-form > div form .policy label::before { border-color: white; } body > footer .newsletter .newsletter-form > div .klaviyo-form > div form.klaviyo-form > div div[data-testid="form-row"] { width: 100% !important; height: 3rem !important; line-height: 3rem !important; display: block !important; margin: 0 !important; border-radius: 1.5rem !important; margin: 0 0 1rem !important; } body > footer .newsletter .newsletter-form > div .klaviyo-form > div form.klaviyo-form > div div[data-testid="form-row"]:first-child > div { padding: 0 !important; } body > footer .newsletter .newsletter-form > div .klaviyo-form > div form.klaviyo-form > div div[data-testid="form-row"]:first-child > div input[type="email"] { color: #001338 !important; font-weight: normal !important; font-size: 1rem !important; line-height: 1.5rem !important; padding: 0 1.5rem !important; border: none !important; background: rgba(255, 255, 255, 0.75) !important; height: 3rem !important; border-radius: 1.5rem !important; } body > footer .newsletter .newsletter-form > div .klaviyo-form > div form.klaviyo-form > div div[data-testid="form-row"]:first-child > div input[type="email"]:hover { background: white; } body > footer .newsletter .newsletter-form > div .klaviyo-form > div form.klaviyo-form > div div[data-testid="form-row"]:first-child > div input[type="email"]:active, body > footer .newsletter .newsletter-form > div .klaviyo-form > div form.klaviyo-form > div div[data-testid="form-row"]:first-child > div input[type="email"]:focus { background: white; outline: 1.5px solid #70b3e3; } body > footer .newsletter .newsletter-form > div .klaviyo-form > div form.klaviyo-form > div div[data-testid="form-row"]:first-child > div input[type="email"]::-webkit-input-placeholder { color: #001338; font-weight: normal; font-size: 1rem; line-height: 1.5rem; } body > footer .newsletter .newsletter-form > div .klaviyo-form > div form.klaviyo-form > div div[data-testid="form-row"]:first-child > div input[type="email"]::-moz-placeholder { color: #001338; font-weight: normal; font-size: 1rem; line-height: 1.5rem; } body > footer .newsletter .newsletter-form > div .klaviyo-form > div form.klaviyo-form > div div[data-testid="form-row"]:first-child > div input[type="email"]:-ms-input-placeholder { color: #001338; font-weight: normal; font-size: 1rem; line-height: 1.5rem; } body > footer .newsletter .newsletter-form > div .klaviyo-form > div form.klaviyo-form > div div[data-testid="form-row"]:first-child > div input[type="email"]:-moz-placeholder { color: #001338; font-weight: normal; font-size: 1rem; line-height: 1.5rem; } body > footer .newsletter .newsletter-form > div .klaviyo-form > div form.klaviyo-form > div div[data-testid="form-row"]:last-child > div { background-color: #70b3e3 !important; position: relative !important; z-index: 0 !important; transition: all .2s ease !important; width: 100% !important; height: 3rem !important; line-height: 3rem !important; display: block !important; margin: 0 !important; border-radius: 1.5rem !important; padding: 0 !important; } body > footer .newsletter .newsletter-form > div .klaviyo-form > div form.klaviyo-form > div div[data-testid="form-row"]:last-child > div:before { content: "" !important; display: block !important; position: absolute !important; top: 0.3125rem !important; right: 0.3125rem !important; border: 1px dashed #70b3e3 !important; border-radius: 1.5rem !important; height: 100% !important; width: 100% !important; transition: all .2s ease !important; } body > footer .newsletter .newsletter-form > div .klaviyo-form > div form.klaviyo-form > div div[data-testid="form-row"]:last-child > div:hover, body > footer .newsletter .newsletter-form > div .klaviyo-form > div form.klaviyo-form > div div[data-testid="form-row"]:last-child > div:focus, body > footer .newsletter .newsletter-form > div .klaviyo-form > div form.klaviyo-form > div div[data-testid="form-row"]:last-child > div.hover { background-color: transparent !important; cursor: pointer !important; } body > footer .newsletter .newsletter-form > div .klaviyo-form > div form.klaviyo-form > div div[data-testid="form-row"]:last-child > div:hover:before, body > footer .newsletter .newsletter-form > div .klaviyo-form > div form.klaviyo-form > div div[data-testid="form-row"]:last-child > div:focus:before, body > footer .newsletter .newsletter-form > div .klaviyo-form > div form.klaviyo-form > div div[data-testid="form-row"]:last-child > div.hover:before { border: 1px dashed #fff !important; top: 0 !important; right: 0 !important; } body > footer .newsletter .newsletter-form > div .klaviyo-form > div form.klaviyo-form > div div[data-testid="form-row"]:last-child > div:hover input, body > footer .newsletter .newsletter-form > div .klaviyo-form > div form.klaviyo-form > div div[data-testid="form-row"]:last-child > div:focus input, body > footer .newsletter .newsletter-form > div .klaviyo-form > div form.klaviyo-form > div div[data-testid="form-row"]:last-child > div.hover input { color: white !important; } body > footer .newsletter .newsletter-form > div .klaviyo-form > div form.klaviyo-form > div div[data-testid="form-row"]:last-child > div button[type="button"] { padding: 0 !important; border: none !important; border-radius: 0 !important; background: transparent !important; font-family: "bellyswing", Helvetica, Arial, sans-serif !important; font-weight: normal !important; font-size: 1.125rem !important; line-height: 3.25rem !important; letter-spacing: 0.04em !important; color: #00369d !important; display: block !important; margin: 0 !important; position: relative !important; z-index: 1 !important; height: auto !important; } body > footer .newsletter .newsletter-form > div .klaviyo-form > div form.klaviyo-form > div div[data-testid="form-row"]:last-child > div button[type="button"]:hover, body > footer .newsletter .newsletter-form > div .klaviyo-form > div form.klaviyo-form > div div[data-testid="form-row"]:last-child > div button[type="button"]:focus, body > footer .newsletter .newsletter-form > div .klaviyo-form > div form.klaviyo-form > div div[data-testid="form-row"]:last-child > div button[type="button"].hover { cursor: pointer !important; color: #fff !important; } @media print { body > footer { display: none; } } /* -------------------------------------------------------------------------- *\ BASE FORM STYLING This establishes global styles used for all Form Styling. For custom variations of the forms, refer to their specific styling located in their respective files. \* -------------------------------------------------------------------------- */ form { /* ---------------------------------------------------------------------- *\ FORM LAYOUT OPTIONS By default the forms are styled with the label appearing above the input. Form Inline are typically used for 1 or 2 input forms to collect information for things like newsletter signup or notifications. Form Rows are typically used for larger forms like account registration where fields are displayed next to each other to shorten the length of scrolling required. Form Label Inside are typically used for shorter forms and will have the label appear inside the element and then shift when the field is valid. - STYLING FOR THIS TYPE WILL COME LATER Comment or remove unused form styling. \* ---------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ FORM - FORM ELEMENT \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ FORM - FIELDSET \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ FORM - LABEL \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ FORM - SELECTS \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ FORM - INPUTS \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ FORM - TEXTAREAS \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ FORM - CHECKBOXES AND RADIOS \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ FORM - FORM ACTIONS \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ FORM - RECAPTCHA \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ FORM - ERRORS \* -------------------------------------------------------------------------- */ } @media (min-width: 768px) { form.form-rows, form .form-row { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: space-between; align-items: flex-start; flex-flow: row wrap; margin-bottom: 2rem; } form.form-rows .form-el, form.form-rows .form-field, form .form-row .form-el, form .form-row .form-field { -webkit-box-flex: 0 0 auto; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: calc(50% - 1rem); } } form .form-el, form .form-cr { margin: 0 0 0.75rem; } form hr { width: 100%; } @media (min-width: 768px) { form .form-group { display: flex; gap: 16px; } form .form-group > div { width: 100%; } } form fieldset { border: none; padding: 1rem 0 0; } form legend { font-size: 1.25rem; } form label, form .label { display: block; margin: 0 0 0.5rem; } form label small, form .label small { font-size: .75em; color: #ed6c00; margin: 0 0 0 0.5rem; } form label small:before, form .label small:before { margin: 0 0.25rem 0 0; } form select { padding: 0.875rem 1rem; width: 100%; -webkit-appearance: none; border: 0.0625rem solid #b4bcca; background-color: #fff; background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxNCAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzLjc3ODggMS44NzY5N0MxMy42MjI0IDEuNzgxNDEgMTMuMzgzIDEuNzg1MDggMTMuMDExNiAxLjk2NTE5QzEyLjIwOTQgMi40MDk5NCAxMS40NzIzIDIuOTE3NTkgMTAuODEyOCAzLjQ3OTU5QzkuNDA1NTQgNC41NDE4OCA2Ljk5ODk5IDkuMTkyNzYgNS43NDA4MyA3LjE1NTMzQzUuNjcyNDIgNy4wNTI0MSAzLjExNjg5IDIuNTI3NTggMi43NzQ4NSAyLjAwOTNDMi40ODgzMyAxLjQ2NjcgMi4xMzMyNyAwLjk0NjAzNyAxLjcxNDUzIDAuNDU0NDYzQzEuMjYwMTEgMC4wMTcwNTAyIDAuMjA0NjY4IC0wLjI5MTcxMiAwLjAzODUzNDggMC40MzYwODRDLTAuMTQ3MTQ0IDEuMjUyMSAwLjM4MDU3NCAyLjI3Mzk1IDAuNzE3NzI4IDMuMDM4NTFDMS42OTQ5OCA1LjE5MjQ5IDIuOTUwNzYgNy4yNDcyMyA0LjA0NTI5IDkuMzU3MUM0LjM2ODUgMTAuMDEzNyA0Ljc2OTE0IDEwLjY0NzIgNS4yNDI0MiAxMS4yNTAxQzUuODYyOTggMTEuOTYzMiA2LjUyMjYzIDEyLjI5NzcgNy4yMzExNCAxMS42NjU1QzcuODU2NTkgMTEuMTEwNCA4LjI3NjgxIDEwLjI0NjYgOC43MjYzNCA5LjYwNzA1QzkuNDc4MTcgOC40NDM0MSAxMC4zNDU1IDcuMzI0MDQgMTEuMzIxIDYuMjU4NDVDMTIuMjk4MiA1LjI0MDI3IDEzLjQ1NjMgNC4yNDc4MiAxMy44OTYgMi45OTgwN0MxNC4wMzI4IDIuNjIzMTUgMTQuMDcxOSAyLjA2NDQ0IDEzLjc3ODggMS44NzY5N1oiIGZpbGw9IiMwMDM2OUQiLz4KPC9zdmc+Cg==") !important; background-repeat: no-repeat; /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/ background-position: right .7em top 50% !important; /* icon size, then gradient */ background-size: 1em auto; border-radius: 0.375rem; font-size: 1rem; color: #56637b; transition: .25s all ease-in-out; } form select:disabled, form select.unavailable { background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"); opacity: 0.5; } form select:hover, form select:focus, form select.hover { border-color: #00369d; } form input, form .form-input { padding: 0.875rem 1rem; border: 0.0625rem solid #b4bcca; width: 100%; border-radius: 0.375rem; font-size: 1rem; color: #56637b; } form input:hover, form .form-input:hover { background-color: #f5f7f9; } form input:focus, form .form-input:focus { border-color: #70b3e3; background-color: white; } form input[type="date"] { text-transform: uppercase; } form textarea { width: 100%; padding: 0.5rem 0.75rem; border: 0.0625rem solid #b4bcca; height: calc(7.5em + 1rem); } form .form-cr input[type="checkbox"] + label:before { content: ""; height: 0.75rem; width: 0.75rem; border: 0.0625rem solid #56637b; } form .form-cr input[type="checkbox"] + label:after { content: ""; height: 0.125rem; width: 0.375rem; border: 0.125rem solid transparent; transform: translate(-50%, -83.333%) rotate(-45deg); } form .form-cr input[type="checkbox"]:checked + label:after { border-left-color: #56637b; border-bottom-color: #56637b; } form .form-cr input[type="radio"] + label:last-child { display: block; } form .form-cr input[type="radio"] + label:before { content: ""; height: 0.75rem; width: 0.75rem; border: 0.0625rem solid #56637b; border-radius: 100%; } form .form-cr input[type="radio"]:checked + label:before { background: #56637b; box-shadow: inset 0 0 0 0.125rem #fff; } form .form-actions { width: 100%; margin: 1.5rem 0 0; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: flex-start; align-items: center; flex-flow: row nowrap; } form .g-recaptcha { width: 100%; } form .g-recaptcha > div { margin: 0 auto; } form .form-inlineMessage { color: #FF0000; display: block; font-size: .75em; font-style: italic; margin: 0.5rem 0 0; } /* -------------------------------------------------------------------------- *\ CATALOG - DETAIL - HEADER - FORM ELEMENTS - INCREMENT \* -------------------------------------------------------------------------- */ .form-increment-wrapper { display: flex; flex-direction: column; align-items: flex-start; column-gap: 1rem; } @media (min-width: 992px) { .form-increment-wrapper { flex-direction: row; align-items: flex-end; column-gap: 1.75rem; } } .form-increment-wrapper .form-increment { display: none; } .form-increment-wrapper.show-control .form-increment { display: block; } .form-increment-wrapper ul { padding-bottom: 1.5rem; font-size: 0.875rem; line-height: 0.75rem; color: #56637b; } @media (min-width: 992px) { .form-increment-wrapper ul { padding-bottom: 2.25rem; } } .form-increment-wrapper ul li::before { top: 0.375rem; } .form-increment { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; gap: 1rem; margin: 0 0 1rem; } @media (min-width: 768px) { .form-increment { margin: 0 0 1.5rem; } } .form-increment label { margin: 0 0.75rem 1rem 0; font-weight: 500; } .form-increment > div { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: flex-start; align-items: stretch; flex-flow: row nowrap; border-radius: 6.25rem; } .form-increment button { padding: 0.875rem; border: 1px solid #b4bcca; border-radius: 40px 0px 0px 40px; border-right: 0; background: #fff; font-size: 0.75rem; } .form-increment button:last-child { border: 1px solid #b4bcca; border-radius: 0px 40px 40px 0px; border-left: 0; } .form-increment button .icon-minus { position: relative; top: 0.3125rem; } .form-increment button:hover { background-color: #eff1f5; } .form-increment button:active { background-color: #00369d; color: #fff; } .form-increment input { padding: 0.25rem; background: #fff; border: none; border: 1px solid #b4bcca; border-left: 0; border-right: 0; border-radius: 0; text-align: center; width: 2.125rem; font-size: 1rem; } .quantity-control { display: none; } .quantity-control.show { display: block; } /* -------------------------------------------------------------------------- *\ GRID This sets up a 12 column grid that can be used for basic layout. Use this a fallback for areas of the website where the client absolutely needs to control the layout of the content. But due to the excessive amounts of classes and extra html elements necessary to make this work. \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ CONTAINER \* -------------------------------------------------------------------------- */ .container { margin: 0 auto; padding: 0 1rem; max-width: 1400px; width: 100%; } @media (min-width: 992px) { .container { width: 100%; } } @media (min-width: 1425px) { .container { width: 100%; } } @media (min-width: 768px) { .container { padding: 0 2rem; } } @media (min-width: 992px) { .container { padding: 0 3rem; } } .container.max-width { max-width: 1000px; } /* -------------------------------------------------------------------------- *\ GRID 12 COLUMNS WRAPPER \* -------------------------------------------------------------------------- */ .wrapper { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 0.5rem; max-width: 1400px; width: 100%; } @media (min-width: 992px) { .wrapper { width: 100%; } } @media (min-width: 1425px) { .wrapper { width: 100%; } } @media (min-width: 768px) { .wrapper { grid-template-columns: repeat(8, 1fr); grid-gap: 1rem; } } @media (min-width: 992px) { .wrapper { grid-template-columns: repeat(12, 1fr); grid-gap: 1.5rem; } } /* -------------------------------------------------------------------------- *\ HEADER \* -------------------------------------------------------------------------- */ a.skip { position: fixed; z-index: 10001; left: 50%; top: 0.9375rem; -webkit-transform: translate(-50%, -150%); -ms-transform: translate(-50%, -150%); transform: translate(-50%, -150%); background: #fff; color: #00369d; padding: 0.5rem 0.75rem; } a.skip:focus { transform: translate(-50%, 0); background: #00369d; color: #fff; } @media print { a.skip { display: none; } } .promo-bar { display: block; position: relative; width: 100%; padding: 0; margin: 0; overflow: hidden; } @media (max-width: 1059.9px) { .promo-bar.hide { display: none; } } @media (min-width: 1060px) { .promo-bar { position: fixed; top: 0; left: 3rem; z-index: 1003; max-width: calc(100% - 18rem); } } @media (min-width: 1400px) { .promo-bar { max-width: 68.75rem; left: calc(50% - 652px); } } .promo-bar .container { display: flex; flex-direction: row; justify-content: space-between; align-items: center; position: relative; } @media (min-width: 1060px) { .promo-bar .container { padding: 0; margin: 0; width: auto; } } .promo-bar .promo { margin: 0; color: #00369d; font-weight: 400; font-size: 0.875rem; line-height: 1.3125rem; padding: 0.5rem 0; } @media (min-width: 768px) { .promo-bar .promo { padding: 0.75rem 0; } } @media (min-width: 1060px) { .promo-bar .promo { max-width: none; font-size: 1rem; line-height: 1.5rem; } } .promo-bar .promo a { font-weight: 700; color: #00369d; } .promo-bar .promo a:hover, .promo-bar .promo a:focus, .promo-bar .promo a.hover { text-decoration: underline; } .promo-bar .promo-close { color: #00369d; width: 1.5rem; height: 1.5rem; transition: all .2s ease; position: absolute; top: 50%; right: 1rem; transform: translate(0, -50%); } .promo-bar .promo-close:hover, .promo-bar .promo-close:focus, .promo-bar .promo-close.hover { opacity: 0.5; } @media (min-width: 768px) { .promo-bar .promo-close { right: 2rem; } } @media (min-width: 1060px) { .promo-bar .promo-close { display: none; } } .promo-bar .promo-close svg path { fill: currentColor; } body > header { /* ---------------------------------------------------------------------- *\ RESETS This code resets some of the styling for the a, label, button, and li to make it function as a navigation \* ---------------------------------------------------------------------- */ /* ---------------------------------------------------------------------- *\ RESETS & VARIABLES Set some varialbes that apply to the scss files for header \* ---------------------------------------------------------------------- */ background: #00369d; /* -------------------------------------------------------------------------- *\ HEADER - POTIION \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ HEADER - LAYOUT \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ HEADER - LOGO \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ HEADER - SEARCH \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ HEADER - SEARCH > TOGGLE \* -------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------- *\ HEADER - NAVIGATIONS \* ---------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ HEADER - NAVIGATION - TOGGLE \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ HEADER - CART \* -------------------------------------------------------------------------- */ } body > header a, body > header label, body > header button { display: block; font-size: 1rem; white-space: nowrap; text-decoration: none; } body > header a:hover, body > header a:focus, body > header a.hover, body > header label:hover, body > header label:focus, body > header label.hover, body > header button:hover, body > header button:focus, body > header button.hover { color: #70b3e3; } body > header a, body > header li { color: #fff; } @media (min-width: 1060px) { body > header .container > .logo { display: none; } } @media print { body > header { display: none; } } body > header { width: 100%; /* ---------------------------------------------------------------------- *\ RELATIVE @include position(relative, 1000); \* ---------------------------------------------------------------------- */ /* ---------------------------------------------------------------------- *\ ABSOLUTE TOP @include position(absolute, 1000, (left, top), (0, 0)); \* ---------------------------------------------------------------------- */ /* ---------------------------------------------------------------------- *\ FIXED TOP @include position(fixed, 1000, (left, top), (0, 0)); \* ---------------------------------------------------------------------- */ /* ---------------------------------------------------------------------- *\ STICKY TOP \* ---------------------------------------------------------------------- */ } @media (max-width: 1059.9px) { body > header { position: relative; position: -webkit-sticky; position: sticky; z-index: 1002; } @supports (position: -webkit-sticky) { body > header { top: 0; left: 0; } } @supports (position: sticky) { body > header { top: 0; left: 0; } } } @media (min-width: 1060px) { body > header { position: relative; position: -webkit-sticky; position: sticky; z-index: 1002; } @supports (position: -webkit-sticky) { body > header { top: 0; } } @supports (position: sticky) { body > header { top: 0; } } } @media (max-width: 1059.9px) { body > header { background: linear-gradient(180deg, #fff 3px, #00369d 3px, #00369d 52px); height: auto; } } @media (min-width: 1060px) { body > header { background: linear-gradient(180deg, #fff 48px, #00369d 28px, #00369d 52px); height: 7rem; } } body > header .container { position: relative; /* @include borderTest(); @include borderTest(".logo"); @include borderTest(".promo"); @include borderTest(".search-bar"); @include borderTest("nav"); @include borderTest(".toggle-search"); @include borderTest(".mobile-cart"); @include borderTest(".toggle-trigger"); @include borderTest(".main"); @include borderTest(".user"); @include borderTest(".utility"); //*/ } @media (max-width: 1059.9px) { body > header .container { background: no-repeat top left/contain url("../img/ice-cap-left-sm.svg"), no-repeat top right/contain url("../img/ice-cap-right-sm.svg"); background-position-y: -48px; } } @media (min-width: 1060px) { body > header .container { background: no-repeat top left url("../img/ice-cap-left.svg"), no-repeat top right url("../img/ice-cap-right.svg"); } } @media (max-width: 400px) { body > header .container { background-position-y: -34px; } } @media (max-width: 1059.9px) { body > header .container { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: space-between; align-items: center; align-content: center; flex-flow: row nowrap; padding: 1.5625rem 1rem 1.25rem 1rem; } body > header .container .toggle-search { flex-grow: 1; text-align: right; display: none; } body > header .container nav { z-index: -1; background: none; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: flex-start; align-items: stretch; flex-flow: column nowrap; } body > header .container nav .main { order: 1; } body > header .container nav .user { order: 2; } body > header .container nav .utility { order: 3; } body > header .container nav .search-bar { display: none; } } @media (min-width: 1060px) { body > header .container nav { display: grid; grid-template-columns: 135px 1fr auto; grid-template-rows: auto; align-items: center; column-gap: 1.25rem; row-gap: 1.375rem; padding: 0.5rem 0; grid-template-areas: "user user user" "logo main util"; } body > header .container nav .logo { grid-area: logo; } body > header .container nav .user { grid-area: user; } body > header .container nav .main { grid-area: main; } body > header .container nav .utility { grid-area: util; } body > header .container nav .search-bar { grid-area: search; width: 100%; display: none; } } body > header .logo { height: 30px; display: block; /* ---------------------------------------------------------------------- *\ IMAGE OR SVG BASED LOGO \* ---------------------------------------------------------------------- */ /* ---------------------------------------------------------------------- *\ INCLUDE A TAGLINE @include flex(flex-start, center, null, row nowrap); color: $primary; text-decoration: none; \* ---------------------------------------------------------------------- */ /* ---------------------------------------------------------------------- *\ IMAGE BASED LOGO > img { display: block; width: 6rem; height: auto; } \* ---------------------------------------------------------------------- */ /* ---------------------------------------------------------------------- *\ SVG BASED LOGO \* ---------------------------------------------------------------------- */ /* ---------------------------------------------------------------------- *\ INCLUDE TAGLINE > small { margin: 0 0 0 0.75rem; font-size: 1.4rem; font-weight: bold; } \* ---------------------------------------------------------------------- */ } body > header .logo .site-logo { position: relative; top: -0.625rem; z-index: 4; object-fit: contain; width: 9.375rem; height: 6.875rem; } @media (max-width: 1059.9px) { body > header .logo .site-logo { top: -0.625rem; width: 8.125rem; height: 5.9375rem; } } body > header .logo svg { display: block; width: 100%; height: auto; fill: #fff; } body > header .logo:hover, body > header .logo:focus, body > header .logo.hover { color: #70b3e3; } body > header .toggle-search { display: block; padding: 0.4375rem; } body > header .toggle-search i { font-size: 1.25rem; color: #00369d; } @media (min-width: 1060px) { body > header .toggle-search { display: none; } } body > header .search-bar { position: relative; /* -------------------------------------------------------------------------- *\ HEADER - SEARCH - FORM \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ HEADER - SEARCH - RESULTS \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ HEADER - QUICK SEARCH RESULTS BOX \* -------------------------------------------------------------------------- */ } body > header .search-bar .quick-search-loading { position: absolute; right: 3.125rem; height: 2.5rem; display: none; } @media (max-width: 1059.9px) { body > header .search-bar { width: 100%; padding: 1rem 1rem 0.75rem; transition: all 0.25s linear; } #headerToggleSearch:checked ~ body > header .search-bar { top: 100%; transform: translate(-100%, 0); } } @media (min-width: 1060px) { body > header .search-bar:focus-within .results:not(:empty) { display: block; } } body > header .search-bar .form { margin: 0; } body > header .search-bar .form .form-el { position: relative; margin: 0; } body > header .search-bar .form input { width: 100%; font-size: 0.875rem; -webkit-box-flex: 0 1 auto; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; border-radius: 0.25rem 0 0 0.25rem; } body > header .search-bar .form input:focus { border-color: #56637b; } body > header .search-bar .form input::placeholder { color: #00369d; font-weight: 400; font-style: italic; } body > header .search-bar .form button { position: absolute; z-index: 100; right: -0.25rem; top: 0; height: 2.4375rem; max-width: 2.5rem; padding: 0 0.375rem 0 1rem; border-radius: 0 0.25rem 0.25rem 0; border: 1px solid #00369d; border-left: 0; color: #fff; } body > header .search-bar .form button:hover, body > header .search-bar .form button:active, body > header .search-bar .form button:focus { background: #70b3e3; } body > header .search-bar .results { margin: 1rem 0 0; } body > header .search-bar .results:empty { display: none; } body > header .search-bar .results .card:nth-child(n + 3) { display: none; } @media (min-width: 768px) { body > header .search-bar .results .card { width: calc(33.333% - 2rem); } body > header .search-bar .results .card:nth-child(3) { display: block; } body > header .search-bar .results .card:nth-child(n + 4) { display: none; } } @media (min-width: 1060px) { body > header .search-bar .results { display: none; position: absolute; right: 0; top: 100%; width: 50rem; margin: 0; background: #fff; padding: 1.5rem; border: 0.0625rem solid #f5d000; } } body > header .search-bar #quickSearch { display: none; position: absolute; background-color: #eff1f5; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2); width: 100%; } body > header .search-bar #quickSearch.is-open { display: initial; z-index: 500; } @media (max-width: 1059.9px) { body > header .search-bar #quickSearch { display: none !important; } } body > header .search-bar #quickSearch .quickSearchResults > div { padding: 1.25rem 1.25rem 1.25rem 1.25rem; max-height: 80vh; overflow-y: scroll; } body > header .search-bar #quickSearch .quickSearchResults > div::-webkit-scrollbar { -webkit-appearance: none; width: 7px; } body > header .search-bar #quickSearch .quickSearchResults > div::-webkit-scrollbar-thumb { border-radius: 4px; background-color: rgba(0, 0, 0, 0.5); box-shadow: 0 0 1px rgba(255, 255, 255, 0.5); } body > header .search-bar #quickSearch .quickSearchResults > div h4 { margin-bottom: 1em; position: relative; } body > header .search-bar #quickSearch .quickSearchResults > div > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } body > header .search-bar #quickSearch .quickSearchResults > div .modal-close { position: absolute; top: 50%; right: 0; line-height: 0; font-size: 1.5rem; color: #00369d; } body > header .search-bar #quickSearch .quickSearchResults > div .card { visibility: visible; opacity: 1; transform: translateX(0); flex-direction: row; margin-bottom: 0.625rem; } body > header .search-bar #quickSearch .quickSearchResults > div .card .actions { display: none; } body > header .search-bar #quickSearch .quickSearchResults > div .card .img { width: 50%; padding: 0; } body > header .search-bar #quickSearch .quickSearchResults > div .card .cnt { padding-left: 0.625rem; width: 50%; color: #001338; } body > header .search-bar #quickSearch .quickSearchResults > div .card .cnt a { padding: 0; overflow: visible; white-space: pre-wrap; } body > header .search-bar #quickSearch .quickSearchResults > div .card .cnt h3 { margin: 0; } body > header .toggle-trigger { position: relative; width: 2.375rem; height: 2.375rem; float: left; margin: 0; } body > header .toggle-trigger:hover, body > header .toggle-trigger:focus, body > header .toggle-trigger.hover { cursor: pointer; } body > header .toggle-trigger:hover .bar svg path, body > header .toggle-trigger:focus .bar svg path, body > header .toggle-trigger.hover .bar svg path { transition: all .2s ease; fill: #70b3e3; } body > header .toggle-trigger .bar { display: block; position: absolute; left: 50%; top: 50%; height: 0.25rem; width: 1.5rem; background: transparent; transition: all 0.25s cubic-bezier(0.55, 0.055, 0.675, 0.19); } body > header .toggle-trigger .bar svg { height: 0.25rem; width: 1.5rem; position: absolute; top: 0; left: 0; } body > header .toggle-trigger .bar:nth-child(1) { transform: translate(-50%, -50%) translate(0, -0.5625rem); } body > header .toggle-trigger .bar:nth-child(2) { transform: translate(-50%, -50%); } body > header .toggle-trigger .bar:nth-child(3) { transform: translate(-50%, -50%) translate(0, 0.5625rem); } @media (min-width: 1060px) { body > header .toggle-trigger { display: none; } } body > header .toggle { position: absolute; width: 1px !important; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip: rect(0, 0, 0, 0); } @media (min-width: 1060px) { body > header .toggle { display: none; } } body > header .toggle:checked + .toggle-trigger .bar:nth-child(1) { opacity: 0; transform: translate(-50%, -50%) translate(0, 0.5625rem); } body > header .toggle:checked + .toggle-trigger .bar:nth-child(2) { -webkit-transform: translate(-50%, -50%) rotate(45deg); -ms-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); } body > header .toggle:checked + .toggle-trigger .bar:nth-child(3) { -webkit-transform: translate(-50%, -50%) rotate(-45deg); -ms-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg); } body > header nav { /* ---------------------------------------------------------------------- *\ MAIN NAVIGATION OPTIONS Choose from the following files, which best fits your needs @import 'navs/mega-menu'; // dropdown includes children and ads @import 'navs/mega-menu'; // dropdown includes children @import 'navs/root-only-menu'; // does not have a dropdown \* ---------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ HEADER - NAVIGATION - MEGA MENU \* -------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------- *\ ADDITIONAL MENU Include based on the design @import 'navs/accounts'; // account navigation @import 'navs/utility'; // utility navigation \* ---------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ HEADER - NAVIGATION - HORIZONTAL - ACCOUNT NAV \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ HEADER - NAVIGATION - HORIZONTAL - UTILITY NAV \* -------------------------------------------------------------------------- */ } body > header nav ul { margin: 0; } body > header nav { /* -------------------------------------------------------------------------- *\ HEADER - NAVIGATION - MEGA MENU - DROPDOWN STYLING \* -------------------------------------------------------------------------- */ } @media (max-width: 1059.9px) { body > header nav { position: fixed; left: 0; top: 5.125rem; -webkit-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); transform: translate(-100%, 0); background: #eff1f5; width: 100%; height: 100%; padding-bottom: 6.25rem; overflow-x: hidden; overflow-y: scroll; transition: all 0.4s ease-out; opacity: 0; pointer-events: none; /* -------------------------------------------------------------------------- *\ HEADER - NAVIGATION - MEGA MENU - TOGGLE HEADER \* -------------------------------------------------------------------------- */ } body > header nav .logo { display: none; } body > header nav .main { margin: 0; background: #00369d; position: relative; padding-top: 1.5rem; } body > header nav .main li { position: static; padding: 0; margin: 0; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: space-between; align-items: stretch; align-content: stretch; flex-flow: row nowrap; } body > header nav .main li [class*="icon-"] { font-size: 0.75rem; margin-left: 0.625rem; } body > header nav .main a { display: none; width: 100%; padding: 1.25rem; -webkit-box-flex: 0 1 auto; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; font-size: 1.5rem; } body > header nav .main a:hover, body > header nav .main a:focus, body > header nav .main a.hover { text-decoration: none; } body > header nav .main a:only-child { display: flex; align-items: center; } body > header nav .main a:nth-child(2), body > header nav .main a.backLabel { display: flex; } body > header nav .main label, body > header nav .main .backLabel, body > header nav .main .displayNav { display: block; width: 100%; padding: 1.25rem; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; font-size: 1.5rem; cursor: pointer; } body > header nav .main label span, body > header nav .main .backLabel span, body > header nav .main .displayNav span { display: none; } body > header nav .main label span.icon-arrow-long-right, body > header nav .main .backLabel span.icon-arrow-long-right, body > header nav .main .displayNav span.icon-arrow-long-right { display: block; font-size: 0.75rem; margin: 0 0 0 1rem; } body > header nav .main label span.icon-arrow-long-left, body > header nav .main .backLabel span.icon-arrow-long-left, body > header nav .main .displayNav span.icon-arrow-long-left { display: block; font-size: 0.75rem; margin: 0 1rem 0 0; } body > header nav .main label:only-child, body > header nav .main .backLabel:only-child, body > header nav .main .displayNav:only-child { padding: 1.25rem; margin-left: 1.25rem; width: auto; } body > header nav .main label:only-child:after, body > header nav .main .backLabel:only-child:after, body > header nav .main .displayNav:only-child:after { left: 0; transform: translate(0, -50%) rotate(45deg) rotate(180deg); } body > header nav .main label:only-child.back-label, body > header nav .main .backLabel:only-child.back-label, body > header nav .main .displayNav:only-child.back-label { margin: 0; } body > header nav .main div { position: absolute; z-index: 1000; left: 100%; top: 0; transition: transform .25s linear; width: 100%; height: 100vh; background: #00369d; } body > header nav .main div ul { padding-top: 1.5rem; } body > header nav .main .card { display: none; } body > header nav .main .displayNav.show-nav + div { transform: translate(-100%, 0); } } body > header nav .main { font-family: "bellyswing", Helvetica, Arial, sans-serif; text-transform: uppercase; } @media (min-width: 1060px) { body > header nav .main { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: flex-end; align-items: center; flex-flow: row wrap; height: auto; width: 100%; } body > header nav .main a { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: space-between; align-items: center; flex-flow: row wrap; padding: 0.375rem 0.75rem; margin-left: 0.5rem; transition: .4s ease; letter-spacing: 0.02em; transition-property: background-color, border-radius; font-size: 1.25rem; } body > header nav .main a:hover, body > header nav .main a:focus, body > header nav .main a.hover { text-decoration: none; color: #fff; background-color: rgba(255, 255, 255, 0.25); border-radius: 6.25rem; } body > header nav .main label { display: none; } body > header nav .main > li { position: relative; margin: 0; padding: 0; } body > header nav .main > li:first-child > a { margin: 0; } @keyframes bobDown { 0% { top: 2.9375rem; } 50% { top: calc(100% + 37px); } 100% { top: calc(100% + 27px); } } @keyframes fadeDown { 0% { top: calc(100% + 37px); } 100% { top: calc(100% + 57px); } } body > header nav .main > li:hover > div { visibility: visible; opacity: 1; pointer-events: initial; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.775) 0s; animation: bobDown .5s forwards; } body > header nav .main > li.shop span { display: none; } body > header nav .main > li > div { position: absolute; left: 50%; top: 1.6875rem; margin-top: -2.3125rem; padding-top: 2.3125rem; cursor: pointer; visibility: hidden; opacity: 0; pointer-events: none; width: 100%; background: transparent; transition: all .3s ease-out; animation: fadeDown .3s forwards; transform: translate(-50%, 0); min-width: 8.875rem; padding: 0.9375rem 0 1.5rem; } body > header nav .main > li > div .triangle { z-index: 3; position: absolute; top: 0.75rem; left: 50%; transform: translate(-50%, 0); } body > header nav .main > li > div .triangle:before { content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkiIGhlaWdodD0iMTMiIHZpZXdCb3g9IjAgMCAxOSAxMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzY3MF84MjU0KSI+CjxwYXRoIGQ9Ik0xOSAxMy4xMjM5SDBMNi45MjA0NCAxLjQ2ODM4QzguMDgyOTEgLTAuNDg5NDYxIDEwLjkxNzEgLTAuNDg5NDYgMTIuMDc5NiAxLjQ2ODM4TDE5IDEzLjEyMzlaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTE5IDEzLjEyMzlMMTIuMDc5NiAxLjQ2ODM4QzEwLjkxNzEgLTAuNDg5NDYgOC4wODI5MSAtMC40ODk0NjEgNi45MjA0NCAxLjQ2ODM4TDAgMTMuMTIzOUgxOVpNMS43NTY3NCAxMi4xMjM5SDE3LjI0MzNMMTEuMjE5NyAxLjk3ODkyQzEwLjQ0NDcgMC42NzM2OTMgOC41NTUyNyAwLjY3MzY5MyA3Ljc4MDI5IDEuOTc4OTJMMS43NTY3NCAxMi4xMjM5WiIgZmlsbD0iIzcwQjNFMyIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTMuNDI4MzQgMTEuMjU3NkwwLjQyODM0NCAxNi4yNDhMLTAuNDI4NzExIDE1LjczMjhMMi41NzEyOSAxMC43NDI0TDMuNDI4MzQgMTEuMjU3NloiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTUuNTcxMyAxMS4yNTc2TDE4LjU3MTMgMTYuMjQ4TDE5LjQyODMgMTUuNzMyOEwxNi40MjgzIDEwLjc0MjRMMTUuNTcxMyAxMS4yNTc2WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNyAxNEgyVjEySDE3VjE0WiIgZmlsbD0id2hpdGUiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF82NzBfODI1NCI+CjxyZWN0IHdpZHRoPSIxOSIgaGVpZ2h0PSIxMyIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K"); } body > header nav .main > li > div:before { content: ""; background: #fff; width: 100%; height: calc(100% - 27px); display: block; border: 1px solid #70b3e3; position: absolute; top: 1.6875rem; right: 0; bottom: 0; left: 0; box-sizing: border-box; border-radius: 1.25rem; z-index: 1; } body > header nav .main > li > div:after { content: ""; background: #70b3e3; width: 100%; height: calc(100% - 27px); display: block; border: 1px solid #70b3e3; position: absolute; top: 1.9375rem; right: 0.25rem; bottom: -0.25rem; left: -0.25rem; box-sizing: border-box; border-radius: 1.25rem; z-index: 0; } body > header nav .main > li > div a { transition-duration: 0s; } body > header nav .main > li > div a:after { content: none; } body > header nav .main > li > div > ul { margin: 2.5rem 0 0; padding: 0; position: relative; z-index: 2; } body > header nav .main > li > div > ul li { margin: 0 0 1rem; padding: 0; text-align: center; width: 100%; display: block; } body > header nav .main > li > div > ul li:nth-last-child(2) { margin: 0; } body > header nav .main > li > div > ul li:nth-child(3) { display: none; } body > header nav .main > li > div > ul li a { color: #00369d; font-size: 1.125rem; line-height: 16px; text-align: center; letter-spacing: 0.02em; margin: 0; padding: 0; width: 100%; display: block; } body > header nav .main > li > div > ul li a:hover, body > header nav .main > li > div > ul li a:focus, body > header nav .main > li > div > ul li a.hover { text-decoration: none; color: #70b3e3; } body > header nav .main .displayNav { position: absolute; opacity: 0; top: 100%; left: 50%; transform: translate(-50%, 0); } body > header nav .main .displayNav:focus { display: block; background: #00369d; color: #fff; padding: 0.625rem; opacity: 1; } body > header nav .main .displayNav.show-nav + div { visibility: visible; opacity: 1; } } body > header nav input[type="checkbox"] { position: absolute; width: 1px !important; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip: rect(0, 0, 0, 0); } body > header nav .user { background: #00369d; position: relative; z-index: 100; font-family: "bellyswing", Helvetica, Arial, sans-serif; text-transform: uppercase; } body > header nav .user li { padding: 0; margin: 0; } @media (max-width: 1059.9px) { body > header nav .user a { padding: 1.25rem; font-size: 1.5rem; } body > header nav .user a i { display: none; font-size: 1.25rem; color: #fff; } body > header nav .user a span { display: inline-block; margin-left: 0; } } @media (min-width: 1060px) { body > header nav .user { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: flex-end; align-items: center; align-content: center; flex-flow: row nowrap; background-color: #fff; } body > header nav .user li .account-dropdown { position: absolute; z-index: 2; left: 50%; top: 100%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); visibility: hidden; opacity: 0; transition: all .3s ease-out; animation: fadeDown .3s forwards; margin-top: -2.3125rem; padding-top: 1.6875rem; pointer-events: none; cursor: pointer; } body > header nav .user li:hover .account-dropdown { visibility: visible; opacity: 1; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.775) 0s; animation: bobDown .5s forwards; pointer-events: initial; } body > header nav .user a { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: center; align-items: center; align-content: center; flex-flow: row nowrap; padding: 0.375rem 0.75rem; height: 2rem; color: #00369d; transition: all .4s ease; margin-left: 0.5rem; } body > header nav .user a i { display: flex; font-size: 1.25rem; } body > header nav .user a span { padding-top: 2px; padding-left: 0.5rem; } body > header nav .user a:hover, body > header nav .user a:focus, body > header nav .user a.hover { text-decoration: none; color: #00369d; background-color: rgba(0, 54, 157, 0.25); border-radius: 6.25rem; } body > header nav .user .triangle { z-index: 3; position: absolute; top: 0.75rem; left: 50%; transform: translate(-50%, 0); } body > header nav .user .triangle:before { content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkiIGhlaWdodD0iMTMiIHZpZXdCb3g9IjAgMCAxOSAxMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzY3MF84MjU0KSI+CjxwYXRoIGQ9Ik0xOSAxMy4xMjM5SDBMNi45MjA0NCAxLjQ2ODM4QzguMDgyOTEgLTAuNDg5NDYxIDEwLjkxNzEgLTAuNDg5NDYgMTIuMDc5NiAxLjQ2ODM4TDE5IDEzLjEyMzlaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTE5IDEzLjEyMzlMMTIuMDc5NiAxLjQ2ODM4QzEwLjkxNzEgLTAuNDg5NDYgOC4wODI5MSAtMC40ODk0NjEgNi45MjA0NCAxLjQ2ODM4TDAgMTMuMTIzOUgxOVpNMS43NTY3NCAxMi4xMjM5SDE3LjI0MzNMMTEuMjE5NyAxLjk3ODkyQzEwLjQ0NDcgMC42NzM2OTMgOC41NTUyNyAwLjY3MzY5MyA3Ljc4MDI5IDEuOTc4OTJMMS43NTY3NCAxMi4xMjM5WiIgZmlsbD0iIzcwQjNFMyIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTMuNDI4MzQgMTEuMjU3NkwwLjQyODM0NCAxNi4yNDhMLTAuNDI4NzExIDE1LjczMjhMMi41NzEyOSAxMC43NDI0TDMuNDI4MzQgMTEuMjU3NloiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTUuNTcxMyAxMS4yNTc2TDE4LjU3MTMgMTYuMjQ4TDE5LjQyODMgMTUuNzMyOEwxNi40MjgzIDEwLjc0MjRMMTUuNTcxMyAxMS4yNTc2WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNyAxNEgyVjEySDE3VjE0WiIgZmlsbD0id2hpdGUiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF82NzBfODI1NCI+CjxyZWN0IHdpZHRoPSIxOSIgaGVpZ2h0PSIxMyIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K"); } body > header nav .user .account-dropdown ul a { color: #00369d; margin: 0.5rem; padding: 0.5rem 1rem; } body > header nav .user .account-dropdown ul a:hover, body > header nav .user .account-dropdown ul a:focus, body > header nav .user .account-dropdown ul a.hover { color: #70b3e3; background: none; } body > header nav .user .account-dropdown ul li { z-index: 2; } body > header nav .user .account-dropdown ul:before { content: ""; background: #fff; width: 100%; display: block; border: 1px solid #70b3e3; position: absolute; top: 1.6875rem; right: 0; bottom: 0; left: 0; box-sizing: border-box; border-radius: 1.25rem; z-index: 1; } body > header nav .user .account-dropdown ul:after { content: ""; background: #70b3e3; width: 100%; display: block; border: 1px solid #70b3e3; position: absolute; top: 1.875rem; right: 0.25rem; bottom: -0.25rem; left: -0.25rem; box-sizing: border-box; border-radius: 1.25rem; z-index: 0; } } body > header nav .utility { background: #00369d; height: 100%; } body > header nav .utility li { padding: 0; margin: 0; margin-right: 0.75rem; } @media (max-width: 1059.9px) { body > header nav .utility i { font-size: 1.25rem; color: #fff; } body > header nav .utility li { text-align: left; margin: 0; } body > header nav .utility a { border: none; font-size: 1.5rem; letter-spacing: 0; padding: 1.25rem; width: 100%; height: 100%; justify-content: left; } body > header nav .utility a:hover, body > header nav .utility a:active, body > header nav .utility a:focus { background-color: transparent !important; color: #70b3e3 !important; border: none !important; box-shadow: none; } body > header nav .utility span { display: inline-block; margin-left: 0.75rem; } } @media (min-width: 1060px) { body > header nav .utility { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: flex-end; align-items: center; flex-flow: row nowrap; } body > header nav .utility li:hover > ul { display: block; } body > header nav .utility a i { font-size: 1.25rem; color: #fff; } body > header nav .utility a span { padding-left: 0.625rem; } body > header nav .utility a:hover, body > header nav .utility a:focus, body > header nav .utility a.hover { text-decoration: none; color: #70b3e3; } body > header nav .utility ul { display: none; position: absolute; z-index: 1000; left: 50%; top: 100%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); background: #001338; padding: 0.5rem; } body > header nav .utility ul a { color: #fff; } body > header nav .utility ul a:hover, body > header nav .utility ul a:focus, body > header nav .utility ul a.hover { background: none; color: #00369d; } body > header nav .utility ul li { margin: 0; } body > header nav .utility ul li:last-child { margin: 0; } } @media (max-width: 1059.9px) { body > header #headerToggleNav:checked ~ nav { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; pointer-events: inherit; } } body > header .mobile-cart { display: flex; margin-left: 1rem; } body > header .mobile-cart i { font-size: 2rem; } @media (min-width: 1060px) { body > header .mobile-cart { position: absolute; right: 1rem; top: 2.25rem; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); display: none; } } @media (max-width: 1059.9px) { body > header .desktop-cart { display: none; } } body > header [data-cart-preview] { position: relative; display: flex; } @media (max-width: 1059.9px) { body > header [data-cart-preview] { display: none; } } body > header .cart-quantity { display: none; background: #ed6c00; color: #fff; padding: 0.375rem !important; font-size: 0.625rem; line-height: .5em; margin-left: 0.125rem; border-radius: 2.5rem; align-self: center; position: relative; } body > header .cart-quantity.is-empty { display: none; } body > header .cart-quantity.has-quantity { display: flex; align-items: center; } body > header .cart-dropdown { display: block; position: fixed; z-index: 2000; right: 0; top: 0; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); background: #fff; box-shadow: 0 0 1rem rgba(0, 0, 0, 0.25); height: 100%; overflow: scroll; transform: translate(100%, 0); transition: all 0.4s ease; } body > header .cart-dropdown.is-loading { min-width: 25rem; } body > header .cart-dropdown.is-visible { width: 25rem; transform: translate(0, 0); } body > header .cart-dropdown > h5 { padding: 1rem; font-size: 1rem; font-weight: bold; background-color: #eff1f5; } body > header .cart-dropdown .content { padding: 1rem; font-family: "Futura-PT", Helvetica, Arial, sans-serif; } body > header .cart-dropdown .products { position: static; display: block; left: auto; top: auto; transform: none; background: none; padding: 0; } body > header .cart-dropdown .products p { margin: 0; color: #000; } body > header .cart-dropdown .products li { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto; column-gap: 1rem; font-size: 0.875rem; margin-bottom: 1.25rem; align-items: center; } body > header .cart-dropdown .products li::before { display: none; } body > header .cart-dropdown .products .cnt { text-align: right; } body > header .cart-dropdown .products .name { margin: 0 0 0.5rem; } body > header .cart-dropdown .products .name small { font-size: 0.75rem; font-weight: 700; margin: 0 0 0.25rem; display: block; } body > header .cart-dropdown .products img { width: 100%; height: auto; } body > header .cart-dropdown .subtotal { font-size: 1rem; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: space-between; align-items: center; flex-flow: row nowrap; margin: 0 0 1rem; } body > header .cart-dropdown .buttons { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: space-between; align-items: center; flex-flow: row nowrap; } body > header .cart-dropdown .buttons a { padding: 0.625rem; } body > header .cart-dropdown .buttons [class*="btn-"] { margin: 0 0 0 0; } @media (max-width: 1059.9px) { .nav-open { height: 100vh; overflow: hidden; } .nav-open > header .toggle-search { opacity: 0; } } /* -------------------------------------------------------------------------- *\ MODAL \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ MODAL - BACKGROUND \* -------------------------------------------------------------------------- */ .modal-background { transition: all 0.4s ease; position: fixed; z-index: 1500; left: 0; top: 0 !important; width: 100%; height: 100%; background: rgba(204, 204, 204, 0.75); visibility: hidden; opacity: 0; } .has-activeModal .modal-background { opacity: 1; visibility: visible; } /* -------------------------------------------------------------------------- *\ MODAL - BASIC This is used to style the modal elements used throughout the website. This includes Cart Previews, BigCommerce alerts that do not use SWAL. For the Sweet Alert (SWAL) styling see modal/_swal.scss \* -------------------------------------------------------------------------- */ .modal { position: fixed; z-index: 15001; left: 50%; top: 50% !important; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: #fff; border-radius: 0.25rem; width: 90%; max-width: 75rem; min-width: 20rem; min-height: remCal(240); max-height: 90vh; display: none; visibility: hidden; opacity: 0; } .modal .modal-window { padding: 1.25rem; max-height: 80vh; overflow-y: scroll; } .modal .modal-body { overflow: auto; } .modal .modal-close { position: absolute; right: 0; top: 0; -webkit-transform: translate(50%, -50%); -ms-transform: translate(50%, -50%); transform: translate(50%, -50%); display: block; background: #fff; border: 0.125rem solid #001338; color: #001338; border-radius: 100%; width: 2rem; height: 2rem; text-align: center; font-size: 1rem; z-index: 15001; } .modal .modal-close:before { content: " "; position: absolute; right: 0; top: 50%; border-width: 0.625rem; border-style: solid; border-color: transparent transparent #70b3e3 transparent; } .modal .modal-close:after { content: attr(title); padding: 0.25rem 0.375rem; background-color: #70b3e3; color: #000; position: absolute; font-size: 1rem; white-space: nowrap; right: 0; top: 100%; cursor: default; border-radius: 0.5rem; } .modal .modal-close:before, .modal .modal-close:after { display: none; } .modal .modal-close:focus:before, .modal .modal-close:focus:after { display: block; } .modal.withVideo .modal-window { padding: 0; overflow: hidden; } .modal .video-fullscreen { padding: 56.25% 0 0; position: relative; overflow: hidden; } .modal .video-fullscreen iframe { position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100%; width: 100%; } .modal--alert { border: 1px solid #eff1f5; padding: 40px 20px 20px 20px; text-align: center; width: auto; } .modal--alert .modal-content { padding-bottom: 1.25rem; } @media print { .modal { background: #fff !important; display: none; } } body.has-activeModal { overflow: hidden !important; } meta.foundation-data-attribute-namespace { font-family: false; } /* -------------------------------------------------------------------------- *\ MODAL - SWAL This is used to control the styling for Sweet Alert modals. \* -------------------------------------------------------------------------- */ .swal2-popup.swal2-toast { flex-direction: row; align-items: center; width: auto; padding: 0.625em; overflow-y: hidden; background: #fff; box-shadow: 0 0 0.625em #d9d9d9; } .swal2-popup.swal2-toast .swal2-header { flex-direction: row; padding: 0; } .swal2-popup.swal2-toast .swal2-title { flex-grow: 1; justify-content: flex-start; margin: 0 0.6em; font-size: 1em; } .swal2-popup.swal2-toast .swal2-footer { margin: 0.5em 0 0; padding: 0.5em 0 0; font-size: 0.8em; } .swal2-popup.swal2-toast .swal2-close { position: static; width: 0.8em; height: 0.8em; line-height: 0.8; } .swal2-popup.swal2-toast .swal2-content { justify-content: flex-start; padding: 0; font-size: 1em; } .swal2-popup.swal2-toast .swal2-icon { width: 2em; min-width: 2em; height: 2em; margin: 0; } .swal2-popup.swal2-toast .swal2-icon .swal2-icon-content { display: flex; align-items: center; font-size: 1.8em; font-weight: bold; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .swal2-popup.swal2-toast .swal2-icon .swal2-icon-content { font-size: .25em; } } .swal2-popup.swal2-toast .swal2-icon.swal2-success .swal2-success-ring { width: 2em; height: 2em; } .swal2-popup.swal2-toast .swal2-icon.swal2-error [class^='swal2-x-mark-line'] { top: .875em; width: 1.375em; } .swal2-popup.swal2-toast .swal2-icon.swal2-error [class^='swal2-x-mark-line'][class$='left'] { left: .3125em; } .swal2-popup.swal2-toast .swal2-icon.swal2-error [class^='swal2-x-mark-line'][class$='right'] { right: .3125em; } .swal2-popup.swal2-toast .swal2-actions { flex-basis: auto !important; width: auto; height: auto; margin: 0 .3125em; } .swal2-popup.swal2-toast .swal2-styled { margin: 0 .3125em; padding: .3125em .625em; font-size: 1em; } .swal2-popup.swal2-toast .swal2-styled:focus { box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(50, 100, 150, 0.4); } .swal2-popup.swal2-toast .swal2-success { border-color: #a5dc86; } .swal2-popup.swal2-toast .swal2-success [class^='swal2-success-circular-line'] { position: absolute; width: 1.6em; height: 3em; transform: rotate(45deg); border-radius: 50%; } .swal2-popup.swal2-toast .swal2-success [class^='swal2-success-circular-line'][class$='left'] { top: -.8em; left: -.5em; transform: rotate(-45deg); transform-origin: 2em 2em; border-radius: 4em 0 0 4em; } .swal2-popup.swal2-toast .swal2-success [class^='swal2-success-circular-line'][class$='right'] { top: -.25em; left: .9375em; transform-origin: 0 1.5em; border-radius: 0 4em 4em 0; } .swal2-popup.swal2-toast .swal2-success .swal2-success-ring { width: 2em; height: 2em; } .swal2-popup.swal2-toast .swal2-success .swal2-success-fix { top: 0; left: .4375em; width: .4375em; height: 2.6875em; } .swal2-popup.swal2-toast .swal2-success [class^='swal2-success-line'] { height: .3125em; } .swal2-popup.swal2-toast .swal2-success [class^='swal2-success-line'][class$='tip'] { top: 1.125em; left: .1875em; width: .75em; } .swal2-popup.swal2-toast .swal2-success [class^='swal2-success-line'][class$='long'] { top: .9375em; right: .1875em; width: 1.375em; } .swal2-popup.swal2-toast .swal2-success.swal2-icon-show .swal2-success-line-tip { animation: swal2-toast-animate-success-line-tip .75s; } .swal2-popup.swal2-toast .swal2-success.swal2-icon-show .swal2-success-line-long { animation: swal2-toast-animate-success-line-long .75s; } .swal2-popup.swal2-toast.swal2-show { animation: swal2-toast-show 0.5s; } .swal2-popup.swal2-toast.swal2-hide { animation: swal2-toast-hide 0.1s forwards; } .swal2-container { display: flex; position: fixed; z-index: 1060; top: 0; right: 0; bottom: 0; left: 0; flex-direction: row; align-items: center; justify-content: center; padding: 0.625em; overflow-x: hidden; transition: background-color 0.1s; -webkit-overflow-scrolling: touch; } .swal2-container.swal2-backdrop-show, .swal2-container.swal2-noanimation { background: rgba(0, 0, 0, 0.4); } .swal2-container.swal2-backdrop-hide { background: transparent !important; } .swal2-container.swal2-top { align-items: flex-start; } .swal2-container.swal2-top-start, .swal2-container.swal2-top-left { align-items: flex-start; justify-content: flex-start; } .swal2-container.swal2-top-end, .swal2-container.swal2-top-right { align-items: flex-start; justify-content: flex-end; } .swal2-container.swal2-center { align-items: center; } .swal2-container.swal2-center-start, .swal2-container.swal2-center-left { align-items: center; justify-content: flex-start; } .swal2-container.swal2-center-end, .swal2-container.swal2-center-right { align-items: center; justify-content: flex-end; } .swal2-container.swal2-bottom { align-items: flex-end; } .swal2-container.swal2-bottom-start, .swal2-container.swal2-bottom-left { align-items: flex-end; justify-content: flex-start; } .swal2-container.swal2-bottom-end, .swal2-container.swal2-bottom-right { align-items: flex-end; justify-content: flex-end; } .swal2-container.swal2-bottom > :first-child, .swal2-container.swal2-bottom-start > :first-child, .swal2-container.swal2-bottom-left > :first-child, .swal2-container.swal2-bottom-end > :first-child, .swal2-container.swal2-bottom-right > :first-child { margin-top: auto; } .swal2-container.swal2-grow-fullscreen > .swal2-modal { display: flex !important; flex: 1; align-self: stretch; justify-content: center; } .swal2-container.swal2-grow-row > .swal2-modal { display: flex !important; flex: 1; align-content: center; justify-content: center; } .swal2-container.swal2-grow-column { flex: 1; flex-direction: column; } .swal2-container.swal2-grow-column.swal2-top, .swal2-container.swal2-grow-column.swal2-center, .swal2-container.swal2-grow-column.swal2-bottom { align-items: center; } .swal2-container.swal2-grow-column.swal2-top-start, .swal2-container.swal2-grow-column.swal2-center-start, .swal2-container.swal2-grow-column.swal2-bottom-start, .swal2-container.swal2-grow-column.swal2-top-left, .swal2-container.swal2-grow-column.swal2-center-left, .swal2-container.swal2-grow-column.swal2-bottom-left { align-items: flex-start; } .swal2-container.swal2-grow-column.swal2-top-end, .swal2-container.swal2-grow-column.swal2-center-end, .swal2-container.swal2-grow-column.swal2-bottom-end, .swal2-container.swal2-grow-column.swal2-top-right, .swal2-container.swal2-grow-column.swal2-center-right, .swal2-container.swal2-grow-column.swal2-bottom-right { align-items: flex-end; } .swal2-container.swal2-grow-column > .swal2-modal { display: flex !important; flex: 1; align-content: center; justify-content: center; } .swal2-container.swal2-no-transition { transition: none !important; } .swal2-container:not(.swal2-top):not(.swal2-top-start):not(.swal2-top-end):not(.swal2-top-left):not(.swal2-top-right):not(.swal2-center-start):not(.swal2-center-end):not(.swal2-center-left):not(.swal2-center-right):not(.swal2-bottom):not(.swal2-bottom-start):not(.swal2-bottom-end):not(.swal2-bottom-left):not(.swal2-bottom-right):not(.swal2-grow-fullscreen) > .swal2-modal { margin: auto; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .swal2-container .swal2-modal { margin: 0 !important; } } .swal2-popup { display: none; position: relative; box-sizing: border-box; flex-direction: column; justify-content: center; width: 32em; max-width: 100%; padding: 1.25em; border: none; border-radius: 0.3125em; background: #fff; font-family: inherit; font-size: 1rem; } .swal2-popup:focus { outline: none; } .swal2-popup.swal2-loading { overflow-y: hidden; } .swal2-header { display: flex; flex-direction: column; align-items: center; padding: 0 1.8em; } .swal2-title { position: relative; max-width: 100%; margin: 0 0 0.4em; padding: 0; color: #595959; font-size: 1.875em; font-weight: 600; text-align: center; text-transform: none; word-wrap: break-word; } .swal2-actions { display: flex; z-index: 1; flex-wrap: wrap; align-items: center; justify-content: center; width: 100%; margin: 1.25em auto 0; } .swal2-actions:not(.swal2-loading) .swal2-styled[disabled] { opacity: .4; } .swal2-actions:not(.swal2-loading) .swal2-styled:hover { background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)); } .swal2-actions:not(.swal2-loading) .swal2-styled:active { background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)); } .swal2-actions.swal2-loading .swal2-styled.swal2-confirm { box-sizing: border-box; width: 2.5em; height: 2.5em; margin: .46875em; padding: 0; animation: swal2-rotate-loading 1.5s linear 0s infinite normal; border: .25em solid transparent; border-radius: 100%; border-color: transparent; background-color: transparent !important; color: transparent !important; cursor: default; user-select: none; } .swal2-actions.swal2-loading .swal2-styled.swal2-cancel { margin-right: 30px; margin-left: 30px; } .swal2-actions.swal2-loading :not(.swal2-styled).swal2-confirm::after { content: ''; display: inline-block; width: 15px; height: 15px; margin-left: 5px; animation: swal2-rotate-loading 1.5s linear 0s infinite normal; border: 3px solid #999999; border-radius: 50%; border-right-color: transparent; box-shadow: 1px 1px 1px #fff; } .swal2-styled { margin: .3125em; padding: .625em 2em; box-shadow: none; font-weight: 500; } .swal2-styled:not([disabled]) { cursor: pointer; } .swal2-styled.swal2-confirm { border: 0; border-radius: 0.25em; background: initial; background-color: #3085d6; color: #fff; font-size: 1.0625em; } .swal2-styled.swal2-cancel { border: 0; border-radius: 0.25em; background: initial; background-color: #aaa; color: #fff; font-size: 1.0625em; } .swal2-styled:focus { outline: none; box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(50, 100, 150, 0.4); } .swal2-styled::-moz-focus-inner { border: 0; } .swal2-footer { justify-content: center; margin: 1.25em 0 0; padding: 1em 0 0; border-top: 1px solid #eee; color: #545454; font-size: 1em; } .swal2-timer-progress-bar-container { position: absolute; right: 0; bottom: 0; left: 0; height: 0.25em; overflow: hidden; border-bottom-right-radius: 0.3125em; border-bottom-left-radius: 0.3125em; } .swal2-timer-progress-bar { width: 100%; height: 0.25em; background: rgba(0, 0, 0, 0.2); } .swal2-image { max-width: 100%; margin: 1.25em auto; } .swal2-close { position: absolute; z-index: 2; top: 0; right: 0; align-items: center; justify-content: center; width: 1.2em; height: 1.2em; padding: 0; overflow: hidden; transition: color 0.1s ease-out; border: none; border-radius: 0; background: transparent; color: #cccccc; font-family: serif; font-size: 2.5em; line-height: 1.2; cursor: pointer; } .swal2-close:hover { transform: none; background: transparent; color: #f27474; } .swal2-close::-moz-focus-inner { border: 0; } .swal2-content { z-index: 1; justify-content: center; margin: 0; padding: 0 1.6em; color: #545454; font-size: 1.125em; font-weight: normal; line-height: normal; text-align: center; word-wrap: break-word; } .swal2-input, .swal2-file, .swal2-textarea, .swal2-select, .swal2-radio, .swal2-checkbox { margin: 1em auto; } .swal2-input, .swal2-file, .swal2-textarea { box-sizing: border-box; width: 100%; transition: border-color 0.3s, box-shadow 0.3s; border: 1px solid #d9d9d9; border-radius: 0.1875em; background: inherit; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06); color: inherit; font-size: 1.125em; } .swal2-input.swal2-inputerror, .swal2-file.swal2-inputerror, .swal2-textarea.swal2-inputerror { border-color: #f27474 !important; box-shadow: 0 0 2px #f27474 !important; } .swal2-input:focus, .swal2-file:focus, .swal2-textarea:focus { border: 1px solid #b4dbed; outline: none; box-shadow: 0 0 3px #c4e6f5; } .swal2-input::placeholder, .swal2-file::placeholder, .swal2-textarea::placeholder { color: #cccccc; } .swal2-range { margin: 1em auto; background: #fff; } .swal2-range input { width: 80%; } .swal2-range output { width: 20%; color: inherit; font-weight: 600; text-align: center; } .swal2-range input, .swal2-range output { height: 2.625em; padding: 0; font-size: 1.125em; line-height: 2.625em; } .swal2-input { height: 2.625em; padding: 0 0.75em; } .swal2-input[type='number'] { max-width: 10em; } .swal2-file { background: inherit; font-size: 1.125em; } .swal2-textarea { height: 6.75em; padding: 0.75em; } .swal2-select { min-width: 50%; max-width: 100%; padding: .375em .625em; background: inherit; color: inherit; font-size: 1.125em; } .swal2-radio, .swal2-checkbox { align-items: center; justify-content: center; background: #fff; color: inherit; } .swal2-radio label, .swal2-checkbox label { margin: 0 .6em; font-size: 1.125em; } .swal2-radio input, .swal2-checkbox input { margin: 0 .4em; } .swal2-validation-message { display: none; align-items: center; justify-content: center; padding: 0.625em; overflow: hidden; background: #f0f0f0; color: #666666; font-size: 1em; font-weight: 300; } .swal2-validation-message::before { content: '!'; display: inline-block; width: 1.5em; min-width: 1.5em; height: 1.5em; margin: 0 .625em; border-radius: 50%; background-color: #f27474; color: #fff; font-weight: 600; line-height: 1.5em; text-align: center; } .swal2-icon { position: relative; box-sizing: content-box; justify-content: center; width: 5em; height: 5em; margin: 1.25em auto 1.875em; border: .25em solid transparent; border-radius: 50%; font-family: inherit; line-height: 5em; cursor: default; user-select: none; } .swal2-icon .swal2-icon-content { display: flex; align-items: center; font-size: 3.75em; } .swal2-icon.swal2-error { border-color: #f27474; color: #f27474; } .swal2-icon.swal2-error .swal2-x-mark { position: relative; flex-grow: 1; } .swal2-icon.swal2-error [class^='swal2-x-mark-line'] { display: block; position: absolute; top: 2.3125em; width: 2.9375em; height: .3125em; border-radius: .125em; background-color: #f27474; } .swal2-icon.swal2-error [class^='swal2-x-mark-line'][class$='left'] { left: 1.0625em; transform: rotate(45deg); } .swal2-icon.swal2-error [class^='swal2-x-mark-line'][class$='right'] { right: 1em; transform: rotate(-45deg); } .swal2-icon.swal2-error.swal2-icon-show { animation: swal2-animate-error-icon .5s; } .swal2-icon.swal2-error.swal2-icon-show .swal2-x-mark { animation: swal2-animate-error-x-mark .5s; } .swal2-icon.swal2-warning { border-color: #facea8; color: #f8bb86; } .swal2-icon.swal2-info { border-color: #9de0f6; color: #3fc3ee; } .swal2-icon.swal2-question { border-color: #c9dae1; color: #87adbd; } .swal2-icon.swal2-success { border-color: #a5dc86; color: #a5dc86; } .swal2-icon.swal2-success [class^='swal2-success-circular-line'] { position: absolute; width: 3.75em; height: 7.5em; transform: rotate(45deg); border-radius: 50%; } .swal2-icon.swal2-success [class^='swal2-success-circular-line'][class$='left'] { top: -.4375em; left: -2.0635em; transform: rotate(-45deg); transform-origin: 3.75em 3.75em; border-radius: 7.5em 0 0 7.5em; } .swal2-icon.swal2-success [class^='swal2-success-circular-line'][class$='right'] { top: -.6875em; left: 1.875em; transform: rotate(-45deg); transform-origin: 0 3.75em; border-radius: 0 7.5em 7.5em 0; } .swal2-icon.swal2-success .swal2-success-ring { position: absolute; z-index: 2; top: -.25em; left: -.25em; box-sizing: content-box; width: 100%; height: 100%; border: 0.25em solid rgba(165, 220, 134, 0.3); border-radius: 50%; } .swal2-icon.swal2-success .swal2-success-fix { position: absolute; z-index: 1; top: .5em; left: 1.625em; width: .4375em; height: 5.625em; transform: rotate(-45deg); } .swal2-icon.swal2-success [class^='swal2-success-line'] { display: block; position: absolute; z-index: 2; height: .3125em; border-radius: .125em; background-color: #a5dc86; } .swal2-icon.swal2-success [class^='swal2-success-line'][class$='tip'] { top: 2.875em; left: .8125em; width: 1.5625em; transform: rotate(45deg); } .swal2-icon.swal2-success [class^='swal2-success-line'][class$='long'] { top: 2.375em; right: .5em; width: 2.9375em; transform: rotate(-45deg); } .swal2-icon.swal2-success.swal2-icon-show .swal2-success-line-tip { animation: swal2-animate-success-line-tip .75s; } .swal2-icon.swal2-success.swal2-icon-show .swal2-success-line-long { animation: swal2-animate-success-line-long .75s; } .swal2-icon.swal2-success.swal2-icon-show .swal2-success-circular-line-right { animation: swal2-rotate-success-circular-line 4.25s ease-in; } .swal2-progress-steps { align-items: center; margin: 0 0 1.25em; padding: 0; background: inherit; font-weight: 600; } .swal2-progress-steps li { display: inline-block; position: relative; } .swal2-progress-steps .swal2-progress-step { z-index: 20; width: 2em; height: 2em; border-radius: 2em; background: #3085d6; color: #fff; line-height: 2em; text-align: center; } .swal2-progress-steps .swal2-progress-step.swal2-active-progress-step { background: #3085d6; } .swal2-progress-steps .swal2-progress-step.swal2-active-progress-step ~ .swal2-progress-step { background: #add8e6; color: #fff; } .swal2-progress-steps .swal2-progress-step.swal2-active-progress-step ~ .swal2-progress-step-line { background: #add8e6; } .swal2-progress-steps .swal2-progress-step-line { z-index: 10; width: 2.5em; height: .4em; margin: 0 -1px; background: #3085d6; } [class^='swal2'] { -webkit-tap-highlight-color: transparent; } .swal2-show { animation: swal2-show 0.3s; } .swal2-hide { animation: swal2-hide 0.15s forwards; } .swal2-noanimation { transition: none; } .swal2-scrollbar-measure { position: absolute; top: -9999px; width: 50px; height: 50px; overflow: scroll; } .swal2-rtl .swal2-close { right: auto; left: 0; } .swal2-rtl .swal2-timer-progress-bar { right: 0; left: auto; } @supports (-ms-accelerator: true) { .swal2-range input { width: 100% !important; } .swal2-range output { display: none; } } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .swal2-range input { width: 100% !important; } .swal2-range output { display: none; } } @-moz-document url-prefix() { .swal2-close:focus { outline: 2px solid rgba(50, 100, 150, 0.4); } } @keyframes swal2-toast-show { 0% { transform: translateY(-0.625em) rotateZ(2deg); } 33% { transform: translateY(0) rotateZ(-2deg); } 66% { transform: translateY(0.3125em) rotateZ(2deg); } 100% { transform: translateY(0) rotateZ(0deg); } } @keyframes swal2-toast-hide { 100% { transform: rotateZ(1deg); opacity: 0; } } @keyframes swal2-toast-animate-success-line-tip { 0% { top: .5625em; left: .0625em; width: 0; } 54% { top: .125em; left: .125em; width: 0; } 70% { top: .625em; left: -.25em; width: 1.625em; } 84% { top: 1.0625em; left: .75em; width: .5em; } 100% { top: 1.125em; left: .1875em; width: .75em; } } @keyframes swal2-toast-animate-success-line-long { 0% { top: 1.625em; right: 1.375em; width: 0; } 65% { top: 1.25em; right: .9375em; width: 0; } 84% { top: .9375em; right: 0; width: 1.125em; } 100% { top: .9375em; right: .1875em; width: 1.375em; } } @keyframes swal2-show { 0% { transform: scale(0.7); } 45% { transform: scale(1.05); } 80% { transform: scale(0.95); } 100% { transform: scale(1); } } @keyframes swal2-hide { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.5); opacity: 0; } } @keyframes swal2-animate-success-line-tip { 0% { top: 1.1875em; left: .0625em; width: 0; } 54% { top: 1.0625em; left: .125em; width: 0; } 70% { top: 2.1875em; left: -.375em; width: 3.125em; } 84% { top: 3em; left: 1.3125em; width: 1.0625em; } 100% { top: 2.8125em; left: .8125em; width: 1.5625em; } } @keyframes swal2-animate-success-line-long { 0% { top: 3.375em; right: 2.875em; width: 0; } 65% { top: 3.375em; right: 2.875em; width: 0; } 84% { top: 2.1875em; right: 0; width: 3.4375em; } 100% { top: 2.375em; right: .5em; width: 2.9375em; } } @keyframes swal2-rotate-success-circular-line { 0% { transform: rotate(-45deg); } 5% { transform: rotate(-45deg); } 12% { transform: rotate(-405deg); } 100% { transform: rotate(-405deg); } } @keyframes swal2-animate-error-x-mark { 0% { margin-top: 1.625em; transform: scale(0.4); opacity: 0; } 50% { margin-top: 1.625em; transform: scale(0.4); opacity: 0; } 80% { margin-top: -.375em; transform: scale(1.15); } 100% { margin-top: 0; transform: scale(1); opacity: 1; } } @keyframes swal2-animate-error-icon { 0% { transform: rotateX(100deg); opacity: 0; } 100% { transform: rotateX(0deg); opacity: 1; } } @keyframes swal2-rotate-loading { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) { overflow: hidden; } body.swal2-height-auto { height: auto !important; } body.swal2-no-backdrop .swal2-container { top: auto; right: auto; bottom: auto; left: auto; max-width: calc(100% - 0.625em * 2); background-color: transparent !important; } body.swal2-no-backdrop .swal2-container > .swal2-modal { box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); } body.swal2-no-backdrop .swal2-container.swal2-top { top: 0; left: 50%; transform: translateX(-50%); } body.swal2-no-backdrop .swal2-container.swal2-top-start, body.swal2-no-backdrop .swal2-container.swal2-top-left { top: 0; left: 0; } body.swal2-no-backdrop .swal2-container.swal2-top-end, body.swal2-no-backdrop .swal2-container.swal2-top-right { top: 0; right: 0; } body.swal2-no-backdrop .swal2-container.swal2-center { top: 50%; left: 50%; transform: translate(-50%, -50%); } body.swal2-no-backdrop .swal2-container.swal2-center-start, body.swal2-no-backdrop .swal2-container.swal2-center-left { top: 50%; left: 0; transform: translateY(-50%); } body.swal2-no-backdrop .swal2-container.swal2-center-end, body.swal2-no-backdrop .swal2-container.swal2-center-right { top: 50%; right: 0; transform: translateY(-50%); } body.swal2-no-backdrop .swal2-container.swal2-bottom { bottom: 0; left: 50%; transform: translateX(-50%); } body.swal2-no-backdrop .swal2-container.swal2-bottom-start, body.swal2-no-backdrop .swal2-container.swal2-bottom-left { bottom: 0; left: 0; } body.swal2-no-backdrop .swal2-container.swal2-bottom-end, body.swal2-no-backdrop .swal2-container.swal2-bottom-right { right: 0; bottom: 0; } @media print { body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) { overflow-y: scroll !important; } body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) > [aria-hidden='true'] { display: none; } body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) .swal2-container { position: static !important; } } body.swal2-toast-shown .swal2-container { background-color: transparent; } body.swal2-toast-shown .swal2-container.swal2-top { top: 0; right: auto; bottom: auto; left: 50%; transform: translateX(-50%); } body.swal2-toast-shown .swal2-container.swal2-top-end, body.swal2-toast-shown .swal2-container.swal2-top-right { top: 0; right: 0; bottom: auto; left: auto; } body.swal2-toast-shown .swal2-container.swal2-top-start, body.swal2-toast-shown .swal2-container.swal2-top-left { top: 0; right: auto; bottom: auto; left: 0; } body.swal2-toast-shown .swal2-container.swal2-center-start, body.swal2-toast-shown .swal2-container.swal2-center-left { top: 50%; right: auto; bottom: auto; left: 0; transform: translateY(-50%); } body.swal2-toast-shown .swal2-container.swal2-center { top: 50%; right: auto; bottom: auto; left: 50%; transform: translate(-50%, -50%); } body.swal2-toast-shown .swal2-container.swal2-center-end, body.swal2-toast-shown .swal2-container.swal2-center-right { top: 50%; right: 0; bottom: auto; left: auto; transform: translateY(-50%); } body.swal2-toast-shown .swal2-container.swal2-bottom-start, body.swal2-toast-shown .swal2-container.swal2-bottom-left { top: auto; right: auto; bottom: 0; left: 0; } body.swal2-toast-shown .swal2-container.swal2-bottom { top: auto; right: auto; bottom: 0; left: 50%; transform: translateX(-50%); } body.swal2-toast-shown .swal2-container.swal2-bottom-end, body.swal2-toast-shown .swal2-container.swal2-bottom-right { top: auto; right: 0; bottom: 0; left: auto; } body.swal2-toast-column .swal2-toast { flex-direction: column; align-items: stretch; } body.swal2-toast-column .swal2-toast .swal2-actions { flex: 1; align-self: stretch; height: 2.2em; margin-top: .3125em; } body.swal2-toast-column .swal2-toast .swal2-loading { justify-content: center; } body.swal2-toast-column .swal2-toast .swal2-input { height: 2em; margin: .3125em auto; font-size: 1em; } body.swal2-toast-column .swal2-toast .swal2-validation-message { font-size: 1em; } .swal2-container { position: fixed; z-index: 15000; left: 0; top: 0 !important; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.75); visibility: hidden; display: none; } .swal2-shown .swal2-container { display: flex; visibility: visible; } .btn { margin: 0 0 0 0.75rem; } .swal2-icon { display: flex; } .swal2-container { z-index: 1000; } .hidden { display: none; } .dialog_label { text-align: center; } .dialog_form { margin: 15px; } .dialog_form .label_text { box-sizing: border-box; padding-right: 0.5em; display: inline-block; font-size: 18px; font-weight: bold; width: 30%; text-align: right; } .dialog_form .label_info { box-sizing: border-box; padding-right: 0.5em; font-size: 12px; width: 30%; text-align: right; display: inline-block; } .dialog_form_item { margin: 10px 0; font-size: 0; } .dialog_form_item .wide_input { box-sizing: border-box; max-width: 70%; width: 27em; } .dialog_form_item .city_input { box-sizing: border-box; max-width: 70%; width: 17em; } .dialog_form_item .state_input { box-sizing: border-box; max-width: 70%; width: 15em; } .dialog_form_item .zip_input { box-sizing: border-box; max-width: 70%; width: 9em; } .dialog_form_actions { text-align: right; padding: 0 20px 20px; } .dialog_close_button { float: right; position: absolute; top: 10px; left: 92%; height: 25px; } .dialog_close_button img { border: 0; } .dialog_desc { padding: 10px 20px; } /* native element uses the ::backdrop pseudo-element */ /* dialog::backdrop, */ .dialog-backdrop { display: none; position: fixed; overflow-y: auto; top: 0; right: 0; bottom: 0; left: 0; z-index: 15000; } @media screen and (min-width: 640px) { .dialog-backdrop { background: rgba(0, 0, 0, 0.75); } } .dialog-backdrop.active { display: block; } .no-scroll { overflow-y: auto !important; } /* this is added to the body when a dialog is open */ .has-dialog { overflow: hidden; } /* styling for alert-dialog example */ .notes { display: block; font-size: 1rem; line-height: 1.3; min-width: 400px; max-width: 100%; width: 33%; } .toast { background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 1rem; border: none; border-radius: 0.25rem; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); position: fixed; top: 1rem; right: 1rem; transform: translateY(-150%); transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1); } .toast.active { transform: translateY(0); } /* -------------------------------------------------------------------------- *\ MODAL - LOADING OVERLAY \* -------------------------------------------------------------------------- */ .loadingOverlay-container { min-height: 120px; position: relative; } .loadingOverlay { position: fixed; z-index: 15000; left: 0; top: 0; width: 100%; height: 100%; background: white; transition: all 250ms ease-out; display: flex; align-items: center; min-height: 200px; } .page-type-cart .loadingOverlay { background: rgba(255, 255, 255, 0.8); } .loadingOverlay-circle { position: fixed; z-index: 15000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); transition: all 250ms ease-out; display: flex; align-items: center; min-height: 200px; } .loadingOverlay-circle:after { position: fixed; z-index: 15; left: 50%; top: 50%; border-radius: 100%; border: 0.25rem solid #00369d; content: ""; animation: spinner 1s ease-out 0s infinite; } .loadingOverlay-circle:after { height: 4rem; width: 4rem; border-top-color: transparent; border-bottom-color: transparent; } .loadingOverlay-circle:before { height: 2.625rem; width: 2.625rem; border-radius: 2.625rem; border: solid 0.125rem; border-color: #00369d #00369d #70b3e3 #70b3e3; content: ""; display: block; left: 0; margin: 0 auto; position: absolute; right: 0; top: 50%; transform: translateY(-50%) rotate(0); transform-style: preserve-3d; animation: spin 0.5s infinite cubic-bezier(0.69, 0.31, 0.56, 0.83); } .loadingOverlay.ng-enter, .loadingOverlay.ng-leave.ng-leave-active { opacity: 0; } .loadingOverlay.ng-enter.ng-enter-active, .loadingOverlay.ng-leave { opacity: 1; } @keyframes spinner { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes spin { 0% { transform: translateY(-50%) rotate(0); } 100% { transform: translateY(-50%) rotate(360deg); } } .loadingNotification { left: 50%; position: fixed; text-align: center; top: 3rem; transform: translateX(-50%); transform-style: preserve-3d; transition: all 0.2s ease-out; z-index: 500; } .loadingNotification.ng-hide-add-active, .loadingNotification.ng-hide-remove { opacity: 0; top: 3.6rem; transform: scale(0.9) translateX(-50%); } .loadingNotification.ng-hide-remove-active { opacity: 1; top: 3rem; transform: scale(1) translateX(-50%); } .loadingNotification-label { background: #666; border-radius: 4px; color: #fff; display: inline-block; font-size: 15px; padding: 0.35714rem 0.78571rem; } /* -------------------------------------------------------------------------- *\ NAVS - BREADCRUMBS \* -------------------------------------------------------------------------- */ nav.breadcrumbs { font-size: 0.875rem; } nav.breadcrumbs ol li { display: none; } @media (min-width: 768px) { nav.breadcrumbs { display: block; } nav.breadcrumbs ol li { display: block; } } nav.breadcrumbs a { color: #001338; text-decoration: none; } nav.breadcrumbs a:hover, nav.breadcrumbs a:focus, nav.breadcrumbs a.hover { color: #70b3e3; } nav.breadcrumbs ol { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: flex-start; align-items: center; flex-flow: row wrap; } nav.breadcrumbs ol li + li ::before { content: "|"; padding-left: 0.5rem; padding-right: 0.5rem; color: initial; font-weight: initial; } nav.breadcrumbs ol li.is-active a { color: #00369d; } nav.breadcrumbs ol li.is-active a:hover, nav.breadcrumbs ol li.is-active a:focus, nav.breadcrumbs ol li.is-active a.hover { color: #70b3e3; } /* -------------------------------------------------------------------------- *\ NAVS - PAGINATION \* -------------------------------------------------------------------------- */ nav.pagination { background: #f5f7f9; border-radius: 0.5rem; padding: 0.625rem 1.5rem; margin: 3rem 0 !important; width: 100%; height: 3.5rem; } @media (min-width: 768px) { nav.pagination { margin: 2rem 0 !important; } } @media (min-width: 992px) { nav.pagination { margin: 3rem 0 !important; } } nav.pagination ul, nav.pagination ol { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: center; align-items: center; flex-flow: row nowrap; margin: 0; padding: 0; } nav.pagination a { display: block; padding: 0.25rem; color: #001338; } nav.pagination > ul { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; } @media (min-width: 768px) { nav.pagination > ul { justify-content: flex-end; } } nav.pagination > ul li.prev a, nav.pagination > ul li.prev span, nav.pagination > ul li.next a, nav.pagination > ul li.next span { font-weight: 500; font-size: 1rem; line-height: 1.5rem; padding: 0.25rem; } nav.pagination > ul li.prev a, nav.pagination > ul li.next a { color: #001338; } nav.pagination > ul li.prev span, nav.pagination > ul li.next span { color: #6A7280; } @media (min-width: 768px) { nav.pagination > ul li.prev, nav.pagination > ul li.next { display: block; } } nav.pagination > ul li.prev { margin: 0 1rem 0 0; } nav.pagination > ul li.next { margin: 0 0 0 1rem; } nav.pagination > ul li ol li { margin: 0 0.0625rem; } nav.pagination > ul li ol li.pagination-item--current a { color: #00369d; } nav.pagination > ul li ol li a { font-weight: 500; font-size: 1rem; line-height: 2.25rem; height: 2.25rem; color: #56637b; text-align: center; border-radius: 1.125rem; background: transparent; padding: 0 0.75rem; min-width: 2.25rem; } nav.pagination > ul li ol li a:hover, nav.pagination > ul li ol li a:focus, nav.pagination > ul li ol li a.hover { background: #DCE0E6; text-decoration: none; } .pagination-list { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: center; align-items: center; flex-flow: row nowrap; margin: 0; padding: 0; } .pagination-list li { margin: 0 0.5rem; } .pagination-list a { display: block; padding: 0.25rem; color: #001338; } main { overflow-x: hidden; } main.nutrition-page { overflow-x: visible; } section { margin: 3rem 0; } @media (min-width: 768px) { section { margin: 3.5rem 0; } } section.first-element { margin-top: 0; } section.bg-color { background-color: #f5f7f9; padding: 0 0 3rem 0; } @media (min-width: 768px) { section.bg-color { padding: 0 0 3.5rem 0; } } @media (min-width: 992px) { section.bg-color { padding: 0 0 5rem 0; } } section .bg-wave { background-color: #fff; height: 1.375rem; margin-bottom: 3rem; } @media (min-width: 768px) { section .bg-wave { height: 3.375rem; margin-bottom: 2.5rem; } } @media (min-width: 992px) { section .bg-wave { height: 5.25rem; margin-bottom: 3.5rem; } } section .bg-wave img { display: block; width: 100%; height: 100%; } @media print { header, footer, .promo-bar { display: none; } .page-type-product section { display: none; } .page-type-product .nutrition-widget { display: block; } .page-type-product .nutrition-widget > a { display: none; } } /* -------------------------------------------------------------------------- *\ OPTIONAL INCLUDES These are global elements that if enabled in the back end system should be included in your file. If they are not enabled, please remove them to cut unused styles. // This file only needs to be included when the Cookie Consent is turned on under Store Setup > Store Settings > Security & Privacy @import 'global-elements/consent-manager'; \* -------------------------------------------------------------------------- */ /* line 4, cookie-consent.scss */ .cookie-consent-modal { padding-top: 0; position: relative; width: auto; height: auto; z-index: 1000; font-family: sans-serif; } /* line 11, cookie-consent.scss */ .cookie-consent-modal .modal-content-wrap { position: fixed; bottom: 0; margin: 1rem; } /* line 15, cookie-consent.scss */ .cookie-consent-modal .modal-content-wrap.right { right: 0; } /* line 18, cookie-consent.scss */ .cookie-consent-modal .modal-content-wrap.left { left: 0; } /* line 21, cookie-consent.scss */ .cookie-consent-modal .modal-content-wrap .modal-content { border: 1px solid rgba(0, 0, 0, 0.2); background-color: #fefefe; color: #123; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); padding: 0; max-width: 500px; border-radius: 8px; } /* line 31, cookie-consent.scss */ .cookie-consent-modal .modal-content-wrap .modal-content .modal-header { padding: 1rem; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } /* line 35, cookie-consent.scss */ .cookie-consent-modal .modal-content-wrap .modal-content .modal-header h3 { margin: 0; font-weight: 500; position: relative; top: 0.2rem; } /* line 44, cookie-consent.scss */ .cookie-consent-modal .modal-content-wrap .modal-content .modal-body { padding: 1rem 1rem; font-family: "Futura-PT", Helvetica, Arial, sans-serif; color: #001338; font-size: 1rem; line-height: 1.3; } /* line 48, cookie-consent.scss */ .cookie-consent-modal .modal-content-wrap .modal-content .modal-body a { color: #00369d; } /* line 51, cookie-consent.scss */ .cookie-consent-modal .modal-content-wrap .modal-content .modal-body a:hover { color: #0b5bed; } /* line 57, cookie-consent.scss */ .cookie-consent-modal .modal-content-wrap .modal-content .modal-footer { padding: 1rem 0.5rem 0.5rem 0.5rem; } /* line 61, cookie-consent.scss */ .cookie-consent-modal .modal-content-wrap .modal-content .modal-footer .buttons { display: flex; justify-content: flex-end; flex-wrap: wrap; } /* line 66, cookie-consent.scss */ .cookie-consent-modal .modal-content-wrap .modal-content .modal-footer .buttons .btn { padding: 0.7rem 1.1rem; font-size: 100%; cursor: pointer; border: none; border-radius: 0.2rem; margin-left: 0.5rem; margin-right: 0.5rem; margin-bottom: 0.5rem; } /* line 77, cookie-consent.scss */ .cookie-consent-modal .modal-content-wrap .modal-content .modal-footer .buttons .btn.btn-primary { background-color: #3579F6; color: white; } /* line 81, cookie-consent.scss */ .cookie-consent-modal .modal-content-wrap .modal-content .modal-footer .buttons .btn.btn-primary:hover { background-color: #0b5bed; } /* line 87, cookie-consent.scss */ .cookie-consent-modal .modal-content-wrap .modal-content .modal-footer .buttons .btn.btn-secondary { background-color: #fff; font-size: .8em; color: #000; } /* line 91, cookie-consent.scss */ .cookie-consent-modal .modal-content-wrap .modal-content .modal-footer .buttons .btn.btn-secondary:hover { background-color: #ececec; } @media screen and (max-width: 620px) { /* line 102, cookie-consent.scss */ .cookie-consent-modal .btn { width: 100%; } } /* line 107, cookie-consent.scss */ .cookie-consent-modal.block-access { position: fixed; background-color: rgba(0, 0, 0, 0.5); padding-top: 20vh; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; } @media screen and (max-width: 620px) { /* line 107, cookie-consent.scss */ .cookie-consent-modal.block-access { padding-top: 0; } } /* line 119, cookie-consent.scss */ .cookie-consent-modal.block-access .modal-content-wrap { position: relative; margin: 2.5% auto; bottom: auto; width: 95%; } /* line 122, cookie-consent.scss */ .cookie-consent-modal.block-access .modal-content-wrap .modal-content { border: none; margin: 0 auto; } /*# sourceMappingURL=cookie-consent.css.map */ .cky-consent-container .cky-notice-btn-wrapper { border: none !important; height: auto !important; } .cky-prefrence-btn-wrapper { border: none !important; height: auto !important; } .cky-prefrence-btn-wrapper button { height: auto !important; } .cky-modal li::before { display: none; } /* -------------------------------------------------------------------------- *\ COMPONENTS This loads all the components into the website Comment out any components that are not in use one the website \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ AUTH COMPONENTS \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ AUTH - CREATE \* -------------------------------------------------------------------------- */ @media (min-width: 768px) { .auth-create .container { max-width: 1166.66667px; } } @media (min-width: 992px) { .auth-create .container { max-width: 933.33333px; } } .auth-create .form-el[data-type*="Address"] { width: 100%; } .auth-create h2 { width: 100%; } .auth-create h2 ~ h2 { margin-top: 1.5rem; border-top: 0.0625rem solid #b4bcca; padding-top: 1.5rem; } .auth-create .form-actions { justify-content: center; } /* -------------------------------------------------------------------------- *\ AUTH - LOGIN \* -------------------------------------------------------------------------- */ .auth-login .container { display: grid; grid-template-columns: 1fr; grid-template-areas: "form" "aside"; gap: 2rem; } .auth-login .container aside { grid-area: aside; background: #eff1f5; padding: 1.5rem; border-radius: 0.625rem; } .auth-login .container > div { grid-area: form; } .auth-login .container .btn-text { margin-left: 1.25rem; } @media (min-width: 768px) { .auth-login .container { grid-template-columns: 1fr 1fr; grid-template-areas: "form aside"; column-gap: 2rem; } } @media (min-width: 992px) { .auth-login .container { grid-template-columns: 1fr 5fr 5fr 1fr; grid-template-areas: ". form aside ."; } } /* -------------------------------------------------------------------------- *\ AUTH - RESET \* -------------------------------------------------------------------------- */ @media (min-width: 768px) { .auth-reset .container { max-width: 1166.66667px; } } @media (min-width: 992px) { .auth-reset .container { max-width: 933.33333px; } } .auth-reset .form-actions { width: 100%; justify-content: center; } /* -------------------------------------------------------------------------- *\ AUTH - RESET \* -------------------------------------------------------------------------- */ @media (min-width: 768px) { .auth-new .container { max-width: 1166.66667px; } } @media (min-width: 992px) { .auth-new .container { max-width: 933.33333px; } } .auth-new .form-actions { width: 100%; justify-content: center; } /* -------------------------------------------------------------------------- *\ BLOG COMPONENTS \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ BLOG - FEED \* -------------------------------------------------------------------------- */ @media (max-width: 767.9px) { .blog-feed section:nth-child(2) { margin-top: 1.5rem; } } @media (max-width: 767.9px) { .blog-feed .tilted-cards-multiple { margin-bottom: 0; } } .blog-feed .tilted-cards-multiple .container { padding-bottom: 5rem; position: relative; } @media (max-width: 767.9px) { .blog-feed .tilted-cards-multiple .container { padding-bottom: 0; row-gap: 1.5rem; } } .blog-feed .tilted-cards-multiple .container:after { content: ""; display: block; position: absolute; width: calc(100% - 6rem); height: 1px; left: 50%; top: 100%; transform: translate(-50%, 0); max-width: 1400px; background: repeating-linear-gradient(90deg, #00369d, #00369d 6px, transparent 6px, transparent 12px); border: none; } @media (max-width: 767.9px) { .blog-feed .tilted-cards-multiple .container:after { display: none; } } @media (max-width: 767.9px) { .blog-feed .tilted-cards-multiple .container article { padding: 0; } .blog-feed .tilted-cards-multiple .container article .img-tilt { display: block; aspect-ratio: 1.29 / 1; margin: 0 0 1.5rem; transform: none; border-radius: 0; } .blog-feed .tilted-cards-multiple .container article .img-tilt:before { display: none; } .blog-feed .tilted-cards-multiple .container article .img-tilt img, .blog-feed .tilted-cards-multiple .container article .img-tilt picture { border-radius: 0.5rem; display: block; position: relative; width: 100%; height: 100%; z-index: 1; object-fit: cover; } .blog-feed .tilted-cards-multiple .container article h3 { margin: 0 0 1rem; font-weight: 400; font-size: 1.75rem; line-height: 1.875rem; } .blog-feed .tilted-cards-multiple .container article p { display: none; } .blog-feed .tilted-cards-multiple .container article .btn-primary { background: #fff; color: #00369d; border: 1px dashed #00369d; transition: all .2s ease; font-size: 1rem; height: 2.25rem; padding: 0 1.5rem; } .blog-feed .tilted-cards-multiple .container article .btn-primary:after { display: none; } .blog-feed .tilted-cards-multiple .container article .btn-primary:hover, .blog-feed .tilted-cards-multiple .container article .btn-primary:focus, .blog-feed .tilted-cards-multiple .container article .btn-primary.hover { background: #00369d; color: #fff; transform: none; } .blog-feed .tilted-cards-multiple .container article .btn-primary:active, .blog-feed .tilted-cards-multiple .container article .btn-primary.active { background: #001338; color: #fff; box-shadow: inset 0px 0px 0px 1px #70b3e3; border: 1px solid #70b3e3; } } .blog-feed .feed-blog { display: grid; grid-template-columns: 1fr; column-gap: 1rem; row-gap: 1.5rem; justify-content: center; flex: 0 0 100%; position: relative; } @media (min-width: 768px) { .blog-feed .feed-blog { grid-template-columns: 1fr 1fr 1fr; } } @media (min-width: 992px) { .blog-feed .feed-blog { column-gap: 1.5rem; row-gap: 2.5rem; } } .blog-feed .feed-blog article { width: 100%; } .blog-feed .feed-blog article > a { width: 100%; display: block; aspect-ratio: 1.29 / 1; margin: 0 0 1.5rem; } .blog-feed .feed-blog article > a img, .blog-feed .feed-blog article > a picture { border-radius: 0.5rem; display: block; position: relative; width: 100%; height: 100%; z-index: 1; object-fit: cover; } .blog-feed .feed-blog article .cnt { text-align: center; } .blog-feed .feed-blog article .cnt h2 { margin: 0 0 1rem; font-weight: 400; font-size: 1.75rem; line-height: 1.875rem; } @media (min-width: 768px) { .blog-feed .feed-blog article .cnt h2 { font-size: 1.5rem; } } @media (min-width: 992px) { .blog-feed .feed-blog article .cnt h2 { font-size: 1.75rem; } } .blog-feed .feed-blog article .cnt p { display: none; font-weight: 400; font-size: 1rem; line-height: 1.5rem; margin: 0 0 1.5rem; } @media (min-width: 992px) { .blog-feed .feed-blog article .cnt p { display: block; } } /* -------------------------------------------------------------------------- *\ BLOG - LAYOUT \* -------------------------------------------------------------------------- */ .blog-header { display: flex; flex-direction: column; flex-wrap: nowrap; padding: 0; } @media (min-width: 768px) { .blog-header { flex-direction: row; align-items: stretch; } } .blog-header .img-wrap { width: 100%; height: 12.5rem; display: block; margin: 0; position: relative; } @media (min-width: 768px) { .blog-header .img-wrap { width: 44%; height: auto; order: 2; } } @media (min-width: 992px) { .blog-header .img-wrap { width: 50%; } } .blog-header .img-wrap img, .blog-header .img-wrap picture { display: block; position: relative; width: 100%; height: 100%; z-index: 1; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .blog-header .cnt { width: 100%; background: #f5f7f9; } @media (min-width: 768px) { .blog-header .cnt { width: 56%; } } @media (min-width: 992px) { .blog-header .cnt { width: 50%; } } .blog-header .cnt .left-container { padding: 2rem 1rem; text-align: left; } @media (min-width: 768px) { .blog-header .cnt .left-container { padding: 4rem 3.5rem 3.5rem 2rem; } } @media (min-width: 992px) { .blog-header .cnt .left-container { padding: 3.625rem 5.75rem 5rem 3rem; } } @media (min-width: 1400px) { .blog-header .cnt .left-container { margin-left: calc((100vw - 1400px)/2); } } .blog-header .cnt .left-container .breadcrumbs { display: none; margin: 0 0 3.5rem !important; } @media (min-width: 768px) { .blog-header .cnt .left-container .breadcrumbs { display: none; } } @media (min-width: 992px) { .blog-header .cnt .left-container .breadcrumbs { display: block; } .blog-header .cnt .left-container .breadcrumbs .container { padding: 0; } } .blog-header .cnt .left-container .breadcrumbs ol { top: 0; } .blog-header .cnt .left-container h1 { font-weight: 400; font-size: 2.5rem; line-height: 3rem; margin: 0 0 0.5rem; } @media (min-width: 992px) { .blog-header .cnt .left-container h1 { font-size: 3.5rem; line-height: 3.75rem; margin: 0 0 1rem; } } .blog-header .cnt .left-container p { font-weight: 400; font-size: 1.125rem; line-height: 1.6875rem; margin: 0 0 1.5rem; } @media (min-width: 992px) { .blog-header .cnt .left-container p { margin: 0 0 3rem; } } .copy-block-ingredients .contents-wrap { position: relative; font-size: 1rem; line-height: 1.5rem; color: #001338; display: grid; grid-template-columns: 1fr; grid-template-rows: auto; column-gap: 1rem; row-gap: 1.5rem; grid-template-areas: "ingredients-directions" "flavors"; } @media (min-width: 768px) { .copy-block-ingredients .contents-wrap { grid-template-columns: 1fr 1fr; column-gap: 7.5rem; grid-template-areas: "ingredients-directions flavors"; } } @media (min-width: 992px) { .copy-block-ingredients .contents-wrap { grid-template-columns: 0.56fr 0.44fr; } } .copy-block-ingredients .contents-wrap h2 { font-size: 1.5rem; line-height: 1.875rem; margin: 0 0 0.5rem; } @media (min-width: 992px) { .copy-block-ingredients .contents-wrap h2 { font-size: 1.75rem; margin: 0 0 1.5rem; } } .copy-block-ingredients .contents-wrap .ingredients-directions { grid-area: ingredients-directions; } .copy-block-ingredients .contents-wrap .ingredients-directions .contents-ingredients table { border-bottom: 1.5rem solid transparent; display: block; border-collapse: collapse; border-spacing: 0; } @media (min-width: 992px) { .copy-block-ingredients .contents-wrap .ingredients-directions .contents-ingredients table { border-bottom: 2.5rem solid transparent; } } .copy-block-ingredients .contents-wrap .ingredients-directions .contents-ingredients table tbody tr td { vertical-align: top; padding-bottom: 0.5rem; } .copy-block-ingredients .contents-wrap .ingredients-directions .contents-ingredients table tbody tr td:first-child { font-weight: 600; padding: 0 2.375rem 0 0; } .copy-block-ingredients .contents-wrap .ingredients-directions .contents-directions ol li { position: relative; } .copy-block-ingredients .contents-wrap .ingredients-directions .contents-directions ol li:before { font-size: 1rem; line-height: 1.5rem; font-weight: 400; top: 0.75rem; transform: translate(0, -50%); } .copy-block-ingredients .contents-wrap .contents-flavors { grid-area: flavors; border-top: 1px solid #b4bcca; padding: 3rem 0 0; margin-top: 1.5rem; } @media (min-width: 768px) { .copy-block-ingredients .contents-wrap .contents-flavors { padding: 0; border-top: none; margin-top: 0; border-left: 1px solid #b4bcca; } } .copy-block-ingredients .contents-wrap .contents-flavors h2 { margin: 0 0 1.3125rem; text-align: center; } .copy-block-ingredients .contents-wrap .contents-flavors .flavors-list { display: flex; flex-direction: column; align-items: center; justify-content: center; } @media (min-width: 992px) { .copy-block-ingredients .contents-wrap .contents-flavors .flavors-list { flex-direction: row; flex-wrap: wrap; } } .copy-block-ingredients .contents-wrap .contents-flavors .flavors-list div { text-align: center; } .copy-block-ingredients .contents-wrap .contents-flavors .flavors-list div + div { margin: 0 0 0 1.5rem; } .copy-block-ingredients .contents-wrap .contents-flavors .flavors-list div img { width: 100%; max-width: 10.375rem; margin: 0 0 1rem; display: block; } .copy-block-ingredients .contents-wrap .contents-flavors .flavors-list div h3 { margin: 0 0 1rem; font-size: 1.25rem; line-height: 1.6875rem; text-align: center; text-transform: uppercase; color: #001338; } /* -------------------------------------------------------------------------- *\ DETAIL - SHARE \* -------------------------------------------------------------------------- */ nav.share { margin: 0; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; } nav.share > span { font-weight: 500; font-size: 1rem; line-height: 1.5rem; color: #001338; display: block; margin: 0 0.75rem 0 0; } nav.share ul { padding: 0; margin: 0; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; } nav.share ul li { padding: 0; margin: 0 0.375rem 0 0; } nav.share ul li:last-child { margin: 0; } nav.share ul li a { color: #00369d; display: block; height: 1.75rem; line-height: 1.75rem; width: 2rem; text-align: center; } nav.share ul li a:hover, nav.share ul li a:focus, nav.share ul li a.hover { color: #70b3e3; } /* -------------------------------------------------------------------------- *\ CART COMPONENTS \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ CART - ACTIONS \* -------------------------------------------------------------------------- */ .cart-actions a, .cart-actions button { width: 100%; } /* -------------------------------------------------------------------------- *\ CART - LAYOUT \* -------------------------------------------------------------------------- */ .cart { margin-top: 0.5rem; } @media (min-width: 768px) { .cart { margin-top: 2rem; } } @media (min-width: 992px) { .cart { margin-top: 3rem; } } .cart .container { display: grid; grid-template-columns: 1fr; grid-template-areas: 'title' 'aside' 'cnt'; } @media (min-width: 576px) { .cart .container { grid-template-columns: 6fr 1fr 5fr; grid-template-areas: 'title title title' 'cnt . aside'; } } @media (min-width: 992px) { .cart .container { grid-template-columns: 7fr 1fr 4fr; grid-template-areas: 'title . aside' 'cnt . aside'; grid-template-rows: 6.25rem; } } .cart h1 { grid-area: title; color: #001338; margin-bottom: 1rem; } @media (min-width: 992px) { .cart h1 { margin-top: 2rem; margin-bottom: 3rem; } } .cart .cnt { grid-area: cnt; } .cart aside { grid-area: aside; text-align: center; } .cart .cart-guarantee { color: #56637b; margin-bottom: 3rem; background-color: #f5f7f9; border-radius: 0.5rem; margin-top: 1rem; } @media (min-width: 768px) { .cart .cart-guarantee { margin-bottom: 0; } } @media (min-width: 1200px) { .cart .cart-guarantee { font-size: 1rem; } } .cart .cart-guarantee img { width: 1.5rem; height: 1.5rem; margin-right: 0.75rem; } .cart .cart-guarantee ul { padding: 1rem; } .cart .cart-guarantee li { padding: 0; display: flex; align-items: center; font-weight: bold; } .cart .cart-guarantee li::before { display: none; } /* -------------------------------------------------------------------------- *\ CART - LINE ITEMS \* -------------------------------------------------------------------------- */ .line-items .cart-item-image { width: 100%; } .line-items table { width: 100%; font-size: 1rem; } .line-items h2 { text-align: left; font-size: 1rem; margin: 0; } .line-items h2 small { font-size: .75em; font-weight: 300; margin: 0 0 0.25rem; } .line-items h3 { margin: 0 0.5rem 0 0; font-size: 1em; } .line-items dl { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto; column-gap: 0.625rem; row-gap: 0.25rem; padding: 0; margin: 0; } .line-items dd, .line-items dt { margin: 0; padding: 0; font-weight: normal; } .line-items table, .line-items tbody { display: block; } .line-items thead { display: none; } .line-items thead tr { padding: 0; } .line-items tr { border-bottom: 1px solid #b4bcca; display: grid; grid-template-rows: auto; grid-template-columns: 6.25rem auto; grid-template-areas: 'image name' 'image details' 'image price' 'image quantity' 'image total' 'image remove'; column-gap: 0.75rem; row-gap: 1rem; padding: 1.5rem 0; } .line-items tr:nth-child(1) { border-top: 1px solid #b4bcca; } @media (min-width: 992px) { .line-items tr:nth-child(1) { border-top: 0; } } .line-items .form-increment { margin: 0; } .line-items .form-increment.quantity-control input { pointer-events: none; } .line-items [class*="btn-"] { width: auto; } .line-items td { text-align: left; } .line-items td:nth-child(1) { grid-area: image; } .line-items td:nth-child(2) { grid-area: name; } .line-items td:nth-child(2) a { color: #001338; } .line-items td:nth-child(3) { grid-area: price; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: flex-start; align-items: center; flex-flow: row nowrap; } .line-items td:nth-child(3) :nth-child(2) { color: #56637b; } .line-items td:nth-child(4) { grid-area: quantity; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: flex-start; align-items: center; flex-flow: row nowrap; } .line-items td:nth-child(5) { grid-area: total; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: space-between; align-items: center; flex-flow: row nowrap; } .line-items td:nth-child(6) { grid-area: remove; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: flex-end; align-items: center; flex-flow: row nowrap; text-decoration: underline; cursor: pointer; } .line-items td:nth-child(6) a { color: #56637b; } .line-items td:nth-child(6) a:hover, .line-items td:nth-child(6) a:focus, .line-items td:nth-child(6) a.hover { color: #70b3e3; } .line-items td:nth-child(6):empty { display: none; } .line-items td:nth-child(6) button { background: #b4bcca; color: #fff; border-radius: 100%; width: 1.5rem; height: 1.5rem; } .line-items td:nth-child(6) button:hover, .line-items td:nth-child(6) button:focus, .line-items td:nth-child(6) button.hover { background-color: #b40000; } .line-items td:nth-child(6) button span { position: relative; right: -5px; top: 3px; } .line-items td:nth-child(7) { grid-area: details; } @media (min-width: 992px) { .line-items table, .line-items tbody { display: block; } .line-items thead { display: block; } .line-items th:nth-child(1) { text-align: left; } .line-items th:nth-child(5) { text-align: right; } .line-items tr { grid-template-columns: 6.25rem 9.375rem 1fr 1fr 1fr; grid-template-areas: 'image name price quantity total' 'image details details details remove'; column-gap: 0.75rem; row-gap: 1rem; align-items: center; } .line-items td:nth-child(3) { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: center; align-items: center; flex-flow: row nowrap; } .line-items td:nth-child(4) { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: center; align-items: center; flex-flow: row nowrap; } .line-items td:nth-child(5) { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: flex-end; align-items: center; flex-flow: row nowrap; } .line-items td:nth-child(5) :first-child { display: none; } .line-items [class*="btn-"] { width: auto; } } .keep-shopping { display: flex; align-items: center; padding: 0; margin-top: 1.5rem; font-family: "bellyswing", Helvetica, Arial, sans-serif; text-transform: uppercase; font-size: 1.25rem; } .keep-shopping span { display: inline-block; padding-right: 0.75rem; font-size: 0.875rem; color: #00369d; } #donation-container img { width: 100% !important; } #donation-container .product-view { display: block; } #donation-container .product-view .options { row-gap: 0.5rem; } #donation-container .product-view .form-el { margin-bottom: 1rem !important; } #donation-container .form-action { width: 12.5rem; } @media (max-width: 767.9px) { #donation-container .form-action { margin: 0 auto; } } /* -------------------------------------------------------------------------- *\ CART - MODAL - CHANGES \* -------------------------------------------------------------------------- */ #CartEditProductFieldsForm { max-width: 30rem; /* -------------------------------------------------------------------------- *\ CATALOG - DETAIL - HEADER - FORM ELEMENTS - FORM ELEMENTS \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ CATALOG - DETAIL - HEADER - FORM ELEMENTS - INPUTS \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ CATALOG - DETAIL - HEADER - FORM ELEMENTS - PRODUCT LIST \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ CATALOG - DETAIL - HEADER - FORM ELEMENTS - SET RADIO \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ CATALOG - DETAIL - HEADER - FORM ELEMENTS - RECTANGLE \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ CATALOG - DETAIL - HEADER - FORM ELEMENTS - SET SELECT \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ CATALOG - DETAIL - HEADER - FORM ELEMENTS - RECTANGLE \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ CATALOG - DETAIL - HEADER - FORM ELEMENTS - TEXTAREA \* -------------------------------------------------------------------------- */ } #CartEditProductFieldsForm .form-el, #CartEditProductFieldsForm .form-cr { margin: 0 0 0.75rem; } #CartEditProductFieldsForm .form-el p, #CartEditProductFieldsForm .form-el label, #CartEditProductFieldsForm .form-cr p, #CartEditProductFieldsForm .form-cr label { display: block; width: 100%; font-weight: bold; margin: 0 0 1rem; } #CartEditProductFieldsForm .form-el small, #CartEditProductFieldsForm .form-cr small { font-size: 1rem; font-weight: normal; color: #c22a22; } #CartEditProductFieldsForm [class*="set-"] label { font-weight: normal; } #CartEditProductFieldsForm [class*="set-"] .options { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: flex-start; align-items: stretch; flex-flow: row wrap; } #CartEditProductFieldsForm input:not([type="checkbox"]):not([type="radio"]) { padding: 0.5rem 0.75rem; width: 100%; max-width: 18.75rem; border: 0.125rem solid #b4bcca; } #CartEditProductFieldsForm input:not([type="checkbox"]):not([type="radio"]):disabled, #CartEditProductFieldsForm input:not([type="checkbox"]):not([type="radio"]).unavailable { opacity: 0.5; } #CartEditProductFieldsForm input:not([type="checkbox"]):not([type="radio"]):hover, #CartEditProductFieldsForm input:not([type="checkbox"]):not([type="radio"]):focus, #CartEditProductFieldsForm input:not([type="checkbox"]):not([type="radio"]).hover { border-color: #00369d; } #CartEditProductFieldsForm .productOptions-list { border: 1px solid #000; list-style: none; margin: 0; max-height: 400px; overflow-y: auto; } #CartEditProductFieldsForm .productOptions-list-item { padding: 10px; } #CartEditProductFieldsForm .productOptions-list-item + .productOptions-list-item { border-top: 1px solid #000; } #CartEditProductFieldsForm .productOptions-list-item .form-label { text-align: left; top: -2px; } #CartEditProductFieldsForm .productOptions-list-item-figure, #CartEditProductFieldsForm .productOptions-list-item-content { display: table-cell; vertical-align: middle; } #CartEditProductFieldsForm .productOptions-list-item-figure { width: auto; } #CartEditProductFieldsForm .productOptions-list-item-content { padding-left: 10px; } #CartEditProductFieldsForm .set-radio label { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: flex-start; align-items: center; flex-flow: row nowrap; margin: 0 0.5rem; width: auto; } #CartEditProductFieldsForm .set-radio label:before { content: ""; display: block; width: 0.75rem; height: 0.75rem; margin: 0 0.5rem 0 0; border-radius: 100%; border: 0.125rem solid #b4bcca; } #CartEditProductFieldsForm .set-radio label.unavailable { pointer-events: none; opacity: .5; } #CartEditProductFieldsForm .set-radio input { position: absolute; width: 1px !important; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip: rect(0, 0, 0, 0); } #CartEditProductFieldsForm .set-radio input:checked + label:before { background: #00369d; box-shadow: inset 0 0 0 0.1875rem #fff; } #CartEditProductFieldsForm .set-rectangle { margin-bottom: 1.5rem !important; } #CartEditProductFieldsForm .set-rectangle label { font-family: "bellyswing", Helvetica, Arial, sans-serif; text-transform: uppercase; font-size: 1rem; line-height: 1rem; color: #56637b; border: 0.0625rem solid #56637b; border-radius: 6.25rem; padding: 0.5rem 1rem; margin: 0 0.5rem 0 0; transition: all .25s linear; width: auto; } #CartEditProductFieldsForm .set-rectangle label.unavailable { pointer-events: none; background: #56637b; opacity: .5; } #CartEditProductFieldsForm .set-rectangle label:hover { cursor: pointer; background: #00369d; border-color: #00369d; color: #fff; } #CartEditProductFieldsForm .set-rectangle input { position: absolute; width: 1px !important; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip: rect(0, 0, 0, 0); } #CartEditProductFieldsForm .set-rectangle input:checked + label { background: #001338; border-color: #001338; color: #fff; } #CartEditProductFieldsForm select { max-width: 18.75rem; margin: 0.3125rem 0; } #CartEditProductFieldsForm select:disabled, #CartEditProductFieldsForm select.unavailable { background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"); opacity: 0.5; } #CartEditProductFieldsForm select:hover, #CartEditProductFieldsForm select:focus, #CartEditProductFieldsForm select.hover { border-color: #00369d; } #CartEditProductFieldsForm .set-swatch label { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: space-between; align-items: stretch; flex-flow: row nowrap; width: 2.5rem; height: 2.5rem; margin: 0 0.5rem 0.5rem 0; transition: all .25s linear; border-radius: 100%; overflow: hidden; border: 1px solid #eff1f5; box-shadow: inset 0 0 0 3px #fff; } #CartEditProductFieldsForm .set-swatch label.unavailable { pointer-events: none; opacity: .5; } #CartEditProductFieldsForm .set-swatch label.unavailable ::before { background-color: #000; content: ""; height: 2px; left: -5px; position: absolute; top: 11px; transform: rotate(-45deg); width: 141%; } #CartEditProductFieldsForm .set-swatch label span:not(.sr-only) { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: 0; align-items: 1; align-content: auto; flex-flow: row wrap; width: 100%; display: block; height: 2.5rem; position: relative; z-index: -1; } #CartEditProductFieldsForm .set-swatch input { position: absolute; width: 1px !important; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip: rect(0, 0, 0, 0); } #CartEditProductFieldsForm .set-swatch input:checked + label { border: 1px solid #000; box-shadow: inset 0 0 0 3px #fff; color: #fff; } /* -------------------------------------------------------------------------- *\ CART - TOTALS \* -------------------------------------------------------------------------- */ .totals { box-shadow: 0 0px 12px rgba(0, 0, 0, 0.08); border-radius: 0.75rem; padding: 1rem; } .totals dl { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: space-between; align-items: stretch; flex-flow: row wrap; row-gap: 0.5rem; } @media (min-width: 768px) { .totals { padding: 1.5rem; } } .totals .shipping-estimator { margin-top: 1.125rem; } .totals .coupon { color: #00369d; font-weight: bold; border-bottom: 0; } .totals .coupon-form, .totals .cart-gift-certificate-form { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: center; text-align: left; } .totals .coupon-form *, .totals .cart-gift-certificate-form * { margin: 0; } .totals .coupon-form em, .totals .cart-gift-certificate-form em { font-size: 0.75rem; } .totals dt, .totals dd { width: 50%; margin: 0; font-weight: normal; padding: 0; } .totals dt:last-of-type, .totals dd:last-of-type { font-weight: bold; font-size: 1.125rem; border-top: 0.0625rem solid #b4bcca; border-bottom: 0.0625rem solid #b4bcca; margin-top: 0.5rem; padding-top: 1rem; padding-bottom: 1rem; } @media (min-width: 768px) { .totals dt:last-of-type, .totals dd:last-of-type { margin-top: 1rem; padding-top: 1.5rem; padding-bottom: 1.5rem; } } .totals dt { text-align: left; } .totals dd { text-align: right; } .totals dd.full { width: 100%; text-align: left; } .policy { margin: 0.5rem 0; padding: 1rem 0 0.5rem 0; text-align: left; display: flex; } .policy input { position: absolute; width: 1px !important; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip: rect(0, 0, 0, 0); } .policy input:checked + label:before { border-color: #00369d; background: #00369d; content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik04Ljk0Njk4IDAuMDAwMTI1ODExQzguNjc3MDYgMC4wMDI4Nzg5NyA4LjQxNzcyIDAuMTI0MDE0IDguMjI1MDQgMC4zMzc4MzlMMy42NjU4MiA1LjI3ODY3TDEuNjc1NjEgMy41NDYwNkMxLjIyMTE1IDMuMTUxNDQgMC41NjkxMzEgMy4yNDU5OCAwLjIxNzkxOCAzLjc1NzEzQy0wLjEzMzI5NiA0LjI2OTIxIC0wLjA1MTE4OTggNS4wMDYxMiAwLjQwMDg0MiA1LjQwMzQ4TDMuMTA2NDggNy43NTI3OUMzLjUxNDYgOC4xMTA2OCA0LjA5MzQ2IDguMDc2NzMgNC40NjU4IDcuNjcyMDNMOS42Njg5NSAyLjAzMzY5QzkuOTgzNTggMS43MDMzMyAxMC4wODUyIDEuMTg4NDggOS45MjUwNiAwLjczNzkwMUM5Ljc2NTcxIDAuMjg4MjIgOS4zNzcxIC0wLjAwNTQ0NDM2IDguOTQ3MDMgNy42NTIwNmUtMDVMOC45NDY5OCAwLjAwMDEyNTgxMVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo="); } .policy label { position: relative; display: flex; flex-direction: row; justify-content: center; align-items: flex-start; } .policy label:hover:before, .policy label:focus:before, .policy label.hover:before { border-color: #00369d; } .policy label:before { content: ""; display: block; border: 1px solid #56637b; box-sizing: border-box; border-radius: 0.25rem; width: 1.25rem; height: 1rem; margin: 0.25rem 0.5rem 0 0; text-align: center; line-height: 0.8125rem; } .policy a { text-decoration: underline; font-weight: bold; } /* -------------------------------------------------------------------------- *\ CART - CALENDAR \* -------------------------------------------------------------------------- */ [data-shipping-calendar-header] { margin-bottom: 0.5rem; } .cart-form { margin-bottom: 1.5rem; } [data-shipping-calendar] [data-shipping-selector] { cursor: pointer; display: flex; } [data-shipping-calendar] [data-shipping-selector] div { border: 1px solid #b4bcca; border-right: none; font-size: 0.875rem; flex: 1 1 0px; height: 2.5rem; padding: 0.5rem; } [data-shipping-calendar] [data-shipping-selector] button { border: 1px solid #b4bcca; flex: 0 0 32px; position: relative; } [data-shipping-calendar] [data-shipping-selector] button svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } [data-shipping-calendar] table { margin-bottom: 2rem !important; width: 100%; } [data-shipping-calendar] td { padding: 0.625rem 0.3125rem; text-align: center; width: 14.222%; } [data-shipping-calendar] [data-calendar-header] { display: none; } [data-shipping-calendar] [data-calendar-header].is-active { display: table; } [data-shipping-calendar] [data-calendar-header]:first-child [data-month-prev], [data-shipping-calendar] [data-calendar-header]:last-child [data-month-next] { display: none; } [data-shipping-calendar] [data-month-header] > td { color: #00369d; background: #fff; font-family: "bellyswing", Helvetica, Arial, sans-serif; text-transform: uppercase; font-weight: 400; font-size: 1.25rem; } [data-shipping-calendar] [data-month-header] > td:first-child, [data-shipping-calendar] [data-month-header] > td:last-child { padding: 0; } [data-shipping-calendar] [data-month-header] > td button { font-weight: 400; font-family: "bellyswing", Helvetica, Arial, sans-serif; text-transform: uppercase; color: #00369d; border-radius: 6.25rem; transition: .25s all ease-in-out; } [data-shipping-calendar] [data-month-header] > td button:hover { background: #00369d; color: #fff; } [data-shipping-calendar] [data-days-header] > td { background: #001338; color: #f5f7f9; } [data-shipping-calendar] [data-month-prev], [data-shipping-calendar] [data-month-next] { min-height: 2rem; width: 60%; } [data-shipping-calendar] td[data-date] { cursor: pointer; } [data-shipping-calendar] td.available { background: #fff; } [data-shipping-calendar] td.unavailable { background: #f5f7f9; cursor: not-allowed; color: #b4bcca; } [data-shipping-calendar] td.today { background: #b4bcca; color: #f5f7f9; } [data-shipping-calendar] td.selected { background: #ed6c00; color: #f5f7f9; } .gift-message-wrapper { text-align: center; } .gift-message-wrapper textarea { margin: 5px 0 15px; width: 100%; padding: 1rem; height: 100px; font-size: 0.875rem; border: 1px solid #D8DBDD; border-radius: 0.3125rem; } .gift-message-wrapper textarea:focus { border-color: #00369d; } /* -------------------------------------------------------------------------- *\ CATALOG COMPONENTS \* -------------------------------------------------------------------------- */ .layout-brands { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 0.5rem; row-gap: 1rem; } @media (min-width: 768px) { .layout-brands { grid-template-columns: repeat(3, 1fr); column-gap: 1rem; row-gap: 1.5rem; } } @media (min-width: 992px) { .layout-brands { grid-template-columns: repeat(4, 1fr); column-gap: 2rem; row-gap: 2rem; } } /* -------------------------------------------------------------------------- *\ PRODUCT CARD COMPONENT \* -------------------------------------------------------------------------- */ .card { /* @include borderTest(); @include borderTest(".img-container"); @include borderTest(".img"); @include borderTest(".cnt"); @include borderTest(".cta"); //*/ position: relative; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: space-between; align-items: space-between; flex-flow: column nowrap; cursor: pointer; background: transparent; padding: 0; /* -------------------------------------------------------------------------- *\ PRODUCT CARD > IMAGE \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ PRODUCT CARD > TITLE \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ PRODUCT CARD > RATING \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ PRODUCT CARD > PRICE \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ PRODUCT CARD > ACTIONS \* -------------------------------------------------------------------------- */ } .card .cnt { flex-grow: 1; } .card .cta { text-align: center; } .card .cnt, .card .cta, .card .img-container { padding: 0 0.25rem; } @media (min-width: 768px) { .card .cnt, .card .cta, .card .img-container { padding: 0 0.5rem; } } @media (min-width: 992px) { .card .cnt, .card .cta, .card .img-container { padding: 0 1rem; } } .card .compare-button-wrapper input { position: absolute; width: 1px !important; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip: rect(0, 0, 0, 0); } .card .compare-button-wrapper input:checked + .compare-btn:before { border-color: #00369d; background: #00369d; content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik04Ljk0Njk4IDAuMDAwMTI1ODExQzguNjc3MDYgMC4wMDI4Nzg5NyA4LjQxNzcyIDAuMTI0MDE0IDguMjI1MDQgMC4zMzc4MzlMMy42NjU4MiA1LjI3ODY3TDEuNjc1NjEgMy41NDYwNkMxLjIyMTE1IDMuMTUxNDQgMC41NjkxMzEgMy4yNDU5OCAwLjIxNzkxOCAzLjc1NzEzQy0wLjEzMzI5NiA0LjI2OTIxIC0wLjA1MTE4OTggNS4wMDYxMiAwLjQwMDg0MiA1LjQwMzQ4TDMuMTA2NDggNy43NTI3OUMzLjUxNDYgOC4xMTA2OCA0LjA5MzQ2IDguMDc2NzMgNC40NjU4IDcuNjcyMDNMOS42Njg5NSAyLjAzMzY5QzkuOTgzNTggMS43MDMzMyAxMC4wODUyIDEuMTg4NDggOS45MjUwNiAwLjczNzkwMUM5Ljc2NTcxIDAuMjg4MjIgOS4zNzcxIC0wLjAwNTQ0NDM2IDguOTQ3MDMgNy42NTIwNmUtMDVMOC45NDY5OCAwLjAwMDEyNTgxMVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo="); } .card .compare-button-wrapper .compare-btn { font-weight: 400; font-size: 1rem; line-height: 100%; font-family: "bellyswing", Helvetica, Arial, sans-serif; text-transform: uppercase; letter-spacing: 0.02em; color: #001338; position: relative; display: flex; flex-direction: row; justify-content: center; align-items: center; } .card .compare-button-wrapper .compare-btn:hover, .card .compare-button-wrapper .compare-btn:focus, .card .compare-button-wrapper .compare-btn.hover { cursor: pointer; } .card .compare-button-wrapper .compare-btn:hover:before, .card .compare-button-wrapper .compare-btn:focus:before, .card .compare-button-wrapper .compare-btn.hover:before { border-color: #00369d; } .card .compare-button-wrapper .compare-btn:before { content: ""; display: block; border: 1px solid #56637b; box-sizing: border-box; border-radius: 0.25rem; width: 1rem; height: 1rem; margin: -3px 8px 0 0; text-align: center; line-height: 0.8125rem; } .card h3 { transition: all 0s cubic-bezier(0.25, 0.8, 0.25, 1); } .card .img-container { padding-bottom: 0; transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); } .card .img-container .badge { position: absolute; transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); background-image: url(../img/badge-available-online-small.svg); background-repeat: no-repeat; background-size: contain; background-position: top left; height: 90px; top: 5%; left: 5%; z-index: 1000; } @media (min-width: 576px) { .card .img-container .badge { height: 40%; } } @media (min-width: 992px) { .card .img-container .badge { top: 4%; left: 7%; height: 70px; transform: rotate(4deg); } } @media (min-width: 1200px) { .card .img-container .badge { top: 4%; height: 100px; } } .carousel-centered .card .img-container .badge { background-image: url(../img/badge-available-online-small.svg); } .card .img, .card .badge { position: relative; aspect-ratio: 1; } .card .img img, .card .badge img { display: block; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .card h3 { font-size: 1.25rem; text-align: center; margin: 1rem 0 0 0; line-height: 1.5rem; } @media (min-width: 992px) { .card h3 { font-size: 1.375rem; } } .card h3 a { color: #56637b; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; /* autoprefixer: off */ overflow: hidden; min-height: 4.0625rem; } .card .rating { font-size: 0.875rem; margin: 0 0 0.5rem; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: flex-start; align-items: center; flex-flow: row nowrap; } .card .rating span + span { margin: 0 0 0 0.25rem; } .card .price-wrapper { margin-bottom: 0.875rem; } .card .price { font-size: 0.875rem; font-weight: bold; } .card .price--non-sale { position: relative; font-weight: normal; margin: 0 0.5rem 0 0; } .card .price--non-sale:before { content: ""; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%) rotate(2.5deg); -ms-transform: translate(-50%, -50%) rotate(2.5deg); transform: translate(-50%, -50%) rotate(2.5deg); height: 0.125rem; width: 110%; background: currentColor; } .card .actions-quickadd { position: absolute; z-index: 100; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); visibility: hidden; opacity: 0; transition: opacity .25s .25s linear; } .card .img:hover .actions-quickadd { visibility: visible; opacity: 1; } .card:hover h3 { animation: title-shake .6s; font-size: 1.5rem; } .card:hover h3 a { color: #00369d; } .card:hover h3 a:hover { text-decoration: none; } .card:hover .img-container { z-index: 1000; transform-origin: bottom center; transform: scale(1.1); } .card:hover .img-container .img { animation: float 2s ease-in-out infinite; z-index: 2; } .card:hover .img-container .badge { animation: orbit 2s ease-in-out infinite; animation-delay: 1s; top: 10% !important; transform: rotate(-16deg); left: -2%; z-index: 0; } @media (min-width: 992px) { .card:hover .img-container .badge { top: 12% !important; } } @media (min-width: 1200px) { .card:hover .img-container .badge { left: 2%; } } @media (min-width: 768px) { .card:hover .img-container { transform: scale(1.2); } } @keyframes orbit { 0% { transform: rotate(-16deg); } 50% { transform: rotate(-14deg); } 100% { transform: rotate(-16deg); } } @keyframes float { 0% { transform: translatey(0); } 50% { transform: translatey(-6px); } 100% { transform: translatey(0); } } @keyframes title-shake { 0% { transform-origin: center bottom; transform: rotate(4deg); } 50% { transform-origin: center bottom; transform: rotate(-4deg); } 100% { transform-origin: center bottom; transform: rotate(0deg); } } /* -------------------------------------------------------------------------- *\ CATEGORY - LAYOUT \* -------------------------------------------------------------------------- */ .layout-category aside nav { position: relative; position: -webkit-sticky; position: sticky; } @supports (position: -webkit-sticky) { .layout-category aside nav { top: 5rem; } } @supports (position: sticky) { .layout-category aside nav { top: 5rem; } } @media (min-width: 992px) { .layout-category aside nav { position: relative; position: -webkit-sticky; position: sticky; } @supports (position: -webkit-sticky) { .layout-category aside nav { top: 9.375rem; } } @supports (position: sticky) { .layout-category aside nav { top: 9.375rem; } } } @media (min-width: 768px) { .layout-category { display: grid; grid-template-columns: 1fr; grid-template-rows: auto; column-gap: 2rem; row-gap: 2rem; } } .layout-category.category-nutrition .nav-nutrition { display: none; flex-direction: column; justify-content: space-between; align-items: center; } @media (min-width: 768px) { .layout-category.category-nutrition .nav-nutrition { display: flex; flex-direction: row; padding: 0 4rem; } } .layout-category.category-nutrition .nav-nutrition a { font-weight: 500; font-size: 1.125rem; line-height: 1.6875rem; color: #001338; text-align: center; text-transform: uppercase; } .layout-category.category-nutrition .nav-nutrition a:hover, .layout-category.category-nutrition .nav-nutrition a:focus, .layout-category.category-nutrition .nav-nutrition a.hover { color: #00369d; } .layout-category.category-nutrition h2 { text-align: center; width: 100%; padding: 3rem 0 0; margin: 0 0 3rem; position: relative; } @media (min-width: 768px) { .layout-category.category-nutrition h2 { padding: 5rem 0 0; } } .layout-category.category-nutrition h2:before { content: ""; display: block; position: absolute; width: 100%; height: 1px; left: 50%; top: 0; transform: translate(-50%, -50%); max-width: 1400px; background: repeating-linear-gradient(90deg, #00369d, #00369d 6px, transparent 6px, transparent 12px); border: none; } .layout-category.category-nutrition h2:first-of-type { padding: 0; } @media (min-width: 768px) { .layout-category.category-nutrition h2:first-of-type { padding: 5rem 0 0; } } .layout-category.category-nutrition h2:first-of-type:before { display: none; } /* -------------------------------------------------------------------------- *\ CATEGORY Only files that are used by the Product Search Components should be loaded. \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ CATEGORY - LANDING \* -------------------------------------------------------------------------- */ nav.landing ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; row-gap: 1.75rem; } @media (min-width: 768px) { nav.landing ul { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.25rem; row-gap: 2.375rem; } } @media (min-width: 992px) { nav.landing ul { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 2rem; row-gap: 3rem; } } nav.landing li { border: 1px solid #b4bcca; } nav.landing h2 { text-align: center; margin: 0.5rem 0; } nav.landing .img { position: relative; padding: 100% 0 0; overflow: hidden; } nav.landing .img picture { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; display: block; } nav.landing .img picture.default { background-color: #f8f8f8; } nav.landing .img img { display: block; width: 100%; height: 100%; height: auto; } /* -------------------------------------------------------------------------- *\ DETAIL Files to conrol the styling for the product detail will be loaded below. @import 'detail/description'; \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ DETAIL - HEADER \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ DETAIL - LAYOUT \* -------------------------------------------------------------------------- */ .page-type-product main > header { text-align: left; } .page-type-cart main > header { text-align: left; } .page-type-cart main > header h1 { color: #001338; } .product-view, .productView { display: grid; grid-template-columns: 100%; grid-template-rows: auto; grid-template-areas: "gallery" "title" "details"; } .product-view .gallery, .productView .gallery { grid-area: gallery; } .product-view .title, .productView .title { grid-area: title; } .product-view .details, .productView .details { grid-area: details; } @media (min-width: 768px) { .product-view, .productView { padding-top: 2.5rem; grid-template-columns: 1.3fr 1fr; grid-column-gap: 1.875rem; grid-template-rows: auto 1fr; grid-template-areas: "gallery title" "gallery details"; } .product-view .gallery, .productView .gallery { grid-row: 1 span 2; grid-column: 1; } .product-view .title, .productView .title { grid-row: 1; grid-column: 2; } .product-view .details, .productView .details { grid-row: 2; grid-column: 2; } .product-view .feeds-carousel, .productView .feeds-carousel { position: relative; position: -webkit-sticky; position: sticky; } @supports (position: -webkit-sticky) { .product-view .feeds-carousel, .productView .feeds-carousel { top: 7.75rem; } } @supports (position: sticky) { .product-view .feeds-carousel, .productView .feeds-carousel { top: 7.75rem; } } } @media (min-width: 992px) { .product-view, .productView { margin-top: 3rem; grid-column-gap: 3.75rem; } } @media (min-width: 1425px) { .product-view, .productView { grid-column-gap: 5rem; } } /* -------------------------------------------------------------------------- *\ DETAIL - HEADER - TITLE \* -------------------------------------------------------------------------- */ .title h1 { margin: 0; font-size: 1.75rem; line-height: 1.875rem; margin-bottom: 1rem; color: #001338; } @media (min-width: 768px) { .title h1 { font-size: 2.25rem; line-height: 2.5rem; margin-bottom: 0.75rem; } } hr { margin: 1.5rem 0 1.5rem 0; } .form-action button { width: 100% !important; } .description { margin-bottom: 1rem; } @media (min-width: 768px) { .description { margin-bottom: 2rem; } } .each-append { font-size: 1.5rem; font-family: "bellyswing", Helvetica, Arial, sans-serif; text-transform: uppercase; } .anchors { display: flex; flex-direction: column; align-items: flex-start; } @media (min-width: 992px) { .anchors { flex-direction: row; align-items: flex-end; } } .anchors .price-wrapper { flex-grow: 1; } .anchors .price-wrapper.donation-price .each-append { display: none; } .anchors div:last-child { font-weight: 500; margin-top: 1rem; } .anchors div:last-child a:last-child { margin-left: 1rem; } /* -------------------------------------------------------------------------- *\ Load the Gallery that is right for your site @import 'header/galleries/thumbs-bottom'; @import 'header/galleries/thumbs-right'; @import 'header/galleries/thumbs-left'; \* -------------------------------------------------------------------------- */ .product-view { /* -------------------------------------------------------------------------- *\ DETAIL - GALLERIES - EASYZOOM Settings for Easy Zoom functionality. \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ DETAIL - GALLERIES - STACKED This will present the image stacked directly above the thumbnails. Modify the Gallery.html file with the following adjustments: - on the thumbnail slider settings add "vertical": false to each responsive breakpoint setting - on the initial settings set "vertical": false so that it resets on responsive change \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ SHARE \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ Load additional components used in the Detail - Header \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ CATALOG - DETAIL - HEADER - RATING \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ CATALOG - DETAIL - HEADER - PRICE \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ CATALOG - DETAIL - HEADER - INFO \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ CATALOG - DETAIL - HEADER - COMPONENTS - FORM \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ DETAIL - SHARE \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ Load form elements used in the Detail - Header \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ CATALOG - DETAIL - HEADER - FORM ELEMENTS - RECTANGLE \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ CATALOG - DETAIL - HEADER - FORM ELEMENTS - TEXTAREA \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ CATALOG - DETAIL - HEADER - FORM ELEMENTS - PRODUCT LIST \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ CATALOG - DETAIL - HEADER - FORM ELEMENTS - FORM ELEMENTS \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ CATALOG - DETAIL - HEADER - FORM ELEMENTS - SET RADIO \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ CATALOG - DETAIL - HEADER - FORM ELEMENTS - SET SELECT \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ CATALOG - DETAIL - HEADER - FORM ELEMENTS - RECTANGLE \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ CATALOG - DETAIL - HEADER - FORM ELEMENTS - RECTANGLE \* -------------------------------------------------------------------------- */ } .product-view .gallery .easyzoom-flyout { display: none; overflow: hidden; position: absolute; width: 100%; height: 100%; z-index: 1000; left: 0; top: 0; background: #fff; cursor: crosshair; } .product-view .gallery .easyzoom-flyout img { max-width: none; max-height: none; width: auto; height: auto; bottom: initial; } .product-view .modal .modal-window { padding: 0; overflow: hidden; } .product-view .video-fullscreen { padding: 56.25% 0 0; position: relative; overflow: hidden; } .product-view .video-fullscreen iframe { position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100%; width: 100%; } .product-view .gallery-wrap { padding: 0; margin-bottom: 2rem; position: relative; position: -webkit-sticky; position: sticky; } @media (min-width: 768px) { .product-view .gallery-wrap { padding: 0 0 1rem; margin-bottom: 0; } } @supports (position: -webkit-sticky) { .product-view .gallery-wrap { top: 6.25rem; } } @supports (position: sticky) { .product-view .gallery-wrap { top: 6.25rem; } } .product-view .gallery img { padding: 1.5rem; margin: auto auto; width: 100%; /* or any custom size */ height: 100%; max-height: 36.25rem; object-fit: contain; position: absolute; top: 0; bottom: 0; right: 0; left: 0; } @media (min-width: 992px) { .product-view .gallery img { padding: 2rem; } } .product-view .gallery a::after { padding-top: 100%; /* percentage of containing block _width_ */ display: block; content: ''; } .product-view .gallery .gallery-main { display: none; position: relative; background-color: var(--image-background); border-radius: 0.5rem; } @media (min-width: 768px) { .product-view .gallery .gallery-main { display: block; aspect-ratio: 1; width: 100%; max-height: 38.75rem; } } .product-view .gallery .gallery-main .icon-zoom { display: block; position: absolute; top: 0.75rem; right: 0.75rem; height: 1.75rem; width: 1.75rem; font-size: 1.75rem; color: #9d9d9d; z-index: 2; } .product-view .gallery .gallery-thumbs { grid-area: gallery-thumbs; position: relative; } @media (max-width: 767.9px) { .product-view .gallery .gallery-thumbs { min-height: 17rem; } } @media (min-width: 768px) { .product-view .gallery .gallery-thumbs { padding: 1rem 0; } .product-view .gallery .gallery-thumbs > div a { margin: 0 auto; } .product-view .gallery .gallery-thumbs > div a img { width: 100%; height: 100%; } } @media (min-width: 768px) { .product-view .gallery .gallery-thumbs [data-slick] { display: flex; max-height: 18.75rem; flex-direction: row; align-items: center; justify-content: center; opacity: 1; gap: 1rem; max-height: 21.25rem; } } .product-view .gallery .gallery-thumbs .thumb { position: relative; background-color: var(--image-background); border-radius: 0.5rem; aspect-ratio: 1; width: 100%; height: 100%; } @media (min-width: 768px) { .product-view .gallery .gallery-thumbs .thumb { pointer-events: none; max-height: 21.25rem; } .product-view .gallery .gallery-thumbs .thumb:nth-child(1) { display: none; } } .product-view .gallery .gallery-thumbs .thumb .icon-play { position: absolute; pointer-events: none; top: 50%; left: 50%; color: #fff; font-size: 2.5rem; transform: translate(-50%, -50%) scale(1); } .product-view .gallery .gallery-thumbs .thumb img { padding: 1rem; } .product-view .gallery .gallery-thumbs .slick-arrow { height: 2.5rem; width: 2.5rem; border-radius: 2.5rem; font-size: 0.625rem; } @media (min-width: 992px) { .product-view .gallery .gallery-thumbs .slick-arrow { height: 3.75rem; width: 3.75rem; border-radius: 3.75rem; font-size: 1.0625rem; } } .product-view .gallery .gallery-thumbs .slick-slide { margin: 0 0.5rem; } .product-view .gallery .gallery-thumbs .slick-prev, .product-view .gallery .gallery-thumbs .slick-next { display: none; } @media (min-width: 768px) { .product-view .gallery .gallery-thumbs .slick-prev, .product-view .gallery .gallery-thumbs .slick-next { display: block; } } .product-view .gallery .gallery-thumbs .slick-prev.slick-disabled, .product-view .gallery .gallery-thumbs .slick-next.slick-disabled { opacity: 0.5; } .product-view .gallery .gallery-thumbs .slick-prev.slick-hidden, .product-view .gallery .gallery-thumbs .slick-next.slick-hidden { display: none; } .product-view .gallery .gallery-thumbs .slick-prev { transform: translate(20px, -20%); } .product-view .gallery .gallery-thumbs .slick-next { transform: translate(-20px, -20%); } .product-view .share { margin: 0; grid-area: share; } .product-view .stars { display: flex; margin: 0 0 1rem; font-size: 0.75rem; } .product-view .stars a { font-size: .8em; margin-left: 0.5rem; } @media (min-width: 768px) { .product-view .stars { margin: 0 0 2rem; font-size: 1rem; } } .product-view .rating { color: #00748b; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: flex-start; align-items: center; flex-flow: row nowrap; } .product-view .rating span { margin: 0 0.125rem 0 0; display: flex; } .product-view .price { font-size: 1.5rem; font-family: "bellyswing", Helvetica, Arial, sans-serif; text-transform: uppercase; font-weight: 400; margin: 0; } @media (min-width: 768px) { .product-view .price { font-size: 2.25rem; } } .product-view .price .original { position: relative; font-weight: normal; margin: 0 0.5rem 0 0; } .product-view .price .original:before { content: ""; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%) rotate(2.5deg); -ms-transform: translate(-50%, -50%) rotate(2.5deg); transform: translate(-50%, -50%) rotate(2.5deg); height: 0.125rem; width: 110%; background: currentColor; } .product-view .info { margin: 0 0 1.5rem; font-size: 0.875rem; } .product-view .info:before, .product-view .info:after { display: block; height: 0; width: 100%; content: ""; clear: both; } .product-view .info dt { float: left; margin: 0 0.5rem 0 0; } .product-view .info dt ~ dt { clear: both; } .product-view .info dd { float: left; width: auto; padding: 0; } .product-view .info dt:nth-of-type(n + 2), .product-view .info dd:nth-of-type(n + 2) { margin-top: 0.5rem; } .product-view .product-options .bulk-msg ul { margin-bottom: 1rem !important; } .product-view .add-to-cart-notes { display: grid; grid-template-columns: repeat(3, 1fr); } .product-view .add-to-cart-notes li { list-style-type: none; line-height: 1.125rem; margin: 0; padding: 0 2rem; display: grid; justify-content: center; grid-template-columns: 1fr; row-gap: 0.75rem; text-align: center; } .product-view .add-to-cart-notes li:before { display: none; } .product-view .add-to-cart-notes li i, .product-view .add-to-cart-notes li svg { font-size: 2.375rem; height: 2.375rem; justify-self: center; color: #70b3e3; } .product-view .add-to-cart-notes li:nth-child(1) { padding-left: 0; } .product-view .add-to-cart-notes li:nth-child(2) { border-left: 0.0625rem solid #b4bcca; border-right: 0.0625rem solid #b4bcca; padding: 0 2rem; } .product-view .add-to-cart-notes li:nth-child(3) { padding-right: 0; } .product-view .information-links { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: start; align-items: start; flex-flow: column; } .product-view .information-links a { border-bottom: 0.0625rem solid #b4bcca; padding: 1rem 0; width: 100%; text-decoration: none; color: #001338; } .product-view .information-links a:hover { color: #00369d; } .product-view .information-links a:after { content: '\f102'; font-family: 'ico'; float: right; font-size: 0.75rem; } .product-view nav.share { font-size: 1.25rem; margin: 1rem 0 0; } @media (min-width: 768px) { .product-view nav.share { margin: 1.25rem 0 0; } } @media (min-width: 992px) { .product-view nav.share { margin: 1.5rem 0 0; } } .product-view nav.share ul { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: flex-start; align-items: center; flex-flow: row nowrap; margin: 0 -0.5rem; } .product-view nav.share li { margin: 0 0.5rem; } .product-view nav.share a { color: #70b3e3; } .product-view nav.share a:hover, .product-view nav.share a:focus, .product-view nav.share a.hover { color: #00369d; } .product-view .set-swatch label { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: space-between; align-items: stretch; flex-flow: row nowrap; width: 2.5rem; height: 2.5rem; margin: 0 0.5rem 0.5rem 0; transition: all .25s linear; border-radius: 100%; overflow: hidden; border: 1px solid #eff1f5; box-shadow: inset 0 0 0 3px #fff; } .product-view .set-swatch label.unavailable { pointer-events: none; opacity: .5; } .product-view .set-swatch label.unavailable ::before { background-color: #000; content: ""; height: 2px; left: -5px; position: absolute; top: 11px; transform: rotate(-45deg); width: 141%; } .product-view .set-swatch label span:not(.sr-only) { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: 0; align-items: 1; align-content: auto; flex-flow: row wrap; width: 100%; display: block; height: 2.5rem; position: relative; z-index: -1; } .product-view .set-swatch input { position: absolute; width: 1px !important; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip: rect(0, 0, 0, 0); } .product-view .set-swatch input:checked + label { border: 1px solid #000; box-shadow: inset 0 0 0 3px #fff; color: #fff; } .product-view .productOptions-list { border: 1px solid #000; list-style: none; margin: 0; max-height: 400px; overflow-y: auto; } .product-view .productOptions-list-item { padding: 10px; } .product-view .productOptions-list-item + .productOptions-list-item { border-top: 1px solid #000; } .product-view .productOptions-list-item .form-label { text-align: left; top: -2px; } .product-view .productOptions-list-item-figure, .product-view .productOptions-list-item-content { display: table-cell; vertical-align: middle; } .product-view .productOptions-list-item-figure { width: auto; } .product-view .productOptions-list-item-content { padding-left: 10px; } .product-view .form-el, .product-view .form-cr { margin: 0 0 0.75rem; } .product-view .form-el p, .product-view .form-el label, .product-view .form-cr p, .product-view .form-cr label { display: block; width: 100%; font-weight: bold; margin: 0 0 1rem; } .product-view .form-el small, .product-view .form-cr small { font-size: 1rem; font-weight: normal; color: #c22a22; } .product-view [class*="set-"] label { font-weight: normal; } .product-view [class*="set-"] .options { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: flex-start; align-items: stretch; flex-flow: row wrap; } .product-view .set-radio label { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: flex-start; align-items: center; flex-flow: row nowrap; margin: 0 0.5rem; width: auto; } .product-view .set-radio label:before { content: ""; display: block; width: 0.75rem; height: 0.75rem; margin: 0 0.5rem 0 0; border-radius: 100%; border: 0.125rem solid #b4bcca; } .product-view .set-radio label.unavailable { pointer-events: none; opacity: .5; } .product-view .set-radio input { position: absolute; width: 1px !important; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip: rect(0, 0, 0, 0); } .product-view .set-radio input:checked + label:before { background: #00369d; box-shadow: inset 0 0 0 0.1875rem #fff; } .product-view select { max-width: 18.75rem; margin: 0.3125rem 0; } .product-view select:disabled, .product-view select.unavailable { background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"); opacity: 0.5; } .product-view select:hover, .product-view select:focus, .product-view select.hover { border-color: #00369d; } .product-view .set-rectangle { margin-bottom: 1.5rem !important; } .product-view .set-rectangle label { font-family: "bellyswing", Helvetica, Arial, sans-serif; text-transform: uppercase; font-size: 1rem; line-height: 1rem; color: #56637b; border: 0.0625rem solid #56637b; border-radius: 6.25rem; padding: 0.5rem 1rem; margin: 0 0.5rem 0 0; transition: all .25s linear; width: auto; } .product-view .set-rectangle label.unavailable { pointer-events: none; background: #56637b; opacity: .5; } .product-view .set-rectangle label:hover { cursor: pointer; background: #00369d; border-color: #00369d; color: #fff; } .product-view .set-rectangle input { position: absolute; width: 1px !important; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip: rect(0, 0, 0, 0); } .product-view .set-rectangle input:checked + label { background: #001338; border-color: #001338; color: #fff; } .product-view .set-swatch label { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: space-between; align-items: stretch; flex-flow: row nowrap; width: 2.5rem; height: 2.5rem; margin: 0 0.5rem 0.5rem 0; transition: all .25s linear; border-radius: 100%; overflow: hidden; border: 1px solid #eff1f5; box-shadow: inset 0 0 0 3px #fff; } .product-view .set-swatch label.unavailable { pointer-events: none; opacity: .5; } .product-view .set-swatch label.unavailable ::before { background-color: #000; content: ""; height: 2px; left: -5px; position: absolute; top: 11px; transform: rotate(-45deg); width: 141%; } .product-view .set-swatch label span:not(.sr-only) { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: 0; align-items: 1; align-content: auto; flex-flow: row wrap; width: 100%; display: block; height: 2.5rem; position: relative; z-index: -1; } .product-view .set-swatch input { position: absolute; width: 1px !important; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip: rect(0, 0, 0, 0); } .product-view .set-swatch input:checked + label { border: 1px solid #000; box-shadow: inset 0 0 0 3px #fff; color: #fff; } /* -------------------------------------------------------------------------- *\ DETAIL - DESCRIPTION TABS \* -------------------------------------------------------------------------- */ @media (max-width: 767.9px) { .description .tabs > dt { padding: 0.3125rem; border-top: 0.0625rem solid #b4bcca; border-bottom: 0.0625rem solid #b4bcca; } .description .tabs > dt > button[aria-expanded="true"] { border-bottom-color: #fff; font-weight: bold; } .description .tabs > dd { padding: 0.625rem 0.3125rem; } } @media (min-width: 768px) { .description .tabs { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: flex-start; align-items: stretch; flex-flow: row wrap; } .description .tabs > dt { -webkit-box-flex: 0 0 auto; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; order: 0; position: relative; z-index: 100; } .description .tabs > dt > button { padding: 0.5rem 0.75rem; border: 0.0625rem solid #b4bcca; border-radius: 0.25rem 0.25rem 0 0; } .description .tabs > dt > button[aria-expanded="true"] { border-bottom-color: #fff; font-weight: bold; } .description .tabs > dt ~ dt { margin: 0 0 0 0.5rem; } .description .tabs > dd { position: relative; z-index: 0; -webkit-box-flex: 0 0 auto; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; order: 1; width: 100%; border: 0.0625rem solid #b4bcca; margin-top: -0.0625rem; padding: 1.5rem; border-radius: 0 0.25rem 0.25rem 0.25rem; } } @media (min-width: 768px) { #sectDescription:not([hidden]) { display: grid; grid-template-columns: 7fr 5fr; grid-template-rows: auto; column-gap: 2rem; row-gap: 2rem; } } /* -------------------------------------------------------------------------- *\ CART PREVIEW This controls the modal that appears after clicking add to cart \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ DETAIL - CART PREVIEW \* -------------------------------------------------------------------------- */ .modal-header { padding: 0.5rem 0; border-bottom: 1px solid #eff1f5; } .modal-header h2 { margin-bottom: 0; font-size: 1.5rem; text-align: center !important; } .previewCart { display: grid; } @media (min-width: 992px) { .previewCart { grid-template-columns: 3fr 1fr; column-gap: 1.5rem; align-items: top; } } @media (min-width: 992px) { .previewCart { column-gap: 2rem; } } .previewCart .productView { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5rem; order: 2; } @media (min-width: 992px) { .previewCart .productView { column-gap: 2rem; order: 1; } } .previewCart .productView picture, .previewCart .productView img { width: 100%; } .previewCart .productView h2 { font-size: 1rem; line-height: 1.5rem; margin-bottom: 0.5rem; } .previewCart .productView h2 small { font-size: .5em; margin: 0 0 0.25rem; } .previewCart .productView dl { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto; column-gap: 0.5rem; row-gap: 0.5rem; max-width: 30rem; font-size: 0.875rem; } .previewCart .productView dl dt ~ dt { margin: 0; } .previewCart .previewCartCheckout { padding: 1rem; border: 0.0625rem solid #eff1f5; border-radius: 0.25rem; background-color: transparent; order: 1; margin-bottom: 1.25rem; } .previewCart .previewCartCheckout [class*="btn-"] { width: 100%; margin: 0; } .previewCart .previewCartCheckout [class*="btn-"] + [class*="btn-"] { margin: 0.5rem 0 0; } .previewCart .previewCartCheckout .CheckoutButton { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: center; align-items: center; flex-flow: row nowrap; margin: 0 0 1rem; } .previewCart .previewCartCheckout .CheckoutButton > p { display: none; } .previewCart .previewCartCheckout .RemoteCheckout { width: 100% !important; margin-bottom: 1rem; } .previewCart .previewCartCheckout .RemoteCheckout p { display: none !important; } .previewCart .previewCartCheckout .RemoteCheckout div, .previewCart .previewCartCheckout .RemoteCheckout button { width: 100% !important; } .previewCart .previewCartCheckout .subtotal { border: none; padding: 0.5rem 0; margin: 0.5rem 0; text-align: center; } .previewCart .previewCartCheckout .subtotal h3 { font-family: "Futura-PT", Helvetica, Arial, sans-serif; text-transform: capitalize; font-weight: normal; font-size: 0.875rem; margin-bottom: 0.5rem; } .previewCart .previewCartCheckout .subtotal strong { font-size: 1.5rem; font-weight: 500; font-family: "bellyswing", Helvetica, Arial, sans-serif; text-transform: uppercase; } .previewCart .previewCartCheckout p { font-size: 0.875rem; margin: 0 0 1rem; } /* -------------------------------------------------------------------------- *\ CUSTOM ELEMENTS These are custom elements created for specific use cases to fulfill a specific client requirement. _cutlist.scss - used to add multiple custom configured products to a cart \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ DETAIL - CUSTOM - CUTLIST \* -------------------------------------------------------------------------- */ form.cutlist table { width: 100%; border-collapse: collapse; font-size: 0.875rem; text-align: left; } form.cutlist th, form.cutlist td { padding: 0.25rem; } form.cutlist tbody tr:nth-child(even) td { background: #eff1f5; } /* -------------------------------------------------------------------------- *\ FEEDS Only files that are used by the Product Feeds Components should be loaded. \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ PRODUCT > FEEDS > STATIC \* -------------------------------------------------------------------------- */ .feeds-static > div { display: grid; grid-template-columns: 1fr 1fr; column-gap: 0.5rem; row-gap: 1rem; } @media (min-width: 768px) { .feeds-static > div { grid-template-columns: 1fr 1fr 1fr 1fr; column-gap: 1rem; row-gap: 1.5rem; } } @media (min-width: 992px) { .feeds-static > div { grid-template-columns: 1fr 1fr 1fr 1fr; column-gap: 2rem; row-gap: 2rem; } } /* -------------------------------------------------------------------------- *\ PRODUCT > FEEDS > CAROUSEL \* -------------------------------------------------------------------------- */ .feeds-carousel { position: relative; } .feeds-carousel .slick-slider { margin: 0 -0.25rem; width: calc(100% + 0.5rem); } @media (min-width: 768px) { .feeds-carousel .slick-slider { margin: 0 -0.5rem; width: calc(100% + 1rem); } } @media (min-width: 992px) { .feeds-carousel .slick-slider { margin: 0 -1rem; width: calc(100% + 2rem); } } .feeds-carousel .slick-list { padding: 0.3125rem 0; } .feeds-carousel .slick-initialized .slick-slide { display: flex; } .feeds-carousel .carousel-heading-container { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: center; align-items: center; flex-flow: row nowrap; } @media (min-width: 576px) { .feeds-carousel .carousel-heading-container { justify-content: flex-start; } } .feeds-carousel .card, .feeds-carousel .thumbnails .thumbs { width: 100%; margin: 0 0.25rem; } @media (min-width: 768px) { .feeds-carousel .card, .feeds-carousel .thumbnails .thumbs { margin: 0 0.5rem; } } @media (min-width: 992px) { .feeds-carousel .card, .feeds-carousel .thumbnails .thumbs { margin: 0 1rem; } } /* -------------------------------------------------------------------------- *\ PRODUCT > FEEDS > CAROUSEL \* -------------------------------------------------------------------------- */ .carousel-centered { position: relative; } .carousel-centered h2 { margin-bottom: 0; color: #00369d; z-index: 2; } .carousel-centered .marquee { z-index: 1; } .carousel-centered .img { min-width: 15.625rem; } @media (min-width: 992px) { .carousel-centered .img { min-width: 18.75rem; } } @media (min-width: 992px) { .carousel-centered .slick-slider { margin: 0; width: 100%; } } .carousel-centered .slick-list { overflow: visible; padding-top: 2.125rem !important; } @media (min-width: 992px) { .carousel-centered .slick-list { padding-top: 4rem !important; } } .carousel-centered .slick-initialized .slick-slide { display: flex; } .carousel-centered .carousel-heading-container { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: center; align-items: center; flex-flow: row nowrap; } .carousel-centered .card { width: 100%; margin: 0; } @media (min-width: 768px) and (max-width: 991.9px) { .carousel-centered .card .badge { width: 100%; height: 90px; } } @media (min-width: 992px) { .carousel-centered .card .badge { width: 120%; height: 100px; } } .carousel-centered .card:hover .badge { top: 12% !important; left: 2%; } @media (min-width: 768px) { .carousel-centered .card:hover .badge { top: 2% !important; left: -2%; } } /* -------------------------------------------------------------------------- *\ INTERIOR HERO \* -------------------------------------------------------------------------- */ .page-type-cart main > header, .page-type-product main > header { background-color: #fff; } main > header { background-color: #f5f7f9; background-image: var(--bgimageMobile); background-repeat: no-repeat; background-position: 50% 0%; background-size: 100%; padding-top: 2rem; text-align: center; } @media (min-width: 768px) { main > header { background-image: var(--bgimageDesktop); background-size: auto !important; } } @media (min-width: 992px) { main > header { padding-top: 0; } } @media (min-width: 992px) { main > header ol { position: relative; top: 56px; } } main > header .container { position: relative; } main > header .container .content { max-width: 80%; margin: 0 auto; } @media (min-width: 768px) { main > header .container .content { max-width: 60%; } } main > header * { z-index: 2; } main > header .dot { z-index: 1; } main > header h1 { margin-top: 2rem; } main > header .btn-primary { margin: 0 0.5rem; } main > header .btn-color-override-grey { --btnColor: $neutral-2 !important; } main > header.franchising-opportunities img { margin-top: 2rem; } main > header.franchising-opportunities h1 { margin-top: 1rem; } main > header a { text-decoration: underline; } main > header .grey-wave { width: 100%; margin-top: 3rem; } @media (min-width: 768px) { main > header .grey-wave { margin-top: 2rem; } } main > header .grey-wave img { -webkit-user-drag: none; display: block; height: 1.125rem; width: 100%; padding: 0; margin: 0; } @media (min-width: 768px) { main > header .grey-wave img { height: 2.75rem; } } @media (min-width: 992px) { main > header .grey-wave img { height: 4.25rem; } } main > header .grey-wave--hide img { opacity: 0; height: 0; margin-top: 2rem; } /* -------------------------------------------------------------------------- *\ GIFT-CERTIFICATES COMPONENTS \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ GIFT CERTIFICATE - PURCHASE \* -------------------------------------------------------------------------- */ @media (min-width: 768px) { .gift-certificates .form { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto; column-gap: 2rem; row-gap: 1.5rem; grid-template-areas: 'to from' 'information information' 'actions actions'; } .gift-certificates .form .form-el:last-child { margin-bottom: 0; } .gift-certificates .form :nth-child(1) { grid-area: to; } .gift-certificates .form :nth-child(2) { grid-area: from; } .gift-certificates .form :nth-child(3) { grid-area: information; } .gift-certificates .form :nth-child(4) { grid-area: actions; } } /* -------------------------------------------------------------------------- *\ OPTIMIZED-CHECKOUT COMPONENTS \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ ORDER CONFIRMATION - SUMMARY \* -------------------------------------------------------------------------- */ .productList-item { padding: 0; } .productList-item:before { display: none; } /* -------------------------------------------------------------------------- *\ ORDER CONFIRMATION - MESSAGES \* -------------------------------------------------------------------------- */ .button, .customerEmail-button { border-radius: 0; padding: 1rem; } .button--primary, .button--action { background: #00369d; color: #fff; border-color: #00369d; } .button--primary:hover, .button--primary:focus, .button--primary.hover, .button--action:hover, .button--action:focus, .button--action.hover { background: #fff; color: #00369d; border-color: #00369d; } .button--tertiary { background: #eff1f5; border-color: #eff1f5; color: #001338; } .button--tertiary:hover, .button--tertiary:focus, .button--tertiary.hover { background: #b4bcca; border-color: #b4bcca; color: #fff; } /* -------------------------------------------------------------------------- *\ LOCATION FINDER \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ PAGE - LAYOUT \* -------------------------------------------------------------------------- */ .location-finder { margin: 0; } .location-finder #storemapper { font-family: "Futura-PT", Helvetica, Arial, sans-serif; display: flex; flex-direction: column; position: relative; } @media (min-width: 992px) { .location-finder #storemapper { flex-direction: row; } } .location-finder #storemapper li:before { display: none; } .location-finder #storemapper #storemapper-left { order: 2; width: 100%; } @media (min-width: 670px) { .location-finder #storemapper #storemapper-left { height: auto; overflow: hidden; z-index: 1; } } @media (min-width: 768px) { .location-finder #storemapper #storemapper-left { order: 1; } } @media (min-width: 992px) { .location-finder #storemapper #storemapper-left { width: 35%; background: #f5f7f9; } } .location-finder #storemapper #storemapper-left #storemapper-form { background: #fff; box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.06); padding: 1.5rem 1rem; } @media (min-width: 768px) { .location-finder #storemapper #storemapper-left #storemapper-form { height: 15rem; margin: 0 0 29.375rem; width: 100%; } } @media (min-width: 992px) { .location-finder #storemapper #storemapper-left #storemapper-form { height: auto; margin: 0; width: 100%; padding: 2rem 1.5rem; } } @media (min-width: 1400px) { .location-finder #storemapper #storemapper-left #storemapper-form { width: auto; } } @media (min-width: 768px) { .location-finder #storemapper #storemapper-left #storemapper-form .storemapper-form-inner { display: grid; grid-template-columns: 1fr 2fr; column-gap: 3.625rem; grid-template-rows: auto; grid-template-areas: "leftTop rightTop" "leftBottom rightBottom"; } } @media (min-width: 992px) { .location-finder #storemapper #storemapper-left #storemapper-form .storemapper-form-inner { display: flex; flex-direction: column; margin-left: calc((100vw - 1400px)/2); } } .location-finder #storemapper #storemapper-left #storemapper-form .storemapper-form-inner label[for=storemapper-zip] { color: #001338; font-weight: 400; font-size: 1rem; line-height: 1.5rem; margin: 0 0 0.5rem; display: block; } @media (min-width: 768px) { .location-finder #storemapper #storemapper-left #storemapper-form .storemapper-form-inner label[for=storemapper-zip] { grid-area: leftTop; } } .location-finder #storemapper #storemapper-left #storemapper-form .storemapper-form-inner .storemapper-reset svg, .location-finder #storemapper #storemapper-left #storemapper-form .storemapper-form-inner .storemapper-reset span { display: none; } .location-finder #storemapper #storemapper-left #storemapper-form .storemapper-form-inner .storemapper-reset:before { content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAyNCAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuMDU2NzMgMjIuMjMyMUMyLjgxNTk5IDIyLjIyMzggMi42MzA1NSAyMi4xMTc4IDIuNTMzNzMgMjEuOTMzQzIuNDM2OTEgMjEuNzQ4MyAyLjQzNTA1IDIxLjQ5NyAyLjUyODQ4IDIxLjIyNDJDMi44MTc4MyAyMC4zODIzIDMuNjY4NTUgMTkuNTMxNSA0LjMyMjIxIDE4LjgwMDVDNi44NzQyNSAxNS45MjI1IDkuNDM4NjMgMTIuOTkzNCAxMi4wNzEzIDEwLjE1MDdDMTQuMjgxNiA3Ljc2MzU4IDE2LjQzMzggNS4wOTIgMTguODgyNyAyLjk1MjVDMTkuODQ4NSAyLjEwODI2IDIwLjM2NTIgMi42MjQ5MiAyMC43ODE5IDMuMDg2ODRDMjEuMTk4NSAzLjU0ODc2IDIxLjAzMTMgMy45NDI1OSAyMC40NTA1IDQuNjU1OThDMTkuNTczOCA1Ljc3MDMxIDE4LjcxNjQgNi45MDM5NyAxNy43ODY0IDcuOTgzMTNDMTUuMzI2NCAxMC44MzU1IDEyLjg4MjYgMTMuNzc2NiAxMC40MTI3IDE2LjY1NTRDOC44MzIwOCAxOC40OTU3IDYuNjM5NjMgMjEuMzYyMyA0LjQzNDgyIDIyLjA4MDdDMy45NDE4MiAyMi4yMzc2IDMuNDcxNTIgMjIuMjg5MiAzLjA1NjczIDIyLjIzMjFaIiBmaWxsPSIjMDAzNjlEIi8+CjxwYXRoIGQ9Ik0xLjcwOTU4IDEuNjA4NTRDMS40NjU2NSAxLjU4MzQ1IDEuMjkxNjQgMS42NjU1NyAxLjIxODggMS44NDAxNkMxLjE0NTk2IDIuMDE0NzUgMS4xNzkwNiAyLjI3MDM1IDEuMzEyMTcgMi41NjEwNkMxLjcyNCAzLjQ1ODQ3IDIuNzA4NTQgNC40NDMwMiAzLjQ3NTggNS4yNzgyNkM2LjQ3NDcyIDguNTYzNjggOS40OTMzIDExLjkwMjcgMTIuNTY5NCAxNS4xNjM0QzE1LjE1MjEgMTcuOTAxNCAxNy43MTUxIDIwLjkyMDkgMjAuNTA2MiAyMy40NDAxQzIxLjYwNyAyNC40MzQxIDIyLjA2MTEgMjMuOTgwMSAyMi40MjA5IDIzLjU2NzhDMjIuNzgwOCAyMy4xNTU2IDIyLjU1NTYgMjIuNzMxNCAyMS44NjUgMjEuOTI0MkMyMC44MTczIDIwLjY2NzcgMTkuNzg2NiAxOS4zOTQyIDE4LjY4OTUgMTguMTY2QzE1Ljc4NzggMTQuOTE5NSAxMi44OTAzIDExLjU4NSA5Ljk3NDk3IDguMzEwMzRDOC4xMDk1MiA2LjIxNjY2IDUuNDc4MjcgMi45OTMgMy4xMzM2MiAxLjk1NDU4QzIuNjA5ODggMS43MjYyMSAyLjEyMzkgMS42MDgxMiAxLjcwOTU4IDEuNjA4NTRaIiBmaWxsPSIjMDAzNjlEIi8+Cjwvc3ZnPgo="); display: block; position: absolute; left: 1rem; top: 50%; width: 0.75rem; height: 0.75rem; transform: translate(0, -100%); opacity: 0.7; } .location-finder #storemapper #storemapper-left #storemapper-form .storemapper-form-inner .storemapper-reset:hover:before, .location-finder #storemapper #storemapper-left #storemapper-form .storemapper-form-inner .storemapper-reset:focus:before, .location-finder #storemapper #storemapper-left #storemapper-form .storemapper-form-inner .storemapper-reset.hover:before { opacity: 1; } .location-finder #storemapper #storemapper-left #storemapper-form .storemapper-form-inner #storemapper-zip { color: #001338; font-weight: 400; font-size: 1rem; line-height: 3rem; margin: 0 0 1rem; border: 1px solid #B4BCCA; box-sizing: border-box; border-radius: 6px; background: #fff; width: 100%; height: 3rem; padding: 0 1rem; } @media (min-width: 768px) { .location-finder #storemapper #storemapper-left #storemapper-form .storemapper-form-inner #storemapper-zip { grid-area: leftTop; margin-top: 2.125rem; } } @media (min-width: 992px) { .location-finder #storemapper #storemapper-left #storemapper-form .storemapper-form-inner #storemapper-zip { margin-top: 0; } } .location-finder #storemapper #storemapper-left #storemapper-form .storemapper-form-inner .storemapper-dropdown { display: block; } .location-finder #storemapper #storemapper-left #storemapper-form .storemapper-form-inner .storemapper-dropdown .button-group { position: relative; } .location-finder #storemapper #storemapper-left #storemapper-form .storemapper-form-inner .storemapper-dropdown .button-group .storemapper-dropdown-menu { width: 100%; top: 100%; } .location-finder #storemapper #storemapper-left #storemapper-form .storemapper-form-inner .storemapper-dropdown.storemapper-categories #storemapper-filter-wrapper #storemapper-filter { color: #001338; font-weight: 500; font-size: 1rem; line-height: 1.5rem; margin: 0 0 0.5rem; } .location-finder #storemapper #storemapper-left #storemapper-form .storemapper-form-inner .storemapper-dropdown.storemapper-categories #storemapper-filter-wrapper #storemapper-filter span.caret { display: none; } .location-finder #storemapper #storemapper-left #storemapper-form .storemapper-form-inner .storemapper-dropdown.storemapper-categories #storemapper-filter-wrapper .storemapper-dropdown-menu { display: flex; flex-direction: column; position: relative; width: 100%; padding: 0; box-shadow: none; border: none; margin: 0 0 1rem !important; } @media (min-width: 768px) { .location-finder #storemapper #storemapper-left #storemapper-form .storemapper-form-inner .storemapper-dropdown.storemapper-categories #storemapper-filter-wrapper .storemapper-dropdown-menu { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5rem; grid-template-rows: auto; } } .location-finder #storemapper #storemapper-left #storemapper-form .storemapper-form-inner .storemapper-dropdown.storemapper-categories #storemapper-filter-wrapper .storemapper-dropdown-menu li { padding: 0; margin: 0 0 0.5rem; } .location-finder #storemapper #storemapper-left #storemapper-form .storemapper-form-inner .storemapper-dropdown.storemapper-categories #storemapper-filter-wrapper .storemapper-dropdown-menu li label { color: #001338; font-weight: 400; font-size: 1rem; line-height: 1.5rem; display: flex; flex-direction: row; align-items: center; margin: 0; text-transform: capitalize; } .location-finder #storemapper #storemapper-left #storemapper-form .storemapper-form-inner .storemapper-dropdown.storemapper-categories #storemapper-filter-wrapper .storemapper-dropdown-menu li label input[type="checkbox"] { height: 1rem; width: 1rem; margin: 0 0.5rem 0 0; } .location-finder #storemapper #storemapper-left #storemapper-form .storemapper-form-inner .storemapper-dropdown.storemapper-categories #storemapper-filter-wrapper .storemapper-dropdown-menu li label span { color: #001338; font-weight: 400; font-size: 1rem; line-height: 1.5rem; } .location-finder #storemapper #storemapper-left #storemapper-form .storemapper-form-inner .storemapper-dropdown.storemapper-distance { margin: 0; } @media (min-width: 768px) { .location-finder #storemapper #storemapper-left #storemapper-form .storemapper-form-inner .storemapper-dropdown.storemapper-distance { grid-area: leftBottom; margin-top: -1.6875rem; } } @media (min-width: 992px) { .location-finder #storemapper #storemapper-left #storemapper-form .storemapper-form-inner .storemapper-dropdown.storemapper-distance { margin-top: 0; } } .location-finder #storemapper #storemapper-left #storemapper-form .storemapper-form-inner .storemapper-dropdown.storemapper-distance:before { content: "Radius"; color: #001338; font-weight: 400; font-size: 1rem; line-height: 1.5rem; margin: 0 0 0.5rem; display: block; } .location-finder #storemapper #storemapper-left #storemapper-form .storemapper-form-inner .storemapper-dropdown.storemapper-distance .button-group .storemapper-distance-btn { color: #001338; font-weight: 400; font-size: 1rem; line-height: 1.5rem; margin: 0 0 1rem; border: 1px solid #B4BCCA; box-sizing: border-box; border-radius: 6px; background: #fff; width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; height: 3rem; padding: 0 1rem; } .location-finder #storemapper #storemapper-left #storemapper-form .storemapper-form-inner .storemapper-dropdown.storemapper-distance .button-group .storemapper-distance-btn:after { content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxNCAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzLjc3ODggMS44NzY5N0MxMy42MjI0IDEuNzgxNDEgMTMuMzgzIDEuNzg1MDggMTMuMDExNiAxLjk2NTE5QzEyLjIwOTQgMi40MDk5NCAxMS40NzIzIDIuOTE3NTkgMTAuODEyOCAzLjQ3OTU5QzkuNDA1NTQgNC41NDE4OCA2Ljk5ODk5IDkuMTkyNzYgNS43NDA4MyA3LjE1NTMzQzUuNjcyNDIgNy4wNTI0MSAzLjExNjg5IDIuNTI3NTggMi43NzQ4NSAyLjAwOTNDMi40ODgzMyAxLjQ2NjcgMi4xMzMyNyAwLjk0NjAzNyAxLjcxNDUzIDAuNDU0NDYzQzEuMjYwMTEgMC4wMTcwNTAyIDAuMjA0NjY4IC0wLjI5MTcxMiAwLjAzODUzNDggMC40MzYwODRDLTAuMTQ3MTQ0IDEuMjUyMSAwLjM4MDU3NCAyLjI3Mzk1IDAuNzE3NzI4IDMuMDM4NTFDMS42OTQ5OCA1LjE5MjQ5IDIuOTUwNzYgNy4yNDcyMyA0LjA0NTI5IDkuMzU3MUM0LjM2ODUgMTAuMDEzNyA0Ljc2OTE0IDEwLjY0NzIgNS4yNDI0MiAxMS4yNTAxQzUuODYyOTggMTEuOTYzMiA2LjUyMjYzIDEyLjI5NzcgNy4yMzExNCAxMS42NjU1QzcuODU2NTkgMTEuMTEwNCA4LjI3NjgxIDEwLjI0NjYgOC43MjYzNCA5LjYwNzA1QzkuNDc4MTcgOC40NDM0MSAxMC4zNDU1IDcuMzI0MDQgMTEuMzIxIDYuMjU4NDVDMTIuMjk4MiA1LjI0MDI3IDEzLjQ1NjMgNC4yNDc4MiAxMy44OTYgMi45OTgwN0MxNC4wMzI4IDIuNjIzMTUgMTQuMDcxOSAyLjA2NDQ0IDEzLjc3ODggMS44NzY5N1oiIGZpbGw9IiMwMDM2OUQiLz4KPC9zdmc+Cg=="); } .location-finder #storemapper #storemapper-left #storemapper-form .storemapper-form-inner .storemapper-dropdown.storemapper-distance .button-group .storemapper-distance-btn span.value { font-weight: 400; } .location-finder #storemapper #storemapper-left #storemapper-form .storemapper-form-inner .storemapper-dropdown.storemapper-distance .button-group .storemapper-distance-btn span.caret { display: none; } .location-finder #storemapper #storemapper-left #storemapper-form .storemapper-form-inner #storemapper-go { background: transparent; border: 1px dashed #00369d; color: #fff; white-space: nowrap; height: 3rem; position: relative; margin-bottom: 0.3125rem; top: 4px; left: -4px; border-radius: 6.25rem; transition: all .2s ease; font-weight: 400; font-size: 1.25rem; line-height: 1.6875rem; text-align: center; letter-spacing: 0.04em; font-family: "bellyswing", Helvetica, Arial, sans-serif; text-transform: uppercase; } .location-finder #storemapper #storemapper-left #storemapper-form .storemapper-form-inner #storemapper-go::after { content: "SEARCH"; background: #00369d; color: #fff; border: 1px solid #00369d; white-space: nowrap; position: absolute; top: -6px; bottom: 4px; left: 3px; right: -5px; border-radius: 6.25rem; transition: all .2s ease; display: inline-flex; flex-flow: row nowrap; justify-content: center; align-items: center; } .location-finder #storemapper #storemapper-left #storemapper-form .storemapper-form-inner #storemapper-go:hover, .location-finder #storemapper #storemapper-left #storemapper-form .storemapper-form-inner #storemapper-go:focus, .location-finder #storemapper #storemapper-left #storemapper-form .storemapper-form-inner #storemapper-go.hover { transform: translate(4px, -5px); color: transparent; } .location-finder #storemapper #storemapper-left #storemapper-form .storemapper-form-inner #storemapper-go:hover::after, .location-finder #storemapper #storemapper-left #storemapper-form .storemapper-form-inner #storemapper-go:focus::after, .location-finder #storemapper #storemapper-left #storemapper-form .storemapper-form-inner #storemapper-go.hover::after { transform: translate(-4px, 5px); background: transparent; color: #00369d; border: 1px dashed transparent; } @media (min-width: 768px) { .location-finder #storemapper #storemapper-left #storemapper-form .storemapper-form-inner #storemapper-go { width: 16.875rem; margin-left: 0; grid-area: rightBottom; } } @media (min-width: 992px) { .location-finder #storemapper #storemapper-left #storemapper-form .storemapper-form-inner #storemapper-go { margin-left: auto; width: 100%; } } .location-finder #storemapper #storemapper-left #storemapper-list { max-height: 51.5625rem; overflow: auto; padding: 1.5rem 1rem; background: #f5f7f9; } @media (min-width: 768px) { .location-finder #storemapper #storemapper-left #storemapper-list { padding: 2rem 6.5625rem; max-height: 23rem; } } @media (min-width: 992px) { .location-finder #storemapper #storemapper-left #storemapper-list { max-height: 26.25rem; padding: 2rem 1.5rem; } } @media (min-width: 1400px) { .location-finder #storemapper #storemapper-left #storemapper-list { margin-left: calc((100vw - 1400px)/2); } } .location-finder #storemapper #storemapper-left #storemapper-list li { background: #fff; border: 1px solid #b4bcca; box-sizing: border-box; border-radius: 0.5rem; padding: 1rem; } @media (min-width: 768px) { .location-finder #storemapper #storemapper-left #storemapper-list li { padding: 1rem 1.5rem; } } .location-finder #storemapper #storemapper-left #storemapper-list li h4 { color: #001338; font-weight: 500; font-size: 1rem; line-height: 1.5rem; margin: 0 0 1.25rem; font-family: "Futura-PT", Helvetica, Arial, sans-serif; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; } .location-finder #storemapper #storemapper-left #storemapper-list li h4:before { display: block; height: 1.4375rem; width: 1.8125rem; margin: 0 0.375rem 0 0; content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjkiIGhlaWdodD0iMjMiIHZpZXdCb3g9IjAgMCAyOSAyMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CjxwYXRoIGQ9Ik0yOSAwSDBWMjNIMjlWMFoiIGZpbGw9InVybCgjcGF0dGVybjApIi8+CjxkZWZzPgo8cGF0dGVybiBpZD0icGF0dGVybjAiIHBhdHRlcm5Db250ZW50VW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiB3aWR0aD0iMSIgaGVpZ2h0PSIxIj4KPHVzZSB4bGluazpocmVmPSIjaW1hZ2UwXzU3N182ODk3IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIC0wLjAwNDE0MDcyKSBzY2FsZSgwLjAxOTIzMDggMC4wMjM4MDk1KSIvPgo8L3BhdHRlcm4+CjxpbWFnZSBpZD0iaW1hZ2UwXzU3N182ODk3IiB3aWR0aD0iNTQiIGhlaWdodD0iMTc2IiB4bGluazpocmVmPSJkYXRhOmltYWdlL3BuZztiYXNlNjQsaVZCT1J3MEtHZ29BQUFBTlNVaEVVZ0FBQURZQUFBQ3dDQU1BQUFCemNtMHFBQUFDK2xCTVZFVkhjRXhJU0VoQ1MwNUJSRTVWVlZWQ1ZWVi9mMzhBQUFCQ1MwOUNTMDQ2VFU1Q1NrNUNTMDVFU0ZKQ1MwNUJTMDVCU2s1Q1MwOUJTazlCUzA0L1QwOUJTazlDU2s1Q1MwNUJTazQvUHo5QlNrNUNTazVBU1U1Q1RFOUJTMHhCU1UxQlMwNUNTazh0TXpkQlMxQkRTazlNVEV4QlRFeEJTazlCU2s1QlNrNUJTazlDUzA5Q1MwNC9Ta3RBU1V3K1NrOEFBQUFqSmlsQlNrOUJTMDVEU2s5Q1NrNUNTazVDUzA5Q1NrNUNTMDRBQUFCQVNrOUJTMDFFUjBjQUFBQU1EZzVDUzA1QlMwNUJTRkFBQVFGQlMwNUNTMDFBVEU0QUFBQkFTMHdBQUFCRVRrNUVSRlU5UjFGQVNrOUJTazlDU2s5QlMwMEFBQUJCU2s1Q1MwNEFBQUFBQUFBQkFRRkFTazR5Tnp0Q1NrNUJTMDVCU2s1Q1NrNC9TVXdEQXdNQUFBQkRURXhDVFUxRFMwOFVHQmdBQUFCQ1NrNC9TRTBLQ3d3WUhSMEdCd2dFQlFVTERRME1EUThJQ0FsQ1MwNUNURThKQ3dzT0R4RWxLaXhCVEV3RkJnWVNGaGNTRlJaQ1NrMDFQRDRhSFI4Q0FnTW9NREpCU2s0VUZ4Z09FQkVORHhBSkNnc1lIU0lnSkNZS0RBd2JJQ0lWR1JvVkZoZ0hCd2tIQndnREF3TWdLU2tYR3hzTURnNHBMakVSRXhNS0Nnc0lDQXN6T2owQkFRSUFBQUFTRkJkQlNrNFBFQkVvajg3MTZ4TW9qczMwNmhQejZSUVBEd0gwNmhROU93VWVhNXNnSHdYdzVoUUZFaHA3ZGdvWFVIUVpXWUdZa3d6bTNCTEh3QkFEQ1EwSkhDZ2pmYlFtaHNFVVNHY2hkS2NLSkRTMHJSQ25vUTFiVndnTkxVQnBaZ3dQTmswY1lvNU5TUVlwanN5ZW1SVG80QmZXemhHS2hBc0tGeDR1TEFRU1Axb2RZWXNuZzd3K1BRL3M0eFlNRUJNeE1SQWFPaGZlMVJXRWZ4QVFMa0VZVDNNQUFBQVFDQWdGREFRK2lqWGlibVB4ZFdwU3QwZE5yVU5TdUVjZ1JSeTFXRkR3ZFdwYUxDZ1JJZzRWTGhKNU96VklvVDRrVVI4cFhDUXRGaFFHQndqRVgxYlNabDE0UERZNGZ6RktKaUswV0ZEVFpsMENBZ01LRXdxbFVFbHBNeTZIUWp3dWFDanZkR296Y3l4UnRFZlBaVndFQlFVOEhSdVhTVUpEbGpvSkN3c3FXeVU1ZkRNZUR3MHVHUmhEa3p0TXFVUjNQRFlhT2hacklRdW9BQUFBbDNSU1RsTUFCNm9MQXdVQ0FhMnNDQjZtRXFtYmpGaElMaENyb1pGVUJIV1pHenN4UXFPZGhtWVdDaVNUb0tpa05uY1lKaFR2bjZlSUtHT0NpbHRSdnpOb0RYQjliMkFqTUlCZVB4QXEzeG9QR1dxWFozbUFQWEpRSUdCTFJIcUViVUZQUUk4NUlVRFFyNVk0cVN2RXBNaG5SbzVOaXBCU1J2Rndta1EvWFBBNGZZaE51L0VaWmZJenNGTzI4ZUVmak9WaWd1TllaTkNmNTRiWnBzSVkxUUFBQ0NKSlJFRlVlRjZVMXZkdkdtY2NCdkJqT2o3MkNOTkFFTmhnd0lCc0F6YXhFZDdnRVR1ZXNoT2JKQ0s3Y2R0VWxUdmNScFdxcWxLSEtwRC9xcGM1dkdmbTNxTzdVdS9PaHcwYzhSM1A3eDk5My90eTkvSkFlT1pDWGdDQU0renJnNmhuTGhoYmZidWNmTEM4c1FOQ2xHRUliQ1JUZUpaM25GM1VWRFMybHlySUV6Qk9TZjJaVEJYbExaVjU0OGlza3F4R3lGbHdJMVdhWkd5U1RFM0draWxDbmdiSldQaEppcGdrS054bTFXRU9tSE01VlNadmZJZUV6V2Jtd3o2UUlGbU9iWnpHRFpQSm9zRndMWVBCYUdmVXdqUVdFM2NnVlpaNVVjUlVzbUNHbEdmc3IrR2dxUmwwRE1BSVBHSmFGRUdJNFRWdzZpUW5MMmw2TDV3OWUwRmpsWFEydE5NdzUzeGMvdGtRTkdEa05HdEh4YTJpSHRkdzIxRGJzS3VsVlNmaFNGbHN4RVZYaVdqbE51aUNwUTJkRXMyVXlIVkd0VGpUNUJFS2haNmxicFZyU2x2RFVDSnNMcFlrcUpVN2tmYUdUcTJ1dGNNL3ZTUTBxUVY2czB3bU0rdlY4bTZET01ERHhuazNDQ29aKzV3ak9hc3dxTnpDaXdLemhkdFl6NmZUNmZ4NnJsbHVVMmlOTUJNZEIvWksxUFBWcTNiTnJFdTFKRmViTFkxOCt2RnFQSFRMcWNVVzZ5REdvUEJPTVh2K2VQZm1CWkhmTFJmSXVIdzZDbzd0cDVvdk00MmcwOWdvNnd1dUZxbFhzVzkwUFRhUFdzWkY1eHpMQnhuR0ZUU2R3WjROUXRNRkhoY2U4YTlidlQwajh3SUx2eGdkNTFzRVFwWEl5a0UzaWNVWFN4NE8rL2ZITHhTcWVUMlhYb3pvalRLMVI5VXlhdWZSMkRpRHZLc0g3RlhzSTUxaFNZMm9ZblJDYjVvWkUvWGFIZnNMd1krNW5HZjNyZ1pteCtReWZsNmhDK1J6WlhwVDA0aWhWVlBucUZVV2ZEN1JON2k2Ly9EN2s2TEZVOXpqMVFlRGtKOUxZR3FhSGhJdGFNL3o0RUlGVGVEalZ0NWNxem5YNHhZMFZ1OGp4TWowcCtabmJHMGlzZFUrT0FBek1WVTZiZzljNGZRYW12VDExZnVETEdhMXZHblI3MUlzV0p0cmVMVXNYQldNZTRDeTFhalVMdllMWlh4OERSZUZibFZieTlTb3RxNmZ4NkRoaUhDbkpNRU5vMFJoTTUzZ28yc1FtRHlML281V25iV1pZNVFpazlpSUlsNlgySTNGNEdnNjNHcExQWUxrU3lORExWTWFTV2Mvci8wRGFQOTdYZG54T1FKVFp6d0NHWXBzQnNWbjZLQ0JXcHFTV1ZVZVlkL3JiV1FoNTFxbTVXcTFmRWxsVUN5Y3ROZndHSER4SU9JcFY1NUdqQUZ4bTN0K0hwMmswOW9Ia1RVb3NVdnVpSUQ3OXo0NXJ4R05kWGZiaGhGVTEwQllRN2xVaGUvRWZwQ0lPL3hqd3lMa2VBMVNHRWNrN0hUc3RWM1QydE9CdkEvTi9RakMxa0NxbURkZVg5ZnFQcDRWbjJ0R0ZvRWpVbFhGK203M3NuVzA5MUtBNDJEUThPT1JNemFyZmZkVGlUWnczdGdPS3pGRWxVVis3ZVJnbTZDRzhFUENVb2REU25oZlNWZkNnbUdZUmpnZnFVUC8vWWlJM0NHcEZQWDV3azRBZ0RjMFZ3a0tnYlh0eEdZbThTSVhEMUtHWGM2MVJCWlBaaHVFcUtseHNKVXR5THQ0bE5xc0Y5bWlaQjVSY1pFY0Nvcm5rWGU4eVhnbVc1cnRJQ2tMUHNzU2tvbFBrbTBSWkxMRWJJVkpPcGR2UFZzbUNTZEo1enE5Vlk1bEFFbm44bTVueXdWTUhOMjVvaDlnSkoyci9MUGRkWkowcmk2d1NVRHBkQzVLMHJtZ3lEWlJaZUxma25RdTlDMGhzTit2a25ZdXlKc3JRZW0vZDc4azcxeGQ0RzR4ZTdsMmkwTG5nbnp4elVMMk12ZnpMSlhPQllYWENtZjk4ZjRYYXAycno3bDk2UDU1OUJQVnpqVWUzeno4eWE1VDdseVE5Nzg4Uzd5K1NiMXpUWUFFUG16OWNnV2RDNHF1NDhNZWZsMUo1NW9BN3pDM2ZxMml6Z1ZGYzZqYUJGY3E2MXh6NkoyUzNncVRkeTdpRFphTy8xWnA1L0t0WmROM3Y2cTRjMDJBelhUdVdzV2RDNG84UzhjblN6clgvKzNZUjNBVFZ4akFjWHJ2dmZmMHR0UWtDeXhGZ0JCOVFSS21TU1FVVnhJYmJHTTdaY0RHWUxndzhRS3FYc21xVnBkN3hVQnNTdktHbkxucHFGeDFFR2RjdENQSnU2TlhUaHo4M2YvejN0c1phWDd6SVppTGZmVmZqTUJjbXJmdjd4R1lhMEwwL3lJQ2M0M05qVlFTbUd0OGRyeU14RnhGY1NKejdYbzRhcTZVVWJIMHNMbGtPQkVIUWc2THoyOXhOQU1hT1ZSVHpUNWRZbnl0Z0VHc2dGT1hNbTBlRGtscVFpVk0wSU53bnB4eTZFWk1HMUJCTXk2a0UwMHpEVDBNV01TWkQzcWMycWFUR0M4RE1SZjNUQ29MMEJCejBVNnB6S0tBbWNzaW1RSElub3R1azh3b2lMbWszK2FnSWVhUytwSUdnNWVCbUV0T09jV1ZKWm9ETXhkckUyVWRvVHlvdWVTVVkyVDF2Q1lMYmk2bEo1aGV2ZWovQThWY25OZWZsbm56a2ZaYzh0cldaR1RvQ053NmpXWXVHYkFrdTJDa0V0VmNyTTJmdkdJcHVya1VBU0Z6RnYrR2JpNjF4NTk0bW0wWGpybm9RT0t3KzFoN0xtWGlPRnNCbnJrVWpzSEtXZkVBejF5TWJmQ09JUmJUWEhJUUhQekh5c0UxRjllcU16aG9iSE1wUFRxRHR3RGZYQ0RvaTk3Qk45Zmx3TCsxQk9aaVF2OFVFWmhMRm4xYVRtS3VXS1NNeEZ5NVZVUjdydHg4SW5NVjVvK2FLMjFrRERzd0dxeEd6aW9BMzJKdjRjMFVwMEt1bEpUVjVkWVBUU05QTVlnVkIzcjB5V2swYzBpVjF0eWdUNTBHcEU0SmhDclpzUWhVcyt0SFRpUGNhcXhWTHg0ZWVrMkZTeUlMQTNsbWM4bUFXeTh4Wm1WbWM2bDc5VkxUem1ZMkY4dExabll1ZzdreVpEUmt6eVdaR1p1MHNEMlhXeHdaVGRZQ3lKNUw0UkpWZGFadzdGdVl1YXppcW8vUGhwdkxKYXJDOGV0UWN6Rm1kMXBtNm5PL3JFWXdWMjE3V2xYZjFmSm9CNEs1VkpROTVZcjFYWjM5NjZEbUVuNXh5U3Mydk51SWFDNXRiMHIyOXlWVWM4a1Z3alhyNmp1ci9rSTNsOWt0ZkJCcktZNjVtaEtacXlZTHcxd2EwRDJjV1V1d3pFWGJoekpYTWJLNWhOY05IVmFJdStkeURXVGhhQTZtdWJTODNsalhsSWUvNStvMm1zd0YrSHV1SGxOakRiNjVHTDYrS1J2ZlhETHcybHBDc09lcWVCUFBJakRYUGVzVEVuTVZ4cXRKekhVM1hrcGlMazJrbk1oY3NUK0p6SFh0OXNkcHJnK2dMSlZySXc3NmJBQUFBQUJKUlU1RXJrSmdnZz09Ii8+CjwvZGVmcz4KPC9zdmc+Cg=="); } .location-finder #storemapper #storemapper-left #storemapper-list li .storemapper-address { color: #00369d; text-decoration: underline; font-weight: 500; font-size: 1rem; line-height: 1.5rem; margin: 0 0 1rem; padding: 0; } .location-finder #storemapper #storemapper-left #storemapper-list li .storemapper-address svg { display: none; } .location-finder #storemapper #storemapper-left #storemapper-list li .storemapper-custom-1 { display: inline-block; font-weight: 400; font-size: 1rem; line-height: 100%; letter-spacing: 0.02em; color: #56637b; padding: 0.5rem 0.75rem; margin: 0 0 1rem; background: #eff1f5; border-radius: 6.25rem; font-family: "bellyswing", Helvetica, Arial, sans-serif; text-transform: uppercase; } .location-finder #storemapper #storemapper-left #storemapper-list li .storemapper-distance { color: #56637b; font-weight: 400; font-size: 1rem; line-height: 1.5rem; } .location-finder #storemapper #storemapper-left #storemapper-list li .storemapper_btn-wrap { padding: 0; width: 100%; border: none; border-radius: 0; display: flex; flex-direction: column; height: auto; } .location-finder #storemapper #storemapper-left #storemapper-list li .storemapper_btn-wrap .storemapper_view { width: 100%; } .location-finder #storemapper #storemapper-left #storemapper-list li .storemapper_btn-wrap .storemapper_view .storemapper-storelink { background: transparent; border: 1px dashed #00369d; color: #fff; white-space: nowrap; height: 3rem; width: 100%; position: relative; margin-bottom: 0.3125rem; top: 4px; left: -4px; border-radius: 6.25rem; transition: all .2s ease; font-size: 1.25rem; line-height: 1.6875rem; text-align: center; letter-spacing: 0.04em; font-weight: 400; } .location-finder #storemapper #storemapper-left #storemapper-list li .storemapper_btn-wrap .storemapper_view .storemapper-storelink::after { content: "View On Map"; background: #00369d; color: #fff; border: 1px solid #00369d; white-space: nowrap; position: absolute; top: -6px; bottom: 4px; left: 3px; right: -5px; border-radius: 6.25rem; transition: all .2s ease; display: inline-flex; flex-flow: row nowrap; justify-content: center; align-items: center; } .location-finder #storemapper #storemapper-left #storemapper-list li .storemapper_btn-wrap .storemapper_view .storemapper-storelink:hover, .location-finder #storemapper #storemapper-left #storemapper-list li .storemapper_btn-wrap .storemapper_view .storemapper-storelink:focus, .location-finder #storemapper #storemapper-left #storemapper-list li .storemapper_btn-wrap .storemapper_view .storemapper-storelink.hover { transform: translate(4px, -5px); color: transparent; } .location-finder #storemapper #storemapper-left #storemapper-list li .storemapper_btn-wrap .storemapper_view .storemapper-storelink:hover::after, .location-finder #storemapper #storemapper-left #storemapper-list li .storemapper_btn-wrap .storemapper_view .storemapper-storelink:focus::after, .location-finder #storemapper #storemapper-left #storemapper-list li .storemapper_btn-wrap .storemapper_view .storemapper-storelink.hover::after { transform: translate(-4px, 5px); background: transparent; color: #00369d; border: 1px dashed transparent; } @media (min-width: 768px) { .location-finder #storemapper #storemapper-left #storemapper-list li .storemapper_btn-wrap .storemapper_view .storemapper-storelink { width: 16rem; margin-left: 0; } } @media (min-width: 992px) { .location-finder #storemapper #storemapper-left #storemapper-list li .storemapper_btn-wrap .storemapper_view .storemapper-storelink { width: 100%; margin-left: auto; } } .location-finder #storemapper #storemapper-left #storemapper-list li .storemapper_btn-wrap .storemapper_directions { width: 100%; margin: 1rem 0 0; } .location-finder #storemapper #storemapper-left #storemapper-list li .storemapper_btn-wrap .storemapper_directions > a { background: transparent; color: #fff; white-space: nowrap; height: 3rem; width: 100%; position: relative; margin-bottom: 0.3125rem; top: 4px; left: -4px; border-radius: 6.25rem; transition: all .2s ease; font-size: 1.25rem; line-height: 1.6875rem; text-align: center; letter-spacing: 0.04em; font-weight: 400; } .location-finder #storemapper #storemapper-left #storemapper-list li .storemapper_btn-wrap .storemapper_directions > a::after { content: "Get Directions"; background: #00369d; color: #fff; border: 1px solid #00369d; white-space: nowrap; position: absolute; top: -6px; bottom: 4px; left: 3px; right: -5px; border-radius: 6.25rem; transition: all .2s ease; display: inline-flex; flex-flow: row nowrap; justify-content: center; align-items: center; } .location-finder #storemapper #storemapper-left #storemapper-list li .storemapper_btn-wrap .storemapper_directions > a:hover, .location-finder #storemapper #storemapper-left #storemapper-list li .storemapper_btn-wrap .storemapper_directions > a:focus, .location-finder #storemapper #storemapper-left #storemapper-list li .storemapper_btn-wrap .storemapper_directions > a.hover { transform: translate(4px, -5px); color: transparent; } .location-finder #storemapper #storemapper-left #storemapper-list li .storemapper_btn-wrap .storemapper_directions > a:hover::after, .location-finder #storemapper #storemapper-left #storemapper-list li .storemapper_btn-wrap .storemapper_directions > a:focus::after, .location-finder #storemapper #storemapper-left #storemapper-list li .storemapper_btn-wrap .storemapper_directions > a.hover::after { transform: translate(-4px, 5px); background: transparent; color: #00369d; border: 1px dashed transparent; } .location-finder #storemapper #storemapper-left #storemapper-list + .storemapper_btn-wrap { border: none; } @media (min-width: 992px) { .location-finder #storemapper #storemapper-left #storemapper-list + .storemapper_btn-wrap { margin-left: calc((100vw - 1400px)/2); } } .location-finder #storemapper #storemapper-right { min-height: 20rem; order: 1; width: 100%; } @media (min-width: 670px) { .location-finder #storemapper #storemapper-right { height: auto; } } @media (min-width: 768px) { .location-finder #storemapper #storemapper-right { order: 2; height: 29.375rem; position: absolute !important; top: 15rem; left: 0; width: 100%; } } @media (min-width: 992px) { .location-finder #storemapper #storemapper-right { height: auto; position: relative !important; top: auto; left: auto; width: 65%; min-height: 48.75rem; } } .location-finder #storemapper #storemapper-right .storemapper-iw:after { height: 1.5rem; width: 1.5rem; border-radius: 0 0 0 4px; } .location-finder #storemapper #storemapper-right .storemapper-iw .storemapper-iw-container { background: #fff; box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.16); border-radius: 8px; padding: 1.5rem !important; } .location-finder #storemapper #storemapper-right .storemapper-iw .storemapper-iw-container .storemapper-popup h4 { margin: 0 0 1rem; color: #001338; font-family: "Futura-PT", Helvetica, Arial, sans-serif; font-weight: 500; font-size: 1.125rem; line-height: 1.6875rem; text-transform: uppercase; } .location-finder #storemapper #storemapper-right .storemapper-iw .storemapper-iw-container .storemapper-popup p { margin: 0 !important; } .location-finder #storemapper #storemapper-right .storemapper-iw .storemapper-iw-container .storemapper-popup p.storemapper-popup-address { margin: 0 0 1rem !important; display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; padding: 0; color: #001338; font-family: "Futura-PT", Helvetica, Arial, sans-serif; font-weight: 400; font-size: 1rem; line-height: 1.5rem; } .location-finder #storemapper #storemapper-right .storemapper-iw .storemapper-iw-container .storemapper-popup p.storemapper-popup-address:before { content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAxOCAyMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik04Ljk5OTg0IDAuNDQxODY0QzQuNDk2OTYgMC40NDE4NjQgMC44Mzk4NDQgNC4xMzU3IDAuODM5ODQ0IDguNjY5M0MwLjgzOTg0NCAxMS43ODM4IDIuMjE2MSAxMy4zMTU1IDMuODA5ODQgMTQuNzk2N0M1LjQwMzU5IDE2LjI3OCA3LjIyNzkyIDE3Ljc5MTIgOC41NDk4NCAyMS4yNTQyQzguNjIyMDMgMjEuNDM3IDguNzk5MjMgMjEuNTU3IDguOTk2MSAyMS41NTdDOS4xOTI5NyAyMS41NTcgOS4zNzAxNiAyMS40MzcgOS40NDIzNiAyMS4yNTQyQzEwLjc2NDIgMTcuNzkxIDEyLjU4ODUgMTYuMjc4IDE0LjE4MjQgMTQuNzk2N0MxNS43NzYxIDEzLjMxNTUgMTcuMTU5OCAxMS43ODM1IDE3LjE1OTggOC42NjkzQzE3LjE1OTggNC4xMzU0NiAxMy41MDQ2IDAuNDQxODY0IDguOTk5OCAwLjQ0MTg2NEg4Ljk5OTg0Wk04Ljk5OTg0IDUuOTAxODZDMTAuNTg1MiA1LjkwMTg2IDExLjg3OTggNy4xOTY1NCAxMS44Nzk4IDguNzgxODdDMTEuODc5OCAxMC4zNjUzIDEwLjU4NjEgMTEuNjYxOSA4Ljk5OTg0IDExLjY2MTlDNy40MTU0NiAxMS42NjE5IDYuMTE5ODQgMTAuMzY2MiA2LjExOTg0IDguNzgxODdDNi4xMTk4NCA3LjE5NTYxIDcuNDE2NCA1LjkwMTg2IDguOTk5ODQgNS45MDE4NloiIGZpbGw9IiMwMDM2OUQiLz4KPC9zdmc+Cg=="); display: block; margin: 0 0.75rem 0 0; } .location-finder #storemapper #storemapper-right .storemapper-iw .storemapper-iw-container .storemapper-popup p.storemapper-popup-address svg { display: none; } .location-finder #storemapper #storemapper-right .storemapper-iw .storemapper-iw-container .storemapper-popup p .storemapper-map-directions { margin: 0; background: #fff; color: #00369d; border: 1px dashed #00369d; border-radius: 2.25rem; transition: all .2s ease; letter-spacing: 0.02em; font-size: 1rem; height: 2.25rem; line-height: 2.25rem; padding: 0 1.5rem; font-family: "bellyswing", Helvetica, Arial, sans-serif; text-transform: uppercase; } .location-finder #storemapper #storemapper-right .storemapper-iw .storemapper-iw-container .storemapper-popup p .storemapper-map-directions:hover, .location-finder #storemapper #storemapper-right .storemapper-iw .storemapper-iw-container .storemapper-popup p .storemapper-map-directions:focus, .location-finder #storemapper #storemapper-right .storemapper-iw .storemapper-iw-container .storemapper-popup p .storemapper-map-directions.hover { background: #00369d; color: #fff; } .location-finder.us #storemapper #storemapper-left #storemapper-form .storemapper-form-inner .storemapper-dropdown.storemapper-categories #storemapper-filter-wrapper .storemapper-dropdown-menu li { order: 2; } .location-finder.us #storemapper #storemapper-left #storemapper-form .storemapper-form-inner .storemapper-dropdown.storemapper-categories #storemapper-filter-wrapper .storemapper-dropdown-menu li:first-child { order: 0; } .location-finder.us #storemapper #storemapper-left #storemapper-form .storemapper-form-inner .storemapper-dropdown.storemapper-categories #storemapper-filter-wrapper .storemapper-dropdown-menu li:nth-child(4) { order: 1; } .location-finder.us #storemapper #storemapper-left #storemapper-form .storemapper-form-inner .storemapper-dropdown.storemapper-categories #storemapper-filter-wrapper .storemapper-dropdown-menu li:last-child { display: none; } /* -------------------------------------------------------------------------- *\ PAGE COMPONENTS \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ PAGE - LAYOUT \* -------------------------------------------------------------------------- */ @media (min-width: 768px) { section.w-nav .container { display: grid; grid-template-columns: 1fr; column-gap: 1.5rem; } } @media (min-width: 992px) { section.w-nav .container { column-gap: 2rem; } } .contact-us .container { display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 768px) { .contact-us .container { grid-template-columns: 2fr 1fr; } } .contact-us p { margin-bottom: 2rem; } .contact-us aside div { background-color: #f5f7f9; border-radius: 0.5rem; padding: 2rem; } .email-club .form-input { border-color: #56637b; } /* -------------------------------------------------------------------------- *\ PAGE - NAV - INTERIOR \* -------------------------------------------------------------------------- */ nav.int { padding: 0 0 2rem 0; } nav.int ul { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: center; align-items: center; flex-flow: column nowrap; } nav.int ul li { padding: 0.8125rem 0; margin: 0 0.75rem; border-bottom: 1px solid #b4bcca; width: 100%; text-align: center; } @media (min-width: 992px) { nav.int ul li { margin: 0 2rem; } } nav.int ul li:last-of-type { border: 0; } @media (min-width: 576px) { nav.int ul { flex-direction: row; } nav.int ul li { padding: 0; text-align: auto; width: auto; border: 0; } } nav.int a { display: block; color: #001338; font-weight: bold; text-decoration: none; } nav.int a:hover, nav.int a:focus, nav.int a.hover { color: #00369d; } #modal-review-form .modal-header-title { color: #001338; } .writeReview-productDetails .product-title { margin-top: 0; } @media (max-width: 991.9px) { .writeReview-productDetails .product-title { font-size: 1rem; } } .writeReview-productDetails .product-brand { display: none; } .writeReview-productDetails .writeReview-form form, .writeReview-productDetails .writeReview-form fieldset { padding-top: 0; } .writeReview-productDetails .writeReview-form small { color: #00369d; } .writeReview-productDetails .writeReview-productImage-container { grid-column: span 4; text-align: center; } @media (min-width: 768px) { .writeReview-productDetails .writeReview-productImage-container { grid-column: span 4; text-align: left; } } @media (min-width: 992px) { .writeReview-productDetails .writeReview-productImage-container { grid-column: span 5; } } .writeReview-productDetails .writeReview-productImage-container img { width: 50%; } @media (min-width: 768px) { .writeReview-productDetails .writeReview-productImage-container img { width: 80%; } } .writeReview-productDetails .writeReview-productInfo { grid-column: span 4; } @media (min-width: 768px) { .writeReview-productDetails .writeReview-productInfo { grid-column: span 4; } } @media (min-width: 992px) { .writeReview-productDetails .writeReview-productInfo { grid-column: span 7; } } .writeReview-productDetails .writeReview-productInfo .g-recaptcha > div { margin: 0; margin-top: 1rem; } .writeReview-productDetails .writeReview-productInfo .form-field--submit { margin-top: -0.625rem; } .writeReview-productDetails .writeReview-productInfo textarea { margin-top: 0.5rem; } .writeReview-productDetails .writeReview-productInfo select { max-width: none; margin: 0.5rem 0 1rem; } .writeReview-productDetails .cta-wrapper { margin-top: 2rem; } @media (min-width: 992px) { .writeReview-productDetails .cta-wrapper { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: start; align-items: center; flex-flow: row; column-gap: 1rem; } .writeReview-productDetails .cta-wrapper .g-recaptcha { flex: 1; } .writeReview-productDetails .cta-wrapper .cta-btn { flex: 2; } } .productReviews h4 { color: #00369d; } .productReviews #productReviews-content { border: 0.0625rem solid #b4bcca; border-radius: 0.25rem; } .productReviews .productReviews-list { padding: 0 1.5rem; } .productReviews .productReviews-list .productReview { margin: 0; padding: 1.5rem 0; } .productReviews .productReviews-list .productReview:not(:first-child) { border-top: 0.0625rem solid #b4bcca; } .productReviews .productReviews-list .productReview .productReview-title { margin-bottom: 0.5rem; } .productReviews .productReviews-list .productReview .rating-wrapper { margin-bottom: 1.5rem; } /* -------------------------------------------------------------------------- *\ PAGE - LAYOUT \* -------------------------------------------------------------------------- */ .int-licensee { margin: 1.5rem 0 0; } @media (min-width: 768px) { .int-licensee { margin: 2rem 0 0; } } .int-licensee .world-map { position: relative; } .int-licensee .world-map .map-container svg { width: 100%; height: auto; } @media (min-width: 768px) { .int-licensee .world-map .map-info { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; } } .int-licensee .world-map .map-info .country img { max-width: 100%; } @media (min-width: 768px) { .int-licensee .world-map .map-info .country { position: absolute; width: 1.36rem; height: 1.75937rem; display: block; overflow: visible; z-index: 0; } .int-licensee .world-map .map-info .country:hover, .int-licensee .world-map .map-info .country:focus, .int-licensee .world-map .map-info .country.hover { z-index: 1; } .int-licensee .world-map .map-info .country:hover label, .int-licensee .world-map .map-info .country:focus label, .int-licensee .world-map .map-info .country.hover label { opacity: 1; visibility: visible; } .int-licensee .world-map .map-info .country:hover .map-pin, .int-licensee .world-map .map-info .country:focus .map-pin, .int-licensee .world-map .map-info .country.hover .map-pin { transform: scale(1.4); } .int-licensee .world-map .map-info .country:hover .info, .int-licensee .world-map .map-info .country:focus .info, .int-licensee .world-map .map-info .country.hover .info { opacity: 1; visibility: visible; padding-top: 4.125rem; } .int-licensee .world-map .map-info .country:hover .info:before, .int-licensee .world-map .map-info .country:focus .info:before, .int-licensee .world-map .map-info .country.hover .info:before { top: 3.125rem; } .int-licensee .world-map .map-info .country.country-sk { top: 38.7%; left: 81.1%; } .int-licensee .world-map .map-info .country.country-sk label { min-width: 5.625rem; } .int-licensee .world-map .map-info .country.country-ph { top: 55.5%; left: 80.2%; } .int-licensee .world-map .map-info .country.country-ph label { min-width: 4.875rem; } .int-licensee .world-map .map-info .country.country-ja { top: 33.6%; left: 85.3%; } .int-licensee .world-map .map-info .country.country-ja label { min-width: 3.5rem; } .int-licensee .world-map .map-info .country.country-au { top: 75.5%; left: 83.2%; } .int-licensee .world-map .map-info .country.country-au label { min-width: 4.6875rem; } .int-licensee .world-map .map-info .country.country-us { top: 35%; left: 20%; } .int-licensee .world-map .map-info .country.country-us label { min-width: 5.75rem; } .int-licensee .world-map .map-info .country.country-ca { top: 21%; left: 12%; } .int-licensee .world-map .map-info .country.country-ca label { min-width: 4.25rem; } .int-licensee .world-map .map-info .country.country-vi { top: 53.75%; left: 75.15%; } .int-licensee .world-map .map-info .country.country-vi label { min-width: 4.25rem; } .int-licensee .world-map .map-info .country.country-ch { top: 36.5%; left: 70%; } .int-licensee .world-map .map-info .country.country-ch label { min-width: 3.625rem; } } @media (min-width: 992px) { .int-licensee .world-map .map-info .country { width: 1.7rem; height: 2.19937rem; } } .int-licensee .world-map .map-info .country .map-pin { display: none; width: 100%; height: 100%; transition: all .2s ease; z-index: 1; position: relative; } @media (min-width: 768px) { .int-licensee .world-map .map-info .country .map-pin { display: block; } } .int-licensee .world-map .map-info .country .map-pin svg { width: 100%; height: 100%; } .int-licensee .world-map .map-info .country label { font-weight: 500; font-size: 1.125rem; line-height: 1.6875rem; text-transform: uppercase; color: #001338; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; width: 100%; padding: 0.375rem 0; } .int-licensee .world-map .map-info .country label:after { content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxMiAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEuODc2OTcgMC4yMjEyMzlDMS43ODE0IDAuMzc3NiAxLjc4NTA4IDAuNjE3MDI4IDEuOTY1MTkgMC45ODgzODZDMi40MDk5NCAxLjc5MDYxIDIuOTE3NTkgMi41Mjc3IDMuNDc5NTkgMy4xODcyMUM0LjU0MTg4IDQuNTk0NDYgOS4xOTI3NiA3LjAwMTAxIDcuMTU1MzMgOC4yNTkxN0M3LjA1MjQxIDguMzI3NTggMi41Mjc1OCAxMC44ODMxIDIuMDA5MyAxMS4yMjUxQzEuNDY2NyAxMS41MTE3IDAuOTQ2MDM3IDExLjg2NjcgMC40NTQ0NjMgMTIuMjg1NUMwLjAxNzA1MDEgMTIuNzM5OSAtMC4yOTE3MTIgMTMuNzk1MyAwLjQzNjA4NCAxMy45NjE1QzEuMjUyMSAxNC4xNDcxIDIuMjczOTUgMTMuNjE5NCAzLjAzODUxIDEzLjI4MjNDNS4xOTI0OSAxMi4zMDUgNy4yNDcyMyAxMS4wNDkyIDkuMzU3MSA5Ljk1NDcxQzEwLjAxMzcgOS42MzE1IDEwLjY0NzIgOS4yMzA4NiAxMS4yNTAxIDguNzU3NTdDMTEuOTYzMiA4LjEzNzAyIDEyLjI5NzcgNy40NzczNyAxMS42NjU1IDYuNzY4ODZDMTEuMTEwNCA2LjE0MzQxIDEwLjI0NjYgNS43MjMxOSA5LjYwNzA1IDUuMjczNjVDOC40NDM0MSA0LjUyMTgzIDcuMzI0MDQgMy42NTQ1IDYuMjU4NDUgMi42NzkwNEM1LjI0MDI3IDEuNzAxNzggNC4yNDc4MiAwLjU0MzczNCAyLjk5ODA3IDAuMTAzOTY5QzIuNjIzMTUgLTAuMDMyODQ3NCAyLjA2NDQ0IC0wLjA3MTkzNzYgMS44NzY5NyAwLjIyMTIzOVoiIGZpbGw9IiMwMDM2OUQiLz4KPC9zdmc+Cg=="); transition: all .2s ease; } @media (min-width: 768px) { .int-licensee .world-map .map-info .country label { display: block; opacity: 0; visibility: hidden; transition: all .2s ease; position: absolute; top: auto; left: 50%; right: auto; bottom: calc(100% + 4px); transform: translate(-50%, 0); color: #fff; font-size: 0.625rem; line-height: 1.125rem; padding: 0.125rem 0.75rem; background: #d55294; border: 1px solid #f5f7f9; border-radius: 4px; z-index: 2; } .int-licensee .world-map .map-info .country label:after { display: none; } } .int-licensee .world-map .map-info .country input:checked ~ .info { display: block; } .int-licensee .world-map .map-info .country input:checked ~ label:after { transform: rotate(90deg); } .int-licensee .world-map .map-info .country .info { text-align: left; padding: 0.125rem 0 1rem; display: none; } @media (min-width: 768px) { .int-licensee .world-map .map-info .country .info { width: 18.5rem; position: absolute; padding: 1rem; padding-top: 2.875rem; top: 0; left: 50%; transform: translate(-50%, 0); display: block; opacity: 0; visibility: hidden; transition: all .2s ease; z-index: 0; background: transparent; } .int-licensee .world-map .map-info .country .info:before { content: ""; transition: all .2s ease; display: block; background: #fff; position: absolute; top: 1.875rem; right: 0; bottom: 0; left: 0; box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.08); border-radius: 8px; width: 100%; z-index: -1; } } .int-licensee .world-map .map-info .country .info p { font-weight: 400; font-size: 0.875rem; line-height: 1.3125rem; color: #001338; margin: 0 0 1rem; } .int-licensee .world-map .map-info .country .info a.text-link { color: #00369d; font-weight: 500; font-size: 1rem; line-height: 1.5rem; display: block; margin: 0 0 1rem; } /* -------------------------------------------------------------------------- *\ SEARCH LAYOUT OPTIONS: @import 'components/search/grid'; @import 'components/search/list'; \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ SEARCH - GRID \* -------------------------------------------------------------------------- */ .feeds-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; column-gap: 1rem; row-gap: 4rem; } @media (min-width: 768px) { .feeds-grid { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 992px) { .feeds-grid { column-gap: 1.5rem; row-gap: 4rem; } } .feeds-grid.nutrition-grid { margin: 0 0 5rem; } .feeds-grid.nutrition-grid:last-of-type { margin: 0; } /* -------------------------------------------------------------------------- *\ SEARCH COMPONENTS \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ SEARCH - ACTION BAR \* -------------------------------------------------------------------------- */ .action-bar { font-size: 0.875rem; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: flex-end; align-items: center; flex-flow: row nowrap; width: 100%; margin: 0; } .action-bar .form-el { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; gap: 1rem; } @media (min-width: 768px) { .action-bar .form-el { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: center; align-items: center; flex-flow: row nowrap; gap: 0.875rem; } } .action-bar .form-el:only-child { margin: 0; } .action-bar select { font-size: 1em; } .action-bar label { margin: 0 0.5rem 0 0; font-weight: bold; white-space: nowrap; } /* -------------------------------------------------------------------------- *\ SEARCH - FACETS \* -------------------------------------------------------------------------- */ #facetedSearch { z-index: 1001; padding-bottom: 1.875rem; } @media (min-width: 768px) { #facetedSearch { padding-bottom: 0; } } #facetedSearch .accordion dt button { background-color: #fff; border: 1px solid #b4bcca; padding: 0.8125rem 1rem; transition: .25s all ease-in-out; } #facetedSearch .accordion dt button:hover { border-color: #00369d; } #facetedSearch .accordion dt button span { color: #00369d; font-size: 0.75rem; } #facetedSearch .accordion dt button[aria-expanded="true"] span { transform: rotate(180deg); color: #b4bcca; } #facetedSearch .selected { display: flex; z-index: -1; position: relative; } #facetedSearch .selected a.item { font-family: "bellyswing", Helvetica, Arial, sans-serif; text-transform: uppercase; padding: 0.375rem 0.75rem; margin-right: 0.625rem; margin-bottom: 0.375rem; background-color: #eff1f5; color: #00369d; border-radius: 6.25rem; text-decoration: none; } #facetedSearch .selected a.item:hover, #facetedSearch .selected a.item:focus, #facetedSearch .selected a.item.hover { color: #eff1f5; background-color: #00369d; } #facetedSearch .selected a.item:hover span, #facetedSearch .selected a.item:focus span, #facetedSearch .selected a.item.hover span { color: #fff; } #facetedSearch .selected a.item span { padding: 0 0 0 1rem; color: #00369d; font-weight: bold; } #facetedSearch dl { display: flex; grid-template-columns: 1fr; gap: 1rem; text-align: left; align-items: start; flex-direction: column; /* ---------------------------------------------------------------------- *\ Import styling specific to facet types. @import 'facets/multi'; // USED FOR BOTH MULTI AND HEIRARCHIAL FILTERS @import 'facets/range'; // USED FOR RANGE FILTERS @import 'facets/ratings'; // USED FOR RATINGS FILTERS \* ---------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ SEARCH - FACETS - MULTI \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ SEARCH - FACETS - RANGE \* -------------------------------------------------------------------------- */ } @media (min-width: 992px) { #facetedSearch dl { gap: 1.5rem; } } #facetedSearch dl div { position: relative; width: 100%; white-space: nowrap; } #facetedSearch dl div:nth-child(1) { flex-shrink: 2; } @media (max-width: 991.9px) { #facetedSearch dl div.filter-by-header, #facetedSearch dl div.filter-sort label { border: 1px solid #00369d; background: #00369d; color: white; padding: 0.5rem 1rem; border-radius: 100px; width: fit-content; margin: 0; text-align: left; justify-self: start; } } @media (max-width: 991.9px) { #facetedSearch dl div.filter-sort { position: absolute; left: 6.25rem; top: 0; } #facetedSearch dl div.filter-sort .form-el { justify-content: start; } #facetedSearch dl div.filter-sort select { position: absolute; bottom: -3.75rem; left: -6.25rem; } } #facetedSearch dl div.filter-item.custom-mix { display: none !important; } @media (max-width: 991.9px) { #facetedSearch dl div.filter-item, #facetedSearch dl div.filter-sort select { display: none; } } #facetedSearch dl div.filter-item.show, #facetedSearch dl div.filter-sort select.show { display: block !important; } #facetedSearch dl dt button { border-radius: 0.25rem; color: #56637b; } #facetedSearch dl dd { width: 100%; background-color: #fff; border: 1px solid #b4bcca; border-radius: 0.25rem; } #facetedSearch dl dd ul, #facetedSearch dl dd li { padding: 0 !important; margin: 0 !important; } #facetedSearch dl dd li { padding: 10px !important; } @media (min-width: 992px) { #facetedSearch dl { flex-direction: row; } #facetedSearch dl dd { position: absolute; z-index: 10; } } #facetedSearch dl ul { padding: 0.25rem 0 0 0.5rem; } #facetedSearch dl li { padding: 0; } #facetedSearch dl li:before { display: none; } #facetedSearch dl li + li { margin: 0.5rem 0 0; } #facetedSearch dl a { display: block; line-height: 1; position: relative; color: #001338; } #facetedSearch dl a:hover, #facetedSearch dl a:focus, #facetedSearch dl a.hover { text-decoration: none; color: #00369d; } #facetedSearch dl a:hover:before, #facetedSearch dl a:focus:before, #facetedSearch dl a.hover:before { background-color: #00369d; } #facetedSearch dl a:active:after, #facetedSearch dl a:focus:after { display: block; } #facetedSearch dl a:before { position: relative; top: 0.1875rem; display: none; height: 1rem; width: 1rem; border: 0.0625rem solid #001338; content: ""; margin-right: 0.25rem; border-radius: 0.25rem; } #facetedSearch dl a:after { display: none; position: absolute; left: 0.5625rem; top: 0.625rem; -webkit-transform: translate(-50%, -50%) rotate(-45deg); -ms-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg); height: 0.25rem; width: 0.625rem; border-left: 0.125rem solid #fff; border-bottom: 0.125rem solid #fff; content: ""; } #facetedSearch dl a.is-active:after { display: block; } #facetedSearch dl a.is-active:before { border-color: #00369d; background-color: #00369d; } #facetedSearch dl a[rel=nofollow]:before { display: inline-block; } #facetedSearch dl .form-fieldset { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: space-between; align-items: stretch; flex-flow: row nowrap; gap: 10px; } #facetedSearch dl .form-fieldset input { padding: 0.375rem; border-radius: 0.25rem; } #facetedSearch dl .form-fieldset [class*="btn-"] { padding: 0.3125rem 0.375rem; font-size: 0.875rem; } /* -------------------------------------------------------------------------- *\ SEARCH - HERO \* -------------------------------------------------------------------------- */ main > header.search h1 { margin: 0 0 1rem; } @media (min-width: 768px) { main > header.search h1 { margin: 0 0 1.25rem; } } @media (min-width: 992px) { main > header.search h1 { margin: 0 0 1.5rem; } } main > header.search .form-el { border: 0.0625rem solid #56637b; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: flex-start; align-items: stretch; flex-flow: row nowrap; max-width: 34.375rem; } main > header.search .form-el input { padding: 0.5rem 0.75rem; border: none; font-size: 1.25rem; } main > header.search .form-el button { padding: 0.5rem; font-size: 1.25rem; } /* -------------------------------------------------------------------------- *\ SEARCH - LAYOUT \* -------------------------------------------------------------------------- */ @media (min-width: 768px) { .layout-search { display: grid; grid-template-columns: 1fr 3fr; grid-template-rows: auto; column-gap: 2rem; row-gap: 2rem; } .layout-search aside nav { position: relative; position: -webkit-sticky; position: sticky; } @supports (position: -webkit-sticky) { .layout-search aside nav { top: 7.75rem; } } @supports (position: sticky) { .layout-search aside nav { top: 7.75rem; } } } /* -------------------------------------------------------------------------- *\ SEARCH - SEARCH \* -------------------------------------------------------------------------- */ .search .form-el > div { border: 0.0625rem solid #b4bcca; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: space-between; align-items: stretch; align-content: stretch; flex-flow: row wrap; max-width: 34.375rem; } .search .form-el input { border: none; width: calc(100% - 2.5rem); } .search .form-el button { width: 2.5rem; height: 2.5rem; } /* -------------------------------------------------------------------------- *\ SEARCH - FACETS - SELECTED \* -------------------------------------------------------------------------- */ dl.selected.facets { font-size: 0.875rem; } dl.selected.facets ul { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: row wrap; } dl.selected.facets ul li { margin: 0.25rem; padding: 0; } dl.selected.facets ul li a { padding: 0; } dl.selected.facets ul li a:before { content: "\00d7"; position: static; margin: 0 0.25rem; transform: none; display: inline-block; border-radius: 100%; border: 0.0625rem solid #00369d; width: 0.75rem; height: 0.75rem; line-height: 0.8125rem; text-indent: 0; font-size: 0.875rem; text-align: center; color: #00369d; background: #fff; } dl.selected.facets ul li a:after { display: none; } dl.selected.facets ul + [class*="btn-"] { display: inline-block; width: auto; } dl.selected.facets ul + [class*="btn-"]:before, dl.selected.facets ul + [class*="btn-"]:after { display: none; } /* -------------------------------------------------------------------------- *\ SITEMAP COMPONENTS \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ SITEMAP - LAYOUT \* -------------------------------------------------------------------------- */ @media (min-width: 768px) { .sitemap > ul { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: space-between; align-items: stretch; flex-flow: row nowrap; margin: 0 -1rem; } .sitemap > ul > li { margin: 0 1rem; width: calc(33.333% - 2rem); } } .sitemap > ul ul li + li { margin: 0.5rem 0 0; } .sitemap > ul ul ul { margin: 0 0 0 0.5rem; padding: 0.5rem 0 0; } @media (min-width: 768px) { .sitemap > ul ul ul { margin: 0 0 0 1rem; } } @media (min-width: 992px) { .sitemap > ul ul ul { margin: 0 0 0 1.5rem; } } /* -------------------------------------------------------------------------- *\ ACCOUNT COMPONENTS \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ ACCOUNT - BASE - TOP - NAV \* -------------------------------------------------------------------------- */ nav { margin: 0 !important; } nav.account { padding: 2rem 0; } nav.account ul { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: center; align-items: center; flex-flow: column nowrap; } nav.account ul li { padding: 0.8125rem 0; margin: 0 0.75rem; border-bottom: 1px solid #b4bcca; width: 100%; text-align: center; } @media (min-width: 992px) { nav.account ul li { margin: 0 2rem; } } nav.account ul li:last-of-type { border: 2px solid fuchsia; border: 0; } @media (min-width: 576px) { nav.account ul { flex-direction: row; } nav.account ul li { padding: 0; text-align: auto; width: auto; border: 0; } } nav.account .is-active a { color: #00369d; } nav.account a { display: block; color: #001338; font-weight: bold; text-decoration: none; } nav.account a:hover, nav.account a:focus, nav.account a.hover { color: #00369d; } /* -------------------------------------------------------------------------- *\ ACCOUNT - BASE - VERTICAL - LAYOUT \* -------------------------------------------------------------------------- */ [class^="page-type-account"] > main, [class^="page-type-editaccount"] > main, [class^="page-type-shippingaddressform"] > main, [class^="page-type-wishlist"] > main { background-color: #f5f7f9; } .account { /* -------------------------------------------------------------------------- *\ ACCOUNT - ORDERS - LIST ORDERS \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ ACCOUNT - ORDERS - CARD \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ ACCOUNT - ORDERS - TOTALS \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ ACCOUNT - ORDERS - DETAIL \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ ACCOUNT - MESSAGES - LIST \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ ACCOUNT - ADDRESSES \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ ACCOUNT - SETTINGS - FORMS \* -------------------------------------------------------------------------- */ } .account .feed-orders { display: grid; grid-template-columns: 1fr; grid-template-rows: auto; row-gap: 1rem; column-gap: 1rem; } @media (min-width: 768px) { .account .feed-orders { grid-template-columns: 1fr 1fr 1fr; } } .account .feed-contents { padding-bottom: 2rem; } .account .order-card { box-shadow: 0 0px 12px rgba(0, 0, 0, 0.08); padding: 1rem; border-radius: 0.5rem; } .account .order-card .img picture, .account .order-card .img img { width: 100%; height: auto; } .account .order-card .cnt { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; } .account .order-card .cnt > * { order: 1; } .account .order-card .cnt h4 { order: 0; text-transform: none; padding: 0.125rem 0.375rem; width: 100%; text-align: center; background: #f5f7f9; border-radius: 0.625rem; color: #001338; font-size: 1rem; } .account .order-card h3 { padding-top: 1rem; } .account .order-card dl { width: 100%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: row wrap; } .account .order-card dt { width: 50%; margin: 0; } .account .order-card dd { width: 50%; margin: 0; } .account .order-card.img-side { display: grid; grid-template-columns: 1fr 3fr; row-gap: 1rem; column-gap: 2rem; } .account .order-card.img-side dl { max-width: 9.375rem; } .account .order-totals { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; row-gap: 1rem; text-align: left; } .account .order-totals dt { margin: 0; } .account .order-totals dd { padding: 0; text-align: right; } .account aside dl { display: grid; grid-template-columns: 1fr 1.5fr; grid-template-rows: auto; row-gap: 0.5rem; column-gap: 0.5rem; } .account table.messages { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .account table.messages th, .account table.messages td { padding: 0.5rem 1rem; } .account table.messages th:nth-child(1) { width: 8.333%; } .account table.messages th:nth-child(2) { width: 25%; } .account table.messages th:nth-child(3) { text-align: left; } .account table.messages td:nth-child(1), .account table.messages td:nth-child(2) { text-align: center; } .account table.messages td:only-child { text-align: left; } .account table.messages tr:nth-child(4n + 3) td, .account table.messages tr:nth-child(4n + 4) td { background: #f5f7f9; } .account table.messages h3 { font-size: 1em; font-weight: bold; margin: 0; } .account .address-card { box-shadow: 0 0px 12px rgba(0, 0, 0, 0.08); padding: 1rem; border-radius: 0.5rem; } .account .address-card address { margin: 0 0 0.5rem; } .account .address-card dl { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: flex-start; align-items: center; flex-flow: row wrap; } .account .feed-addresses { display: grid; grid-template-columns: 1fr; grid-template-rows: auto; row-gap: 1rem; column-gap: 1rem; margin: 0 0 2rem; } @media (min-width: 768px) { .account .feed-addresses { grid-template-columns: 1fr 1fr; } } .account #FormField_32 { display: none; } .account form.form-rows .form-el[data-type*="Address"] { width: 100%; } .account form.form-rows .form-el[data-type*="Password"] { width: calc(33.333% - 1.5rem); } .account .form-actions { justify-content: center; } .account h2 { font-size: 1.875rem; } .account .form-actions .btn-primary { margin-right: 1rem; } .account { padding: 0 2rem; } .account .container { background-color: #fff; border-radius: 0.5rem; padding-bottom: 2rem; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: space-between; align-items: stretch; flex-flow: column nowrap; } .account .container > nav { order: 0; margin: 0 0 1.5rem; grid-area: nav; } .account .container > .cnt { order: 1; grid-area: content; } .account .container.w-aside { display: grid; grid-template-areas: 'nav' 'content' 'aside'; grid-template-columns: 1fr; row-gap: 2rem; } @media (min-width: 768px) { .account .container.w-aside { grid-template-areas: 'nav nav' 'aside content'; grid-template-columns: 1fr 1fr; column-gap: 5rem; row-gap: 0; } } .account .container.w-aside > .cnt h2 { border-bottom: 1px solid #b4bcca; } .account .container.w-aside > aside { grid-area: aside; } .account .container.w-aside > aside h2 { border-bottom: 1px solid #b4bcca; } /* -------------------------------------------------------------------------- *\ WIDGETS This loads all widget styling on the website. \* -------------------------------------------------------------------------- */ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated-loading { animation-duration: 2.2s; animation-fill-mode: forwards; animation-iteration-count: infinite; animation-name: shimmer; animation-timing-function: linear; background: #fafafa; background: linear-gradient(to right, #fafafa 4%, #f6f6f6 25%, #fafafa 36%); background-size: 1200px 100%; } @keyframes load-ani { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes load-ani { 100% { -webkit-transform: rotate(360deg); } } @-webkit-keyframes progress-bar-stripes { from { background-position: 0 0; } to { background-position: 40px 0; } } @-moz-keyframes progress-bar-stripes { from { background-position: 0 0; } to { background-position: 40px 0; } } @keyframes progress-bar-stripes { from { background-position: 0 0; } to { background-position: 40px 0; } } @-webkit-keyframes load-animate { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); opacity: .35; } 100% { transform: rotate(360deg); } } @keyframes load-animate { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); opacity: .35; } 100% { transform: rotate(360deg); } } @-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, var(--animationDistance), 0); transform: translate3d(0, var(--animationDistance), 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, var(--animationDistance), 0); transform: translate3d(0, var(--animationDistance), 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, var(--animationDistance), 0); transform: translate3d(0, var(--animationDistance), 0); } } @-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, var(--animationDistance), 0); transform: translate3d(0, var(--animationDistance), 0); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes zoom-animation { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.5, 1.5, 1); transform: scale3d(1.5, 1.5, 1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes zoom-animation { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.5, 1.5, 1); transform: scale3d(1.5, 1.5, 1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @-webkit-keyframes movingUp { 0% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); visibility: visible; } 50% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 100% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); visibility: visible; } } @keyframes movingUp { 0% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); visibility: visible; } 50% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 100% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); visibility: visible; } } @-webkit-keyframes moveUp { 0% { -webkit-transform: translateY(20px); transform: translateY(20px); } to { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes moveUp { 0% { -webkit-transform: translateY(20px); transform: translateY(20px); } to { -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes moveOut { 0% { -webkit-transform: translateY(0); transform: translateY(0); } to { -webkit-transform: translateY(20px); transform: translateY(20px); } } @keyframes moveOut { 0% { -webkit-transform: translateY(0); transform: translateY(0); } to { -webkit-transform: translateY(20px); transform: translateY(20px); } } /* -------------------------------------------------------------------------- */ /* HOMEPAGE HERO CAROUSEL */ /* -------------------------------------------------------------------------- */ .homepage-hero { position: relative; margin-top: 0; --animationDistance: 10px; } .homepage-hero .slick-initialized .slick-slide { display: flex; } .homepage-hero .slick-slider { margin: 0; width: 100%; } .homepage-hero .slick-list { padding: 0; } .homepage-hero h1 { transition: all .3s ease; margin-top: 1.5rem; } @media (max-width: 991.9px) { .homepage-hero h1 { color: #00369d !important; } } @media (min-width: 992px) { .homepage-hero h1 { margin-top: 7.375rem; } } @media (min-width: 1200px) { .homepage-hero h1 { margin-top: 16.25rem; } } .homepage-hero p { transition: all .3s ease; font-size: 1.125rem; line-height: 1.6875rem; } @media (max-width: 991.9px) { .homepage-hero p { color: #001338 !important; } } .homepage-hero .slick-slide div { visibility: hidden; animation-delay: 0ms; animation-name: fadeOutDown; animation-duration: 1.3s; } .homepage-hero .slick-current div { visibility: visible; animation-delay: 50ms; animation-name: fadeInUp; } .homepage-hero .white-wave { display: block; position: absolute; pointer-events: none; z-index: 1; top: 7.5625rem; bottom: auto; height: 5rem; width: 100%; } @media (min-width: 992px) { .homepage-hero .white-wave { bottom: 0.5rem; top: auto; height: 9.5625rem; } } .homepage-hero .white-wave img { width: 100%; height: 5rem; -webkit-user-drag: none; } @media (min-width: 992px) { .homepage-hero .white-wave img { height: 9.5625rem; } } @media (min-width: 992px) { .homepage-hero .container { display: grid; grid-template-columns: repeat(12, 1fr); } .homepage-hero .container div { grid-column-start: 2; grid-column-end: 12; max-width: 28.125rem; } .homepage-hero .slick-dots { z-index: 2; justify-content: left; padding: 0; margin-bottom: -8px; position: relative; top: -115px; } .homepage-hero .custom-dot-holder { bottom: 0; } } .homepage-hero--slide { flex-direction: column; text-align: center; } @media (min-width: 992px) { .homepage-hero--slide { height: 35.625rem; text-align: left; } } @media (min-width: 1200px) { .homepage-hero--slide { height: 50rem; } } .homepage-hero picture { height: 12.5rem; } @media (min-width: 992px) { .homepage-hero picture { height: auto; } } .homepage-hero picture img { position: absolute; width: 100vw; object-fit: cover; z-index: -1; top: 0; height: 12.5rem; } @media (min-width: 992px) { .homepage-hero picture img { height: 100%; } } /* -------------------------------------------------------------------------- */ /* EXPLORE WHATS NEW WIDGET */ /* -------------------------------------------------------------------------- */ .tilted-cards-carousel { position: relative; } .tilted-cards-carousel h2, .tilted-cards-carousel h3 { color: #00369d; } .tilted-cards-carousel .marquee { z-index: 0; } .tilted-cards-carousel .slick-list { overflow: visible; } .tilted-cards-carousel .container { position: relative; } @media (max-width: 767.9px) { .tilted-cards-carousel .container { padding-left: 0; padding-right: 0; } } .tilted-cards-carousel .carousel-wrapper { position: relative; } .tilted-cards-carousel .carousel-wrapper .slick-slider { margin: 0; width: 100%; } .tilted-cards-carousel .carousel-wrapper .slick-slider .slick-list { padding: 0 4rem; } @media (min-width: 768px) { .tilted-cards-carousel .carousel-wrapper .slick-slider .slick-list { padding: 0; } } @media (max-width: 767.9px) { .tilted-cards-carousel .carousel-wrapper .slick-slider .slick-list .slick-track { padding-top: 0.625rem; } } .tilted-cards-carousel .carousel-wrapper .slick-slider .slick-list .slick-slide { margin: auto 0; } .tilted-cards-carousel .carousel-wrapper article { margin: 0; padding: 0 3% 0; text-align: center; } @media (min-width: 768px) { .tilted-cards-carousel .carousel-wrapper article { margin: 0 12px; padding: 2.125rem 2.5rem 0 2.5rem; } } @media (min-width: 768px) { .tilted-cards-carousel .carousel-wrapper article:nth-child(even) { margin-top: 2.5rem !important; } } .tilted-cards-carousel .carousel-wrapper article:nth-child(even) .img-tilt { transform: rotate(5deg) scale(1); } .tilted-cards-carousel .carousel-wrapper article .img-tilt { display: block; width: 100%; border-radius: 0.625rem; position: relative; margin: 0 0 2.75rem; transform: rotate(-5deg) scale(1); transition: all .2s ease; opacity: 0.6; aspect-ratio: 1/1; } @media (min-width: 768px) { .tilted-cards-carousel .carousel-wrapper article .img-tilt { opacity: 1; } } .tilted-cards-carousel .carousel-wrapper article .img-tilt:before { content: ""; display: block; position: absolute; top: 3%; right: 3%; border: 1px dashed #00369d; border-radius: 0.625rem; height: 100%; width: 100%; transition: all .2s ease; opacity: 1; } .tilted-cards-carousel .carousel-wrapper article .img-tilt img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0.625rem; position: relative; z-index: 1; display: block; } .tilted-cards-carousel .carousel-wrapper article .img-tilt:hover, .tilted-cards-carousel .carousel-wrapper article .img-tilt:focus, .tilted-cards-carousel .carousel-wrapper article .img-tilt.hover { transform: rotate(0deg) scale(1.1); } .tilted-cards-carousel .carousel-wrapper article .img-tilt:hover:before, .tilted-cards-carousel .carousel-wrapper article .img-tilt:focus:before, .tilted-cards-carousel .carousel-wrapper article .img-tilt.hover:before { top: -0.0625rem; right: -0.0625rem; opacity: 0; } .tilted-cards-carousel .carousel-wrapper article h3 { transition: all .2s ease; } @media (min-width: 768px) { .tilted-cards-carousel .carousel-wrapper article h3 { opacity: 1; } } .tilted-cards-carousel .carousel-wrapper article p { max-width: 17.5rem; margin: 0 auto 1rem; transition: all .2s ease; } @media (min-width: 768px) { .tilted-cards-carousel .carousel-wrapper article p { opacity: 1; } } .tilted-cards-carousel .carousel-wrapper article .btn-primary { width: auto; transition: all .2s ease; } @media (min-width: 768px) { .tilted-cards-carousel .carousel-wrapper article .btn-primary { opacity: 1; } } .tilted-cards-carousel .carousel-wrapper article.slick-active .img-tilt, .tilted-cards-carousel .carousel-wrapper article.slick-active h3, .tilted-cards-carousel .carousel-wrapper article.slick-active p, .tilted-cards-carousel .carousel-wrapper article.slick-active .btn-primary { opacity: 1; } /* -------------------------------------------------------------------------- */ /* EXPLORE WHATS NEW WIDGET */ /* -------------------------------------------------------------------------- */ .tilted-cards-multiple { position: relative; } .tilted-cards-multiple .container { display: grid; grid-template-columns: 1fr; row-gap: 3rem; } @media (min-width: 768px) { .tilted-cards-multiple .container { grid-template-columns: repeat(auto-fit, minmax(33.33333%, 1fr)); row-gap: 3.5rem; } } @media (min-width: 992px) { .tilted-cards-multiple .container { row-gap: 5rem; } } .tilted-cards-multiple .stack article:nth-child(3n-1) { display: block !important; } .tilted-cards-multiple .stack-offset article:nth-child(3n-1) { display: block !important; } @media (min-width: 768px) { .tilted-cards-multiple .stack-offset article:nth-child(3n-1) { padding-top: 2.5rem !important; } } .tilted-cards-multiple .stack-offset article .img-tilt { aspect-ratio: 1/1; } .tilted-cards-multiple .center article { display: block; padding: 0; padding-top: 0 !important; } .tilted-cards-multiple .center article:nth-child(3n-1) { padding-top: 0 !important; } .tilted-cards-multiple .center article img { object-fit: contain; height: 12.5rem; max-height: 12.5rem; } .tilted-cards-multiple article { padding: 3% 10% 0 10%; text-align: center; width: 100%; } @media (min-width: 768px) { .tilted-cards-multiple article { width: 100%; padding: 3% 10% 0 !important; } } @media (min-width: 768px) { .tilted-cards-multiple article:nth-child(even) { display: block; margin-top: 0 !important; } } .tilted-cards-multiple article:nth-child(even) .img-tilt { transform: rotate(5deg) scale(1); } .tilted-cards-multiple article img { aspect-ratio: 4/3; width: 100%; object-fit: contain; } .tilted-cards-multiple article h3 { margin-top: 1rem; } .tilted-cards-multiple article .img-tilt { display: block; width: 100%; border-radius: 0.625rem; position: relative; margin: 0 0 2.75rem; transform: rotate(-5deg) scale(1); transition: all .2s ease; aspect-ratio: 4/3; } .tilted-cards-multiple article .img-tilt:before { content: ""; display: block; position: absolute; top: 3%; right: 3%; border: 1px dashed #00369d; border-radius: 0.625rem; height: 100%; width: 100%; transition: all .2s ease; opacity: 1; } .tilted-cards-multiple article .img-tilt img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0.625rem; position: relative; z-index: 1; display: block; } .tilted-cards-multiple article .img-tilt:hover, .tilted-cards-multiple article .img-tilt:focus, .tilted-cards-multiple article .img-tilt.hover { transform: rotate(0deg) scale(1.1); } .tilted-cards-multiple article .img-tilt:hover:before, .tilted-cards-multiple article .img-tilt:focus:before, .tilted-cards-multiple article .img-tilt.hover:before { top: -0.0625rem; right: -0.0625rem; opacity: 0; } .tilted-cards-multiple article p { max-width: 17.5rem; margin: 0 auto 1rem; } .tilted-cards-multiple article .btn-primary { width: auto; } .tilted-cards-multiple .marquee { z-index: 0; } /* -------------------------------------------------------------------------- */ /* EXPLORE WHATS NEW WIDGET */ /* -------------------------------------------------------------------------- */ .tilted-cards-one { position: relative; } .tilted-cards-one article { display: grid; grid-template-columns: 1fr; align-items: center; margin: 0; padding: 0 5%; text-align: center; width: 100%; } .tilted-cards-one article h3 { margin-top: 1rem; } @media (min-width: 768px) { .tilted-cards-one article h3 { margin-top: 2.5rem; } } .tilted-cards-one article.imageLeft .img-tilt, .tilted-cards-one article.imageRight .img-tilt { order: 1; } .tilted-cards-one article.imageLeft .content, .tilted-cards-one article.imageRight .content { order: 2; } @media (min-width: 768px) { .tilted-cards-one article { grid-template-columns: repeat(12, 1fr); } .tilted-cards-one article.imageLeft .img-tilt { grid-row: 1; grid-column: 2 / span 5; } .tilted-cards-one article.imageLeft .content { grid-row: 1; grid-column: 8 / span 4; } .tilted-cards-one article.imageRight .img-tilt { grid-row: 1; grid-column: 7 / span 5; } .tilted-cards-one article.imageRight .content { grid-row: 1; grid-column: 2 / span 4; } } @media (min-width: 768px) { .tilted-cards-one article { text-align: left; padding: 1.125rem 0; } } .tilted-cards-one article .img-tilt { display: block; width: 100%; border-radius: 0.625rem; position: relative; margin: 1.125rem 0 2.75rem; transform: rotate(-5deg) scale(1); transition: all .2s ease; aspect-ratio: 4/3; } .tilted-cards-one article .img-tilt.video:after { background: url(../img/play-button.png) center center no-repeat; bottom: 0; content: ""; display: block; left: 0; position: absolute; right: 0; top: 0; background-size: 15%; z-index: 1; } @media (min-width: 768px) { .tilted-cards-one article .img-tilt { margin: 0; } } .tilted-cards-one article .img-tilt:before { content: ""; display: block; position: absolute; top: 3%; right: 3%; border: 1px dashed #00369d; border-radius: 0.625rem; height: 100%; width: 100%; transition: all .2s ease; opacity: 1; } .tilted-cards-one article .img-tilt img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0.625rem; position: relative; z-index: 1; display: block; } .tilted-cards-one article .img-tilt:hover, .tilted-cards-one article .img-tilt:focus, .tilted-cards-one article .img-tilt.hover { transform: rotate(0deg) scale(1.1); } .tilted-cards-one article .img-tilt:hover:before, .tilted-cards-one article .img-tilt:focus:before, .tilted-cards-one article .img-tilt.hover:before { top: -0.0625rem; right: -0.0625rem; opacity: 0; } .tilted-cards-one article .btn-primary { width: auto; } .widget-side-by-side { position: relative; } .widget-side-by-side .circleMask { border-radius: 100%; } .widget-side-by-side.imageLeft, .widget-side-by-side.noImage { background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0) 90%, rgba(255, 255, 255, 0) 100%), url("../img/dots-full-imageleft.png"); background-repeat: no-repeat; background-size: cover; background-position: center center; background: none; } @media (min-width: 768px) { .widget-side-by-side.imageLeft, .widget-side-by-side.noImage { background-size: 1200px auto; } } @media (min-width: 992px) { .widget-side-by-side.imageLeft, .widget-side-by-side.noImage { background-size: 1500px auto; } } @media (min-width: 1425px) { .widget-side-by-side.imageLeft, .widget-side-by-side.noImage { background-size: 1800px auto; } } .widget-side-by-side.imageRight { background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0) 90%, rgba(255, 255, 255, 0) 100%), url("../img/dots-full-imageright.png"); background-repeat: no-repeat; background-size: cover; background-position: center center; background: none; } @media (min-width: 768px) { .widget-side-by-side.imageRight { background-size: 1200px auto; } } @media (min-width: 992px) { .widget-side-by-side.imageRight { background-size: 1500px auto; } } @media (min-width: 1425px) { .widget-side-by-side.imageRight { background-size: 1800px auto; } } .widget-side-by-side .thedots { display: none; position: absolute; justify-content: center; top: 0; z-index: -1; width: 100%; } @media (min-width: 768px) { .widget-side-by-side .thedots { display: flex; } } .widget-side-by-side .thedots img { object-fit: cover; width: 100%; max-height: 100%; min-width: 1900px; } .widget-side-by-side .container { position: relative; display: grid; grid-template-columns: 1fr; row-gap: 1.5rem; justify-items: center; text-align: center; aspect-ratio: 8/3; } .widget-side-by-side .container.noImage { aspect-ratio: 21/3; } .widget-side-by-side .container img { object-fit: contain; width: 17.5rem; height: 13rem; aspect-ratio: auto 280 / 208; max-width: 100%; height: auto; padding: 0 2.5rem; } @media (min-width: 768px) { .widget-side-by-side .container img { padding: 0; } } @media (min-width: 992px) { .widget-side-by-side .container img { width: 33.875rem; height: 33.875rem; aspect-ratio: auto 542 / 542; } } .widget-side-by-side .container.imageLeft .img, .widget-side-by-side .container.imageRight .img { order: 1; } .widget-side-by-side .container.imageLeft .content, .widget-side-by-side .container.imageRight .content { order: 2; } @media (max-width: 767.9px) { .widget-side-by-side .container.imageLeft .content ul li::before, .widget-side-by-side .container.imageRight .content ul li::before { display: none; } } @media (min-width: 768px) { .widget-side-by-side .container { grid-template-columns: repeat(12, 1fr); align-items: center; text-align: left; } .widget-side-by-side .container.imageLeft .content { grid-row: 1; grid-column: 7 / span 6; } .widget-side-by-side .container.imageLeft .img { grid-row: 1; grid-column: 1 / span 5; } .widget-side-by-side .container.imageRight .content { grid-row: 1; grid-column: 1 / span 6; } .widget-side-by-side .container.imageRight .img { grid-row: 1; grid-column: 8 / span 5; } } @media (min-width: 992px) { .widget-side-by-side .container.imageLeft .content { grid-column: 8 / span 4; } .widget-side-by-side .container.imageLeft .img { grid-column: 2 / span 5; } .widget-side-by-side .container.imageRight .content { grid-column: 2 / span 4; } .widget-side-by-side .container.imageRight .img { grid-column: 7 / span 5; } } .widget-side-by-side .container.noImage { text-align: center; } @media (min-width: 768px) { .widget-side-by-side .container.noImage .content { grid-column: 2 / span 10; } } @media (min-width: 992px) { .widget-side-by-side .container.noImage .content { grid-column: 4 / span 6; } } .widget-side-by-side .container.noImage .img { display: none; } .widget-business-opportunities { position: relative; } .widget-business-opportunities .container { position: relative; display: grid; text-align: center; grid-template-columns: repeat(4, 1fr); row-gap: 1rem; column-gap: 1rem; padding-top: 2.625rem; } @media (min-width: 768px) { .widget-business-opportunities .container { grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; } } @media (min-width: 768px) { .widget-business-opportunities .container { padding-top: 1.5rem; } } .widget-business-opportunities .container .main { display: grid; position: relative; align-content: center; justify-items: center; grid-column: span 6; grid-row: span 2; border-radius: 2.5rem; background-color: #00369d; padding: 5.5rem 1rem 3rem 1rem; } .widget-business-opportunities .container .main h5 { margin-bottom: 1.5rem; } @media (min-width: 768px) { .widget-business-opportunities .container .main { padding: 4.125rem 1rem 3rem 1rem; } } @media (min-width: 992px) { .widget-business-opportunities .container .main { padding: 8.125rem 3.25rem 3.25rem 3.25rem; } } .widget-business-opportunities .container .main img { position: absolute; max-width: 9.75rem; top: -4.6875rem; } @media (min-width: 768px) { .widget-business-opportunities .container .main img { max-width: 30%; } } .widget-business-opportunities .container .img { grid-column: span 3; border-radius: 2.5rem; aspect-ratio: 1/1; } .widget-business-opportunities .container > img { display: none; object-fit: cover; width: 100%; height: 100%; } @media (min-width: 768px) { .widget-business-opportunities .container > img { display: block; } } .faq-widget { text-align: center; } .faq-widget .container { display: grid; grid-template-columns: repeat(12, 1fr); } .faq-widget .container dl { grid-row: 1; grid-column: 1 / span 12; } @media (min-width: 768px) { .faq-widget .container dl { grid-row: 1; grid-column: 2 / span 10; } } .faq-widget h2 { margin-bottom: 2rem; } @media (min-width: 768px) { .faq-widget h2 { margin-bottom: 3rem; } } .faq-widget dl > div { border-bottom: 1px solid #b4bcca; margin-bottom: 1.5rem; padding-bottom: 1.5rem; } .faq-widget dl > div:last-child { margin: 0; } .faq-widget dt button { background-color: #fff; color: #001338; font-weight: 600; padding: 0; } .faq-widget dt button::after { transition: all .2s ease; content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxNCAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzLjc3ODggMS44NzY5N0MxMy42MjI0IDEuNzgxNDEgMTMuMzgzIDEuNzg1MDggMTMuMDExNiAxLjk2NTE5QzEyLjIwOTQgMi40MDk5NCAxMS40NzIzIDIuOTE3NTkgMTAuODEyOCAzLjQ3OTU5QzkuNDA1NTQgNC41NDE4OCA2Ljk5ODk5IDkuMTkyNzYgNS43NDA4MyA3LjE1NTMzQzUuNjcyNDIgNy4wNTI0MSAzLjExNjg5IDIuNTI3NTggMi43NzQ4NSAyLjAwOTNDMi40ODgzMyAxLjQ2NjcgMi4xMzMyNyAwLjk0NjAzNyAxLjcxNDUzIDAuNDU0NDYzQzEuMjYwMTEgMC4wMTcwNTAyIDAuMjA0NjY4IC0wLjI5MTcxMiAwLjAzODUzNDggMC40MzYwODRDLTAuMTQ3MTQ0IDEuMjUyMSAwLjM4MDU3NCAyLjI3Mzk1IDAuNzE3NzI4IDMuMDM4NTFDMS42OTQ5OCA1LjE5MjQ5IDIuOTUwNzYgNy4yNDcyMyA0LjA0NTI5IDkuMzU3MUM0LjM2ODUgMTAuMDEzNyA0Ljc2OTE0IDEwLjY0NzIgNS4yNDI0MiAxMS4yNTAxQzUuODYyOTggMTEuOTYzMiA2LjUyMjYzIDEyLjI5NzcgNy4yMzExNCAxMS42NjU1QzcuODU2NTkgMTEuMTEwNCA4LjI3NjgxIDEwLjI0NjYgOC43MjYzNCA5LjYwNzA1QzkuNDc4MTcgOC40NDM0MSAxMC4zNDU1IDcuMzI0MDQgMTEuMzIxIDYuMjU4NDVDMTIuMjk4MiA1LjI0MDI3IDEzLjQ1NjMgNC4yNDc4MiAxMy44OTYgMi45OTgwN0MxNC4wMzI4IDIuNjIzMTUgMTQuMDcxOSAyLjA2NDQ0IDEzLjc3ODggMS44NzY5N1oiIGZpbGw9IiMwMDM2OUQiLz4KPC9zdmc+Cg=="); } .faq-widget dt button[aria-expanded="true"] { margin-bottom: 0; border-bottom: none; } .faq-widget dt button[aria-expanded="true"] span { color: #001338; transform: none; } .faq-widget dt button[aria-expanded="true"]:after { transform: rotate(180deg); } .faq-widget dd { padding-top: 1.5rem; text-align: left; } .widget-policy .bg-grey { background-color: #f5f7f9; display: grid; grid-template-columns: 1fr; border-radius: 0.5rem; padding: 1rem; justify-items: center; align-items: center; } @media (min-width: 768px) { .widget-policy .bg-grey { padding: 1.5rem; } } @media (min-width: 992px) { .widget-policy .bg-grey { grid-template-columns: 2fr 1fr; padding: 3rem; justify-items: start; } } .widget-policy .bg-grey a { text-decoration: underline; } .widget-policy .bg-grey h4 { color: #001338; } @media (min-width: 992px) { .widget-policy .bg-grey ul li { max-width: 43.75rem; margin-right: 6.25rem; } } .widget-policy .bg-grey .img { display: none; } @media (min-width: 992px) { .widget-policy .bg-grey .img { display: block; justify-self: end; } } .widget-policy .bg-grey img { display: block; width: 19.25rem; height: 19.25rem; object-fit: contain; } @media (min-width: 992px) { .widget-policy .bg-grey img { margin-left: 0; } } .widget-policy .bg-grey button { color: #00369d; font-weight: bold; text-decoration: underline; } .initialPop { animation-play-state: running !important; } .dot.g, .dot.g2 { position: absolute; z-index: -1; } .dot.g > i, .dot.g2 > i { display: block; } .dot.g i > i, .dot.g2 i > i { display: block; border-radius: 50%; background: radial-gradient(at 20% 20%, #edff3d, #c2d600) #c2d600; background: #c2d600; transform-origin: bottom center; } .dot.y, .dot.y2 { position: absolute; z-index: -1; } .dot.y > i, .dot.y2 > i { display: block; } .dot.y i > i, .dot.y2 i > i { display: block; border-radius: 50%; background: radial-gradient(at 20% 20%, #ffe466, #ffd200) #ffd200; background: #ffd200; transform-origin: bottom center; } .dot.f, .dot.f2 { position: absolute; z-index: -1; } .dot.f > i, .dot.f2 > i { display: block; } .dot.f i > i, .dot.f2 i > i { display: block; border-radius: 50%; background: radial-gradient(at 20% 20%, #fab1d1, #f45198) #f45198; background: #f45198; transform-origin: bottom center; } .dot.b, .dot.b2 { position: absolute; z-index: -1; } .dot.b > i, .dot.b2 > i { display: block; } .dot.b i > i, .dot.b2 i > i { display: block; border-radius: 50%; background: radial-gradient(at 20% 20%, #97d7f2, #3db5e6) #3db5e6; background: #3db5e6; transform-origin: bottom center; } .dot.o, .dot.o2 { position: absolute; z-index: -1; } .dot.o > i, .dot.o2 > i { display: block; } .dot.o i > i, .dot.o2 i > i { display: block; border-radius: 50%; background: radial-gradient(at 20% 20%, #ffa766, #ff6c00) #ff6c00; background: #ff6c00; transform-origin: bottom center; } .dot.p1, .dot.p3, .dot.p6 { position: absolute; z-index: -1; } .dot.p1 > i, .dot.p3 > i, .dot.p6 > i { display: block; } .dot.p1 i > i, .dot.p3 i > i, .dot.p6 i > i { display: block; background: url(../img/pops.svg); background-size: cover; transform-origin: bottom center; opacity: 1; } .dot.p2, .dot.p4, .dot.p5 { position: absolute; z-index: -1; } .dot.p2 > i, .dot.p4 > i, .dot.p5 > i { display: block; } .dot.p2 i > i, .dot.p4 i > i, .dot.p5 i > i { display: block; background: url(../img/pops.svg); background-size: cover; transform-origin: bottom center; opacity: 0.5; } .hero { border: 1px solid transparent; } .hero .left.y { left: 30px; bottom: 100%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 0.15s; animation-play-state: paused; } .hero .left.y i > i { height: 2.5rem; width: 2.5rem; animation: pulse 4s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } @media (prefers-reduced-motion) { .hero .left.y i > i { animation: pulse 0s; } } .hero .left.f { left: 110px; bottom: 95%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 0.6s; animation-play-state: paused; } .hero .left.f i > i { height: 3.25rem; width: 3.25rem; animation: pulse 2s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } @media (prefers-reduced-motion) { .hero .left.f i > i { animation: pulse 0s; } } .hero .left.b { left: 80px; bottom: 75%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 0.95s; animation-play-state: paused; } .hero .left.b i > i { height: 1.25rem; width: 1.25rem; animation: pulse 3s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } @media (prefers-reduced-motion) { .hero .left.b i > i { animation: pulse 0s; } } .hero .left.o { left: -25px; bottom: 60%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 0.44s; animation-play-state: paused; } .hero .left.o i > i { height: 4.625rem; width: 4.625rem; animation: pulse 5s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } @media (prefers-reduced-motion) { .hero .left.o i > i { animation: pulse 0s; } } @media (min-width: 768px) { .hero .left.y { left: -10px; bottom: 98%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 0.04s; animation-play-state: paused; } .hero .left.y i > i { height: 2.5rem; width: 2.5rem; animation: pulse 2s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } } @media (min-width: 768px) and (prefers-reduced-motion) { .hero .left.y i > i { animation: pulse 0s; } } @media (min-width: 768px) { .hero .left.f { left: 80px; bottom: 45%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 0.28s; animation-play-state: paused; } .hero .left.f i > i { height: 3.25rem; width: 3.25rem; animation: pulse 3s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } } @media (min-width: 768px) and (prefers-reduced-motion) { .hero .left.f i > i { animation: pulse 0s; } } @media (min-width: 768px) { .hero .left.b { left: 60px; bottom: 25%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 0.26s; animation-play-state: paused; } .hero .left.b i > i { height: 1.25rem; width: 1.25rem; animation: pulse 4s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } } @media (min-width: 768px) and (prefers-reduced-motion) { .hero .left.b i > i { animation: pulse 0s; } } @media (min-width: 768px) { .hero .left.o { left: -25px; bottom: -30%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 0.96s; animation-play-state: paused; } .hero .left.o i > i { height: 4.625rem; width: 4.625rem; animation: pulse 2s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } } @media (min-width: 768px) and (prefers-reduced-motion) { .hero .left.o i > i { animation: pulse 0s; } } @media (min-width: 992px) { .hero .left.y { left: -10px; bottom: 98%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 0.94s; animation-play-state: paused; } .hero .left.y i > i { height: 2.5rem; width: 2.5rem; animation: pulse 4s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } } @media (min-width: 992px) and (prefers-reduced-motion) { .hero .left.y i > i { animation: pulse 0s; } } @media (min-width: 992px) { .hero .left.f { left: 160px; bottom: 45%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 0.71s; animation-play-state: paused; } .hero .left.f i > i { height: 3.25rem; width: 3.25rem; animation: pulse 3s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } } @media (min-width: 992px) and (prefers-reduced-motion) { .hero .left.f i > i { animation: pulse 0s; } } @media (min-width: 992px) { .hero .left.b { left: 110px; bottom: 25%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 0.1s; animation-play-state: paused; } .hero .left.b i > i { height: 1.25rem; width: 1.25rem; animation: pulse 3s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } } @media (min-width: 992px) and (prefers-reduced-motion) { .hero .left.b i > i { animation: pulse 0s; } } @media (min-width: 992px) { .hero .left.o { left: -25px; bottom: -20%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 0.33s; animation-play-state: paused; } .hero .left.o i > i { height: 4rem; width: 4rem; animation: pulse 3s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } } @media (min-width: 992px) and (prefers-reduced-motion) { .hero .left.o i > i { animation: pulse 0s; } } .hero .right.g { right: 120px; bottom: 100%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 0.2s; animation-play-state: paused; } .hero .right.g i > i { height: 4.5rem; width: 4.5rem; animation: pulse 2s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } @media (prefers-reduced-motion) { .hero .right.g i > i { animation: pulse 0s; } } .hero .right.b { right: 40px; bottom: 100%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 0.69s; animation-play-state: paused; } .hero .right.b i > i { height: 2.625rem; width: 2.625rem; animation: pulse 2s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } @media (prefers-reduced-motion) { .hero .right.b i > i { animation: pulse 0s; } } .hero .right.o { right: 100px; bottom: 80%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 0.99s; animation-play-state: paused; } .hero .right.o i > i { height: 3rem; width: 3rem; animation: pulse 3s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } @media (prefers-reduced-motion) { .hero .right.o i > i { animation: pulse 0s; } } .hero .right.f { right: -30px; bottom: 80%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 0.96s; animation-play-state: paused; } .hero .right.f i > i { height: 3.75rem; width: 3.75rem; animation: pulse 5s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } @media (prefers-reduced-motion) { .hero .right.f i > i { animation: pulse 0s; } } @media (min-width: 768px) { .hero .right.g { right: 70px; bottom: 68%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 0.66s; animation-play-state: paused; } .hero .right.g i > i { height: 4.5rem; width: 4.5rem; animation: pulse 4s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } } @media (min-width: 768px) and (prefers-reduced-motion) { .hero .right.g i > i { animation: pulse 0s; } } @media (min-width: 768px) { .hero .right.b { right: 10px; bottom: 110%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 0.23s; animation-play-state: paused; } .hero .right.b i > i { height: 2.625rem; width: 2.625rem; animation: pulse 4s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } } @media (min-width: 768px) and (prefers-reduced-motion) { .hero .right.b i > i { animation: pulse 0s; } } @media (min-width: 768px) { .hero .right.o { right: 60px; bottom: -20%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 0.77s; animation-play-state: paused; } .hero .right.o i > i { height: 3rem; width: 3rem; animation: pulse 5s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } } @media (min-width: 768px) and (prefers-reduced-motion) { .hero .right.o i > i { animation: pulse 0s; } } @media (min-width: 768px) { .hero .right.f { right: -30px; bottom: 0%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 0.55s; animation-play-state: paused; } .hero .right.f i > i { height: 6.25rem; width: 6.25rem; animation: pulse 4s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } } @media (min-width: 768px) and (prefers-reduced-motion) { .hero .right.f i > i { animation: pulse 0s; } } @media (min-width: 992px) { .hero .right.g { right: 120px; bottom: 68%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 0.36s; animation-play-state: paused; } .hero .right.g i > i { height: 4.5rem; width: 4.5rem; animation: pulse 4s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } } @media (min-width: 992px) and (prefers-reduced-motion) { .hero .right.g i > i { animation: pulse 0s; } } @media (min-width: 992px) { .hero .right.b { right: 10px; bottom: 110%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 0.29s; animation-play-state: paused; } .hero .right.b i > i { height: 2.625rem; width: 2.625rem; animation: pulse 4s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } } @media (min-width: 992px) and (prefers-reduced-motion) { .hero .right.b i > i { animation: pulse 0s; } } @media (min-width: 992px) { .hero .right.o { right: 150px; bottom: -20%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 0.86s; animation-play-state: paused; } .hero .right.o i > i { height: 3rem; width: 3rem; animation: pulse 2s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } } @media (min-width: 992px) and (prefers-reduced-motion) { .hero .right.o i > i { animation: pulse 0s; } } @media (min-width: 992px) { .hero .right.f { right: -30px; bottom: -20%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 0.88s; animation-play-state: paused; } .hero .right.f i > i { height: 6.25rem; width: 6.25rem; animation: pulse 2s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } } @media (min-width: 992px) and (prefers-reduced-motion) { .hero .right.f i > i { animation: pulse 0s; } } .hero .right.p1 { right: 130px; bottom: 105%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 0.73s; animation-play-state: paused; } .hero .right.p1 i > i { height: 3.75rem; width: 3.75rem; animation: shake 6s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } @media (prefers-reduced-motion) { .hero .right.p1 i > i { animation: shake 0s; } } .hero .right.p2 { right: 0px; bottom: 95%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 0.13s; animation-play-state: paused; } .hero .right.p2 i > i { height: 2.5rem; width: 2.5rem; animation: shake 7s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } @media (prefers-reduced-motion) { .hero .right.p2 i > i { animation: shake 0s; } } .hero .right.p3 { right: 0px; bottom: 70%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 0.88s; animation-play-state: paused; } .hero .right.p3 i > i { height: 5rem; width: 5rem; animation: shake 6s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } @media (prefers-reduced-motion) { .hero .right.p3 i > i { animation: shake 0s; } } .hero .right.p4 { right: 120px; bottom: 80%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 0.85s; animation-play-state: paused; } .hero .right.p4 i > i { height: 2.5rem; width: 2.5rem; animation: shake 4s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } @media (prefers-reduced-motion) { .hero .right.p4 i > i { animation: shake 0s; } } .hero .right.p5 { right: -40px; bottom: 70%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 0.08s; animation-play-state: paused; } .hero .right.p5 i > i { height: 3.75rem; width: 3.75rem; animation: shake 4s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } @media (prefers-reduced-motion) { .hero .right.p5 i > i { animation: shake 0s; } } .hero .right.p6 { right: 80px; bottom: 100%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 0.9s; animation-play-state: paused; } .hero .right.p6 i > i { height: 3.125rem; width: 3.125rem; animation: shake 6s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } @media (prefers-reduced-motion) { .hero .right.p6 i > i { animation: shake 0s; } } @media (min-width: 768px) { .hero .right.p1 { right: 130px; bottom: 90%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 0.39s; animation-play-state: paused; } .hero .right.p1 i > i { height: 3.75rem; width: 3.75rem; animation: shake 4s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } } @media (min-width: 768px) and (prefers-reduced-motion) { .hero .right.p1 i > i { animation: shake 0s; } } @media (min-width: 768px) { .hero .right.p2 { right: 0px; bottom: 95%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 0.26s; animation-play-state: paused; } .hero .right.p2 i > i { height: 2.5rem; width: 2.5rem; animation: shake 7s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } } @media (min-width: 768px) and (prefers-reduced-motion) { .hero .right.p2 i > i { animation: shake 0s; } } @media (min-width: 768px) { .hero .right.p3 { right: 0px; bottom: 60%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 0.7s; animation-play-state: paused; } .hero .right.p3 i > i { height: 5rem; width: 5rem; animation: shake 4s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } } @media (min-width: 768px) and (prefers-reduced-motion) { .hero .right.p3 i > i { animation: shake 0s; } } @media (min-width: 768px) { .hero .right.p4 { right: 120px; bottom: 40%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 0.19s; animation-play-state: paused; } .hero .right.p4 i > i { height: 2.5rem; width: 2.5rem; animation: shake 6s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } } @media (min-width: 768px) and (prefers-reduced-motion) { .hero .right.p4 i > i { animation: shake 0s; } } @media (min-width: 768px) { .hero .right.p5 { right: -40px; bottom: 20%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 0.03s; animation-play-state: paused; } .hero .right.p5 i > i { height: 3.75rem; width: 3.75rem; animation: shake 6s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } } @media (min-width: 768px) and (prefers-reduced-motion) { .hero .right.p5 i > i { animation: shake 0s; } } @media (min-width: 768px) { .hero .right.p6 { right: 80px; bottom: 0%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 0.18s; animation-play-state: paused; } .hero .right.p6 i > i { height: 3.125rem; width: 3.125rem; animation: shake 5s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } } @media (min-width: 768px) and (prefers-reduced-motion) { .hero .right.p6 i > i { animation: shake 0s; } } .imageLeft .left.y, .noImage .left.y { left: 2px; bottom: 88%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 1.4s; animation-play-state: paused; } .imageLeft .left.y i > i, .noImage .left.y i > i { height: 2.5rem; width: 2.5rem; animation: pulse 3s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } @media (prefers-reduced-motion) { .imageLeft .left.y i > i, .noImage .left.y i > i { animation: pulse 0s; } } .imageLeft .left.y2, .noImage .left.y2 { left: -210px; bottom: 20%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 1.84s; animation-play-state: paused; } .imageLeft .left.y2 i > i, .noImage .left.y2 i > i { height: 4.375rem; width: 4.375rem; animation: pulse 2s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } @media (prefers-reduced-motion) { .imageLeft .left.y2 i > i, .noImage .left.y2 i > i { animation: pulse 0s; } } .imageLeft .left.f, .noImage .left.f { left: 60px; bottom: 65%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 1.53s; animation-play-state: paused; } .imageLeft .left.f i > i, .noImage .left.f i > i { height: 3.25rem; width: 3.25rem; animation: pulse 2s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } @media (prefers-reduced-motion) { .imageLeft .left.f i > i, .noImage .left.f i > i { animation: pulse 0s; } } .imageLeft .left.b, .noImage .left.b { left: -190px; bottom: 65%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 1.79s; animation-play-state: paused; } .imageLeft .left.b i > i, .noImage .left.b i > i { height: 7.5rem; width: 7.5rem; animation: pulse 3s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } @media (prefers-reduced-motion) { .imageLeft .left.b i > i, .noImage .left.b i > i { animation: pulse 0s; } } .imageLeft .left.o, .noImage .left.o { left: -35px; bottom: 47%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 1.53s; animation-play-state: paused; } .imageLeft .left.o i > i, .noImage .left.o i > i { height: 3rem; width: 3rem; animation: pulse 3s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } @media (prefers-reduced-motion) { .imageLeft .left.o i > i, .noImage .left.o i > i { animation: pulse 0s; } } .imageLeft .left.g, .noImage .left.g { left: 45px; bottom: 0%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 1.54s; animation-play-state: paused; } .imageLeft .left.g i > i, .noImage .left.g i > i { height: 4rem; width: 4rem; animation: pulse 4s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } @media (prefers-reduced-motion) { .imageLeft .left.g i > i, .noImage .left.g i > i { animation: pulse 0s; } } .imageLeft .right.g, .noImage .right.g { right: -20px; bottom: 88%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 1.23s; animation-play-state: paused; } .imageLeft .right.g i > i, .noImage .right.g i > i { height: 4.5rem; width: 4.5rem; animation: pulse 4s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } @media (prefers-reduced-motion) { .imageLeft .right.g i > i, .noImage .right.g i > i { animation: pulse 0s; } } .imageLeft .right.b, .noImage .right.b { right: 10px; bottom: 55%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 1.21s; animation-play-state: paused; } .imageLeft .right.b i > i, .noImage .right.b i > i { height: 2rem; width: 2rem; animation: pulse 2s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } @media (prefers-reduced-motion) { .imageLeft .right.b i > i, .noImage .right.b i > i { animation: pulse 0s; } } .imageLeft .right.o, .noImage .right.o { right: -30px; bottom: 20%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 1.13s; animation-play-state: paused; } .imageLeft .right.o i > i, .noImage .right.o i > i { height: 3rem; width: 3rem; animation: pulse 3s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } @media (prefers-reduced-motion) { .imageLeft .right.o i > i, .noImage .right.o i > i { animation: pulse 0s; } } .imageLeft .right.y, .noImage .right.y { right: 70px; bottom: 0%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 1.95s; animation-play-state: paused; } .imageLeft .right.y i > i, .noImage .right.y i > i { height: 2rem; width: 2rem; animation: pulse 4s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } @media (prefers-reduced-motion) { .imageLeft .right.y i > i, .noImage .right.y i > i { animation: pulse 0s; } } .imageLeft .right.y2, .noImage .right.y2 { right: -260px; bottom: 10%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 1.23s; animation-play-state: paused; } .imageLeft .right.y2 i > i, .noImage .right.y2 i > i { height: 6.25rem; width: 6.25rem; animation: pulse 5s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } @media (prefers-reduced-motion) { .imageLeft .right.y2 i > i, .noImage .right.y2 i > i { animation: pulse 0s; } } .imageLeft .right.f, .noImage .right.f { right: -210px; bottom: 55%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 1.07s; animation-play-state: paused; } .imageLeft .right.f i > i, .noImage .right.f i > i { height: 8.75rem; width: 8.75rem; animation: pulse 3s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } @media (prefers-reduced-motion) { .imageLeft .right.f i > i, .noImage .right.f i > i { animation: pulse 0s; } } .imageRight .left.f { left: -16px; bottom: 84%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 1.44s; animation-play-state: paused; } .imageRight .left.f i > i { height: 3.75rem; width: 3.75rem; animation: pulse 3s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } @media (prefers-reduced-motion) { .imageRight .left.f i > i { animation: pulse 0s; } } .imageRight .left.o { left: -200px; bottom: 54%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 1.73s; animation-play-state: paused; } .imageRight .left.o i > i { height: 7.5rem; width: 7.5rem; animation: pulse 2s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } @media (prefers-reduced-motion) { .imageRight .left.o i > i { animation: pulse 0s; } } .imageRight .left.g { left: 10px; bottom: 58%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 1.46s; animation-play-state: paused; } .imageRight .left.g i > i { height: 1.875rem; width: 1.875rem; animation: pulse 3s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } @media (prefers-reduced-motion) { .imageRight .left.g i > i { animation: pulse 0s; } } .imageRight .left.b { left: -20px; bottom: 33%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 1.47s; animation-play-state: paused; } .imageRight .left.b i > i { height: 2.5rem; width: 2.5rem; animation: pulse 2s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } @media (prefers-reduced-motion) { .imageRight .left.b i > i { animation: pulse 0s; } } .imageRight .left.o2 { left: 58px; bottom: 17%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 1.56s; animation-play-state: paused; } .imageRight .left.o2 i > i { height: 1.875rem; width: 1.875rem; animation: pulse 3s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } @media (prefers-reduced-motion) { .imageRight .left.o2 i > i { animation: pulse 0s; } } .imageRight .left.y { left: -160px; bottom: 13%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 1.34s; animation-play-state: paused; } .imageRight .left.y i > i { height: 4.0625rem; width: 4.0625rem; animation: pulse 2s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } @media (prefers-reduced-motion) { .imageRight .left.y i > i { animation: pulse 0s; } } .imageRight .right.o { right: 15px; bottom: 87%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 1.84s; animation-play-state: paused; } .imageRight .right.o i > i { height: 2.1875rem; width: 2.1875rem; animation: pulse 5s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } @media (prefers-reduced-motion) { .imageRight .right.o i > i { animation: pulse 0s; } } .imageRight .right.b { right: -160px; bottom: 69%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 1.99s; animation-play-state: paused; } .imageRight .right.b i > i { height: 5rem; width: 5rem; animation: pulse 3s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } @media (prefers-reduced-motion) { .imageRight .right.b i > i { animation: pulse 0s; } } .imageRight .right.y { right: 55px; bottom: 62%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 1.07s; animation-play-state: paused; } .imageRight .right.y i > i { height: 3.125rem; width: 3.125rem; animation: pulse 3s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } @media (prefers-reduced-motion) { .imageRight .right.y i > i { animation: pulse 0s; } } .imageRight .right.f { right: -28px; bottom: 44%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 1.98s; animation-play-state: paused; } .imageRight .right.f i > i { height: 2.8125rem; width: 2.8125rem; animation: pulse 5s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } @media (prefers-reduced-motion) { .imageRight .right.f i > i { animation: pulse 0s; } } .imageRight .right.b2 { right: 45px; bottom: 20%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 1.59s; animation-play-state: paused; } .imageRight .right.b2 i > i { height: 3.125rem; width: 3.125rem; animation: pulse 5s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } @media (prefers-reduced-motion) { .imageRight .right.b2 i > i { animation: pulse 0s; } } .imageRight .right.g { right: -200px; bottom: 9%; transform: scale(0.01); animation: initialPop .5s forwards; animation-delay: 1.19s; animation-play-state: paused; } .imageRight .right.g i > i { height: 6.875rem; width: 6.875rem; animation: pulse 4s; animation-play-state: running; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } @media (prefers-reduced-motion) { .imageRight .right.g i > i { animation: pulse 0s; } } @media (min-width: 992px) { .hero h1 { margin-top: 4.375rem; } } .hero .dot.left > i { transform: scale(0.7); } @media (min-width: 768px) { .hero .dot.left > i { transform: scale(0.6); } } @media (min-width: 992px) { .hero .dot.left > i { transform: scale(1); } } .hero .dot.right > i { transform: scale(0.7); } @media (min-width: 768px) { .hero .dot.right > i { transform: scale(0.6); } } @media (min-width: 992px) { .hero .dot.right > i { transform: scale(1); } } .imageLeft .dot.left i, .noImage .dot.left i { transform: scale(0.7) translateX(-20px); } @media (min-width: 768px) { .imageLeft .dot.left i, .noImage .dot.left i { transform: scale(0.6) translateX(-100px); } } @media (min-width: 992px) { .imageLeft .dot.left i, .noImage .dot.left i { transform: scale(1) translateX(0px); } } .imageLeft .dot.right i, .noImage .dot.right i { transform: scale(0.7) translateX(30px); } @media (min-width: 768px) { .imageLeft .dot.right i, .noImage .dot.right i { transform: scale(0.6) translateX(0px); } } @media (min-width: 992px) { .imageLeft .dot.right i, .noImage .dot.right i { transform: scale(1) translateX(0px); } } .imageRight .dot.left i { transform: scale(0.7) translateX(-20px); } @media (min-width: 768px) { .imageRight .dot.left i { transform: scale(0.6) translateX(-20px); } } @media (min-width: 992px) { .imageRight .dot.left i { transform: scale(1) translateX(0px); } } .imageRight .dot.right i { transform: scale(0.7) translateX(30px); } @media (min-width: 768px) { .imageRight .dot.right i { transform: scale(0.6) translateX(80px); } } @media (min-width: 992px) { .imageRight .dot.right i { transform: scale(1) translateX(0px); } } /* example dots on side-by-side widget */ @keyframes initialPop { 0% { transform: scale3d(0.1, 0.1, 1); } 20% { transform: scale3d(1.3, 1.3, 1); } 40% { transform: scale3d(0.98, 0.98, 1); } 60% { transform: scale3d(1.05, 1.05, 1); } 80% { transform: scale3d(1.01, 1.01, 1); } 100% { transform: scale3d(1, 1, 1); } } @keyframes pulse { 0% { transform: translatey(0); opacity: 0.8; } 50% { transform: translatey(0px) scale(1.2); opacity: 1; } 100% { transform: translatey(0); opacity: 0.8; } } @keyframes levitate { 0% { transform: translatey(0); opacity: 0.8; } 50% { transform: translatey(-15px) scale(1.3); opacity: 1; } 100% { transform: translatey(0); opacity: 0.8; } } @keyframes shake { 0% { transform-origin: center bottom; transform: rotate(4deg); } 2% { transform-origin: center bottom; transform: rotate(-4deg); } 3% { transform-origin: center bottom; transform: rotate(0deg); } 100% { transform-origin: center bottom; transform: rotate(0deg); } } .widget-next-steps-header .container > div { position: relative; display: grid; grid-template-areas: "cnt"; grid-template-columns: 1fr; align-items: center; padding: 3rem 2rem; text-align: center; } .widget-next-steps-header .container > div::before { position: absolute; bottom: 0; z-index: -1; width: 100%; height: 100%; content: " "; background-color: #F0F4E8; border-radius: 2.5rem; } @media (min-width: 992px) { .widget-next-steps-header .container > div::before { height: 80%; } } @media (min-width: 768px) { .widget-next-steps-header .container > div { grid-template-areas: ". img . cnt"; grid-template-columns: 1fr 3fr 1fr 7fr; padding: 0; text-align: left; } } .widget-next-steps-header .container > div img { grid-area: img; display: none; } @media (min-width: 768px) { .widget-next-steps-header .container > div img { display: block; position: relative; width: 150px; padding-top: 1.25rem; margin: 0 auto; } } @media (min-width: 992px) { .widget-next-steps-header .container > div img { display: block; position: relative; width: auto; padding-top: 0; margin: 0 auto; } } .widget-next-steps-header .container > div > div { grid-area: cnt; } @media (min-width: 992px) { .widget-next-steps-header .container > div > div { padding-top: 3rem; } } .widget-next-steps-bullets h2 { text-align: center; margin-bottom: 2rem; padding: 0 1rem; } @media (min-width: 992px) { .widget-next-steps-bullets h2 { margin-bottom: 3rem; } } .widget-next-steps-bullets .container { display: grid; grid-template-columns: 1fr; row-gap: 1rem; counter-reset: item; } @media (min-width: 768px) { .widget-next-steps-bullets .container { grid-template-columns: 1fr 1fr; column-gap: 1rem; row-gap: 1.5rem; } } @media (min-width: 992px) { .widget-next-steps-bullets .container { grid-template-columns: 1fr 1fr 1fr; column-gap: 1.5rem; row-gap: 2rem; } } .widget-next-steps-bullets .container p { margin-bottom: 0.5rem; } .widget-next-steps-bullets .container div { position: relative; padding-left: 4rem; } @media (min-width: 768px) { .widget-next-steps-bullets .container div { padding-left: 4.5rem; } } .widget-next-steps-bullets .container div::before { position: absolute; top: 0.625rem; left: 1.1875rem; content: counter(item) " "; counter-increment: item; font-weight: 500; } @media (min-width: 768px) { .widget-next-steps-bullets .container div::before { top: 0.8125rem; left: 1.4375rem; } } .widget-next-steps-bullets .container div:nth-child(odd) { background: url("../img/bullet-pops.png") no-repeat left top; background-size: 3rem; min-height: 3rem; } @media (min-width: 768px) { .widget-next-steps-bullets .container div:nth-child(odd) { background-size: 3.5rem; min-height: 3.5rem; } } .widget-next-steps-bullets .container div:nth-child(odd)::before { color: #00369d; } .widget-next-steps-bullets .container div:nth-child(even) { background: url("../img/bullet-dots.png") no-repeat left top; background-size: 3rem; background-size: 3rem; } @media (min-width: 768px) { .widget-next-steps-bullets .container div:nth-child(even) { background-size: 3.5rem; min-height: 3.5rem; } } .widget-next-steps-bullets .container div:nth-child(even)::before { color: #fff; } .widget-bullets .container h2, .widget-bullets .container h4 { text-align: center; margin-bottom: 2rem; padding: 0 1rem; } @media (min-width: 992px) { .widget-bullets .container h2, .widget-bullets .container h4 { margin-bottom: 3rem; } } .widget-bullets .container ul { list-style-position: inside; } .widget-bullets .container ul li:before { float: left; position: relative; margin-right: -0.625rem; left: -0.9375rem; } @media (min-width: 768px) { .widget-bullets .container ul { column-count: 2; column-gap: 1rem; } } @media (min-width: 992px) { .widget-bullets .container ul { column-count: 3; column-gap: 1.5rem; } } .widget-bullets .container > div { display: grid; grid-template-columns: 1fr; row-gap: 1rem; } .widget-bullets .container > div img { max-width: 2.875rem; } @media (min-width: 768px) { .widget-bullets .container > div { grid-template-columns: 1fr 1fr; column-gap: 1rem; row-gap: 1.5rem; } } @media (min-width: 992px) { .widget-bullets .container > div { grid-template-columns: 1fr 1fr 1fr; column-gap: 1.5rem; row-gap: 2rem; } } .widget-bullets .container > div div { display: grid; grid-template-columns: auto 1fr; gap: 1.375rem; } .nutrition-widget { margin-top: 0; } .nutrition-widget .nutrition .tabs { display: flex; justify-content: flex-start; align-items: stretch; align-content: flex-end; flex-flow: row wrap; } @media (min-width: 768px) { .nutrition-widget .nutrition .tabs { justify-content: center; } } .nutrition-widget .nutrition .tabs dt { order: 0; width: auto; } @media print { .nutrition-widget .nutrition .tabs dt { display: none; } } .nutrition-widget .nutrition .tabs dt ~ dt { margin: 0; } .nutrition-widget .nutrition .tabs dt button { font-family: "bellyswing", Helvetica, Arial, sans-serif; text-transform: uppercase; color: #56637b; padding: 0.75rem; border-radius: 0.625rem 0.625rem 0 0; font-weight: 400; font-size: 1.25rem; line-height: 1.6875rem; } .nutrition-widget .nutrition .tabs dt button[aria-expanded="true"] { background: #00369d; color: #fff; } .nutrition-widget .nutrition .tabs dd { order: 1; width: 100%; padding: 1.5rem 0; border-top: 0.0625rem solid #b4bcca; } @media (min-width: 768px) { .nutrition-widget .nutrition .tabs dd { padding: 1.5rem; border: 1px solid #b4bcca; border-radius: 0.625rem; } } @media (min-width: 992px) { .nutrition-widget .nutrition .tabs dd { padding: 2.5rem; } } @media print { .nutrition-widget .nutrition .tabs dd { border-top: none; padding: 0; } } .nutrition-widget .nutrition .tabs dd .header { margin: 0 0 0.875rem; } @media print { .nutrition-widget .nutrition .tabs dd .header { display: none; } } @media (min-width: 768px) { .nutrition-widget .nutrition .tabs dd .header { display: flex; justify-content: space-between; align-items: center; flex-direction: row; margin: 0 0 1.5rem; } } .nutrition-widget .nutrition .tabs dd .header p { color: #001338; font-weight: 400; font-size: 1rem; line-height: 1.5rem; margin: 0 0 1rem; } @media (min-width: 768px) { .nutrition-widget .nutrition .tabs dd .header p { margin: 0; } } .nutrition-widget .nutrition .tabs dd .header p a { color: #00369d; font-weight: 500; font-size: 1rem; line-height: 1.5rem; text-decoration: underline; } .nutrition-widget .nutrition .tabs dd .header p a:hover, .nutrition-widget .nutrition .tabs dd .header p a:focus, .nutrition-widget .nutrition .tabs dd .header p a.hover { color: #70b3e3; } .nutrition-widget .nutrition .tabs dd .header .print-link { color: #00369d; font-weight: 500; font-size: 1rem; line-height: 1.5rem; text-decoration: underline; display: block; position: relative; padding: 0 0 0 1.75rem; } .nutrition-widget .nutrition .tabs dd .header .print-link:hover, .nutrition-widget .nutrition .tabs dd .header .print-link:focus, .nutrition-widget .nutrition .tabs dd .header .print-link.hover { color: #70b3e3; } @media (min-width: 768px) { .nutrition-widget .nutrition .tabs dd .header .print-link { padding: 0 0 0 2rem; } } @media (min-width: 992px) { .nutrition-widget .nutrition .tabs dd .header .print-link { margin: 0; } } .nutrition-widget .nutrition .tabs dd .header .print-link:before { font-size: 1.25rem; position: absolute; left: 0; top: 50%; transform: translate(0, -50%); text-decoration: none; } @media (min-width: 992px) { .nutrition-widget .nutrition .tabs dd .header .print-link:before { font-size: 1.5rem; } } .nutrition-widget .nutrition .tabs dd .nutrition-info { display: grid; grid-template-columns: 1fr; grid-template-rows: auto; } @media (min-width: 768px) { .nutrition-widget .nutrition .tabs dd .nutrition-info { grid-template-columns: 1fr 1fr; column-gap: 1rem; } } @media (min-width: 992px) { .nutrition-widget .nutrition .tabs dd .nutrition-info { column-gap: 2.5rem; } } @media print { .nutrition-widget .nutrition .tabs dd .nutrition-info { display: grid; grid-template-columns: 1fr; grid-template-rows: auto; grid-template-columns: 1fr 1fr; column-gap: 2.5rem; } } .nutrition-widget .nutrition .tabs dd .nutrition-info .bulk { margin: 0 0 2rem; } @media (min-width: 768px) { .nutrition-widget .nutrition .tabs dd .nutrition-info .bulk { margin: 0; } } .nutrition-widget .nutrition .tabs dd .nutrition-info .bulk, .nutrition-widget .nutrition .tabs dd .nutrition-info .single { width: 100%; } .nutrition-widget .nutrition .tabs dd .nutrition-info .bulk table, .nutrition-widget .nutrition .tabs dd .nutrition-info .bulk thead, .nutrition-widget .nutrition .tabs dd .nutrition-info .bulk tbody, .nutrition-widget .nutrition .tabs dd .nutrition-info .bulk tfoot, .nutrition-widget .nutrition .tabs dd .nutrition-info .bulk tr, .nutrition-widget .nutrition .tabs dd .nutrition-info .bulk th, .nutrition-widget .nutrition .tabs dd .nutrition-info .bulk td, .nutrition-widget .nutrition .tabs dd .nutrition-info .single table, .nutrition-widget .nutrition .tabs dd .nutrition-info .single thead, .nutrition-widget .nutrition .tabs dd .nutrition-info .single tbody, .nutrition-widget .nutrition .tabs dd .nutrition-info .single tfoot, .nutrition-widget .nutrition .tabs dd .nutrition-info .single tr, .nutrition-widget .nutrition .tabs dd .nutrition-info .single th, .nutrition-widget .nutrition .tabs dd .nutrition-info .single td { width: auto; height: auto; margin: 0; padding: 0; border: none; border-collapse: inherit; border-spacing: 0; border-color: inherit; vertical-align: inherit; -webkit-border-horizontal-spacing: 0; -webkit-border-vertical-spacing: 0; } .nutrition-widget .nutrition .tabs dd .nutrition-info .bulk table, .nutrition-widget .nutrition .tabs dd .nutrition-info .single table { width: 100%; color: #001338; font-weight: 400; font-size: 1rem; line-height: 1.5rem; } .nutrition-widget .nutrition .tabs dd .nutrition-info .bulk table thead tr th, .nutrition-widget .nutrition .tabs dd .nutrition-info .single table thead tr th { text-align: left; border-bottom: 0.0625rem solid #b4bcca; padding: 0 0 0.75rem; font-weight: 500; font-size: 1rem; line-height: 1.5rem; color: #001338; text-transform: capitalize; } .nutrition-widget .nutrition .tabs dd .nutrition-info .bulk table tbody tr td:nth-child(2), .nutrition-widget .nutrition .tabs dd .nutrition-info .single table tbody tr td:nth-child(2) { text-align: right; } .nutrition-widget .nutrition .tabs dd .nutrition-info .bulk table tbody tr td.pad-top, .nutrition-widget .nutrition .tabs dd .nutrition-info .single table tbody tr td.pad-top { padding-top: 0.75rem; } .nutrition-widget .nutrition .tabs dd .nutrition-info .bulk table tbody tr td.pad-bot, .nutrition-widget .nutrition .tabs dd .nutrition-info .single table tbody tr td.pad-bot { padding-bottom: 0.5625rem; } .nutrition-widget .nutrition .tabs dd .nutrition-info .bulk table tbody tr td.border-bottom, .nutrition-widget .nutrition .tabs dd .nutrition-info .single table tbody tr td.border-bottom { border-bottom: 0.0625rem solid #b4bcca; } .nutrition-widget .nutrition .tabs dd .nutrition-info .bulk table tbody tr td:first-child:nth-last-child(2), .nutrition-widget .nutrition .tabs dd .nutrition-info .bulk table tbody tr td:first-child:nth-last-child(2) ~ td, .nutrition-widget .nutrition .tabs dd .nutrition-info .single table tbody tr td:first-child:nth-last-child(2), .nutrition-widget .nutrition .tabs dd .nutrition-info .single table tbody tr td:first-child:nth-last-child(2) ~ td { width: 50%; } .nutrition-widget .nutrition .tabs dd .nutrition-info .bulk table tfoot tr td, .nutrition-widget .nutrition .tabs dd .nutrition-info .single table tfoot tr td { color: #001338; font-weight: 400; font-size: 1rem; line-height: 1.5rem; padding: 0.75rem 0; } .nutrition-widget .nutrition .tabs dd .nutrition-info .bulk .disc h3, .nutrition-widget .nutrition .tabs dd .nutrition-info .single .disc h3 { font-weight: 500; font-size: 1rem; line-height: 1.5rem; color: #001338; text-transform: capitalize; font-family: "Futura-PT", Helvetica, Arial, sans-serif; margin: 0 0 0.5rem; } .nutrition-widget .nutrition .tabs dd .nutrition-info .bulk .disc p, .nutrition-widget .nutrition .tabs dd .nutrition-info .single .disc p { color: #001338; font-weight: 400; font-size: 1rem; line-height: 1.5rem; } .nutrition-header { overflow-x: hidden; } @media (max-width: 767.9px) { .nutrition-header i.dot.o.right, .nutrition-header i.dot.b.left { display: none; } } .nutrition-header #select-all { margin-bottom: 1.5rem; } .nutrition-print { display: grid; margin: 0 auto; padding: 0 1rem; max-width: 1400px; width: 100%; } @media (min-width: 992px) { .nutrition-print { width: 100%; } } @media (min-width: 1425px) { .nutrition-print { width: 100%; } } .nutrition-print .tabs, .nutrition-print .tabs-contents { display: none; } .nutrition-print .nutrition-widget { margin: 0; } .nutrition-print .nutrition-widget .nutrition .tabs dt { display: none; } .nutrition-print .nutrition-widget .nutrition .tabs dd { padding: 0; border: none; } .nutrition-print .nutrition-widget .nutrition .tabs dd .header { display: none; } .nutrition-print .nutrition-widget .nutrition .tabs dd .nutrition-info { grid-template-columns: 1fr; } .nutrition-print .nutrition-widget .nutrition .tabs dd .nutrition-info .bulk { display: none; } .nutrition-print .nutrition-widget .nutrition .tabs dd .nutrition-info .single .print-heading { font-family: "bellyswing", Helvetica, Arial, sans-serif; text-transform: uppercase; } @media (min-width: 768px) { .nutrition-print { padding: 0 2rem; } } @media (min-width: 992px) { .nutrition-print { padding: 0 3rem; } } .nutrition-print .container { border: 3px solid black; padding: 0 1rem 1rem; } @media (min-width: 768px) { .nutrition-print { grid-template-columns: repeat(2, 1fr); row-gap: 1.25rem; column-gap: 0.5rem; } } @media (min-width: 992px) { .nutrition-print { grid-template-columns: repeat(3, 1fr); } } @media print { .nutrition-print { grid-template-columns: repeat(2, 1fr); row-gap: 1.25rem; column-gap: 0.5rem; } } .nutrition-print .item { display: grid; grid-template-columns: 1fr auto; } .nutrition-print .item.first-block:nth-child(3) { margin-bottom: 0.75rem; } .nutrition-print .print-heading { display: block !important; font-family: 'Open Sans'; font-size: 1.5rem; border-bottom: 3px solid black; margin: 0 0 0.75rem; } .nutrition-print .header { display: none; } .nutrition-print .nutrition > hr { display: none; } .nutrition-print .nutrition > ul > hr { margin: 0.25rem 0 0.75rem; height: 3px; background-color: black; } .nutrition-print .nutrition > ul > hr:nth-of-type(1), .nutrition-print .nutrition > ul > hr:nth-of-type(4), .nutrition-print .nutrition > ul > hr:nth-of-type(5) { display: none; } .nutrition-print .nutrition { font-size: 0.875rem; line-height: 1.125rem; } .nutrition-print li { padding: 0 !important; } .nutrition-print li + li { margin-top: 0.25rem; } .nutrition-print .allergen { display: none; } /* -------------------------------------------------------------------------- *\ PHOTO CAROUSEL \* -------------------------------------------------------------------------- */ .photo-carousel { position: relative; } .photo-carousel h2 { margin-bottom: 0; color: #00369d; } .photo-carousel .card { min-width: 15.625rem; } @media (min-width: 992px) { .photo-carousel .card { min-width: 18.75rem; } } @media (min-width: 992px) { .photo-carousel .slick-slider { margin: 0; width: 100%; } } .photo-carousel .slick-list { overflow: hidden; padding-top: 2.125rem !important; } @media (min-width: 992px) { .photo-carousel .slick-list { padding-top: 4rem !important; } } .photo-carousel .slick-initialized .slick-slide { display: flex; } .photo-carousel .carousel-heading-container { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: center; align-items: center; flex-flow: row nowrap; } .photo-carousel .card { padding: 0.625rem; aspect-ratio: 6/5; } .photo-carousel.arrows-pos-side .slick-arrow { position: absolute; top: 50%; } .photo-carousel.arrows-pos-side .slick-arrow.slick-prev { left: -1.25rem; } .photo-carousel.arrows-pos-side .slick-arrow.slick-next { right: -1.25rem; } .photo-carousel img { display: block; object-fit: cover; width: 100%; height: 100%; border-radius: 0.625rem; } .pagebuilder #promo-popup { opacity: 1; visibility: visible; display: block; position: relative; } #promo-popup { width: 100%; max-width: 100%; height: 100%; max-height: 100%; } #promo-popup .modal-content a:hover { text-decoration: none; color: #001338; } #promo-popup .modal-close { top: 1.875rem; right: 1.875rem; width: 2.5rem; height: 2.5rem; border: none; filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.12)); transition: .25s all ease-in-out; } #promo-popup .modal-close span { font-size: 1rem; color: #00369d; } #promo-popup .modal-close:hover { background: #00369d; } #promo-popup .modal-close:hover span { color: white; } #promo-popup .modal-close:focus { background: #001338; } #promo-popup .modal-close:focus span { color: white; } #promo-popup .modal-close:focus::before, #promo-popup .modal-close:focus::after { display: none; } @media (min-width: 1200px) { #promo-popup .modal-close { top: 3.125rem; right: 3.125rem; width: 3rem; height: 3rem; } #promo-popup .modal-close span { font-size: 1.5rem; line-height: 2.1; } } #promo-popup .promo-popup { width: 100%; max-width: 100%; height: 100vh; max-height: 100vh; align-items: center; background-image: var(--mobileImg); background-size: cover; background-repeat: no-repeat; background-position: top center; margin: 0 auto; } #promo-popup .promo-popup .cnt { grid-column: 1 / -1; padding: 6.25rem 1.5rem 1.5rem; text-align: center; } #promo-popup .promo-popup .cnt img { width: 5.375rem; height: 4.1875rem; object-fit: contain; margin-bottom: 0.625rem; } #promo-popup .promo-popup .cnt h2 { color: #001338; font-size: 1.5rem; line-height: 1.5rem; } @media (min-width: 768px) { #promo-popup .promo-popup { background-image: var(--desktopImg); background-size: cover; background-repeat: no-repeat; background-position: center center; } #promo-popup .promo-popup .cnt { grid-column: 2 / 6; text-align: left; padding: 0; } #promo-popup .promo-popup .cnt h2 { color: #001338; font-size: 3rem; line-height: 3rem; } #promo-popup .promo-popup .cnt img { width: 7.75rem; height: 6.125rem; margin-bottom: 1.125rem; } #promo-popup .promo-popup .cnt p { font-size: 1.3125rem; line-height: 1.6875rem; margin-bottom: 2.5rem; } } @media (min-width: 992px) { #promo-popup .promo-popup .cnt { grid-column: 2 / 7; } } [data-sub-layout-container], [data-sub-layout] { padding: 0 !important; } #important, #nutrition { position: relative; top: -7.5rem; } .global-design-check section { border: 1px dashed grey; } .global-design-check .container { border: 1px solid lightblue; } .global-design-check .invert { background-color: black; } .global-design-check .headings-buttons .container { display: grid; grid-template-columns: 1fr 1fr; } @media (min-width: 992px) { .global-design-check .headings-buttons .container { grid-template-columns: 1fr 1fr 1fr; } } .global-design-check .headings-buttons .container div { border: 1px solid #ccc; padding: 20px; } .global-design-check .headings-buttons .b-heading { margin: 1em 0 0 0; } [class^="sd-simple-text"] { margin-top: 3rem !important; } @media (min-width: 992px) { [class^="sd-simple-text"] { margin-top: 3.5rem !important; } }