/* * Global CSS * * DO NOT EDIT THIS CSS FILE DIRECTLY. IT IS GENERATED BY GRUNT. * ------------------------------------------------------------- * This file is just a clearing-house, see the pcss directory * and edit the source files found there. * */ /* Reset */ /* ----------------------------------------------------------------------------- * * Global "Resets" * * ----------------------------------------------------------------------------- */ * { box-sizing: border-box; } @-ms-viewport { width: device-width; } @viewport { width: device-width; } /* ----------------------------------------------------------------------------- * * HTML5 Elements * * ----------------------------------------------------------------------------- */ article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { display: block; } /* ----------------------------------------------------------------------------- * * Normalize "Light" * * See normalize source code for clarity on rules * https://github.com/necolas/normalize.css * * ----------------------------------------------------------------------------- */ html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; font-size: 100%; -webkit-tap-highlight-color: transparent; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-smoothing: antialiased; min-width: 320px; overflow-x: hidden; } figure { line-height: 0; } figcaption { line-height: normal; } svg:not(:root) { overflow: hidden; } audio, canvas, progress, video { display: inline-block; } audio:not([controls]) { display: none; height: 0; } progress { vertical-align: baseline; } template, [hidden] { display: none; } a { background-color: transparent; -webkit-text-decoration-skip: objects; } abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; } pre { overflow: auto; } code, kbd, pre, samp { font-family: monospace; font-size: 1em; } b, strong { font-weight: inherit; } b, strong { font-weight: bolder; } dfn { font-style: italic; } mark { background-color: #ff0; color: #000; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } hr { border: 0; height: 0; } /* Input: Kill browser input chrome */ input[type="text"], input[type="email"], input[type="url"], input[type="search"], input[type="submit"], input[type="password"], input[type="reset"], input[type="button"], button, textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; } input, button, select, textarea, optgroup { color: inherit; font: inherit; line-height: normal; -webkit-font-smoothing: antialiased; } input, button, select, textarea { outline: 0; box-sizing: border-box; margin: 0; border-radius: 0; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #000; } legend { color: inherit; display: table; max-width: 100%; white-space: normal; } textarea { resize: none; overflow: auto; } optgroup { font-weight: bold; } button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; overflow: visible; } button[disabled], html input[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /* ----------------------------------------------------------------------------- * * Reset "Light" * * ----------------------------------------------------------------------------- */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, main, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; } ol, ul { list-style: none; } h1, h2, h3, h4, h5, h6, p { font-weight: normal; text-rendering: optimizeLegibility; } img { -ms-interpolation-mode: bicubic; height: auto; max-width: 100%; border-style: none; } iframe, video, embed { max-width: 100%; max-height: 100%; } /* Utilities */ /* ----------------------------------------------------------------------------- * * Utilities * * This file is just a clearing-house. * Make partials (start with an underscore) for any actual css code. * * ----------------------------------------------------------------------------- */ /* Variables */ :root {/* ----------------------------------------------------------------------------- * Border Radius * ----------------------------------------------------------------------------- */ } /* ----------------------------------------------------------------------------- * Colors * * Notes: utlize this tool for naming: http://chir.ag/projects/name-that-color/ * (props to Jason) * ----------------------------------------------------------------------------- */ :root {/* ----------------------------------------------------------------------------- * Primary Palette * ----------------------------------------------------------------------------- *//* Purples *//* Reds *//* Pinks *//* Greens *//* Oranges *//* Blacks *//* ----------------------------------------------------------------------------- * Whites * ----------------------------------------------------------------------------- *//* ----------------------------------------------------------------------------- * Greys * ----------------------------------------------------------------------------- *//* ----------------------------------------------------------------------------- * Blacks * ----------------------------------------------------------------------------- *//* ----------------------------------------------------------------------------- * Backgrounds * ----------------------------------------------------------------------------- *//* ----------------------------------------------------------------------------- * Links * ----------------------------------------------------------------------------- *//* ----------------------------------------------------------------------------- * Text * ----------------------------------------------------------------------------- *//* ----------------------------------------------------------------------------- * Borders * ----------------------------------------------------------------------------- *//* ----------------------------------------------------------------------------- * Social * ----------------------------------------------------------------------------- *//* ----------------------------------------------------------------------------- * Footer * ----------------------------------------------------------------------------- *//* ----------------------------------------------------------------------------- * Accordions * ----------------------------------------------------------------------------- */ } :root {/* Sine *//* Quad *//* Cubic *//* Quart *//* Quint *//* Expo *//* Circ *//* Back */ } :root {/* Caption *//* Prompt *//* Icon */ } :root {/* Borders *//* Colors *//* UI *//* Control icons *//* Control icons *//* Select icon *//* Select, Checkbox, & Radio *//* Select *//* Select *//* Select *//* Fonts *//* Label *//* Label *//* Helper Text & Descriptions *//* Helper Text & Descriptions *//* Text *//* Height *//* Spacing */ } :root {/* ----------------------------------------------------------------------------- * Label * ----------------------------------------------------------------------------- *//* ----------------------------------------------------------------------------- * Control Helper Text * ----------------------------------------------------------------------------- */ } :root {/* ----------------------------------------------------------------------------- * Legend * ----------------------------------------------------------------------------- *//* ----------------------------------------------------------------------------- * Legend, styled * ----------------------------------------------------------------------------- */ } :root {/* ----------------------------------------------------------------------------- * Controls * ----------------------------------------------------------------------------- *//* ----------------------------------------------------------------------------- * Control Icon * ----------------------------------------------------------------------------- *//* ----------------------------------------------------------------------------- * Control: Textarea * ----------------------------------------------------------------------------- *//* ----------------------------------------------------------------------------- * Control: Select * ----------------------------------------------------------------------------- *//* ----------------------------------------------------------------------------- * Control: Radio & Checkbox * ----------------------------------------------------------------------------- *//* ----------------------------------------------------------------------------- * Control: File * ----------------------------------------------------------------------------- *//* ----------------------------------------------------------------------------- * Control: Submit & Buttons * ----------------------------------------------------------------------------- */ } :root {/* ----------------------------------------------------------------------------- * Placeholder * ----------------------------------------------------------------------------- */ } :root {/* ----------------------------------------------------------------------------- * Gutters * ----------------------------------------------------------------------------- *//* Gutter - Large *//* Gutter - Medium *//* Gutter - Small *//* ----------------------------------------------------------------------------- * Widths * ----------------------------------------------------------------------------- */ } :root {/* ----------------------------------------------------------------------------- * Font Stacks * ----------------------------------------------------------------------------- *//* ----------------------------------------------------------------------------- * Font Stack for PDF Generation * ----------------------------------------------------------------------------- *//* ----------------------------------------------------------------------------- * Font Sizing * ----------------------------------------------------------------------------- *//* ----------------------------------------------------------------------------- * Font Weights * ----------------------------------------------------------------------------- *//* ----------------------------------------------------------------------------- * Line Heights * ----------------------------------------------------------------------------- *//* ----------------------------------------------------------------------------- * Letter Spacing * ----------------------------------------------------------------------------- */ } :root {/* ----------------------------------------------------------------------------- * Spacers (margin & padding) * ----------------------------------------------------------------------------- *//* ----------------------------------------------------------------------------- * Spacers (site header) * ----------------------------------------------------------------------------- *//* ----------------------------------------------------------------------------- * Spacers (WP Admin Bar) * ----------------------------------------------------------------------------- */ } /* Settings */ /* Mixins */ /* ----------------------------------------------------------------------------- * * Global Angles / Separators * * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * * Angles / Separators: Images * * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * * Angles / Separators: Post List Panel * * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * * Animation: Opacity In * * ----------------------------------------------------------------------------- */ @-webkit-keyframes opacity-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes opacity-in { 0% { opacity: 0; } 100% { opacity: 1; } } /* ----------------------------------------------------------------------------- * * Animation: Opacity Out * * ----------------------------------------------------------------------------- */ @-webkit-keyframes opacity-out { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes opacity-out { 0% { opacity: 1; } 100% { opacity: 0; } } /* ----------------------------------------------------------------------------- * * Animation: Visibility Out * * ----------------------------------------------------------------------------- */ @-webkit-keyframes visibility-out { 0% { visibility: visible; } 100% { visibility: hidden; z-index: auto; } } @keyframes visibility-out { 0% { visibility: visible; } 100% { visibility: hidden; z-index: auto; } } /* ----------------------------------------------------------------------------- * * Animation: Opacity & Small Transform Down * * ----------------------------------------------------------------------------- */ @-webkit-keyframes opacity-small-transform-down { 0% { opacity: 0; -webkit-transform: translateY(-5%); transform: translateY(-5%); } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @keyframes opacity-small-transform-down { 0% { opacity: 0; -webkit-transform: translateY(-5%); transform: translateY(-5%); } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } /* ----------------------------------------------------------------------------- * * Animation: Rotate * * ----------------------------------------------------------------------------- */ @-webkit-keyframes rotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* ----------------------------------------------------------------------------- * * Global Button Reset * * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * * Global Button Resets w/ Transition * * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * * Global Button * * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * * Button Submit * * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * * Form Control Label * * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * * Form: Control Group / Wrapper, radio & checkbox specific * * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * * Form Helper * * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * * Required Fields * * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * * Form Placeholders * * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * * Form Widgets/Controls * * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * * Form Control: Select * * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * * Form Control: Radio & Checkbox, custom styled * * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * * Form Control: Checkbox, custom styled * * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * * Form Control: Radio, custom styled * * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * * Form Control: Icons * * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * * L-Shaped Box Shadow * * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * * Triangles * * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * * Split long words into multiple lines * * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * * Truncate text to a single line, with an ellipsis * * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * * Remove antialiased font-smoothing * * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * * Add antialiased font-smoothing * * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * * Icons * * ----------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- * * Body Content * * ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- * * Content Anchors * * ------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * * List: Bullet / UL * * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * * List: Number / OL * * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * * Quotes & Blockquotes * * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * * Media Caption * * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * * Simple Sink (for use in widgets for example) * * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * * Clearfix * * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * * Touch & Pointer Bug Fix * * + Disable text select on clickable elements for pointer & touch events * * NOTE: * This should be utilized for elements that have a JS * touchstart or pointerdown event bound to them * * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * * Background Image Prop * * + Sets up a container to be a bgd image that covers a parent container * * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * * Hide from both screenreaders and browsers * * @author: h5bp.com/u * * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * * Hide only visually, but have it available for screenreaders * * @author: h5bp.com/v * * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * * Show element after has been hidden with %visually-hide * * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * * Accordion widget active mixin * * @author: sam * * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * * Site header top margin spacing, general (used for WC notices) * * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * * Site header top margin spacing on content that does not * have/support bgd image * * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * * Site header top margin spacing on content that does * have/support bgd image * * ----------------------------------------------------------------------------- */ /* Helper Classes */ /* ----------------------------------------------------------------------------- * * Foreground Colors * * ----------------------------------------------------------------------------- */ .u-fc-white { color: #fff !important; } .u-fc-mine-shaft { color: #292929 !important; } .u-fc-rolling-stone { color: #737a82 !important; } .u-fc-blue { color: #2db9ed !important; } /* ----------------------------------------------------------------------------- * * Background Colors * * ----------------------------------------------------------------------------- */ .u-bc-white { background-color: #fff !important; } .u-bc-grey { background-color: #f4f4f4 !important; } .u-bc-blue { background-color: #2db9ed !important; } .u-bc-denim { background-color: #1761b1 !important; } .u-bc-denim-alt { background-color: #0f81d9 !important; } .u-bc-venice-blue { background-color: #074f9b !important; } .u-bc-lochmara { background-color: #0284c7 !important; } .u-bc-purple { background-color: #343aab !important; } .u-bc-indigo { background-color: #5157d5 !important; } .u-bc-governor-bay { background-color: #384bbd !important; } .u-bc-governor-bay-alt { background-color: #3042ad !important; } .u-bc-indigo-alt { background-color: #4e4bd3 !important; } .u-bc-rust { background-color: #bf332c !important; } .u-bc-burnt-umber { background-color: #872722 !important; } .u-bc-persian-red { background-color: #ce3c2c !important; } .u-bc-flush-mahogany { background-color: #c63b31 !important; } .u-bc-burnt-umber-alt { background-color: #8d232b !important; } .u-bc-punch { background-color: #da3b32 !important; } .u-bc-magenta { background-color: #d4005d !important; } .u-bc-shiraz { background-color: #a60c3b !important; } .u-bc-razzmatazz { background-color: #e6106e !important; } .u-bc-razzmatazz-alt { background-color: #cd0c55 !important; } .u-bc-shiraz-alt { background-color: #aa0d41 !important; } .u-bc-green { background-color: #7bc03e !important; } .u-bc-forest-green { background-color: #387423 !important; } .u-bc-apple { background-color: #57a53c !important; } .u-bc-apple { background-color: #57a53c !important; } .u-bc-forest-green-alt { background-color: #33802e !important; } .u-bc-orange { background-color: #f19927 !important; } .u-bc-ochre { background-color: #d27b1d !important; } .u-bc-fuel-yellow { background-color: #eba819 !important; } .u-bc-carrot-orange { background-color: #ec8b18 !important; } .u-bc-hot-cinnamon { background-color: #d46b1d !important; } .u-bc-mine-shaft { background-color: #292929 !important; } .u-bc-cod-gray { background-color: #1b1919 !important; } .u-bc-cape-cod { background-color: #3c3e40 !important; } .u-bc-tundora { background-color: #403c3c !important; } .u-bc-shark { background-color: #2b2c2e !important; } /* ----------------------------------------------------------------------------- * * Component: Pills * * NOTES: * + Should always be placed on an html element inside a block * level element * * We have a few things that can be adjusted based on a class modifier: * + Pill size: small (default) or large * + Pill color: indigo, purple (includes ability to mark as anchor) * * Example (Large, Picton Blue Instance): *

* * ... * *

* * Example (Small, Purple, Anchor Instance): *
  • * * ... * *
    • * * ----------------------------------------------------------------------------- */ .u-decor-pill { color: #fff; position: relative; display: inline-block; padding: 4px 8px 0; } @media (min-width: 960px) { .u-decor-pill { padding: 4px 10px 1px; } } .u-decor-pill:before, .u-decor-pill:after { content: ''; display: block; left: 0; position: absolute; width: 100%; -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); height: 5px; } .u-decor-pill:before { top: -5px; } .u-decor-pill:after { bottom: -5px; } /* ----------------------------------------------------------------------------- * Pill: As Anchor * ----------------------------------------------------------------------------- */ .u-decor-pill--anchor { transition: none; } .u-decor-pill--anchor:visited { color: #fff; } .u-decor-pill--anchor:hover, .u-decor-pill--anchor:focus { color: #fff; } /* COLOR: Purple */ .u-decor-pill--anchor.u-decor-pill--color-purple:hover, .u-decor-pill--anchor.u-decor-pill--color-purple:focus { background-color: #5157d5; } .u-decor-pill--anchor.u-decor-pill--color-purple:hover:before, .u-decor-pill--anchor.u-decor-pill--color-purple:focus:before { background: linear-gradient(to right top, #5157d5 35%, transparent 50%); } .u-decor-pill--anchor.u-decor-pill--color-purple:hover:after, .u-decor-pill--anchor.u-decor-pill--color-purple:focus:after { background: linear-gradient(to right bottom, #5157d5 50%, transparent 65%); } /* COLOR: Picton Blue */ .u-decor-pill--anchor.u-decor-pill--color-blue:hover, .u-decor-pill--anchor.u-decor-pill--color-blue:focus { background-color: #0f81d9; } .u-decor-pill--anchor.u-decor-pill--color-blue:hover:before, .u-decor-pill--anchor.u-decor-pill--color-blue:focus:before { background: linear-gradient(to right top, #0f81d9 35%, transparent 50%); } .u-decor-pill--anchor.u-decor-pill--color-blue:hover:after, .u-decor-pill--anchor.u-decor-pill--color-blue:focus:after { background: linear-gradient(to right bottom, #0f81d9 50%, transparent 65%); } /* ----------------------------------------------------------------------------- * Pill: Colors * ----------------------------------------------------------------------------- */ /* COLOR: Purple */ .u-decor-pill--color-purple { background-color: #343aab; } .u-decor-pill--color-purple:before { background: linear-gradient(to right top, #343aab 35%, transparent 50%); } .u-decor-pill--color-purple:after { background: linear-gradient(to right bottom, #343aab 50%, transparent 65%); } /* SIZE: Large */ .u-decor-pill--color-purple.u-decor-pill--lg:before { background: linear-gradient(to right top, #343aab 40%, transparent 50%); } .u-decor-pill--color-purple.u-decor-pill--lg:after { background: linear-gradient(to right bottom, #343aab 50%, transparent 60%); } /* COLOR: Picton Blue */ .u-decor-pill--color-blue { background-color: #2db9ed; } .u-decor-pill--color-blue:before { background: linear-gradient(to right top, #2db9ed 35%, transparent 50%); } .u-decor-pill--color-blue:after { background: linear-gradient(to right bottom, #2db9ed 50%, transparent 65%); } /* SIZE: Large */ .u-decor-pill--color-blue.u-decor-pill--lg:before { background: linear-gradient(to right top, #2db9ed 40%, transparent 50%); } .u-decor-pill--color-blue.u-decor-pill--lg:after { background: linear-gradient(to right bottom, #2db9ed 50%, transparent 60%); } /* ----------------------------------------------------------------------------- * Pill: Sizes * ----------------------------------------------------------------------------- */ /* SIZE: Large */ .u-decor-pill--lg { padding: 5px 10px 0; } @media (min-width: 960px) { .u-decor-pill--lg { padding: 5px 20px 1px 10px; } } .u-decor-pill--lg:before, .u-decor-pill--lg:after { height: 7px; } .u-decor-pill--lg:before { top: -7px; } .u-decor-pill--lg:after { bottom: -7px; } /* ----------------------------------------------------------------------------- * * Decor: Right Angle Borders * * ----------------------------------------------------------------------------- */ .u-decor-right-angle { line-height: 0; } .u-decor-right-angle--hover {} .u-decor-right-angle--denim { box-shadow: -1px 1px #1761b1, -2px 2px #1761b1, -3px 3px #1761b1, -4px 4px #1761b1, -5px 5px #1761b1, -6px 6px #1761b1, -1px 0 #1761b1, -2px 1px #1761b1, -3px 2px #1761b1, -4px 3px #1761b1, -5px 4px #1761b1, -6px 5px #1761b1; } @media (min-width: 768px) { .u-decor-right-angle--denim { box-shadow: -1px 1px #1761b1, -2px 2px #1761b1, -3px 3px #1761b1, -4px 4px #1761b1, -5px 5px #1761b1, -6px 6px #1761b1, -7px 7px #1761b1, -8px 8px #1761b1, -1px 0 #1761b1, -2px 1px #1761b1, -3px 2px #1761b1, -4px 3px #1761b1, -5px 4px #1761b1, -6px 5px #1761b1, -7px 6px #1761b1, -8px 7px #1761b1; } } /* CASE: Hover */ .u-decor-right-angle--denim.u-decor-right-angle--hover:hover, .u-decor-right-angle--denim.u-decor-right-angle--hover:focus, .u-decor-right-angle--hover:hover .u-decor-right-angle--denim, .u-decor-right-angle--hover:focus .u-decor-right-angle--denim { box-shadow: -1px 1px #0f81d9, -2px 2px #0f81d9, -3px 3px #0f81d9, -4px 4px #0f81d9, -5px 5px #0f81d9, -6px 6px #0f81d9, -1px 0 #0f81d9, -2px 1px #0f81d9, -3px 2px #0f81d9, -4px 3px #0f81d9, -5px 4px #0f81d9, -6px 5px #0f81d9; } @media (min-width: 768px) { .u-decor-right-angle--denim.u-decor-right-angle--hover:hover, .u-decor-right-angle--denim.u-decor-right-angle--hover:focus, .u-decor-right-angle--hover:hover .u-decor-right-angle--denim, .u-decor-right-angle--hover:focus .u-decor-right-angle--denim { box-shadow: -1px 1px #0f81d9, -2px 2px #0f81d9, -3px 3px #0f81d9, -4px 4px #0f81d9, -5px 5px #0f81d9, -6px 6px #0f81d9, -7px 7px #0f81d9, -8px 8px #0f81d9, -1px 0 #0f81d9, -2px 1px #0f81d9, -3px 2px #0f81d9, -4px 3px #0f81d9, -5px 4px #0f81d9, -6px 5px #0f81d9, -7px 6px #0f81d9, -8px 7px #0f81d9; } } .u-decor-right-angle--picton-blue {/*@mixin right-angle-border-6px var(--color-picton-blue); @media (--viewport-medium) { @mixin right-angle-border-8px var(--color-picton-blue); }*/ } /* CASE: Hover */ .u-decor-right-angle--picton-blue.u-decor-right-angle--hover:hover, .u-decor-right-angle--picton-blue.u-decor-right-angle--hover:focus, .u-decor-right-angle--hover:hover .u-decor-right-angle--picton-blue, .u-decor-right-angle--hover:focus .u-decor-right-angle--picton-blue { box-shadow: -1px 1px #0f81d9, -2px 2px #0f81d9, -3px 3px #0f81d9, -4px 4px #0f81d9, -5px 5px #0f81d9, -6px 6px #0f81d9, -1px 0 #0f81d9, -2px 1px #0f81d9, -3px 2px #0f81d9, -4px 3px #0f81d9, -5px 4px #0f81d9, -6px 5px #0f81d9; } @media (min-width: 768px) { .u-decor-right-angle--picton-blue.u-decor-right-angle--hover:hover, .u-decor-right-angle--picton-blue.u-decor-right-angle--hover:focus, .u-decor-right-angle--hover:hover .u-decor-right-angle--picton-blue, .u-decor-right-angle--hover:focus .u-decor-right-angle--picton-blue { box-shadow: -1px 1px #0f81d9, -2px 2px #0f81d9, -3px 3px #0f81d9, -4px 4px #0f81d9, -5px 5px #0f81d9, -6px 6px #0f81d9, -7px 7px #0f81d9, -8px 8px #0f81d9, -1px 0 #0f81d9, -2px 1px #0f81d9, -3px 2px #0f81d9, -4px 3px #0f81d9, -5px 4px #0f81d9, -6px 5px #0f81d9, -7px 6px #0f81d9, -8px 7px #0f81d9; } } .u-decor-right-angle--dodger-blue { box-shadow: -1px 1px #39c9ff, -2px 2px #39c9ff, -3px 3px #39c9ff, -4px 4px #39c9ff, -5px 5px #39c9ff, -6px 6px #39c9ff, -1px 0 #39c9ff, -2px 1px #39c9ff, -3px 2px #39c9ff, -4px 3px #39c9ff, -5px 4px #39c9ff, -6px 5px #39c9ff; } @media (min-width: 768px) { .u-decor-right-angle--dodger-blue { box-shadow: -1px 1px #39c9ff, -2px 2px #39c9ff, -3px 3px #39c9ff, -4px 4px #39c9ff, -5px 5px #39c9ff, -6px 6px #39c9ff, -7px 7px #39c9ff, -8px 8px #39c9ff, -1px 0 #39c9ff, -2px 1px #39c9ff, -3px 2px #39c9ff, -4px 3px #39c9ff, -5px 4px #39c9ff, -6px 5px #39c9ff, -7px 6px #39c9ff, -8px 7px #39c9ff; } } /* CASE: Hover */ .u-decor-right-angle--dodger-blue.u-decor-right-angle--hover:hover, .u-decor-right-angle--dodger-blue.u-decor-right-angle--hover:focus, .u-decor-right-angle--hover:hover .u-decor-right-angle--dodger-blue, .u-decor-right-angle--hover:focus .u-decor-right-angle--dodger-blue { box-shadow: -1px 1px #0f81d9, -2px 2px #0f81d9, -3px 3px #0f81d9, -4px 4px #0f81d9, -5px 5px #0f81d9, -6px 6px #0f81d9, -1px 0 #0f81d9, -2px 1px #0f81d9, -3px 2px #0f81d9, -4px 3px #0f81d9, -5px 4px #0f81d9, -6px 5px #0f81d9; } @media (min-width: 768px) { .u-decor-right-angle--dodger-blue.u-decor-right-angle--hover:hover, .u-decor-right-angle--dodger-blue.u-decor-right-angle--hover:focus, .u-decor-right-angle--hover:hover .u-decor-right-angle--dodger-blue, .u-decor-right-angle--hover:focus .u-decor-right-angle--dodger-blue { box-shadow: -1px 1px #0f81d9, -2px 2px #0f81d9, -3px 3px #0f81d9, -4px 4px #0f81d9, -5px 5px #0f81d9, -6px 6px #0f81d9, -7px 7px #0f81d9, -8px 8px #0f81d9, -1px 0 #0f81d9, -2px 1px #0f81d9, -3px 2px #0f81d9, -4px 3px #0f81d9, -5px 4px #0f81d9, -6px 5px #0f81d9, -7px 6px #0f81d9, -8px 7px #0f81d9; } } .u-decor-right-angle--indigo { box-shadow: -1px 1px #5157d5, -2px 2px #5157d5, -3px 3px #5157d5, -4px 4px #5157d5, -5px 5px #5157d5, -6px 6px #5157d5, -1px 0 #5157d5, -2px 1px #5157d5, -3px 2px #5157d5, -4px 3px #5157d5, -5px 4px #5157d5, -6px 5px #5157d5; } @media (min-width: 768px) { .u-decor-right-angle--indigo { box-shadow: -1px 1px #5157d5, -2px 2px #5157d5, -3px 3px #5157d5, -4px 4px #5157d5, -5px 5px #5157d5, -6px 6px #5157d5, -7px 7px #5157d5, -8px 8px #5157d5, -1px 0 #5157d5, -2px 1px #5157d5, -3px 2px #5157d5, -4px 3px #5157d5, -5px 4px #5157d5, -6px 5px #5157d5, -7px 6px #5157d5, -8px 7px #5157d5; } } /* CASE: Hover */ .u-decor-right-angle--indigo.u-decor-right-angle--hover:hover, .u-decor-right-angle--indigo.u-decor-right-angle--hover:focus, .u-decor-right-angle--hover:hover .u-decor-right-angle--indigo, .u-decor-right-angle--hover:focus .u-decor-right-angle--indigo { box-shadow: -1px 1px #384bbd, -2px 2px #384bbd, -3px 3px #384bbd, -4px 4px #384bbd, -5px 5px #384bbd, -6px 6px #384bbd, -1px 0 #384bbd, -2px 1px #384bbd, -3px 2px #384bbd, -4px 3px #384bbd, -5px 4px #384bbd, -6px 5px #384bbd; } @media (min-width: 768px) { .u-decor-right-angle--indigo.u-decor-right-angle--hover:hover, .u-decor-right-angle--indigo.u-decor-right-angle--hover:focus, .u-decor-right-angle--hover:hover .u-decor-right-angle--indigo, .u-decor-right-angle--hover:focus .u-decor-right-angle--indigo { box-shadow: -1px 1px #384bbd, -2px 2px #384bbd, -3px 3px #384bbd, -4px 4px #384bbd, -5px 5px #384bbd, -6px 6px #384bbd, -7px 7px #384bbd, -8px 8px #384bbd, -1px 0 #384bbd, -2px 1px #384bbd, -3px 2px #384bbd, -4px 3px #384bbd, -5px 4px #384bbd, -6px 5px #384bbd, -7px 6px #384bbd, -8px 7px #384bbd; } } .u-decor-right-angle--burnt-umber { box-shadow: -1px 1px #872722, -2px 2px #872722, -3px 3px #872722, -4px 4px #872722, -5px 5px #872722, -6px 6px #872722, -1px 0 #872722, -2px 1px #872722, -3px 2px #872722, -4px 3px #872722, -5px 4px #872722, -6px 5px #872722; } @media (min-width: 768px) { .u-decor-right-angle--burnt-umber { box-shadow: -1px 1px #872722, -2px 2px #872722, -3px 3px #872722, -4px 4px #872722, -5px 5px #872722, -6px 6px #872722, -7px 7px #872722, -8px 8px #872722, -1px 0 #872722, -2px 1px #872722, -3px 2px #872722, -4px 3px #872722, -5px 4px #872722, -6px 5px #872722, -7px 6px #872722, -8px 7px #872722; } } /* CASE: Hover */ .u-decor-right-angle--burnt-umber.u-decor-right-angle--hover:hover, .u-decor-right-angle--burnt-umber.u-decor-right-angle--hover:focus, .u-decor-right-angle--hover:hover .u-decor-right-angle--burnt-umber, .u-decor-right-angle--hover:focus .u-decor-right-angle--burnt-umber { box-shadow: -1px 1px #ce3c2c, -2px 2px #ce3c2c, -3px 3px #ce3c2c, -4px 4px #ce3c2c, -5px 5px #ce3c2c, -6px 6px #ce3c2c, -1px 0 #ce3c2c, -2px 1px #ce3c2c, -3px 2px #ce3c2c, -4px 3px #ce3c2c, -5px 4px #ce3c2c, -6px 5px #ce3c2c; } @media (min-width: 768px) { .u-decor-right-angle--burnt-umber.u-decor-right-angle--hover:hover, .u-decor-right-angle--burnt-umber.u-decor-right-angle--hover:focus, .u-decor-right-angle--hover:hover .u-decor-right-angle--burnt-umber, .u-decor-right-angle--hover:focus .u-decor-right-angle--burnt-umber { box-shadow: -1px 1px #ce3c2c, -2px 2px #ce3c2c, -3px 3px #ce3c2c, -4px 4px #ce3c2c, -5px 5px #ce3c2c, -6px 6px #ce3c2c, -7px 7px #ce3c2c, -8px 8px #ce3c2c, -1px 0 #ce3c2c, -2px 1px #ce3c2c, -3px 2px #ce3c2c, -4px 3px #ce3c2c, -5px 4px #ce3c2c, -6px 5px #ce3c2c, -7px 6px #ce3c2c, -8px 7px #ce3c2c; } } .u-decor-right-angle--shiraz { box-shadow: -1px 1px #a60c3b, -2px 2px #a60c3b, -3px 3px #a60c3b, -4px 4px #a60c3b, -5px 5px #a60c3b, -6px 6px #a60c3b, -1px 0 #a60c3b, -2px 1px #a60c3b, -3px 2px #a60c3b, -4px 3px #a60c3b, -5px 4px #a60c3b, -6px 5px #a60c3b; } @media (min-width: 768px) { .u-decor-right-angle--shiraz { box-shadow: -1px 1px #a60c3b, -2px 2px #a60c3b, -3px 3px #a60c3b, -4px 4px #a60c3b, -5px 5px #a60c3b, -6px 6px #a60c3b, -7px 7px #a60c3b, -8px 8px #a60c3b, -1px 0 #a60c3b, -2px 1px #a60c3b, -3px 2px #a60c3b, -4px 3px #a60c3b, -5px 4px #a60c3b, -6px 5px #a60c3b, -7px 6px #a60c3b, -8px 7px #a60c3b; } } /* CASE: Hover */ .u-decor-right-angle--shiraz.u-decor-right-angle--hover:hover, .u-decor-right-angle--shiraz.u-decor-right-angle--hover:focus, .u-decor-right-angle--hover:hover .u-decor-right-angle--shiraz, .u-decor-right-angle--hover:focus .u-decor-right-angle--shiraz { box-shadow: -1px 1px #e6106e, -2px 2px #e6106e, -3px 3px #e6106e, -4px 4px #e6106e, -5px 5px #e6106e, -6px 6px #e6106e, -1px 0 #e6106e, -2px 1px #e6106e, -3px 2px #e6106e, -4px 3px #e6106e, -5px 4px #e6106e, -6px 5px #e6106e; } @media (min-width: 768px) { .u-decor-right-angle--shiraz.u-decor-right-angle--hover:hover, .u-decor-right-angle--shiraz.u-decor-right-angle--hover:focus, .u-decor-right-angle--hover:hover .u-decor-right-angle--shiraz, .u-decor-right-angle--hover:focus .u-decor-right-angle--shiraz { box-shadow: -1px 1px #e6106e, -2px 2px #e6106e, -3px 3px #e6106e, -4px 4px #e6106e, -5px 5px #e6106e, -6px 6px #e6106e, -7px 7px #e6106e, -8px 8px #e6106e, -1px 0 #e6106e, -2px 1px #e6106e, -3px 2px #e6106e, -4px 3px #e6106e, -5px 4px #e6106e, -6px 5px #e6106e, -7px 6px #e6106e, -8px 7px #e6106e; } } .u-decor-right-angle--forest-green { box-shadow: -1px 1px #387423, -2px 2px #387423, -3px 3px #387423, -4px 4px #387423, -5px 5px #387423, -6px 6px #387423, -1px 0 #387423, -2px 1px #387423, -3px 2px #387423, -4px 3px #387423, -5px 4px #387423, -6px 5px #387423; } @media (min-width: 768px) { .u-decor-right-angle--forest-green { box-shadow: -1px 1px #387423, -2px 2px #387423, -3px 3px #387423, -4px 4px #387423, -5px 5px #387423, -6px 6px #387423, -7px 7px #387423, -8px 8px #387423, -1px 0 #387423, -2px 1px #387423, -3px 2px #387423, -4px 3px #387423, -5px 4px #387423, -6px 5px #387423, -7px 6px #387423, -8px 7px #387423; } } /* CASE: Hover */ .u-decor-right-angle--forest-green.u-decor-right-angle--hover:hover, .u-decor-right-angle--forest-green.u-decor-right-angle--hover:focus, .u-decor-right-angle--hover:hover .u-decor-right-angle--forest-green, .u-decor-right-angle--hover:focus .u-decor-right-angle--forest-green { box-shadow: -1px 1px #57a53c, -2px 2px #57a53c, -3px 3px #57a53c, -4px 4px #57a53c, -5px 5px #57a53c, -6px 6px #57a53c, -1px 0 #57a53c, -2px 1px #57a53c, -3px 2px #57a53c, -4px 3px #57a53c, -5px 4px #57a53c, -6px 5px #57a53c; } @media (min-width: 768px) { .u-decor-right-angle--forest-green.u-decor-right-angle--hover:hover, .u-decor-right-angle--forest-green.u-decor-right-angle--hover:focus, .u-decor-right-angle--hover:hover .u-decor-right-angle--forest-green, .u-decor-right-angle--hover:focus .u-decor-right-angle--forest-green { box-shadow: -1px 1px #57a53c, -2px 2px #57a53c, -3px 3px #57a53c, -4px 4px #57a53c, -5px 5px #57a53c, -6px 6px #57a53c, -7px 7px #57a53c, -8px 8px #57a53c, -1px 0 #57a53c, -2px 1px #57a53c, -3px 2px #57a53c, -4px 3px #57a53c, -5px 4px #57a53c, -6px 5px #57a53c, -7px 6px #57a53c, -8px 7px #57a53c; } } .u-decor-right-angle--ochre { box-shadow: -1px 1px #d27b1d, -2px 2px #d27b1d, -3px 3px #d27b1d, -4px 4px #d27b1d, -5px 5px #d27b1d, -6px 6px #d27b1d, -1px 0 #d27b1d, -2px 1px #d27b1d, -3px 2px #d27b1d, -4px 3px #d27b1d, -5px 4px #d27b1d, -6px 5px #d27b1d; } @media (min-width: 768px) { .u-decor-right-angle--ochre { box-shadow: -1px 1px #d27b1d, -2px 2px #d27b1d, -3px 3px #d27b1d, -4px 4px #d27b1d, -5px 5px #d27b1d, -6px 6px #d27b1d, -7px 7px #d27b1d, -8px 8px #d27b1d, -1px 0 #d27b1d, -2px 1px #d27b1d, -3px 2px #d27b1d, -4px 3px #d27b1d, -5px 4px #d27b1d, -6px 5px #d27b1d, -7px 6px #d27b1d, -8px 7px #d27b1d; } } /* CASE: Hover */ .u-decor-right-angle--ochre.u-decor-right-angle--hover:hover, .u-decor-right-angle--ochre.u-decor-right-angle--hover:focus, .u-decor-right-angle--hover:hover .u-decor-right-angle--ochre, .u-decor-right-angle--hover:focus .u-decor-right-angle--ochre { box-shadow: -1px 1px #eba819, -2px 2px #eba819, -3px 3px #eba819, -4px 4px #eba819, -5px 5px #eba819, -6px 6px #eba819, -1px 0 #eba819, -2px 1px #eba819, -3px 2px #eba819, -4px 3px #eba819, -5px 4px #eba819, -6px 5px #eba819; } @media (min-width: 768px) { .u-decor-right-angle--ochre.u-decor-right-angle--hover:hover, .u-decor-right-angle--ochre.u-decor-right-angle--hover:focus, .u-decor-right-angle--hover:hover .u-decor-right-angle--ochre, .u-decor-right-angle--hover:focus .u-decor-right-angle--ochre { box-shadow: -1px 1px #eba819, -2px 2px #eba819, -3px 3px #eba819, -4px 4px #eba819, -5px 5px #eba819, -6px 6px #eba819, -7px 7px #eba819, -8px 8px #eba819, -1px 0 #eba819, -2px 1px #eba819, -3px 2px #eba819, -4px 3px #eba819, -5px 4px #eba819, -6px 5px #eba819, -7px 6px #eba819, -8px 7px #eba819; } } .u-decor-right-angle--cod-gray { box-shadow: -1px 1px #1b1919, -2px 2px #1b1919, -3px 3px #1b1919, -4px 4px #1b1919, -5px 5px #1b1919, -6px 6px #1b1919, -1px 0 #1b1919, -2px 1px #1b1919, -3px 2px #1b1919, -4px 3px #1b1919, -5px 4px #1b1919, -6px 5px #1b1919; } @media (min-width: 768px) { .u-decor-right-angle--cod-gray { box-shadow: -1px 1px #1b1919, -2px 2px #1b1919, -3px 3px #1b1919, -4px 4px #1b1919, -5px 5px #1b1919, -6px 6px #1b1919, -7px 7px #1b1919, -8px 8px #1b1919, -1px 0 #1b1919, -2px 1px #1b1919, -3px 2px #1b1919, -4px 3px #1b1919, -5px 4px #1b1919, -6px 5px #1b1919, -7px 6px #1b1919, -8px 7px #1b1919; } } /* CASE: Hover */ .u-decor-right-angle--cod-gray.u-decor-right-angle--hover:hover, .u-decor-right-angle--cod-gray.u-decor-right-angle--hover:focus, .u-decor-right-angle--hover:hover .u-decor-right-angle--cod-gray, .u-decor-right-angle--hover:focus .u-decor-right-angle--cod-gray { box-shadow: -1px 1px #3c3e40, -2px 2px #3c3e40, -3px 3px #3c3e40, -4px 4px #3c3e40, -5px 5px #3c3e40, -6px 6px #3c3e40, -1px 0 #3c3e40, -2px 1px #3c3e40, -3px 2px #3c3e40, -4px 3px #3c3e40, -5px 4px #3c3e40, -6px 5px #3c3e40; } @media (min-width: 768px) { .u-decor-right-angle--cod-gray.u-decor-right-angle--hover:hover, .u-decor-right-angle--cod-gray.u-decor-right-angle--hover:focus, .u-decor-right-angle--hover:hover .u-decor-right-angle--cod-gray, .u-decor-right-angle--hover:focus .u-decor-right-angle--cod-gray { box-shadow: -1px 1px #3c3e40, -2px 2px #3c3e40, -3px 3px #3c3e40, -4px 4px #3c3e40, -5px 5px #3c3e40, -6px 6px #3c3e40, -7px 7px #3c3e40, -8px 8px #3c3e40, -1px 0 #3c3e40, -2px 1px #3c3e40, -3px 2px #3c3e40, -4px 3px #3c3e40, -5px 4px #3c3e40, -6px 5px #3c3e40, -7px 6px #3c3e40, -8px 7px #3c3e40; } } /* ----------------------------------------------------------------------------- * * Decor: Right Angle Borders * * ----------------------------------------------------------------------------- */ .u-decor-square:before { content: ""; width: 9px; height: 9px; display: inline-block; vertical-align: middle; margin-right: 6px; margin-top: -3px; } @media (min-width: 768px) { .u-decor-square:before { width: 11px; height: 11px; margin-right: 8px; } } .u-decor-square--small:before { width: 7px; height: 7px; margin-right: 6px; } .u-decor-square--blue:before { background-color: #2db9ed; } /* ----------------------------------------------------------------------------- * * Animation: Bump block up * * ----------------------------------------------------------------------------- */ .u-animation-transform-up { transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .u-animation-transform-up:hover, .u-animation-transform-up:focus { -webkit-transform: translateY(-2%); -ms-transform: translateY(-2%); transform: translateY(-2%); } /* ----------------------------------------------------------------------------- * * Child Separators * * Notes: Works as a parent helper class and will add a separator for the * direct children of the parent * * Example: * * * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * Child Separator: " | " * ----------------------------------------------------------------------------- */ .u-sep-pipe > *:after { content: '|'; display: inline; padding: 0 3px; } .u-sep-pipe > *:last-of-type:after { content: none; } /* ----------------------------------------------------------------------------- * Child Separator: " / " * ----------------------------------------------------------------------------- */ .u-sep-slash > *:after { content: '/'; padding: 0 7px; } .u-sep-slash > *:last-of-type:after { content: none; } /* ----------------------------------------------------------------------------- * Child Separator: ", " * ----------------------------------------------------------------------------- */ .u-sep-comma > *:after { content: ','; display: inline; padding: 0; } .u-sep-comma > *:last-of-type:after { content: none; } /* ----------------------------------------------------------------------------- * Child Separator: " - " * ----------------------------------------------------------------------------- */ .u-sep-dash > *:after { content: ' - '; display: inline; padding: 0; } .u-sep-dash > *:last-of-type:after { content: none; } /* ----------------------------------------------------------------------------- * Child Separator: " ยท " * ----------------------------------------------------------------------------- */ .u-sep-dot > *:after { content: ''; height: 5px; width: 5px; border-radius: 50%; background-color: #f4f4f4; display: inline-block; position: relative; bottom: 3px; margin: 0 10px; } .u-sep-dot > *:last-of-type:after { content: none; } /* ----------------------------------------------------------------------------- * * Spacer: Margin Bottom * * ----------------------------------------------------------------------------- */ .u-spacer-mb-s { margin-bottom: 0.5em; } .u-spacer-mb-m { margin-bottom: 0.75em; } .u-spacer-mb-mlg { margin-bottom: 0.95em; } .u-spacer-mb-lg { margin-bottom: 1.25em; } .u-spacer-mb-xlg { margin-bottom: 1.65em; } /* ----------------------------------------------------------------------------- * * Clearfix * * ----------------------------------------------------------------------------- */ .u-clearfix:after { content: ''; display: table; clear: both; } /* ----------------------------------------------------------------------------- * * Ellipsis: Adjust specific font rendering issues with ellipsis * * ----------------------------------------------------------------------------- */ .u-fix-ellipisis { position: relative; top: 4px; } @media (min-width: 768px) { .u-fix-ellipisis { top: 5px; } } /* ----------------------------------------------------------------------------- * * Display: Inline block * * ----------------------------------------------------------------------------- */ .u-inline-block > * { display: inline-block; margin: 5px 10px; } /* ----------------------------------------------------------------------------- * * Text Align: Center * * ----------------------------------------------------------------------------- */ .u-center { text-align: center; } /* ----------------------------------------------------------------------------- * * Header Shim & Decor: For custom pages that do not have a subheader * * ----------------------------------------------------------------------------- */ .u-header-shim-and-decor { margin-top: 60px; width: 100%; position: relative;/* CASE: Top Angle &:before { @media (--viewport-full) { height: 52px; background-image: svg-load('angles/header-desktop.svg'); background-size: 1952px 52px; content: ''; display: block; position: absolute; width: 100%; left: 0; top: 0; right: 0; } }*/ } @media (min-width: 960px) { .u-header-shim-and-decor { margin-top: 141px; } } @media (min-width: 1215px) { .u-header-shim-and-decor { margin-top: 158px; } } /* CASE: Filler */ @media (min-width: 960px) { .u-header-shim-and-decor:after { content: ''; display: block; position: absolute; width: 100%; left: 0; right: 0; background: #f4f4f4; top: -140px; height: 141px; } } @media (min-width: 1215px) { .u-header-shim-and-decor:after { top: -157px; height: 158px; } } @media (min-width: 960px) { .u-header-shim-and-decor { padding-top: 70px; } } @media (min-width: 1100px) { .u-header-shim-and-decor { padding-top: 98px; } } .u-header-with-banner { width: 100%; position: relative; } @media (min-width: 960px) { .u-header-with-banner { padding-top: 0px; margin-top: 148px; } } @media (max-width: 960px) { .u-header-with-banner { padding-top: 0px; margin-top: 68px; } } @media (min-width: 1200px) { .u-header-with-banner { margin-top: 168px; } } .u-table-border, .u-table-border td, .u-table-border th { border: 1px solid #e3e3e3 !important; } /* ----------------------------------------------------------------------------- * * Hide from screenreaders & browsers * * ----------------------------------------------------------------------------- */ .u-hidden { display: none !important; visibility: hidden; } /* ----------------------------------------------------------------------------- * * Hide from browsers & show for screenreaders * * ----------------------------------------------------------------------------- */ .u-visual-hide, .screen-reader-text { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* ----------------------------------------------------------------------------- * * Show for browsers & screenreaders * * ----------------------------------------------------------------------------- */ .u-visual-show { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* Base */ /* ----------------------------------------------------------------------------- * * Base * * This file is just a clearing-house. * Make partials (start with an underscore) for any actual css code. * * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * * Font: Kozuka Gothic Pro (via Typekit) * * WEIGHTS & STYLES: * * Regular (400) * Bold (700) * Heavy (900) * * ----------------------------------------------------------------------------- */ /* NOTE: served via Typekit */ /* ----------------------------------------------------------------------------- * * Font Icons: Icons (via IcoMoon) * * ----------------------------------------------------------------------------- */ @font-face { font-family: 'core-icons'; src: url('/wp-content/themes/core/fonts/icons-core/core-icons.eot?118nxu'); src: url('/wp-content/themes/core/fonts/icons-core/core-icons.eot?118nxu#iefix') format('embedded-opentype'), url('/wp-content/themes/core/fonts/icons-core/core-icons.woff2?118nxu') format('woff2'), url('/wp-content/themes/core/fonts/icons-core/core-icons.ttf?118nxu') format('truetype'), url('/wp-content/themes/core/fonts/icons-core/core-icons.woff?118nxu') format('woff'), url('/wp-content/themes/core/fonts/icons-core/core-icons.svg?118nxu#core-icons') format('svg'); font-weight: normal; font-style: normal; } .icon { font-family: 'core-icons'; speak: none; font-style: normal; font-weight: normal; font-feature-settings: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: auto; } .icon-more-vertical:before { content: '\e925'; } .icon-cross-thick:before { content: '\e923'; } .icon-circle:before { content: '\e924'; } .icon-eye:before { content: '\e921'; } .icon-grid:before { content: '\e91f'; } .icon-list:before { content: '\e920'; } .icon-mail-forward:before { content: '\f064'; } .icon-unlock:before { content: '\e91d'; } .icon-download-alt-alt:before { content: '\e91e'; } .icon-alert-circle:before { content: '\e917'; } .icon-check-circle-fine:before { content: '\e918'; } .icon-delete-circle:before { content: '\e91b'; } .icon-info-circle:before { content: '\e91c'; } .icon-download-alt:before { content: '\e916'; } .icon-check-bold:before { content: '\e915'; } .icon-file-pdf-o:before { content: '\e914'; } .icon-check-circle:before { content: '\e913'; } .icon-chevron-left-bold:before { content: '\f053'; } .icon-chevron-right-bold:before { content: '\f054'; } .icon-chevron-up-bold:before { content: '\f077'; } .icon-chevron-down-bold:before { content: '\f078'; } .icon-facebook:before { content: '\ea91'; } .icon-youtube:before { content: '\ea9d'; } .icon-vimeo:before { content: '\eaa0'; } .icon-play:before { content: '\f16a'; } .icon-mail:before { content: '\f003'; } .icon-print:before { content: '\f02f'; } .icon-twitter:before { content: '\f099'; } .icon-google-plus:before { content: '\f0d5'; } .icon-linkedin:before { content: '\f0e1'; } .icon-instagram:before { content: '\f16d'; } .icon-pinterest:before { content: '\f231'; } .icon-caret-down:before { content: '\e906'; } .icon-caret-up:before { content: '\e907'; } .icon-caret-left:before { content: '\e903'; } .icon-caret-right:before { content: '\e905'; } .icon-email:before { content: '\e90c'; } .icon-link:before { content: '\e90d'; } .icon-lock:before { content: '\e90e'; } .icon-person:before { content: '\e90f'; } .icon-phone:before { content: '\e910'; } .icon-time:before { content: '\e911'; } .icon-cart:before { content: '\e908'; } .icon-search:before { content: '\e902'; } .icon-download:before { content: '\e912'; } .icon-address:before { content: '\e909'; } .icon-calendar:before { content: '\e90a'; } .icon-checkmark:before { content: '\e90b'; } .icon-email:before { content: '\e90c'; } .icon-arrow-left:before { content: '\e094'; } .icon-arrow-right:before { content: '\e095'; } .icon-arrow-up:before { content: '\e096'; } .icon-arrow-down:before { content: '\e097'; } .icon-plus:before { content: '\e114'; } .icon-minus:before { content: '\e115'; } .icon-check:before { content: '\e116'; } .icon-cross:before { content: '\e117'; } .icon-menu:before { content: '\e901'; } .icon-chevron-down:before { content: '\e900'; } .icon-chevron-left:before { content: '\e91a'; } .icon-chevron-right:before { content: '\e919'; } .icon-chevron-up:before { content: '\e904'; } /* ----------------------------------------------------------------------------- * * SVG Icons: Icons (via PostCSS Inline SVG) * * ----------------------------------------------------------------------------- */ .svg-icon { background-size: contain; background-repeat: no-repeat; } .svg-icon--logo { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 285.36 57.29'%3E%3Cdefs%3E%3Cstyle%3E.cls-1{fill:%2314377d;}.cls-2{fill:%2314bdef;}%3C/style%3E%3C/defs%3E%3Ctitle%3EFlashback Japan Inc. Logo%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpath class='cls-1' d='M148,29.62c0-5.44-2.22-10.57-11.21-10.57a23,23,0,0,0-10,2.09l1.55,5a14.32,14.32,0,0,1,6.71-1.65c3.43,0,4.35,1.35,4.35,3.22-8,0-14.45,2.83-14.45,9.3,0,4.13,3.24,7.53,8.17,7.53a8.88,8.88,0,0,0,7-2.83h.14l.48,2.35h7.71a28.61,28.61,0,0,1-.44-5.78Zm-8.26,6a3.47,3.47,0,0,1-3.5,3.44h-.17a2.66,2.66,0,0,1-2.85-2.87c0-2.83,3-3.74,6.52-3.74Z'/%3E%3Cpath class='cls-1' d='M162.27,29.08c-3-1.13-3.82-1.74-3.82-2.74s1-1.83,2.85-1.83a12.23,12.23,0,0,1,5,1.22l1.45-5.35a18,18,0,0,0-6.86-1.3c-6.38,0-10.44,3.48-10.44,8.09,0,2.52,1.6,5.26,6.81,7.22,2.75,1,3.53,1.61,3.53,2.78s-1,1.83-3.14,1.83a15.6,15.6,0,0,1-6.33-1.61l-1.45,5.48a17.79,17.79,0,0,0,7.83,1.61c6.86,0,11.12-2.91,11.12-8C168.8,33.38,167,30.86,162.27,29.08Z'/%3E%3Cpath class='cls-1' d='M186.25,19.07a8.84,8.84,0,0,0-6.91,3.18h-.1V9h-8.51V44h8.51V29.29c0-3.43,2.51-3.91,3.58-3.91,2.51,0,3.38,2,3.38,4.74V44h8.5V29.62C194.7,22.86,191.7,19.07,186.25,19.07Z'/%3E%3Cpath class='cls-1' d='M210.65,19.94c-4.35,0-7.49,1.79-9.18,4.74h-.1V9.29h-3V38.47c0,1.78-.1,4-.19,5.57h2.61l.24-4.09h.14c2,3.13,4.88,4.61,8.94,4.61,5.56,0,11.45-4,11.45-12.57C221.57,24.81,217.08,19.94,210.65,19.94Zm-1,22.4c-5.41,0-8.31-4.09-8.31-7.39V30.21a8.45,8.45,0,0,1,8.5-8c5.61,0,8.65,4.65,8.65,9.92,0,5.91-3.15,10.21-8.81,10.21Z'/%3E%3Cpath class='cls-1' d='M241,29.25c0-4.44-1.64-9.31-9-9.31a15.5,15.5,0,0,0-7.68,2l.87,1.91a12.21,12.21,0,0,1,6.43-1.74c6.43,0,6.43,5,6.43,7.31-10.25-.09-15.61,3.09-15.61,8.61,0,3.22,2.51,6.52,7.63,6.52a9.69,9.69,0,0,0,8.07-3.78h.14l.34,3.26h2.75a35.35,35.35,0,0,1-.34-5.61Zm-2.95,7.18c0,1.74-1.93,6-7.54,6-2.61,0-5-1.48-5-4.74,0-5.48,7.06-6.09,12.52-6.09Z'/%3E%3Cpath class='cls-1' d='M255.88,22.16a12.78,12.78,0,0,1,5.9,1.35l.92-2.18a14.45,14.45,0,0,0-6.57-1.39c-7.88,0-13.39,5.18-13.39,12.57,0,7.13,5,12,12.42,12A18.41,18.41,0,0,0,262.55,43l-.67-2.09a15.21,15.21,0,0,1-6.24,1.35c-5.75,0-9.86-3.91-9.86-10C245.78,26.9,249.21,22.16,255.88,22.16Z'/%3E%3Cpath class='cls-1' d='M273.71,30.25,284,20.46h-3.62l-8.75,8.66c-.77.78-1.79,1.87-2.41,2.61h-.1V9.29h-3V44h3V34.38l2.56-2.48L281.74,44h3.62Z'/%3E%3Cpath class='cls-1' d='M99.12,10.42a7.93,7.93,0,0,0-7.88,7.93V44h8.5V30.62h11.11V24.38H99.74V19.9a3.27,3.27,0,0,1,3.4-3.09H113.7V44h8.51V10.42Z'/%3E%3Cpolygon class='cls-1' points='25.24 25.48 12.69 38.02 2.31 35.71 0 25.33 12.54 12.79 22.92 15.1 25.24 25.48'/%3E%3Cpolygon class='cls-1' points='44.51 44.75 31.96 57.29 21.58 54.98 19.27 44.6 31.81 32.06 42.19 34.37 44.51 44.75'/%3E%3Cpolygon class='cls-2' points='57.29 12.69 45.06 24.92 34.68 22.61 32.37 12.23 44.6 0 54.98 2.31 57.29 12.69'/%3E%3Cpolygon class='cls-1' points='76.57 31.96 64.34 44.2 53.96 41.88 51.64 31.5 63.87 19.27 74.25 21.59 76.57 31.96'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .svg-icon--logo-reversed { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 285.36 57.29'%3E%3Cdefs%3E%3Cstyle%3E.cls-1{fill:%23fff;}.cls-2{fill:%2314bdef;}%3C/style%3E%3C/defs%3E%3Ctitle%3EFlashback Logo Reversed%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpath class='cls-1' d='M148,29.62c0-5.44-2.22-10.57-11.21-10.57a23,23,0,0,0-10,2.09l1.55,5a14.32,14.32,0,0,1,6.71-1.65c3.43,0,4.35,1.35,4.35,3.22-8,0-14.45,2.83-14.45,9.3,0,4.13,3.24,7.53,8.17,7.53a8.88,8.88,0,0,0,7-2.83h.14l.48,2.35h7.71a28.61,28.61,0,0,1-.44-5.78Zm-8.26,6a3.47,3.47,0,0,1-3.5,3.44h-.17a2.66,2.66,0,0,1-2.85-2.87c0-2.83,3-3.74,6.52-3.74Z'/%3E%3Cpath class='cls-1' d='M162.27,29.08c-3-1.13-3.82-1.74-3.82-2.74s1-1.83,2.85-1.83a12.23,12.23,0,0,1,5,1.22l1.45-5.35a18,18,0,0,0-6.86-1.3c-6.38,0-10.44,3.48-10.44,8.09,0,2.52,1.6,5.26,6.81,7.22,2.75,1,3.53,1.61,3.53,2.78s-1,1.83-3.14,1.83a15.6,15.6,0,0,1-6.33-1.61l-1.45,5.48a17.79,17.79,0,0,0,7.83,1.61c6.86,0,11.12-2.91,11.12-8C168.8,33.38,167,30.86,162.27,29.08Z'/%3E%3Cpath class='cls-1' d='M186.25,19.07a8.84,8.84,0,0,0-6.91,3.18h-.1V9h-8.51V44h8.51V29.29c0-3.43,2.51-3.91,3.58-3.91,2.51,0,3.38,2,3.38,4.74V44h8.5V29.62C194.7,22.86,191.7,19.07,186.25,19.07Z'/%3E%3Cpath class='cls-1' d='M210.65,19.94c-4.35,0-7.49,1.79-9.18,4.74h-.1V9.29h-3V38.47c0,1.78-.1,4-.19,5.57h2.61l.24-4.09h.14c2,3.13,4.88,4.61,8.94,4.61,5.56,0,11.45-4,11.45-12.57C221.57,24.81,217.08,19.94,210.65,19.94Zm-1,22.4c-5.41,0-8.31-4.09-8.31-7.39V30.21a8.45,8.45,0,0,1,8.5-8c5.61,0,8.65,4.65,8.65,9.92,0,5.91-3.15,10.21-8.81,10.21Z'/%3E%3Cpath class='cls-1' d='M241,29.25c0-4.44-1.64-9.31-9-9.31a15.5,15.5,0,0,0-7.68,2l.87,1.91a12.21,12.21,0,0,1,6.43-1.74c6.43,0,6.43,5,6.43,7.31-10.25-.09-15.61,3.09-15.61,8.61,0,3.22,2.51,6.52,7.63,6.52a9.69,9.69,0,0,0,8.07-3.78h.14l.34,3.26h2.75a35.35,35.35,0,0,1-.34-5.61Zm-2.95,7.18c0,1.74-1.93,6-7.54,6-2.61,0-5-1.48-5-4.74,0-5.48,7.06-6.09,12.52-6.09Z'/%3E%3Cpath class='cls-1' d='M255.88,22.16a12.78,12.78,0,0,1,5.9,1.35l.92-2.18a14.45,14.45,0,0,0-6.57-1.39c-7.88,0-13.39,5.18-13.39,12.57,0,7.13,5,12,12.42,12A18.41,18.41,0,0,0,262.55,43l-.67-2.09a15.21,15.21,0,0,1-6.24,1.35c-5.75,0-9.86-3.91-9.86-10C245.78,26.9,249.21,22.16,255.88,22.16Z'/%3E%3Cpath class='cls-1' d='M273.71,30.25,284,20.46h-3.62l-8.75,8.66c-.77.78-1.79,1.87-2.41,2.61h-.1V9.29h-3V44h3V34.38l2.56-2.48L281.74,44h3.62Z'/%3E%3Cpath class='cls-1' d='M99.12,10.42a7.93,7.93,0,0,0-7.88,7.93V44h8.5V30.62h11.11V24.38H99.74V19.9a3.27,3.27,0,0,1,3.4-3.09H113.7V44h8.51V10.42Z'/%3E%3Cpolygon class='cls-1' points='25.24 25.48 12.69 38.02 2.31 35.71 0 25.33 12.54 12.79 22.92 15.1 25.24 25.48'/%3E%3Cpolygon class='cls-1' points='44.51 44.75 31.96 57.29 21.58 54.98 19.27 44.6 31.81 32.06 42.19 34.37 44.51 44.75'/%3E%3Cpolygon class='cls-2' points='57.29 12.69 45.06 24.92 34.68 22.61 32.37 12.23 44.6 0 54.98 2.31 57.29 12.69'/%3E%3Cpolygon class='cls-1' points='76.57 31.96 64.34 44.2 53.96 41.88 51.64 31.5 63.87 19.27 74.25 21.59 76.57 31.96'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* ----------------------------------------------------------------------------- * * Globals: HTML & Body * * ----------------------------------------------------------------------------- */ html { background: #fff; } body { background: #fff;/* CASE: "sticky" footer */ display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; min-height: 100vh; } /* CASE: mobile navigation is active */ body.site-navigation--is-open { overflow: hidden; width: 100%; } /* CASE: top-level child menus are active */ @media (min-width: 960px) { body.nav-primary__list-child--depth-0--active {/*overflow: hidden;*/ width: 100%; } body.nav-primary__list-child--depth-0--active:after { content: ''; z-index: 1; } } @media (min-width: 960px) { body:after { position: fixed; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .7); -webkit-animation-name: opacity-in; animation-name: opacity-in; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: ease; animation-timing-function: ease; } } /* ----------------------------------------------------------------------------- * * Globals: Font & Color * * ----------------------------------------------------------------------------- */ body, form, button, input, select, textarea { font: 400 normal 100%/1.5 kozuka-gothic-pro, sans-serif; color: #292929; letter-spacing: 0.02em; } /* ----------------------------------------------------------------------------- * * Globals: Text Selection * * ----------------------------------------------------------------------------- */ ::-moz-selection { background: #292929; color: #fff; text-shadow: none; } ::selection { background: #292929; color: #fff; text-shadow: none; } /* Layouts */ /* ----------------------------------------------------------------------------- * * Layout: Global Site Wrap * * Notes: * 1. "sticky" footer * * ----------------------------------------------------------------------------- */ .l-site-wrapper { display: -webkit-flex; display: -ms-flexbox; display: flex;/* [1] */ min-height: 100vh;/* [1] */ -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;/* [1] */ overflow-x: hidden; } /* ----------------------------------------------------------------------------- * * Layout: Main Content * * Notes: * 1. "sticky" footer * * ----------------------------------------------------------------------------- */ main { -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto;/* [1] */ } /* CASE: Glomar Maintenance Page */ .glomar main { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: column nowrap; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } /* ----------------------------------------------------------------------------- * * Layout: Global Content Wrap * * Notes: * + This project has a few variances in terms of the global site * horizontal spacing/gutters, provided are a set of simple helper classes * you can utilize to get the correct horizontal spacing required as needed * + Most importantly, note that you need to pair up '.l-wrapper' with the * additionally available gutter specific helpers classes that follow it. * * Example (Header/Footer Instance: 15px @ mobile, 28px @ full): *
    * ... *
    * * Example (Content Instance: 25px @ mobile, 28px @ full): *
    * ... *
    * * Example (Particular Panel Instance: 25px @ mobile, 56px @ full, * this bumps content an extra 28px to the left @ full): *
    * ... *
    * * ----------------------------------------------------------------------------- */ .l-wrapper { max-width: 1271px; margin-left: auto; margin-right: auto; width: 100%; } .l-wrapper:after { content: ''; display: table; clear: both; } /* Horizontal Gutters: 15px @ mobile */ .l-wrapper--g15 { padding-left: 15px; padding-right: 15px; } /* Horizontal Gutters: 25px @ mobile */ .l-wrapper--g25 { padding-left: 25px; padding-right: 25px; } /* Horizontal Gutters: 56px @ medium */ @media (min-width: 768px) { .l-wrapper--g56\@medium { padding-left: 56px; padding-right: 56px; } } /* Horizontal Gutters: 28px @ full */ @media (min-width: 960px) { .l-wrapper--g28\@full { padding-left: 28px; padding-right: 28px; } } /* Horizontal Gutters: 56px @ full */ @media (min-width: 960px) { .l-wrapper--g56\@full { padding-left: 56px; padding-right: 28px; } } /* ----------------------------------------------------------------------------- * * Layout: Staggered * * Notes: This should be paired up with (inside a) .l-wrapper wrapper * * Usage: Post, Page, WYSIWYG Content * * Screenshot: https://cloudup.com/ctCRZpIxpbt * * Example: *
    *
    * ... *
    *
    * * ----------------------------------------------------------------------------- */ .l-wrapper__inner-stagger { max-width: 980px; margin-left: auto; margin-right: auto; } .l-wrapper__inner-stagger > * { max-width: 850px; margin-left: auto; margin-right: auto; } /* ----------------------------------------------------------------------------- * * Layout: Content + Sidebar * * Usage: Post, Loops, etc. * * Example: *
    *
    * ... *
    *
    * ... *
    *
    * * ----------------------------------------------------------------------------- */ @media (min-width: 960px) { .l-sidebar-right { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } } .l-sidebar-right > * ~ * { margin-top: 50px; } @media (min-width: 960px) { .l-sidebar-right > * ~ * { margin-top: 0; } } @media (min-width: 960px) { .l-sidebar-right > *:first-child { -webkit-flex: 1; -ms-flex: 1; flex: 1; } } @media (min-width: 960px) { .l-sidebar-right > *:last-child { padding-left: 28px; width: 300px; } } @media (min-width: 1215px) { .l-sidebar-right > *:last-child { padding-left: 68px; width: 388px; } } /* Content */ /* ------------------------------------------------------------------------- * * Content: "Kitchen Sink" * * Notes: * + "t-content" is what used to be "context-content" * * ------------------------------------------------------------------------- */ /* CASE: remove top margin from first element */ .t-content > *:first-child { margin-top: 0; } /* CASE: remove bottom margin from bottom element */ .t-content > *:last-child { margin-bottom: 0; } /* ------------------------------------------------------------------------- * * Theme: Dark * * Notes: * + Used by default in general, so not much probably needed here * + This can be used anywhere or can be paired up with .t-content * + Also see the other base partials for use of this class as a parent * selector (media, typography, etc.) * * Example: *
    * ... *
    * ... *
    *
    * * Example: *
    * ... *
    * * ------------------------------------------------------------------------- */ .t-content--dark {} /* ------------------------------------------------------------------------- * * Theme: Light * * Notes: * + This can be used anywhere or can be paired up with .t-content * + Also see the other base partials for use of this class as a parent * selector (media, typography, etc.) * * Example: *
    * ... *
    * ... *
    *
    * * Example: *
    * ... *
    * * ------------------------------------------------------------------------- */ .t-content--light { color: #fff; } .t-content--light * { color: #fff; } /* Typography */ /* ------------------------------------------------------------------------- * Anchor: Defaults * ------------------------------------------------------------------------- */ a { transition: all 0.15s ease-in-out; color: inherit; text-decoration: none; outline: 0; cursor: pointer; } a:visited, a:hover { color: inherit; } a:active, a:focus { outline: 1px dotted #c5c3c3; color: inherit; } /* ------------------------------------------------------------------------- * Anchor: Full * ------------------------------------------------------------------------- */ .anchor, .t-content a { color: #0f81d9; border-bottom: 1px solid currentColor; font-weight: 700; } .anchor:visited, .t-content a:visited { color: #0f81d9; } .anchor:hover, .anchor:focus, .t-content a:hover, .t-content a:focus { color: #2db9ed; } .anchor:active, .t-content a:active { color: #0f81d9; } .header-sub__product-vendor a { color: #2db9ed; } /* ------------------------------------------------------------------------- * Heading: H1 * ------------------------------------------------------------------------- */ .h1, .t-content h1 { font-size: 26px; font-weight: 900; line-height: 1.2; letter-spacing: 0.02em; } @media (min-width: 768px) { .h1, .t-content h1 { font-size: 40px; } } .t-content h1 { margin-top: 65px; margin-bottom: 55px; } @media (min-width: 768px) { .t-content h1 { margin-top: 65px; margin-bottom: 55px; } } /* Variation: Large H1 */ .h1--lg { font-size: 36px; line-height: 1.1; } @media (min-width: 768px) { .h1--lg { font-size: 40px; } } @media (min-width: 960px) { .h1--lg { font-size: 55px; } } /* ------------------------------------------------------------------------- * Heading: H2 * ------------------------------------------------------------------------- */ .h2, .t-content h2 { font-size: 21px; font-weight: 700; line-height: 1.2; letter-spacing: 0.02em; } @media (min-width: 768px) { .h2, .t-content h2 { font-size: 30px; } } .t-content h2 { margin-top: 50px; margin-bottom: 30px; } @media (min-width: 768px) { .t-content h2 { margin-top: 58px; margin-bottom: 45px; } } /* ------------------------------------------------------------------------- * Heading: H3 * ------------------------------------------------------------------------- */ .h3, .t-content h3 { font-size: 18px; font-weight: 700; line-height: 1.25; letter-spacing: 0.02em; } @media (min-width: 768px) { .h3, .t-content h3 { font-size: 21px; } } .t-content h3 { margin-top: 42px; margin-bottom: 24px; } @media (min-width: 768px) { .t-content h3 { margin-top: 62px; margin-bottom: 36px; } } /* ------------------------------------------------------------------------- * Heading: H4 * ------------------------------------------------------------------------- */ .h4, .t-content h4 { font-size: 16px; font-weight: 700; line-height: 1.25; letter-spacing: 0.02em; } @media (min-width: 768px) { .h4, .t-content h4 { font-size: 18px; } } .t-content h4 { margin-top: 32px; margin-bottom: 15px; } @media (min-width: 768px) { .t-content h4 { margin-top: 48px; margin-bottom: 20px; } } /* ------------------------------------------------------------------------- * Heading: H5 * ------------------------------------------------------------------------- */ .h5, .t-content h5 { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; } @media (min-width: 768px) { .h5, .t-content h5 { font-size: 16px; } } .t-content h5 { margin-top: 36px; margin-bottom: 11px; } @media (min-width: 768px) { .t-content h5 { margin-top: 40px; margin-bottom: 20px; } } /* ------------------------------------------------------------------------- * Heading: H6 * ------------------------------------------------------------------------- */ .h6, .t-content h6 { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; } @media (min-width: 768px) { .h6, .t-content h6 { font-size: 16px; } } .t-content h6 { margin-top: 36px; margin-bottom: 11px; } @media (min-width: 768px) { .t-content h6 { margin-top: 40px; margin-bottom: 20px; } } /* ------------------------------------------------------------------------- * Heading: H7 * ------------------------------------------------------------------------- */ .h7 { font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: 0.02em; } @media (min-width: 768px) { .h7 { font-size: 14px; } } hr { border-top: 1px solid rgba(202, 201, 204, .5); } .t-content hr { margin: 42px auto; } @media (min-width: 768px) { .t-content hr { margin: 50px auto; } } /* ------------------------------------------------------------------------- * Global Lists * ------------------------------------------------------------------------- */ .t-content ul, .t-content ol, .t-content dl { font-size: 14px; margin-top: 26px; margin-bottom: 26px; } @media (min-width: 768px) { .t-content ul, .t-content ol, .t-content dl { font-size: 16px; } } @media (min-width: 768px) { .t-content ul, .t-content ol, .t-content dl { margin-top: 32px; margin-bottom: 32px; } } .t-content li ~ li { margin-top: 10px; } /* ------------------------------------------------------------------------- * UL * ------------------------------------------------------------------------- */ .list-bullet, .t-content ul { counter-reset: item; } .list-bullet li, .t-content ul li { padding: 0 0 0 20px; position: relative; counter-increment: item; } @media (min-width: 768px) { .list-bullet li, .t-content ul li { padding: 0 0 0 20px; } } .list-bullet li:before, .t-content ul li:before { position: absolute; padding-left: 20px; left: -20px; font-size: 24px; color: #2db9ed; content: counter(item, disc); top: -8px; } @media (min-width: 768px) { .list-bullet li:before, .t-content ul li:before { font-size: 28px; top: -9px; } } /* ------------------------------------------------------------------------- * OL * ------------------------------------------------------------------------- */ .list-number, .t-content ol { counter-reset: item; } .list-number li, .t-content ol li { padding: 0 0 0 20px; position: relative; counter-increment: item; } @media (min-width: 768px) { .list-number li, .t-content ol li { padding: 0 0 0 25px; } } .list-number li:before, .t-content ol li:before { position: absolute; padding-left: 20px; left: -20px; font-size: 14px; font-weight: 700; content: counter(item) '.'; color: #2db9ed; } @media (min-width: 768px) { .list-number li:before, .t-content ol li:before { font-size: 16px; } } /* ------------------------------------------------------------------------- * DL * ------------------------------------------------------------------------- */ .dl, .t-content dl {} .dt, .t-content dt { font-weight: 700; line-height: 1.25; margin-bottom: 4px; } @media (min-width: 768px) { .dt, .t-content dt { margin-bottom: 8px; } } .dd, .t-content dd { margin-bottom: 32px; } p { font-size: 14px; } @media (min-width: 768px) { p { font-size: 16px; } } .t-content p { margin-bottom: 26px; } @media (min-width: 768px) { .t-content p { margin-bottom: 32px; } } /* ----------------------------------------------------------------------------- * Global Quotes & Blockquotes * ----------------------------------------------------------------------------- */ .t-content .blockquote, .t-content blockquote, .t-content .quote, .t-content q { margin: 42px auto; } @media (min-width: 768px) { .t-content .blockquote, .t-content blockquote, .t-content .quote, .t-content q { margin: 70px auto; } } /* ----------------------------------------------------------------------------- * Quotes * ----------------------------------------------------------------------------- */ /* q */ .quote, .t-content q { text-align: center; font-weight: 700; font-size: 22px; color: #002f7c; line-height: 1.25; display: block; } @media (min-width: 768px) { .quote, .t-content q { font-size: 32px; line-height: 1.5; } } /* ----------------------------------------------------------------------------- * Blockquotes * ----------------------------------------------------------------------------- */ /* blockquote */ .blockquote, .t-content blockquote { text-align: center; } .blockquote p, .t-content blockquote p { font-weight: 700; font-size: 22px; color: #002f7c; line-height: 1.25; margin: 0 auto; } @media (min-width: 768px) { .blockquote p, .t-content blockquote p { font-size: 32px; line-height: 1.5; } } .blockquote p ~ p, .t-content blockquote p ~ p { margin-top: 25px; } /* ----------------------------------------------------------------------------- * Cite * ----------------------------------------------------------------------------- */ /* cite */ .cite, .t-content cite { font-style: normal; display: block; color: #292929; text-transform: uppercase; font-size: 14px; margin-top: 24px; } @media (min-width: 768px) { .cite, .t-content cite { font-size: 16px; margin-top: 18px; } } /* ----------------------------------------------------------------------------- * Table * ----------------------------------------------------------------------------- */ .table, .t-content table { font-size: 14px; margin: 30px auto; border: 0; text-align: left; border-collapse: collapse; width: 100%; table-layout: fixed; } @media (min-width: 768px) { .table, .t-content table { font-size: 16px; table-layout: auto; margin: 40px auto; } } /* ----------------------------------------------------------------------------- * TH * ----------------------------------------------------------------------------- */ .th, .t-content th { background-color: #f4f4f4; padding: 13px 15px 10px; line-height: 1.25; font-weight: 700; } @media (min-width: 768px) { .th, .t-content th { padding: 15px 25px 10px; } } .th.dark, .t-content th.dark { background-color: #002f7c; color: #fff; } /* ----------------------------------------------------------------------------- * TR * ----------------------------------------------------------------------------- */ thead .tr, thead .t-content tr { background-color: #f4f4f4; } .tr:nth-of-type(odd), .t-content tr:nth-of-type(odd) { background-color: #f4f4f4; } /* ----------------------------------------------------------------------------- * TD * ----------------------------------------------------------------------------- */ .td, .t-content td { padding: 14px 15px 11px; font-size: 12px; line-height: 1.4; } @media (min-width: 768px) { .td, .t-content td { padding: 16px 25px 13px; font-size: 14px; } } /* ------------------------------------------------------------------------- * * Theme: Light * * Notes: * + This can be used anywhere or can be paired up with .t-content * + Also see the other base partials for use of this class as a parent * selector (media, typography, etc.) * * Example: *
    * ... *
    * ... *
    *
    * * Example: *
    * ... *
    * * ------------------------------------------------------------------------- */ .t-light { color: #fff; } .t-light * { color: white; } /* ------------------------------------------------------------------------- * * Theme: Dark * * Notes: * + Used by default in general, so not much probably needed here * + This can be used anywhere or can be paired up with .t-content * + Also see the other base partials for use of this class as a parent * selector (media, typography, etc.) * * Example: *
    * ... *
    * ... *
    *
    * * Example: *
    * ... *
    * * ------------------------------------------------------------------------- */ .t-dark {} /* Media */ /* ----------------------------------------------------------------------------- * Media: Images * ----------------------------------------------------------------------------- */ img { margin-left: auto; margin-right: auto; } .t-content img { line-height: 0; height: auto; display: block;/* Messes with WP editor image resizing and don't think it's needed width: auto; */ } /* ----------------------------------------------------------------------------- * Media: Wrappers * ----------------------------------------------------------------------------- */ .wp-image { width: auto !important; margin: 0 auto; max-width: none; } .wp-image a { display: inline-block; border-bottom: 0; } .wp-image--no-caption {} .wp-image--caption {} /* ----------------------------------------------------------------------------- * Media: Image Captions * ----------------------------------------------------------------------------- */ .wp-caption-text { margin: 12px 0 0; font-size: 11px; line-height: 1.25; color: #737a82; } @media (min-width: 768px) { .wp-caption-text { margin-top: 16px; font-size: 14px; } } /* ----------------------------------------------------------------------------- * Media: Alignments * ----------------------------------------------------------------------------- */ .aligncenter, .alignnone { margin: 30px auto; } @media (min-width: 768px) { .aligncenter, .alignnone { margin: 40px auto; } } .alignleft, .alignright { margin-top: 30px; margin-bottom: 30px; } @media (min-width: 768px) { .alignleft, .alignright { margin-top: 3px; margin-bottom: 35px; max-width: 420px; } } @media (min-width: 768px) { .alignleft { float: left; margin-right: 40px; } } @media (min-width: 768px) { .alignright { float: right; margin-left: 40px; } } /* ----------------------------------------------------------------------------- * Media: Lazyloading of Images * ----------------------------------------------------------------------------- */ .lazyload { opacity: 0; } .lazyloaded { opacity: 1; transition: all 0.3s ease-in-out; } .wp-embed { -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid-column; max-width: none; } .t-content .wp-embed { margin: 30px auto; } @media (min-width: 768px) { .t-content .wp-embed { margin: 40px auto; } } /* CASE: Lazyloaded embed */ .wp-embed--lazy {} /* CASE: Non-lazyloaded embed */ .wp-embed--no-lazy {} .wp-embed-wrap { position: relative; } .wp-embed-wrap iframe, .wp-embed-wrap object, .wp-embed-wrap embed { width: 100%; height: 100%; } /* CASE: Non-lazyloaded embed */ .wp-embed--no-lazy .wp-embed-wrap { overflow: hidden; position: relative; box-sizing: border-box; } .wp-embed--no-lazy .wp-embed-wrap > * { position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-sizing: border-box; } .wp-embed--no-lazy .wp-embed-wrap:before { position: relative; display: block; content: ""; padding-top: 56.25%; box-sizing: border-box; } .wp-embed-lazy br, .wp-embed-lazy p { display: none; } /* CASE: Low Resolution */ .wp-embed-lazy--low-res .wp-embed-lazy .wp-embed-lazy__image { margin-top: -9.4%; } .wp-embed-lazy .wp-embed-lazy__image { margin: 0; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } /* ----------------------------------------------------------------------------- * Oembed: Wrappers * ----------------------------------------------------------------------------- */ .wp-embed-lazy__wrapper { position: relative; overflow: hidden; background: #333; box-sizing: border-box; } .wp-embed-lazy__wrapper > * { position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-sizing: border-box; } .wp-embed-lazy__wrapper:before { position: relative; display: block; content: ""; padding-top: 56.25%; box-sizing: border-box; } /* ----------------------------------------------------------------------------- * Oembed: Trigger * ----------------------------------------------------------------------------- */ .wp-embed-lazy__trigger { display: block; height: 100%; transition: all 0.15s ease-in-out; } .t-content .wp-embed-lazy__trigger { border-bottom: 0; } .wp-embed-lazy__trigger:hover .wp-embed-lazy__icon, .wp-embed-lazy__trigger:focus .wp-embed-lazy__icon { -webkit-transform: scale(1.25); -ms-transform: scale(1.25); transform: scale(1.25); } .wp-embed-lazy__trigger:focus:after { content: ''; position: absolute; height: 100%; width: 100%; box-shadow: inset 0 0 0 6px #0f81d9; } /* CASE: embed is playing */ .wp-embed-lazy--is-playing .wp-embed-lazy__trigger { opacity: 0; transition: opacity 0.25s ease-out; } /* ----------------------------------------------------------------------------- * Oembed: Icon * ----------------------------------------------------------------------------- */ .wp-embed-lazy__icon { position: absolute; left: 50%; margin-left: -30px; top: 50%; margin-top: -30px; transition: all 0.15s ease-in-out; width: 60px; height: 60px; z-index: 2; opacity: 0; line-height: 60px; font-size: 58px; text-align: center; color: #fff; } .lazyloaded + .wp-embed-lazy__icon { opacity: 0.8; } /* ----------------------------------------------------------------------------- * Oembed: Caption * ----------------------------------------------------------------------------- */ .wp-embed-lazy__caption { margin: 12px 0 0; font-size: 11px; line-height: 1.25; color: #737a82; } @media (min-width: 768px) { .wp-embed-lazy__caption { margin-top: 16px; font-size: 14px; } } .wp-embed-lazy__title { display: block; } .gallery { max-width: none; } .t-content .gallery { margin: 30px -12.5px; } @media (min-width: 960px) { .t-content .gallery { margin: 40px -14px; } } /* ----------------------------------------------------------------------------- * Media: Gallery Item * ----------------------------------------------------------------------------- */ .gallery-item { display: inline-block; vertical-align: top; width: 100%; padding: 0 12.5px; margin: 12.5px 0; } @media (min-width: 960px) { .gallery-item { padding: 0 14px; margin: 14px 0; } } .gallery-columns-2 .gallery-item { max-width: 50%; } .gallery-columns-3 .gallery-item { max-width: 33.33%; } .gallery-columns-4 .gallery-item { max-width: 25%; } .gallery-columns-5 .gallery-item { max-width: 20%; } .gallery-columns-6 .gallery-item { max-width: 16.66%; } .gallery-columns-7 .gallery-item { max-width: 14.28%; } .gallery-columns-8 .gallery-item { max-width: 12.5%; } .gallery-columns-9 .gallery-item { max-width: 11.11%; } .gallery-item a { display: block; line-height: 0; text-decoration: none; border-bottom: none; } .gallery-item img { width: 100%; } /* ----------------------------------------------------------------------------- * Media: Gallery Item Captions * ----------------------------------------------------------------------------- */ .gallery-caption {} /* Buttons */ .t-content a[class*="button"], .t-content button[class*="button"] { margin-right: 14px; } /* CASE: inline buttons case */ a[class*="button"] + a[class*="button"], a[class*="button"] + button[class*="button"], br + a[class*="button"], button[class*="button"] + a[class*="button"], button[class*="button"] + button[class*="button"], br + button[class*="button"] { margin-top: 12px; } /* ----------------------------------------------------------------------------- * * Button: Default * * Notes: * + Has background color * + On hover/focus animate background color * * Example: * * ... * * ----------------------------------------------------------------------------- */ .button, a.button { line-height: 1; height: auto; cursor: pointer; text-decoration: none; border: 0; background-color: transparent; padding: 0; width: auto; display: inline-block; transition: all 0.15s ease-in-out; font-weight: 900; font-size: 14px; background-color: #2db9ed; border-radius: 4px; padding: 17px 18px 14px; text-align: center; color: #fff; text-transform: uppercase; } @media (min-width: 768px) { .button, a.button { font-size: 16px; padding: 23px 25px 18px; } } .button:visited, a.button:visited { background-color: #2db9ed; color: #fff; } .button:hover, .button:focus, a.button:hover, a.button:focus { background-color: #39c9ff; color: #fff; } .button:active, a.button:active { background-color: #2db9ed; } .button[disabled='disabled'], a.button[disabled='disabled'] { opacity: 0.5; } /* Button: Red */ .button--red, a.button--red { background-color: #da3b32; } .button--red:visited, a.button--red:visited { background-color: #da3b32; } .button--red:hover, .button--red:focus, a.button--red:hover, a.button--red:focus { background-color: #ef4037; } .button--red:active, a.button--red:active { background-color: #da3b32; } /* Button: Denim Alt */ .button--denim-alt, a.button--denim-alt { background-color: #0f81d9; } .button--denim-alt:visited, a.button--denim-alt:visited { background-color: #0f81d9; } .button--denim-alt:hover, .button--denim-alt:focus, a.button--denim-alt:hover, a.button--denim-alt:focus { background-color: #108dee; } .button--denim-alt:active, a.button--denim-alt:active { background-color: #0f81d9; } /* Button: Resolution Blue */ .button--resolution-blue, a.button--resolution-blue { background-color: #002f7c; color: #fff; } .button--resolution-blue:visited, a.button--resolution-blue:visited { background-color: #002f7c; color: #fff; } .button--resolution-blue:hover, .button--resolution-blue:focus, a.button--resolution-blue:hover, a.button--resolution-blue:focus { background-color: #2941ac; color: #fff; } .button--resolution-blue:active, a.button--resolution-blue:active { background-color: #002f7c; color: #fff; } .button--skinny, a.button--skinny { padding-top: 0; padding-bottom: 0; height: 48px; line-height: 51px; } .dv-404page-buttons { text-align: center; } .dv-404page-buttons a.button { margin: 10px; } /* Forms */ /* ------------------------------------------------------------------------- * Global Forms * ------------------------------------------------------------------------- */ .t-content form { margin: 32px auto; } /* ----------------------------------------------------------------------------- * * Form: Field Group / Wrapper * * Example: *
    * * * Helper text *
    * * ----------------------------------------------------------------------------- */ .form-field-group { margin-bottom: 28px; line-height: 1; } /* ----------------------------------------------------------------------------- * * Form: Control Group / Wrapper * * Example: *
    *
    * * * Helper text *
    *
    * * ----------------------------------------------------------------------------- */ .form-control-group {} /* ----------------------------------------------------------------------------- * * Form: Control Group / Wrapper, radio & checkbox specific * * Example: *
    * Legend for Checkboxes * * * * * * *
    * * ----------------------------------------------------------------------------- */ .form-control-group-radio-checkbox { display: block; padding-top: 5px; padding-bottom: 4px; } /* ----------------------------------------------------------------------------- * Placeholder * ----------------------------------------------------------------------------- */ ::-webkit-input-placeholder { color: #919092; opacity: 1; letter-spacing: normal; text-transform: none; font: normal 400 15px / inherit kozuka-gothic-pro, sans-serif; } :-moz-placeholder { color: #919092; opacity: 1; letter-spacing: normal; text-transform: none; font: normal 400 15px / inherit kozuka-gothic-pro, sans-serif; } ::-moz-placeholder { color: #919092; opacity: 1; letter-spacing: normal; text-transform: none; font: normal 400 15px / inherit kozuka-gothic-pro, sans-serif; } :-ms-input-placeholder { color: #919092; opacity: 1; letter-spacing: normal; text-transform: none; font: normal 400 15px / inherit kozuka-gothic-pro, sans-serif; } /* ----------------------------------------------------------------------------- * Focus * ----------------------------------------------------------------------------- */ input:not([type="button"]):not([type="reset"]):not([type="submit"]):focus, textarea:focus, select:focus { border: 2px solid #0f81d9; } /* box-shadow: 0 0 0 var(--form-control-border-size-focus) var(--form-control-border-color-focus); */ input:not([type="button"]):not([type="reset"]):not([type="submit"]):focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder, select:focus::-webkit-input-placeholder { color: #b5b4b6; } input:not([type="button"]):not([type="reset"]):not([type="submit"]):focus:-moz-placeholder, textarea:focus:-moz-placeholder, select:focus:-moz-placeholder { color: #b5b4b6; } input:not([type="button"]):not([type="reset"]):not([type="submit"]):focus::-moz-placeholder, textarea:focus::-moz-placeholder, select:focus::-moz-placeholder { color: #b5b4b6; } input:not([type="button"]):not([type="reset"]):not([type="submit"]):focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder, select:focus:-ms-input-placeholder { color: #b5b4b6; } /* ------------------------------------------------------------------------- * Fieldset * ------------------------------------------------------------------------- */ fieldset {} /* ------------------------------------------------------------------------- * Fieldset, Styled * Note: Styled fieldset to go along with styled legend * ------------------------------------------------------------------------- */ .form-fieldset { margin: 0 0 28px; padding: 16px 16px; border: 2px solid #ebebeb; border-radius: 4px; } /* ------------------------------------------------------------------------- * Label * ------------------------------------------------------------------------- */ .form-control-label, .t-content label { display: block; margin-bottom: 12px; color: #737a82; letter-spacing: normal; text-transform: none; font: normal 700 15px / 1 kozuka-gothic-pro, sans-serif; } /* ------------------------------------------------------------------------- * Form Control Helper * ------------------------------------------------------------------------- */ .form-control-helper { -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto; font-smoothing: subpixel-antialiased; display: block; margin-top: 10px; padding: 0 18px; color: #919092; letter-spacing: 0.02em; text-transform: none; font: normal 400 12px / 1.25 kozuka-gothic-pro, sans-serif; } /* ------------------------------------------------------------------------- * Legend * Note: By default, styled to match the label * ------------------------------------------------------------------------- */ legend { display: block; margin-bottom: 12px; color: #737a82; letter-spacing: normal; text-transform: none; font: normal 700 14px / 1 kozuka-gothic-pro, sans-serif; } /* ------------------------------------------------------------------------- * Legend, Styled * Note: Styled legend to go along with styled fieldset * ------------------------------------------------------------------------- */ .form-legend { color: #737a82; margin-bottom: 15px; padding: 0 8px; text-align: left; letter-spacing: normal; text-transform: none; font: normal 700 14px / 1 kozuka-gothic-pro, sans-serif; } /* ----------------------------------------------------------------------------- * * Form: Control / Widget * * Note: applies by default to textarea, type="file", & select * * Example: * * * ----------------------------------------------------------------------------- */ .form-control { transition: all 0.15s ease-in-out; padding: 0 16px; border: 2px solid #ebebeb; border-radius: 4px; background-color: #fff; display: block; width: 100%; height: 48px; color: #292929; letter-spacing: normal; text-transform: none; font: normal 400 15px / 1.5 kozuka-gothic-pro, sans-serif; } /* ----------------------------------------------------------------------------- * * Form: Control Icon * * Example: *
    * *
    * *
    * Helper text *
    * * ----------------------------------------------------------------------------- */ .form-control-icon { position: relative; } .form-control-icon input { padding-right: 48px; } .form-control-icon:before { position: absolute; right: 0; top: 0; color: #d5d5d5; height: 100%; width: 48px; line-height: 50px; text-align: center; z-index: 1; font-size: 20px; } /* button, input[type="button"], input[type="reset"], input[type="submit"] */ .btn-submit { line-height: 1; height: auto; cursor: pointer; text-decoration: none; border: 0; background-color: transparent; padding: 0; width: auto; display: inline-block; transition: all 0.15s ease-in-out; font-weight: 900; font-size: 14px; background-color: #2db9ed; border-radius: 4px; padding: 17px 18px 14px; text-align: center; color: #fff; text-transform: uppercase; width: 100%; margin-top: 25px; } @media (min-width: 768px) { .btn-submit { font-size: 16px; padding: 23px 25px 18px; } } .btn-submit:visited { background-color: #2db9ed; color: #fff; } .btn-submit:hover, .btn-submit:focus { background-color: #39c9ff; color: #fff; } .btn-submit:active { background-color: #2db9ed; } @media (min-width: 768px) { .btn-submit { width: auto; } } input[type="file"] { transition: all 0.15s ease-in-out; padding: 0 16px; border: 2px solid #ebebeb; border-radius: 4px; background-color: #fff; display: block; width: 100%; height: 48px; color: #292929; letter-spacing: normal; text-transform: none; font: normal 400 15px / 1.5 kozuka-gothic-pro, sans-serif; font-size: 15px; height: auto; padding: 16px 16px; line-height: 1; } /* ----------------------------------------------------------------------------- * Form Control: File, custom styled * ----------------------------------------------------------------------------- */ input[type="file"].form-control-custom-style { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; } input[type="file"].form-control-custom-style + label { line-height: 1; height: auto; cursor: pointer; text-decoration: none; border: 0; background-color: transparent; padding: 0; line-height: 1; height: auto; cursor: pointer; text-decoration: none; border: 0; background-color: transparent; padding: 0; width: auto; display: inline-block; transition: all 0.15s ease-in-out; width: 100%; font-weight: 900; font-size: 14px; background-color: #cfcfcf; border-radius: 4px; padding: 17px 18px 13px; text-align: center; color: #fff; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } input[type="file"].form-control-custom-style + label > * { pointer-events: none; } input[type="file"].form-control-custom-style:focus + label { outline: 1px dotted; } input[type="file"].form-control-custom-style:focus + label, input[type="file"].form-control-custom-style.form-control-custom-style--clicked + label, input[type="file"].form-control-custom-style + .form-control-custom-style--uploaded, input[type="file"].form-control-custom-style + label:hover { background-color: #292929 !important; } input[type="password"] { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } /* ----------------------------------------------------------------------------- * * Form Control: Radio & Checkbox, simple / default * * Example (Checkbox): *
    * Legend for Checkboxes *
    * * * * * * * * *
    *
    * * Example (Radio): *
    * * * * *
    * * ----------------------------------------------------------------------------- */ input[type="radio"], input[type="checkbox"] { margin-bottom: 0; } .form-control-checkbox, .form-control-radio { display: block; } .form-control-checkbox input[type="radio"], .form-control-checkbox input[type="checkbox"], .form-control-radio input[type="radio"], .form-control-radio input[type="checkbox"] { height: auto; width: auto; display: inline-block; line-height: normal; padding: 0; } .form-control-checkbox label, .form-control-radio label { color: #292929; cursor: pointer; margin-bottom: 0; display: inline-block; letter-spacing: normal; text-transform: none; font: normal 400 14px / 1 kozuka-gothic-pro, sans-serif; } .form-control-checkbox input[type="radio"], .form-control-checkbox input[type="checkbox"], .form-control-radio input[type="radio"], .form-control-radio input[type="checkbox"] { margin-right: 10px; } .form-control-group-radio-checkbox + .form-control-helper { margin-top: 15px; } .form-control-checkbox ~ .form-control-checkbox, .form-control-radio ~ .form-control-radio { margin-top: 13px; } /* ----------------------------------------------------------------------------- * * Form Control Layout: Radio & Checkbox, inline to 3 column layout * * Notes: * + Applies to both static marked up and Gravity Forms radio and checkbox * * Example (Checkbox): *
    * Legend for Checkboxes *
    * * * * * * * * *
    *
    * * ----------------------------------------------------------------------------- */ .form-field-group--inline-to-3 { margin-bottom: 14px; } .form-field-group--inline-to-3 .form-control-checkbox, .form-field-group--inline-to-3 .form-control-radio, .form-field-group--inline-to-3 .gfield_checkbox li, .form-field-group--inline-to-3 .gfield_radio li { display: inline-block; vertical-align: top; margin: 0 -4px 14px 0; padding-right: 10px; } @media (min-width: 600px) { .form-field-group--inline-to-3 .form-control-checkbox, .form-field-group--inline-to-3 .form-control-radio, .form-field-group--inline-to-3 .gfield_checkbox li, .form-field-group--inline-to-3 .gfield_radio li { width: 33.33%; } } /* CASE: Gravity Forms */ .form-field-group--inline-to-3.gf-checkbox, .form-field-group--inline-to-3.gf-radio { margin-bottom: 14px; } /* ----------------------------------------------------------------------------- * * Form Control: Radio & Checkbox, custom styled * * Example (Checkbox): *
    * Legend for Checkboxes *
    * * * * * * * * *
    *
    * * Example (Radio): *
    * * * * *
    * * ----------------------------------------------------------------------------- */ /* CASE: Custom Styled */ .form-control-checkbox.form-control-custom-style, .form-control-radio.form-control-custom-style { transition: all 0.15s ease-in-out; position: relative; padding-left: 35px; } .form-control-checkbox.form-control-custom-style input[type="radio"], .form-control-checkbox.form-control-custom-style input[type="checkbox"], .form-control-radio.form-control-custom-style input[type="radio"], .form-control-radio.form-control-custom-style input[type="checkbox"] { position: absolute; left: 6px; top: 2px; font-size: 12px; } .form-control-checkbox.form-control-custom-style label, .form-control-radio.form-control-custom-style label { -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto; font-smoothing: subpixel-antialiased; max-width: 600px; color: #919092 !important; } .form-control-checkbox.form-control-custom-style label:before, .form-control-checkbox.form-control-custom-style label:after, .form-control-radio.form-control-custom-style label:before, .form-control-radio.form-control-custom-style label:after { transition: all 0.15s ease-in-out; content: ''; position: absolute; } .form-control-checkbox.form-control-custom-style label:before, .form-control-radio.form-control-custom-style label:before { background-color: #fff; width: 20px; height: 20px; top: -5px; left: 0; border: 2px solid #ebebeb; } .form-control-checkbox.form-control-custom-style label:after, .form-control-radio.form-control-custom-style label:after { opacity: 0; } .form-control-checkbox.form-control-custom-style input:focus + label:before, .form-control-radio.form-control-custom-style input:focus + label:before { border-color: #0f81d9;/* box-shadow: 0 0 0 var(--form-control-radio-checkbox-ui-border-size-focus) var(--form-control-radio-checkbox-ui-border-color-focus); */ } .form-control-checkbox.form-control-custom-style input:checked + label, .form-control-radio.form-control-custom-style input:checked + label { color: #292929 !important; } .form-control-checkbox.form-control-custom-style input:checked + label:after, .form-control-radio.form-control-custom-style input:checked + label:after { opacity: 1; } /* ----------------------------------------------------------------------------- * Form Control: Checkbox * ----------------------------------------------------------------------------- */ /* CASE: Custom Styled */ .form-control-checkbox.form-control-custom-style label:before { border-radius: 4px; } .form-control-checkbox.form-control-custom-style label:after { left: 7px; top: 3px; width: 8px; height: 4px; border: 3px solid #0f81d9; border-top: none; border-right: none; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); border-radius: 1px; } /* ----------------------------------------------------------------------------- * Form Control: Radio * ----------------------------------------------------------------------------- */ /* CASE: Custom Styled */ .form-control-radio.form-control-custom-style label:before, .form-control-radio.form-control-custom-style label:after { border-radius: 50%; } .form-control-radio.form-control-custom-style label:after { left: 8px; top: 3px; width: 8px; height: 8px; background-color: #0f81d9; } /* ----------------------------------------------------------------------------- * * Form Control: Select, simple / default * * Example: *
    * * *
    * * ----------------------------------------------------------------------------- */ select { transition: all 0.15s ease-in-out; padding: 0 16px; border: 2px solid #ebebeb; border-radius: 4px; background-color: #fff; display: block; width: 100%; height: 48px; color: #292929; letter-spacing: normal; text-transform: none; font: normal 400 15px / 1.5 kozuka-gothic-pro, sans-serif; padding-right: 0; cursor: pointer; } /* CASE: multiple */ select[multiple] { font-size: 15px; height: 100px; padding: 16px 16px; } /* Sadly, as of now, you can't actually do this, but hopefully in the future option { &.form-control-select-placeholder { } } */ /* ----------------------------------------------------------------------------- * * Form Control: Select, custom styled * * Example: *
    * *
    * *
    *
    * * ----------------------------------------------------------------------------- */ .form-control-select { cursor: pointer; position: relative; } .form-control-select:hover:after, .form-control-select:focus:after, .form-control-select:active:after { background-color: #f5f5f5; } .form-control-select:after { font-family: 'core-icons'; speak: none; font-style: normal; font-weight: normal; font-feature-settings: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: auto; display: block; transition: all 0.15s ease-in-out; content: '\e900'; text-align: center; height: 44px; width: 48px; line-height: 47px; background-color: transparent; color: #999; position: absolute; font-size: 20px; right: 2px; top: 2px; pointer-events: none; border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .form-control-select select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 64px; } .form-control-select select::-ms-expand { display: none; } textarea { transition: all 0.15s ease-in-out; padding: 0 16px; border: 2px solid #ebebeb; border-radius: 4px; background-color: #fff; display: block; width: 100%; height: 48px; color: #292929; letter-spacing: normal; text-transform: none; font: normal 400 15px / 1.5 kozuka-gothic-pro, sans-serif; resize: none; padding: 10px 16px; height: 225px; } .form-control-required label:after { padding-left: 4px; color: #f83333; content: '*'; } /* Components */ /* ----------------------------------------------------------------------------- * * Components * * This file is just a clearing-house. * Make partials (start with an underscore) for any actual css code. * * ----------------------------------------------------------------------------- */ .loop__no-results { background-color: #f4f4f4; padding: 32px 15px; text-align: center; margin: 50px auto 0; border-radius: 4px; width: 100%; } @media (min-width: 768px) { .loop__no-results { padding: 40px 25px; } } .loop__no-results-title { margin-bottom: 15px; } @media (min-width: 768px) { .loop__no-results-title { margin-bottom: 20px; } } .loop__no-results-content { max-width: 600px; margin: 0 auto; } /* ----------------------------------------------------------------------------- * * Component: Blocks as Polygons * * Note: This is a particularly unique component in terms of it's design * fragility and as such below is laid out how to explicitly use it (obviously actual * html tags are up to you, this is just base structure and classes), note that * it's basically all fixed width. * * We have a few things that can be adjusted based on a class modifier: * + Polygon svg colors: denim, ingido, burnt-umber, shiraz, forest-green, ochre, cod-gray * + Left or Right instances * + Regular or Large size * * Example (Regular, Left, Purple Instance): *
    *
    * *
    *
    ...
    *
    *
    *
    * * Example (Large, Right, Magenta Instance): *
    *
    * *
    *

    ...

    *
    *
    *
    * * Example (Regular, Left, Rust Instance): *
    *
    * *
    *

    ...

    *
    *
    *
    * * ----------------------------------------------------------------------------- */ .c-block-polygon { position: relative; width: 225px; min-height: 184px; color: #fff; } @media (min-width: 768px) { .c-block-polygon { width: 305px; min-height: 250px; } } /* CASE: make sure element that comes after isn't covered by polygon */ .c-block-polygon + * { position: relative; } /* Setup polygon background */ .c-block-polygon:before { content: ''; display: block; position: absolute; top: 0; height: 100%; width: 100%; background-repeat: no-repeat; background-size: 225px 184px; background-position: right top; } @media (min-width: 768px) { .c-block-polygon:before { background-size: 305px 250px; } } /* CASE: as video popup modifier */ .c-block-polygon--video {} /* ----------------------------------------------------------------------------- * Block Polygon: Image * ----------------------------------------------------------------------------- */ .c-block-polygon__image { display: block;/*aspect-ratio: '248:137'; /wtf/ */ background-size: cover; background-repeat: no-repeat; background-position: 50% 100%; position: relative; box-sizing: border-box; } /* CASE: as video popup modifier */ .c-block-polygon--video .c-block-polygon__image { background-color: #333; } .c-block-polygon--video .c-block-polygon__image:after { font-family: 'core-icons'; speak: none; font-style: normal; font-weight: normal; font-feature-settings: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: auto; content: url(/wp-content/themes/core/img/youtube_full-color_icon.svg); position: absolute; left: 50%; margin-left: -21px; top: 50%; margin-top: -21px; transition: all 0.15s ease-in-out; width: 42px; height: 42px; z-index: 2; opacity: 0.8; line-height: 42px; font-size: 34px; text-align: center; color: #282828; } @media (min-width: 768px) { .c-block-polygon--video .c-block-polygon__image:after { font-size: 42px; } } .c-block-polygon--video .c-block-polygon__image:hover:after, .c-block-polygon--video .c-block-polygon__image:focus:after { content: url(/wp-content/themes/core/img/youtube_full-color_icon_h.svg); opacity: 1; } .c-block-polygon__image > * { position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-sizing: border-box; } .c-block-polygon__image:before { position: relative; display: block; content: ""; padding-top: 56.25%; box-sizing: border-box; } /* ----------------------------------------------------------------------------- * Block Polygon: Block Wrapper * ----------------------------------------------------------------------------- */ .c-block-polygon__wrapper { position: relative; } /* CASE: left instance */ .c-block-polygon--left .c-block-polygon__wrapper { padding-left: 42px; } @media (min-width: 768px) { .c-block-polygon--left .c-block-polygon__wrapper { padding-left: 55px; } } /* CASE: right instance */ .c-block-polygon--right .c-block-polygon__wrapper { padding-right: 42px; } @media (min-width: 768px) { .c-block-polygon--right .c-block-polygon__wrapper { padding-right: 55px; } } /* ----------------------------------------------------------------------------- * Block Polygon: Content Wrapper * ----------------------------------------------------------------------------- */ .c-block-polygon__content { margin-top: 8px; } @media (min-width: 768px) { .c-block-polygon__content { margin-top: 10px; } } /* CASE: has link adjacent to content */ /* CASE: left instance */ @media (min-width: 400px) { .c-block-polygon--left .c-block-polygon__content.c-block-polygon__content--has-adj-cta { padding-right: 38px; } } @media (min-width: 768px) { .c-block-polygon--left .c-block-polygon__content.c-block-polygon__content--has-adj-cta { padding-right: 60px; } } /* CASE: right instance */ @media (min-width: 400px) { .c-block-polygon--right .c-block-polygon__content.c-block-polygon__content--has-adj-cta { padding-left: 38px; } } @media (min-width: 768px) { .c-block-polygon--right .c-block-polygon__content.c-block-polygon__content--has-adj-cta { padding-left: 60px; } } /* CASE: left instance */ .c-block-polygon--left .c-block-polygon__content { padding-right: 10px; } /* CASE: right instance */ .c-block-polygon--right .c-block-polygon__content { padding-left: 10px; text-align: right; } /* CASE: Content icon */ .c-block-polygon__content-icon { display: inline-block !important; } * + .c-block-polygon__content-icon { margin-top: 3px; } /* ----------------------------------------------------------------------------- * Block Polygon: Left Instance * ----------------------------------------------------------------------------- */ .c-block-polygon--left { margin-left: -42px; } @media (min-width: 768px) { .c-block-polygon--left { margin-left: -55px; } } /* Setup polygon background */ .c-block-polygon--left:before { right: 0; } /* Polygon Colors */ /* Setup polygon background */ .c-block-polygon--left.c-block-polygon--color-blue:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 302.68 248.05' fill='%232db9ed'%3E%3Ctitle%3ECropped Left Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='54.47 0 54.4 0.07 0 54.26 29.99 215.97 192.13 248.05 302.68 137.93 302.68 137.93 302.68 0 54.47 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* CASE: Extra Extra Large Size */ .c-block-polygon--left.c-block-polygon--color-blue.c-block-polygon--size-xxlg:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 905.5 655.55' fill='%232db9ed'%3E%3Ctitle%3ECropped Flat Left Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='98.5 0 0 97.55 98.5 630.55 370.5 655.55 719.5 639.05 905.5 454 905.5 0 98.5 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* Setup polygon background */ .c-block-polygon--left.c-block-polygon--color-denim:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 302.68 248.05' fill='%231761b1'%3E%3Ctitle%3ECropped Left Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='54.47 0 54.4 0.07 0 54.26 29.99 215.97 192.13 248.05 302.68 137.93 302.68 137.93 302.68 0 54.47 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* Extra Large Size */ .c-block-polygon--left.c-block-polygon--color-denim.c-block-polygon--size-xlg:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 438.82 335.25' fill='%231761b1'%3E%3Ctitle%3ECropped Left Bottom Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='54.82 0 0 54.17 42.67 283.17 320.33 335.25 438.82 218 438.82 0 54.82 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* CASE: Poly as top */ @media (min-width: 960px) { .c-block-polygon--left.c-block-polygon--color-denim.c-block-polygon--size-xlg.c-block-polygon--as-top:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 477.5 384.83' fill='%231761b1'%3E%3Ctitle%3ECropped Left Top Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='93.5 0 0 93.17 56.67 334.83 309.67 384.83 477.5 218 477.5 0 93.5 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } } /* Setup polygon background */ .c-block-polygon--left.c-block-polygon--color-denim-alt:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 302.68 248.05' fill='%230f81d9'%3E%3Ctitle%3ECropped Left Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='54.47 0 54.4 0.07 0 54.26 29.99 215.97 192.13 248.05 302.68 137.93 302.68 137.93 302.68 0 54.47 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* Extra Large Size */ .c-block-polygon--left.c-block-polygon--color-denim-alt.c-block-polygon--size-xlg:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 438.82 335.25' fill='%230f81d9'%3E%3Ctitle%3ECropped Left Bottom Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='54.82 0 0 54.17 42.67 283.17 320.33 335.25 438.82 218 438.82 0 54.82 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* CASE: Poly as top */ @media (min-width: 960px) { .c-block-polygon--left.c-block-polygon--color-denim-alt.c-block-polygon--size-xlg.c-block-polygon--as-top:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 477.5 384.83' fill='%230f81d9'%3E%3Ctitle%3ECropped Left Top Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='93.5 0 0 93.17 56.67 334.83 309.67 384.83 477.5 218 477.5 0 93.5 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } } /* Setup polygon background */ .c-block-polygon--left.c-block-polygon--color-venice-blue:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 302.68 248.05' fill='%23074f9b'%3E%3Ctitle%3ECropped Left Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='54.47 0 54.4 0.07 0 54.26 29.99 215.97 192.13 248.05 302.68 137.93 302.68 137.93 302.68 0 54.47 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* Extra Large Size */ .c-block-polygon--left.c-block-polygon--color-venice-blue.c-block-polygon--size-xlg:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 438.82 335.25' fill='%23074f9b'%3E%3Ctitle%3ECropped Left Bottom Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='54.82 0 0 54.17 42.67 283.17 320.33 335.25 438.82 218 438.82 0 54.82 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* CASE: Poly as top */ @media (min-width: 960px) { .c-block-polygon--left.c-block-polygon--color-venice-blue.c-block-polygon--size-xlg.c-block-polygon--as-top:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 477.5 384.83' fill='%23074f9b'%3E%3Ctitle%3ECropped Left Top Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='93.5 0 0 93.17 56.67 334.83 309.67 384.83 477.5 218 477.5 0 93.5 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } } /* Setup polygon background */ .c-block-polygon--left.c-block-polygon--color-lochmara:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 302.68 248.05' fill='%230284c7'%3E%3Ctitle%3ECropped Left Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='54.47 0 54.4 0.07 0 54.26 29.99 215.97 192.13 248.05 302.68 137.93 302.68 137.93 302.68 0 54.47 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* Extra Large Size */ .c-block-polygon--left.c-block-polygon--color-lochmara.c-block-polygon--size-xlg:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 438.82 335.25' fill='%230284c7'%3E%3Ctitle%3ECropped Left Bottom Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='54.82 0 0 54.17 42.67 283.17 320.33 335.25 438.82 218 438.82 0 54.82 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* CASE: Poly as top */ @media (min-width: 960px) { .c-block-polygon--left.c-block-polygon--color-lochmara.c-block-polygon--size-xlg.c-block-polygon--as-top:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 477.5 384.83' fill='%230284c7'%3E%3Ctitle%3ECropped Left Top Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='93.5 0 0 93.17 56.67 334.83 309.67 384.83 477.5 218 477.5 0 93.5 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } } /* Setup polygon background */ .c-block-polygon--left.c-block-polygon--color-purple:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 302.68 248.05' fill='%23343aab'%3E%3Ctitle%3ECropped Left Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='54.47 0 54.4 0.07 0 54.26 29.99 215.97 192.13 248.05 302.68 137.93 302.68 137.93 302.68 0 54.47 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* Setup polygon background */ .c-block-polygon--left.c-block-polygon--color-indigo:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 302.68 248.05' fill='%235157d5'%3E%3Ctitle%3ECropped Left Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='54.47 0 54.4 0.07 0 54.26 29.99 215.97 192.13 248.05 302.68 137.93 302.68 137.93 302.68 0 54.47 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* Setup polygon background */ .c-block-polygon--left.c-block-polygon--color-governor-bay:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 302.68 248.05' fill='%23384bbd'%3E%3Ctitle%3ECropped Left Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='54.47 0 54.4 0.07 0 54.26 29.99 215.97 192.13 248.05 302.68 137.93 302.68 137.93 302.68 0 54.47 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* Setup polygon background */ .c-block-polygon--left.c-block-polygon--color-governor-bay-alt:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 302.68 248.05' fill='%233042ad'%3E%3Ctitle%3ECropped Left Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='54.47 0 54.4 0.07 0 54.26 29.99 215.97 192.13 248.05 302.68 137.93 302.68 137.93 302.68 0 54.47 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* Setup polygon background */ .c-block-polygon--left.c-block-polygon--color-indigo-alt:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 302.68 248.05' fill='%234e4bd3'%3E%3Ctitle%3ECropped Left Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='54.47 0 54.4 0.07 0 54.26 29.99 215.97 192.13 248.05 302.68 137.93 302.68 137.93 302.68 0 54.47 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* Setup polygon background */ .c-block-polygon--left.c-block-polygon--color-rust:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 302.68 248.05' fill='%23bf332c'%3E%3Ctitle%3ECropped Left Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='54.47 0 54.4 0.07 0 54.26 29.99 215.97 192.13 248.05 302.68 137.93 302.68 137.93 302.68 0 54.47 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* Setup polygon background */ .c-block-polygon--left.c-block-polygon--color-burnt-umber:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 302.68 248.05' fill='%23872722'%3E%3Ctitle%3ECropped Left Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='54.47 0 54.4 0.07 0 54.26 29.99 215.97 192.13 248.05 302.68 137.93 302.68 137.93 302.68 0 54.47 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* Setup polygon background */ .c-block-polygon--left.c-block-polygon--color-persian-red:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 302.68 248.05' fill='%23ce3c2c'%3E%3Ctitle%3ECropped Left Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='54.47 0 54.4 0.07 0 54.26 29.99 215.97 192.13 248.05 302.68 137.93 302.68 137.93 302.68 0 54.47 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* Setup polygon background */ .c-block-polygon--left.c-block-polygon--color-flush-mahogany:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 302.68 248.05' fill='%23c63b31'%3E%3Ctitle%3ECropped Left Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='54.47 0 54.4 0.07 0 54.26 29.99 215.97 192.13 248.05 302.68 137.93 302.68 137.93 302.68 0 54.47 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* Setup polygon background */ .c-block-polygon--left.c-block-polygon--color-burnt-umber-alt:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 302.68 248.05' fill='%238d232b'%3E%3Ctitle%3ECropped Left Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='54.47 0 54.4 0.07 0 54.26 29.99 215.97 192.13 248.05 302.68 137.93 302.68 137.93 302.68 0 54.47 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* Setup polygon background */ .c-block-polygon--left.c-block-polygon--color-magenta:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 302.68 248.05' fill='%23d4005d'%3E%3Ctitle%3ECropped Left Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='54.47 0 54.4 0.07 0 54.26 29.99 215.97 192.13 248.05 302.68 137.93 302.68 137.93 302.68 0 54.47 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* Setup polygon background */ .c-block-polygon--left.c-block-polygon--color-shiraz:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 302.68 248.05' fill='%23a60c3b'%3E%3Ctitle%3ECropped Left Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='54.47 0 54.4 0.07 0 54.26 29.99 215.97 192.13 248.05 302.68 137.93 302.68 137.93 302.68 0 54.47 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* Setup polygon background */ .c-block-polygon--left.c-block-polygon--color-razzmatazz:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 302.68 248.05' fill='%23e6106e'%3E%3Ctitle%3ECropped Left Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='54.47 0 54.4 0.07 0 54.26 29.99 215.97 192.13 248.05 302.68 137.93 302.68 137.93 302.68 0 54.47 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* Setup polygon background */ .c-block-polygon--left.c-block-polygon--color-razzmatazz-alt:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 302.68 248.05' fill='%23cd0c55'%3E%3Ctitle%3ECropped Left Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='54.47 0 54.4 0.07 0 54.26 29.99 215.97 192.13 248.05 302.68 137.93 302.68 137.93 302.68 0 54.47 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* Setup polygon background */ .c-block-polygon--left.c-block-polygon--color-shiraz-alt:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 302.68 248.05' fill='%23aa0d41'%3E%3Ctitle%3ECropped Left Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='54.47 0 54.4 0.07 0 54.26 29.99 215.97 192.13 248.05 302.68 137.93 302.68 137.93 302.68 0 54.47 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* Setup polygon background */ .c-block-polygon--left.c-block-polygon--color-green:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 302.68 248.05' fill='%237bc03e'%3E%3Ctitle%3ECropped Left Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='54.47 0 54.4 0.07 0 54.26 29.99 215.97 192.13 248.05 302.68 137.93 302.68 137.93 302.68 0 54.47 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* Setup polygon background */ .c-block-polygon--left.c-block-polygon--color-forest-green:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 302.68 248.05' fill='%23387423'%3E%3Ctitle%3ECropped Left Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='54.47 0 54.4 0.07 0 54.26 29.99 215.97 192.13 248.05 302.68 137.93 302.68 137.93 302.68 0 54.47 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* Setup polygon background */ .c-block-polygon--left.c-block-polygon--color-apple:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 302.68 248.05' fill='%2357a53c'%3E%3Ctitle%3ECropped Left Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='54.47 0 54.4 0.07 0 54.26 29.99 215.97 192.13 248.05 302.68 137.93 302.68 137.93 302.68 0 54.47 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* Setup polygon background */ .c-block-polygon--left.c-block-polygon--color-apple-alt:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 302.68 248.05' fill='%235ea732'%3E%3Ctitle%3ECropped Left Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='54.47 0 54.4 0.07 0 54.26 29.99 215.97 192.13 248.05 302.68 137.93 302.68 137.93 302.68 0 54.47 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* Setup polygon background */ .c-block-polygon--left.c-block-polygon--color-forest-green-alt:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 302.68 248.05' fill='%2333802e'%3E%3Ctitle%3ECropped Left Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='54.47 0 54.4 0.07 0 54.26 29.99 215.97 192.13 248.05 302.68 137.93 302.68 137.93 302.68 0 54.47 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* Setup polygon background */ .c-block-polygon--left.c-block-polygon--color-orange:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 302.68 248.05' fill='%23f19927'%3E%3Ctitle%3ECropped Left Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='54.47 0 54.4 0.07 0 54.26 29.99 215.97 192.13 248.05 302.68 137.93 302.68 137.93 302.68 0 54.47 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* Setup polygon background */ .c-block-polygon--left.c-block-polygon--color-ochre:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 302.68 248.05' fill='%23d27b1d'%3E%3Ctitle%3ECropped Left Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='54.47 0 54.4 0.07 0 54.26 29.99 215.97 192.13 248.05 302.68 137.93 302.68 137.93 302.68 0 54.47 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* Setup polygon background */ .c-block-polygon--left.c-block-polygon--color-fuel-yellow:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 302.68 248.05' fill='%23eba819'%3E%3Ctitle%3ECropped Left Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='54.47 0 54.4 0.07 0 54.26 29.99 215.97 192.13 248.05 302.68 137.93 302.68 137.93 302.68 0 54.47 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* Setup polygon background */ .c-block-polygon--left.c-block-polygon--color-carrot-orange:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 302.68 248.05' fill='%23ec8b18'%3E%3Ctitle%3ECropped Left Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='54.47 0 54.4 0.07 0 54.26 29.99 215.97 192.13 248.05 302.68 137.93 302.68 137.93 302.68 0 54.47 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* Setup polygon background */ .c-block-polygon--left.c-block-polygon--color-hot-cinnamon:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 302.68 248.05' fill='%23d46b1d'%3E%3Ctitle%3ECropped Left Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='54.47 0 54.4 0.07 0 54.26 29.99 215.97 192.13 248.05 302.68 137.93 302.68 137.93 302.68 0 54.47 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* Setup polygon background */ .c-block-polygon--left.c-block-polygon--color-mine-shaft:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 302.68 248.05' fill='%23292929'%3E%3Ctitle%3ECropped Left Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='54.47 0 54.4 0.07 0 54.26 29.99 215.97 192.13 248.05 302.68 137.93 302.68 137.93 302.68 0 54.47 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* Setup polygon background */ .c-block-polygon--left.c-block-polygon--color-cod-gray:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 302.68 248.05' fill='%231b1919'%3E%3Ctitle%3ECropped Left Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='54.47 0 54.4 0.07 0 54.26 29.99 215.97 192.13 248.05 302.68 137.93 302.68 137.93 302.68 0 54.47 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* Setup polygon background */ .c-block-polygon--left.c-block-polygon--color-cape-cod:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 302.68 248.05' fill='%233c3e40'%3E%3Ctitle%3ECropped Left Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='54.47 0 54.4 0.07 0 54.26 29.99 215.97 192.13 248.05 302.68 137.93 302.68 137.93 302.68 0 54.47 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* Setup polygon background */ .c-block-polygon--left.c-block-polygon--color-tundora:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 302.68 248.05' fill='%23403c3c'%3E%3Ctitle%3ECropped Left Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='54.47 0 54.4 0.07 0 54.26 29.99 215.97 192.13 248.05 302.68 137.93 302.68 137.93 302.68 0 54.47 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* Setup polygon background */ .c-block-polygon--left.c-block-polygon--color-shark:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 302.68 248.05' fill='%232b2c2e'%3E%3Ctitle%3ECropped Left Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='54.47 0 54.4 0.07 0 54.26 29.99 215.97 192.13 248.05 302.68 137.93 302.68 137.93 302.68 0 54.47 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* ----------------------------------------------------------------------------- * Block Polygon: Right Instance * ----------------------------------------------------------------------------- */ .c-block-polygon--right { margin-right: -42px; margin-left: auto; } @media (min-width: 768px) { .c-block-polygon--right { margin-right: -55px; } } /* Setup polygon background */ .c-block-polygon--right:before { left: 0; background-position: left top; } /* Polygon Colors */ /* Setup polygon background */ .c-block-polygon--right.c-block-polygon--color-blue:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 302.68 248.05' fill='%232db9ed'%3E%3Ctitle%3ECropped Right Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='248.29 0.07 248.22 0 0 0 0 137.93 0 137.93 110.55 248.05 272.69 215.97 302.68 54.26 248.29 0.07'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* Setup polygon background */ .c-block-polygon--right.c-block-polygon--color-denim:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 302.68 248.05' fill='%231761b1'%3E%3Ctitle%3ECropped Right Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='248.29 0.07 248.22 0 0 0 0 137.93 0 137.93 110.55 248.05 272.69 215.97 302.68 54.26 248.29 0.07'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* Setup polygon background */ .c-block-polygon--right.c-block-polygon--color-purple:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 302.68 248.05' fill='%23343aab'%3E%3Ctitle%3ECropped Right Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='248.29 0.07 248.22 0 0 0 0 137.93 0 137.93 110.55 248.05 272.69 215.97 302.68 54.26 248.29 0.07'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* Setup polygon background */ .c-block-polygon--right.c-block-polygon--color-indigo:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 302.68 248.05' fill='%235157d5'%3E%3Ctitle%3ECropped Right Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='248.29 0.07 248.22 0 0 0 0 137.93 0 137.93 110.55 248.05 272.69 215.97 302.68 54.26 248.29 0.07'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* Setup polygon background */ .c-block-polygon--right.c-block-polygon--color-rust:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 302.68 248.05' fill='%23bf332c'%3E%3Ctitle%3ECropped Right Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='248.29 0.07 248.22 0 0 0 0 137.93 0 137.93 110.55 248.05 272.69 215.97 302.68 54.26 248.29 0.07'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* Setup polygon background */ .c-block-polygon--right.c-block-polygon--color-burnt-umber:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 302.68 248.05' fill='%23872722'%3E%3Ctitle%3ECropped Right Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='248.29 0.07 248.22 0 0 0 0 137.93 0 137.93 110.55 248.05 272.69 215.97 302.68 54.26 248.29 0.07'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* Setup polygon background */ .c-block-polygon--right.c-block-polygon--color-magenta:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 302.68 248.05' fill='%23d4005d'%3E%3Ctitle%3ECropped Right Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='248.29 0.07 248.22 0 0 0 0 137.93 0 137.93 110.55 248.05 272.69 215.97 302.68 54.26 248.29 0.07'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* Setup polygon background */ .c-block-polygon--right.c-block-polygon--color-shiraz:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 302.68 248.05' fill='%23a60c3b'%3E%3Ctitle%3ECropped Right Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='248.29 0.07 248.22 0 0 0 0 137.93 0 137.93 110.55 248.05 272.69 215.97 302.68 54.26 248.29 0.07'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* Setup polygon background */ .c-block-polygon--right.c-block-polygon--color-green:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 302.68 248.05' fill='%237bc03e'%3E%3Ctitle%3ECropped Right Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='248.29 0.07 248.22 0 0 0 0 137.93 0 137.93 110.55 248.05 272.69 215.97 302.68 54.26 248.29 0.07'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* Setup polygon background */ .c-block-polygon--right.c-block-polygon--color-forest-green:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 302.68 248.05' fill='%23387423'%3E%3Ctitle%3ECropped Right Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='248.29 0.07 248.22 0 0 0 0 137.93 0 137.93 110.55 248.05 272.69 215.97 302.68 54.26 248.29 0.07'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* Setup polygon background */ .c-block-polygon--right.c-block-polygon--color-orange:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 302.68 248.05' fill='%23f19927'%3E%3Ctitle%3ECropped Right Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='248.29 0.07 248.22 0 0 0 0 137.93 0 137.93 110.55 248.05 272.69 215.97 302.68 54.26 248.29 0.07'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* Setup polygon background */ .c-block-polygon--right.c-block-polygon--color-ochre:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 302.68 248.05' fill='%23d27b1d'%3E%3Ctitle%3ECropped Right Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='248.29 0.07 248.22 0 0 0 0 137.93 0 137.93 110.55 248.05 272.69 215.97 302.68 54.26 248.29 0.07'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* Setup polygon background */ .c-block-polygon--right.c-block-polygon--color-mine-shaft:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 302.68 248.05' fill='%23292929'%3E%3Ctitle%3ECropped Right Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='248.29 0.07 248.22 0 0 0 0 137.93 0 137.93 110.55 248.05 272.69 215.97 302.68 54.26 248.29 0.07'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* Setup polygon background */ .c-block-polygon--right.c-block-polygon--color-cod-gray:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 302.68 248.05' fill='%231b1919'%3E%3Ctitle%3ECropped Right Polygon%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='248.29 0.07 248.22 0 0 0 0 137.93 0 137.93 110.55 248.05 272.69 215.97 302.68 54.26 248.29 0.07'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* ----------------------------------------------------------------------------- * Block Polygon: Large Size * ----------------------------------------------------------------------------- */ @media (min-width: 768px) { .c-block-polygon--size-lg { width: 350px; min-height: 285px; } } /* Setup polygon background */ @media (min-width: 768px) { .c-block-polygon--size-lg:before { background-size: 348px 285px; } } /* CASE: adjustments for left */ @media (min-width: 768px) { .c-block-polygon--size-lg.c-block-polygon--left { margin-left: -65px; } } /* Polygon: Block Wrapper */ @media (min-width: 768px) { .c-block-polygon--size-lg.c-block-polygon--left .c-block-polygon__wrapper { padding-left: 65px; } } /* CASE: adjustments for right */ @media (min-width: 768px) { .c-block-polygon--size-lg.c-block-polygon--right { margin-right: -65px; } } /* Polygon: Block Wrapper */ @media (min-width: 768px) { .c-block-polygon--size-lg.c-block-polygon--right .c-block-polygon__wrapper { padding-right: 65px; } } /* ----------------------------------------------------------------------------- * Block Polygon: Extra Extra Large Size (pretty specific to video panel) * ----------------------------------------------------------------------------- */ .c-block-polygon--size-xxlg { width: 300px; min-height: 218px; } @media (min-width: 500px) { .c-block-polygon--size-xxlg { width: 400px; min-height: 290px; } } @media (min-width: 960px) { .c-block-polygon--size-xxlg { width: 904px; min-height: 655px; } } /* Setup polygon background */ .c-block-polygon--size-xxlg:before { background-size: 300px 218px; } @media (min-width: 500px) { .c-block-polygon--size-xxlg:before { background-size: 400px 290px; } } @media (min-width: 960px) { .c-block-polygon--size-xxlg:before { background-size: 904px 655px; } } .c-block-polygon--size-xxlg .c-block-polygon__image { position: relative; box-sizing: border-box; } .c-block-polygon--size-xxlg .c-block-polygon__image > * { position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-sizing: border-box; } .c-block-polygon--size-xxlg .c-block-polygon__image:before { position: relative; display: block; content: ""; padding-top: 56.390977443609025%; box-sizing: border-box; } /* CASE: as video popup modifier */ @media (min-width: 500px) { .c-block-polygon--size-xxlg.c-block-polygon--video .c-block-polygon__image:after { margin-left: -23px; width: 46px; line-height: 43px; font-size: 46px; } } @media (min-width: 960px) { .c-block-polygon--size-xxlg.c-block-polygon--video .c-block-polygon__image:after { margin-left: -38px; width: 76px; height: 55px; line-height: 55px; font-size: 75px; } } /* CASE: adjustments for left */ .c-block-polygon--size-xxlg.c-block-polygon--left { margin-left: -34px; } @media (min-width: 500px) { .c-block-polygon--size-xxlg.c-block-polygon--left { margin-left: -45px; } } @media (min-width: 960px) { .c-block-polygon--size-xxlg.c-block-polygon--left { margin-left: -100px; } } /* Polygon: Block Wrapper */ .c-block-polygon--size-xxlg.c-block-polygon--left .c-block-polygon__wrapper { padding-left: 34px; } @media (min-width: 500px) { .c-block-polygon--size-xxlg.c-block-polygon--left .c-block-polygon__wrapper { padding-left: 45px; } } @media (min-width: 960px) { .c-block-polygon--size-xxlg.c-block-polygon--left .c-block-polygon__wrapper { padding-left: 100px; } } .c-block-polygon--size-xxlg.c-block-polygon--left .c-block-polygon__content { padding-right: 15px; } @media (min-width: 960px) { .c-block-polygon--size-xxlg.c-block-polygon--left .c-block-polygon__content { padding-left: 15px; } } @media (min-width: 500px) { .c-block-polygon--size-xxlg .c-block-polygon__content { margin-top: 10px; } } @media (min-width: 960px) { .c-block-polygon--size-xxlg .c-block-polygon__content { margin-top: 20px; max-width: 83%; } } /* ----------------------------------------------------------------------------- * Block Polygon: Extra Large Size (pretty specific to video panel) * ----------------------------------------------------------------------------- */ .c-block-polygon--size-xlg { width: 254px; min-height: 194px; margin-left: -33px; } @media (min-width: 960px) { .c-block-polygon--size-xlg { width: 440px; min-height: 336px; margin-left: -57px; } } /* Setup polygon background */ .c-block-polygon--size-xlg:before { background-size: 254px 194px; } @media (min-width: 960px) { .c-block-polygon--size-xlg:before { background-size: 440px 336px; } } .c-block-polygon--size-xlg .c-block-polygon__image { position: relative; box-sizing: border-box; } .c-block-polygon--size-xlg .c-block-polygon__image > * { position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-sizing: border-box; } .c-block-polygon--size-xlg .c-block-polygon__image:before { position: relative; display: block; content: ""; padding-top: 56.56108597285068%; box-sizing: border-box; } /* CASE: Poly as top */ @media (min-width: 960px) { .c-block-polygon--size-xlg.c-block-polygon--as-top { width: 478px; min-height: 385px; margin-left: -95px; } } /* Setup polygon background */ @media (min-width: 960px) { .c-block-polygon--size-xlg.c-block-polygon--as-top:before { background-size: 478px 385px; } } /* CASE: adjustments for left */ @media (min-width: 960px) { .c-block-polygon--size-xlg.c-block-polygon--as-top.c-block-polygon--left .c-block-polygon__wrapper { padding-left: 95px; } } @media (min-width: 960px) { .c-block-polygon--size-xlg.c-block-polygon--as-top .c-block-polygon__image:before { padding-top: 56.84210526315789%; } } /* CASE: Poly as bottom */ .c-block-polygon--size-xlg.c-block-polygon--as-bottom {} /* CASE: as video popup modifier */ @media (min-width: 960px) { .c-block-polygon--size-xlg.c-block-polygon--video .c-block-polygon__image:after { margin-left: -28px; width: 56px; height: 54px; line-height: 56px; font-size: 54px; margin-top: -22px; } } /* CASE: adjustments for left */ /* Polygon: Block Wrapper */ .c-block-polygon--size-xlg.c-block-polygon--left .c-block-polygon__wrapper { padding-left: 33px; } @media (min-width: 960px) { .c-block-polygon--size-xlg.c-block-polygon--left .c-block-polygon__wrapper { padding-left: 57px; } } .c-block-polygon--size-xlg.c-block-polygon--left .c-block-polygon__content { padding-right: 15px; } @media (min-width: 960px) { .c-block-polygon--size-xlg.c-block-polygon--left .c-block-polygon__content { padding-left: 10px; } } @media (min-width: 960px) { .c-block-polygon--size-xlg .c-block-polygon__content { margin-top: 10px; max-width: 83%; } } .social-follow {} .social-follow__list {} .social-follow__item { display: inline-block; vertical-align: top; margin: 0 15px 0 0; } @media (min-width: 960px) { .social-follow__item { margin: 0 11px 0 0; } } .social-follow__anchor { display: block; width: 40px; height: 40px; border-radius: 50%; transition: all 0.15s ease-in-out; } .social-follow__anchor:hover, .social-follow__anchor:focus { background-color: #fff; } .social-follow__anchor:hover:before, .social-follow__anchor:focus:before { color: #292929; } .social-follow__anchor:before { color: #fff; font-size: 19px; line-height: 42px; width: 100%; text-align: center; display: block; } /* ----------------------------------------------------------------------------- * Social Follow: Icons * ----------------------------------------------------------------------------- */ .social-follow__icon-facebook { background-color: #495e9b; } .social-follow__icon-twitter { background-color: #42a8e5; } .social-follow__icon-twitter:before { font-size: 22px; } .social-follow__icon-youtube { background-color: #ea3938; } .social-follow__icon-vimeo { background-color: #40afe5; } .social-follow__icon-instagram { background-color: #c32aa3; } /* ----------------------------------------------------------------------------- * * Component: Cards * * Note: Overall structure should be utilized as laid out below, but actual * html tags are up to you, this is just base structure and classes. * * We have a few things that can be adjusted based on a class modifier: * + Style: content overlaid or below * + Right Angle Decor: controlled through indie helper classes * * Examples: * + Showcase panel (overlaid content) * + Product 4up panel (stacked content) * * ----------------------------------------------------------------------------- */ .c-card:after { content: ''; display: table; clear: both; } /* CASE: list (image left / content right) */ .c-card--list {} /* CASE: overlay content */ .c-card--overlay {} /* CASE: stacked content */ .c-card--stacked {} /* CASE: tighten up stacked content spacing */ .c-card--stacked-tight {} /* CASE: image has content overlay, used with stacked */ .c-card--stacked-has-image-content {} /* CASE: stacked content meta bottom/right vs. top right */ .c-card--stacked-meta-bottom {} /* CASE: moves stacked content meta to top right at --vieweport-full, to not be used with the .c-card--stacked-meta-bottom */ .c-card--stacked-meta-right-\@full {} /* ----------------------------------------------------------------------------- * Card: Wrapper - Outer * ----------------------------------------------------------------------------- */ .c-card__wrapper-outer { display: block; } /* CASE: overlay content */ .c-card--overlay .c-card__wrapper-outer { background-color: #292929; position: relative; overflow: hidden; box-sizing: border-box; } .c-card--overlay .c-card__wrapper-outer > * { position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-sizing: border-box; } .c-card--overlay .c-card__wrapper-outer:before { position: relative; display: block; content: ""; padding-top: 56.25%; box-sizing: border-box; } /* CASE: outer wrapper as anchor */ .c-card__anchor { transition: all 0.3s ease; } /* CASE: stacked content & list */ .c-card--stacked .c-card__anchor:hover .c-card__title, .c-card--stacked .c-card__anchor:focus .c-card__title, .c-card--list .c-card__anchor:hover .c-card__title, .c-card--list .c-card__anchor:focus .c-card__title { color: #0f81d9; } /* ----------------------------------------------------------------------------- * Card: Wrapper - Inner * ----------------------------------------------------------------------------- */ /* CASE: list */ .c-card--list .c-card__wrapper-inner { display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } /* CASE: stacked content & list */ .c-card--stacked .c-card__image-wrapper, .c-card--list .c-card__image-wrapper { background-color: #292929; position: relative; overflow: hidden; transition: all 0.3s ease; box-sizing: border-box; } .c-card--stacked .c-card__image-wrapper:before, .c-card--list .c-card__image-wrapper:before { border-top: 1px solid transparent; } .c-card--stacked .c-card__image-wrapper > *, .c-card--list .c-card__image-wrapper > * { position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-sizing: border-box; } .c-card--stacked .c-card__image-wrapper:before, .c-card--list .c-card__image-wrapper:before { position: relative; display: block; content: ""; padding-top: 62.5%; box-sizing: border-box; } /* CASE: list */ .c-card--list .c-card__image-wrapper { -webkit-flex: 0 0 110px; -ms-flex: 0 0 110px; flex: 0 0 110px; left: 6px; } @media (min-width: 600px) { .c-card--list .c-card__image-wrapper { -webkit-flex: 0 0 165px; -ms-flex: 0 0 165px; flex: 0 0 165px; } } @media (min-width: 768px) { .c-card--list .c-card__image-wrapper { left: 8px; } } .c-card__image { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; min-height: 100%; max-height: 100%; width: 100%; background-position: 50% 100%; background-size: cover; background-repeat: no-repeat; } .c-card__image-content { display: none; visibility: hidden; opacity: 0; transition: opacity 0.3s ease; background-color: rgba(0, 0, 0, .55); padding: 10px 10px 12px; position: absolute; left: 0; bottom: 0; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; width: 100%; } @media (min-width: 960px) { .c-card__image-content { display: -webkit-flex; display: -ms-flexbox; display: flex; visibility: visible; padding: 24px 18px 45px; z-index: 1; } } /* CASE: image has content overlay, used with stacked */ @media (min-width: 960px) { .c-card__anchor:hover .c-card__image-content, .c-card__anchor:focus .c-card__image-content { opacity: 1; } } .c-card__image-excerpt { -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto; font-smoothing: subpixel-antialiased; letter-spacing: 0.02em; font-size: 14px; color: #fff; line-height: 1.4; overflow: hidden; max-height: 76px; } /* CASE: overlay content */ .c-card--overlay .c-card__content { padding: 10px 28px 8px 10px; position: absolute; left: 0; bottom: 0; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; width: 100%; } @media (min-width: 1215px) { .c-card--overlay .c-card__content { padding: 15px 40px 15px 18px; } } /* CASE: overlay stacked */ .c-card--stacked .c-card__content { position: relative; } @media (min-width: 1215px) { .c-card--stacked .c-card__content { padding-right: 40px; } } /* CASE: overlay stacked & meta bottom */ .c-card--stacked-meta-bottom .c-card__content:after { content: ''; display: table; clear: both; } @media (min-width: 1215px) { .c-card--stacked-meta-bottom .c-card__content { padding-right: 0; } } /* CASE: moves stacked content meta to top right at --vieweport-full */ @media (min-width: 960px) { .c-card--stacked-meta-right-\@full .c-card__content { padding-right: 40px; } } /* CASE: overlay stacked */ .c-card--stacked .c-card__image-wrapper + .c-card__content { margin-top: 20px; } @media (min-width: 1215px) { .c-card--stacked .c-card__image-wrapper + .c-card__content { margin-top: 30px; } } /* CASE: tighten up stacked content spacing */ @media (min-width: 1215px) { .c-card--stacked-tight .c-card__image-wrapper + .c-card__content { margin-top: 22px; } } /* CASE: list */ .c-card--list .c-card__content { -webkit-flex: 1; -ms-flex: 1; flex: 1; margin-left: 21px; padding-top: 8px; } @media (min-width: 600px) { .c-card--list .c-card__content { padding-top: 10px; } } @media (min-width: 768px) { .c-card--list .c-card__content { margin-left: 28px; } } .c-card__title { font-weight: 700; letter-spacing: 0.02em; line-height: 1; } /* CASE: overlay content */ .c-card--overlay .c-card__title { font-size: 13px; } @media (min-width: 1215px) { .c-card--overlay .c-card__title { font-size: 18px; } } /* CASE: stacked content */ .c-card--stacked .c-card__title { transition: all 0.3s ease; font-size: 16px; } @media (min-width: 1215px) { .c-card--stacked .c-card__title { font-size: 20px; } } .c-card--stacked .c-card__title + .c-card__excerpt { margin-top: 8px; max-height: 80px; overflow: hidden; } @media (min-width: 1215px) { .c-card--stacked .c-card__title + .c-card__excerpt { margin-top: 16px; } } /* CASE: tighten up stacked content spacing */ .c-card--stacked-tight .c-card__title { margin-bottom: 3px; } @media (min-width: 1215px) { .c-card--stacked-tight .c-card__title { margin-bottom: 4px; } } .c-card--stacked-tight .c-card__title + .c-card__excerpt { margin-top: 0; } /* CASE: list */ .c-card--list .c-card__title { transition: all 0.3s ease; font-size: 17px; } @media (min-width: 600px) { .c-card--list .c-card__title { font-size: 19px; } } @media (min-width: 768px) { .c-card--list .c-card__title { font-size: 21px; display: inline-block; margin-right: 14px; } } .c-card--list .c-card__title + * { margin-top: 5px; } .c-card__excerpt { -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto; font-smoothing: subpixel-antialiased; letter-spacing: 0.02em; } /* CASE: overlay content */ .c-card--overlay .c-card__excerpt { font-size: 9px; line-height: 1; } @media (min-width: 1215px) { .c-card--overlay .c-card__excerpt { font-size: 12px; } } /* CASE: stacked content */ .c-card--stacked .c-card__excerpt { font-size: 11px; color: #737a82; } @media (min-width: 1215px) { .c-card--stacked .c-card__excerpt { font-size: 14px; } } /* CASE: tighten up stacked content spacing */ @media (min-width: 1215px) { .c-card--stacked-tight .c-card__excerpt { font-size: 12px; } } /* CASE: list */ .c-card--list .c-card__excerpt { display: none; color: #737a82; font-size: 14px; line-height: 1.4; } @media (min-width: 768px) { .c-card--list .c-card__excerpt { display: block; } } @media (min-width: 768px) { .c-card--list * + .c-card__excerpt { margin-top: 16px; } } /* CASE: overlay content */ .c-card--overlay .c-card__icon-list { position: absolute; bottom: 8px; right: 6px; } @media (min-width: 1215px) { .c-card--overlay .c-card__icon-list { right: 13px; bottom: 16px; } } /* CASE: stacked content */ .c-card--stacked .c-card__icon-list { margin-top: 7px; } @media (min-width: 1215px) { .c-card--stacked .c-card__icon-list { margin-top: 0; position: absolute; top: 0; right: 8px; } } /* CASE: moves stacked content meta to top right at --vieweport-full */ @media (min-width: 960px) { .c-card--stacked-meta-right-\@full .c-card__icon-list { margin-top: 0; position: absolute; top: 0; right: 8px; } } /* CASE: overlay stacked & meta bottom */ .c-card--stacked-meta-bottom .c-card__icon-list { float: right; width: 35%; text-align: right; padding-left: 5px; line-height: 0; margin-top: 11px; } @media (min-width: 1215px) { .c-card--stacked-meta-bottom .c-card__icon-list { position: static; margin-top: 11px; padding-right: 8px; } } /* CASE: stacked has image content overlay */ .c-card--stacked-has-image-content .c-card__icon-list.c-card__image-icon-list { position: absolute; bottom: 16px; top: auto; right: 15px; } /* CASE: Hide from --viewport-full on down */ .c-card__icon-list.c-card__icon-list--hidden-full-down { display: none; } @media (min-width: 960px) { .c-card__icon-list.c-card__icon-list--hidden-full-down { display: block; } } /* CASE: list */ .c-card--list .c-card__icon-list { margin-top: 6px; line-height: 0; } @media (min-width: 1215px) { .c-card--list .c-card__icon-list { margin-top: 10px; } } /* CASE: has piped separator between taxonomies/icons */ .c-card--has-piped-icons .c-card__icon-list {} .c-card__icon-list-item { line-height: 0; text-align: center; } .c-card__icon-list-item .icon__tooltip-trigger { position: relative; top: -3px; } .c-card__icon-list-item .icon__tooltip-trigger .icon-more-vertical { display: block; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } @media (min-width: 1215px) { .c-card__icon-list-item .icon__tooltip-trigger .icon-more-vertical { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); } } @media (min-width: 1215px) { .c-card__icon-list-item .icon__tooltip-trigger { top: 0; } } /* CASE: stacked content */ .c-card--stacked .c-card__icon-list-item { display: inline-block; margin-right: 4px; } @media (min-width: 1215px) { .c-card--stacked .c-card__icon-list-item { display: list-item; margin-right: 0; } } /* CASE: overlay stacked & meta bottom */ .c-card--stacked-meta-bottom .c-card__icon-list-item { margin-right: 0; margin-left: 4px; } @media (min-width: 1215px) { .c-card--stacked-meta-bottom .c-card__icon-list-item { display: inline-block; margin-left: 6px; } } /* CASE: image has content */ .c-card__image-icon-list .c-card__icon-list-item { margin-right: 0; display: inline-block; margin-left: 10px; } /* CASE: overlay content */ .c-card--overlay .c-card__icon-list-item ~ .c-card__icon-list-item { margin-top: 2px; } @media (min-width: 1215px) { .c-card--overlay .c-card__icon-list-item ~ .c-card__icon-list-item { margin-top: 4px; } } /* CASE: stacked content */ @media (min-width: 1215px) { .c-card--stacked .c-card__icon-list-item ~ .c-card__icon-list-item { margin-top: 4px; } } /* CASE: overlay stacked & meta bottom & list */ .c-card--stacked-meta-bottom .c-card__icon-list-item ~ .c-card__icon-list-item, .c-card--list .c-card__icon-list-item ~ .c-card__icon-list-item { margin-top: 4px; } /* CASE: has piped separator between taxonomies/icons */ .c-card--has-piped-icons .c-card__icon-list-item ~ .c-card__icon-list-item { margin-left: 4px; } /* CASE: list */ .c-card--list .c-card__icon-list-item { display: inline-block; margin-right: 8px; } /* CASE: has piped separator between taxonomies/icons */ .c-card--has-piped-icons .c-card__icon-list-item { margin-left: 0; margin-right: 0; } /* CASE: featured product panel */ .panel-fp__product-item .c-card__icon-list-item--more { position: relative; top: -2px; } .panel-fp__product-item .c-card__icon-list-item--more .icon-more-vertical { display: block; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } @media (min-width: 1215px) { .panel-fp__product-item .c-card__icon-list-item--more { top: -6px; } } .c-card__icon-list-item-content.c-card__icon-list-item-content { max-width: 16px; } @media (min-width: 1215px) { .c-card__icon-list-item-content.c-card__icon-list-item-content { max-width: 20px; } } /* CASE: stacked content */ @media (min-width: 1215px) { .c-card--stacked .c-card__icon-list-item-content.c-card__icon-list-item-content { max-width: 22px; } } /* CASE: item content is an action */ .c-card__icon-list-item-content.c-card__icon-list-item-content.c-card__icon-list-item-content--action { max-width: none; } /* CASE: image has content */ .c-card__image-icon-list .c-card__icon-list-item-content.c-card__icon-list-item-content { max-width: 20px; } .c-card__icon-list-item-content--action { background-color: #f4f4f4; border: 0; padding: 0; color: #8d8d8d; width: 26px; height: 26px; line-height: 29px; transition: all 0.15s ease-in-out; font-size: 16px; cursor: pointer; text-align: center; } .c-card__icon-list-item-content--action:hover, .c-card__icon-list-item-content--action:focus { background-color: #2db9ed; color: #fff; } .c-card__icon-list-item-content--action:focus { outline: 1px dotted; } .c-card__icon-list-item-tax { display: inline; } .c-card__icon-list-item-tax:after { padding: 0 10px; font-size: 18px; -webkit-transform: rotate(32deg); -ms-transform: rotate(32deg); transform: rotate(32deg); display: inline-block; position: relative; bottom: 4px; color: rgba(255, 255, 255, .3); } /* CASE: list */ .c-card--list .c-card__icon-list-item-tax:after { color: rgba(157, 157, 157, .3); font-size: 16px; bottom: 3px; } @media (min-width: 1215px) { .c-card--list .c-card__icon-list-item-tax:after { font-size: 18px; bottom: 4px; } } .c-card__icon-list-items-list { display: inline; } .c_card__tax { -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto; font-smoothing: subpixel-antialiased; } /* CASE: stacked content & list */ .c-card--stacked .c_card__tax, .c-card--list .c_card__tax { font-size: 10px; letter-spacing: 0.02em; color: #737a82; line-height: 1.2; } @media (min-width: 768px) { .c-card--stacked .c_card__tax, .c-card--list .c_card__tax { font-size: 12px; } } /* CASE: list */ @media (min-width: 600px) { .c-card--list .c_card__tax { font-size: 12px; } } @media (min-width: 768px) { .c-card--list .c_card__tax { display: inline-block; } } /* CASE: overlay stacked & meta bottom */ .c-card--stacked-meta-bottom .c_card__tax { margin-top: 15px; float: left; width: 65%; padding-right: 5px; position: relative; top: 2px; } @media (min-width: 768px) { .c-card--stacked-meta-bottom .c_card__tax { top: 5px; } } .c_card__tax-item { display: inline-block; } .c_card__tax-item ~ .c_card__tax-item { margin-top: 0; } /*.c-card__notice { position: absolute; top: 0px; right: 0; width: 72px; height: 34px; display: block; z-index: 1; background: svg-load('shapes/sale-badge.svg') no-repeat 0 0; background-size: contain; backface-visibility: hidden; text-align: center; padding: 0 4px 0 6px; @media (--viewport-large) { width: 95px; height: 45px; padding: 0 6px 0 8px; top:0; } } .n-card__notice { position: absolute; top: 0px; left: 0; width: 72px; height: 34px; display: block; z-index: 1; background: svg-load('shapes/new-badge.svg') no-repeat 0 0; background-size: contain; backface-visibility: hidden; text-align: center; padding: 0 4px 0 6px; @media (--viewport-large) { width: 95px; height: 45px; padding: 0 6px 0 8px; top:0; } } .c-card__notice-content { color: var(--color-white); font-weight: var(--font-weight-bold); font-size: 12px; transform: rotate(10deg); line-height: 1; text-overflow: clip; white-space: nowrap; overflow: hidden; text-align: center; text-transform: uppercase; margin: 11px auto 0; @media (--viewport-large) { font-size: 15px; margin-top: 14px; } } .item-product__add-to-cart div.c-card__notice { right:0; top: -125px; @media (--viewport-large) { right:100%; width: 128px; height: 60px; padding: 0 6px 0 8px; top:0; } } .item-product__add-to-cart .c-card__notice-content{ transform: rotate(11deg); font-size: 15px; margin-top: 9px; margin-left: 9px; @media (--viewport-large) { transform: rotate(11deg); font-size: 22px; margin-top: 16px; margin-left: 13px; } } .n-card__notice-content { color: var(--color-white); font-weight: var(--font-weight-bold); font-size: 12px; transform: rotate(-10deg); line-height: 1; text-overflow: clip; white-space: nowrap; overflow: hidden; text-align: center; text-transform: uppercase; margin: 11px auto 0; @media (--viewport-large) { font-size: 15px; margin-top: 14px; } } .product-header-img-block div.n-card__notice { right:0; @media (--viewport-large) { right:100%; width: 128px; height: 60px; padding: 0 6px 0 8px; top:0; } } .product-header-img-block .n-card__notice-content{ transform: rotate(-11deg); font-size: 15px; margin-top: 9px; margin-right: 9px; @media (--viewport-large) { transform: rotate(-11deg); font-size: 22px; margin-top: 16px; margin-right: 13px; } } .n-card_list__notice, .c-card_list__notice{ display: none; } */ /*product*/ .badge-icon-block { position: absolute; right: 0; top: 0; padding: 5px; text-align: center; } .badge-icon-block .n-card__notice, .badge-icon-block .c-card__notice, .badge-icon-block .colorme-card__notice { padding: 7px 29px; } @media (min-width: 1215px) { .badge-icon-block .n-card__notice, .badge-icon-block .c-card__notice, .badge-icon-block .colorme-card__notice { padding: 12px 48px; } } .n-card__notice, .n-card_list__notice { background: #5da349; } .c-card__notice, .c-card_list__notice { background: #dd111d; } .badge-icon-block .c-card__notice-content, .badge-icon-block .n-card__notice-content, .badge-icon-block .colorme-card__notice-content { color: #fff; text-transform: uppercase; font-size: 12px; line-height: 1.1; font-weight: 900; } @media (min-width: 1215px) { .badge-icon-block .c-card__notice-content, .badge-icon-block .n-card__notice-content, .badge-icon-block .colorme-card__notice-content { font-size: 18px; } } /*product*/ /*category*/ .c-card__wrapper-inner .badge-icon-block-category, .badge-icon-block-home { position: absolute; right: 0; top: 0; padding: 5px; text-align: center; z-index: 1; } .badge-icon-block-category .n-card__notice, .badge-icon-block-category .c-card__notice, .badge-icon-block-category .colorme-card__notice, .badge-icon-block-home .n-card__notice, .badge-icon-block-home .c-card__notice, .badge-icon-block-home .colorme-card__notice { padding: 7px 29px; } .badge-icon-block-category .c-card__notice-content, .badge-icon-block-category .n-card__notice-content, .badge-icon-block-category .colorme-card__notice-content, .badge-icon-block-home .c-card__notice, .badge-icon-block-home .n-card__notice, .badge-icon-block-home .colorme-card__notice { color: #fff; text-transform: uppercase; font-size: 12px; line-height: 1.1; font-weight: 900; } .badge-icon-block-category .c-card_list__notice-content, .badge-icon-block-category .n-card_list__notice-content, .badge-icon-block-category .colorme-card_list__notice-content { color: #fff; text-transform: uppercase; font-size: 10px; line-height: 1; font-weight: 900; } .badge-icon-block-category .n-card_list__notice, .badge-icon-block-category .c-card_list__notice, .badge-icon-block-category .colorme-card_list__notice { padding: 5px 21px; } /*category*/ /* Vendor */ /* ----------------------------------------------------------------------------- * * Vendor * * This file is just a clearing-house. * Make partials (start with an underscore) for any actual css code. * * ----------------------------------------------------------------------------- */ /* Vendor: Chosen */ /* ----------------------------------------------------------------------------- * * Chosen * * Note: For now we're primarily using this as part of Gravity Forms fields * * Chosen, a Select Box Enhancer for jQuery and Prototype * by Patrick Filler for Harvest, http://getharvest.com * * Version 1.5.1 * Full source at https://github.com/harvesthq/chosen * Copyright (c) 2011-2016 Harvest http://getharvest.com * * MIT License, https://github.com/harvesthq/chosen/blob/master/LICENSE.md * This file is generated by `grunt build`, do not edit it by hand. * * This file is just a clearing-house. * Make partials (start with an underscore) for any actual css code. * * ----------------------------------------------------------------------------- */ :root {/* ----------------------------------------------------------------------------- * General * ----------------------------------------------------------------------------- *//* Multiple *//* Font *//* Option *//* Placeholder *//* ----------------------------------------------------------------------------- * Search * ----------------------------------------------------------------------------- *//* ----------------------------------------------------------------------------- * Drop * ----------------------------------------------------------------------------- *//* ----------------------------------------------------------------------------- * Results * ----------------------------------------------------------------------------- *//* Group *//* ----------------------------------------------------------------------------- * Multiple * ----------------------------------------------------------------------------- *//* Font *//* Spacers *//* UI *//* Results */ } /* ----------------------------------------------------------------------------- * Base * ----------------------------------------------------------------------------- */ .chosen-container { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: relative; display: inline-block; vertical-align: middle; font-size: 15px; width: 100% !important; } .chosen-container * { box-sizing: border-box; } .chosen-container .chosen-drop { position: absolute; top: 100%; left: -9999px; z-index: 1010; width: 100%; border: 2px solid #0f81d9; border-top: 0; background-color: #fff; box-shadow: 0 4px 5px rgba(0, 0, 0, .15); margin-top: -2px; border-radius: 0 0 4px 4px; } .chosen-container.chosen-with-drop .chosen-drop { left: 0; } .chosen-container a { cursor: pointer; color: #919092; } .chosen-container a:hover, .chosen-container a:focus { color: inherit; } .chosen-container .search-choice .group-name, .chosen-container .chosen-single .group-name { margin-right: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: normal; color: #292929; } .chosen-container .search-choice .group-name:after, .chosen-container .chosen-single .group-name:after { content: ":"; padding-left: 2px; vertical-align: top; } /* ----------------------------------------------------------------------------- * Single Chosen * ----------------------------------------------------------------------------- */ .chosen-container-single .chosen-single { position: relative; display: block; overflow: hidden; padding: 0 0 0 16px; height: 48px; border: 2px solid #ebebeb; border-radius: 4px; background-color: #fff; color: #292929; text-decoration: none; white-space: nowrap; letter-spacing: normal; text-transform: none; font: normal 400 15px / 48px kozuka-gothic-pro, sans-serif; } .chosen-container-single .chosen-single span { display: block; overflow: hidden; margin-right: 64px; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; } .chosen-container-single .chosen-default { color: #919092; font: normal 400 15px / 48px kozuka-gothic-pro, sans-serif; } .chosen-container-single .chosen-default span { font-weight: 400; } .chosen-container-single .chosen-single-with-deselect span { margin-right: 64px; } .chosen-container-single .chosen-search { position: relative; z-index: 1010; margin: 0; padding: 0; white-space: nowrap; } .chosen-container-single .chosen-search:after { font-family: 'core-icons'; speak: none; font-style: normal; font-weight: normal; font-feature-settings: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: auto; content: '\e902'; position: absolute; right: 0; color: #999; font-size: 28px; height: 48px; line-height: 48px; top: 0; width: 48px; text-align: center; cursor: default; } .chosen-container-single .chosen-search input[type="text"] { margin: 0 0 1px; padding: 0 64px 0 16px; width: 100%; height: 48px; border: 1px solid #d6d6d7 !important; border-left: 0 !important; border-right: 0 !important; background-color: #fff; border-radius: 0; } .chosen-container-single .chosen-search input[type="text"]:focus { box-shadow: none; border-left: 0; border-right: 0; } .chosen-container-single .chosen-drop { background-clip: padding-box; } .chosen-container-single.chosen-container-single-nosearch .chosen-search { position: absolute; left: -9999px; } /* ----------------------------------------------------------------------------- * Results * ----------------------------------------------------------------------------- */ .chosen-container .chosen-results { position: relative; overflow-x: hidden; overflow-y: auto; margin: 0; padding: 0; max-height: 240px; -webkit-overflow-scrolling: touch; font: normal 400 15px / normal kozuka-gothic-pro, sans-serif; } .chosen-container .chosen-results li { display: none; margin: 0; padding: 12px 16px 10px; list-style: none; line-height: 1; word-wrap: break-word; -webkit-touch-callout: none; } .chosen-container .chosen-results li.active-result { display: list-item; cursor: pointer; } .chosen-container .chosen-results li.disabled-result { display: list-item; color: #919092; cursor: default; } .chosen-container .chosen-results li.highlighted { background-color: #f5f5f5; color: #000; } .chosen-container .chosen-results li.no-results { display: list-item; background-color: #fff; color: #000; } .chosen-container .chosen-results li.group-result { display: list-item; font-weight: 700; cursor: default; } .chosen-container .chosen-results li.group-option { padding-left: 16px; } .chosen-container .chosen-results li em { font-style: normal; text-decoration: underline; } /* ----------------------------------------------------------------------------- * Multi Chosen * ----------------------------------------------------------------------------- */ .chosen-container-multi .chosen-choices { position: relative; overflow: hidden; margin: 0; padding: 0 16px; width: 100%; height: auto !important; border: 2px solid #ebebeb; border-radius: 4px; background-color: #fff; cursor: text; color: #292929; min-height: 51px; } .chosen-container-multi .chosen-choices li { float: left; list-style: none; } .chosen-container-multi li.search-field { margin: 0; padding: 0; white-space: nowrap; } .chosen-container-multi li.search-field input[type="text"] { margin: 0; padding: 0; height: 51px !important; outline: 0; border: 0 !important; width: auto !important; color: #919092; line-height: normal; } .chosen-container-multi li.search-field input[type="text"]:focus { color: #292929; border: 0 !important; box-shadow: none !important; } .chosen-container-multi li.search-choice { position: relative; margin: 8px 8px 0 0; padding: 12px 30px 10px 10px; max-width: 100%; background-color: #0f81d9; color: #fff; cursor: default; overflow: hidden; height: 35px; font: normal 400 14px / 1 kozuka-gothic-pro, sans-serif; } .chosen-container-multi li.search-choice span { -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto; font-smoothing: subpixel-antialiased; word-wrap: break-word; } .chosen-container-multi li.search-choice .search-choice-close { position: absolute; top: 0; right: 0; display: block; width: 20px; height: 100%; color: #fff; text-align: center; border: 0; } .chosen-container-multi li.search-choice .search-choice-close:before { font-family: 'core-icons'; speak: none; font-style: normal; font-weight: normal; font-feature-settings: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: auto; content: '\e117'; color: #fff; font-size: 12px; position: absolute; top: 50%; width: 20px; right: 0; z-index: 1; margin-top: -6px; height: 12px; } .chosen-container-multi li.search-choice .search-choice-close:after { transition: all 0.15s ease-in-out; content: ''; height: 100%; position: absolute; width: 20px; background-color: #1761b1; top: 0; right: 0; } .chosen-container-multi li.search-choice .search-choice-close:hover:after, .chosen-container-multi li.search-choice .search-choice-close:focus:after { background-color: #074f9b; } .chosen-container-multi .chosen-results { margin: 0; padding: 0; } .chosen-container-multi .chosen-drop .result-selected { display: list-item; color: #919092; cursor: default; } /* ----------------------------------------------------------------------------- * Active * ----------------------------------------------------------------------------- */ .chosen-container-active .chosen-single { border-color: #0f81d9; } .chosen-container-active.chosen-with-drop .chosen-single, .chosen-container-active.chosen-with-drop .chosen-choices { border-color: #0f81d9;/* box-shadow: 0 0 0 var(--chosen-border-size-focus) var(--chosen-border-color-focus); */ border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .chosen-container-active .chosen-choices { transition: all 0.15s ease-in-out; border: 2px solid #0f81d9;/* box-shadow: 0 0 0 var(--chosen-border-size-focus) var(--chosen-border-color-focus); */ } /* ----------------------------------------------------------------------------- * Disabled Support * ----------------------------------------------------------------------------- */ .chosen-disabled { opacity: 0.5 !important; cursor: default; } .chosen-disabled .chosen-single { cursor: default; } .chosen-disabled .chosen-choices .search-choice .search-choice-close { cursor: default; } /* Vendor: jQuery Datepicker */ /* ----------------------------------------------------------------------------- * * jQuery Datepicker * * Note: For now we're primarily using this as part of Gravity Forms fields * * https://plugins.jquery.com/ui.datepicker/ * * This file is just a clearing-house. * Make partials (start with an underscore) for any actual css code. * * ----------------------------------------------------------------------------- */ :root {/* Background Colors *//* Colors *//* Fonts */ } #ui-datepicker-div { background: #2a292c; border: none; border-radius: 0; width: auto; font: normal 400 15px / 48px "Helvetica Neue", Helvetica, Arial, sans-serif; } #ui-datepicker-div select { padding: 0; font-size: 14px; font-weight: 700; border: 0; background-color: transparent; display: inline-block; height: auto; color: #fff; } #ui-datepicker-div option { color: #fff; } #ui-datepicker-div.ui-datepicker { padding: 0; } #ui-datepicker-div .ui-datepicker-header { border: none; background: transparent; font-weight: normal; font-size: 15px; } #ui-datepicker-div .ui-datepicker-header .ui-state-hover { background: transparent; border-color: transparent; cursor: pointer; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; } #ui-datepicker-div.ui-datepicker .ui-datepicker-title { margin-top: 0.4em; margin-bottom: 0.3em; color: #fff; } #ui-datepicker-div.ui-datepicker .ui-datepicker-prev-hover, #ui-datepicker-div.ui-datepicker .ui-datepicker-next-hover, #ui-datepicker-div.ui-datepicker .ui-datepicker-next, #ui-datepicker-div.ui-datepicker .ui-datepicker-prev { top: 0.9em; border: none; } #ui-datepicker-div.ui-datepicker .ui-datepicker-prev-hover { left: 2px; } #ui-datepicker-div.ui-datepicker .ui-datepicker-next-hover { right: 2px; } #ui-datepicker-div.ui-datepicker .ui-datepicker-next span, #ui-datepicker-div.ui-datepicker .ui-datepicker-prev span {/* background-image: url('var(--path-css-vendor)/jquery-datepicker/images/ui-icons_ffffff_256x240.png'); background-position: -32px 0; */ background: none; margin-top: 0; top: 0; font-weight: normal; text-indent: 0; } #ui-datepicker-div.ui-datepicker .ui-datepicker-next span:after, #ui-datepicker-div.ui-datepicker .ui-datepicker-prev span:after { font-family: 'core-icons'; speak: none; font-style: normal; font-weight: normal; font-feature-settings: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: auto; transition: all 0.15s ease-in-out; position: absolute; color: #fff; font-size: 12px; top: 2px; left: 0; content: '\f054'; } /* background-position: -96px 0; */ #ui-datepicker-div.ui-datepicker .ui-datepicker-prev span:after { left: auto; right: 0; content: '\f053'; } #ui-datepicker-div.ui-datepicker .ui-datepicker-prev-hover span:after, #ui-datepicker-div.ui-datepicker .ui-datepicker-next-hover span:after { color: rgba(255, 255, 255, .65); } #ui-datepicker-div.ui-datepicker table { margin: 0; background-color: transparent; table-layout: auto; } #ui-datepicker-div tbody { background: #333236; } #ui-datepicker-div.ui-datepicker th { -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto; font-smoothing: subpixel-antialiased; padding: 12px 0; color: rgba(255, 255, 255, .4); border: 0; background-color: transparent; font-size: 13px; line-height: 1; font-weight: 400; } #ui-datepicker-div.ui-datepicker tr { border: none; background-color: #333236; } #ui-datepicker-div.ui-datepicker td { background: #333236; border: none; padding: 0; } #ui-datepicker-div td .ui-state-default { background: transparent; border: none; text-align: center; margin: 0; font-weight: 400; color: #fff; font-size: 18px; padding: 12px; line-height: 1; } #ui-datepicker-div .ui-state-disabled { opacity: 1; } #ui-datepicker-div .ui-state-disabled .ui-state-default { color: rgba(255, 255, 255, .65); } #ui-datepicker-div td .ui-state-active, #ui-datepicker-div td .ui-state-hover { background: #0f81d9; font-weight: 700; } /* Vendor: Gravity Forms */ /* ----------------------------------------------------------------------------- * * Gravity Forms * * http://www.gravityforms.com/ * * This file is just a clearing-house. * Make partials (start with an underscore) for any actual css code. * * ----------------------------------------------------------------------------- */ :root {/* ----------------------------------------------------------------------------- * General * ----------------------------------------------------------------------------- *//* ----------------------------------------------------------------------------- * Descriptions & Helpers * ----------------------------------------------------------------------------- *//* ----------------------------------------------------------------------------- * Complex Layouts * ----------------------------------------------------------------------------- *//* ----------------------------------------------------------------------------- * Controls * ----------------------------------------------------------------------------- *//* ----------------------------------------------------------------------------- * Control Icon * ----------------------------------------------------------------------------- *//* ----------------------------------------------------------------------------- * Control: File * ----------------------------------------------------------------------------- *//* ----------------------------------------------------------------------------- * Control: Lists * ----------------------------------------------------------------------------- *//* ----------------------------------------------------------------------------- * Control: Radio & Checkbox * ----------------------------------------------------------------------------- *//* ----------------------------------------------------------------------------- * Control: Textarea * ----------------------------------------------------------------------------- *//* ----------------------------------------------------------------------------- * Control: Time & Date * ----------------------------------------------------------------------------- *//* ----------------------------------------------------------------------------- * Validation * ----------------------------------------------------------------------------- *//* State: Error *//* State: Success */ } .gform_wrapper ul { list-style: none; max-width: none; } .gform_wrapper ul li { margin: 0 0 28px; line-height: 1; padding: 0; } .gform_wrapper ul li:before { content: none; } .gform_wrapper > form { position: relative; } .gform_wrapper > form ul { margin: 0; padding: 0; font-size: 16px; } /* Inputs: Honeypot */ .gform_wrapper .gform_validation_container { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* Input: Submit & Buttons */ .gform_wrapper .gform_button, .gform_wrapper .gform_next_button, .gform_wrapper .gform_previous_button { line-height: 1; height: auto; cursor: pointer; text-decoration: none; border: 0; background-color: transparent; padding: 0; width: auto; display: inline-block; transition: all 0.15s ease-in-out; font-weight: 900; font-size: 14px; background-color: #2db9ed; border-radius: 4px; padding: 17px 18px 14px; text-align: center; color: #fff; text-transform: uppercase; width: 100%; margin-top: 25px; } @media (min-width: 768px) { .gform_wrapper .gform_button, .gform_wrapper .gform_next_button, .gform_wrapper .gform_previous_button { font-size: 16px; padding: 23px 25px 18px; } } .gform_wrapper .gform_button:visited, .gform_wrapper .gform_next_button:visited, .gform_wrapper .gform_previous_button:visited { background-color: #2db9ed; color: #fff; } .gform_wrapper .gform_button:hover, .gform_wrapper .gform_button:focus, .gform_wrapper .gform_next_button:hover, .gform_wrapper .gform_next_button:focus, .gform_wrapper .gform_previous_button:hover, .gform_wrapper .gform_previous_button:focus { background-color: #39c9ff; color: #fff; } .gform_wrapper .gform_button:active, .gform_wrapper .gform_next_button:active, .gform_wrapper .gform_previous_button:active { background-color: #2db9ed; } @media (min-width: 768px) { .gform_wrapper .gform_button, .gform_wrapper .gform_next_button, .gform_wrapper .gform_previous_button { width: auto; } } /* ----------------------------------------------------------------------------- * Headings * ----------------------------------------------------------------------------- */ .gform_heading { margin-bottom: 32px; } /* ----------------------------------------------------------------------------- * Descriptions * ----------------------------------------------------------------------------- */ .gform_description { font-size: 14px; text-rendering: optimizeLegibility; } @media (min-width: 768px) { .gform_description { font-size: 16px; } } /* ----------------------------------------------------------------------------- * Descriptions & Text Helpers * ----------------------------------------------------------------------------- */ .gfield_description, .instruction { -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto; font-smoothing: subpixel-antialiased; display: block; margin-top: 10px; padding: 0 18px; color: #919092; letter-spacing: 0.02em; text-transform: none; font: normal 400 12px / 1.25 kozuka-gothic-pro, sans-serif; margin-bottom: 20px; max-width: 600px; } .instruction { display: none; } .ginput_complex { margin-bottom: -11px; } .ginput_complex:after { content: ''; display: table; clear: both; } .ginput_complex label { -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto; font-smoothing: subpixel-antialiased; display: block; margin-top: 10px; padding: 0 18px; color: #919092; letter-spacing: 0.02em; text-transform: none; font: normal 400 12px / 1.25 kozuka-gothic-pro, sans-serif; } .ginput_full { display: block; } .ginput_right, .ginput_left, .name_first, .name_last { display: block; } .ginput_right:after, .ginput_left:after, .name_first:after, .name_last:after { content: ''; display: table; clear: both; } @media (min-width: 768px) { .ginput_right, .ginput_left, .name_first, .name_last { width: 50%; } } @media (min-width: 768px) { .ginput_left, .name_first { padding-right: 8px; float: left; } } @media (min-width: 768px) { .ginput_right, .name_last { padding-left: 8px; float: right; } } @media (min-width: 768px) { .gfield_date_dropdown_month, .gfield_date_month, .gfield_time_hour { padding-right: 8px; } } @media (min-width: 768px) { .gfield_date_dropdown_day, .gfield_date_day, .gfield_time_minute { padding-left: 8px; padding-right: 8px; } } @media (min-width: 768px) { .gfield_date_dropdown_year, .gfield_date_year, .gfield_time_ampm { padding-left: 8px; } } .gfield_date_dropdown_year label, .gfield_date_year label, .gfield_time_ampm label { margin-bottom: 0; } @media (min-width: 768px) { .gfield_date_dropdown_year label, .gfield_date_year label, .gfield_time_ampm label { margin-bottom: 8px; } } .gform_wrapper .spinner { position: absolute !important; top: auto !important; bottom: -25px !important; left: 50% !important; } @media (min-width: 768px) { .gform_wrapper .spinner { top: 50% !important; bottom: auto !important; left: auto !important; right: 23px !important; } } .gform_footer { position: relative; } @media (min-width: 768px) { .gform_footer { padding-right: 50px; } } [id*="gform_ajax_spinner_"] { display: none !important; } .gform_wrapper input[type="text"], .gform_wrapper input[type="color"], .gform_wrapper input[type="date"], .gform_wrapper input[type="datetime"], .gform_wrapper input[type="datetime-local"], .gform_wrapper input[type="email"], .gform_wrapper input[type="month"], .gform_wrapper input[type="number"], .gform_wrapper input[type="range"], .gform_wrapper input[type="search"], .gform_wrapper input[type="tel"], .gform_wrapper input[type="time"], .gform_wrapper input[type="url"], .gform_wrapper input[type="week"] { transition: all 0.15s ease-in-out; padding: 0 16px; border: 2px solid #ebebeb; border-radius: 4px; background-color: #fff; display: block; width: 100%; height: 48px; color: #292929; letter-spacing: normal; text-transform: none; font: normal 400 15px / 1.5 kozuka-gothic-pro, sans-serif; } /* ----------------------------------------------------------------------------- * * Form: Control Icon * * ----------------------------------------------------------------------------- */ .form-control-icon .ginput_container, .form-control-icon-complex .ginput_complex span:not(.address_country) { position: relative; } .form-control-icon .ginput_container:before, .form-control-icon-complex .ginput_complex span:not(.address_country):before { font-family: 'core-icons'; speak: none; font-style: normal; font-weight: normal; font-feature-settings: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: auto; } .form-control-icon .ginput_container input, .form-control-icon-complex .ginput_complex span:not(.address_country) input { padding-right: 48px; } .form-control-icon .ginput_container:before, .form-control-icon-complex .ginput_complex span:not(.address_country):before { position: absolute; right: 0; top: 0; color: #d5d5d5; height: 100%; width: 48px; line-height: 50px; text-align: center; z-index: 1; font-size: 20px; } /* Simple Fields */ /* Phone */ .gf-phone.form-control-icon .ginput_container:before { content: '\e910'; } /* Name */ .gf-name.form-control-icon .ginput_container:before { content: '\e90f'; } /* Email */ .gf-email.form-control-icon .ginput_container:before { content: '\e90c'; } /* Date */ .gf-date.form-control-icon .ginput_container:before { content: '\e90a'; } /* Address */ .gf-address.form-control-icon .ginput_container:before { content: '\e909'; } /* Website / URL */ .gf-url.form-control-icon .ginput_container:before { content: '\e90d'; } /* Password */ .gf-password.form-control-icon .ginput_container:before { content: '\e90e'; } /* Complex Fields */ .form-control-icon-complex .ginput_complex span:not(.address_country):before { right: 15px; } .form-control-icon-complex .ginput_complex span:not(.address_country):nth-of-type(even):before { right: 0; } .form-control-icon-complex .ginput_complex span:not(.address_country).ginput_full:before { right: 0; } /* Name */ .gf-name.form-control-icon-complex .ginput_complex span:not(.address_country):before { content: '\e90f'; } /* Address */ .gf-address.form-control-icon-complex .ginput_complex span:not(.address_country):before { content: '\e909'; } .gf-checkbox ul li, .gf-radio ul li { padding-left: 35px; margin: 0; } .gf-checkbox .ginput_container, .gf-radio .ginput_container { display: block; display: block; padding-top: 5px; padding-bottom: 4px; } .gf-checkbox .ginput_container input[type="radio"], .gf-checkbox .ginput_container input[type="checkbox"], .gf-radio .ginput_container input[type="radio"], .gf-radio .ginput_container input[type="checkbox"] { height: auto; width: auto; display: inline-block; line-height: normal; padding: 0; } .gf-checkbox .ginput_container label, .gf-radio .ginput_container label { color: #292929; cursor: pointer; margin-bottom: 0; display: inline-block; letter-spacing: normal; text-transform: none; font: normal 400 14px / 1 kozuka-gothic-pro, sans-serif; } .gfield_checkbox li, .gfield_radio li { transition: all 0.15s ease-in-out; position: relative; padding-left: 35px; } .gfield_checkbox li input[type="radio"], .gfield_checkbox li input[type="checkbox"], .gfield_radio li input[type="radio"], .gfield_radio li input[type="checkbox"] { position: absolute; left: 6px; top: 2px; font-size: 12px; } .gfield_checkbox li label, .gfield_radio li label { -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto; font-smoothing: subpixel-antialiased; max-width: 600px; color: #919092 !important; } .gfield_checkbox li label:before, .gfield_checkbox li label:after, .gfield_radio li label:before, .gfield_radio li label:after { transition: all 0.15s ease-in-out; content: ''; position: absolute; } .gfield_checkbox li label:before, .gfield_radio li label:before { background-color: #fff; width: 20px; height: 20px; top: -5px; left: 0; border: 2px solid #ebebeb; } .gfield_checkbox li label:after, .gfield_radio li label:after { opacity: 0; } .gfield_checkbox li input:focus + label:before, .gfield_radio li input:focus + label:before { border-color: #0f81d9;/* box-shadow: 0 0 0 var(--form-control-radio-checkbox-ui-border-size-focus) var(--form-control-radio-checkbox-ui-border-color-focus); */ } .gfield_checkbox li input:checked + label, .gfield_radio li input:checked + label { color: #292929 !important; } .gfield_checkbox li input:checked + label:after, .gfield_radio li input:checked + label:after { opacity: 1; } .gfield_checkbox li .gf-radio-checkbox-other-placeholder:before, .gfield_radio li .gf-radio-checkbox-other-placeholder:before { top: 11px; } .gfield_checkbox li .gf-radio-checkbox-other-placeholder:after, .gfield_radio li .gf-radio-checkbox-other-placeholder:after { top: 19px; } .gfield_checkbox li input:focus ~ .gf-radio-checkbox-other-placeholder:before, .gfield_radio li input:focus ~ .gf-radio-checkbox-other-placeholder:before { border-color: #0f81d9;/* box-shadow: 0 0 0 var(--form-control-radio-checkbox-ui-border-size-focus) var(--form-control-radio-checkbox-ui-border-color-focus); */ } .gfield_checkbox li input:checked ~ .gf-radio-checkbox-other-placeholder, .gfield_radio li input:checked ~ .gf-radio-checkbox-other-placeholder { color: #292929; } .gfield_checkbox li input:checked ~ .gf-radio-checkbox-other-placeholder:after, .gfield_radio li input:checked ~ .gf-radio-checkbox-other-placeholder:after { opacity: 1; } .gfield_checkbox li ~ li, .gfield_radio li ~ li { margin-top: 13px; } .gfield_checkbox input[value="gf_other_choice"][type="radio"], .gfield_checkbox input[value="gf_other_choice"][type="checkbox"], .gfield_radio input[value="gf_other_choice"][type="radio"], .gfield_radio input[value="gf_other_choice"][type="checkbox"] { top: 16px; } @media (min-width: 768px) { .gfield_checkbox input[value="gf_other_choice"] + input, .gfield_radio input[value="gf_other_choice"] + input { width: 50%; } } .gfield_checkbox label:before { border-radius: 4px; } .gfield_checkbox label:after { left: 7px; top: 3px; width: 8px; height: 4px; border: 3px solid #0f81d9; border-top: none; border-right: none; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); border-radius: 1px; } .gfield_radio label:before, .gfield_radio label:after { border-radius: 50%; } .gfield_radio label:after { left: 8px; top: 3px; width: 8px; height: 8px; background-color: #0f81d9; } .gf-select .ginput_container { cursor: pointer; position: relative; } .gf-select .ginput_container:hover:after, .gf-select .ginput_container:focus:after, .gf-select .ginput_container:active:after { background-color: #f5f5f5; } .gf-select .ginput_container:after { font-family: 'core-icons'; speak: none; font-style: normal; font-weight: normal; font-feature-settings: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: auto; display: block; transition: all 0.15s ease-in-out; content: '\e900'; text-align: center; height: 44px; width: 48px; line-height: 47px; background-color: transparent; color: #999; position: absolute; font-size: 20px; right: 2px; top: 2px; pointer-events: none; border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .gf-select .ginput_container select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 64px; } .gf-select .ginput_container select::-ms-expand { display: none; } .gf-address .address_country { cursor: pointer; position: relative; } .gf-address .address_country:hover:after, .gf-address .address_country:focus:after, .gf-address .address_country:active:after { background-color: #f5f5f5; } .gf-address .address_country:after { font-family: 'core-icons'; speak: none; font-style: normal; font-weight: normal; font-feature-settings: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: auto; display: block; transition: all 0.15s ease-in-out; content: '\e900'; text-align: center; height: 44px; width: 48px; line-height: 47px; background-color: transparent; color: #999; position: absolute; font-size: 20px; right: 2px; top: 2px; pointer-events: none; border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .gf-address .address_country select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 64px; } .gf-address .address_country select::-ms-expand { display: none; } .gf-textarea .ginput_container { position: relative; } .gf-textarea textarea { padding-bottom: 46px; } .gf-textarea .wp-core-ui.wp-editor-wrap { border: 2px solid #ebebeb; } /* Counter */ .ginput_counter { display: inline-block; background-color: #f5f5f5; color: #333236; font: normal 400 14px / 42px kozuka-gothic-pro, sans-serif; height: 36px; padding: 0 12px; position: absolute; left: 2px; bottom: 2px; border-bottom-left-radius: 0; } /* ----------------------------------------------------------------------------- * Control: Time & Date Globals * ----------------------------------------------------------------------------- */ @media (min-width: 768px) { .gf-date-layout-datefield.field_sublabel_above .clear-multi, .gf-time.field_sublabel_above .clear-multi { margin-top: -11px; } } @media (min-width: 768px) { .gf-date-layout-datefield.field_sublabel_below .clear-multi, .gf-time.field_sublabel_below .clear-multi { margin-bottom: -11px; } } .gf-date .clear-multi:after, .gf-time .clear-multi:after { content: ''; display: table; clear: both; } .gf-date .clear-multi .ginput_container, .gf-time .clear-multi .ginput_container { display: block; } .gf-date .clear-multi .ginput_container label, .gf-time .clear-multi .ginput_container label { -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto; font-smoothing: subpixel-antialiased; display: block; margin-top: 10px; padding: 0 18px; color: #919092; letter-spacing: 0.02em; text-transform: none; font: normal 400 12px / 1.25 kozuka-gothic-pro, sans-serif; } @media (min-width: 768px) { .gf-date .clear-multi .ginput_container, .gf-time .clear-multi .ginput_container { width: 33.33%; float: left; } } .gfield_date_dropdown_month, .gfield_date_dropdown_day, .gfield_date_dropdown_year, .gfield_time_ampm { cursor: pointer; position: relative; max-width: 250px; } .gfield_date_dropdown_month:hover:after, .gfield_date_dropdown_month:focus:after, .gfield_date_dropdown_month:active:after, .gfield_date_dropdown_day:hover:after, .gfield_date_dropdown_day:focus:after, .gfield_date_dropdown_day:active:after, .gfield_date_dropdown_year:hover:after, .gfield_date_dropdown_year:focus:after, .gfield_date_dropdown_year:active:after, .gfield_time_ampm:hover:after, .gfield_time_ampm:focus:after, .gfield_time_ampm:active:after { background-color: #f5f5f5; } .gfield_date_dropdown_month:after, .gfield_date_dropdown_day:after, .gfield_date_dropdown_year:after, .gfield_time_ampm:after { font-family: 'core-icons'; speak: none; font-style: normal; font-weight: normal; font-feature-settings: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: auto; display: block; transition: all 0.15s ease-in-out; content: '\e900'; text-align: center; height: 44px; width: 48px; line-height: 47px; background-color: transparent; color: #999; position: absolute; font-size: 20px; right: 2px; top: 2px; pointer-events: none; border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .gfield_date_dropdown_month select, .gfield_date_dropdown_day select, .gfield_date_dropdown_year select, .gfield_time_ampm select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 64px; } .gfield_date_dropdown_month select::-ms-expand, .gfield_date_dropdown_day select::-ms-expand, .gfield_date_dropdown_year select::-ms-expand, .gfield_time_ampm select::-ms-expand { display: none; } @media (min-width: 768px) { .gfield_date_dropdown_month, .gfield_date_dropdown_day, .gfield_date_dropdown_year, .gfield_time_ampm { max-width: none; } } .gfield_date_dropdown_month:after, .gfield_date_dropdown_day:after, .gfield_date_dropdown_year:after, .gfield_time_ampm:after { top: auto; bottom: 2px; } /* ----------------------------------------------------------------------------- * Control: Date * ----------------------------------------------------------------------------- */ /* Layout: Datepicker */ .gf-date.gf-date-layout-datepicker { max-width: 500px; } .gf-date.gf-date-layout-datepicker .ginput_container { position: relative;/* To remove GF datepicker icon */ padding-right: 0;/* To use GF datepicker icon padding-right: 42px; */ } /* Layout: Inputs */ .gf-date.gf-date-layout-datefield {} /* Layout: Selects */ .gf-date.gf-date-layout-datedropdown {} /* Datepicker Image */ .gf-date .ui-datepicker-trigger {/* To remove GF datepicker icon */ display: none;/* To use GF datepicker icon margin: -8px 0 0; position: absolute; top: 50%; right: 13px; */ } .gfield_date_dropdown_month ~ *, .gfield_date_dropdown_day ~ *, .gfield_date_dropdown_year ~ * { margin-top: 20px; } @media (min-width: 768px) { .gfield_date_dropdown_month ~ *, .gfield_date_dropdown_day ~ *, .gfield_date_dropdown_year ~ * { margin-top: 0; } } @media (min-width: 768px) { .gfield_date_dropdown_month:after, .gfield_date_dropdown_day:after { right: 9px; } } /* ----------------------------------------------------------------------------- * Control: Time * ----------------------------------------------------------------------------- */ .gf-time .gfield_time_hour i { display: none; } .ginput_preview, .gf-file .validation_message { background-color: #f4f4f4; height: auto; font-size: 15px; padding: 16px 16px; line-height: 1; border: 2px solid #ebebeb; border-top: 0; } .ginput_preview img, .gf-file .validation_message img { margin: 0 2px 0 0; display: inline-block; vertical-align: middle; } .ginput_preview strong, .gf-file .validation_message strong { display: inline-block; vertical-align: middle; font-weight: normal; } .gf-file .ginput_container_fileupload input[type="file"] { border-radius: 4px 4px 0 0; } .gf-file .validation_message li { margin-bottom: 0; } .gf-file .validation_message li ~ li { margin-top: 10px; } /* Multiple */ .gform_drop_instructions { font: normal 400 15px / 1 kozuka-gothic-pro, sans-serif; } @media (min-width: 768px) { .gform_drop_instructions { margin-right: 10px; } } .gform_fileupload_multifile { border: 2px solid #ebebeb; padding: 16px 16px; background-color: #fff; } .gform_fileupload_multifile input[type="button"], .gform_fileupload_multifile input[type="file"] { line-height: 1; height: auto; cursor: pointer; text-decoration: none; border: 0; background-color: transparent; padding: 0; width: auto; display: inline-block; transition: all 0.15s ease-in-out; font-weight: 900; font-size: 14px; background-color: #2db9ed; border-radius: 4px; padding: 17px 18px 14px; text-align: center; color: #fff; text-transform: uppercase; width: 100%; margin-top: 25px; margin-top: 15px; } @media (min-width: 768px) { .gform_fileupload_multifile input[type="button"], .gform_fileupload_multifile input[type="file"] { font-size: 16px; padding: 23px 25px 18px; } } .gform_fileupload_multifile input[type="button"]:visited, .gform_fileupload_multifile input[type="file"]:visited { background-color: #2db9ed; color: #fff; } .gform_fileupload_multifile input[type="button"]:hover, .gform_fileupload_multifile input[type="button"]:focus, .gform_fileupload_multifile input[type="file"]:hover, .gform_fileupload_multifile input[type="file"]:focus { background-color: #39c9ff; color: #fff; } .gform_fileupload_multifile input[type="button"]:active, .gform_fileupload_multifile input[type="file"]:active { background-color: #2db9ed; } @media (min-width: 768px) { .gform_fileupload_multifile input[type="button"], .gform_fileupload_multifile input[type="file"] { width: auto; } } @media (min-width: 768px) { .gform_fileupload_multifile input[type="button"], .gform_fileupload_multifile input[type="file"] { margin-top: 0; font-size: 14px; padding: 16px 20px 12px; } } .gform_hidden { display: none; } .ginput_list input { background-color: #fff; } .ginput_list .gfield_list { margin-top: 0; margin-bottom: 0; table-layout: auto; } .ginput_list .gfield_list_icons { width: 50px; padding-left: 0; padding-right: 0; } .ginput_list .gfield_list_icons .add_list_item, .ginput_list .gfield_list_icons .delete_list_item { margin: 0 auto !important; } .ginput_list .gfield_list_icons .delete_list_item { margin-top: 8px !important; } .gfield_required { padding-left: 4px; color: #f83333; } .gform_confirmation_wrapper { margin: 50px 0; padding: 42px 25px 45px; text-align: center; border: 2px solid #0f81d9; background-color: #0f81d9; border-radius: 4px; color: #fff; position: relative; } .gform_confirmation_wrapper:before { font-family: 'core-icons'; speak: none; font-style: normal; font-weight: normal; font-feature-settings: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: auto; content: '\e90b'; color: #fff; text-align: center; font-size: 52px; } .gform_confirmation_message { max-width: 630px; margin: 0 auto; padding-top: 20px; letter-spacing: normal; text-transform: none; font: normal 400 17px / 1.5 kozuka-gothic-pro, sans-serif; } .gform_confirmation_message h1, .gform_confirmation_message h2, .gform_confirmation_message h3, .gform_confirmation_message h4, .gform_confirmation_message h5, .gform_confirmation_message h6 { margin-bottom: 10px; margin-top: 0; font-weight: 700; font-style: normal; line-height: 1.25; color: #fff; font-size: 28px; } .validation_error { display: none; } .gfield_error input[type], .gfield_error textarea, .gfield_error select { border-color: #f83333;/* box-shadow: 0 0 0 var(--gf-validation-border-size) var(--gf-state-error-border-color); */ } .gfield_error .gfield_description ~ .validation_message { margin-top: -12px; } .gfield_error .validation_message { -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto; font-smoothing: subpixel-antialiased; color: #f83333; margin-top: 8px; padding: 0 3px 0 18px; letter-spacing: 0.02em; text-transform: none; font: normal 400 12px / 1.25 kozuka-gothic-pro, sans-serif; } /* Vendor: Slick.js */ /* ----------------------------------------------------------------------------- * * Slick * * https://github.com/kenwheeler/slick * * This file is just a clearing-house. * Make partials (start with an underscore) for any actual css code. * * ----------------------------------------------------------------------------- */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; left: 0; top: 0; display: block; } .slick-track:before, .slick-track:after { content: ""; display: table; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { float: left; height: 100%; min-height: 1px; display: none; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-slide:focus { outline: 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; } .slick-arrow.slick-hidden { display: none; } /* Custom: Slider Arrows */ .slick-arrow { transition: color 0.15s ease-in-out, background 0.15s ease-in-out, border 0.15s ease-in-out; border: 0; font-size: 0; z-index: 5; text-align: center; opacity: 1; display: block; padding: 0;/* Colors (defaults) */ background: transparent; color: #1b6a96;/* Positioning (defaults) */ position: absolute; top: 50%;/* Size (defaults) */ margin-top: -25px; width: 50px; height: 50px; } @media (min-width: 1275px) { .slick-arrow {/* Size (defaults) */ margin-top: -30px; width: 60px; height: 60px; } } .slick-arrow:hover, .slick-arrow:focus { color: #2184bb; } .slick-arrow:focus { outline: 1px dotted; } /* CASE: disabled */ .slick-arrow.slick-disabled { cursor: default; } /* CASE: arrow color - hit grey */ .slick-slider--arrows-color-hit-grey .slick-arrow.slick-disabled { color: #abb3bb; } /* CASE: hide disabled item */ .slick-slider--arrows-hide-disabled .slick-arrow.slick-disabled { opacity: 0; } .slick-arrow:after { font-family: 'core-icons'; speak: none; font-style: normal; font-weight: normal; font-feature-settings: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: auto; font-size: 42px; line-height: 1; text-align: center; display: block; } /* CASE: position - bottom */ .slick-slider--arrows-position-bottom .slick-arrow { top: auto; bottom: 0; margin-top: 0; } /* CASE: arrow color - hit grey */ .slick-slider--arrows-color-hit-grey .slick-arrow { color: #abb3bb; } .slick-slider--arrows-color-hit-grey .slick-arrow:hover, .slick-slider--arrows-color-hit-grey .slick-arrow:focus { color: #292929; } /* CASE: border cirlce */ .slick-slider--arrows-bordered .slick-arrow { border: 1px solid currentColor; border-radius: 50%; } /* CASE: border circle */ .slick-slider--arrows-size-small .slick-arrow { width: 44px; height: 44px; } .slick-slider--arrows-size-small .slick-arrow:after { position: relative; top: 1px; font-size: 32px; } .slick-prev { left: 0; } .slick-prev:after { content: '\e903'; } .slick-next { right: 0; } .slick-next:after { content: '\e905'; } /* CASE: border circle */ .slick-slider--arrows-size-small .slick-next:after { left: 2px; } /* Custom: Dots */ .slick-dotted.slick-slider { padding-bottom: 32px; } @media (min-width: 768px) { .slick-dotted.slick-slider { padding-bottom: 0; } } .slick-dots { position: absolute; bottom: 0; left: 0; list-style: none; display: block; text-align: center; padding: 0 50px; margin: 0; width: 100%; line-height: 0; } .slick-dots li { position: relative; display: inline-block; height: 15px; width: 15px; margin: 0 6px; padding: 0; cursor: pointer; } .slick-dots .slick-active button:before { background: #2184bb; } .slick-dots button { border: 0; background: transparent; display: block; height: 16px; width: 16px; outline: none; line-height: 0; font-size: 0; color: transparent; padding: 0; cursor: pointer; } .slick-dots button:hover:before, .slick-dots button:focus:before { background: #2184bb; } .slick-dots button:focus { outline: 1px dotted; } .slick-dots button:before { content: ''; position: absolute; top: 0; left: 0; width: 11px; height: 11px; background: transparent; border-radius: 100%; border: 2px solid #2184bb; transition: all 0.15s ease-in-out; } /* Vendor: Google Custom Search */ /* ----------------------------------------------------------------------------- * * Google Custom Search * * This file is just a clearing-house. * Make partials (start with an underscore) for any actual css code. * * ----------------------------------------------------------------------------- */ :root {/* ----------------------------------------------------------------------------- * Forms: Defaults * ----------------------------------------------------------------------------- */ } /* GCS: Forms */ /* ----------------------------------------------------------------------------- * GCS Form: Global Styles / Hacks / Resets * ----------------------------------------------------------------------------- */ .v-gcs-form > div { display: inline-block; width: 100%; } .v-gcs-form .gsc-clear-button, .v-gcs-form .gsc-branding { display: none; } .v-gcs-form form.gsc-search-box { padding: 0; position: relative; margin-bottom: 0; } .v-gcs-form table { margin-bottom: 0 !important; display: block; } .v-gcs-form tbody, .v-gcs-form tr, .v-gcs-form td { display: block; } .v-gcs-form td.gsc-input { padding: 0 !important; } .v-gcs-form td.gsc-input input { width: 100%; margin: 0 !important; } .v-gcs-form td.gsc-input .gsc-input-box { border: 0 !important; background: transparent !important; height: auto !important; } .v-gcs-form td.gsc-input .gsc-input-box .gsib_a { padding: 0; } .v-gcs-form td.gsc-input .gsc-input-box .gsib_b { display: none; } .v-gcs-form td.gsc-input .gsc-input-box-focus, .v-gcs-form td.gsc-input .gsc-input-box-hover { box-shadow: none !important; } .v-gcs-form td.gsc-search-button:after { font-family: 'core-icons'; speak: none; font-style: normal; font-weight: normal; font-feature-settings: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: auto; content: '\e902'; } .v-gcs-form td.gsc-search-button button { position: absolute; background-color: transparent; color: transparent; border: 0; padding: 0; margin: 0 auto; text-align: center; display: block; min-width: 0; } .v-gcs-form td.gsc-search-button button:hover, .v-gcs-form td.gsc-search-button button:focus { color: transparent; } .v-gcs-form td.gsc-search-button button:focus { outline: 1px dotted #292929 !important; } .v-gcs-form td.gsc-search-button button svg { display: none; } /* Inner Wrapper ("shim") */ .v-gcs-form__wrapper {} /* ----------------------------------------------------------------------------- * GCS Form: Header * ----------------------------------------------------------------------------- */ .v-gcs-form--header .v-gcs-form__wrapper { height: 50px; background: #f4f4f4; border-radius: 4px; } .v-gcs-form--header td.gsc-input { width: 100%; border: 0; height: 50px; } .v-gcs-form--header td.gsc-input input { font-size: 18px; padding: 3px 20px 0 50px !important; border-radius: 4px; height: 50px !important; background: #f4f4f4 !important; border: 2px solid transparent !important; transition: all 0.15s ease-in-out; text-indent: 0 !important; margin: 0 !important; line-height: 36px; } .v-gcs-form--header td.gsc-input input:focus { border-color: #292929 !important; box-shadow: none !important; } .v-gcs-form--header td.gsc-input input:focus::-webkit-input-placeholder { color: rgba(115, 122, 130, .65); } .v-gcs-form--header td.gsc-input input:focus:-moz-placeholder { color: rgba(115, 122, 130, .65); } .v-gcs-form--header td.gsc-input input:focus::-moz-placeholder { color: rgba(115, 122, 130, .65); } .v-gcs-form--header td.gsc-input input:focus:-ms-input-placeholder { color: rgba(115, 122, 130, .65); } .v-gcs-form--header td.gsc-search-button { border: 0; background-color: transparent; display: block; position: absolute; top: 2px; left: 2px; height: 46px; width: 50px; font-size: 30px; text-align: center; line-height: 50px; color: #292929; transition: all 0.15s ease-in-out; } .v-gcs-form--header td.gsc-search-button:hover, .v-gcs-form--header td.gsc-search-button:focus { color: #0f81d9; } .v-gcs-form--header td.gsc-search-button:focus { box-shadow: none; } .v-gcs-form--header td.gsc-search-button input { height: 46px; width: 50px; } .v-gcs-form--header ::-webkit-input-placeholder { font-size: 18px; color: rgba(115, 122, 130, .75); letter-spacing: 0.02em; } .v-gcs-form--header :-moz-placeholder { font-size: 18px; color: rgba(115, 122, 130, .75); letter-spacing: 0.02em; } .v-gcs-form--header ::-moz-placeholder { font-size: 18px; color: rgba(115, 122, 130, .75); letter-spacing: 0.02em; } .v-gcs-form--header :-ms-input-placeholder { font-size: 18px; color: rgba(115, 122, 130, .75); letter-spacing: 0.02em; } #v-gcs-form--results {} .v-gcs-form--results {} /* ----------------------------------------------------------------------------- * GCS Form: Results Loop * ----------------------------------------------------------------------------- */ .v-gcs-form--results .v-gcs-form__wrapper { height: 50px; background: #f4f4f4; border-radius: 4px; } @media (min-width: 768px) { .v-gcs-form--results .v-gcs-form__wrapper { height: 60px; } } .v-gcs-form--results td.gsc-input { width: 100%; border: 0; height: 50px; } @media (min-width: 768px) { .v-gcs-form--results td.gsc-input { height: 60px; } } .v-gcs-form--results td.gsc-input input { font-size: 16px; padding: 3px 20px 0 50px !important; border-radius: 4px; height: 50px !important; background: #f4f4f4 !important; border: 2px solid transparent !important; transition: all 0.15s ease-in-out; text-indent: 0 !important; } @media (min-width: 768px) { .v-gcs-form--results td.gsc-input input { font-size: 18px; height: 60px !important; padding-left: 60px !important; } } .v-gcs-form--results td.gsc-input input:focus { border-color: #292929 !important; box-shadow: none !important; } .v-gcs-form--results td.gsc-input input:focus::-webkit-input-placeholder { color: rgba(115, 122, 130, .65); } .v-gcs-form--results td.gsc-input input:focus:-moz-placeholder { color: rgba(115, 122, 130, .65); } .v-gcs-form--results td.gsc-input input:focus::-moz-placeholder { color: rgba(115, 122, 130, .65); } .v-gcs-form--results td.gsc-input input:focus:-ms-input-placeholder { color: rgba(115, 122, 130, .65); } .v-gcs-form--results td.gsc-search-button { border: 0; background-color: transparent; display: block; position: absolute; top: 2px; left: 2px; height: 46px; width: 50px; font-size: 30px; text-align: center; line-height: 50px; color: #292929; transition: all 0.15s ease-in-out; } @media (min-width: 768px) { .v-gcs-form--results td.gsc-search-button { height: 56px; width: 60px; font-size: 34px; line-height: 60px; } } .v-gcs-form--results td.gsc-search-button:hover, .v-gcs-form--results td.gsc-search-button:focus { color: #0f81d9; } .v-gcs-form--results td.gsc-search-button:focus { box-shadow: none; } .v-gcs-form--results td.gsc-search-button input { height: 46px; width: 50px; } @media (min-width: 768px) { .v-gcs-form--results td.gsc-search-button input { height: 56px; width: 60px; } } .v-gcs-form--results ::-webkit-input-placeholder { font-size: 16px; color: rgba(115, 122, 130, .75); letter-spacing: 0.02em; } @media (min-width: 768px) { .v-gcs-form--results ::-webkit-input-placeholder { font-size: 18px; } } .v-gcs-form--results :-moz-placeholder { font-size: 16px; color: rgba(115, 122, 130, .75); letter-spacing: 0.02em; } @media (min-width: 768px) { .v-gcs-form--results :-moz-placeholder { font-size: 18px; } } .v-gcs-form--results ::-moz-placeholder { font-size: 16px; color: rgba(115, 122, 130, .75); letter-spacing: 0.02em; } @media (min-width: 768px) { .v-gcs-form--results ::-moz-placeholder { font-size: 18px; } } .v-gcs-form--results :-ms-input-placeholder { font-size: 16px; color: rgba(115, 122, 130, .75); letter-spacing: 0.02em; } @media (min-width: 768px) { .v-gcs-form--results :-ms-input-placeholder { font-size: 18px; } } /* ----------------------------------------------------------------------------- * GCS Form: Autocomplete (NOTE: specific to header form and autocomplete * should only be implemented for this form) * ----------------------------------------------------------------------------- */ body > table.gssb_c { margin: -3px 0 0 0; padding: 0; border-collapse: separate; box-shadow: none; background-color: #f4f4f4; border: 0; border-top: 0; border-radius: 0 0 4px 4px; } @media (max-width: 959px) { body > table.gssb_c { left: 15px !important; right: 15px !important; width: calc(100% - 30px) !important; position: fixed !important; } } body > table.gssb_c .gssb_a { cursor: pointer; background-color: transparent; padding: 8px 20px 4px !important; } body > table.gssb_c .gssb_a:hover { background-color: #dfe2e6; } body > table.gssb_c .gsq_a span { color: #0f81d9; font-weight: 700; } body > table.gssb_c .gsq_a span b { color: #292929; font-weight: 400; } body > table.gssb_c .gssb_e, body > table.gssb_c .gsc-completion-container { box-shadow: none; border: 0; } body > table.gssb_c .gssb_e { padding-top: 6px; padding-bottom: 15px; background-color: transparent; } body > table.gssb_c .gsc-completion-container { font-family: kozuka-gothic-pro, sans-serif; background-color: transparent; } body > table.gssb_c .gsc-completion-container > tbody > tr:last-child { display: none; } /* GCS: Search Results */ .loop-search-gcs {} .loop-search-gcs__results {} #v-gcs-results {} .v-gcs-results {} .v-gcs-results__wrapper {} /* ----------------------------------------------------------------------------- * GCS Results * ----------------------------------------------------------------------------- */ /* General "resets" */ #v-gcs-results .v-gcs-results__wrapper table { table-layout: fixed; border-collapse: collapse; } #v-gcs-results .v-gcs-results__wrapper td { padding: 0; } #v-gcs-results .v-gcs-results__wrapper .gsc-control-cse { padding: 0; border: 0; } #v-gcs-results .v-gcs-results__wrapper .gsc-adBlock { display: none; } #v-gcs-results .v-gcs-results__wrapper .gcsc-branding { display: none; } #v-gcs-results .v-gcs-results__wrapper .gsc-resultsHeader { display: none; } /* Results sub-header area */ #v-gcs-results .v-gcs-results__wrapper .gsc-above-wrapper-area { margin: 0; padding: 12px 0 18px; border-bottom: 1px solid #e3e3e3; } @media (min-width: 768px) { #v-gcs-results .v-gcs-results__wrapper .gsc-above-wrapper-area { padding: 15px 0 30px; } } #v-gcs-results .v-gcs-results__wrapper .gsc-above-wrapper-area .gsc-orderby-label, #v-gcs-results .v-gcs-results__wrapper .gsc-above-wrapper-area .gsc-result-info { font-weight: 700; color: #737a82; font-family: kozuka-gothic-pro, sans-serif; font-size: 12px; } @media (min-width: 768px) { #v-gcs-results .v-gcs-results__wrapper .gsc-above-wrapper-area .gsc-orderby-label, #v-gcs-results .v-gcs-results__wrapper .gsc-above-wrapper-area .gsc-result-info { font-size: 14px; } } #v-gcs-results .v-gcs-results__wrapper .gsc-above-wrapper-area .gsc-result-info { padding-left: 0; line-height: 1.2; } /* Results */ #v-gcs-results .v-gcs-results__wrapper .gsc-results { margin-top: 0; padding: 0; } #v-gcs-results .v-gcs-results__wrapper .gsc-result { border: 0; margin: 0; padding: 33px 0 35px; border-bottom: 1px solid #e9e9e9; } @media (min-width: 768px) { #v-gcs-results .v-gcs-results__wrapper .gsc-result { padding: 35px 40px 35px 0; } } #v-gcs-results .v-gcs-results__wrapper .gsc-result .gs-title, #v-gcs-results .v-gcs-results__wrapper .gsc-result .gs-title * { font-family: kozuka-gothic-pro, sans-serif; text-decoration: none !important; overflow: visible; height: auto; font-size: 18px; line-height: 1.4; font-weight: 700; } @media (min-width: 768px) { #v-gcs-results .v-gcs-results__wrapper .gsc-result .gs-title, #v-gcs-results .v-gcs-results__wrapper .gsc-result .gs-title * { font-size: 21px; } } #v-gcs-results .v-gcs-results__wrapper .gsc-result .gs-title a.gs-title:link, #v-gcs-results .v-gcs-results__wrapper .gsc-result .gs-title * a.gs-title:link { color: #0f81d9; text-decoration: none !important; } #v-gcs-results .v-gcs-results__wrapper .gsc-result .gs-title a.gs-title:link:visited, #v-gcs-results .v-gcs-results__wrapper .gsc-result .gs-title * a.gs-title:link:visited { color: #0f81d9; } #v-gcs-results .v-gcs-results__wrapper .gsc-result .gs-title a.gs-title:link:hover, #v-gcs-results .v-gcs-results__wrapper .gsc-result .gs-title a.gs-title:link:focus, #v-gcs-results .v-gcs-results__wrapper .gsc-result .gs-title * a.gs-title:link:hover, #v-gcs-results .v-gcs-results__wrapper .gsc-result .gs-title * a.gs-title:link:focus { color: #2db9ed; } #v-gcs-results .v-gcs-results__wrapper .gsc-result .gs-title a.gs-title:link:active, #v-gcs-results .v-gcs-results__wrapper .gsc-result .gs-title * a.gs-title:link:active { color: #0f81d9; } #v-gcs-results .v-gcs-results__wrapper .gsc-result .gs-title a.gs-title:link b, #v-gcs-results .v-gcs-results__wrapper .gsc-result .gs-title * a.gs-title:link b { color: currentColor; } #v-gcs-results .v-gcs-results__wrapper .gsc-result .gs-bidi-start-align.gs-snippet { color: #292929; font-family: kozuka-gothic-pro, sans-serif; line-height: 1.5; margin: 18px 0 0; font-size: 14px; } @media (min-width: 768px) { #v-gcs-results .v-gcs-results__wrapper .gsc-result .gs-bidi-start-align.gs-snippet { margin-top: 14px; } } #v-gcs-results .v-gcs-results__wrapper .gsc-result .gs-bidi-start-align.gs-snippet b { font-weight: 400; color: currentColor; } #v-gcs-results .v-gcs-results__wrapper .gsc-result .gsc-location, #v-gcs-results .v-gcs-results__wrapper .gsc-result .gs-fileFormat, #v-gcs-results .v-gcs-results__wrapper .gsc-result .gs-fileFormatType, #v-gcs-results .v-gcs-results__wrapper .gsc-result .gs-visibleUrl { font: 400 12px/1.15 kozuka-gothic-pro, sans-serif; color: #737a82; margin-top: 18px; } #v-gcs-results .v-gcs-results__wrapper .gsc-result .gsc-location b, #v-gcs-results .v-gcs-results__wrapper .gsc-result .gs-fileFormat b, #v-gcs-results .v-gcs-results__wrapper .gsc-result .gs-fileFormatType b, #v-gcs-results .v-gcs-results__wrapper .gsc-result .gs-visibleUrl b { font-weight: 400; color: currentColor; } #v-gcs-results .v-gcs-results__wrapper .gsc-result .gsc-location, #v-gcs-results .v-gcs-results__wrapper .gsc-result .gs-fileFormat, #v-gcs-results .v-gcs-results__wrapper .gsc-result .gs-fileFormatType { font-style: italic; } @media (min-width: 600px) { #v-gcs-results .v-gcs-results__wrapper .gsc-table-cell-thumbnail.gsc-thumbnail { width: 190px; padding: 0; } } @media (min-width: 600px) { #v-gcs-results .v-gcs-results__wrapper .gsc-table-cell-thumbnail.gsc-thumbnail .gs-web-image-box { float: none; padding: 0; width: 100%; margin-bottom: 8px; } } @media (min-width: 768px) { #v-gcs-results .v-gcs-results__wrapper .gsc-table-cell-thumbnail.gsc-thumbnail .gs-web-image-box { margin-bottom: 12px; } } @media (min-width: 600px) { #v-gcs-results .v-gcs-results__wrapper .gsc-table-cell-thumbnail.gsc-thumbnail + .gsc-table-cell-snippet-close { padding-left: 26px; } } @media (min-width: 768px) { #v-gcs-results .v-gcs-results__wrapper .gsc-table-cell-thumbnail.gsc-thumbnail + .gsc-table-cell-snippet-close { padding-left: 30px; } } #v-gcs-results .v-gcs-results__wrapper .gsc-table-cell-thumbnail.gsc-thumbnail[style="display:none"] + .gsc-table-cell-snippet-close { padding-left: 0; } #v-gcs-results .v-gcs-results__wrapper .gsc-table-cell-thumbnail.gsc-thumbnail .gs-image { display: none !important; line-height: 0; background-color: #f4f4f4; transition: all 0.15s ease-in-out; } @media (min-width: 600px) { #v-gcs-results .v-gcs-results__wrapper .gsc-table-cell-thumbnail.gsc-thumbnail .gs-image { display: block !important; box-shadow: 6px 6px 0 0 #f4f4f4; } } @media (min-width: 768px) { #v-gcs-results .v-gcs-results__wrapper .gsc-table-cell-thumbnail.gsc-thumbnail .gs-image { box-shadow: 10px 10px 0 0 #f4f4f4; } } @media (min-width: 600px) { #v-gcs-results .v-gcs-results__wrapper .gsc-table-cell-thumbnail.gsc-thumbnail .gs-image:hover, #v-gcs-results .v-gcs-results__wrapper .gsc-table-cell-thumbnail.gsc-thumbnail .gs-image:focus { box-shadow: 6px 6px 0 0 #e3e3e3; } } @media (min-width: 768px) { #v-gcs-results .v-gcs-results__wrapper .gsc-table-cell-thumbnail.gsc-thumbnail .gs-image:hover, #v-gcs-results .v-gcs-results__wrapper .gsc-table-cell-thumbnail.gsc-thumbnail .gs-image:focus { box-shadow: 10px 10px 0 0 #e3e3e3; } } #v-gcs-results .v-gcs-results__wrapper .gsc-table-cell-thumbnail.gsc-thumbnail .gs-image img { border: 0; } @media (min-width: 600px) { #v-gcs-results .v-gcs-results__wrapper .gsc-table-cell-thumbnail.gsc-thumbnail .gs-image img { max-width: 100%; max-height: none; } } /* Pagination */ #v-gcs-results .v-gcs-results__wrapper .gsc-cursor-box.gs-bidi-start-align { border-top: 0; padding: 0; margin: 35px auto 0; } @media (min-width: 768px) { #v-gcs-results .v-gcs-results__wrapper .gsc-cursor-box.gs-bidi-start-align { margin-top: 40px; } } #v-gcs-results .v-gcs-results__wrapper .gsc-cursor-box.gs-bidi-start-align .gsc-cursor { display: block; } #v-gcs-results .v-gcs-results__wrapper .gsc-cursor-box.gs-bidi-start-align .gsc-cursor-page { font-size: 15px; font-family: kozuka-gothic-pro, sans-serif; font-weight: 700; text-align: center; vertical-align: top; width: 40px; height: 40px; line-height: 44px; color: #c8c8c8; display: inline-block; text-decoration: none; text-shadow: none; margin: 1px 1px 0 0; transition: all 0.15s ease-in-out; } @media (min-width: 768px) { #v-gcs-results .v-gcs-results__wrapper .gsc-cursor-box.gs-bidi-start-align .gsc-cursor-page { width: 48px; height: 48px; line-height: 52px; font-size: 18px; } } #v-gcs-results .v-gcs-results__wrapper .gsc-cursor-box.gs-bidi-start-align .gsc-cursor-page:visited { color: #c8c8c8; } #v-gcs-results .v-gcs-results__wrapper .gsc-cursor-box.gs-bidi-start-align .gsc-cursor-page.gsc-cursor-current-page, #v-gcs-results .v-gcs-results__wrapper .gsc-cursor-box.gs-bidi-start-align .gsc-cursor-page:hover, #v-gcs-results .v-gcs-results__wrapper .gsc-cursor-box.gs-bidi-start-align .gsc-cursor-page:focus { color: #fff; background-color: #343aab; } #v-gcs-results .v-gcs-results__wrapper .gsc-cursor-box.gs-bidi-start-align .gsc-cursor-page:focus { outline: 1px dotted; } /* No Results */ #v-gcs-results .v-gcs-results__wrapper .gs-webResult.gs-result.gs-no-results-result .gs-snippet { background-color: #f4f4f4; border-radius: 4px; padding: 32px 15px 27px; border: 0; font-family: kozuka-gothic-pro, sans-serif; font-weight: 700; text-align: center; margin: 0 auto; font-size: 21px; line-height: 1.2; } @media (min-width: 960px) { #v-gcs-results .v-gcs-results__wrapper .gs-webResult.gs-result.gs-no-results-result .gs-snippet { font-size: 30px; padding: 55px 25px 50px; } } .gcse-divo-search .gcse-divo-search_wrap { padding: 35px 40px 35px 0; border-bottom: 1px solid #e9e9e9; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center;/* Safari */ -ms-flex-align: center; align-items: center; } .gcse-divo-search .gcse-divo-search_wrap .gcse-divo-search_imgblok { float: left; width: 25%; } .gcse-divo-search .gcse-divo-search_wrap .gcse-divo-search_contenblock { width: 75%; float: left; padding-left: 30px; display: inline-block; } /*js-style .gcse-divo-search { .gcse-divo-search_wrap{ .gcse-divo-search_imgblok{ img{ box-shadow: 10px 10px 0 0 #f4f4f4; transition: .3s; } a:hover img{ box-shadow: 10px 10px 0 0 #e3e3e3; } } .gcse-divo-search_contenblock{ h2{ font-size: 18px; color: #0f81d9; font-weight: bold; } h2:hover{ color: #2db9ed; } .gcse-divo-search_text{ color: #292929; font-family: kozuka-gothic-pro, sans-serif; line-height: 1.5; margin: 8px 0 0; font-size: 14px; } .gcse-divo-search_link{ font: 400 12px/1.15 kozuka-gothic-pro, sans-serif; color: #737a82; margin-top: 8px; } } } } */ .gs-webResult { position: relative !important; } .gsc-url-top { bottom: -15px; right: 0; position: absolute !important; width: calc(100% - 210px); float: right; } .gsc-thumbnail-inside { width: calc(100% - 210px); float: right; } .gsc-orderby-container { display: none; } .gsc-results-wrapper-nooverlay { position: relative !important; } .gsc-above-wrapper-area { position: absolute !important; top: -102px; border: none !important; } .gsc-result-info-container { display: block; text-align: right; position: absolute; right: 0; } /* Vendor: Magnific */ /* ----------------------------------------------------------------------------- * * Magnific popup * * http://dimsemenov.com/plugins/magnific-popup/documentation.html * * This file is just a clearing-house. * Make partials (start with an underscore) for any actual css code. * * ----------------------------------------------------------------------------- */ :root {/* overlay *//* spacing *//* z-index *//* controls *//* Iframe-type options *//* Image-type options *//* Image caption options */ } /* ----------------------------------------------------------------------------- * * 1. General styles * * ----------------------------------------------------------------------------- */ /* Transluscent overlay */ .mfp-bg { top: 0; left: 0; width: 100%; height: 100%; z-index: 1042; overflow: hidden; position: fixed; background: #0b0b0b; opacity: 0.9; } /* Wrapper for popup */ .mfp-wrap { top: 0; left: 0; width: 100%; height: 100%; z-index: 1043; position: fixed; outline: none !important; -webkit-backface-visibility: hidden; } /* Root container */ .mfp-container { text-align: center; position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0 8px; box-sizing: border-box; } /* Vertical centerer helper */ .mfp-container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } /* Remove vertical centering when popup has class `mfp-align-top` */ .mfp-align-top .mfp-container:before { display: none; } /* Popup content holder */ .mfp-content { position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 1045; } .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { width: 100%; cursor: auto; } /* Cursors */ .mfp-ajax-cur { cursor: progress; } .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: -webkit-zoom-out; cursor: zoom-out; } .mfp-zoom { cursor: pointer; cursor: -webkit-zoom-in; cursor: zoom-in; } .mfp-auto-cursor .mfp-content { cursor: auto; } .mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Hide the image during the loading */ .mfp-loading.mfp-figure { display: none; } .mfp-hide { border: 0 !important; clip: rect(0 0 0 0) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; } /* ----------------------------------------------------------------------------- * * 2. Appearance * * ----------------------------------------------------------------------------- */ /* Preloader and text that displays error messages */ .mfp-preloader { color: #fff; position: absolute; top: 50%; width: auto; text-align: center; margin-top: -0.8em; left: 8px; right: 8px; z-index: 1044; } .mfp-preloader a { color: #fff; } .mfp-preloader a:hover { color: #fff; } /* Hide preloader when content successfully loaded */ .mfp-s-ready .mfp-preloader { display: none; } /* Hide content when it was not loaded */ .mfp-s-error .mfp-content { display: none; } /* CSS-reset for buttons */ button.mfp-close, button.mfp-arrow { overflow: visible; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; display: block; outline: none; padding: 0; z-index: 1046; box-shadow: none; -ms-touch-action: manipulation; touch-action: manipulation; } button::-moz-focus-inner { padding: 0; border: 0; } /* Close icon */ .mfp-close { width: 40px; padding: 0; text-align: center; font-size: 25px; height: 40px; line-height: 45px; position: absolute; right: 0; top: 35px; text-decoration: none; opacity: 0.75; color: #fff; font-style: normal; font-weight: 900; } .mfp-close:hover, .mfp-close:focus { opacity: 1; } .mfp-close-btn-in .mfp-close { color: #fff; } .mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { color: #fff; } /* "1 of X" counter */ .mfp-counter { position: absolute; top: 0; right: 0; color: #fff; font-weight: 700; font-size: 14px; line-height: 18px; white-space: nowrap; } /* Navigation arrows */ .mfp-arrow { position: absolute; opacity: 0.75; margin: 0; top: 50%; margin-top: -55px; padding: 0; width: 90px; height: 110px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: #fff; font-size: 36px; } .mfp-arrow:hover, .mfp-arrow:focus { opacity: 1; } .mfp-arrow:before {/* width: 0; */ font-family: 'core-icons'; speak: none; font-style: normal; font-weight: normal; font-feature-settings: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: auto; display: block; height: 0; position: absolute; left: 10px; top: 50%; line-height: 0; } .mfp-arrow:before { opacity: 0.7; } .mfp-arrow-left { left: 0; } .mfp-arrow-left:before { content: '\e91a'; } .mfp-arrow-right { right: 0; } .mfp-arrow-right:before { content: '\e919'; left: auto; right: 10px; } /* Iframe content type */ .mfp-iframe-holder { padding-top: 75px; padding-bottom: 75px; } .mfp-iframe-holder .mfp-content { line-height: 0; width: 100%; max-width: 900px; } .mfp-iframe-holder .mfp-close { top: -40px; } .mfp-iframe-scaler { width: 100%; height: 0; overflow: hidden; padding-top: 56.25%; } .mfp-iframe-scaler iframe { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0 8px rgba(0, 0, 0, .6); background: #000; } /* Image content type */ /* Main image in popup */ img.mfp-img { width: auto; max-width: 100%; height: auto; display: block; line-height: 0; box-sizing: border-box; padding: 75px 0 75px; margin: 0 auto; } /* The shadow behind the image */ .mfp-figure { line-height: 0; } .mfp-figure:after { content: ''; position: absolute; left: 0; top: 75px; bottom: 75px; display: block; right: 0; width: auto; height: auto; z-index: -1; box-shadow: 0 0 8px rgba(0, 0, 0, .6); background: #292929; } .mfp-figure small { color: #bdbdbd; display: block; font-size: 12px; line-height: 14px; } .mfp-figure figure { margin: 0; } .mfp-bottom-bar { margin-top: -70px; position: absolute; top: 100%; left: 0; width: 100%; cursor: auto; } .mfp-title { text-align: left; line-height: 18px; color: #f3f3f3; word-wrap: break-word; padding-right: 36px; } .mfp-image-holder .mfp-content { max-width: 100%; } .mfp-gallery .mfp-image-holder .mfp-figure { cursor: pointer; } @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {/* Remove all paddings around the image on small screen */ .mfp-img-mobile .mfp-image-holder { padding-left: 0; padding-right: 0; } .mfp-img-mobile img.mfp-img { padding: 0; } .mfp-img-mobile .mfp-figure:after { top: 0; bottom: 0; } .mfp-img-mobile .mfp-figure small { display: inline; margin-left: 5px; } .mfp-img-mobile .mfp-bottom-bar { background: rgba(0, 0, 0, .6); bottom: 0; margin: 0; top: auto; padding: 3px 5px; position: fixed; box-sizing: border-box; } .mfp-img-mobile .mfp-bottom-bar:empty { padding: 0; } .mfp-img-mobile .mfp-counter { right: 5px; top: 3px; } .mfp-img-mobile .mfp-close { top: 0; right: 0; width: 35px; height: 35px; line-height: 35px; background: rgba(0, 0, 0, .6); position: fixed; text-align: center; padding: 0; } } /* Scale navigation arrows and reduce padding from sides */ @media all and (max-width: 900px) { .mfp-arrow-left { -webkit-transform-origin: 0; -ms-transform-origin: 0; transform-origin: 0; } .mfp-arrow-right { -webkit-transform-origin: 100%; -ms-transform-origin: 100%; transform-origin: 100%; } .mfp-container { padding-left: 6px; padding-right: 6px; } } /* ----------------------------------------------------------------------------- * * Animation * * ----------------------------------------------------------------------------- */ /* Overlay */ .mfp-fade.mfp-bg {/* Start */ opacity: 0; transition: all 0.2s ease-out; } /* Animate In */ .mfp-fade.mfp-bg.mfp-ready { opacity: 0.9; } /* Animate Out */ .mfp-fade.mfp-bg.mfp-removing { opacity: 0; } /* Content & Controls */ /* Start */ .mfp-fade.mfp-wrap .mfp-content, .mfp-fade.mfp-wrap .mfp-arrow, .mfp-fade.mfp-wrap .mfp-counter, .mfp-fade.mfp-wrap .mfp-close { opacity: 0; transition: all 0.25s 0.25s ease-out; } /* Animate In */ .mfp-fade.mfp-wrap.mfp-ready .mfp-content, .mfp-fade.mfp-wrap.mfp-ready .mfp-counter { opacity: 1; } .mfp-fade.mfp-wrap.mfp-ready .mfp-arrow, .mfp-fade.mfp-wrap.mfp-ready .mfp-close { opacity: 0.75; } .mfp-fade.mfp-wrap.mfp-ready .mfp-arrow:hover, .mfp-fade.mfp-wrap.mfp-ready .mfp-arrow:focus, .mfp-fade.mfp-wrap.mfp-ready .mfp-close:hover, .mfp-fade.mfp-wrap.mfp-ready .mfp-close:focus { transition: all 0.15s ease-in-out; opacity: 1; color: #2db9ed; } @media (min-width: 768px) { .mfp-fade.mfp-wrap.mfp-ready .mfp-arrow:focus, .mfp-fade.mfp-wrap.mfp-ready .mfp-close:focus { outline: 1px dotted; } } /* Animate Out */ .mfp-fade.mfp-wrap.mfp-removing .mfp-content, .mfp-fade.mfp-wrap.mfp-removing .mfp-arrow, .mfp-fade.mfp-wrap.mfp-removing .mfp-counter, .mfp-fade.mfp-wrap.mfp-removing .mfp-close { opacity: 0; transition: all 0.2s 0s ease-out; } /* Vendor: WooCommerce */ /* ----------------------------------------------------------------------------- * * WooCommerce * * This file is just a clearing-house. * Make partials (start with an underscore) for any actual css code. * * ----------------------------------------------------------------------------- */ /* Base (Typography, Forms, etc.) */ div.woocommerce { position: relative; } div.woocommerce:after { content: ''; display: table; clear: both; } /* ----------------------------------------------------------------------------- * Layout: 2 Columns - 50% | 50% (tweaking WC's) * ----------------------------------------------------------------------------- */ div.woocommerce .col2-set .col-1, div.woocommerce .col2-set .col-2 { float: none; width: 100%; } div.woocommerce .col2-set .col-1:after, div.woocommerce .col2-set .col-2:after { content: ''; display: table; clear: both; } @media (min-width: 960px) { div.woocommerce .col2-set .col-1, div.woocommerce .col2-set .col-2 { width: 50%; } } @media (min-width: 960px) { div.woocommerce .col2-set .col-1 { float: left; padding-right: 25px; } } div.woocommerce .col2-set .col-1 + .col-2 { margin-top: 32px; } @media (min-width: 960px) { div.woocommerce .col2-set .col-1 + .col-2 { margin-top: 0; } } /* CASE: Checkout - Shipping */ div.woocommerce .col2-set .col-1 + .col-2.woocommerce-shipping-fields { margin-top: 44px; } @media (min-width: 960px) { div.woocommerce .col2-set .col-1 + .col-2.woocommerce-shipping-fields { margin-top: 0; } } @media (min-width: 960px) { div.woocommerce .col2-set .col-2 { float: right; padding-left: 25px; } } /* ----------------------------------------------------------------------------- * Layout: 3 Columns - 33.33% | 33.33% | 33.33% (custom) * ----------------------------------------------------------------------------- */ @media (min-width: 768px) { div.woocommerce .col3-set { margin-left: -12.5px; margin-right: -12.5px; } div.woocommerce .col3-set:after { content: ''; display: table; clear: both; } } div.woocommerce .col3-set .col-1, div.woocommerce .col3-set .col-2, div.woocommerce .col3-set .col-3 { float: none; width: 100%; } @media (min-width: 768px) { div.woocommerce .col3-set .col-1, div.woocommerce .col3-set .col-2, div.woocommerce .col3-set .col-3 { float: left; width: 33.33%; padding-left: 12.5px; padding-right: 12.5px; } } div.woocommerce .col3-set .col-1 ~ * { margin-top: 32px; } @media (min-width: 768px) { div.woocommerce .col3-set .col-1 ~ * { margin-top: 0; } } /* Typography @import "typography/headings"; */ div.woocommerce .shop_table { font-size: 14px; border: 0; text-align: left; border-collapse: collapse; width: 100%; table-layout: fixed;/* UI: Actions */ } @media (min-width: 769px) { div.woocommerce .shop_table { table-layout: auto; } } @media (min-width: 1215px) { div.woocommerce .shop_table { font-size: 15px; } } /* CASE: A */ div.woocommerce .shop_table a { border-bottom: 0 !important; } /* TBODY */ div.woocommerce .shop_table tbody tr { border-bottom: 1px solid #e9e9e9; } @media (max-width: 768px) { div.woocommerce .shop_table tbody tr { border-bottom: 0; } } @media (max-width: 768px) { div.woocommerce .shop_table tbody tr:last-child { border-bottom: 1px solid #e9e9e9; } } @media (max-width: 768px) { div.woocommerce .shop_table tbody tr td { padding-left: 15px; padding-right: 15px; } } /* TH */ div.woocommerce .shop_table th { line-height: 1.2; font-weight: 700; font-size: 14px; background-color: #343aab; color: #fff; padding: 14px 1em 11px; } @media (min-width: 769px) { div.woocommerce .shop_table th { padding: 24px 1em 20px; text-align: center; } } @media (min-width: 1215px) { div.woocommerce .shop_table th { padding-left: 1.5em; padding-right: 1.5em; } } /* TR */ div.woocommerce .shop_table tr { padding: 0 0 20px; } @media (min-width: 769px) { div.woocommerce .shop_table tr { padding: 0; } } div.woocommerce .shop_table tr:first-child { padding-top: 0; } /* CASE: bump up font size of content in first table column */ @media (min-width: 769px) { div.woocommerce .shop_table tr > *:first-child { text-align: left; padding-left: 20px; } } @media (min-width: 1215px) { div.woocommerce .shop_table tr > *:first-child { padding-left: 30px; } } @media (max-width: 768px) { div.woocommerce .shop_table tr > td:first-child { padding-top: 0; text-align: left !important; } } @media (min-width: 1215px) { div.woocommerce .shop_table tr > td:first-child { font-size: 16px; } } /* CASE: Style Up Title/Heading For Mobile */ @media (max-width: 768px) { div.woocommerce .shop_table tr > td:first-child:before { text-align: left; float: none; display: block; content: attr(data-title); line-height: 1.2; font-weight: 700; background-color: #343aab; color: #fff; padding: 14px 54px 11px 15px; margin-bottom: 16px; margin-left: -15px; margin-right: -15px; } } /* CASE: Style Up Left Title/Heading For Mobile */ @media (max-width: 768px) { div.woocommerce .shop_table tr > td:first-child ~ td:before { display: block; background-color: #f9f9f9; padding: 14px 15px 11px; text-align: left; width: 100px; margin: -14px 0 -11px -150px; position: relative; z-index: 1; } } @media (min-width: 550px) and (max-width: 768px) { div.woocommerce .shop_table tr > td:first-child ~ td:before { margin-left: -200px; width: 150px; } } @media (max-width: 768px) { div.woocommerce .shop_table tr > td:first-child ~ td:not(.quote-actions):not(.download-actions), div.woocommerce .shop_table tr > td:first-child ~ td:not(.order-actions):not(.download-actions) { overflow: hidden; padding-left: 150px; position: relative; } } @media (min-width: 550px) and (max-width: 768px) { div.woocommerce .shop_table tr > td:first-child ~ td:not(.quote-actions):not(.download-actions), div.woocommerce .shop_table tr > td:first-child ~ td:not(.order-actions):not(.download-actions) { padding-left: 200px; } } @media (max-width: 768px) { div.woocommerce .shop_table tr > td:first-child ~ td:not(.quote-actions):not(.download-actions):after, div.woocommerce .shop_table tr > td:first-child ~ td:not(.order-actions):not(.download-actions):after { content: ''; display: block; position: absolute; background-color: #f9f9f9; top: 0; left: 0; bottom: 0; width: 130px; } } @media (min-width: 550px) and (max-width: 768px) { div.woocommerce .shop_table tr > td:first-child ~ td:not(.quote-actions):not(.download-actions):after, div.woocommerce .shop_table tr > td:first-child ~ td:not(.order-actions):not(.download-actions):after { width: 180px; } } /* CASE: align content in last table column to the right */ div.woocommerce .shop_table tr > *:last-child { text-align: right; } @media (min-width: 769px) { div.woocommerce .shop_table tr > *:last-child { padding-right: 20px; } } @media (min-width: 1215px) { div.woocommerce .shop_table tr > *:last-child { padding-right: 30px; } } /* TD */ div.woocommerce .shop_table td { line-height: 1.35; background-color: transparent !important; padding: 14px 0 12px; } @media (max-width: 768px) { div.woocommerce .shop_table td { border-bottom: 1px solid #e9e9e9; } } @media (min-width: 769px) { div.woocommerce .shop_table td { padding: 19px 1em 18px; text-align: center; } } @media (min-width: 1215px) { div.woocommerce .shop_table td { padding-left: 1.5em; padding-right: 1.5em; } } @media (max-width: 768px) { div.woocommerce .shop_table td:last-child { border-bottom: 0; } } /* CASE: nix blank WC mobile table header for actions */ div.woocommerce .shop_table td[data-title="\00a0"]:before { content: none; } /* CASE: TD - actions (orders, downloads) */ div.woocommerce .shop_table .woocommerce-MyAccount-orders .order-actions, div.woocommerce .shop_table .download-actions { position: relative; } /* CASE: cleans up responsive table styles */ @media (max-width: 768px) { div.woocommerce .shop_table .woocommerce-MyAccount-orders .order-actions, div.woocommerce .shop_table .download-actions { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; padding-bottom: 0; } } /* CASE: TD - order actions inner wrapper (custom added to template) */ div.woocommerce .shop_table .order-actions__wrapper { display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; } /* CASE: pretty specific to order detail & cart totals tables */ div.woocommerce .shop_table tfoot { font-weight: 700; } @media (min-width: 768px) { div.woocommerce .shop_table tfoot th, div.woocommerce .shop_table tfoot td { font-size: 15px; } } @media (min-width: 1215px) { div.woocommerce .shop_table tfoot th, div.woocommerce .shop_table tfoot td { padding: 22px 30px 18px; } } @media (min-width: 768px) { div.woocommerce .shop_table tfoot td { white-space: nowrap; } } div.woocommerce .shop_table tfoot tr { border-bottom: 1px solid #e9e9e9 !important; } div.woocommerce .shop_table tfoot tr:last-child { text-align: right; } @media (min-width: 769px) { div.woocommerce .shop_table tfoot tr:last-child th, div.woocommerce .shop_table tfoot tr:last-child td { width: 50%; font-size: 18px; } } div.woocommerce .shop_table tfoot tr:last-child td { font-size: 15px; } div.woocommerce .shop_table tfoot tr > *:first-child { text-align: right; } @media (max-width: 768px) { div.woocommerce .shop_table tfoot tr > *:first-child { text-align: left; } } div.woocommerce .shop_table tfoot .shop_table_tfoot_mobile_heading_totals { margin-top: -1px; } @media (min-width: 769px) { div.woocommerce .shop_table tfoot .shop_table_tfoot_mobile_heading_totals { display: none; visibility: hidden; } } @media (max-width: 768px) { div.woocommerce .shop_table tfoot .shop_table_tfoot_mobile_heading_totals th { float: none; width: 100%; line-height: 1.2; background-color: #343aab; color: #fff; padding: 14px 15px 11px; } } div.woocommerce .shop_table tfoot .shop_table_tfoot_mobile_heading_totals th:after { content: none; } /* CASE: Price & Total & Subtotal Columns */ div.woocommerce .shop_table td.product-price, div.woocommerce .shop_table td.product-total, div.woocommerce .shop_table td.product-subtotal { font-weight: 700; } /* CASE: Total Column */ div.woocommerce .shop_table .product-total {} /* CASE: Product Name Column */ div.woocommerce .shop_table td.product-name { width: 100%; } @media (min-width: 600px) { div.woocommerce .shop_table td.product-name { width: 100%; } } @media (min-width: 769px) { div.woocommerce .shop_table td.product-name { padding-left: 0 !important; } } /* CASE: hide
    from download link display */ div.woocommerce .shop_table td.product-name br { display: none; } /* ----------------------------------------------------------------------------- * Product Name Content * ----------------------------------------------------------------------------- */ @media (min-width: 600px) { div.woocommerce .shop_table .product-name__wrapper { display: -webkit-flex; display: -ms-flexbox; display: flex; } } /* TABLE VARIATION: Order Details */ div.woocommerce .shop_table .product-name__wrapper-inner { padding-top: 0; } @media (min-width: 600px) { div.woocommerce .shop_table .product-name__wrapper-inner { padding-top: 16px; } } @media (min-width: 768px) { div.woocommerce .shop_table .product-name__wrapper-inner { padding-top: 14px; } } /* Image */ div.woocommerce .shop_table .product-name__image { width: 84px; margin-right: 22px; line-height: 0; display: none; text-align: center; } @media (min-width: 600px) { div.woocommerce .shop_table .product-name__image { display: block; -webkit-flex: 0 0 84px; -ms-flex: 0 0 84px; flex: 0 0 84px; } } /* TFOOT */ div.woocommerce .shop_table .wp-post-image { border: 2px solid #ebebeb; border-radius: 4px; } /* Title */ div.woocommerce .shop_table .product-name__title { font-size: 14px; font-weight: 700; } @media (min-width: 768px) { div.woocommerce .shop_table .product-name__title { font-size: 15px; } } /* ----------------------------------------------------------------------------- * Product Name Meta: Ship & License * ----------------------------------------------------------------------------- */ div.woocommerce .shop_table .product-name__ship-and-license { font-size: 13px; margin-top: 2px; } div.woocommerce .shop_table .product-name__ship-and-license > *:after { content: ' - '; display: inline; padding: 0 5px 0 3px; } div.woocommerce .shop_table .product-name__ship-and-license > *:last-of-type:after { content: none; } div.woocommerce .shop_table .product-name__ship-and-license li { display: inline; } div.woocommerce .shop_table .product-name__ship-and-license a { text-decoration: underline; color: #292929; font-weight: 400; } div.woocommerce .shop_table .product-name__ship-and-license a:visited { color: #292929; } div.woocommerce .shop_table .product-name__ship-and-license a:hover, div.woocommerce .shop_table .product-name__ship-and-license a:focus { color: #0f81d9; } div.woocommerce .shop_table .product-name__ship-and-license .icon { color: #73a724; font-size: 20px; margin-right: 4px; position: relative; top: 3px; } /* ----------------------------------------------------------------------------- * Product Name Meta: Download URL * ----------------------------------------------------------------------------- */ div.woocommerce .shop_table .download-url { margin-top: 20px; display: block; } div.woocommerce .shop_table .download-url ~ .download-url { margin-top: 6px; } /* ----------------------------------------------------------------------------- * Product Name Meta: Purchase Note * ----------------------------------------------------------------------------- */ div.woocommerce .shop_table .product-purchase-note { margin-top: 20px; } div.woocommerce .shop_table .product-purchase-note h6 { font-weight: 700; line-height: 1.2; font-size: 13px; margin-bottom: 0; margin-top: 0; } div.woocommerce .shop_table .product-purchase-note p { line-height: 1.35; font-size: 14px; margin-bottom: 0; margin-top: 4px; } /* ----------------------------------------------------------------------------- * Product Name Meta: Licensing * ----------------------------------------------------------------------------- */ div.woocommerce .shop_table .product-name__license-meta { font-size: 10px; border: 1px solid #e9e9e9; line-height: 1; margin-top: 22px; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; text-align: center; } @media (min-width: 400px) { div.woocommerce .shop_table .product-name__license-meta { font-size: 14px; } } /* CASE: license content toggle is open */ div.woocommerce .shop_table .product-name__license-meta.product-name__license-meta--toggle-open .product-name__license-meta-action--trigger { background-color: #f4f4f4; } div.woocommerce .shop_table .product-name__license-meta.product-name__license-meta--toggle-open + .product-name__license-details { clip: auto; width: auto; height: auto; margin: 0; position: static; padding: 23px 20px 20px; } div.woocommerce .shop_table .product-name__license-meta-item { -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-flex: 1; -ms-flex: 1; flex: 1; } @media (min-width: 1275px) { div.woocommerce .shop_table .product-name__license-meta-item { -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; } } div.woocommerce .shop_table .product-name__license-meta-item ~ .product-name__license-meta-item { border-left: 1px solid #e9e9e9; } div.woocommerce .shop_table .product-name__license-meta-action { display: block; background-color: transparent; padding: 9px 16px 6px; border: 0; line-height: 1; cursor: pointer; transition: all 0.15s ease-in-out; text-align: center; width: 100%; height: 100%; text-decoration: none !important; } div.woocommerce .shop_table .product-name__license-meta-action:hover, div.woocommerce .shop_table .product-name__license-meta-action:focus { background-color: #f4f4f4; } div.woocommerce .shop_table .product-name__license-meta-action:focus { outline: 1px dotted; } div.woocommerce .shop_table .product-name__license-meta-action span { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } @media (min-width: 1275px) { div.woocommerce .shop_table .product-name__license-meta-action span { clip: auto; width: auto; height: auto; margin: 0; position: static; } } div.woocommerce .shop_table .product-name__license-meta-action .icon { color: #0f81d9; margin-right: 2px; display: block; margin-bottom: 5px; font-size: 14px; } @media (min-width: 500px) { div.woocommerce .shop_table .product-name__license-meta-action .icon { display: inline-block; margin-bottom: 0; } } div.woocommerce .shop_table .product-name__license-details { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; border: 1px solid #e9e9e9; border-top: 0; } div.woocommerce .shop_table .product-name__license-details p { font-size: 13px; margin-bottom: 0; } div.woocommerce .shop_table .product-name__license-details p + .product-name__license-details-action { margin-top: 15px; } div.woocommerce .shop_table .product-name__license-details b { color: #9d9d9d; font-size: 12px; } div.woocommerce .shop_table .product-name__license-details-action { color: #0f81d9; border-bottom: 1px solid currentColor; font-weight: 700; display: inline-block; font-size: 13px; border-bottom: 1px solid currentColor !important; } div.woocommerce .shop_table .product-name__license-details-action:visited { color: #0f81d9; } div.woocommerce .shop_table .product-name__license-details-action:hover, div.woocommerce .shop_table .product-name__license-details-action:focus { color: #2db9ed; } div.woocommerce .shop_table .product-name__license-details-action:active { color: #0f81d9; } @media (max-width: 768px) { div.woocommerce .shop_table.order_details .order_item { padding-bottom: 0; } } div.woocommerce .shop_table.cart .product-subtotal { border-bottom: 0; } div.woocommerce .shop_table.cart tr.cart_item, div.woocommerce .shop_table.woocommerce-checkout-review-order-table tr.cart_item { position: relative; } @media (max-width: 768px) { div.woocommerce .shop_table.cart tr.cart_item, div.woocommerce .shop_table.woocommerce-checkout-review-order-table tr.cart_item { padding-bottom: 0; } } @media (min-width: 769px) { div.woocommerce .shop_table.cart tr.cart_item, div.woocommerce .shop_table.woocommerce-checkout-review-order-table tr.cart_item { padding-top: 0; position: static; } } /* CASE: Handle non cart-item rows (coupon & update cart) */ div.woocommerce .shop_table.cart tbody tr:not(.cart_item), div.woocommerce .shop_table.woocommerce-checkout-review-order-table tbody tr:not(.cart_item) { border-bottom: 0; } @media (max-width: 768px) { div.woocommerce .shop_table.cart tbody tr:not(.cart_item), div.woocommerce .shop_table.woocommerce-checkout-review-order-table tbody tr:not(.cart_item) { border-top: 1px solid #e9e9e9; padding-top: 20px; } } @media (max-width: 768px) { div.woocommerce .shop_table.cart tbody tr:not(.cart_item) td, div.woocommerce .shop_table.woocommerce-checkout-review-order-table tbody tr:not(.cart_item) td { padding-left: 0; padding-right: 0; } } @media (max-width: 768px) { div.woocommerce .shop_table.cart tbody tr:not(.cart_item) td:before, div.woocommerce .shop_table.woocommerce-checkout-review-order-table tbody tr:not(.cart_item) td:before { content: none; } } /* TD: Quantity */ @media (min-width: 769px) { div.woocommerce .shop_table.cart .product-quantity, div.woocommerce .shop_table.woocommerce-checkout-review-order-table .product-quantity { width: 110px; } } div.woocommerce .shop_table.cart .product-quantity input, div.woocommerce .shop_table.woocommerce-checkout-review-order-table .product-quantity input { padding: 0 8px; width: 75px; display: inline-block; } @media (max-width: 768px) { div.woocommerce .shop_table.cart .product-quantity input, div.woocommerce .shop_table.woocommerce-checkout-review-order-table .product-quantity input { height: 32px; margin-top: -7px; margin-bottom: -6px; } } @media (min-width: 550px) and (max-width: 768px) { div.woocommerce .shop_table.cart .product-quantity input, div.woocommerce .shop_table.woocommerce-checkout-review-order-table .product-quantity input { width: 90px; } } @media (min-width: 769px) { div.woocommerce .shop_table.cart .product-quantity input, div.woocommerce .shop_table.woocommerce-checkout-review-order-table .product-quantity input { width: 100%; } } /* CASE: Product Name Column */ @media (min-width: 769px) { div.woocommerce .shop_table.cart td.product-name, div.woocommerce .shop_table.woocommerce-checkout-review-order-table td.product-name { width: auto; } } /* Back Order */ div.woocommerce .shop_table.cart .backorder_notification, div.woocommerce .shop_table.woocommerce-checkout-review-order-table .backorder_notification { font-style: italic; font-weight: 700; line-height: 1.2; font-size: 13px; margin-bottom: 0; margin-top: 8px; } /* Meta: Variations */ div.woocommerce .shop_table.cart .variation, div.woocommerce .shop_table.woocommerce-checkout-review-order-table .variation { margin-top: 8px; } div.woocommerce .shop_table.cart .variation + .backorder_notification, div.woocommerce .shop_table.woocommerce-checkout-review-order-table .variation + .backorder_notification { margin-top: 18px; } /* Title */ @media (min-width: 600px) { div.woocommerce .shop_table.cart .product-name__title, div.woocommerce .shop_table.woocommerce-checkout-review-order-table .product-name__title { font-size: 14px; } } @media (min-width: 1215px) { div.woocommerce .shop_table.cart .product-name__title, div.woocommerce .shop_table.woocommerce-checkout-review-order-table .product-name__title { font-size: 15px; } } /* Actions */ div.woocommerce .shop_table.cart .actions, div.woocommerce .shop_table.woocommerce-checkout-review-order-table .actions { text-align: right; } div.woocommerce .shop_table.cart .actions .coupon-flex-wrap, div.woocommerce .shop_table.woocommerce-checkout-review-order-table .actions .coupon-flex-wrap { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; } @media (min-width: 769px) { div.woocommerce .shop_table.cart .actions, div.woocommerce .shop_table.woocommerce-checkout-review-order-table .actions { padding: 25px 0 0; } } /* Coupons */ div.woocommerce .shop_table.cart .coupon, div.woocommerce .shop_table.woocommerce-checkout-review-order-table .coupon { margin-right: 50px; } div.woocommerce .shop_table.cart .coupon .input-text, div.woocommerce .shop_table.woocommerce-checkout-review-order-table .coupon .input-text { margin-bottom: 20px; width: 100% !important; height: 46px; } @media (min-width: 769px) { div.woocommerce .shop_table.cart .coupon .input-text, div.woocommerce .shop_table.woocommerce-checkout-review-order-table .coupon .input-text { margin-bottom: 0; width: 200px !important; display: inline-block; vertical-align: top; margin-right: 3px; } } div.woocommerce .shop_table.cart .coupon input[name="apply_coupon"], div.woocommerce .shop_table.woocommerce-checkout-review-order-table .coupon input[name="apply_coupon"] { float: none !important; width: 100%; margin-bottom: 20px; height: 46px; } @media (min-width: 769px) { div.woocommerce .shop_table.cart .coupon input[name="apply_coupon"], div.woocommerce .shop_table.woocommerce-checkout-review-order-table .coupon input[name="apply_coupon"] { width: auto; margin-bottom: 0; } } /* Buttons: Update Cart & Coupons */ div.woocommerce .shop_table.cart input[name="update_cart"], div.woocommerce .shop_table.cart input[name="apply_coupon"], div.woocommerce .shop_table.woocommerce-checkout-review-order-table input[name="update_cart"], div.woocommerce .shop_table.woocommerce-checkout-review-order-table input[name="apply_coupon"] { padding: 0 2em; font-size: 14px; height: 46px; line-height: 49px; margin-top: 0; } div.woocommerce .shop_table.cart input[name="update_cart"][disabled], div.woocommerce .shop_table.cart input[name="apply_coupon"][disabled], div.woocommerce .shop_table.woocommerce-checkout-review-order-table input[name="update_cart"][disabled], div.woocommerce .shop_table.woocommerce-checkout-review-order-table input[name="apply_coupon"][disabled] { opacity: 0.4; cursor: default; } div.woocommerce .shop_table.cart input[name="update_cart"][disabled]:hover, div.woocommerce .shop_table.cart input[name="update_cart"][disabled]:focus, div.woocommerce .shop_table.cart input[name="update_cart"][disabled]:active, div.woocommerce .shop_table.cart input[name="apply_coupon"][disabled]:hover, div.woocommerce .shop_table.cart input[name="apply_coupon"][disabled]:focus, div.woocommerce .shop_table.cart input[name="apply_coupon"][disabled]:active, div.woocommerce .shop_table.woocommerce-checkout-review-order-table input[name="update_cart"][disabled]:hover, div.woocommerce .shop_table.woocommerce-checkout-review-order-table input[name="update_cart"][disabled]:focus, div.woocommerce .shop_table.woocommerce-checkout-review-order-table input[name="update_cart"][disabled]:active, div.woocommerce .shop_table.woocommerce-checkout-review-order-table input[name="apply_coupon"][disabled]:hover, div.woocommerce .shop_table.woocommerce-checkout-review-order-table input[name="apply_coupon"][disabled]:focus, div.woocommerce .shop_table.woocommerce-checkout-review-order-table input[name="apply_coupon"][disabled]:active { background-color: #2db9ed; } @media (min-width: 769px) { div.woocommerce .shop_table.woocommerce-checkout-review-order-table tr > *:last-child { text-align: center; } } div.woocommerce .shop_table.woocommerce-checkout-review-order-table #shipping_method { float: none; margin: 0 auto 10px; display: inline-block; } /* CASE: undo widths for totals */ div.woocommerce .shop_table.woocommerce-checkout-review-order-table tfoot tr:last-child th, div.woocommerce .shop_table.woocommerce-checkout-review-order-table tfoot tr:last-child td { width: auto; } div.woocommerce .shop_table.woocommerce-my-account-licenses-table th { text-align: left !important; } div.woocommerce .shop_table.woocommerce-my-account-licenses-table td { text-align: left !important; vertical-align: top; } @media (min-width: 769px) { div.woocommerce .shop_table.woocommerce-my-account-licenses-table td { padding-top: 32px; padding-bottom: 32px; } } /* CASE: Date & Order # Column */ @media (max-width: 768px) { div.woocommerce .shop_table.woocommerce-my-account-licenses-table .license-order-date-and-number { border-bottom: 0; padding-bottom: 0; } } div.woocommerce .shop_table.woocommerce-my-account-licenses-table .license-order-date-and-number time { font-size: 15px; display: block; } div.woocommerce .shop_table.woocommerce-my-account-licenses-table .license-order-date-and-number a { font-size: 14px; display: inline-block; margin-top: 12px; } /* CASE: Product Name Column */ div.woocommerce .shop_table.woocommerce-my-account-licenses-table td.product-name { padding-left: 15px !important; } @media (min-width: 769px) { div.woocommerce .shop_table.woocommerce-my-account-licenses-table td.product-name { padding-left: 1em !important; } } @media (min-width: 1215px) { div.woocommerce .shop_table.woocommerce-my-account-licenses-table td.product-name { padding-left: 1.5em !important; } } @media (max-width: 768px) { div.woocommerce .shop_table.woocommerce-my-account-licenses-table td.product-name:before, div.woocommerce .shop_table.woocommerce-my-account-licenses-table td.product-name:after { display: none !important; content: none !important; } } div.woocommerce .shop_table.woocommerce-my-account-licenses-table td.product-name br { display: block; } /* CASE: Product Name - Title */ div.woocommerce .shop_table.woocommerce-my-account-licenses-table .product-name__title { font-size: 15px; } @media (min-width: 768px) { div.woocommerce .shop_table.woocommerce-my-account-licenses-table .product-name__title { font-size: 18px; } } /* CASE: Product Name - Wrapper */ div.woocommerce .shop_table.woocommerce-my-account-licenses-table .product-name__wrapper-inner { width: 100%; } @media (min-width: 600px) { div.woocommerce .shop_table.woocommerce-my-account-licenses-table .product-name__wrapper-inner { padding-top: 4px; } } /* CASE: Buttons / Actions */ div.woocommerce .shop_table .button { font-size: 14px; padding: 17px 18px 14px; -webkit-flex: 1 0 0; -ms-flex: 1 0 0px; flex: 1 0 0; } /* CASE: cleans up responsive table styles */ @media (max-width: 768px) { div.woocommerce .shop_table .button { margin: 0 3px !important; } } @media (min-width: 769px) { div.woocommerce .shop_table .button { width: auto; border: 0; margin-top: 0; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; } } /* CASE: Cancel & Pay (Orders) */ div.woocommerce .shop_table .button.cancel, div.woocommerce .shop_table .button.pay { background-color: transparent; color: #292929; border-radius: 0; text-transform: none; font-weight: 400; padding-left: 0; padding-right: 0; } @media (min-width: 769px) { div.woocommerce .shop_table .button.cancel, div.woocommerce .shop_table .button.pay { padding-left: 10px; padding-right: 10px; font-size: 15px; text-align: center; margin-left: 0; } } /* CASE: Pay (Orders) */ div.woocommerce .shop_table .button.pay { text-align: left; } @media (min-width: 769px) { div.woocommerce .shop_table .button.pay { margin-left: auto; } } div.woocommerce .shop_table .button.pay:hover, div.woocommerce .shop_table .button.pay:focus { color: #57a53c; } /* CASE: Cancel (Orders) */ div.woocommerce .shop_table .button.cancel { text-align: right; } div.woocommerce .shop_table .button.cancel:hover, div.woocommerce .shop_table .button.cancel:focus { color: #f83333; } /* CASE: View (Orders) */ @media (min-width: 769px) { div.woocommerce .shop_table .button.view { -webkit-order: -1; -ms-flex-order: -1; order: -1; } } /* CASE: Download (Downloads) */ div.woocommerce .shop_table .button.download {} /* Meta: Variations */ div.woocommerce .shop_table .variation { margin-top: 20px; margin-bottom: -8px; font-size: 14px; } div.woocommerce .shop_table .variation * { font-size: 14px; } div.woocommerce .shop_table .variation dt { font-weight: 700; line-height: 1.2; font-size: 13px; } div.woocommerce .shop_table .variation dd { margin-top: 2px; margin-bottom: 8px; } div.woocommerce .shop_table .variation p { margin-bottom: 0; } /* UI: Remove */ div.woocommerce .shop_table .remove_item, div.woocommerce .shop_table .product-remove { text-align: center !important; position: absolute !important; top: 6px; right: 15px; padding: 0 !important; } @media (min-width: 769px) { div.woocommerce .shop_table .remove_item, div.woocommerce .shop_table .product-remove { position: static !important; padding-right: 1.25em !important; } } div.woocommerce .shop_table .remove_item:before, div.woocommerce .shop_table .remove_item:after, div.woocommerce .shop_table .product-remove:before, div.woocommerce .shop_table .product-remove:after { content: none !important; } div.woocommerce .shop_table .remove_item .remove, div.woocommerce .shop_table .product-remove .remove { color: #343aab; background-color: #fff; height: 29px; width: 29px; line-height: 34px; border-radius: 50%; display: inline-block; text-align: center; border-bottom: 0; font-size: 16px; font-weight: 900; cursor: pointer; } @media (min-width: 769px) { div.woocommerce .shop_table .remove_item .remove, div.woocommerce .shop_table .product-remove .remove { color: #fff; background-color: #ce3c2c; height: 20px; width: 20px; line-height: 23px; font-size: 12px; text-indent: 1px; } } div.woocommerce .shop_table .remove_item .remove:hover, div.woocommerce .shop_table .remove_item .remove:focus, div.woocommerce .shop_table .product-remove .remove:hover, div.woocommerce .shop_table .product-remove .remove:focus { background-color: rgba(255, 255, 255, .85); } @media (min-width: 769px) { div.woocommerce .shop_table .remove_item .remove:hover, div.woocommerce .shop_table .remove_item .remove:focus, div.woocommerce .shop_table .product-remove .remove:hover, div.woocommerce .shop_table .product-remove .remove:focus { background-color: #292929; } } /* CASE: Cart Totals Table & tfoot - Mobile Tweaks */ @media (max-width: 768px) { div.woocommerce .cart_totals .shop_table tr, div.woocommerce .shop_table tfoot tr { overflow: hidden; position: relative; z-index: 1; padding: 0; } } div.woocommerce .cart_totals .shop_table th, div.woocommerce .shop_table tfoot th { background-color: #f9f9f9; color: #292929; } @media (max-width: 768px) { div.woocommerce .cart_totals .shop_table th, div.woocommerce .shop_table tfoot th { float: left; display: block; padding: 14px 15px 11px; text-align: left; width: 130px; margin: 0; } } @media (min-width: 550px) and (max-width: 768px) { div.woocommerce .cart_totals .shop_table th, div.woocommerce .shop_table tfoot th { width: 180px; } } @media (max-width: 768px) { div.woocommerce .cart_totals .shop_table th:after, div.woocommerce .shop_table tfoot th:after { content: ''; display: block; position: absolute; background-color: #f9f9f9; top: 0; left: 0; bottom: 0; width: 130px; z-index: -1; } } @media (min-width: 550px) and (max-width: 768px) { div.woocommerce .cart_totals .shop_table th:after, div.woocommerce .shop_table tfoot th:after { width: 180px; } } @media (max-width: 768px) { div.woocommerce .cart_totals .shop_table td, div.woocommerce .shop_table tfoot td { padding-right: 15px; padding-left: 150px; } } @media (min-width: 550px) and (max-width: 768px) { div.woocommerce .cart_totals .shop_table td, div.woocommerce .shop_table tfoot td { padding-left: 200px; } } div.woocommerce .cart_totals .shop_table td:before, div.woocommerce .shop_table tfoot td:before { content: none; } /* CASE: Cart Totals Table - Goofy WC overrides */ div.woocommerce .cart_totals .shop_table { margin: 0; table-layout: fixed; } /* TABLE VARIATION: Cart Totals */ @media (min-width: 769px) { div.woocommerce .cart_totals .shop_table th, div.woocommerce .cart_totals .shop_table td { padding: 22px 20px 18px; font-size: 16px; } } @media (min-width: 1215px) { div.woocommerce .cart_totals .shop_table th, div.woocommerce .cart_totals .shop_table td { padding: 22px 30px 18px; } } div.woocommerce .cart_totals .shop_table th { font-weight: 700; } div.woocommerce .cart_totals .shop_table tr { border-bottom: 1px solid #e9e9e9; } @media (min-width: 769px) { div.woocommerce .cart_totals .shop_table tr th, div.woocommerce .cart_totals .shop_table tr td { text-align: right; } } div.woocommerce .cart_totals .shop_table tr:first-child { border-top: 1px solid #e9e9e9; } @media (min-width: 769px) { div.woocommerce .cart_totals .shop_table tr:last-child th, div.woocommerce .cart_totals .shop_table tr:last-child td { font-size: 18px; } } div.woocommerce .cart_totals .shop_table tr:last-child td { font-size: 15px; } @media (max-width: 768px) { div.woocommerce .cart_totals .shop_table .shipping td:after { content: ''; display: table; clear: both; } } div.woocommerce .cart_totals .shop_table .shipping td:before { float: none; display: block; text-align: left; margin-bottom: 15px; } /* Layouts */ div.woocommerce .cross-sells { display: none; } @media (min-width: 769px) { div.woocommerce .cross-sells { display: block; } } div.woocommerce .cross-sells ul { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } div.woocommerce .cross-sells ul .cross-sells-item { width: 50%; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 10px; position: relative; } div.woocommerce .cross-sells ul .cross-sells-item .cross-sells-item-img { background-position: center; background-repeat: no-repeat; background-size: cover; max-height: 105px; min-height: 105px; } div.woocommerce .cross-sells ul .cross-sells-item .cross-sells-item-img img { visibility: hidden; } div.woocommerce .cross-sells ul .cross-sells-item .cross-sells-item-content { padding: 10px; font-size: 13px; min-height: 68px; border-bottom: 1px solid #e9e9e9; background: #f9f9f9; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } div.woocommerce .cross-sells ul .cross-sells-item .cross-sells-item-content h3 { font-weight: bold; } div.woocommerce .cross-sells ul .cross-sells-item .badge-icon-block-category { right: 10px; position: absolute; } div.woocommerce a:not(.account-navigation__action):not(.button):not(.chosen-single):not(.select2-choice):not(.woocommerce-Order-download-pdf):not(.product-name__license-anchor):not(.remove):not(.product-name__license-meta-action):not(.page-numbers):not(.pagination__anchor):not(.woocommerce-LostPassword__link) { color: #0f81d9; border-bottom: 1px solid currentColor; font-weight: 700; } div.woocommerce a:not(.account-navigation__action):not(.button):not(.chosen-single):not(.select2-choice):not(.woocommerce-Order-download-pdf):not(.product-name__license-anchor):not(.remove):not(.product-name__license-meta-action):not(.page-numbers):not(.pagination__anchor):not(.woocommerce-LostPassword__link):visited { color: #0f81d9; } div.woocommerce a:not(.account-navigation__action):not(.button):not(.chosen-single):not(.select2-choice):not(.woocommerce-Order-download-pdf):not(.product-name__license-anchor):not(.remove):not(.product-name__license-meta-action):not(.page-numbers):not(.pagination__anchor):not(.woocommerce-LostPassword__link):hover, div.woocommerce a:not(.account-navigation__action):not(.button):not(.chosen-single):not(.select2-choice):not(.woocommerce-Order-download-pdf):not(.product-name__license-anchor):not(.remove):not(.product-name__license-meta-action):not(.page-numbers):not(.pagination__anchor):not(.woocommerce-LostPassword__link):focus { color: #2db9ed; } div.woocommerce a:not(.account-navigation__action):not(.button):not(.chosen-single):not(.select2-choice):not(.woocommerce-Order-download-pdf):not(.product-name__license-anchor):not(.remove):not(.product-name__license-meta-action):not(.page-numbers):not(.pagination__anchor):not(.woocommerce-LostPassword__link):active { color: #0f81d9; } div.woocommerce p { margin-bottom: 26px; } @media (min-width: 768px) { div.woocommerce p { margin-bottom: 32px; } } div.woocommerce mark { background-color: transparent; font-weight: 700; color: #292929; } div.woocommerce abbr { text-decoration: none; } /* Forms */ div.woocommerce .form-row { margin-bottom: 28px; line-height: 1; position: relative; } div.woocommerce label { display: block; margin-bottom: 12px; color: #737a82; letter-spacing: normal; text-transform: none; font: normal 700 15px / 1 kozuka-gothic-pro, sans-serif; } /* CASE: additional label context */ div.woocommerce label em { font-weight: 400; font-style: normal; } /* ------------------------------------------------------------------------- * Form Control Helper * ------------------------------------------------------------------------- */ div.woocommerce .form-control-helper { -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto; font-smoothing: subpixel-antialiased; display: block; margin-top: 10px; padding: 0 18px; color: #919092; letter-spacing: 0.02em; text-transform: none; font: normal 400 12px / 1.25 kozuka-gothic-pro, sans-serif; padding-left: 2px; margin-bottom: 0; } /* ----------------------------------------------------------------------------- * Form Heading * ----------------------------------------------------------------------------- */ div.woocommerce .woocommerce-form__heading { font-size: 21px; font-weight: 700; line-height: 1.2; letter-spacing: 0.02em; color: #292929; width: 100%; padding-top: 28px; margin-bottom: 31px; } @media (min-width: 768px) { div.woocommerce .woocommerce-form__heading { font-size: 30px; } } div.woocommerce form .form-row-first, div.woocommerce form .form-row-last { float: none; width: 100%; } @media (min-width: 768px) { div.woocommerce form .form-row-first, div.woocommerce form .form-row-last { width: 50%; } } @media (min-width: 768px) { div.woocommerce form .form-row-first { float: left; padding-right: 15px; } } @media (min-width: 768px) { div.woocommerce form .form-row-last { float: right; padding-left: 15px; } } div.woocommerce .input-text { transition: all 0.15s ease-in-out; padding: 0 16px; border: 2px solid #ebebeb; border-radius: 4px; background-color: #fff; display: block; width: 100%; height: 48px; color: #292929; letter-spacing: normal; text-transform: none; font: normal 400 15px / 1.5 kozuka-gothic-pro, sans-serif; } div.woocommerce .input-text:focus { border: 2px solid #0f81d9; } /* CASE: Decrease spacing between address inputs */ div.woocommerce #billing_address_1_field + #billing_address_2_field, div.woocommerce #shipping_address_1_field + #shipping_address_2_field { margin-top: -14px; } div.woocommerce .button[type="submit"] { margin-top: 10px; } @media (min-width: 768px) { div.woocommerce .button[type="submit"] { margin-top: 16px; } } div.woocommerce textarea.input-text { padding: 10px 16px; height: 225px; } div.woocommerce .form-control-checkbox label, div.woocommerce .form-control-radio label { font-weight: 400; margin-bottom: 0; } div.woocommerce .woocommerce-password-strength { background-color: #f4f4f4; font-weight: 900; text-align: center; margin: 8px auto 10px; text-transform: uppercase; font-size: 12px; padding: 13px 15px 9px; border-radius: 4px; } @media (min-width: 768px) { div.woocommerce .woocommerce-password-strength { font-size: 13px; } } /* CASE: bad / short */ div.woocommerce .woocommerce-password-strength.short, div.woocommerce .woocommerce-password-strength.bad { background-color: #f83333; color: #fff; } /* CASE: good / ok */ div.woocommerce .woocommerce-password-strength.good { background-color: #eba819; color: #fff; } /* CASE: strong */ div.woocommerce .woocommerce-password-strength.strong { background-color: #57a53c; color: #fff; } div.woocommerce .woocommerce-password-hint { display: block; margin: 0; max-width: 540px; line-height: 1.4; font-style: italic; font-size: 14px; } div.woocommerce .woocommerce-invalid-required-field .input-text { border-color: #f83333; } div.woocommerce .woocommerce-invalid-required-field input[type="file"].form-control-custom-style + label { background-color: #f83333; } div.woocommerce .required { padding-left: 4px; color: #f83333; text-decoration: none; } .woocommerce .select2-container { cursor: pointer; position: relative; } .woocommerce .select2-container:hover:after, .woocommerce .select2-container:focus:after, .woocommerce .select2-container:active:after { background-color: #f5f5f5; } .woocommerce .select2-container:after { font-family: 'core-icons'; speak: none; font-style: normal; font-weight: normal; font-feature-settings: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: auto; display: block; transition: all 0.15s ease-in-out; content: '\e900'; text-align: center; height: 44px; width: 48px; line-height: 47px; background-color: transparent; color: #999; position: absolute; font-size: 20px; right: 2px; top: 2px; pointer-events: none; border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .woocommerce .select2-container select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 64px; } .woocommerce .select2-container select::-ms-expand { display: none; } .woocommerce .select2-selection, .woocommerce .select2-choice { transition: all 0.15s ease-in-out; padding: 0 16px; border: 2px solid #ebebeb; border-radius: 4px; background-color: #fff; display: block; width: 100%; height: 48px; color: #292929; letter-spacing: normal; text-transform: none; font: normal 400 15px / 1.5 kozuka-gothic-pro, sans-serif; cursor: pointer; padding-right: 64px; color: #292929; letter-spacing: normal; text-transform: none; font: normal 400 15px / 48px kozuka-gothic-pro, sans-serif; } .woocommerce .select2-selection:hover, .woocommerce .select2-selection:focus, .woocommerce .select2-choice:hover, .woocommerce .select2-choice:focus { color: #292929; } .woocommerce .select2-selection .select2-selection__arrow, .woocommerce .select2-choice .select2-selection__arrow { display: none !important; } .woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered { color: #292929; height: 46px; line-height: 46px; padding: 0; } /* CASE: Active */ .woocommerce .select2-container--open .select2-selection { border-color: #0f81d9; } /* ----------------------------------------------------------------------------- * Results * ----------------------------------------------------------------------------- */ .select2-dropdown { border: 2px solid #0f81d9; border-top: 0; background-color: #fff; margin-top: -3px; box-shadow: 0 4px 5px rgba(0, 0, 0, .15); } /* Active */ .select2-dropdown.select2-drop-active {} /* Select */ .select2-dropdown .select2-search { padding: 0; } .select2-dropdown .select2-search:after { font-family: 'core-icons'; speak: none; font-style: normal; font-weight: normal; font-feature-settings: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: auto; content: '\e902'; position: absolute; right: 0; color: #999; font-size: 28px; height: 48px; line-height: 48px; top: 0; width: 48px; text-align: center; cursor: default; } .select2-dropdown .select2-search__field { background-image: none !important; width: 100%; background-color: #fff; font: normal 400 15px / 1.5 kozuka-gothic-pro, sans-serif; padding: 0 64px 0 16px !important; height: 48px !important; border-bottom: 2px solid #d6d6d7; border: 1px solid #d6d6d7 !important; border-left: 0 !important; border-right: 0 !important; } .select2-dropdown .select2-search__field:focus { box-shadow: none; border-left: 0; border-right: 0; } /* Results */ .select2-dropdown .select2-results { padding: 0; font: normal 400 15px / normal kozuka-gothic-pro, sans-serif; background-color: #fff; } .select2-dropdown .select2-results__option { margin: 0; } .select2-dropdown .select2-results__option.select2-results__option--highlighted[aria-selected] { background-color: #f5f5f5; color: #000; border-radius: 0; } .select2-dropdown .select2-results__message { padding: 12px 16px 10px; line-height: 1; } /* Account */ /* CASE: Account Page Content Layout */ .woocommerce-account .woocommerce-MyAccount-content { float: none; width: 100%; } @media (min-width: 960px) { .woocommerce-account .woocommerce-MyAccount-content { -webkit-flex: 1; -ms-flex: 1; flex: 1; padding-left: 40px; } } @media (min-width: 1215px) { .woocommerce-account .woocommerce-MyAccount-content { padding-left: 60px; } } /* CASE: Account Page Navigation Layout */ .woocommerce-account .woocommerce-MyAccount-navigation { float: none; width: 100%; margin-bottom: 36px; } @media (min-width: 960px) { .woocommerce-account .woocommerce-MyAccount-navigation { width: 200px; margin-bottom: 0; } } @media (min-width: 1215px) { .woocommerce-account .woocommerce-MyAccount-navigation { width: 265px; } } /* ----------------------------------------------------------------------------- * Content * ----------------------------------------------------------------------------- */ @media (min-width: 960px) { .woocommerce-account__view { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } } /* ----------------------------------------------------------------------------- * Title * ----------------------------------------------------------------------------- */ .woocommerce-account__title { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } @media (min-width: 960px) { .woocommerce-account__title { clip: auto; width: auto; height: auto; margin: 0; position: static; margin-top: -64px; margin-bottom: 29px; padding-right: 180px; } } @media (min-width: 1215px) { .woocommerce-account__title { margin-top: -67px; margin-bottom: 31px; } } /* CASE: Licenses */ @media (min-width: 960px) { .woocommerce-account__view--licenses .woocommerce-account__title { padding-right: 275px; } } /* CASE: Reseller */ .woocommerce-account__view--reseller .woocommerce-account__title { clip: auto; width: auto; height: auto; margin: 0; position: static; margin-top: 0; margin-bottom: 20px; } @media (min-width: 768px) { .woocommerce-account__view--reseller .woocommerce-account__title { padding-right: 180px; margin-bottom: 29px; } } .site-account-navigation { background-color: #2641ac; margin: 0 -25px; position: relative; } @media (min-width: 960px) { .site-account-navigation { background-color: transparent; margin: 0; } } /* ----------------------------------------------------------------------------- * Navigation: List * ----------------------------------------------------------------------------- */ .account-navigation { position: absolute; width: 100%; top: 100%; opacity: 0; visibility: hidden; overflow: hidden; z-index: 2; height: 0; transition: opacity 0.2s ease-in-out; } @media (min-width: 960px) { .account-navigation { height: auto; visibility: visible; opacity: 1; overflow: visible; position: static; transition: none; } } /* CASE: mobile navigation is open */ .site-account-navigation--is-open .account-navigation { visibility: visible; height: auto; } /* CASE: mobile navigation is active */ .site-account-navigation--is-active .account-navigation { opacity: 1; } /* ----------------------------------------------------------------------------- * Navigation: Item * ----------------------------------------------------------------------------- */ @media (min-width: 960px) { .woocommerce-MyAccount-navigation-link ~ .woocommerce-MyAccount-navigation-link { margin-top: 2px; } } /* CASE: active item */ .woocommerce-MyAccount-navigation-link.is-active { display: none; visibility: hidden; } @media (min-width: 960px) { .woocommerce-MyAccount-navigation-link.is-active { display: block; visibility: visible; } } /* ----------------------------------------------------------------------------- * Navigation: Item Action ( &