/* --- Setting ---------- */ /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ /* --- Tools ---------- */ /* Layer 2: These include all the global mixins and functions if required. This layer would not output any css */ /* Galaxie */ @font-face { font-family: GalaxieCopernicus; src: url('fonts/galaxie-copernicus/GalaxieCopernicus-Book.otf') format('opentype'); font-weight: 400; font-style: normal; } @font-face { font-family: GalaxieCopernicus; src: url('fonts/galaxie-copernicus/GalaxieCopernicus-BookItalic.eot'); src: url('fonts/galaxie-copernicus/GalaxieCopernicus-BookItalic.woff') format('woff'), url('fonts/galaxie-copernicus/GalaxieCopernicus-BookItalic.otf') format('opentype'); font-weight: 400; font-style: italic; } @font-face { font-family: GalaxieCopernicus; src: url('fonts/galaxie-copernicus/GalaxieCopernicus-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; } @font-face { font-family: GalaxieCopernicus; src: url('fonts/galaxie-copernicus/GalaxieCopernicus-Semibold.otf') format('opentype'); font-weight: 600; font-style: normal; } @font-face { font-family: GalaxieCopernicus; src: url('fonts/galaxie-copernicus/GalaxieCopernicus-SemiboldItalic.eot'); src: url('fonts/galaxie-copernicus/GalaxieCopernicus-SemiboldItalic.woff') format('woff'), url('fonts/galaxie-copernicus/GalaxieCopernicus-SemiboldItalic.otf') format('opentype'); font-weight: 600; font-style: italic; } @font-face { font-family: GalaxieCopernicus; src: url('fonts/galaxie-copernicus/GalaxieCopernicus-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; } @font-face { font-family: GalaxieCopernicus; src: url('fonts/galaxie-copernicus/GalaxieCopernicus-BoldItalic.otf') format('opentype'); font-weight: 700; font-style: italic; } @font-face { font-family: GalaxieCopernicus; src: url('fonts/galaxie-copernicus/GalaxieCopernicus-Extrabold.otf') format('opentype'); font-weight: 800; font-style: normal; } @font-face { font-family: GalaxieCopernicus; src: url('fonts/galaxie-copernicus/GalaxieCopernicus-ExtraboldItalic.otf') format('opentype'); font-weight: 800; font-style: italic; } @font-face { font-family: GalaxieCopernicus; src: url('fonts/galaxie-copernicus/GalaxieCopernicus-Heavy.otf') format('opentype'); font-weight: 900; font-style: normal; } /* Gotham */ @font-face { font-family: Gotham; src: url('fonts/gotham/Gotham-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; } @font-face { font-family: Gotham; src: url('fonts/gotham/Gotham-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; } @font-face { font-family: Gotham; src: url('fonts/gotham/Gotham-Book.ttf') format('truetype'); font-weight: 400; font-style: normal; } @font-face { font-family: Gotham; src: url('fonts/gotham/Gotham-BookItalic.ttf') format('truetype'); font-weight: 400; font-style: italic; } @font-face { font-family: Gotham; src: url('fonts/gotham/Gotham-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; } @font-face { font-family: Gotham; src: url('fonts/gotham/Gotham-MediumItalic.ttf') format('truetype'); font-weight: 500; font-style: italic; } @font-face { font-family: Gotham; src: url('fonts/gotham/Gotham-Bold.ttf') format('truetype'); font-weight: 600; font-style: normal; } @font-face { font-family: Gotham; src: url('fonts/gotham/Gotham-BoldItalic.ttf') format('truetype'); font-weight: 600; font-style: italic; } /* Flama */ @font-face { font-family: 'FlamaCondensed-Basic'; src: url('fonts/flama/FlamaCondensed-Basic.eot?#iefix') format('embedded-opentype'), url('fonts/flama/FlamaCondensed-Basic.woff') format('woff'), url('fonts/flama/FlamaCondensed-Basic.ttf') format('truetype'), url('fonts/flama/FlamaCondensed-Basic.svg#FlamaCondensed-Basic') format('svg'); font-weight: 400; font-style: normal; } @font-face { font-family: 'flama-book'; src: url('fonts/flama/FlamaCondensed-Book.eot?#iefix') format('embedded-opentype'), url('fonts/flama/FlamaCondensed-Book.woff') format('woff'); font-weight: 400; font-style: normal; } @font-face { font-family: 'flama-light'; src: url('fonts/flama/FlamaCondensed-Light.eot?#iefix') format('embedded-opentype'), url('fonts/flama/FlamaCondensed-Light.woff') format('woff'); font-weight: 400; font-style: normal; } @font-face { font-family: 'flama-medium'; src: url('fonts/flama/FlamaCondensed-Medium.eot?#iefix') format('embedded-opentype'), url('fonts/flama/FlamaCondensed-Medium.woff') format('woff'); font-weight: 400; font-style: normal; } /* Mercury */ @font-face { font-family: 'Mercury'; src: url('fonts/mercury/mercury-textg4bolditalic-webfont.ttf') format('truetype'); font-weight: 600; font-style: italic; } @font-face { font-family: 'Mercury'; src: url('fonts/mercury/mercury-textg4italic-webfont.ttf') format('truetype'); font-weight: 400; font-style: italic; } @font-face { font-family: 'Mercury'; src: url('fonts/mercury/mercury-textg4roman-webfont.ttf') format('truetype'); font-weight: 400; font-style: normal; } /* Elena */ @font-face { font-family: 'Elena'; src: url('fonts/elena/Elena-Regular.eot'); src: url('fonts/elena/Elena-Regular.eot?#iefix') format('embedded-opentype'), url('fonts/elena/Elena-Regular.woff') format('woff'), url('fonts/elena/Elena-Regular.ttf') format('truetype'), url('fonts/elena/Elena-Regular.svg') format('svg'); font-weight: 500; font-style: normal; } @font-face { font-family: 'Elena'; src: url('fonts/elena/Elena-RegularItalic.eot'); src: url('fonts/elena/Elena-RegularItalic.eot?#iefix') format('embedded-opentype'), url('fonts/elena/Elena-RegularItalic.woff') format('woff'), url('fonts/elena/Elena-RegularItalic.ttf') format('truetype'), url('fonts/elena/Elena-RegularItalic.svg') format('svg'); font-weight: 500; font-style: italic; } @font-face { font-family: 'Elena'; src: url('fonts/elena/Elena-Bold.eot'); src: url('fonts/elena/Elena-Bold.eot?#iefix') format('embedded-opentype'), url('fonts/elena/Elena-Bold.woff') format('woff'), url('fonts/elena/Elena-Bold.ttf') format('truetype'), url('fonts/elena/Elena-Bold.svg') format('svg'); font-weight: 700; font-style: normal; } @font-face { font-family: 'Elena'; src: url('fonts/elena/Elena-BoldItalic.eot'); src: url('fonts/elena/Elena-BoldItalic.eot?#iefix') format('embedded-opentype'), url('fonts/elena/Elena-BoldItalic.woff') format('woff'), url('fonts/elena/Elena-BoldItalic.ttf') format('truetype'), url('fonts/elena/Elena-BoldItalic.svg') format('svg'); font-weight: 700; font-style: italic; } /* --- Generic ---------- */ /* Layer 3: Reset and/or normalize styles, box-sizing definition, etc. This is the first layer which generates actual CSS */ body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, dl, dd, ol, ul, form, fieldset, legend, figure, table, th, td, caption, hr { margin: 0; padding: 0; } /*! normalize.css v3.0.2 | MIT License | git.io/normalize */ /** * 1. Set default font family to sans-serif. * 2. Prevent iOS text size adjust after orientation change, without disabling * user zoom. */ html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /** * Remove default margin. */ body { margin: 0; } /* HTML5 display definitions ========================================================================== */ /** * Correct `block` display not defined for any HTML5 element in IE 8/9. * Correct `block` display not defined for `details` or `summary` in IE 10/11 * and Firefox. * Correct `block` display not defined for `main` in IE 11. */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } /** * 1. Correct `inline-block` display not defined in IE 8/9. * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */ audio, canvas, progress, video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** * Address `[hidden]` styling not present in IE 8/9/10. * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. */ [hidden], template { display: none; } /* Links ========================================================================== */ /** * Remove the gray background color from active links in IE 10. */ a { background-color: transparent; } /** * Improve readability when focused and also mouse hovered in all browsers. */ a:active, a:hover { outline: 0; } /* Text-level semantics ========================================================================== */ /** * Address styling not present in IE 8/9/10/11, Safari, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /** * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */ b, strong { font-weight: 700; } /** * Address styling not present in Safari and Chrome. */ dfn { font-style: italic; } /** * Address variable `h1` font-size and margin within `section` and `article` * contexts in Firefox 4+, Safari, and Chrome. */ h1 { font-size: 2em; margin: 0.67em 0; } /** * Address styling not present in IE 8/9. */ mark { background: #ff0; color: #000; } /** * Address inconsistent and variable font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* Embedded content ========================================================================== */ /** * Remove border when inside `a` element in IE 8/9/10. */ img { border: 0; max-width: 100%; } /** * Correct overflow not hidden in IE 9/10/11. */ svg:not(:root) { overflow: hidden; } /* Grouping content ========================================================================== */ /** * Address margin not present in IE 8/9 and Safari. */ figure { margin: 1em 40px; } /** * Address differences between Firefox and other browsers. */ hr { box-sizing: content-box; height: 0; } /** * Contain overflow in all browsers. */ pre { overflow: auto; } /** * Address odd `em`-unit font size rendering in all browsers. */ code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } /* Forms ========================================================================== */ /** * Known limitation: by default, Chrome and Safari on OS X allow very limited * styling of `select`, unless a `border` property is set. */ /** * 1. Correct color not being inherited. * Known issue: affects color of disabled elements. * 2. Correct font properties not being inherited. * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */ button, input, optgroup, select, textarea { color: inherit; /* 1 */ font: inherit; /* 2 */ margin: 0; /* 3 */ } /** * Address `overflow` set to `hidden` in IE 8/9/10/11. */ button { overflow: visible; } /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. * Correct `select` style inheritance in Firefox. */ button, select { text-transform: none; } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */ button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } /** * Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor: default; } /** * Remove inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ input { line-height: normal; } /** * It's recommended that you don't attempt to style these elements. * Firefox's implementation doesn't respect box-sizing, padding, or width. * * 1. Address box sizing set to `content-box` in IE 8/9/10. * 2. Remove excess padding in IE 8/9/10. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Fix the cursor style for Chrome's increment/decrement buttons. For certain * `font-size` values of the `input`, it causes the cursor style of the * decrement button to change from `default` to `text`. */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Address `appearance` set to `searchfield` in Safari and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari and Chrome * (include `-moz` to future-proof). */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ /* 2 */ box-sizing: content-box; } /** * Remove inner padding and search cancel button in Safari and Chrome on OS X. * Safari (but not Chrome) clips the cancel button when the search input has * padding (and `textfield` appearance). */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct `color` not being inherited in IE 8/9/10/11. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */ legend { border: 0; /* 1 */ padding: 0; /* 2 */ } /** * Remove default vertical scrollbar in IE 8/9/10/11. */ textarea { overflow: auto; } /** * Don't inherit the `font-weight` (applied by a rule above). * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */ optgroup { font-weight: 700; } /* Tables ========================================================================== */ /** * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } html { box-sizing: border-box; } * {} *, *:before, *:after { box-sizing: inherit; } /* --- Base Elements ----------- */ /* Layer 4: These are element styles — no classes or IDs. Base typography styles go here, as well as anything needed to style raw elements */ /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ html { font-size: 16px; font-size: 1rem; color: #000; background-color: #fff; padding: 0; margin: 0; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: hidden; } body { font-size: 16px; font-size: 1rem; line-height: 1.5; font-family: 'GalaxieCopernicus', serif; background-color: #fff; overflow-x: hidden; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } &:-webkit-full-page-media { background-color: transparent; } body.non-sticky .site#page { position: relative; margin-top: 120px; } @media (min-width: 769px) { body.non-sticky .site#page { margin-top: 72px; } } @media (min-width: 1440px) { body.non-sticky .site#page { margin-top: 86px; } } /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ h1, h2, h3, h4, h5, h6 { font-weight: 400; line-height: 1.5; } img { max-width: 100%; vertical-align: middle; } /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ a { color: #4D4D4D; text-decoration: none; } a:hover { color: #4D4D4D; outline: none; } h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a { color: inherit; } /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ input, textarea, button { outline: none; -webkit-appearance: none; -moz-appearance: none; border: 1px solid transparent; } /* Make sure we are not adding the select height to multi select */ select[multiple] { height: auto; } /* Styles relevant to checkboxes */ input[type="checkbox"] { -webkit-appearance: checkbox; -moz-appearance: checkbox; vertical-align: bottom; } /* Styles relevant to radio buttons */ input[type="radio"] { vertical-align: text-bottom; } /** * Browser Specific */ /* Remove extra spacing that Firefox adds to buttons */ button::-moz-focus-inner { padding: 0; border: 0; } /* Remove spinner from type="number" */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; } input:focus::-webkit-input-placeholder { color: transparent; } input:focus:-moz-placeholder { color: transparent; } input:focus::-moz-placeholder { color: transparent; } input:focus:-ms-input-placeholder { color: transparent; } .input-text { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 2px; /*border: 1px solid var(--lightgray-border);*/ background: transparent; font-size: 15px; } .input-text:focus { background: #fff; /*border: 1px solid var(--lightgray-border);*/ } /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ ul { list-style: disc outside; } li > ul, li > ol { margin-left: 32px; margin-left: 2rem; margin-bottom: 0; } /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ hr { margin: 0; border: 0; padding: 0; height: 1px; background: #f2f2f2; } /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ table { border-collapse: separate; border-spacing: 0; max-width: 100%; width: 100%; } th { text-align: left; font-weight: 400; } th, td { padding: 5px; line-height: inherit; } th { vertical-align: bottom; } td { vertical-align: top; } /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ label { color: #000; font-size: 16px; font-size: 1rem; margin-bottom: 8px; margin-bottom: 0.5rem; display: inline-block; } /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ p {} /* Remove Default HTML5 Video Play button */ *::-webkit-media-controls-start-playback-button { display: none!important; -webkit-appearance: none; } /* --- Objects ----------- */ /* Layer 5: class-based selectors which define undecorated design patterns such as `.wrapper`, `.grid`, `.header`, `.footer` and `.media` */ /* Importing default settings */ /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ /* Object specific settings */ .o-wrapper { max-width: 1440px; margin-left: auto; margin-right: auto; /* Responsive Sizing Custom */ padding-right: 20px; padding-left: 20px; padding-right: calc(20px + 30 * ((100vw - 320px) / 320)); padding-left: calc(20px + 30 * ((100vw - 320px) / 320)); } .o-wrapper:before { /* Responsive Sizing Custom */ content: ''; display: table; } .o-wrapper:after { /* Responsive Sizing Custom */ content: ''; display: table; clear: both; } @media (min-width: 640px) { .o-wrapper { padding-right: 50px; padding-left: 50px; } } @media (min-width: 1024px) { .o-wrapper { /* Responsive Sizing Custom */ max-width: 828px; max-width: calc(828px + 424 * ((100vw - 1024px) / 416)); padding-right: 0; padding-left: 0; padding-right: calc(0px + 40 * ((100vw - 1024px) / 416)); padding-left: calc(0px + 40 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .o-wrapper { max-width: 1252px; padding-right: 40px; padding-left: 40px; } } .o-wrapper--narrow { max-width: 770px; margin-left: auto; margin-right: auto; } .o-wrapper--narrow:before { content: ''; display: table; } .o-wrapper--narrow:after { content: ''; display: table; clear: both; } .o-wrapper--rel { position: relative; } .o-wrapper--medium { max-width: 1440px; margin-left: auto; margin-right: auto; /* Responsive Sizing Custom */ padding-right: 20px; padding-left: 20px; padding-right: calc(20px + 30 * ((100vw - 320px) / 320)); padding-left: calc(20px + 30 * ((100vw - 320px) / 320)); } .o-wrapper--medium:before { /* Responsive Sizing Custom */ content: ''; display: table; } .o-wrapper--medium:after { /* Responsive Sizing Custom */ content: ''; display: table; clear: both; } @media (min-width: 640px) { .o-wrapper--medium { padding-right: 50px; padding-left: 50px; } } @media (min-width: 1024px) { .o-wrapper--medium { /* Responsive Sizing Custom */ max-width: 828px; max-width: calc(828px + 424 * ((100vw - 1024px) / 416)); padding-right: 0; padding-left: 0; padding-right: calc(0px + 40 * ((100vw - 1024px) / 416)); padding-left: calc(0px + 40 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .o-wrapper--medium { max-width: 1340px; padding-right: 40px; padding-left: 40px; } } .o-wrapperMicro { margin-right: auto; margin-left: auto; padding-right: 25px; padding-left: 25px; } @media (min-width: 640px) { .o-wrapperMicro { padding-right: 40px; padding-left: 40px; } } @media (min-width: 640px) { .o-wrapperMicro { padding-right: 70px; padding-left: 70px; } } @media (min-width: 1024px) { .o-wrapperMicro { max-width: 1046px; padding-right: 40px; padding-left: 40px; } } @media (min-width: 1280px) { .o-wrapperMicro { max-width: 1112px; } } @media (min-width: 1440px) { .o-wrapperMicro { max-width: 1380px; } } .o-wrapperProgram { margin-right: auto; margin-left: auto; padding-right: 20px; padding-left: 20px; } @media (min-width: 640px) { .o-wrapperProgram { padding-right: 70px; padding-left: 70px; } } @media (min-width: 1024px) { .o-wrapperProgram { padding-right: 40px; padding-left: 40px; } } @media (min-width: 1280px) { .o-wrapperProgram { max-width: 1090px; } } .o-wrapper--fluid { max-width: 100%; } .o-wrapperNoPad { max-width: 1440px; margin-left: auto; margin-right: auto; } .o-wrapperNoPad:before { content: ''; display: table; } .o-wrapperNoPad:after { content: ''; display: table; clear: both; } .o-wrapperInner { max-width: 1164px; margin-left: auto; margin-right: auto; } .o-wrapperInner:before { content: ''; display: table; } .o-wrapperInner:after { content: ''; display: table; clear: both; } .o-wrapperInner--med { max-width: 1220px; margin-left: auto; margin-right: auto; } .o-wrapperInner--med:before { content: ''; display: table; } .o-wrapperInner--med:after { content: ''; display: table; clear: both; } /* Grid */ .row { width: 100%; max-width: 1134px; margin: 0 auto; } .row:before { content: ''; display: table; } .row:after { content: ''; display: table; clear: both; } .column { position: relative; float: left; width: 100%; padding-right: 20px; padding-left: 20px; } .column.row { float: none; } /* Large */ .column--large-5 {} @media (min-width: 1024px) { .column--large-5 { width: 41.666667%; } } .column--large-6 {} @media (min-width: 1024px) { .column--large-6 { width: 50%; } } .column--large-7 {} @media (min-width: 1024px) { .column--large-7 { width: 58.333333%; } } /* Importing default settings */ /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ /* Object specific settings */ .o-header { line-height: 1; position: absolute; width: 100%; z-index: 7; top: 0; } /* white header */ .o-header--white .c-logo a, .o-header--white .c-headerMenu__link { color: #fff; } .o-header--white .c-logo a:hover, .o-header--white .c-headerMenu__link:hover { color: #fff; } .o-header--white .c-headerMenu__link:before, .o-header--white .c-hamburger__patty { background-color: #fff; } .o-header--white .c-headerAd__wrapper .c-headerMenu__link { color: #000; } .o-header--white .c-headerAd__wrapper .c-headerAd__toggleText { color: #fff; } .o-header--fluid { max-width: 100%; } .o-headerRow { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: end; -ms-flex-align: end; -webkit-align-items: flex-end; align-items: flex-end; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; margin: 0 auto; padding: 0 19px; height: 40px; } @media (min-width: 640px) { .o-headerRow { height: 58px; padding-left: 30px; padding-right: 30px; } } @media (min-width: 1024px) { .o-headerRow { height: 57px; } } @media (min-width: 1280px) { .o-headerRow { height: 51px; } } @media (min-width: 1440px) { .o-headerRow { height: 63px; padding-left: 54px; padding-right: 54px; } } .o-headerRow__cell {} .o-headerRow__cell--left { -webkit-box-flex: 1; -ms-flex: 1; -webkit-flex: 1; flex: 1; text-align: left; } .o-headerRow__cell--right { -webkit-box-flex: 1; -ms-flex: 1; -webkit-flex: 1; flex: 1; text-align: right; } .page-template-player-page .o-header, .page-template-player-page-6-pillars .o-header, .page-template-player-page-13-keys .o-header, .page-template-player-page-faq .o-header, .page-template-page-waitlist-optin .o-header, .page-template-page-waitlist-thankyou .o-header { position: relative; background-color: #000; } .page-template-player-page .o-headerRow, .page-template-player-page-6-pillars .o-headerRow, .page-template-player-page-13-keys .o-headerRow, .page-template-player-page-faq .o-headerRow, .page-template-page-waitlist-optin .o-headerRow, .page-template-page-waitlist-thankyou .o-headerRow { /* Responsive Custom */ height: 32px; height: calc(32px + 14 * ((100vw - 320px) / 320)); padding: 0 6px 10px 10px; padding: 0 calc(6px + 16 * ((100vw - 320px) / 320)) 9px calc(10px + 4 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .page-template-player-page .o-headerRow, .page-template-player-page-6-pillars .o-headerRow, .page-template-player-page-13-keys .o-headerRow, .page-template-player-page-faq .o-headerRow, .page-template-page-waitlist-optin .o-headerRow, .page-template-page-waitlist-thankyou .o-headerRow { height: 46px; padding: 0 22px 10px 14px; } } @media (min-width: 1024px) { .page-template-player-page .o-headerRow, .page-template-player-page-6-pillars .o-headerRow, .page-template-player-page-13-keys .o-headerRow, .page-template-player-page-faq .o-headerRow, .page-template-page-waitlist-optin .o-headerRow, .page-template-page-waitlist-thankyou .o-headerRow { height: 44px; height: calc(44px + 14 * ((100vw - 1024px) / 416)); padding: 0 15px 13px 18px; padding: 0 calc(15px + 7 * ((100vw - 1024px) / 416)) 13px calc(18px + 7 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .page-template-player-page .o-headerRow, .page-template-player-page-6-pillars .o-headerRow, .page-template-player-page-13-keys .o-headerRow, .page-template-player-page-faq .o-headerRow, .page-template-page-waitlist-optin .o-headerRow, .page-template-page-waitlist-thankyou .o-headerRow { height: 53px; padding-right: 25px; padding-left: 25px; } } .page-template-page-sales .o-header { display: none; } /* Importing default settings */ /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ /* Object specific settings */ .o-footer { text-align: center; /* Responsive Custom */ padding-bottom: 30px; padding-bottom: calc(30px + 26 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .o-footer { padding-bottom: 56px; } } @media (min-width: 1024px) { .o-footer { padding-bottom: 30px; } } @media (min-width: 1440px) { .o-footer { /* padding-bottom: 30px; */ } } .o-footer--menu { margin: 30px 0; padding: 0; } @media (min-width: 1024px) { .o-footer--menu { margin-top: 80px; } } .o-footer--lightGray { background: #faf9f6; } .o-footer--lightGray .c-copyright { color: #7c7c7c; } .o-footer--lightGray .c-copyright a { color: #7c7c7c; } .o-footer--lightGray .c-copyright a:hover { color: #000; } .page-template-page-program .o-footer, .page-template-page-faq .o-footer { background: #faf9f6; } .page-template-page-program .o-footer .c-copyright, .page-template-page-faq .o-footer .c-copyright { color: #7c7c7c; } .page-template-page-program .o-footer .c-copyright a, .page-template-page-faq .o-footer .c-copyright a { color: #7c7c7c; } .page-template-page-program .o-footer .c-copyright a:hover, .page-template-page-faq .o-footer .c-copyright a:hover { color: #000; } .is-open-enrollment {} .is-open-enrollment.page-template-player-page-6-pillars .o-footer__padd, .is-open-enrollment.page-template-player-page-13-keys .o-footer__padd, .is-open-enrollment.page-template-player-page-faq .o-footer__padd, .is-open-enrollment.page-template-player-page .o-footer__padd, .is-open-enrollment.page-template-page-program .o-footer__padd, .is-open-enrollment.page-template-page-faq .o-footer__padd, .is-open-enrollment.page-template-page-reviews .o-footer__padd { background-color: #d97e3c; } .is-open-enrollment.page-template-player-page-6-pillars .o-footer__padd .o-footer, .is-open-enrollment.page-template-player-page-13-keys .o-footer__padd .o-footer, .is-open-enrollment.page-template-player-page-faq .o-footer__padd .o-footer, .is-open-enrollment.page-template-player-page .o-footer__padd .o-footer, .is-open-enrollment.page-template-page-program .o-footer__padd .o-footer, .is-open-enrollment.page-template-page-faq .o-footer__padd .o-footer, .is-open-enrollment.page-template-page-reviews .o-footer__padd .o-footer { background-color: #d97e3c; } .is-open-enrollment.page-template-player-page-6-pillars .o-footer__padd .c-copyright, .is-open-enrollment.page-template-player-page-13-keys .o-footer__padd .c-copyright, .is-open-enrollment.page-template-player-page-faq .o-footer__padd .c-copyright, .is-open-enrollment.page-template-player-page .o-footer__padd .c-copyright, .is-open-enrollment.page-template-page-program .o-footer__padd .c-copyright, .is-open-enrollment.page-template-page-faq .o-footer__padd .c-copyright, .is-open-enrollment.page-template-page-reviews .o-footer__padd .c-copyright { color: #fff; } .is-open-enrollment.page-template-player-page-6-pillars .o-footer__padd .c-copyright a, .is-open-enrollment.page-template-player-page-13-keys .o-footer__padd .c-copyright a, .is-open-enrollment.page-template-player-page-faq .o-footer__padd .c-copyright a, .is-open-enrollment.page-template-player-page .o-footer__padd .c-copyright a, .is-open-enrollment.page-template-page-program .o-footer__padd .c-copyright a, .is-open-enrollment.page-template-page-faq .o-footer__padd .c-copyright a, .is-open-enrollment.page-template-page-reviews .o-footer__padd .c-copyright a { color: #fff; } .is-open-enrollment.page-template-player-page-6-pillars .o-footer__padd .c-copyright a:hover, .is-open-enrollment.page-template-player-page-13-keys .o-footer__padd .c-copyright a:hover, .is-open-enrollment.page-template-player-page-faq .o-footer__padd .c-copyright a:hover, .is-open-enrollment.page-template-player-page .o-footer__padd .c-copyright a:hover, .is-open-enrollment.page-template-page-program .o-footer__padd .c-copyright a:hover, .is-open-enrollment.page-template-page-faq .o-footer__padd .c-copyright a:hover, .is-open-enrollment.page-template-page-reviews .o-footer__padd .c-copyright a:hover { color: #dedede; } .is-open-enrollment.page-template-player-page-6-pillars .o-footer__padd .c-copyright__text, .is-open-enrollment.page-template-player-page-13-keys .o-footer__padd .c-copyright__text, .is-open-enrollment.page-template-player-page-faq .o-footer__padd .c-copyright__text, .is-open-enrollment.page-template-player-page .o-footer__padd .c-copyright__text, .is-open-enrollment.page-template-page-program .o-footer__padd .c-copyright__text, .is-open-enrollment.page-template-page-faq .o-footer__padd .c-copyright__text, .is-open-enrollment.page-template-page-reviews .o-footer__padd .c-copyright__text { color: #fff; } .enrollment-closing-soon {} .enrollment-closing-soon.page-template-player-page-6-pillars .o-footer__padd, .enrollment-closing-soon.page-template-player-page-13-keys .o-footer__padd, .enrollment-closing-soon.page-template-player-page-faq .o-footer__padd, .enrollment-closing-soon.page-template-player-page .o-footer__padd, .enrollment-closing-soon.page-template-page-program .o-footer__padd, .enrollment-closing-soon.page-template-page-faq .o-footer__padd, .enrollment-closing-soon.page-template-page-reviews .o-footer__padd { background-color: #d97e3c; } .enrollment-closing-soon.page-template-player-page-6-pillars .o-footer__padd .o-footer, .enrollment-closing-soon.page-template-player-page-13-keys .o-footer__padd .o-footer, .enrollment-closing-soon.page-template-player-page-faq .o-footer__padd .o-footer, .enrollment-closing-soon.page-template-player-page .o-footer__padd .o-footer, .enrollment-closing-soon.page-template-page-program .o-footer__padd .o-footer, .enrollment-closing-soon.page-template-page-faq .o-footer__padd .o-footer, .enrollment-closing-soon.page-template-page-reviews .o-footer__padd .o-footer { background-color: #d97e3c; } .enrollment-closing-soon.page-template-player-page-6-pillars .o-footer__padd .c-copyright, .enrollment-closing-soon.page-template-player-page-13-keys .o-footer__padd .c-copyright, .enrollment-closing-soon.page-template-player-page-faq .o-footer__padd .c-copyright, .enrollment-closing-soon.page-template-player-page .o-footer__padd .c-copyright, .enrollment-closing-soon.page-template-page-program .o-footer__padd .c-copyright, .enrollment-closing-soon.page-template-page-faq .o-footer__padd .c-copyright, .enrollment-closing-soon.page-template-page-reviews .o-footer__padd .c-copyright { color: #fff; } .enrollment-closing-soon.page-template-player-page-6-pillars .o-footer__padd .c-copyright a, .enrollment-closing-soon.page-template-player-page-13-keys .o-footer__padd .c-copyright a, .enrollment-closing-soon.page-template-player-page-faq .o-footer__padd .c-copyright a, .enrollment-closing-soon.page-template-player-page .o-footer__padd .c-copyright a, .enrollment-closing-soon.page-template-page-program .o-footer__padd .c-copyright a, .enrollment-closing-soon.page-template-page-faq .o-footer__padd .c-copyright a, .enrollment-closing-soon.page-template-page-reviews .o-footer__padd .c-copyright a { color: #fff; } .enrollment-closing-soon.page-template-player-page-6-pillars .o-footer__padd .c-copyright a:hover, .enrollment-closing-soon.page-template-player-page-13-keys .o-footer__padd .c-copyright a:hover, .enrollment-closing-soon.page-template-player-page-faq .o-footer__padd .c-copyright a:hover, .enrollment-closing-soon.page-template-player-page .o-footer__padd .c-copyright a:hover, .enrollment-closing-soon.page-template-page-program .o-footer__padd .c-copyright a:hover, .enrollment-closing-soon.page-template-page-faq .o-footer__padd .c-copyright a:hover, .enrollment-closing-soon.page-template-page-reviews .o-footer__padd .c-copyright a:hover { color: #dedede; } .enrollment-closing-soon.page-template-player-page-6-pillars .o-footer__padd .c-copyright__text, .enrollment-closing-soon.page-template-player-page-13-keys .o-footer__padd .c-copyright__text, .enrollment-closing-soon.page-template-player-page-faq .o-footer__padd .c-copyright__text, .enrollment-closing-soon.page-template-player-page .o-footer__padd .c-copyright__text, .enrollment-closing-soon.page-template-page-program .o-footer__padd .c-copyright__text, .enrollment-closing-soon.page-template-page-faq .o-footer__padd .c-copyright__text, .enrollment-closing-soon.page-template-page-reviews .o-footer__padd .c-copyright__text { color: #fff; } .page-template-page-sales .o-footer__padd { background: #72beb8; padding: 15px 20px 10px 20px; } .page-template-page-sales .c-copyright, .page-template-page-sales .c-copyright__link, .page-template-page-sales .c-copyright__text { color: #fff; } .enrollment-closed {} .enrollment-closed.page-template-player-page-6-pillars, .enrollment-closed.page-template-player-page-13-keys, .enrollment-closed.page-template-player-page-faq, .enrollment-closed.page-template-player-page, .enrollment-closed.page-template-page-program, .enrollment-closed.page-template-page-faq {} .single-review .o-footer, .page-template-page-reviews .o-footer, .page-template-page-reviews-quiz .o-footer, .page-template-page-reviews-all .o-footer { background-color: #faf9f6; } .single-review.is-open-enrollment .o-footer, .single-review.enrollment-closing-soon .o-footer, .page-template-page-reviews.is-open-enrollment .o-footer, .page-template-page-reviews.enrollment-closing-soon .page-template-page-reviews-quiz.is-open-enrollment .o-footer, .page-template-page-reviews-quiz.enrollment-closing-soon .o-footer, .page-template-page-reviews-all.is-open-enrollment .o-footer, .page-template-page-reviews-all.enrollment-closing-soon .o-footer { padding-top: 100px; } /* Importing default settings */ /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ .o-grid { width: 100%; } .o-grid:before { content: ''; display: table; } .o-grid:after { content: ''; display: table; clear: both; } .o-grid__half--gutterSmall { margin-right: auto; margin-left: auto; } @media (min-width: 1024px) { .o-grid__half--gutterSmall { width: calc(99.9% * 1/2 - 8px); } .o-grid__half--gutterSmall:nth-child(1n) { float: left; margin-right: 16px; clear: none; } .o-grid__half--gutterSmall:last-child { margin-right: 0; } .o-grid__half--gutterSmall:nth-child(2n) { margin-right: 0; float: right; } .o-grid__half--gutterSmall:nth-child(2n + 1) { clear: both; } } .o-grid__half { margin-right: auto; margin-left: auto; } @media (min-width: 1024px) { .o-grid__half { width: calc(99.9% * 1/2 - 1rem); } .o-grid__half:nth-child(1n) { float: left; margin-right: 2rem; clear: none; } .o-grid__half:last-child { margin-right: 0; } .o-grid__half:nth-child(2n) { margin-right: 0; float: right; } .o-grid__half:nth-child(2n + 1) { clear: both; } } .o-grid__half--gutterMed { margin-right: auto; margin-left: auto; } @media (min-width: 1024px) { .o-grid__half--gutterMed { width: calc(99.9% * 1/2 - 20px); } .o-grid__half--gutterMed:nth-child(1n) { float: left; margin-right: 40px; clear: none; } .o-grid__half--gutterMed:last-child { margin-right: 0; } .o-grid__half--gutterMed:nth-child(2n) { margin-right: 0; float: right; } .o-grid__half--gutterMed:nth-child(2n + 1) { clear: both; } } .o-column { width: 100%; } .o-column:before { content: ''; display: table; } .o-column:after { content: ''; display: table; clear: both; } @media (min-width: 640px) { .o-column { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; } } .o-column__item {} @media (min-width: 640px) { .o-column__item { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } } .o-column__box { width: 100%; } .o-column__two .o-column__item { margin: 0 0 20px 0; width: 100%; } @media (min-width: 769px) { .o-column__two .o-column__item { width: calc(99.9% * 1/2 - 10px); margin-bottom: 0; } .o-column__two .o-column__item:nth-child(1n) { float: left; margin-right: 20px; clear: none; } .o-column__two .o-column__item:last-child { margin-right: 0; } .o-column__two .o-column__item:nth-child(2n) { margin-right: 0; float: right; } .o-column__two .o-column__item:nth-child(2n + 1) { clear: both; } } .o-column__three .o-column__item { margin: 0 0 20px 0; width: 100%; } @media (min-width: 1024px) { .o-column__three .o-column__item { width: calc(99.9% * 1/3 - 13.333333333333332px); width: calc(99.8% * 1/3 - 13.333333333333332px); margin-bottom: 0; } .o-column__three .o-column__item:nth-child(1n) { float: left; margin-right: 20px; clear: none; } .o-column__three .o-column__item:last-child { margin-right: 0; } .o-column__three .o-column__item:nth-child(3n) { margin-right: 0; float: right; } .o-column__three .o-column__item:nth-child(3n + 1) { clear: both; } } @media (min-width: 1440px) { .o-column__three .o-column__item { width: calc(99.9% * 1/3 - 13.333333333333332px); } .o-column__three .o-column__item:nth-child(1n) { float: left; margin-right: 20px; clear: none; } .o-column__three .o-column__item:last-child { margin-right: 0; } .o-column__three .o-column__item:nth-child(3n) { margin-right: 0; float: right; } .o-column__three .o-column__item:nth-child(3n + 1) { clear: both; } } .o-column__four .o-column__item { margin: 0 0 20px 0; } @media (min-width: 640px) { .o-column__four .o-column__item { width: calc(99.9% * 1/2 - 10px); width: calc(99.8% * 1/2 - 10px); margin-bottom: 20px; } .o-column__four .o-column__item:nth-child(1n) { float: left; margin-right: 20px; clear: none; } .o-column__four .o-column__item:last-child { margin-right: 0; } .o-column__four .o-column__item:nth-child(2n) { margin-right: 0; float: right; } .o-column__four .o-column__item:nth-child(2n + 1) { clear: both; } } @media (min-width: 1024px) { .o-column__four .o-column__item { width: calc(99.9% * 1/4 - 15px); margin-bottom: 0; width: calc(99.8% * 1/4 - 15px); } .o-column__four .o-column__item:nth-child(1n) { float: left; margin-right: 20px; clear: none; } .o-column__four .o-column__item:last-child { margin-right: 0; } .o-column__four .o-column__item:nth-child(4n) { margin-right: 0; float: right; } .o-column__four .o-column__item:nth-child(4n + 1) { clear: both; } } @media (min-width: 1440px) { .o-column__four .o-column__item { width: calc(99.9% * 1/4 - 15px); } .o-column__four .o-column__item:nth-child(1n) { float: left; margin-right: 20px; clear: none; } .o-column__four .o-column__item:last-child { margin-right: 0; } .o-column__four .o-column__item:nth-child(4n) { margin-right: 0; float: right; } .o-column__four .o-column__item:nth-child(4n + 1) { clear: both; } } /* --- Components for optin pages ----------- */ /* Layer 5: These are components styles */ /* Importing base settings */ /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ /* Component specific settings */ :root { /* Deafult skin */ /* primary skin */ /* secondary skin */ } /* Component base styles */ .c-btn { padding: 9px 19px; margin: 0; border: 1px solid #f2f2f2; border-radius: 0; font-weight: 600; font-family: 'Gotham', sans-serif; line-height: 1.5; text-transform: uppercase; color: #000; background-color: #fff; display: inline-block; vertical-align: middle; text-align: center; white-space: nowrap; transition: background 300ms cubic-bezier(0.47, 0, 0.745, 0.715), color 300ms cubic-bezier(0.47, 0, 0.745, 0.715); /* Responsive Sizing Custom */ padding: 9px 19px; padding: calc(9px + 10 * ((100vw - 320px) / 320)) calc(19px + 10 * ((100vw - 320px) / 320)); font-size: calc(7px + 8 * ((100vw - 320px) / 320)); letter-spacing: calc(3px + 1.5 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-btn { letter-spacing: 4.5px; font-size: 15px; padding: 16px 36px; } } @media (min-width: 1024px) { .c-btn { /* Responsive Sizing Custom */ padding: 16px 26px; padding: calc(16px + 0 * ((100vw - 1024px) / 416)) calc(26px + 10 * ((100vw - 1024px) / 416)); font-size: calc(10px + 5 * ((100vw - 1024px) / 416)); letter-spacing: calc(3.5px + 1 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-btn { letter-spacing: 4.5px; font-size: 15px; padding: 16px 36px; } } .c-btn:hover { color: #fff; background-color: #000; cursor: pointer; } /* Component layout */ .c-btn--small {} .c-btn--large {} /* Component skin */ .c-btn--primary { color: #a94442; background-color: #f2dede; border: 1px solid #ebcccc; } .c-btn--primary:hover { color: #a94442; background-color: #f2dede; } .c-btn--secondary { color: #3c763d; background-color: #dff0d8; border: 1px solid #d0e9c6; } .c-btn--secondary:hover { color: #3c763d; background-color: #dff0d8; } .c-btn--orange { background-color: #E57726; color: #fff; border: 1px solid #fff; } .c-btn--orange:hover { background-color: #B92685; } .c-btn--purple { background-color: #B92685; color: #fff; border: 1px solid #fff; } .c-btn--purple:hover { background-color: #E57726; } .c-btn--teal { background-color: #52C2B9; color: #fff; border: 1px solid #fff; } .c-btn--teal:hover { background-color: #B92685; } .c-btn--black { padding: 8px 16px; color: #fff; font-size: 9px; font-weight: 400; letter-spacing: 0.15em; line-height: 1; background-color: #000; } @media (min-width: 640px) { .c-btn--black { padding: 11px 22px; font-size: 14px; } } @media (min-width: 1024px) { .c-btn--black { padding: 12px 24px; font-size: 12px; } } .c-btn--black:hover { color: #000; background-color: #fff65b; } .c-btn--black:after { display: none; } /* Importing base settings */ /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ /* Component specific settings */ :root { /* Default skin */ /* Error skin */ /* Success skin */ } /* Component base styles */ .c-alert { padding: 16px; padding: 1rem; margin-top: 16px; margin-top: 1rem; margin-bottom: 16px; margin-bottom: 1rem; border: 1px solid rgb(167, 167, 167); border-radius: 5px; font-size: 16px; font-size: 1rem; font-family: "Arial"; line-height: 1.5; color: #000; background-color: #f2f2f2; vertical-align: middle; text-align: center; display: block; } .c-alert--error { color: #a94442; background-color: #f2dede; border: 1px solid #ebcccc; } .c-alert--success { color: #3c763d; background-color: #dff0d8; border: 1px solid #d0e9c6; } /* Importing base settings */ /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ /* Component specific settings */ :root { /* Deafult skin */ } .c-form--singleRow { margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .c-form--singleRow .c-input { width: 33%; } .c-form--errorAlt label.c-input__error { color: #fff; } .c-input { border: 1px solid #f2f2f2; border-radius: 0; padding: 4px 12px 0; letter-spacing: .5px; font-size: 15px; display: block; } ::-webkit-input-placeholder { color: #000; } :-ms-input-placeholder { color: #000; } ::placeholder { color: #000; } /* Component layout */ .c-input--inline { display: inline-block; } .c-input--fluid { width: 100%; } .c-input--small { width: 200px; } .c-input--large { width: 200px; padding: 16px; padding: 1rem; } .c-form__inputWrap { display: block; width: 100%; margin: 0 auto; /* Responsive Sizing Custom */ max-width: 300px; max-width: calc(300px + 240 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-form__inputWrap { max-width: 540px; } } @media (min-width: 1024px) { .c-form__inputWrap { -webkit-box-flex: 1.3; -ms-flex: 1.3; -webkit-flex: 1.3; flex: 1.3; width: 33%; margin-bottom: 0; margin-right: 8px; display: inline-block; } } @media (min-width: 1440px) { .c-form__inputWrap { -webkit-box-flex: 1.25; -ms-flex: 1.25; -webkit-flex: 1.25; flex: 1.25; } } label.c-input__error { display: block; color: red; text-align: left; font-family: 'Gotham', sans-serif; font-size: 11px; font-size: calc(11px + 5 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { label.c-input__error { font-size: 16px; } } @media (min-width: 1024px) { label.c-input__error { font-size: 11px; font-size: calc(11px + 3 * ((100vw - 1024px) / 416)); padding-top: 4px; text-align: left; } } @media (min-width: 1440px) { label.c-input__error { font-size: 15px; } } .c-form__submitWrap { display: block; } @media (min-width: 1024px) { .c-form__submitWrap { -webkit-box-flex: 1; -ms-flex: 1; -webkit-flex: 1; flex: 1; } } .c-input--submit { border: 0; } /* Importing base settings */ /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ .c-nav {} .c-embedContainer iframe, .c-embedContainer object, .c-embedContainer embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* marie forleo header */ .c-headerMarie { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; position: absolute; top: 0; left: 0; width: 100%; padding: 10px 20px; } @media (min-width: 640px) { .c-headerMarie { padding: 32px 40px; } } .c-headerMarie__logo { position: relative; font-family: 'Gotham', sans-serif; font-size: 24px; color: #000; } .c-headerMarie__logo:before { content: ''; position: absolute; bottom: 5px; left: 1px; width: 20px; height: 1px; background-color: #000; } .c-headerMarie__logoSmall { width: 31px; } /* Importing default settings */ /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ .c-logo { margin: 0; color: #000; text-transform: uppercase; font-weight: 500; font-family: 'Gotham', sans-serif; letter-spacing: 3px; line-height: calc(11px + 10 * ((100vw - 320px) / 320)); font-size: 20px; /* @media screen and (min-width: 360px) { line-height: 1; font-size: 21px } */ } @media (min-width: 640px) { .c-logo { line-height: 1; } } @media (min-width: 1024px) { .c-logo { letter-spacing: 5px; } } @media (min-width: 1440px) { .c-logo { letter-spacing: 3px; font-size: 21px; } } .c-logo--icon { width: 20px; line-height: 1; /* Responsive Custom */ width: calc(20px + 12 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-logo--icon { width: 32px; } } @media (min-width: 1024px) { .c-logo--icon { /* Responsive Custom */ width: calc(23px + 9 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-logo--icon { width: 32px; } } /* Importing default settings */ /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ .c-mobileNav { display: none; } /* Importing default settings */ /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ .c-copyright { font-family: 'Gotham', sans-serif; line-height: 24px; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .7px; color: #939393; } @media (min-width: 640px) { .c-copyright { font-size: 10px; letter-spacing: 1px; } } @media (min-width: 1024px) { .c-copyright { ont-weight: 600; /* Responsive typography */ font-size: calc(8px + 3 * ((100vw - 1024px) / 416)); line-height: calc(7px + 4 * ((100vw - 1024px) / 416)); letter-spacing: calc(1px + .2 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-copyright { line-height: 11px; font-size: 10px; letter-spacing: 1.2px; } } .c-copyright__text { font-size: 11px; line-height: 23px; text-align: center; color: #4D4D4D; padding: 90px 30px; } .c-copyright__text a { text-decoration: underline; color: #4D4D4D; } .c-copyright__text a:hover { text-decoration: none; } @media (min-width: 640px) { .c-copyright__text { padding: 90px 70px; text-align: left; } } @media (min-width: 768px) { .c-copyright__text { max-width: 530px; margin: 0 auto; padding: 90px 0; max-width: calc(530px + 104 * ((100vw - 768px) / 384)); } } @media (min-width: 1024px) { .c-copyright__text { font-size: 11px; line-height: 20px; padding: 70px 0; max-width: calc(590px + 240 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-copyright__text { max-width: 805px; } } .c-copyright__item { padding: 0 2px; } .c-copyright__item--separator { display: none; } @media (min-width: 640px) { .c-copyright__item--separator { display: inline-block; } } .c-copyright__item--break {} @media (min-width: 640px) { .c-copyright__item--break { display: none; } } .c-copyright__link { color: #939393; } .o-footer--open-orange .c-copyright__item, .o-footer--open-orange .c-copyright__link, .o-footer--open-orange .c-copyright__text { color: #fff; } .o-footer--open-orange .c-copyright__text a { color: #fff; } /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ .c-banner { background-size: auto 100%; background-position: top left; background-repeat: no-repeat; } @media (min-width: 1024px) { .c-banner { background-size: cover; background-position: center top; } } .c-banner--lightCream { background-color: #f8f5f1; } .c-test-banner-style { background-color: #f8f5f1; } /* banner 2 style */ .c-banner2 { padding-top: 40px; } .c-banner2__inner { position: relative; min-height: 490px; padding-top: 45px; text-align: center; background-color: #fbfaf8; border: 10px solid #fff; } .c-banner2__inner .o-wrapper { position: relative; z-index: 1; padding: 0 20px; max-width: 1070px; } .c-banner2__inner .c-btn { padding: 13px 30px; font-size: 11px; border: 0; } @media (min-width: 640px) { .c-banner2__inner { min-height: 580px; padding-top: 70px; } } @media (min-width: 1024px) { .c-banner2__inner { min-height: 510px; text-align: left; border: 20px solid #fff; } } @media (min-width: 1920px) { .c-banner2__inner { min-height: 695px; padding-top: 96px; } } @media (min-width: 640px) { .c-banner2__inner .c-btn { font-size: 12px; } } @media (min-width: 1280px) { .c-banner2__inner .c-btn { padding-top: 16px; padding-bottom: 16px; } } @media (min-width: 1920px) { .c-banner2__inner .c-btn { font-size: 16px; padding-top: 18px; padding-bottom: 18px; } } .c-banner2__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; } .c-banner2__bg--small {} @media (min-width: 1024px) { .c-banner2__bg--small { display: none; } } .c-banner2__bg--large { display: none; } @media (min-width: 1024px) { .c-banner2__bg--large { display: block; } } .c-banner2__heading { margin-bottom: 8px; font-family: 'Gotham', sans-serif; font-size: 34px; font-weight: 300; line-height: 1.2; } @media (min-width: 640px) { .c-banner2__heading { margin-bottom: 18px; font-size: 42px; } } @media (min-width: 1024px) { .c-banner2__heading { margin-bottom: 8px; font-size: 46px; } } @media (min-width: 1280px) { .c-banner2__heading { font-size: 50px; } } @media (min-width: 1920px) { .c-banner2__heading { font-size: 60px; } } .c-banner2__desc { max-width: 415px; margin: 0 auto 22px; font-size: 12px; font-weight: 600; font-style: italic; line-height: 2.1; } @media (min-width: 640px) { .c-banner2__desc { margin-bottom: 32px; font-size: 14px; } } @media (min-width: 1024px) { .c-banner2__desc { margin: 0 0 32px; max-width: none; font-size: 15px; } } @media (min-width: 1280px) { .c-banner2__desc { font-size: 16px; } } @media (min-width: 1920px) { .c-banner2__desc { font-size: 18px; } } /* Importing base settings */ /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ .c-overlay { width: 100vw; height: 100vh; position: fixed; top: 0; background-color: #000; opacity: 0; z-index: 10; } .c-overlay.c-overlay--enrollBar { height: 100%; } /* Importing default settings */ /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ .c-video__wrapper {} .c-video { position: relative; } .c-video.is-playing { height: auto; } .c-video.is-playing .c-video__videoContainer { display: block; position: absolute; } .c-video.is-playing .c-video__playText, .c-video.is-playing .c-video__playButton { opacity: 0; } .c-video.is-playing .c-video__videoInner--program { background: none; height: auto; } .c-video__videoInner { position: relative; z-index: 8; height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; padding-top: 56.25%; } .c-video__videoInner.c-video__videoInner--blue-optin-6-pillars { background-image: url('images/optin/blue-video-bg-6-pillars-m1x.jpg'); } @media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (-moz-min-device-pixel-ratio: 1.5), screen and (min-device-pixel-ratio: 1.5) { .c-video__videoInner.c-video__videoInner--blue-optin-6-pillars { background-image: url('images/optin/blue-video-bg-6-pillars-m2x.jpg'); } } @media (min-width: 640px) { .c-video__videoInner.c-video__videoInner--blue-optin-6-pillars { background-image: url('images/optin/blue-video-bg-6-pillars.jpg'); } } @media (min-width: 640px) and screen and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 640px) and screen and (-moz-min-device-pixel-ratio: 1.5), (min-width: 640px) and screen and (min-device-pixel-ratio: 1.5) { .c-video__videoInner.c-video__videoInner--blue-optin-6-pillars { background-image: url('images/optin/blue-video-bg-6-pillars@2x.jpg'); } } .c-video__videoInner.c-video__videoInner--blue-optin-13-keys { background-image: url('images/optin/blue-video-bg-13-keys-m1x.jpg'); } @media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (-moz-min-device-pixel-ratio: 1.5), screen and (min-device-pixel-ratio: 1.5) { .c-video__videoInner.c-video__videoInner--blue-optin-13-keys { background-image: url('images/optin/blue-video-bg-13-keys-m2x.jpg'); } } @media (min-width: 640px) { .c-video__videoInner.c-video__videoInner--blue-optin-13-keys { background-image: url('images/optin/blue-video-bg-13-keys.jpg'); } } @media (min-width: 640px) and screen and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 640px) and screen and (-moz-min-device-pixel-ratio: 1.5), (min-width: 640px) and screen and (min-device-pixel-ratio: 1.5) { .c-video__videoInner.c-video__videoInner--blue-optin-13-keys { background-image: url('images/optin/blue-video-bg-13-keys@2x.jpg'); } } .c-video__videoInner.c-video__videoInner--blue-optin-no-excuses { background-image: url('images/optin/blue-video-bg-no-excuses-m1x.jpg'); } @media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (-moz-min-device-pixel-ratio: 1.5), screen and (min-device-pixel-ratio: 1.5) { .c-video__videoInner.c-video__videoInner--blue-optin-no-excuses { background-image: url('images/optin/blue-video-bg-no-excuses-m2x.jpg'); } } @media (min-width: 640px) { .c-video__videoInner.c-video__videoInner--blue-optin-no-excuses { background-image: url('images/optin/blue-video-bg-no-excuses.jpg'); } } @media (min-width: 640px) and screen and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 640px) and screen and (-moz-min-device-pixel-ratio: 1.5), (min-width: 640px) and screen and (min-device-pixel-ratio: 1.5) { .c-video__videoInner.c-video__videoInner--blue-optin-no-excuses { background-image: url('images/optin/blue-video-bg-no-excuses@2x.jpg'); } } .c-video__videoInner.c-video__videoInner--6-pillars { background-image: url('images/optin/video-bg-6-pillars-m1x.jpg'); } @media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (-moz-min-device-pixel-ratio: 1.5), screen and (min-device-pixel-ratio: 1.5) { .c-video__videoInner.c-video__videoInner--6-pillars { background-image: url('images/optin/video-bg-6-pillars-m2x.jpg'); } } @media (min-width: 640px) { .c-video__videoInner.c-video__videoInner--6-pillars { background-image: url('images/optin/video-bg-6-pillars.jpg'); } } @media (min-width: 640px) and screen and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 640px) and screen and (-moz-min-device-pixel-ratio: 1.5), (min-width: 640px) and screen and (min-device-pixel-ratio: 1.5) { .c-video__videoInner.c-video__videoInner--6-pillars { background-image: url('images/optin/video-bg-6-pillars@2x.jpg'); } } .c-video__videoInner.c-video__videoInner--13-keys { background-image: url('images/optin/video-bg-13-keys-m1x.jpg'); } @media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (-moz-min-device-pixel-ratio: 1.5), screen and (min-device-pixel-ratio: 1.5) { .c-video__videoInner.c-video__videoInner--13-keys { background-image: url('images/optin/video-bg-13-keys-m2x.jpg'); } } @media (min-width: 640px) { .c-video__videoInner.c-video__videoInner--13-keys { background-image: url('images/optin/video-bg-13-keys.jpg'); } } @media (min-width: 640px) and screen and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 640px) and screen and (-moz-min-device-pixel-ratio: 1.5), (min-width: 640px) and screen and (min-device-pixel-ratio: 1.5) { .c-video__videoInner.c-video__videoInner--13-keys { background-image: url('images/optin/video-bg-13-keys@2x.jpg'); } } .c-video__videoInner.c-video__videoInner--faq { background-image: url('images/optin/video-bg-faq-m1x.jpg'); } @media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (-moz-min-device-pixel-ratio: 1.5), screen and (min-device-pixel-ratio: 1.5) { .c-video__videoInner.c-video__videoInner--faq { background-image: url('images/optin/video-bg-faq-m2x.jpg'); } } @media (min-width: 640px) { .c-video__videoInner.c-video__videoInner--faq { background-image: url('images/optin/video-bg-faq.jpg'); } } @media (min-width: 640px) and screen and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 640px) and screen and (-moz-min-device-pixel-ratio: 1.5), (min-width: 640px) and screen and (min-device-pixel-ratio: 1.5) { .c-video__videoInner.c-video__videoInner--faq { background-image: url('images/optin/video-bg-faq@2x.jpg'); } } .c-video__videoInner.c-video__videoInner--program { height: 390px; background-image: url(images/program/review-video-poster-mobile.jpg); background-size: cover; } @media (min-width: 640px) { .c-video__videoInner.c-video__videoInner--program { height: 530px; background-image: url(images/program/review-video-poster-mobilelarge.jpg); } } @media (min-width: 1024px) { .c-video__videoInner.c-video__videoInner--program { height: 567px; background-image: url(images/program/review-video-poster.jpg); } } .c-video__videoInner.c-video__videoInner--sales { background-image: url(images/sales/sales-hero-video-img.jpg); } @media (min-width: 1024px) { .c-video__videoInner { height: 0; } } .c-video__videoBox { position: relative; text-align: center; z-index: 1; } .c-video__videoBox:hover { cursor: pointer; } .c-video__playBox { position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; cursor: pointer; } .c-video__playBox.c-video__playBox--blueOptin { margin-top: 10px; margin-top: calc(10px + 10 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-video__playBox.c-video__playBox--blueOptin { margin-top: 20px; } } @media (min-width: 1024px) { .c-video__playBox.c-video__playBox--blueOptin { margin-top: 12px; margin-top: calc(12px + 8 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-video__playBox.c-video__playBox--blueOptin { margin-top: 20px; } } .c-video__playBox--relative { position: relative; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; cursor: pointer; } .c-video__playButton { opacity: 1; transition: opacity 300ms cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0,0,0); /* Responsive Custom */ width: 50px; height: 50px; width: calc(50px + 53 * ((100vw - 320px) / 320)); height: calc(50px + 53 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-video__playButton { width: 103px; height: 103px; } } @media (min-width: 1024px) { .c-video__playButton { /* Responsive Custom */ width: 70px; height: 70px; width: calc(70px + 50 * ((100vw - 1024px) / 416)); height: calc(70px + 50 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-video__playButton { width: 120px; height: 120px; } } .c-video__playButton:hover { cursor: pointer; } .c-video__playText { display: block; text-align: center; color: #fff; font-family: 'Gotham', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; opacity: 1; transition: opacity 300ms cubic-bezier(0.47, 0, 0.745, 0.715); margin-top: 4px; -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0,0,0); /* Responsive Typography */ font-size: calc(7px + 7 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-video__playText { font-size: 14px; } } @media (min-width: 1024px) { .c-video__playText { /* Responsive Typography */ margin-top: 4px; font-size: calc(9px + 5 * ((100vw - 1024px) / 416)); margin-top: calc(4px + 4 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-video__playText { margin-top: 8px; font-size: 14px; } } .c-video__videoContainer { display: none; position: absolute; z-index: 11; top: 0; left: 0; right: 0; bottom: 0; } .c-video__videoEmbedContainer { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .c-video__videoEmbedContainer iframe, .c-video__videoEmbedContainer object, .c-video__videoEmbedContainer embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .c-video__captionBox { text-align: center; font-size: 8px; } @media (min-width: 640px) { .c-video__captionBox { font-size: 15px; } } .c-video__caption { display: block; } /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ .c-heading { /* line-height: 1.8; */ } .c-h1 { font-size: 58px; } .c-h2 { font-size: 53px; line-height: 1.2; letter-spacing: 1.5px; } .c-h3 { font-size: 42px; line-height: 1.15; letter-spacing: .5px; } .c-h4 { font-size: 30px; line-height: 1.2; letter-spacing: .8px; } /* Importing default settings */ /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ .c-list { /* Responsive Sizing Custom */ padding-left: 16px; padding-left: calc(16px + 10 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-list { padding-left: 26px; } } @media (min-width: 1024px) { .c-list { padding-left: 30px; /* Responsive Sizing Custom */ padding-left: 30px; padding-left: calc(30px + 10 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-list { padding-left: 40px; } } .c-list__item { position: relative; list-style-type: none; line-height: 2; letter-spacing: .4px; /* Responsive Sizing Custom */ margin-bottom: 16px; margin-bottom: calc(16px + 10 * ((100vw - 320px) / 320)); font-size: calc(12px + 5 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-list__item { font-size: 17px; margin-bottom: 26px; } } @media (min-width: 1024px) { .c-list__item { /* Responsive Sizing Custom */ margin-bottom: 17px; margin-bottom: calc(17px + 7 * ((100vw - 1024px) / 416)); font-size: calc(12px + 5 * ((100vw - 1024px) / 416)); letter-spacing: calc(.45px - .05 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-list__item { font-size: 17px; margin-bottom: 24px; letter-spacing: .4px; } } .c-list__item:last-of-type { margin-bottom: 0; } .c-list__item:before { position: absolute; content: '\2022'; line-height: 1; /* Responsive Sizing Custom */ left: -12px; left: calc(-12px - 14 * ((100vw - 320px) / 320)); font-size: calc(20px + 14 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-list__item:before { font-size: 34px; left: -26px; } } @media (min-width: 1024px) { .c-list__item:before { /* Responsive Sizing Custom */ left: -17px; left: calc(-17px - 9 * ((100vw - 1024px) / 416)); font-size: calc(24px + 10 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-list__item:before { font-size: 34px; left: -26px; } } /* Importing default settings */ /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ .c-content {} .c-contentFocus p { font-size: 16px; font-size: 1rem; line-height: 1.9; margin-bottom: 24px; margin-bottom: 1.5rem; letter-spacing: 1px; } /* Importing base settings */ /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ /* Component specific settings */ /* Component Layout */ .c-modal { display: none; position: fixed; opacity: 0; width: 100%; padding: 20px; left: 50%; top: 50%; text-align: center; -webkit-transform: translate(-50%, calc(-50% + 30px)); transform: translate(-50%, calc(-50% + 30px)); z-index: 11; transition: opacity 300ms cubic-bezier(0.47, 0, 0.745, 0.715), -webkit-transform 300ms cubic-bezier(0.47, 0, 0.745, 0.715); transition: transform 300ms cubic-bezier(0.47, 0, 0.745, 0.715), opacity 300ms cubic-bezier(0.47, 0, 0.745, 0.715); transition: transform 300ms cubic-bezier(0.47, 0, 0.745, 0.715), opacity 300ms cubic-bezier(0.47, 0, 0.745, 0.715), -webkit-transform 300ms cubic-bezier(0.47, 0, 0.745, 0.715); /* Responsive Sizing Custom */ padding: 20px; padding: calc(20px + 16 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-modal { max-width: 570px; padding: 36px; } } @media (min-width: 1024px) { .c-modal { /* Responsive Sizing Custom */ min-width: 980px; min-width: calc(980px + 106 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-modal { min-width: 1086px; } } .c-modal.is-opening { display: inline-block; } .c-modal.is-open { transition: opacity 300ms cubic-bezier(0.47, 0, 0.745, 0.715), -webkit-transform 300ms cubic-bezier(0.47, 0, 0.745, 0.715); transition: transform 300ms cubic-bezier(0.47, 0, 0.745, 0.715), opacity 300ms cubic-bezier(0.47, 0, 0.745, 0.715); transition: transform 300ms cubic-bezier(0.47, 0, 0.745, 0.715), opacity 300ms cubic-bezier(0.47, 0, 0.745, 0.715), -webkit-transform 300ms cubic-bezier(0.47, 0, 0.745, 0.715); opacity: 1; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .c-modal__container { position: relative; /* Responsive Sizing Custom */ padding: 34px 18px; } @media (min-width: 560px) { .c-modal__container { padding: 35px 50px 30px; } } @media (min-width: 769px) { .c-modal__container { padding: 86px 48px 60px; } } @media (min-width: 1024px) { .c-modal__container { padding: 86px 48px 60px; } } @media (min-width: 1440px) { .c-modal__container { padding: 86px 48px 60px; } } .c-modal--default .c-modal__container { color: #fff; background-color: #52C2B9; } .c-modal__closeContainer { position: absolute; top: 8px; right: 6px; width: 12px; /* Responsive Sizing Custom */ width: 12px; width: calc(12px + 18 * ((100vw - 320px) / 320)); top: 8px; top: calc(8px + 8 * ((100vw - 320px) / 320)); right: 6px; right: calc(6px + 10 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-modal__closeContainer { top: 16px; right: 16px; width: 30px; } } .c-modal__closeContainer:hover { cursor: pointer; } .c-modal__close { fill: #fff; font-family: "Helvetica Neue"; font-weight: 100; width: 12px; /* Responsive Sizing Custom */ width: 12px; width: calc(12px + 18 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-modal__close { width: 30px; } } .c-modal__close--text { padding-right: 0px; color: #fff; font-weight: 400; font-size: 18px; transition: 250ms color ease; position: absolute; text-transform: uppercase; left: -50px; top: -2px; display: none; letter-spacing: 2px; font-family: 'Gotham', sans-serif; } @media (min-width: 1024px) { .c-modal__close--text { display: block; } } .c-modal__title { font-weight: 300; font-family: 'Gotham', sans-serif; letter-spacing: 1px; line-height: 57.6px; margin-bottom: 4px; /* Responsive Custom */ margin-bottom: calc(4px + 4 * ((100vw - 320px) / 320)); font-size: calc(23px + 25 * ((100vw - 320px) / 320)); } @media (min-width: 560px) { .c-modal__title { font-size: 32px; line-height: 40px; margin: 0; } } @media (min-width: 640px) { .c-modal__title { margin: 0 0 5px 0; } } @media (min-width: 769px) { .c-modal__title { font-size: 48px; margin-bottom: 8px; } } @media (min-width: 1024px) { .c-modal__title { font-size: 48px; } } @media (min-width: 1440px) { .c-modal__title { line-height: 48px; } } .c-modal__subtitle { font-family: 'Gotham', sans-serif; font-weight: 500; letter-spacing: 2px; line-height: 36.4px; margin-bottom: 13px; /* Responsive Custom */ margin-bottom: calc(13px + 11 * ((100vw - 320px) / 320)); line-height: calc(36.4px + 49.4 * ((100vw - 320px) / 320)); font-size: calc(28px + 38 * ((100vw - 320px) / 320)); } @media (min-width: 560px) { .c-modal__subtitle { font-size: 40px; line-height: 58px; margin: 0; } } @media (min-width: 640px) { .c-modal__subtitle { margin: 0 0 5px 0; } } @media (min-width: 769px) { .c-modal__subtitle { font-size: 66px; line-height: 85.8px; margin-bottom: 24px; } } @media (min-width: 1024px) { .c-modal__subtitle { font-size: 67px; } } .c-modal__ctaText { font-family: 'Gotham', sans-serif; font-weight: 400; letter-spacing: .2px; line-height: 1.65; padding: 0 2px; /* Responsive Custom */ margin-bottom: 25px; margin-bottom: calc(25px + 15 * ((100vw - 320px) / 320)); font-size: calc(14px + 6 * ((100vw - 320px) / 320)); } @media (min-width: 560px) { .c-modal__ctaText { font-size: 16px; line-height: 1.8; margin-bottom: 10px; } } @media (min-width: 640px) { .c-modal__ctaText { margin-bottom: 20px; } } @media (min-width: 769px) { .c-modal__ctaText { font-size: 20px; line-height: 1.8; margin-bottom: 40px; } } @media (min-width: 1024px) { .c-modal__ctaText { font-size: 19px; letter-spacing: 0; line-height: 1.3; margin-bottom: 0; padding: 0; } } .c-modal__form .c-input { display: block; width: 100%; font-family: 'Gotham', sans-serif; background-color: #f7f7f7; color: #000; margin: 0 auto 8px; /* Responsive Custom */ margin-bottom: 8px; margin-bottom: calc(8px + 2 * ((100vw - 320px) / 320)); max-width: 300px; max-width: calc(300px + 102 * ((100vw - 320px) / 320)); padding: 16px 14px 13px; padding-top: calc(16px + 3 * ((100vw - 320px) / 320)); padding-right: calc(14px + 1 * ((100vw - 320px) / 320)); padding-left: calc(14px + 1 * ((100vw - 320px) / 320)); font-size: calc(13px + 6 * ((100vw - 320px) / 320)); letter-spacing: calc(0px + 1 * ((100vw - 320px) / 320)); } .c-modal__form .c-input--submit { display: block; width: 100%; max-width: 300px; margin: 3px auto 0; line-height: 1; /* Responsive Custom */ margin-top: 3px; margin-top: calc(3px + 9 * ((100vw - 320px) / 320)); max-width: 300px; max-width: calc(300px + 102 * ((100vw - 320px) / 320)); padding: 15px 31px; padding-top: calc(15px + 5 * ((100vw - 320px) / 320)); padding-bottom: calc(15px + 5 * ((100vw - 320px) / 320)); font-size: calc(11px + 4 * ((100vw - 320px) / 320)); letter-spacing: calc(3px + .3 * ((100vw - 320px) / 320)); } @media (min-width: 1024px) { .c-modal__form { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; width: 100%; margin: 42px 0 auto; } } @media (min-width: 640px) { .c-modal__form .c-input { margin-bottom: 10px; max-width: 402px; padding: 19px 15px 13px; font-size: 19px; letter-spacing: 1px; } } @media (min-width: 1024px) { .c-modal__form .c-input { height: 54px; margin-right: 8px; margin-bottom: 0; padding: 18px 16px 14px; display: inline-block; font-family: 'Gotham', sans-serif; background-color: #f7f7f7; color: #000; font-size: 19px; letter-spacing: 1px; } } @media (min-width: 640px) { .c-modal__form .c-input--submit { margin-top: 12px; max-width: 402px; padding: 20px 31px; font-size: 15px; letter-spacing: 3.3px; } } @media (min-width: 1024px) { .c-modal__form .c-input--submit { -webkit-box-flex: 1; -ms-flex: 1; -webkit-flex: 1; flex: 1; width: 100%; height: 54px; font-size: 12px; margin-top: 0; letter-spacing: 3.2px; } } .c-modal--image { text-align: center; max-width: 480px; } .c-modal--image .c-modal__container { padding: 40px 0 0 0; } .c-modal--image .c-modal__container img {} .c-modal--image .c-modal__close { width: 16px; } @media (min-width: 640px) { .c-modal--image { max-width: 570px; } } @media (min-width: 768px) { .c-modal--image { max-width: 650px; } } @media (min-width: 1024px) { .c-modal--image { max-width: 670px; min-width: 440px; } } @media (min-width: 1440px) { .c-modal--image { max-width: 750px; } } @media (min-width: 640px) { .c-modal--image .c-modal__container { padding: 50px 16px 0 16px; } } @media (min-width: 1024px) { .c-modal--image .c-modal__container img { max-height: inherit; } } @media (min-width: 640px) { .c-modal--image .c-modal__close { width: 20px; } } html body .c-modal .ussr .moonray-form { background-color: transparent; border: none; width: 100%; } html body .c-modal .ussr .moonray-form .moonray-form-clearfix {} html body .c-modal .ussr .moonray-form .moonray-form-element-wrapper .moonray-form-label { position: absolute; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; } html body .c-modal .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-text, html body .c-modal .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-email { display: block; width: 100%; margin: 0 auto; margin-bottom: 10px; padding: 0; border-radius: 0; border: none; box-shadow: none; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; /* Responsive Sizing Custom */ max-width: 300px; max-width: calc(300px + 240 * ((100vw - 320px) / 320)); } html body .c-modal .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-text .moonray-form-input, html body .c-modal .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-email .moonray-form-input { display: block; width: 100%; font-family: 'Gotham', sans-serif; background-color: #f7f7f7; color: #000; margin: 0 auto 8px; border-radius: 0; border: none; /* Responsive Custom */ margin-bottom: 8px; margin-bottom: calc(8px + 2 * ((100vw - 320px) / 320)); max-width: 300px; max-width: calc(300px + 102 * ((100vw - 320px) / 320)); padding: 16px 14px 13px; padding-top: calc(16px + 3 * ((100vw - 320px) / 320)); padding-right: calc(14px + 1 * ((100vw - 320px) / 320)); padding-left: calc(14px + 1 * ((100vw - 320px) / 320)); font-size: calc(13px + 6 * ((100vw - 320px) / 320)); letter-spacing: calc(0px + 1 * ((100vw - 320px) / 320)); } html body .c-modal .ussr .moonray-form .moonray-form-state-error { box-shadow: none; } html body .c-modal .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-submit { display: block; padding: 0 !important; } html body .c-modal .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-submit .moonray-form-input { display: block; width: 100% !important; max-width: 300px; margin: 0 auto 0; line-height: 1; background-color: #E57726; text-transform: uppercase; font-family: 'Gotham', sans-serif; font-weight: 600; border-radius: 0; border: 1px solid #fff; color: #fff; transition: background 300ms cubic-bezier(0.47, 0, 0.745, 0.715), color 300ms cubic-bezier(0.47, 0, 0.745, 0.715); /* Responsive Custom */ max-width: 300px; max-width: calc(300px + 102 * ((100vw - 320px) / 320)); padding: 15px 31px; padding-top: calc(15px + 5 * ((100vw - 320px) / 320)); padding-bottom: calc(15px + 5 * ((100vw - 320px) / 320)); font-size: calc(11px + 4 * ((100vw - 320px) / 320)); letter-spacing: calc(3px + .3 * ((100vw - 320px) / 320)); } html body .c-modal .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-submit .moonray-form-input:hover { background-color: #B92685; } @media (min-width: 1024px) { html body .c-modal .ussr .moonray-form .moonray-form-clearfix { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; width: 100%; margin: 42px 0 auto; } } @media (min-width: 640px) { html body .c-modal .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-text, html body .c-modal .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-email { max-width: 540px; display: block; } } @media (min-width: 1024px) { html body .c-modal .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-text, html body .c-modal .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-email { -webkit-box-flex: 1.3; -ms-flex: 1.3; -webkit-flex: 1.3; flex: 1.3; width: 33%; margin-bottom: 0; margin-right: 8px; display: inline-block; } } @media (min-width: 1440px) { html body .c-modal .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-text, html body .c-modal .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-email { -webkit-box-flex: 1.25; -ms-flex: 1.25; -webkit-flex: 1.25; flex: 1.25; } } @media (min-width: 560px) { html body .c-modal .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-text .moonray-form-input, html body .c-modal .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-email .moonray-form-input { margin-bottom: 10px; max-width: inherit; padding: 15px 15px 13px; font-size: 13px; letter-spacing: 1px; } } @media (min-width: 769px) { html body .c-modal .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-text .moonray-form-input, html body .c-modal .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-email .moonray-form-input { margin-bottom: 10px; max-width: 402px; padding: 19px 15px 13px; font-size: 19px; letter-spacing: 1px; } } @media (min-width: 1024px) { html body .c-modal .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-text .moonray-form-input, html body .c-modal .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-email .moonray-form-input { height: 54px; margin-right: 8px; margin-bottom: 0; padding: 18px 16px 14px; display: inline-block; font-family: 'Gotham', sans-serif; background-color: #f7f7f7; color: #000; font-size: 19px; letter-spacing: 1px; } } @media (min-width: 1024px) { html body .c-modal .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-submit { -webkit-box-flex: 1; -ms-flex: 1; -webkit-flex: 1; flex: 1; } } @media (min-width: 560px) { html body .c-modal .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-submit .moonray-form-input { padding: 16px 20px; font-size: 12px; letter-spacing: 3.3px; max-width: inherit; } } @media (min-width: 769px) { html body .c-modal .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-submit .moonray-form-input { max-width: 402px; padding: 20px 31px; font-size: 15px; letter-spacing: 3.3px; } } @media (min-width: 1024px) { html body .c-modal .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-submit .moonray-form-input { -webkit-box-flex: 1; -ms-flex: 1; -webkit-flex: 1; flex: 1; width: 100% !important; height: 54px; font-size: 12px; margin-top: 0; letter-spacing: 3.2px; padding: 0 !important; } } /* Overlay */ .c-modalPopup-overlay { position: fixed; top: 0; left: 0; z-index: 11; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .7); overflow: hidden; opacity: 0; visibility: hidden; transition: 300ms visibility ease, 300ms opacity ease; } .c-modalPopup-overlay.modal-open { opacity: 1; visibility: visible; transition: 300ms visibility ease, 300ms opacity ease; } .c-modalPopup-overlay.c-modalPopup--dark { background-color: rgba(0, 0, 0, .86); } .c-modalPopup-overlay.c-modalPopup--teal { background-color: rgba(83, 194, 185, .91); } .c-modalPopup-overlay.c-modalPopup--blue { background-color: rgba(218, 228, 237, .91); } /* Modal */ .c-modalPopup { position: fixed; top: 0; left: 0; z-index: 11; width: 100%; height: 100%; opacity: 0; visibility: hidden; overflow-x: hidden; overflow-y: auto; -webkit-backface-visibility: hidden; transition: 300ms visibility ease, 300ms opacity ease; } .c-modalPopup.modal-open { opacity: 1; visibility: visible; transition: 300ms visibility ease, 300ms opacity ease; } /* Modal wrap */ .c-modalPopup__wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0 20px; text-align: center; /* Vertical align */ } .c-modalPopup__wrap:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } /* Modal inner */ .c-modalPopup__inner { position: relative; z-index: 11; display: inline-block; width: 100%; margin: 0 auto; vertical-align: middle; text-align: left; } /* Iframe */ .c-modalPopup--iframe .c-modalPopup__wrap { padding-top: 44px; padding-bottom: 44px; } .c-modalPopup--iframe .c-modalPopup__inner { max-width: 1200px; } .c-modalPopup--iframe .c-modalPopup__close { top: -44px; color: #fff; } /* Iframe wrap */ .c-modalPopup__iframeWrap { width: 100%; height: 0; overflow: hidden; padding-top: 56.25%; } .c-modalPopup__iframeWrap iframe { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0 8px rgba(0, 0, 0, .6); background: #000; } /* Close button */ .c-modalPopup__close { position: absolute; top: 0; right: 0; width: 58px; height: 58px; padding: 0; margin: 0; background: none; border: 0; line-height: 58px; text-align: center; font-size: 40px; color: #000; cursor: pointer; } .c-modalPopup__close svg { width: 30px; } .c-modalPopup__close:after { display: none; } /* Standard popup styles */ .c-modalPopup-default { position: relative; margin: 40px auto; padding: 30px 20px; max-width: 750px; background-color: #fff; } @media (min-width: 640px) { .c-modalPopup-default { padding: 61px 30px 85px; } } @media (min-width: 1024px) { .c-modalPopup-default { padding-top: 50px; padding-bottom: 73px; } } .moonrayUILockerMessage, .moonrayUILockerOverlay { display: none !important; } .c-modalPopup-programs { position: relative; margin: 40px auto; padding: 40px 20px; max-width: 933px; font-family: 'Gotham', sans-serif; text-align: center; color: #fff; background-color: #e57f7d; } .c-modalPopup-programs .moonray-form-element-wrapper { max-width: 350px; margin: 10px auto; } .c-modalPopup-programs .moonray-form-element-wrapper.moonray-form-input-type-hidden { display: none; } .c-modalPopup-programs input[type='text'], .c-modalPopup-programs input[type='email'], .c-modalPopup-programs input[type='submit'] { width: 100%; height: 44px; padding: 15px 16px 13px; font-size: 14px; color: #000; border: 1px solid #fff; } .c-modalPopup-programs input[type='submit'] { font-weight: 700; text-transform: uppercase; text-align: center; letter-spacing: 3px; color: #fff; background-color: #b92685; } .c-modalPopup-programs input[type='submit']:hover, .c-modalPopup-programs input[type='submit']:focus { background-color: #981e6d; } @media (min-width: 640px) { .c-modalPopup-programs { padding-top: 116px; padding-bottom: 124px; } } @media (min-width: 1024px) { .c-modalPopup-programs .moonray-form-element-wrapper { display: inline-block; max-width: none; width: 222px; margin: 0 2px; } } .c-modalPopup-programs__title { margin: 0 0 27px; font-size: 44px; line-height: 1; } @media (min-width: 640px) { .c-modalPopup-programs__title { font-size: 72px; } } .c-modalPopup-programs__desc { max-width: 575px; margin: 0 auto 46px; font-size: 16px; line-height: 1.6; } @media (min-width: 640px) { .c-modalPopup-programs__desc { font-size: 20px; } } .c-modalPopup-programs__processing { margin-top: 40px; font-weight: 700; text-transform: uppercase; } /* Share modals */ .c-modalPopup-share { position: relative; margin: 40px auto; padding: 80px 35px 90px; max-width: 750px; color: #fff; font-family: 'Gotham', sans-serif; text-align: center; border: 1px solid #fff; border: 1px solid rgba(255, 255, 255, .3); } .c-modalPopup-share .c-modalPopup__close { color: #fff; } .c-modalPopup-share .c-modalPopup__close:hover, .c-modalPopup-share .c-modalPopup__close:focus { background-color: transparent; } .modal-share__heading { margin: 0 0 4px; font-family: 'Gotham', sans-serif; font-size: 26px; text-transform: none; line-height: 1.0; } @media (min-width: 640px) { .modal-share__heading { margin-bottom: 11px; font-size: 52px; } } .modal-share__desc { margin: 0 0 19px; font-family: 'Gotham', sans-serif; font-size: 13px; text-transform: none; } @media (min-width: 640px) { .modal-share__desc { margin-bottom: 25px; font-size: 24px; } } .modal-share__link { display: block; max-width: 271px; margin: 16px auto; position: relative; padding: 18px 13px 18px 51px; font-size: 11px; font-weight: 600; letter-spacing: 2px; line-height: 1.0; color: #fff; text-transform: uppercase; text-align: center; } .modal-share__link::before { content: ''; position: absolute; top: 0; left: 0; width: 38px; height: 100%; background-repeat: no-repeat; background-position: center; background-size: 20px; background-color: #fff; } .modal-share__link:hover, .modal-share__link:focus, .modal-share__link:visited, .modal-share__link:active { color: #fff; } .modal-share__link--fb { background-color: #3b5998; } .modal-share__link--fb::before { background-image: url('images/facebook.svg'); } .modal-share__link--fb:hover, .modal-share__link--fb:focus { background-color: #2d4373; } .modal-share__link--tw { background-color: #1da1f2; } .modal-share__link--tw::before { background-image: url('images/twitter.svg'); } .modal-share__link--tw:hover, .modal-share__link--tw:focus { background-color: #0c85d0; } /* Share modals */ .c-modalPopup-share2 { position: relative; overflow: hidden; max-width: 572px; margin: 40px auto; } .c-modalPopup-share2 .c-modalPopup__close {} @media (min-width: 1024px) { .c-modalPopup-share2 { max-width: 790px; padding-top: 40px; } } @media (min-width: 1024px) { .c-modalPopup-share2 .c-modalPopup__close { top: 40px; } } .c-modalPopup-share2__inner { padding: 33px 0 197px; color: #000; font-family: 'Gotham', sans-serif; text-align: center; border: 1px solid #f0f0f0; background-color: #fff; } @media (min-width: 640px) { .c-modalPopup-share2__inner { padding-right: 242px; padding-bottom: 74px; padding-left: 45px; } } @media (min-width: 1024px) { .c-modalPopup-share2__inner { padding: 55px 360px 61px 80px; } } .c-modalPopup-share2__heading { margin: 0 0 11px; font-family: 'Gotham', sans-serif; font-weight: 300; font-size: 22px; text-transform: none; line-height: 1.2; } @media (min-width: 640px) { .c-modalPopup-share2__heading { font-size: 38px; } } @media (min-width: 1024px) { .c-modalPopup-share2__heading { margin-bottom: 18px; font-size: 45px; } } .c-modalPopup-share2__desc { margin: 0 0 14px; font-size: 13px; text-transform: none; } @media (min-width: 640px) { .c-modalPopup-share2__desc { margin-bottom: 20px; font-size: 18px; } } @media (min-width: 1024px) { .c-modalPopup-share2__desc { margin-bottom: 30px; font-size: 17px; } } .c-modalPopup-share2__link { display: block; max-width: 190px; margin: 0 auto; position: relative; z-index: 1; padding: 11px 13px 11px 51px; font-size: 7px; font-weight: 600; letter-spacing: 2px; line-height: 1; color: #fff; text-transform: uppercase; text-align: center; } @media (min-width: 640px) { .c-modalPopup-share2__link { max-width: 271px; padding-top: 17px; padding-bottom: 17px; font-size: 11px; } } .c-modalPopup-share2__link::before { content: ''; position: absolute; top: 0; left: 0; width: 30px; height: 100%; background-repeat: no-repeat; background-position: center; background-size: 12px; background-color: #fff; } @media (min-width: 640px) { .c-modalPopup-share2__link::before { width: 47px; background-size: 20px; } } .c-modalPopup-share2__link:hover, .c-modalPopup-share2__link:focus, .c-modalPopup-share2__link:visited, .c-modalPopup-share2__link:active { color: #fff; } .c-modalPopup-share2__link--fb { margin-bottom: 10px; border: 1px solid #3b5998; background-color: #3b5998; } @media (min-width: 640px) { .c-modalPopup-share2__link--fb { margin-bottom: 16px; } } .c-modalPopup-share2__link--fb::before { background-image: url('../../images/facebook.svg'); } .c-modalPopup-share2__link--fb:hover, .c-modalPopup-share2__link--fb:focus { background-color: #2d4373; } .c-modalPopup-share2__link--tw { border: 1px solid #1da1f2; background-color: #1da1f2; } .c-modalPopup-share2__link--tw::before { background-image: url('../../images/twitter.svg'); } .c-modalPopup-share2__link--tw:hover, .c-modalPopup-share2__link--tw:focus { background-color: #0c85d0; } .c-modalPopup-share2__img { position: absolute; bottom: -163px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); max-width: 254px; } @media (min-width: 640px) { .c-modalPopup-share2__img { left: auto; right: -51px; bottom: -93px; -webkit-transform: none; transform: none; max-width: 325px; } } @media (min-width: 1024px) { .c-modalPopup-share2__img { right: 25px; bottom: auto; top: -18px; max-width: 403px; } } /* Signup modal */ .c-modalPopup-signup { position: relative; max-width: 1086px; margin: 40px auto; background-color: #65beb8; } .c-modalPopup-signup .c-modalPopup__close { color: #fff; } .c-modalPopup-signup__info { padding: 46px 20px 26px; font-family: 'Gotham', sans-serif; color: #fff; text-align: center; } @media (min-width: 640px) { .c-modalPopup-signup__info { padding: 102px 43px 57px; } } @media (min-width: 1024px) { .c-modalPopup-signup__info { padding: 92px 84px 72px; text-align: left; } } .c-modalPopup-signup__img { display: none; } @media (min-width: 1024px) { .c-modalPopup-signup__img { display: block; float: left; width: 260px; } } .c-modalPopup-signup__content {} @media (min-width: 1024px) { .c-modalPopup-signup__content { padding-top: 25px; padding-left: 309px; } } .c-modalPopup-signup__heading { font-size: 49px; font-weight: 300; line-height: 1; margin-bottom: 12px; } .c-modalPopup-signup__heading br {} @media (min-width: 640px) { .c-modalPopup-signup__heading { margin-bottom: 30px; font-size: 96px; } } @media (min-width: 1024px) { .c-modalPopup-signup__heading { margin-bottom: 17px; font-size: 76px; } } @media (min-width: 1024px) { .c-modalPopup-signup__heading br { display: none; } } .c-modalPopup-signup__desc { font-size: 14px; line-height: 2; } .c-modalPopup-signup__desc p { margin-bottom: 13px; } .c-modalPopup-signup__desc p:last-child { margin-bottom: 0; } .c-modalPopup-signup__desc strong { font-size: 16px; } .c-modalPopup-signup__desc br {} @media (min-width: 640px) { .c-modalPopup-signup__desc { font-size: 28px; } } @media (min-width: 1024px) { .c-modalPopup-signup__desc { max-width: 580px; font-size: 22px; } } @media (min-width: 640px) { .c-modalPopup-signup__desc p { margin-bottom: 34px; } } @media (min-width: 1024px) { .c-modalPopup-signup__desc p { margin-bottom: 23px; } } @media (min-width: 640px) { .c-modalPopup-signup__desc strong { font-size: 31px; } } @media (min-width: 1024px) { .c-modalPopup-signup__desc strong { font-size: 25px; } } @media (min-width: 1024px) { .c-modalPopup-signup__desc br { display: none; } } .c-modalPopup-signup__form { padding: 35px 20px 28px; background-color: #5baca7; text-align: center; } .c-modalPopup-signup__form .moonray-form-element-wrapper {} .c-modalPopup-signup__form input { display: block; width: 100%; height: 48px; padding: 16px 15px 13px; margin: 0 0 12px; font-family: 'Gotham', sans-serif; font-size: 14px; color: #000; text-transform: none; line-height: 1; border: 1px solid #fff; border-radius: 0; vertical-align: top; } .c-modalPopup-signup__form input:last-child { margin-bottom: 0; } .c-modalPopup-signup__form input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ letter-spacing: 1px; text-transform: none; color: #000; } .c-modalPopup-signup__form input::-moz-placeholder { /* Firefox 19+ */ letter-spacing: 1px; text-transform: none; color: #000; } .c-modalPopup-signup__form input:-ms-input-placeholder { /* IE 10+ */ letter-spacing: 1px; text-transform: none; color: #000; } .c-modalPopup-signup__form input:-moz-placeholder { /* Firefox 18- */ letter-spacing: 1px; text-transform: none; color: #000; } .c-modalPopup-signup__form input[type='submit'] { padding-top: 17px; padding-bottom: 17px; text-transform: uppercase; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 4px; background-color: #E57726; transition: background 300ms cubic-bezier(0.47, 0, 0.745, 0.715), color 300ms cubic-bezier(0.47, 0, 0.745, 0.715); } .c-modalPopup-signup__form input[type='submit']:hover { background-color: #B92685; } @media (min-width: 640px) { .c-modalPopup-signup__form { padding: 70px 43px 56px; } } @media (min-width: 1024px) { .c-modalPopup-signup__form { padding: 44px 0; } } @media (min-width: 1024px) { .c-modalPopup-signup__form .moonray-form-element-wrapper { float: none !important; width: auto !important; display: inline-block; vertical-align: top; } } @media (min-width: 640px) { .c-modalPopup-signup__form input { height: 57px; margin-bottom: 15px; padding: 18px 22px 15px; font-size: 19px; } } @media (min-width: 1024px) { .c-modalPopup-signup__form input { height: 54px; width: 355px; margin: 0 3px; } } @media (min-width: 640px) { .c-modalPopup-signup__form input[type='submit'] { padding-top: 21px; padding-bottom: 21px; font-size: 13px; } } @media (min-width: 1024px) { .c-modalPopup-signup__form input[type='submit'] { width: auto; padding-right: 44px; padding-left: 44px; } } /* ontraport css style overrides */ .c-modalPopup-signup__form .moonray-form-label-pos-stacked .moonray-form-input, html body .c-modalPopup-signup__form .moonray-form-label-pos-stacked .moonray-form-input-type-text .moonray-form-input { width: 100% !important; } @media (min-width: 1024px) { .c-modalPopup-signup__form .moonray-form-label-pos-stacked .moonray-form-input, html body .c-modalPopup-signup__form .moonray-form-label-pos-stacked .moonray-form-input-type-text .moonray-form-input { width: 355px !important; } } .c-modalPopup-signup__form .moonray-form input, .c-modalPopup-signup__form .moonray-form textarea { margin: 0 0 12px !important; } @media (min-width: 640px) { .c-modalPopup-signup__form .moonray-form input, .c-modalPopup-signup__form .moonray-form textarea { margin-bottom: 15px !important; } } @media (min-width: 1024px) { .c-modalPopup-signup__form .moonray-form input, .c-modalPopup-signup__form .moonray-form textarea { margin: 0 3px !important; } } .c-modalPopup-signup__form .moonray-form input[type='submit'] { margin-bottom: 0 !important; } html body .c-modalPopup-signup__form .moonray-form .moonray-form-input-type-submit .moonray-form-input { width: 100% !important; } @media (min-width: 1024px) { html body .c-modalPopup-signup__form .moonray-form .moonray-form-input-type-submit .moonray-form-input { width: auto !important; } } .c-modalPopup-freebies { max-width: 857px; padding: 42px 17px 25px; color: #fff; background-color: #54c3ba; } .c-modalPopup-freebies .c-modalPopup__close { width: 56px; height: 56px; padding: 13px; } @media (min-width: 700px) { .c-modalPopup-freebies { padding: 45px 55px 56px; } } .c-freebiesModal { text-align: center; } .c-freebiesModal label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .c-freebiesModal input[type="text"], .c-freebiesModal input[type="email"], .c-freebiesModal input[type="submit"] { display: block; width: 100%; font-family: 'Gotham', sans-serif; line-height: 1; } .c-freebiesModal input[type="text"], .c-freebiesModal input[type="email"] { height: 45px; padding: 14px 15px; font-size: 15px; font-weight: 300; color: #222; } .c-freebiesModal input[type="submit"] { height: 49px; padding: 18px 15px 16px; font-size: 13px; font-weight: 700; letter-spacing: 2.6px; text-transform: uppercase; color: #fff; border: 1px solid #fff; background-color: #e57726; } .c-freebiesModal .moonray-form-element-wrapper { margin-bottom: 10px; } .c-freebiesModal .moonray-form-input-type-hidden { display: none; } .c-freebiesModal .processing { font-family: 'Gotham', sans-serif; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #fff; } .c-freebiesModal__progress { margin-bottom: 45px; } .c-freebiesModal__progress > span { display: inline-block; margin-bottom: 7px; font-size: 12px; } .c-freebiesModal__progressBar { height: 4px; background-color: #fff; border-radius: 4px; } .c-freebiesModal__progressBar span { display: block; height: 100%; background-color: #c6fffa; border-radius: 4px; } .c-freebiesModal__heading { margin-bottom: 20px; font-family: 'Gotham', sans-serif; font-size: 24px; font-weight: 300; letter-spacing: 1px; line-height: 1.4; } @media (min-width: 700px) { .c-freebiesModal__heading { font-size: 36px; } } .c-freebiesModal__heading--complete { margin: 90px 0 0; font-size: 80px; line-height: 1.2; } @media (min-width: 700px) { .c-freebiesModal__heading--complete { margin-top: 160px; font-size: 86px; } } .c-freebiesModal__desc { max-width: 460px; margin: 0 auto 25px; font-size: 14px; line-height: 1.9; } @media (min-width: 700px) { .c-freebiesModal__desc { font-size: 16px; } } .c-freebiesModal__desc--complete { max-width: none; margin: 0 0 90px; } @media (min-width: 700px) { .c-freebiesModal__desc--complete { margin-bottom: 182px; font-size: 18px; } } .c-freebiesModal__form { max-width: 554px; margin: 0 auto; } .c-freebiesModal__foot { margin-top: 12px; font-size: 10px; font-style: italic; line-height: 1.8; } .c-freebiesModal__foot p { margin-bottom: 12px; } .c-freebiesModal__foot p:last-child { margin-bottom: 0; } /* Freebies spreadsheet modal tweaks */ .c-modalPopup-freebies--alt { color: #000; background-color: #dce4ec; } .c-modalPopup-freebies--alt .c-modalPopup__close svg { fill: #000; } .c-modalPopup-freebies--alt .c-freebiesModal__progressBar span { background-color: #b9cadb; } .c-modalPopup-freebies--alt .c-freebiesModal__heading { max-width: 710px; margin-right: auto; margin-left: auto; } .c-modalPopup-freebies--alt .c-freebiesModal input[type="submit"] { border-color: #000; background-color: #000; } .c-modalPopup-freebies--alt .c-freebiesModal .processing { color: #000; } .moonrayUILockerMessage, .moonrayUILockerOverlay { display: none !important; } .c-webinarModal { font-family: 'Gotham', sans-serif; text-align: center; } .c-webinarModal h2, .c-webinarModal h3, .c-webinarModal h4 { margin: 0; font-weight: 400; line-height: 1.5; } .c-webinarModal h2 { margin-bottom: 10px; font-size: 23px; } .c-webinarModal h3 { margin-bottom: 14px; font-size: 17px; } .c-webinarModal h4 { margin-bottom: 22px; font-size: 12px; } .c-webinarModal p { margin: 0; font-size: 12px; line-height: 1.9; } /* Form fields */ .c-webinarModal form { max-width: 450px; margin: 8px auto 0; text-align: left; } .c-webinarModal form .opf-error__icon img { position: relative; top: 2px; display: block; } .c-webinarModal form.wide { max-width: 502px; } .c-webinarModal .checkbox-field { position: relative; margin-bottom: 12px; padding: 10px; background-color: #f8f8f8; } .c-webinarModal .checkbox-field:before { content: ''; display: table; } .c-webinarModal .checkbox-field:after { content: ''; display: table; clear: both; } .c-webinarModal .checkbox-field input[type="checkbox"] { position: absolute; top: 12px; left: 10px; } .c-webinarModal .checkbox-field input[type="checkbox"] + label { float: left; padding-left: 21px; margin: 0; } .c-webinarModal .checkbox-field textarea { background-color: #fff; margin: 0; } .c-webinarModal .textarea-wrap { float: left; width: 100%; padding: 10px 21px 20px; } .c-webinarModal .local-time { margin-top: -9px; margin-bottom: 20px; font-size: 11px; } .c-webinarModal label { font-size: 10px; line-height: 1.5; } .c-webinarModal input[type="text"], .c-webinarModal input[type="email"] {} .c-webinarModal input[type="text"]::-webkit-input-placeholder, .c-webinarModal input[type="email"]::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #000; } .c-webinarModal input[type="text"]::-moz-placeholder, .c-webinarModal input[type="email"]::-moz-placeholder { /* Firefox 19+ */ color: #000; } .c-webinarModal input[type="text"]:-ms-input-placeholder, .c-webinarModal input[type="email"]:-ms-input-placeholder { /* IE 10+ */ color: #000; } .c-webinarModal input[type="text"]:-moz-placeholder, .c-webinarModal input[type="email"]:-moz-placeholder { /* Firefox 18- */ color: #000; } .c-webinarModal select, .c-webinarModal input[type="text"], .c-webinarModal input[type="email"], .c-webinarModal textarea { display: block; width: 100%; height: 39px; padding: 8px 16px; margin: 0 0 12px; font-family: 'Gotham', sans-serif; font-size: 11px; line-height: 1; color: #000; border: 1px solid #a8a8a8; border-radius: 0; background-color: #f8f8f8; } .c-webinarModal select[multiple] { height: auto; } .c-webinarModal textarea { resize: none; border: 0; height: 148px; } .c-webinarModal .c-webinarModal__button, .c-webinarModal input[type="submit"] { display: block; width: 100%; max-width: 353px; margin: 22px auto 0; padding: 15px 20px; font-family: 'Gotham', sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; color: #fff; border-color: #f57000; background-color: #f57000; } .c-webinarModal .c-webinarModal__button.large, .c-webinarModal input[type="submit"].large { max-width: none; } .c-webinarModal .c-webinarModal__button:hover, .c-webinarModal .c-webinarModal__button:focus, .c-webinarModal input[type="submit"]:hover, .c-webinarModal input[type="submit"]:focus { border-color: #c25900; background-color: #c25900; } .c-webinarModal .processing { margin-top: 30px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; } .c-webinarModal .error { font-family: 'GalaxieCopernicus', serif; font-size: 12px; font-style: italic; text-align: center; color: #ff0000; } @media (min-width: 640px) { .c-webinarModal h2 { font-size: 45px; } } @media (min-width: 1024px) { .c-webinarModal h2 { margin-bottom: 24px; font-size: 40px; } } @media (min-width: 640px) { .c-webinarModal h3 { margin-bottom: 20px; font-size: 32px; } } @media (min-width: 1024px) { .c-webinarModal h3 { font-size: 28px; } } @media (min-width: 640px) { .c-webinarModal h4 { margin-bottom: 34px; font-size: 24px; } } @media (min-width: 640px) { .c-webinarModal p { font-size: 22px; line-height: 1.6; letter-spacing: -0.4px; } } @media (min-width: 1280px) { .c-webinarModal p { padding: 0 70px; } } @media (min-width: 640px) { .c-webinarModal .checkbox-field input[type="checkbox"] { top: 15px; } } @media (min-width: 640px) { .c-webinarModal .local-time { margin-bottom: 37px; font-size: 16px; } } @media (min-width: 1024px) { .c-webinarModal .local-time { margin-bottom: 24px; font-size: 14px; } } @media (min-width: 640px) { .c-webinarModal label { font-size: 16px; } } @media (min-width: 640px) { .c-webinarModal select, .c-webinarModal input[type="text"], .c-webinarModal input[type="email"], .c-webinarModal textarea { font-size: 20px; } } @media (min-width: 1024px) { .c-webinarModal select, .c-webinarModal input[type="text"], .c-webinarModal input[type="email"], .c-webinarModal textarea { font-size: 18px; } } @media (min-width: 640px) { .c-webinarModal .c-webinarModal__button, .c-webinarModal input[type="submit"] { padding-top: 19px; padding-bottom: 19px; font-size: 16px; max-width: 270px; } } @media (min-width: 640px) { .c-webinarModal .c-webinarModal__button.large, .c-webinarModal input[type="submit"].large { padding-top: 30px; padding-bottom: 30px; font-size: 23px; } } @media (min-width: 1024px) { .c-webinarModal .c-webinarModal__button.large, .c-webinarModal input[type="submit"].large { padding-top: 25px; padding-bottom: 25px; font-size: 19px; } } /* Step 1 only */ .c-webinarModal--step1 h2 { margin-bottom: 18px; } .c-webinarModal--step1 h2 br {} .c-webinarModal--step1 h4 { margin-bottom: 8px; font-size: 14px; } @media (min-width: 640px) { .c-webinarModal--step1 h2 { margin-bottom: 40px; } } @media (min-width: 1024px) { .c-webinarModal--step1 h2 { max-width: 630px; margin-right: auto; margin-left: auto; } } @media (min-width: 640px) { .c-webinarModal--step1 h2 br { display: none; } } @media (min-width: 640px) { .c-webinarModal--step1 h4 { margin-bottom: 13px; font-size: 28px; } } @media (min-width: 1024px) { .c-webinarModal--step1 h4 { font-size: 24px; } } /* Step 2 only */ .c-webinarModal--step2 h2 span { display: block; font-size: 31px; } .c-webinarModal--step2 input[type="submit"] {} @media (min-width: 640px) { .c-webinarModal--step2 h2 span { font-size: 60px; } } @media (min-width: 1024px) { .c-webinarModal--step2 h2 span { display: inline; font-size: 40px; } } @media (min-width: 1024px) { .c-webinarModal--step2 input[type="submit"] { padding-top: 15px; padding-bottom: 15px; font-size: 12px; } } .c-webinarModal__title { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; } @media (min-width: 640px) { .c-webinarModal__title { font-size: 16px; } } @media (min-width: 1024px) { .c-webinarModal__title { font-size: 13px; } } .c-webinarModal__date { margin-bottom: 21px; font-size: 14px; } @media (min-width: 640px) { .c-webinarModal__date { margin-bottom: 38px; font-size: 28px; } } @media (min-width: 1024px) { .c-webinarModal__date { margin-bottom: 30px; font-size: 24px; } } /* Importing base settings */ /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ .c-hamburger { text-indent: -9999px; width: 26px; height: 22px; position: relative; -webkit-transform: rotate(0deg); transform: rotate(0deg); transition: 0.5s ease-in-out; cursor: pointer; background-color: transparent; } .c-hamburger.is-open .c-hamburger__patty:nth-child(1) { top: 8px; -webkit-transform: rotate(135deg); transform: rotate(135deg); } .c-hamburger.is-open .c-hamburger__patty:nth-child(2) { opacity: 0; } .c-hamburger.is-open .c-hamburger__patty:nth-child(3) { top: 8px; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); } .c-hamburger.c-hamburger--thick .c-hamburger__patty { height: 2px; transition: color 250ms ease; } .c-hamburger--bigger { width: 20px; height: 17px; } .c-hamburger--bigger .c-hamburger__patty {} .c-hamburger--bigger .c-hamburger__patty:nth-child(1) {} .c-hamburger--bigger .c-hamburger__patty:nth-child(2) { top: 8px; } .c-hamburger--bigger .c-hamburger__patty:nth-child(3) { top: 16px; } @media (min-width: 640px) { .c-hamburger--bigger { width: 22px; height: 19px; } } @media (min-width: 1280px) { .c-hamburger--bigger { width: 20px; height: 17px; } } @media (min-width: 1440px) { .c-hamburger--bigger { width: 22px; height: 19px; } } .c-hamburger--bigger.is-open .c-hamburger__patty:nth-child(1) {} .c-hamburger--bigger.is-open .c-hamburger__patty:nth-child(3) {} @media (min-width: 640px) { .c-hamburger--bigger.is-open .c-hamburger__patty:nth-child(1) {} } @media (min-width: 1280px) { .c-hamburger--bigger.is-open .c-hamburger__patty:nth-child(1) { top: 8px; -webkit-transform: rotate(135deg); transform: rotate(135deg); } } @media (min-width: 640px) { .c-hamburger--bigger.is-open .c-hamburger__patty:nth-child(3) {} } @media (min-width: 1280px) { .c-hamburger--bigger.is-open .c-hamburger__patty:nth-child(3) { top: 8px; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); } } @media (min-width: 640px) { .c-hamburger--bigger .c-hamburger__patty:nth-child(1) {} } @media (min-width: 1280px) { .c-hamburger--bigger .c-hamburger__patty:nth-child(1) { top: 0px; } } @media (min-width: 640px) { .c-hamburger--bigger .c-hamburger__patty:nth-child(2) { top: 9px; } } @media (min-width: 1280px) { .c-hamburger--bigger .c-hamburger__patty:nth-child(2) { top: 8px; } } @media (min-width: 1440px) { .c-hamburger--bigger .c-hamburger__patty:nth-child(2) { top: 9px; } } @media (min-width: 640px) { .c-hamburger--bigger .c-hamburger__patty:nth-child(3) { top: 18px; } } @media (min-width: 1280px) { .c-hamburger--bigger .c-hamburger__patty:nth-child(3) { top: 16px; } } @media (min-width: 1440px) { .c-hamburger--bigger .c-hamburger__patty:nth-child(3) { top: 18px; } } .c-hamburger__patty { display: block; position: absolute; height: 1px; width: 100%; background: #000; opacity: 1; left: 0; -webkit-transform: rotate(0deg); transform: rotate(0deg); transition: all 0.5s ease-in-out; } .c-plyrHeader__videoInfo .c-hamburger__patty { background: #fff; } .c-hamburger__patty:nth-child(1) { top: 0px; } .c-hamburger__patty:nth-child(2) { top: 8px; } .c-hamburger__patty:nth-child(3) { top: 16px; } .c-hamburger__patty--black { background: #2f2e2d; } /* Importing base settings */ /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ .c-playIcon .circle { fill: #fff; stroke-miterlimit: 10; stroke-width: 6px; stroke: #fff; transition: all 400ms ease; } .c-playIcon .triangle { fill: #4D4D4D; transition: all 400ms ease; } .c-playIcon--alt .circle { fill: rgba(0, 0, 0, .4); stroke-miterlimit: 10; stroke-width: 6px; stroke: #fff; transition: all 400ms ease; } .c-playIcon--alt .triangle { fill: #fff; transition: all 400ms ease; } /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; outline: none; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { /* display: block; */ } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } @charset 'UTF-8'; /* Slider */ .slick-loading .slick-list {} /* Icons */ @font-face { font-family: 'slick'; font-weight: 400; font-style: normal; } /* Arrows */ .slick-prev, .slick-next { font-size: 0; line-height: 0; position: absolute; top: 50%; display: block; width: 20px; height: 20px; padding: 0; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); cursor: pointer; color: transparent; border: none; outline: none; background: transparent; } .slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { color: transparent; outline: none; background: transparent; } .slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; } .slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: .25; } .slick-prev:before, .slick-next:before { font-family: 'slick'; font-size: 20px; line-height: 1; opacity: .75; color: white; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-prev { left: -25px; } [dir='rtl'] .slick-prev { right: -25px; left: auto; } .slick-prev:before { content: '←'; } [dir='rtl'] .slick-prev:before { content: '→'; } .slick-next { right: -25px; } [dir='rtl'] .slick-next { right: auto; left: -25px; } .slick-next:before { content: '→'; } [dir='rtl'] .slick-next:before { content: '←'; } /* Dots */ .slick-dotted.slick-slider { margin-bottom: 30px; } .slick-dots { position: absolute; bottom: -25px; display: block; width: 100%; padding: 0; margin: 0; list-style: none; text-align: center; } .slick-dots li { position: relative; display: inline-block; width: 20px; height: 20px; margin: 0 5px; padding: 0; cursor: pointer; } .slick-dots li button { font-size: 0; line-height: 0; display: block; width: 20px; height: 20px; padding: 5px; cursor: pointer; color: transparent; border: 0; outline: none; background: transparent; } .slick-dots li button:hover, .slick-dots li button:focus { outline: none; } .slick-dots li button:before { font-family: 'slick'; font-size: 46px; line-height: 20px; position: absolute; top: 0; left: 0; width: 20px; height: 20px; content: '•'; text-align: center; opacity: 1; color: #a0a0a0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-dots li.slick-active button:before { color: #ac3c86; } /* Importing base settings */ /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ .c-testimonials {} @media (min-width: 640px) { .c-testimonials {} } @media (min-width: 1024px) { .c-testimonials {} } @media (min-width: 1280px) { .c-testimonials {} } .c-testimonials__indv { background-color: #fff; /* Responsive Sizing Custom */ padding: 38px 36px; padding: calc(38px + 48 * ((100vw - 320px) / 320)) calc(36px + 24 * ((100vw - 320px) / 320)) calc(38px + 22 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-testimonials__indv { padding: 86px 60px 60px; } } @media (min-width: 1024px) { .c-testimonials__indv { /* Responsive Sizing Custom */ padding: 50px 0 40px; padding: calc(50px + 22 * ((100vw - 1024px) / 416)) 0 calc(40px + 32 * ((100vw - 1024px) / 416)); } .c-testimonials__indv .c-testimonials__contentBox { max-width: 490px; max-width: calc(490px + 190 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-testimonials__indv { padding: 72px 0; } .c-testimonials__indv .c-testimonials__contentBox { max-width: 680px; } } .c-testimonials__indv:nth-child(odd) { background-color: #f7f7f7; } .c-testimonials__indv--one {} @media screen and (min-width: 1024px) and (max-width: 1440px) { .c-testimonials__indv--one { /* Responsive Sizing Custom */ padding: 50px 0 40px; padding: calc(50px + 22 * ((100vw - 1024px) / 416)) 0 calc(40px + 32 * ((100vw - 1024px) / 416)); } .c-testimonials__indv--one .c-testimonials__contentBox { max-width: 504px; max-width: calc(504px + 191 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-testimonials__indv--one .c-testimonials__contentBox { max-width: 695px; } } .c-testimonials__indv--two {} @media screen and (min-width: 1024px) and (max-width: 1440px) { .c-testimonials__indv--two { /* Responsive Sizing Custom */ padding: 50px 0 40px; padding: calc(50px + 22 * ((100vw - 1024px) / 416)) 0 calc(40px + 32 * ((100vw - 1024px) / 416)); } .c-testimonials__indv--two .c-testimonials__contentBox { max-width: 540px; max-width: calc(540px + 210 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-testimonials__indv--two .c-testimonials__contentBox { max-width: 750px; } } .c-testimonials__contentBox { max-width: 680px; margin: 0 auto; text-align: center; } @media (min-width: 640px) { .c-testimonials__contentBox {} } @media (min-width: 1024px) { .c-testimonials__contentBox {} } @media (min-width: 1440px) { .c-testimonials__contentBox { max-width: 680px; margin: 0 auto; text-align: center; } } .c-testimonials__text { display: block; margin-bottom: 12px; word-break: keep-all; font-size: 12px; /* Responsive Sizing Custom */ margin-bottom: 12px; margin-bottom: calc(12px + 12 * ((100vw - 320px) / 320)); letter-spacing: calc(.1px + .1* ((100vw - 320px) / 320)); line-height: calc(24px + 24 * ((100vw - 320px) / 320)); font-size: calc(12px + 12 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-testimonials__text { font-size: 12px; margin-bottom: 17px; line-height: 2.45; letter-spacing: 0; } } @media (min-width: 1024px) { .c-testimonials__text { /* Responsive Sizing Custom */ margin-bottom: 21px; margin-bottom: calc(21px + 15 * ((100vw - 1024px) / 416)); font-size: calc(11px + 5 * ((100vw - 1024px) / 416)); line-height: calc(27.5px + 11.7 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-testimonials__text { margin-bottom: 36px; line-height: 2.45; font-size: 16px; } } .c-testimonials__photo { display: block; margin: 0 auto 8px; /* Responsive Sizing Custom */ margin-bottom: 8px; margin-bottom: calc(8px + 10 * ((100vw - 320px) / 320)); width: 42px; height: 42px; width: calc(42px + 41 * ((100vw - 320px) / 320)); height: calc(42px + 41 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-testimonials__photo { width: 83px; height: 83px; margin-bottom: 18px; } } @media (min-width: 1024px) { .c-testimonials__photo { /* Responsive Sizing Custom */ margin-bottom: 12px; margin-bottom: calc(12px + 6 * ((100vw - 1024px) / 416)); width: 60px; height: 60px; width: calc(60px + 23 * ((100vw - 1024px) / 416)); height: calc(60px + 23 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-testimonials__photo { margin: 0 auto 18px; width: 83px; height: 83px; } } .c-testimonials__photo--circular { border-radius: 50%; } .c-testimonials__byLine { display: block; text-transform: uppercase; font-weight: 600; font-family: 'Gotham', sans-serif; color: #ca0089; /* Responsive Typography */ font-size: calc(9px + 3 * ((100vw - 320px) / 320)); letter-spacing: calc(.8px + 1.1 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-testimonials__byLine { font-size: 12px; letter-spacing: 1.9px; } } @media (min-width: 1024px) { .c-testimonials__byLine { /* Responsive Sizing Custom */ margin-bottom: 0px; margin-bottom: calc(0px + 8px * ((100vw - 1024px) / 1024)); font-size: calc(9px + 3px * ((100vw - 1024px) / 1024)); letter-spacing: calc(1px + .9px * ((100vw - 1024px) / 1024)); } } @media (min-width: 1440px) { .c-testimonials__byLine { letter-spacing: 1.9px; font-size: 12px; } } .c-testimonials__location { font-style: italic; font-size: responsive 11px 14px; font-range: 320px 640px; letter-spacing: .2px; margin-bottom: 12px; } @media (min-width: 640px) { .c-testimonials__location { font-size: 14px; } } @media (min-width: 1024px) { .c-testimonials__location { /* Responsive Sizing Custom */ margin-top: -5px; margin-top: calc(-5px + 5 * ((100vw - 1024px) / 416)); font-size: calc(11px + 3 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-testimonials__location { font-size: 14px; margin-top: 0; } } /* Importing default settings */ /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ .c-videoModal { display: none; position: fixed; max-width: 1280px; opacity: 0; width: 100%; left: 50%; top: 50%; -webkit-transform: translate(-50%, calc(-50% + 30px)); transform: translate(-50%, calc(-50% + 30px)); z-index: 11; transition: opacity 300ms cubic-bezier(0.47, 0, 0.745, 0.715), -webkit-transform 300ms cubic-bezier(0.47, 0, 0.745, 0.715); transition: transform 300ms cubic-bezier(0.47, 0, 0.745, 0.715), opacity 300ms cubic-bezier(0.47, 0, 0.745, 0.715); transition: transform 300ms cubic-bezier(0.47, 0, 0.745, 0.715), opacity 300ms cubic-bezier(0.47, 0, 0.745, 0.715), -webkit-transform 300ms cubic-bezier(0.47, 0, 0.745, 0.715); } @media (min-width: 640px) { .c-videoModal { width: 70%; } } .c-videoModal.is-opening { display: inline-block; } .c-videoModal.is-open { transition: opacity 300ms cubic-bezier(0.47, 0, 0.745, 0.715), -webkit-transform 300ms cubic-bezier(0.47, 0, 0.745, 0.715); transition: transform 300ms cubic-bezier(0.47, 0, 0.745, 0.715), opacity 300ms cubic-bezier(0.47, 0, 0.745, 0.715); transition: transform 300ms cubic-bezier(0.47, 0, 0.745, 0.715), opacity 300ms cubic-bezier(0.47, 0, 0.745, 0.715), -webkit-transform 300ms cubic-bezier(0.47, 0, 0.745, 0.715); opacity: 1; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .c-videoModal__container {} .c-videoModal__closeContainer { position: absolute; top: -20px; /* right: 12px; */ right: 0; width: 12px; z-index: 1; top: calc(-20px - 20 * ((100vw - 320px) / 320)); /* right: calc(12px + 6 * ((100vw - 320px) / 320)); */ width: calc(12px + 18 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-videoModal__closeContainer { top: -40px; right: 18px; right: 0; width: 30px; } } .c-videoModal__closeContainer:hover { cursor: pointer; } .c-videoModal__close { fill: #fff; font-family: "Helvetica Neue"; font-weight: 300; width: 12px; stroke: #fff; stroke-width: 1px; /* Responsive Sizing Custom */ width: 12px; width: calc(12px + 18 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-videoModal__close { width: 30px; } } .c-videoModal__container { position: relative; padding-bottom: 56.25%; height: 0; margin-top: 60px; max-width: 100%; } .c-videoModal__container iframe, .c-videoModal__container object, .c-videoModal__container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .c-videoModal__video {} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* IE10+ specific styles go here */ .c-videoModal__closeContainer {} .c-plyrHeader__playButton { top: 0% !important; } } @media screen and (-ms-high-contrast: active) and (min-width: 640px), (-ms-high-contrast: none) and (min-width: 640px) { .c-videoModal__closeContainer { top: -92px !important; } } @media screen and (-ms-high-contrast: active) and (min-width: 640px), (-ms-high-contrast: none) and (min-width: 640px) { .c-plyrHeader__playButton { top: 19% !important; } } /* Importing default settings */ /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ .c-videoBanner { position: relative; } .c-videoBanner__videoContainer {} .c-videoBanner__video { display: none; position: absolute; width: auto; height: 100%; min-width: 100%; min-height: 56.25vw; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media (min-width: 1024px) { .c-videoBanner__video { display: block; } } @media screen and (max-height: 772px) { .c-videoBanner__video { width: auto; } } @media screen and (min-width: 1920px) { .c-videoBanner__video {} } .c-videoBanner__videoMobileBG { display: block; height: 100vh; background-color: transparent; background-repeat: no-repeat; background-size: cover; background-position: center; background-image: url('images/optin/optin-header-mobile-bg.jpg'); } @media screen and (max-height: 772px) and (orientation: landscape) { .c-videoBanner__videoMobileBG { height: 800px; } } @media (min-width: 640px) { .c-videoBanner__videoMobileBG { background-image: url('images/optin/optin-header-mobile-bg.jpg'); } } @media (min-width: 1024px) { .c-videoBanner__videoMobileBG { display: none; } } .c-videoBanner__overlay { position: absolute; top: 0; right: 0; left: 0; height: 100vh; opacity: .2; background-color: #000; } @media screen and (max-height: 550px) and (orientation: landscape) { .c-videoBanner__overlay { height: 800px; } } /* Importing base settings */ /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ .c-vidOptin { /* min-height: 770px; */ height: 100vh; position: relative; } @media screen and (max-height: 550px) and (orientation: landscape) and (max-width:800px) { .c-vidOptin { height: 800px; } } .c-vidOptin__container { background-size: cover; display: block; overflow: hidden; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; min-width: 100%; height: 100%; min-height: 100%; } @media (min-width: 1024px) { .c-vidOptin__container { height: 100vh; min-height: 0; } } .c-vidOptin__contentSection { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; position: absolute; z-index: 1; left: 0; right: 0; width: 100%; height: 100%; margin: 0 auto; text-align: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; color: #fff; padding-top: 56px; } @media screen(min-width: 640px) { .c-vidOptin__contentSection { /* justify-content: flex-start; */ } } @media (min-width: 1024px) { .c-vidOptin__contentSection { -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; /* Responsive Custom */ margin-bottom: 39px; margin-bottom: calc(39px + 16 * ((100vw - 1024px) / 416)); } } @media screen and (min-height: 551px) and (max-height: 800px) and (min-width: 801px) { .c-vidOptin__contentSection { padding-top: 56px; } } @media (min-width: 1440px) { .c-vidOptin__contentSection { margin-bottom: 55px; } } .c-vidOptin__tagline { padding: 7px 10px 5px; font-family: 'Gotham', sans-serif; font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 5px; color: #fff; background-color: #b92685; } @media (min-width: 640px) { .c-vidOptin__tagline { padding: 16px 28px 14px; font-size: 16px; } } .c-vidOptin__title { font-weight: 500; font-family: 'Gotham', sans-serif; /* Responsive Custom */ margin: 0 -3px 22px -3px; margin-right: calc(-3px - 9 * ((100vw - 320px) / 320)); margin-bottom: calc(22px + 18 * ((100vw - 320px) / 320)); margin-left: calc(-3px - 9 * ((100vw - 320px) / 320)); /* Responsive Typography */ font-size: calc(24px + 27 * ((100vw - 320px) / 320)); letter-spacing: calc(1px - 1 * ((100vw - 320px) / 320)); line-height: calc(31.2px + 33.56999999999999 * ((100vw - 320px) / 320)); } .c-vidOptin__title.c-vidOptin__title--large {} @media screen and (max-width: 639px) { .c-vidOptin__title.c-vidOptin__title--large { font-size: calc(23px + 225 * ((100vw - 320px) / 320)); } } @media (min-width: 640px) { .c-vidOptin__title { margin: 0 -12px 40px -12px; font-size: 51px; line-height: 64.77px; letter-spacing: 0; } } .c-vidOptin__title.c-vidOptin__title--large {} @media screen and (min-width: 640px) and (max-width: 1023px) { .c-vidOptin__title.c-vidOptin__title--large { font-size: 49px; } } @media (min-width: 1024px) { .c-vidOptin__title { letter-spacing: 1.7px; /* Responsive Custom */ width: 836px; width: calc(836px + 214 * ((100vw - 1024px) / 416)); margin: 36px 0 30px; margin: calc(36px + 20 * ((100vw - 1024px) / 416)) 0 calc(30px + 6 * ((100vw - 1024px) / 416)); /* Responsive Typography */ font-size: calc(51px + 21 * ((100vw - 1024px) / 416)); line-height: calc(64.77px + 28.230000000000004 * ((100vw - 1024px) / 416)); } .c-vidOptin__title.c-vidOptin__title--med { font-size: calc(49px + 18 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-vidOptin__title { width: 1050px; margin-top: 56px; margin-bottom: 36px; font-size: 72px; line-height: 93px; } } .c-vidOptin__title.c-vidOptin__title--med {} @media (min-width: 1440px) { .c-vidOptin__title.c-vidOptin__title--med { font-size: 67px; } } .c-vidOptin__title--tag { margin-top: 7px; } .c-vidOptin__playBox { /* Responsive Custom */ margin-bottom: 20px; margin-bottom: calc(20px + 37 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-vidOptin__playBox { margin-bottom: 57px; } } @media (min-width: 1024px) { .c-vidOptin__playBox { /* Responsive Custom */ margin-bottom: 37px; margin-bottom: calc(37px + 13 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-vidOptin__playBox { margin-bottom: 50px; } } .c-vidOptin__playButton { opacity: 1; width: 50%; transition: opacity 300ms cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0,0,0); /* Responsive Custom */ width: 54px; height: 54px; width: calc(54px + 54 * ((100vw - 320px) / 320)); height: calc(54px + 54 * ((100vw - 320px) / 320)); margin-bottom: 3px; margin: calc(3px + 6 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-vidOptin__playButton { width: 108px; height: 108px; margin-bottom: 9px; } } @media (min-width: 1024px) { .c-vidOptin__playButton { /* Responsive Custom */ width: 54px; height: 54px; width: calc(54px + 21 * ((100vw - 1024px) / 416)); height: calc(54px + 21 * ((100vw - 1024px) / 416)); margin-bottom: 9px; margin: calc(9px + 7 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-vidOptin__playButton { width: 75px; height: 75px; margin-bottom: 16px; } } .c-vidOptin__playButton:hover { opacity: .8; cursor: pointer; } .c-vidOptin__playText { display: block; font-weight: 300; font-family: 'GalaxieCopernicus', serif; font-style: italic; color: #fff; letter-spacing: .3px; line-height: 1.6; /* Responsive Typography */ font-size: calc(11px + 2 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-vidOptin__playText { font-size: 13px; } } @media (min-width: 1024px) { .c-vidOptin__playText { line-height: 1.5; /* Responsive Typography */ font-size: calc(9px + 3 * ((100vw - 1024px) / 416)); } } @media (min-width: 1280px) { .c-vidOptin__playText { font-size: 12px; } } .c-vidOptin__text { display: block; font-size: 19px; font-weight: 300; letter-spacing: 1px; font-family: 'GalaxieCopernicus', serif; /* Responsive Custom */ margin-bottom: 10px; margin-bottom: calc(10px + 12 * ((100vw - 320px) / 320)); font-size: calc(11px + 5 * ((100vw - 320px) / 320)); letter-spacing: calc(.3px + .2 * ((100vw - 320px) / 320)); line-height: calc(16.5px + 15.799999999999997 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-vidOptin__text { margin-bottom: 22px; font-size: 19px; letter-spacing: .5px; line-height: 1.7; } } @media (min-width: 1024px) { .c-vidOptin__text { /* Responsive Custom */ margin-bottom: 14px; margin-bottom: calc(14px + 9 * ((100vw - 1024px) / 416)); font-size: calc(14px + 5 * ((100vw - 1024px) / 416)); letter-spacing: calc(.4px + .1 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-vidOptin__text { margin-bottom: 23px; font-size: 18px; letter-spacing: .5px; } } .c-vidOptin__text.c-vidOptin__text--noBreak { display: block; } @media (min-width: 640px) { .c-vidOptin__text.c-vidOptin__text--noBreak { display: none; } } @media (min-width: 1024px) { .c-vidOptin__text.c-vidOptin__text--noBreak { display: block; } } .c-vidOptin__text.c-vidOptin__text--break { display: none; } @media (min-width: 640px) { .c-vidOptin__text.c-vidOptin__text--break { display: block; margin-right: -10px; margin-left: -10px; } } @media (min-width: 1024px) { .c-vidOptin__text.c-vidOptin__text--break { margin: 0; display: none; } } .c-vidOptin__text--bottom { font-size: 19px; font-weight: 300; letter-spacing: 1px; font-family: 'GalaxieCopernicus', serif; font-style: italic; /* Responsive Custom */ margin-bottom: 10px; margin-bottom: calc(10px + 12 * ((100vw - 320px) / 320)); font-size: calc(11px + 6 * ((100vw - 320px) / 320)); letter-spacing: calc(.3px + .2 * ((100vw - 320px) / 320)); line-height: calc(16.5px + 15.799999999999997 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-vidOptin__text--bottom { margin-bottom: 22px; font-size: 17px; letter-spacing: .5px; line-height: 1.7; } } @media (min-width: 1024px) { .c-vidOptin__text--bottom { margin-bottom: 0; margin-top: 11px; margin-top: calc(11px + 5 * ((100vw - 1024px) / 416)); font-size: calc(13px + 3 * ((100vw - 1024px) / 416)); letter-spacing: calc(.3px + .1 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-vidOptin__text--bottom { font-size: 16px; font-style: italic; letter-spacing: .4px; margin-top: 18px; } } .c-vidOptin__scrollIcon { bottom: 47px; /* Responsive Custom */ width: 19px; width: calc(19px + 21 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-vidOptin__scrollIcon { width: 40px; } } @media (min-width: 1024px) { .c-vidOptin__scrollIcon { /* position: absolute; */ width: 14px; bottom: 57px; /* left: 50%; */ /* transform: translateX(-50%); */ /* Responsive Custom */ margin-top: 50px; margin-top: calc(50px + 20 * ((100vw - 1024px) / 416)); bottom: 57px; bottom: calc(57px + 6 * ((100vw - 1024px) / 416)); width: 14px; width: calc(14px + 6 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-vidOptin__scrollIcon { /* bottom: 63px; */ margin-top: 16px; width: 20px; } } .c-vidOptin__scrollIcon:hover { cursor: pointer; } .c-vidOptin__form { display: none; /* Responsive Custom */ max-width: 912px; max-width: calc(912px - 266 * ((100vw - 320px) / 320)); } .c-vidOptin__form .c-form__inputWrap {} .c-vidOptin__form .c-input { display: block; width: 100%; font-family: 'Gotham', sans-serif; background-color: #f7f7f7; color: #000; /* Responsive Custom */ margin: 0 auto 8px; margin-bottom: calc(8px + 2 * ((100vw - 320px) / 320)); padding: calc(16px - 3 * ((100vw - 320px) / 320)) calc(14px - 5 * ((100vw - 320px) / 320)) calc(13px - 3 * ((100vw - 320px) / 320)); max-width: calc(300px + 402 * ((100vw - 320px) / 320)); font-size: calc(13px + 6 * ((100vw - 320px) / 320)); letter-spacing: calc(0px + 1 * ((100vw - 320px) / 320)); } .c-vidOptin__form .c-input--submit { display: inline-block; line-height: 1; max-width: 300px; /* Responsive Custom */ margin: 3px auto 0; margin-top: calc(3px + 9 * ((100vw - 320px) / 320)); padding: 15px 31px; padding-top: calc(15px + 5 * ((100vw - 320px) / 320)); padding-bottom: calc(15px + 5 * ((100vw - 320px) / 320)); font-size: calc(11px + 4 * ((100vw - 320px) / 320)); letter-spacing: calc(3px + .3 * ((100vw - 320px) / 320)); } @media (min-width: 1024px) { .c-vidOptin__form { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; width: 100%; /* Responsive Custom */ max-width: 646px; max-width: calc(646px + 266 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-vidOptin__form { max-width: 912px; } } @media (min-width: 1024px) { .c-vidOptin__form .c-form__inputWrap { -webkit-box-flex: 1.6; -ms-flex: 1.6; -webkit-flex: 1.6; flex: 1.6; } } @media (min-width: 1440px) { .c-vidOptin__form .c-form__inputWrap { -webkit-box-flex: 1.6; -ms-flex: 1.6; -webkit-flex: 1.6; flex: 1.6; } } @media (min-width: 640px) { .c-vidOptin__form .c-input { margin-bottom: 10px; max-width: none; padding: 13px 9px 10px; font-size: 19px; letter-spacing: 1px; } } @media (min-width: 1024px) { .c-vidOptin__form .c-input { margin-bottom: 0; font-size: 13px; /* flex: 1.4; */ /* width: 33%; */ /* Responsive Custom */ height: 38px; height: calc(38px + 15 * ((100vw - 1024px) / 416)); margin-right: 7px; margin-right: calc(7px + 1 * ((100vw - 1024px) / 416)); padding: 7px; padding: calc(13px + 5 * ((100vw - 1024px) / 416)) calc(9px + 7 * ((100vw - 1024px) / 416)) calc(10px + 4 * ((100vw - 1024px) / 416)); font-size: calc(13px + 6 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-vidOptin__form .c-input { height: 53px; margin-right: 8px; padding: 18px 16px 14px; display: inline-block; font-size: 19px; } } @media (min-width: 640px) { .c-vidOptin__form .c-input--submit { margin-top: 12px; font-size: 15px; letter-spacing: 3.3px; padding: 20px 31px; max-width: none; } } @media (min-width: 1024px) { .c-vidOptin__form .c-input--submit { -webkit-box-flex: 1; -ms-flex: 1; -webkit-flex: 1; flex: 1; width: 100%; margin-top: 0; /* Responsive Custom */ height: 38px; height: calc(38px + 15 * ((100vw - 1024px) / 416)); padding: 13px 0; padding: calc(13px + 5 * ((100vw - 1024px) / 416)) 0; font-size: calc(10px + 4 * ((100vw - 1024px) / 416)); letter-spacing: calc(3px + 1.2 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-vidOptin__form .c-input--submit { height: 53px; font-size: 14px; padding: 18px 0; letter-spacing: 4.2px; } } .c-vidOptin__button { display: block; letter-spacing: 2.5px; /* Responsive Custom */ margin-bottom: 10px; margin-bottom: calc(10px + 10 * ((100vw - 320px) / 320)); padding: 11px 19px; padding-top: calc(11px + 11 * ((100vw - 320px) / 320)); padding-bottom: calc(11px + 11 * ((100vw - 320px) / 320)); width: 194px; width: calc(194px + 194 * ((100vw - 320px) / 320)); font-size: calc(9px + 9 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-vidOptin__button { width: 322px; font-size: 14px; padding: 19px; margin-bottom: 12px; } } @media (min-width: 1024px) { .c-vidOptin__button { display: none; } } .moonray-form-wrapper { display: none; /* Responsive Custom */ max-width: 912px; max-width: calc(912px - 266 * ((100vw - 320px) / 320)); } @media (min-width: 1024px) { .moonray-form-wrapper { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; width: 100%; /* Responsive Custom */ max-width: 646px; max-width: calc(646px + 266 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .moonray-form-wrapper { max-width: 912px; } } html body .c-vidOptin__contentSection .ussr .moonray-form { background-color: transparent; border: none; width: 100%; } html body .c-vidOptin__contentSection .ussr .moonray-form .moonray-form-clearfix {} html body .c-vidOptin__contentSection .ussr .moonray-form .moonray-form-element-wrapper .moonray-form-label { position: absolute; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; } html body .c-vidOptin__contentSection .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-text, html body .c-vidOptin__contentSection .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-email { display: block; width: 100%; margin: 0 auto; margin-bottom: 10px; padding: 0; box-shaddow: none; border-radius: 0; border: none; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; /* Responsive Sizing Custom */ max-width: 300px; max-width: calc(300px + 240 * ((100vw - 320px) / 320)); } html body .c-vidOptin__contentSection .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-text .moonray-form-input, html body .c-vidOptin__contentSection .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-email .moonray-form-input { display: block; width: 100%; font-family: 'Gotham', sans-serif; background-color: #f7f7f7; color: #000; margin: 0 auto 8px; border-radius: 0; border: none; /* Responsive Custom */ margin-bottom: 8px; margin-bottom: calc(8px + 2 * ((100vw - 320px) / 320)); max-width: 300px; max-width: calc(300px + 102 * ((100vw - 320px) / 320)); padding: 16px 14px 13px; padding-top: calc(16px + 3 * ((100vw - 320px) / 320)); padding-right: calc(14px + 1 * ((100vw - 320px) / 320)); padding-left: calc(14px + 1 * ((100vw - 320px) / 320)); font-size: calc(13px + 6 * ((100vw - 320px) / 320)); letter-spacing: calc(0px + 1 * ((100vw - 320px) / 320)); } html body .c-vidOptin__contentSection .ussr .moonray-form .moonray-form-state-error { box-shadow: none; } html body .c-vidOptin__contentSection .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-submit { display: block; padding: 0 !important; } html body .c-vidOptin__contentSection .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-submit .moonray-form-input { display: block; width: 100% !important; max-width: 300px; margin: 0 auto 0; line-height: 1; background-color: #E57726; text-transform: uppercase; font-family: 'Gotham', sans-serif; font-weight: 600; border-radius: 0; border: 1px solid #fff; color: #fff; transition: background 300ms cubic-bezier(0.47, 0, 0.745, 0.715), color 300ms cubic-bezier(0.47, 0, 0.745, 0.715); /* Responsive Custom */ max-width: 300px; max-width: calc(300px + 102 * ((100vw - 320px) / 320)); padding: 15px 31px; padding-top: calc(15px + 5 * ((100vw - 320px) / 320)); padding-bottom: calc(15px + 5 * ((100vw - 320px) / 320)); font-size: calc(11px + 4 * ((100vw - 320px) / 320)); letter-spacing: calc(3px + .3 * ((100vw - 320px) / 320)); } html body .c-vidOptin__contentSection .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-submit .moonray-form-input:hover { background-color: #B92685; } @media (min-width: 1024px) { html body .c-vidOptin__contentSection .ussr .moonray-form .moonray-form-clearfix { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; width: 100%; margin: 0 auto; } } @media (min-width: 640px) { html body .c-vidOptin__contentSection .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-text, html body .c-vidOptin__contentSection .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-email { max-width: 540px; display: block; } } @media (min-width: 1024px) { html body .c-vidOptin__contentSection .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-text, html body .c-vidOptin__contentSection .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-email { -webkit-box-flex: 1.6; -ms-flex: 1.6; -webkit-flex: 1.6; flex: 1.6; width: 33%; margin-bottom: 0; margin-right: 8px; display: inline-block; } } @media (min-width: 1440px) { html body .c-vidOptin__contentSection .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-text, html body .c-vidOptin__contentSection .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-email { -webkit-box-flex: 1.6; -ms-flex: 1.6; -webkit-flex: 1.6; flex: 1.6; } } @media (min-width: 640px) { html body .c-vidOptin__contentSection .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-text .moonray-form-input, html body .c-vidOptin__contentSection .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-email .moonray-form-input { margin-bottom: 10px; max-width: 402px; padding: 19px 15px 13px; font-size: 19px; letter-spacing: 1px; max-width: none; padding: 13px 9px 10px; font-size: 19px; letter-spacing: 1px; } } @media (min-width: 1024px) { html body .c-vidOptin__contentSection .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-text .moonray-form-input, html body .c-vidOptin__contentSection .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-email .moonray-form-input { height: 54px; margin-right: 8px; margin-bottom: 0; padding: 10px 16px; display: inline-block; font-family: 'Gotham', sans-serif; background-color: #f7f7f7; color: #000; font-size: 19px; letter-spacing: 1px; height: 38px; height: calc(38px + 15 * ((100vw - 1024px) / 416)); font-size: calc(13px + 6 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { html body .c-vidOptin__contentSection .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-text .moonray-form-input, html body .c-vidOptin__contentSection .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-email .moonray-form-input { height: 53px; font-size: 19px; padding: 18px 16px 14px; } } @media (min-width: 1024px) { html body .c-vidOptin__contentSection .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-submit { -webkit-box-flex: 1; -ms-flex: 1; -webkit-flex: 1; flex: 1; } } @media (min-width: 640px) { html body .c-vidOptin__contentSection .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-submit .moonray-form-input { max-width: 402px; padding: 20px 31px; font-size: 15px; letter-spacing: 3.3px; } } @media (min-width: 1024px) { html body .c-vidOptin__contentSection .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-submit .moonray-form-input { -webkit-box-flex: 1; -ms-flex: 1; -webkit-flex: 1; flex: 1; width: 100% !important; /* Responsive Custom */ height: 38px; height: calc(38px + 15 * ((100vw - 1024px) / 416)); padding: 13px 0; padding: calc(13px + 5 * ((100vw - 1024px) / 416)) 0; font-size: calc(10px + 4 * ((100vw - 1024px) / 416)); letter-spacing: calc(3px + 1.2 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { html body .c-vidOptin__contentSection .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-submit .moonray-form-input { height: 53px; font-size: 14px; padding: 18px 0; letter-spacing: 4.2px; } } /* Importing base settings */ /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ .c-optinHeader__wrapper { background-image: url('images/optin/optin-blue-header-m1x.jpg'); } @media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (-moz-min-device-pixel-ratio: 1.5), screen and (min-device-pixel-ratio: 1.5) { .c-optinHeader__wrapper { background-image: url('images/optin/optin-blue-header-m2x.jpg'); } } @media (min-width: 640px) { .c-optinHeader__wrapper { background-image: url('images/optin/optin-blue-header.jpg'); } } @media (min-width: 640px) and screen and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 640px) and screen and (-moz-min-device-pixel-ratio: 1.5), (min-width: 640px) and screen and (min-device-pixel-ratio: 1.5) { .c-optinHeader__wrapper { background-image: url('images/optin/optin-blue-header@2x.jpg'); } } .c-optinHeader { margin-right: auto; margin-left: auto; /* Responsive Sizing Custom */ padding-top: calc(26px + 24 * ((100vw - 320px) / 320)); padding-bottom: calc(26px + 24 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-optinHeader { padding-top: 50px; padding-bottom: 50px; } } @media (min-width: 1024px) { .c-optinHeader { /* Responsive Sizing Custom */ padding-top: 50px; padding-bottom: 45px; padding-top: calc(50px + 27 * ((100vw - 1024px) / 416)); padding-bottom: calc(45px + 20 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-optinHeader { padding-top: 77px; padding-bottom: 65px; padding-right: 0; } } .c-optinHeader__contentSection { color: #fff; /* Responsive Sizing Custom */ padding-right: 16px; padding-right: calc(16px + 16 * ((100vw - 320px) / 320)); margin-bottom: 32px; margin-bottom: calc(32px + 32 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-optinHeader__contentSection { padding-right: 32px; margin-bottom: 64px; } } @media (min-width: 1024px) { .c-optinHeader__contentSection { padding-right: 0; /* Responsive Sizing Custom */ max-width: 340px; max-width: calc(340px + 110 * ((100vw - 1024px) / 416)); padding-top: 34px; padding-top: calc(34px + 13 * ((100vw - 1024px) / 416)); margin-bottom: 0; margin-right: auto; margin-left: auto; float: left; width: 42%; } } @media (min-width: 1440px) { .c-optinHeader__contentSection { margin-bottom: 0; padding-top: 47px; max-width: 450px; } } .c-optinHeader__title { font-weight: 500; font-family: 'Gotham', sans-serif; margin-bottom: 12px; line-height: 1.3; /* Responsive Custom */ margin-bottom: calc(12px + 12 * ((100vw - 320px) / 320)); font-size: calc(21px + 26 * ((100vw - 320px) / 320)); letter-spacing: calc(.2px + .8 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-optinHeader__title { font-size: 47px; letter-spacing: 1px; margin-bottom: 24px; } } @media (min-width: 1024px) { .c-optinHeader__title { line-height: 34.5px; letter-spacing: .5px; /* Responsive Custom */ margin-bottom: calc(20px + 7 * ((100vw - 1024px) / 416)); font-size: calc(30px + 12 * ((100vw - 1024px) / 416)); line-height: calc(34.5px + 15.5 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-optinHeader__title { letter-spacing: .5px; font-size: 41px; line-height: 50px; margin-bottom: 27px; } } .c-optinHeader__text { /* Responsive Custom */ margin-bottom: 15px; margin-bottom: calc(15px + 23 * ((100vw - 320px) / 320)); font-size: calc(11px + 5 * ((100vw - 320px) / 320)); line-height: calc(20.9px + 12.700000000000003 * ((100vw - 320px) / 320)); letter-spacing: calc(.3px + .7 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-optinHeader__text { font-size: 16px; margin-bottom: 38px; letter-spacing: 1px; line-height: 2.1; } } @media (min-width: 1024px) { .c-optinHeader__text { /* Responsive Custom */ margin-bottom: 29px; margin-bottom: calc(29px + 13 * ((100vw - 1024px) / 416)); padding-right: 12px; padding-right: calc(12px - 12 * ((100vw - 1024px) / 416)); font-size: calc(12px + 4 * ((100vw - 1024px) / 416)); letter-spacing: calc(.3px + .7 * ((100vw - 1024px) / 416)); line-height: calc(23.1px + 12.1 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-optinHeader__text { padding-right: 0; margin-bottom: 42px; line-height: 35.2px; letter-spacing: 1px; font-size: 1rem; } } .c-optinHeader__button { /* Responsive Sizing Custom */ padding: calc(9px + 7 * ((100vw - 320px) / 320)) calc(19px + 27 * ((100vw - 320px) / 320)); /* Responsive Typography */ font-size: calc(7px + 8 * ((100vw - 320px) / 320)); letter-spacing: calc(3px + 1.5 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-optinHeader__button { letter-spacing: 4.5px; font-size: 15px; padding: 16px 36px; } } @media (min-width: 1024px) { .c-optinHeader__button { /* Responsive Custom */ padding: 12px 26px; padding: calc(12px + 4 * ((100vw - 1024px) / 416)) calc(26px + 10 * ((100vw - 1024px) / 416)); font-size: calc(10px + 5 * ((100vw - 1024px) / 416)); letter-spacing: calc(3.5px + 1 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-optinHeader__button { letter-spacing: 4.5px; font-size: 15px; padding: 16px 36px; } } .c-optinHeader__videoSection { /* padding: 8rem *; */ } @media (min-width: 1024px) { .c-optinHeader__videoSection { /* lost-column: 61/100 2 40px no-flex; */ width: 60%; float: right; margin-right: -34px; margin-right: calc(-34px + 34 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-optinHeader__videoSection { /* lost-column: 58/100 2 40px no-flex; */ width: 57%; margin-right: 0; } } .c-optinHeader__videoBox { overflow-x: hidden; } .c-optinHeader__video { height: auto; width: 100%; background-color: #000; } .c-optinHeader__captionBox { color: #fff; } .c-optinHeader__caption { font-style: italic; font-weight: 600; text-align: center; /* Responsive Custom */ padding: 12px 0; padding: calc(12px + 24 * ((100vw - 320px) / 320)) calc(0px + 26 * ((100vw - 320px) / 320)); letter-spacing: calc(.35px + .45 * ((100vw - 320px) / 320)); font-size: calc(8px + 6 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-optinHeader__caption { letter-spacing: .8px; font-size: 14px; padding: 32px 26px; } } @media (min-width: 1024px) { .c-optinHeader__caption { /* Responsive Custom */ padding: 10px 26px 16px; padding: calc(10px + 8 * ((100vw - 1024px) / 416)) calc(26px - 8 * ((100vw - 1024px) / 416)) calc(16px + 6 * ((100vw - 1024px) / 416)); letter-spacing: calc(.3px + .5 * ((100vw - 1024px) / 416)); font-size: calc(10px + 4 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-optinHeader__caption { letter-spacing: .8px; font-size: 14px; padding: 18px 18px 22px; } } .c-optinHeader__logos { display: block; margin: 0 auto; width: 180px; width: calc(180px + 180 * ((100vw - 320px) / 320)); height: auto; padding: 0; } @media (min-width: 640px) { .c-optinHeader__logos { width: 250px; } } @media (min-width: 1024px) { .c-optinHeader__logos { /* Responsive Custom */ width: 250px; width: calc(250px + 100 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-optinHeader__logos { width: 350px; } } /* Importing base settings */ /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ .c-optinTraining { /* Responsive Sizing Custom */ padding-top: 45px; padding-bottom: 36px; padding-top: calc(45px + 55 * ((100vw - 320px) / 320)); padding-bottom: calc(36px + 64 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-optinTraining { padding-top: 100px; padding-bottom: 100px; } } @media (min-width: 1024px) { .c-optinTraining { /* Responsive Sizing Custom */ padding-top: 104px; padding-bottom: 90px; padding-top: calc(104px + 36 * ((100vw - 1024px) / 416)); padding-bottom: calc(90px + 38 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-optinTraining { padding-top: 140px; padding-bottom: 128px; } } .c-optinTraining__imageSection { margin: 0 auto 20px; } @media (min-width: 640px) { .c-optinTraining__imageSection { margin-bottom: 25px; } } @media (min-width: 1024px) { .c-optinTraining__imageSection { width: calc(99.9% * 1/2 - 20px); /* Responsive Sizing Custom */ margin-bottom: 25px; margin-bottom: calc(25px - 25 * ((100vw - 1024px) / 416)); } .c-optinTraining__imageSection:nth-child(1n) { /* Responsive Sizing Custom */ float: left; margin-right: 40px; clear: none; } .c-optinTraining__imageSection:last-child { /* Responsive Sizing Custom */ margin-right: 0; } .c-optinTraining__imageSection:nth-child(2n) { /* Responsive Sizing Custom */ margin-right: 0; float: right; } .c-optinTraining__imageSection:nth-child(2n + 1) { /* Responsive Sizing Custom */ clear: both; } } @media (min-width: 1440px) { .c-optinTraining__imageSection { margin-bottom: 0; } } .c-optinTraining__image { display: block; margin: 0 auto; } .c-optinTraining__contentSection { margin: 0 auto; } @media (min-width: 1024px) { .c-optinTraining__contentSection { width: calc(99.9% * 1/2 - 20px); } .c-optinTraining__contentSection:nth-child(1n) { float: left; margin-right: 40px; clear: none; } .c-optinTraining__contentSection:last-child { margin-right: 0; } .c-optinTraining__contentSection:nth-child(2n) { margin-right: 0; float: right; } .c-optinTraining__contentSection:nth-child(2n + 1) { clear: both; } } @media (min-width: 1440px) { .c-optinTraining__contentSection { /* lost-column: 1/2 2 40px no-flex; */ } } .c-optinTraining__title { margin-bottom: 4px; line-height: 1.2; letter-spacing: .2px; font-style: italic; text-align: center; /* Responsive Sizing Custom */ margin-bottom: 4px; margin-bottom: calc(4px + 3 * ((100vw - 320px) / 320)); font-size: calc(15px + 14 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-optinTraining__title { font-size: 29px; margin-bottom: 7px; } } @media (min-width: 1024px) { .c-optinTraining__title { text-align: left; /* Responsive Sizing Custom */ margin-bottom: 7px; margin-bottom: calc(7px - 3 * ((100vw - 1024px) / 416)); font-size: calc(21px + 7 * ((100vw - 1024px) / 416)); letter-spacing: calc(.5px + .3 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-optinTraining__title { margin-bottom: 4px; font-size: 28px; letter-spacing: .8px; } } .c-optinTraining__subtitle { line-height: 1.2; letter-spacing: 1.2px; font-weight: 300; color: #52C2B9; font-family: 'Gotham', sans-serif; text-align: center; /* Responsive Sizing Custom */ margin-bottom: 22px; margin-bottom: calc(22px + 22 * ((100vw - 320px) / 320)); font-size: calc(24px + 23 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-optinTraining__subtitle { font-size: 47px; margin-bottom: 52px; } } @media (min-width: 1024px) { .c-optinTraining__subtitle { text-align: left; /* Responsive Sizing Custom */ margin-bottom: 22px; margin-bottom: calc(22px + 10 * ((100vw - 1024px) / 416)); font-size: calc(26.5px + 12 * ((100vw - 1024px) / 416)); line-height: calc(31.2px + 31.87 * ((100vw - 1024px) / 416)); letter-spacing: calc(1.2px + .6 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-optinTraining__subtitle { margin-bottom: 32px; font-size: 39px; line-height: 63px; letter-spacing: 1.8px; } } .c-optinTraining__list { /* Responsive Sizing Custom */ padding-right: 0; padding-right: calc(0px + 48 * ((100vw - 320px) / 320)); } .c-optinTraining__list .c-list__item {} .c-optinTraining__list .c-list__item:nth-of-type(2) {} @media (min-width: 640px) { .c-optinTraining__list { padding-right: 48px; max-width: 565px; margin: 0 auto; } } @media (min-width: 1024px) { .c-optinTraining__list { /* Responsive Sizing Custom */ max-width: none; padding-right: 16px; padding-left: 30px; padding-right: calc(16px + 16 * ((100vw - 1024px) / 416)); padding-left: calc(30px + 13.2 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-optinTraining__list { padding-right: 32px; padding-left: 43.2px; } } @media (min-width: 640px) { .c-optinTraining__list .c-list__item:nth-of-type(2) { max-width: 450px; } } @media (min-width: 1024px) { .c-optinTraining__list .c-list__item:nth-of-type(2) { /* Responsive Sizing Custom */ max-width: 320px; max-width: calc(320px + 130 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-optinTraining__list .c-list__item:nth-of-type(2) { max-width: 450px; } } /* Importing base settings */ /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ .c-optinBschool { background-image: url('images/optin/optin-about-new-bg-mobile.png'); background-size: cover; /* @media (--desktop){ background-image: url('../images/optin/marie-standing-pose-med.jpg'); @media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (-moz-min-device-pixel-ratio: 1.5), screen and (min-device-pixel-ratio: 1.5) { background-image: url('../images/optin/marie-standing-pose-med.jpg'); } } @media screen and (min-width: 1920px) { background-image: url('../images/optin/marie-standing-pose-lg.jpg'); @media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (-moz-min-device-pixel-ratio: 1.5), screen and (min-device-pixel-ratio: 1.5) { background-image: url('../images/optin/marie-standing-pose-lg.jpg'); } } */ } @media (min-width: 1024px) { .c-optinBschool { background-image: url('images/optin/marie-standing-pose.jpg'); } } @media (min-width: 1024px) { .c-optinBschool { background-image: url('images/optin/marie-standing-pose-lg.jpg'); } } @media (min-width: 1024px) and screen and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 1024px) and screen and (-moz-min-device-pixel-ratio: 1.5), (min-width: 1024px) and screen and (min-device-pixel-ratio: 1.5) { .c-optinBschool { background-image: url('images/optin/marie-standing-pose-lg.jpg'); } } @media (min-width: 1024px) and screen and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 1024px) and screen and (-moz-min-device-pixel-ratio: 1.5), (min-width: 1024px) and screen and (min-device-pixel-ratio: 1.5) { .c-optinBschool { background-image: url('images/optin/marie-standing-pose.jpg'); } } .c-optinBschool__container { /* Responsive Sizing Custom */ padding-top: 30px; padding-bottom: 30px; padding-top: calc(30px + 16 * ((100vw - 320px) / 320)); padding-bottom: calc(30px + 10 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-optinBschool__container { padding-top: 46px; padding-bottom: 40px; } } @media (min-width: 1024px) { .c-optinBschool__container { /* Responsive Sizing Custom */ padding-top: 110px; padding-bottom: 110px; padding-top: calc(110px + 16 * ((100vw - 1024px) / 416)); padding-bottom: calc(110px + 16 * ((100vw - 1024px) / 416)); position: relative; } } @media (min-width: 1440px) { .c-optinBschool__container { padding: 107px 0 104px 0; } } @media screen and (min-width: 1920px) { .c-optinBschool__container { padding: 104px 0 99px 0; } } .c-optinBschool__contentSection { text-align: center; /* Responsive Sizing Custom */ padding: 30px 18px 22px; padding: calc(30px + 38 * ((100vw - 320px) / 320)) calc(18px + 38 * ((100vw - 320px) / 320)) calc(22px + 46 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-optinBschool__contentSection { padding: 68px 56px; } } @media (min-width: 1024px) { .c-optinBschool__contentSection { text-align: left; width: 50%; /* Responsive Sizing Custom */ padding: 40px 52px 28px 52px; padding: calc(40px + 10 * ((100vw - 1024px) / 416)) calc(52px + 4 * ((100vw - 1024px) / 416)) calc(28px + 20 * ((100vw - 1024px) / 416)) calc(52px + 18 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-optinBschool__contentSection { padding: 64px 56px 48px 70px; width: 47.4%; } } .c-optinBschool__title { /* Responsive Sizing Custom */ margin-bottom: 17px; margin-bottom: calc(17px + 21 * ((100vw - 320px) / 320)); font-size: calc(28px + 22 * ((100vw - 320px) / 320)); line-height: calc(33.6px + 22.4 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-optinBschool__title { font-size: 40px; line-height: 56px; margin-bottom: 38px; } } @media (min-width: 1024px) { .c-optinBschool__title { /* Responsive Sizing Custom */ margin-bottom: 26px; margin-bottom: calc(26px + 2 * ((100vw - 1024px) / 416)); font-size: calc(30px + 14 * ((100vw - 1024px) / 416)); line-height: calc(40px + 7.6 * ((100vw - 1024px) / 416)); letter-spacing: calc(1.2px + .3 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-optinBschool__title { margin-bottom: 33px; font-size: 40px; line-height: 63.6px; letter-spacing: 1.5px; } } .c-optinBschool__para { letter-spacing: .3px; margin-bottom: 25px; /* Responsive Typography */ font-size: calc(13px + 4 * ((100vw - 320px) / 320)); line-height: calc(26px + 8 * ((100vw - 320px) / 320)); line-height: 1.7; } @media (min-width: 640px) { .c-optinBschool__para { font-size: 17px; line-height: 34px; } } @media (min-width: 1024px) { .c-optinBschool__para { font-size: 12px; line-height: 1.9; margin-bottom: 15px; /* Responsive Sizing Custom */ margin-bottom: 25px; margin-bottom: calc(25px - 1 * ((100vw - 1024px) / 416)); font-size: calc(12px + 4 * ((100vw - 1024px) / 416)); letter-spacing: calc(.3 + .7 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-optinBschool__para { font-size: 16px; margin-bottom: 31px; letter-spacing: 1px; } } .c-optinBschool__button { text-align: center; /* Responsive Typography */ margin-top: 10px; margin-top: calc(10x + 10 * ((100vw - 320px) / 320)); letter-spacing: 1.5px; letter-spacing: calc(1.5px + 2 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-optinBschool__button { letter-spacing: 3.5px; margin-top: 20px; } } @media (min-width: 1024px) { .c-optinBschool__button { font-size: 11px; letter-spacing: 1.5px; padding: 11px 31px; margin: 10px 0 24px; text-align: left; /* Responsive Sizing Custom */ margin: calc(10px + 6 * ((100vw - 1024px) / 416)) 0 calc(24px + 4 * ((100vw - 1024px) / 416)); padding: calc(11px + 8 * ((100vw - 1024px) / 416)) calc(31px + 12 * ((100vw - 1024px) / 416)); font-size: calc(11px + 2 * ((100vw - 1024px) / 416)); letter-spacing: calc(1.5px + 2 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-optinBschool__button { font-size: 13px; letter-spacing: 3.5px; padding: 19px 43px; margin: 26px 0 28px; } } .c-optinBschool__image { display: block; margin: 0 auto; margin-top: calc(30px + 30 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-optinBschool__image { margin-top: 60px; } } .c-optinBschool__logo { text-align: center; padding-top: 30px; } .c-optinBschool__logo img { max-width: 312px; } @media (min-width: 1024px) { .c-optinBschool__logo { position: absolute; bottom: 5%; width: 50%; text-align: center; max-width: 586px; padding-top: 0; } } @media (min-width: 1440px) { .c-optinBschool__logo { bottom: 3.1%; } } /* Importing base settings */ /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ .c-closingCta { max-width: 814px; margin: 0 auto; /* Responsive Sizing Custom */ padding: 34px 28px 60px; padding: calc(34px + 31 * ((100vw - 320px) / 320)) calc(28px + 24 * ((100vw - 320px) / 320)) calc(60px + 60 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-closingCta { padding: 65px 52px 120px; } } @media (min-width: 1024px) { .c-closingCta { /* Responsive Sizing Custom */ padding: 65px 52px 80px; padding-top: calc(65px + 63 * ((100vw - 1024px) / 416)); padding-bottom: calc(80px + 48 * ((100vw - 1024px) / 416)); max-width: 814px; max-width: calc(814 + 102 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-closingCta { max-width: 916px; padding-top: 128px; padding-bottom: 128px; } } .c-closingCtaContent { margin: 0 auto; /* Responsive Sizing Custom */ max-width: 440px; max-width: calc(440 + 260 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-closingCtaContent { max-width: 700px; } } @media (min-width: 1024px) { .c-closingCtaContent { padding: 0 54px; /* Responsive Sizing Custom */ padding-right: calc(54px - 54 * ((100vw - 1024px) / 416)); padding-left: calc(54px - 54 * ((100vw - 1024px) / 416)); max-width: 700px; max-width: calc(700 + 28 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-closingCtaContent { max-width: 728px; padding: 0; } } .c-closingCtaTitle { text-align: center; /* Responsive Sizing Custom */ margin-bottom: 20px; margin-bottom: calc(20px - 8 * ((100vw - 320px) / 320)); font-size: calc(23px + 25 * ((100vw - 320px) / 320)); line-height: calc(30.05px + 31.87 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-closingCtaTitle { font-size: 48px; line-height: 61.92px; margin-bottom: 12px; } } @media (min-width: 769px) { .c-closingCtaTitle { margin-left: -26px; margin-right: -26px; } } @media (min-width: 1024px) { .c-closingCtaTitle { /* Responsive Sizing Custom */ margin: 0 0 18px; margin: 0 calc(0 - 36px * ((100vw - 1024px) / 416)) calc(18px + 8 * ((100vw - 1024px) / 416)); font-size: calc(35px + 15 * ((100vw - 1024px) / 416)); letter-spacing: calc(0px + 1.5 * ((100vw - 1024px) / 416)); line-height: calc(43.05px + 16.64 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-closingCtaTitle { text-align: center; font-size: 47px; line-height: 59.69px; letter-spacing: 1.5px; margin: 0 -36px 26px; } } .c-closingCtaText { /* Responsive Sizing Custom */ margin-bottom: 30px; margin-bottom: calc(30px + 6 * ((100vw - 320px) / 320)); font-size: calc(13px + 4 * ((100vw - 320px) / 320)); letter-spacing: calc(.3px - .3 * ((100vw - 320px) / 320)); line-height: calc(26px + 13.1 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-closingCtaText { font-size: 17px; line-height: 39.1px; letter-spacing: 0; padding: 0 40px; margin-bottom: 36px; } } @media (min-width: 1024px) { .c-closingCtaText { /* Responsive Sizing Custom */ margin-bottom: 34px; margin-bottom: calc(34px + 30 * ((100vw - 1024px) / 416)); padding: 0 75px; padding: 0 calc(75px - 25 * ((100vw - 1024px) / 416)); font-size: calc(13px + 5 * ((100vw - 1024px) / 416)); letter-spacing: calc(.1px + .2 * ((100vw - 1024px) / 416)); line-height: calc(31.1px + 9.3 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-closingCtaText { font-size: 18px; line-height: 41.4px; letter-spacing: .3px; margin-bottom: 64px; padding: 0 50px; } } .c-closingCtaForm .c-input { margin: 0 auto 8px; display: block; width: 100%; font-family: 'Gotham', sans-serif; background-color: #f7f7f7; color: #000; /* Responsive Sizing Custom */ max-width: 300px; max-width: calc(300px + 240 * ((100vw - 320px) / 320)); padding: 12px 9px 7px; padding: calc(12px + 10 * ((100vw - 320px) / 320)) calc(9px + 11 * ((100vw - 320px) / 320)) calc(7px + 7 * ((100vw - 320px) / 320)); font-size: calc(13px + 5 * ((100vw - 320px) / 320)); } .c-closingCtaForm .c-input--submit { display: block; line-height: 9px; /* Responsive Sizing Custom */ margin: 3px auto 0; margin: calc(22px + 10 * ((100vw - 320px) / 320)) auto 0; padding: 12px 46px; padding: calc(12px + 12 * ((100vw - 320px) / 320)) calc(46px + 36 * ((100vw - 320px) / 320)); font-size: calc(9px + 6 * ((100vw - 320px) / 320)); letter-spacing: calc(3px + 1 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-closingCtaForm {} } @media (min-width: 1024px) { .c-closingCtaForm { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; max-width: 580px; margin: 0 auto; /* Responsive Sizing Custom */ max-width: 580px; max-width: calc(580px + 232 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-closingCtaForm { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; max-width: 812px; } } @media (min-width: 640px) { .c-closingCtaForm .c-input { max-width: 540px; padding: 22px 20px 14px; /* font-size: 18px; */ } } @media (min-width: 1024px) { .c-closingCtaForm .c-input { margin-bottom: 0; margin-right: 8px; display: inline-block; padding: 10px; /* Responsive Sizing Custom */ height: 33px; height: calc(33px + 14 * ((100vw - 1024px) / 416)); padding: 10px; padding-top: calc(10px + 6 * ((100vw - 1024px) / 416)); padding-bottom: calc(10px + 3 * ((100vw - 1024px) / 416)); font-size: calc(11px + 4 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-closingCtaForm .c-input { height: 47px; padding: 16px 10px 13px; font-size: 15px; } } @media (min-width: 640px) { .c-closingCtaForm .c-input--submit { margin-top: 22px; font-size: 15px; letter-spacing: 4px; padding: 24px 82px; } } @media (min-width: 1024px) { .c-closingCtaForm .c-input--submit { -webkit-box-flex: 1; -ms-flex: 1; -webkit-flex: 1; flex: 1; width: 100%; margin-top: 0; letter-spacing: 2px; padding: 12px 16px; font-size: 8px; /* Responsive Sizing Custom */ height: 33px; height: calc(33px + 14 * ((100vw - 1024px) / 416)); padding: 12px 16px; padding: calc(11px + 6 * ((100vw - 1024px) / 416)) calc(16px - 2 * ((100vw - 1024px) / 416)); font-size: calc(8px + 3 * ((100vw - 1024px) / 416)); letter-spacing: calc(2px + 1 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-closingCtaForm .c-input--submit { height: 47px; font-size: 11px; padding: 18px; letter-spacing: 3px; } } html body .c-closingCta .ussr .moonray-form { background-color: transparent; border: none; width: 100%; } html body .c-closingCta .ussr .moonray-form .moonray-form-clearfix {} html body .c-closingCta .ussr .moonray-form .moonray-form-element-wrapper .moonray-form-label { position: absolute; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; } html body .c-closingCta .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-text, html body .c-closingCta .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-email { display: block; width: 100%; margin: 0 auto; margin-bottom: 10px; padding: 0; box-shaddow: none; border-radius: 0; border: none; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; /* Responsive Sizing Custom */ max-width: 300px; max-width: calc(300px + 240 * ((100vw - 320px) / 320)); } html body .c-closingCta .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-text .moonray-form-input, html body .c-closingCta .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-email .moonray-form-input { display: block; width: 100%; font-family: 'Gotham', sans-serif; background-color: #f7f7f7; color: #000; margin: 0 auto 8px; border-radius: 0; border: none; /* Responsive Custom */ margin-bottom: 8px; margin-bottom: calc(8px + 2 * ((100vw - 320px) / 320)); padding: 16px 14px 13px; padding-top: calc(16px + 3 * ((100vw - 320px) / 320)); padding-right: calc(14px + 1 * ((100vw - 320px) / 320)); padding-left: calc(14px + 1 * ((100vw - 320px) / 320)); letter-spacing: calc(0px + 1 * ((100vw - 320px) / 320)); max-width: 300px; max-width: calc(300px + 240 * ((100vw - 320px) / 320)); padding: 12px 9px 7px; padding: calc(12px + 10 * ((100vw - 320px) / 320)) calc(9px + 11 * ((100vw - 320px) / 320)) calc(7px + 7 * ((100vw - 320px) / 320)); font-size: calc(13px + 5 * ((100vw - 320px) / 320)); } html body .c-closingCta .ussr .moonray-form .moonray-form-state-error { box-shadow: none; } html body .c-closingCta .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-submit { display: block !important; padding: 0 !important; } html body .c-closingCta .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-submit .moonray-form-input { display: block !important; max-width: 300px; margin: 0 auto 0; line-height: 9px; background-color: #E57726; text-transform: uppercase; font-family: 'Gotham', sans-serif; font-weight: 600; border-radius: 0; border: none; color: #fff; transition: background 300ms cubic-bezier(0.47, 0, 0.745, 0.715), color 300ms cubic-bezier(0.47, 0, 0.745, 0.715); /* Responsive Custom */ max-width: 300px; max-width: calc(300px + 102 * ((100vw - 320px) / 320)); margin: 3px auto 0; margin: calc(12px + 10 * ((100vw - 320px) / 320)) auto 0; padding: 12px 46px; padding: calc(12px + 12 * ((100vw - 320px) / 320)) calc(46px + 36 * ((100vw - 320px) / 320)); font-size: calc(9px + 6 * ((100vw - 320px) / 320)); letter-spacing: calc(3px + 1 * ((100vw - 320px) / 320)); } html body .c-closingCta .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-submit .moonray-form-input:hover { background-color: #B92685; } @media (min-width: 640px) { html body .c-closingCta .ussr .moonray-form .moonray-form-clearfix { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; } } @media (min-width: 1024px) { html body .c-closingCta .ussr .moonray-form .moonray-form-clearfix { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; width: 100%; max-width: 580px; margin: 0 auto; /* Responsive Sizing Custom */ max-width: 580px; max-width: calc(580px + 232 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { html body .c-closingCta .ussr .moonray-form .moonray-form-clearfix { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; max-width: 812px; } } @media (min-width: 640px) { html body .c-closingCta .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-text, html body .c-closingCta .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-email { max-width: 540px; display: block; } } @media (min-width: 1024px) { html body .c-closingCta .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-text, html body .c-closingCta .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-email { -webkit-box-flex: 1.3; -ms-flex: 1.3; -webkit-flex: 1.3; flex: 1.3; width: 33%; margin-bottom: 0; margin-right: 8px; display: inline-block; } } @media (min-width: 1440px) { html body .c-closingCta .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-text, html body .c-closingCta .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-email { -webkit-box-flex: 1.25; -ms-flex: 1.25; -webkit-flex: 1.25; flex: 1.25; } } @media (min-width: 640px) { html body .c-closingCta .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-text .moonray-form-input, html body .c-closingCta .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-email .moonray-form-input { margin-bottom: 10px; font-size: 19px; letter-spacing: 1px; max-width: 540px; padding: 22px 20px 14px; } } @media (min-width: 1024px) { html body .c-closingCta .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-text .moonray-form-input, html body .c-closingCta .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-email .moonray-form-input { margin-right: 8px; margin-bottom: 0; display: inline-block; font-family: 'Gotham', sans-serif; background-color: #f7f7f7; color: #000; letter-spacing: 1px; /* Responsive Sizing Custom */ height: 33px; height: calc(33px + 14 * ((100vw - 1024px) / 416)); padding: 10px; padding-top: calc(10px + 6 * ((100vw - 1024px) / 416)); padding-bottom: calc(10px + 3 * ((100vw - 1024px) / 416)); font-size: calc(11px + 4 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { html body .c-closingCta .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-text .moonray-form-input, html body .c-closingCta .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-email .moonray-form-input { height: 47px; padding: 16px 10px 13px; font-size: 15px; } } @media (min-width: 1024px) { html body .c-closingCta .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-submit { -webkit-box-flex: 1; -ms-flex: 1; -webkit-flex: 1; flex: 1; } } @media (min-width: 640px) { html body .c-closingCta .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-submit .moonray-form-input { max-width: 402px; margin-top: 12px; font-size: 15px; letter-spacing: 4px; padding: 24px 82px; } } @media (min-width: 1024px) { html body .c-closingCta .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-submit .moonray-form-input { -webkit-box-flex: 1; -ms-flex: 1; -webkit-flex: 1; flex: 1; width: 100% !important; margin-top: 0; letter-spacing: 2px; font-size: 8px; /* Responsive Sizing Custom */ height: 33px; height: calc(33px + 14 * ((100vw - 1024px) / 416)); padding: 12px 16px; padding: calc(11px + 6 * ((100vw - 1024px) / 416)) calc(16px - 2 * ((100vw - 1024px) / 416)); font-size: calc(8px + 3 * ((100vw - 1024px) / 416)); letter-spacing: calc(2px + 1 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { html body .c-closingCta .ussr .moonray-form .moonray-form-element-wrapper.moonray-form-input-type-submit .moonray-form-input { height: 47px; font-size: 11px; padding: 18px; letter-spacing: 3px; } } /* Importing base settings */ /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ .c-enrollBanner { position: fixed; top: 0; left: 0; right: 0; z-index: 12; opacity: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); transition: all 250ms ease; } .c-enrollBanner.is-sticky { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .c-enrollBanner.non-sticky { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .c-enrollBanner--bottom { top: auto; bottom: 0; -webkit-transform: translateY(100%); transform: translateY(100%); } .c-enrollBanner__inner { padding: 19px 0; text-align: center; background-color: #52C2B9; } .c-enrollBanner__message { color: #fff; } .c-enrollBanner__title { display: block; font-family: 'Gotham', sans-serif; font-size: 19px; /* Responsive Sizing Custom */ } @media (min-width: 769px) { .c-enrollBanner__title { display: inline-block; padding-right: 14px; font-size: 15px; letter-spacing: 0.4px; } } @media (min-width: 1024px) { .c-enrollBanner__title { font-size: 17px; } } @media (min-width: 1440px) { .c-enrollBanner__title { font-size: 21px; } } .c-enrollBanner__title--enrollmentOpen, .c-enrollBanner__title--enrollmentClosingSoon { display: none; } .c-enrollBanner__divider { display: none; } @media (min-width: 640px) { .c-enrollBanner__divider { width: 1px; background-color: #fff; height: 28px; vertical-align: middle; } } @media (min-width: 769px) { .c-enrollBanner__divider { display: inline-block; } } @media (min-width: 1440px) { .c-enrollBanner__divider { position: relative; top: -1px; } } .c-enrollBanner__subtitle { display: block; font-family: 'GalaxieCopernicus', serif; font-style: italic; font-size: 11px; letter-spacing: 0.5px; } @media (min-width: 769px) { .c-enrollBanner__subtitle { font-size: 13px; letter-spacing: 0.2px; padding-left: 12px; display: inline-block; } } @media (min-width: 1024px) { .c-enrollBanner__subtitle { /* Responsive Sizing Custom */ padding-left: 12px; } } @media (min-width: 1440px) { .c-enrollBanner__subtitle { padding-left: 14px; letter-spacing: 0.3px; font-size: 16px; } } .c-enrollBanner__button { display: none; background-color: transparent; border-color: #fff; color: #fff; margin-top: 10px; padding: 8px 42px; font-size: 10px; } .c-enrollBanner__button:hover { background-color: #fff; color: #B92685; } @media (min-width: 769px) { .c-enrollBanner__button { margin-top: 0; margin-left: 20px; } } @media (min-width: 1024px) { .c-enrollBanner__button { margin-left: 40px; } } @media (min-width: 1440px) { .c-enrollBanner__button { margin-left: 62px; font-size: 12px; } } .is-open-enrollment .c-enrollBanner__inner { padding: 17px 0; background-color: #B92685; } .is-open-enrollment .c-enrollBanner__message {} .is-open-enrollment .c-enrollBanner__title--enrollmentOpen { display: block; } .is-open-enrollment .c-enrollBanner__button--open { display: inline-block; } .is-open-enrollment .c-enrollBanner__title--default { display: none; } @media (min-width: 640px) { .is-open-enrollment .c-enrollBanner__message { max-width: 650px; margin: 0 auto; } } @media (min-width: 769px) { .is-open-enrollment .c-enrollBanner__message { max-width: inherit; margin: 0; } } @media (min-width: 640px) { .is-open-enrollment .c-enrollBanner__title--enrollmentOpen { display: inline-block; } } .c-enrollBanner__timer { display: none; max-width: 280px; background-color: transparent; margin: 10px auto 5px; width: 100%; } .c-enrollBanner__timer:after { content: ''; display: block; clear: both; } @media (min-width: 640px) { .c-enrollBanner__timer { max-width: 420px; } } @media (min-width: 1024px) { .c-enrollBanner__timer { margin-top: 0; margin-bottom: 0; border-left: 1px solid #fff; border-right: 1px solid #fff; } } @media (min-width: 1440px) { .c-enrollBanner__timer { max-width: 580px; } } .c-enrollBanner__timerSection { float: left; border-right: 1px solid rgba(222, 222, 222, .30000000000000004); width: 25%; padding: 0; } @media (min-width: 640px) { .c-enrollBanner__timerSection { float: left; } } .c-enrollBanner__timerSection:last-of-type { border-right: none; } .c-enrollBanner__timerNumber { font-size: 20px; color: #fff; line-height: 1; } @media (min-width: 640px) { .c-enrollBanner__timerNumber { font-size: 22px; } } @media (min-width: 1440px) { .c-enrollBanner__timerNumber { font-size: 30px; } } .c-enrollBanner__timerLabel { font-size: 8px; line-height: 1; color: #fff; font-weight: 600; } @media (min-width: 640px) { .c-enrollBanner__timerLabel { font-size: 11px; } } .enrollment-closing-soon .c-enrollBanner__title, .enrollment-closing-soon .c-enrollBanner__title--enrollmentOpen, .enrollment-closing-soon .c-enrollBanner__divider, .enrollment-closing-soon .c-enrollBanner__subtitle { display: none; } .enrollment-closing-soon .c-enrollBanner__inner { padding: 17px 0; background-color: #e57726; } .enrollment-closing-soon .c-enrollBanner__message { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; margin: 0 auto; width: 100%; } .enrollment-closing-soon .c-enrollBanner__timer { display: block; -webkit-box-flex: 1; -ms-flex: 1; -webkit-flex: 1; flex: 1; } .enrollment-closing-soon .c-enrollBanner__title--enrollmentClosingSoon { display: inline-block; } .enrollment-closing-soon .c-enrollBanner__button { display: block; margin-top: 10px; margin-left: 0; } .enrollment-closing-soon .c-enrollBanner__button:hover { color: #d97e3c; } @media (min-width: 640px) { .enrollment-closing-soon .c-enrollBanner__message { width: 600px; } } @media (min-width: 1024px) { .enrollment-closing-soon .c-enrollBanner__message { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; width: 860px; } } @media (min-width: 1440px) { .enrollment-closing-soon .c-enrollBanner__message { width: 946px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; width: 946px; margin: 0 auto; } } @media (min-width: 1440px) { .enrollment-closing-soon .c-enrollBanner__timer { display: block; -webkit-box-flex: 1; -ms-flex: 1; -webkit-flex: 1; flex: 1; } } @media (min-width: 1024px) { .enrollment-closing-soon .c-enrollBanner__button { margin-top: 0; margin-left: 40px; } } .c-sales-enrollBanner.enrollment-closing-soon { position: relative; } .c-sales-enrollBanner.enrollment-closing-soon .c-enrollBanner { opacity: 1; position: relative; -webkit-transform: translateY(0); transform: translateY(0); } .c-sales-enrollBanner.enrollment-closing-soon .c-enrollBanner__inner { background: #81cbc5; } .c-sales-enrollBanner.enrollment-closing-soon .c-enrollBanner__message { margin: 0 auto; } .c-sales-enrollBanner.enrollment-closing-soon .c-enrollBanner__title--enrollmentClosingSoon { font-family: GalaxieCopernicus; font-style: italic; font-size: 11px; line-height: normal; } .c-sales-enrollBanner.enrollment-closing-soon .c-enrollBanner__timer { border: none; } .c-sales-enrollBanner.enrollment-closing-soon .c-enrollBanner__timerSection { border-color: #75b8b3; } .c-sales-enrollBanner.enrollment-closing-soon .c-enrollBanner__timerNumber { font-size: 20px; } .c-sales-enrollBanner.enrollment-closing-soon .c-enrollBanner__timerLabel { display: block; font-size: 7px; } @media (min-width: 1024px) { .c-sales-enrollBanner.enrollment-closing-soon .c-enrollBanner__inner { padding: 12px 0; } } @media (min-width: 1440px) { .c-sales-enrollBanner.enrollment-closing-soon .c-enrollBanner__inner { padding: 15px 0; } } @media (min-width: 1024px) { .c-sales-enrollBanner.enrollment-closing-soon .c-enrollBanner__message { max-width: 805px; } } @media (min-width: 640px) { .c-sales-enrollBanner.enrollment-closing-soon .c-enrollBanner__title--enrollmentClosingSoon { font-size: 19px; line-height: 23px; } } @media (min-width: 640px) { .c-sales-enrollBanner.enrollment-closing-soon .c-enrollBanner__timerNumber { font-size: 40px; } } @media (min-width: 640px) { .c-sales-enrollBanner.enrollment-closing-soon .c-enrollBanner__timerLabel { font-size: 9px; } } .enrollment-closed .c-enrollBanner__inner { display: none; } /* when the filters are open, make the panel scrollable */ .c-enrollBanner--reviewSearch {} .c-enrollBanner--reviewSearch.review-filter-active {} @media screen and (max-width: 1023px) and (max-height: 600px) { .c-enrollBanner--reviewSearch.review-filter-active { height: 100%; overflow-x: hidden; overflow-y: scroll; } } /* Importing base settings */ /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ .c-plyrHeader { margin: 0 auto; margin-top: 0; } @media (min-width: 1024px) { .c-plyrHeader { /* Responsive Sizing Custom */ margin-top: 44px; margin-top: calc(44px + 24 * ((100vw - 1024px) / 416)); max-width: 900px; max-width: calc(900px + 440 * ((100vw - 1024px) / 416)); padding: 0 0; padding: 0 calc(0px + 40 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrHeader { margin-top: 68px; max-width: 1340px; padding: 0 40px; } } .c-plyrHeader__videos { margin-bottom: 20px; } @media (min-width: 640px) { .c-plyrHeader__videos { margin-bottom: 40px; } } .c-plyrHeader__video { position: relative; display: none; background-color: #999999; } .c-plyrHeader__video.is-active { display: block; } .c-plyrHeader__video.is-playing .c-plyrHeader__overlay, .c-plyrHeader__video.is-playing .c-plyrHeader__playButton { display: none; } .c-plyrHeader__video.is-playing .c-plyrHeader__videoContainer { opacity: 1; visibility: visible; } .c-plyrHeader__videoInner { position: relative; background-position: center; background-repeat: no-repeat; background-size: cover; } @media (min-width: 1024px) { .c-plyrHeader__videoInner { width: calc(100% - 144px); } } .c-plyrHeader__videoInner.c-plyrHeader__videoInner--one { background-image: url('images/player-page/video-bg-6-pillars-m1x.jpg'); } @media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (-moz-min-device-pixel-ratio: 1.5), screen and (min-device-pixel-ratio: 1.5) { .c-plyrHeader__videoInner.c-plyrHeader__videoInner--one { background-image: url('images/player-page/video-bg-6-pillars-m2x.jpg'); } } @media (min-width: 640px) { .c-plyrHeader__videoInner.c-plyrHeader__videoInner--one { background-image: url('images/player-page/video-bg-6-pillars.jpg'); } } @media (min-width: 640px) and screen and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 640px) and screen and (-moz-min-device-pixel-ratio: 1.5), (min-width: 640px) and screen and (min-device-pixel-ratio: 1.5) { .c-plyrHeader__videoInner.c-plyrHeader__videoInner--one { background-image: url('images/player-page/video-bg-6-pillars@2x.jpg'); } } .c-plyrHeader__videoInner.c-plyrHeader__videoInner--two { background-image: url('images/player-page/video-bg-13-keys-m1x.jpg'); } @media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (-moz-min-device-pixel-ratio: 1.5), screen and (min-device-pixel-ratio: 1.5) { .c-plyrHeader__videoInner.c-plyrHeader__videoInner--two { background-image: url('images/player-page/video-bg-13-keys-m2x.jpg'); } } @media (min-width: 640px) { .c-plyrHeader__videoInner.c-plyrHeader__videoInner--two { background-image: url('images/player-page/video-bg-13-keys.jpg'); } } @media (min-width: 640px) and screen and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 640px) and screen and (-moz-min-device-pixel-ratio: 1.5), (min-width: 640px) and screen and (min-device-pixel-ratio: 1.5) { .c-plyrHeader__videoInner.c-plyrHeader__videoInner--two { background-image: url('images/player-page/video-bg-13-keys@2x.jpg'); } } .c-plyrHeader__videoInner.c-plyrHeader__videoInner--three { background-image: url('images/player-page/video-bg-faq-m1x.jpg'); } @media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (-moz-min-device-pixel-ratio: 1.5), screen and (min-device-pixel-ratio: 1.5) { .c-plyrHeader__videoInner.c-plyrHeader__videoInner--three { background-image: url('images/player-page/video-bg-faq-m2x.jpg'); } } @media (min-width: 640px) { .c-plyrHeader__videoInner.c-plyrHeader__videoInner--three { background-image: url('images/player-page/video-bg-faq.jpg'); background-position: top center; } } @media (min-width: 640px) and screen and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 640px) and screen and (-moz-min-device-pixel-ratio: 1.5), (min-width: 640px) and screen and (min-device-pixel-ratio: 1.5) { .c-plyrHeader__videoInner.c-plyrHeader__videoInner--three { background-image: url('images/player-page/video-bg-faq@2x.jpg'); } } .c-plyrHeader__overlay { background: rgba(0, 0, 0, .5); background: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 32%, rgba(0, 0, 0, .58) 70%, rgba(0, 0, 0, .58) 100% ); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000', GradientType=0); height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 8; } @media (min-width: 1024px) { .c-plyrHeader__overlay { display: none; } } .c-plyrHeader__playButton { position: absolute; top: 36%; left: 50%; width: 36px; z-index: 10; -webkit-transform: translateX(-50%); transform: translateX(-50%); /* Responsive Sizing Custom */ width: 36px; width: calc(36px + 36 * ((100vw - 320px) / 320)); } .c-plyrHeader__playButton .circle, .c-plyrHeader__playButton .triangle { transition: all 400ms ease; } .c-plyrHeader__playButton:hover { cursor: pointer; } .c-plyrHeader__playButton:hover .circle { fill: transparent; } .c-plyrHeader__playButton:hover .triangle { fill: #fff; } @media (min-width: 640px) { .c-plyrHeader__playButton { width: 70px; } } @media (min-width: 1024px) { .c-plyrHeader__playButton { top: 50%; -webkit-transform: translateX(-50%) translateY(-16%); transform: translateX(-50%) translateY(-16%); /* Responsive Sizing Custom */ width: 50px; width: calc(50px + 20 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrHeader__playButton { width: 70px; } } .c-plyrHeader__videoContainer { opacity: 0; visibility: hidden; } .c-plyrHeader__videoEmbedContainer { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } /* info panel */ .c-plyrHeader__videoInfo { position: relative; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; padding: 20px; color: #fff; background-color: #747474; } .c-plyrHeader__videoInfo a { color: #fff; } @media (min-width: 640px) { .c-plyrHeader__videoInfo { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; padding-bottom: 40px; } } @media (min-width: 1024px) { .c-plyrHeader__videoInfo { position: absolute; top: 0; right: 0; bottom: 0; z-index: 9; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; width: 428px; height: 100%; padding: 18px 40px 32px; color: #fff; } } /* open / close */ .c-plyrHeader__videoInfoOpen { position: absolute; display: none; right: 0; top: 0; -webkit-box-align: end; -ms-flex-align: end; -webkit-align-items: flex-end; align-items: flex-end; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; right: 50%; -webkit-transform: translateX(50%); transform: translateX(50%); height: 42px; cursor: pointer; } @media (min-width: 1024px) { .c-plyrHeader__videoInfoOpen { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; position: absolute; -webkit-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; right: 16px; top: -12px; } } /* more text */ .c-plyrHeader__videoInfoMore { display: none; font-size: 11px; letter-spacing: 1.5px; margin-right: 12px; line-height: 11px; margin-bottom: 6px; } @media (min-width: 1024px) { .c-plyrHeader__videoInfoMore { font-size: 8px; } } @media (min-width: 1440px) { .c-plyrHeader__videoInfoMore { font-size: 11px; } } /* number */ .c-plyrHeader__videoNumber { position: absolute; top: 20px; left: 0; margin: 0; padding: 11px 10px 9px; font-size: 10px; line-height: 1; text-transform: uppercase; letter-spacing: 1px; border-radius: 0 3px 3px 0; background-color: #e57727; } .c-plyrHeader__videoNumber--teal { background-color: #52c2b9; } .c-plyrHeader__videoNumber--green { background-color: #41b978; } /* title */ .c-plyrHeader__videoTitleBox { margin-bottom: 11px; } @media (min-width: 1440px) { .c-plyrHeader__videoTitleBox { margin-bottom: 19px; } } /* content */ .c-plyrHeader__videoInfoContent { padding-top: 58px; } @media (min-width: 640px) and (max-width: 1023px) { .c-plyrHeader__videoInfoContent { -webkit-box-flex: 1; -ms-flex: 1; -webkit-flex: 1; flex: 1; } } @media (min-width: 640px) { .c-plyrHeader__videoInfoContent { padding-top: 84px; padding-right: 60px; } } @media (min-width: 1024px) { .c-plyrHeader__videoInfoContent { margin-top: auto; padding-top: 50px; padding-right: 0; } } @media (min-width: 1440px) { .c-plyrHeader__videoInfoContent { padding-top: 66px; } } /* name */ .c-plyrHeader__videoName { font-size: 24px; line-height: 1; font-weight: 300; } @media (min-width: 640px) { .c-plyrHeader__videoName { font-size: 34px; } } @media (min-width: 1024px) { .c-plyrHeader__videoName { font-size: 24px; } } @media (min-width: 1280px) { .c-plyrHeader__videoName { font-size: 38px; } } /* downloading */ .c-plyrHeader__downloadContent { margin-bottom: 20px; font-size: 13px; font-weight: 400; line-height: 1.8; letter-spacing: 0.4px; } @media (min-width: 640px) { .c-plyrHeader__downloadContent { margin-bottom: 0; font-size: 15px; line-height: 2; } } @media (min-width: 1024px) { .c-plyrHeader__downloadContent { margin-bottom: 20px; font-size: 13px; line-height: 2.2; } } @media (min-width: 1440px) { .c-plyrHeader__downloadContent { margin-bottom: 28px; font-size: 15px; } } .c-plyrHeader__downloadOptions { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; border-top: 1px solid #9f9f9f; } .c-plyrHeader__downloadOptions > div { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; float: left; width: 50%; text-align: center; } .c-plyrHeader__videoInfo--noDownload .c-plyrHeader__downloadOptions > div { width: 100%; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } @media (min-width: 640px) { .c-plyrHeader__downloadOptions { display: block; float: right; width: 172px; border-top: 0; border-left: 1px solid #9f9f9f; } } @media (min-width: 1024px) { .c-plyrHeader__downloadOptions { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; float: none; width: 100%; border-left: 0; border-top: 1px solid #9f9f9f; } } @media (min-width: 640px) { .c-plyrHeader__downloadOptions > div { width: 100%; } } @media (min-width: 1024px) { .c-plyrHeader__downloadOptions > div { width: 50%; } } @media (min-width: 640px) { .c-plyrHeader__videoInfo--noDownload .c-plyrHeader__downloadOptions > div { height: 100%; } } .c-plyrHeader__downloadImage { display: block; width: 100%; padding: 23px 20px 10px; border-right: 1px solid #9f9f9f; } @media (min-width: 640px) { .c-plyrHeader__downloadImage { padding: 12px 20px 20px; border-right: 0; border-bottom: 1px solid #9f9f9f; } } @media (min-width: 1024px) { .c-plyrHeader__downloadImage { padding: 32px 20px 10px; border-bottom: 0; border-right: 1px solid #9f9f9f; } } .c-plyrHeader__downloadButton { display: inline-block; width: 88px; } @media (min-width: 640px) { .c-plyrHeader__downloadButton { width: 110px; } } @media (min-width: 1024px) { .c-plyrHeader__downloadButton { width: 50px; } } @media (min-width: 1280px) { .c-plyrHeader__downloadButton { width: 110px; } } .c-plyrHeader__downloadImageCaption { max-width: 85px; margin: 0 auto; font-size: 11px; font-family: 'Gotham', sans-serif; font-style: italic; } /* sharing */ .c-plyrHeader__share { width: 100%; padding: 35px 20px 10px; } @media (min-width: 640px) { .c-plyrHeader__share { padding-top: 18px; } } @media (min-width: 1024px) { .c-plyrHeader__share { padding-top: 31px; } } .c-plyrHeader__shareTitle { margin-bottom: 17px; font-size: 10px; font-weight: 500; letter-spacing: 1.8px; text-transform: uppercase; } .c-plyrHeader__shareTitle br {} .c-plyrHeader__videoInfo--noDownload .c-plyrHeader__shareTitle br {} @media (min-width: 640px) { .c-plyrHeader__shareTitle br { display: none; } } @media (min-width: 1024px) { .c-plyrHeader__shareTitle br { display: inline; } } @media (min-width: 1024px) { .c-plyrHeader__videoInfo--noDownload .c-plyrHeader__shareTitle br { display: none; } } .c-plyrHeader__shareLink { display: inline-block; transition: color 250ms ease; font-size: 18px; padding: 0 10px; } .c-plyrHeader__shareLink:hover { color: #E57726; } /* close state */ .c-plyrHeader__videoInfo.is-closed {} @media (min-width: 1024px) { .c-plyrHeader__videoInfo.is-closed { width: 144px; padding: 18px; text-align: center; } .c-plyrHeader__videoInfo.is-closed .c-plyrHeader__videoInfoOpen { right: 50%; top: 0; } .c-plyrHeader__videoInfo.is-closed .c-plyrHeader__videoInfoMore { display: block; } .c-plyrHeader__videoInfo.is-closed .c-plyrHeader__videoNumber { display: inline-block; position: relative; top: 0; padding: 9px 10px 7px; margin-bottom: 14px; font-size: 9px; border-radius: 3px; } .c-plyrHeader__videoInfo.is-closed .c-plyrHeader__videoName { font-size: 24px; } .c-plyrHeader__videoInfo.is-closed .c-plyrHeader__downloadContent { display: none; } .c-plyrHeader__videoInfo.is-closed .c-plyrHeader__downloadOptions { display: block; border-top-color: #fff; } .c-plyrHeader__videoInfo.is-closed .c-plyrHeader__downloadOptions > div { width: 100%; } .c-plyrHeader__videoInfo.is-closed .c-plyrHeader__downloadImage { padding: 20px 0; border-right: 0; border-bottom: 1px solid #fff; } .c-plyrHeader__videoInfo.is-closed .c-plyrHeader__share { padding: 20px 0 0; } .c-plyrHeader__videoInfo.is-closed .c-plyrHeader__shareTitle br { display: inline; } } /* Importing base settings */ /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ .c-plyrHeader__thumbsContainer { margin: 0 auto; padding: 0 16px; padding: 0 calc(16px + 16 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-plyrHeader__thumbsContainer { max-width: 582px; padding-top: 0; } } @media (min-width: 1024px) { .c-plyrHeader__thumbsContainer { max-width: none; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; -webkit-flex-direction: row-reverse; flex-direction: row-reverse; background-color: #f7f7f7; /* Responsive Sizing Custom */ padding: 14px; padding: calc(14px + 6 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrHeader__thumbsContainer { padding: 20px; } } .c-plyrHeader__thumbs { background-color: #f7f7f7; margin-bottom: 23px; margin-bottom: calc(23px + 23 * ((100vw - 320px) / 320)); } .c-plyrHeader__thumbs:after { content: ''; display: block; clear: both; } @media (min-width: 640px) { .c-plyrHeader__thumbs { margin-bottom: 23px; } } @media (min-width: 1024px) { .c-plyrHeader__thumbs { background-color: transparent; margin-bottom: 0; padding: 0; width: 62%; } } .c-plyrHeader__thumbsTitleBox { background-color: #4d4d4d; padding: 9px; text-align: center; margin-bottom: 16px; position: relative; margin-bottom: 20px; padding: calc(9px + 9 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-plyrHeader__thumbsTitleBox { padding: 9px; } } @media (min-width: 1024px) { .c-plyrHeader__thumbsTitleBox { display: none; } } .c-plyrHeader__thumbsToggle .c-hamburger__patty { background: #fff; height: 2px; height: calc(2px + 2 * ((100vw - 320px) / 320)); } .c-plyrHeader__thumbsToggle .c-hamburger__patty:nth-child(2) { top: 8px; top: calc(8px + 8 * ((100vw - 320px) / 320)); } .c-plyrHeader__thumbsToggle .c-hamburger__patty:nth-child(3) { top: 16px; top: calc(16px + 16 * ((100vw - 320px) / 320)); } .c-plyrHeader__thumbsToggle.c-hamburger { position: absolute; width: 20px; height: 20px; left: 10px; width: calc(20px + 20 * ((100vw - 320px) / 320)); height: calc(20px + 20 * ((100vw - 320px) / 320)); left: calc(10px + 10 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-plyrHeader__thumbsToggle.c-hamburger { width: 20px; height: 20px; left: 10px; } } .c-plyrHeader__thumbsToggle.c-hamburger.is-open { width: 23px; left: 9px; top: 9px; width: calc(23px + 23 * ((100vw - 320px) / 320)); left: calc(9px + 9 * ((100vw - 320px) / 320)); top: calc(9px + 9 * ((100vw - 320px) / 320)); } .c-plyrHeader__thumbsToggle.c-hamburger.is-open .c-hamburger__patty:nth-child(1), .c-plyrHeader__thumbsToggle.c-hamburger.is-open .c-hamburger__patty:nth-child(3) { top: 8px; top: calc(8px + 8 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-plyrHeader__thumbsToggle.c-hamburger.is-open { width: 23px; left: 9px; top: 9px; } } @media (min-width: 640px) { .c-plyrHeader__thumbsToggle.c-hamburger.is-open .c-hamburger__patty:nth-child(1), .c-plyrHeader__thumbsToggle.c-hamburger.is-open .c-hamburger__patty:nth-child(3) { top: 8px; } } @media (min-width: 640px) { .c-plyrHeader__thumbsToggle .c-hamburger__patty { height: 2px; } } @media (min-width: 640px) { .c-plyrHeader__thumbsToggle .c-hamburger__patty:nth-child(2) { top: 8px; } } @media (min-width: 640px) { .c-plyrHeader__thumbsToggle .c-hamburger__patty:nth-child(3) { top: 16px; } } .c-plyrHeader__title { font-style: italic; font-family: 'GalaxieCopernicus', serif; color: #fff; font-size: 14px; letter-spacing: 0.4px; font-size: calc(14px + 14 * ((100vw - 320px) / 320)); letter-spacing: calc(0.4px + 0.4 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-plyrHeader__title { font-size: 14px; letter-spacing: 0.4px; } } .c-plyrHeader__thumbsInner { display: block; padding: 0 16px 6px; padding: 0 calc(16px + 16 * ((100vw - 320px) / 320)) calc(6px + 6 * ((100vw - 320px) / 320)); } .c-plyrHeader__thumbsInner:after { content: ''; display: block; clear: both; } @media (min-width: 640px) { .c-plyrHeader__thumbsInner { padding: 0 10px 10px; } } @media (min-width: 1024px) { .c-plyrHeader__thumbsInner { display: block; padding: 0; } } .c-plyrHeader__thumb { background-color: #333; margin-bottom: 10px; -webkit-transform: translateZ(0); margin-bottom: calc(10px + 10 * ((100vw - 320px) / 320)); } .c-plyrHeader__thumb:last-of-type { margin-bottom: none; } @media (min-width: 640px) { .c-plyrHeader__thumb { margin-bottom: 0; width: calc(99.9% * 1/3 - 6.666666666666666px); } .c-plyrHeader__thumb:nth-child(1n) { float: left; margin-right: 10px; clear: none; } .c-plyrHeader__thumb:last-child { margin-right: 0; } .c-plyrHeader__thumb:nth-child(3n) { margin-right: 0; float: right; } .c-plyrHeader__thumb:nth-child(3n + 1) { clear: both; } } .c-plyrHeader__thumb:hover, .c-plyrHeader__thumb.is-active { cursor: pointer; } .c-plyrHeader__thumb:hover .c-plyrHeader__thumbImage, .c-plyrHeader__thumb.is-active .c-plyrHeader__thumbImage { opacity: 0.8; } .c-plyrHeader__thumb:hover .circle, .c-plyrHeader__thumb.is-active .circle { fill: transparent; } .c-plyrHeader__thumb:hover .triangle, .c-plyrHeader__thumb.is-active .triangle { fill: #fff; } .c-plyrHeader__thumb.is-blocked {} .c-plyrHeader__thumb.is-blocked:hover { height: 145px; height: calc(145px + 145 * ((100vw - 320px) / 320)); background-color: transparent; } .c-plyrHeader__thumb.is-blocked:hover .c-plyrHeader__thumbImage, .c-plyrHeader__thumb.is-blocked:hover .c-plyrHeader__thumbPlayer { display: none; } .c-plyrHeader__thumb.is-blocked:hover .c-plyrHeader__thumbBlocked { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; padding-top: 0; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; height: 145px; height: calc(145px + 145 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-plyrHeader__thumb.is-blocked:hover { height: 102px; } } @media (min-width: 1024px) { .c-plyrHeader__thumb.is-blocked:hover { height: 98px; height: calc(98px + 41 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrHeader__thumb.is-blocked:hover { height: 139px; } } @media (min-width: 640px) { .c-plyrHeader__thumb.is-blocked:hover .c-plyrHeader__thumbBlocked { height: 102px; } } @media (min-width: 1024px) { .c-plyrHeader__thumb.is-blocked:hover .c-plyrHeader__thumbBlocked { height: 98px; height: calc(98px + 41 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrHeader__thumb.is-blocked:hover .c-plyrHeader__thumbBlocked { height: 139px; } } .c-plyrHeader__thumbInner { position: relative; -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0); transform: translateZ(0); } .c-plyrHeader__thumbImage { opacity: 0.3; will-change: opacity; transition: opacity 250ms ease; -webkit-transform: translateZ(0); transform: translateZ(0); height: auto; background-color: #f7f7f7; } .c-plyrHeader__thumbPlayer { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; width: 100%; text-align: center; color: #fff; height: 100%; } .c-plyrHeader__thumbPlayer:hover { cursor: pointer; } .c-plyrHeader__thumbPlayer:hover .circle { fill: transparent; } .c-plyrHeader__thumbPlayer:hover .triangle { fill: #fff; } .c-plyrHeader__thumbPlayIcon { position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 36px; width: calc(36px + 36 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-plyrHeader__thumbPlayIcon { width: 28px; } } @media (min-width: 1024px) { .c-plyrHeader__thumbPlayIcon { /* Responsive Sizing Custom */ width: 26px; width: calc(26px + 10 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrHeader__thumbPlayIcon { width: 36px; } } .c-plyrHeader__thumbTitle { letter-spacing: 0.5px; -ms-flex-item-align: end; -webkit-align-self: flex-end; align-self: flex-end; margin-bottom: 8px; -webkit-transform: translateZ(0); transform: translateZ(0); /* Responsive Sizing Custom */ font-size: 18px; font-size: calc(18px + 18 * ((100vw - 320px) / 320)); letter-spacing: calc(0.5px + 0.5 * ((100vw - 320px) / 320)); margin-bottom: calc(8px + 8 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-plyrHeader__thumbTitle { font-size: 12px; letter-spacing: 0.5px; margin-bottom: 8px; } } @media (min-width: 1024px) { .c-plyrHeader__thumbTitle { /* Responsive Sizing Custom */ letter-spacing: 0.5px; letter-spacing: calc(0.5px + 0.5 * ((100vw - 1024px) / 416)); margin-bottom: 8px; margin-bottom: calc(8px + 8 * ((100vw - 1024px) / 416)); font-size: 12px; font-size: calc(12px + 6 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrHeader__thumbTitle { font-size: 18px; letter-spacing: 1px; margin-bottom: 16px; } } .c-plyrHeader__thumbBlocked { display: none; text-align: center; padding: 20px 40px 0; padding: calc(20px + 20 * ((100vw - 320px) / 320)) calc(40px + 40 * ((100vw - 320px) / 320)) 0; } @media (min-width: 640px) { .c-plyrHeader__thumbBlocked { padding: 8px 24px 0; } } @media (min-width: 1024px) { .c-plyrHeader__thumbBlocked { padding: 8px 24px 0; padding: calc(8px + 12 * ((100vw - 1024px) / 416)) calc(24px + 16 * ((100vw - 1024px) / 416)) 0; } } @media (min-width: 1440px) { .c-plyrHeader__thumbBlocked { padding: 20px 40px 0; } } .c-plyrHeader__thumbBlockedTitle { color: #dc6f6d; font-family: 'Gotham', sans-serif; font-weight: 300; font-size: 22px; line-height: 28px; letter-spacing: 1.5px; font-size: calc(22px + 22 * ((100vw - 320px) / 320)); line-height: calc(28px + 28 * ((100vw - 320px) / 320)); letter-spacing: calc(1.5px + 1.5 * ((100vw -320px) / 320)); } @media (min-width: 640px) { .c-plyrHeader__thumbBlockedTitle { font-size: 16px; line-height: 22px; letter-spacing: 1px; } } @media (min-width: 1024px) { .c-plyrHeader__thumbBlockedTitle { font-size: 16px; line-height: 22px; letter-spacing: 1px; font-size: calc(16px + 6 * ((100vw - 1024px) / 416)); line-height: calc(22px + 6 * ((100vw - 1024px) / 416)); letter-spacing: calc(1px + 0.5 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrHeader__thumbBlockedTitle { font-size: 22px; line-height: 28px; letter-spacing: 1.5px; } } .c-plyrHeader__thumbBlockedText { display: block; color: #787878; font-family: 'GalaxieCopernicus', serif; font-style: italic; font-size: 13px; line-height: 20px; letter-spacing: 1px; margin-top: 5px; font-size: calc(13px + 13 * ((100vw - 320px) / 320)); line-height: calc(20px + 20 * ((100vw - 320px) / 320)); letter-spacing: calc(1px + 1 * ((100vw - 320px) / 320)); margin-top: calc(5px + 5 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-plyrHeader__thumbBlockedText { font-size: 9px; line-height: 16px; letter-spacing: 1px; margin-top: 5px; } } @media (min-width: 1024px) { .c-plyrHeader__thumbBlockedText { font-size: 9px; line-height: 16px; font-size: calc(9px + 4 * ((100vw - 1024px) / 416)); line-height: calc(16px + 4 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrHeader__thumbBlockedText { font-size: 13px; line-height: 20px; } } .c-plyrHeader__cta { text-align: center; padding: 10px; background-color: #f7f7f7; clear: both; padding: calc(10px + 10 * ((100vw - 1024px) / 416)); } @media (min-width: 640px) { .c-plyrHeader__cta { padding: 10px; } } @media (min-width: 1024px) { .c-plyrHeader__cta { clear: none; width: 38%; background-color: transparent; padding: 0; padding-right: 25px; } } .c-plyrHeader__ctaInner {} .c-plyrHeader__ctaTitle { color: #52C2B9; } .c-plyrHeader__ctaText { text-align: center; padding: 16px 12px 15px; letter-spacing: 0.4px; font-size: 15px; line-height: 27px; padding: calc(16px + 16 * ((100vw - 320px) / 320)) calc(12px + 12 * ((100vw - 320px) / 320)) calc(15px + 15 * ((100vw - 320px) / 320)); font-size: calc(15px + 15 * ((100vw - 320px) / 320)); line-height: calc(27px + 27 * ((100vw - 320px) / 320)); letter-spacing: calc(0.4px + 0.4 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-plyrHeader__ctaText { padding: 16px 12px 15px; font-size: 17px; line-height: 22.5px; letter-spacing: 0.4px; } } @media (min-width: 1024px) { .c-plyrHeader__ctaText { /* Responsive Sizing Custom */ padding: 4px 16px 10px; padding: calc(4px + 5 * ((100vw - 1024px) / 416)) calc(16px + 20 * ((100vw - 1024px) / 416)) calc(10px + 5 * ((100vw - 1024px) / 416)); font-size: calc(16px + 6 * ((100vw - 1024px) / 416)); line-height: calc(24px + 8 * ((100vw - 1024px) / 416)); letter-spacing: calc(0.5px + 0.1 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrHeader__ctaText { padding: 9px 36px 15px; letter-spacing: 0.6px; font-size: 22px; line-height: 32px; } } .c-plyrHeader__ctaButton { margin: 0 auto; letter-spacing: 3px; padding: 14px 49px; font-size: 10px; margin-bottom: 15px; padding: calc(14px + 14 * ((100vw - 320px) / 320)) calc(49px + 49 * ((100vw - 320px) / 320)); margin-bottom: calc(15px + 15 * ((100vw - 320px) / 320)); font-size: calc(10px + 10 * ((100vw - 320px) / 320)); letter-spacing: calc(3px + 3 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-plyrHeader__ctaButton { letter-spacing: 3px; padding: 14px 49px; font-size: 10px; margin-bottom: 15px; } } @media (min-width: 1024px) { .c-plyrHeader__ctaButton { margin: 0 auto; /* Responsive Sizing Custom */ padding: 12px 30px; padding: calc(12px + 4 * ((100vw - 1024px) / 416)) calc(30px + 13 * ((100vw - 1024px) / 416)); font-size: calc(7px + 3 * ((100vw - 1024px) / 416)); letter-spacing: calc(2.2px + 0.8 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrHeader__ctaButton { margin: 0 auto; letter-spacing: 3px; font-size: 10px; padding: 16px 43px; } } /* Importing base settings */ /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ .c-plyrWelcome { transition: 300ms margin ease; } .enroll-is-sticky .c-plyrWelcome { margin-top: 85px; margin-top: calc(85px + 85 * ((100vw - 320px) / 320)); } .enroll-is-sticky.is-open-enrollment .c-plyrWelcome { margin-top: 119px; margin-top: calc(119px + 119 * ((100vw - 320px) / 320)); } .enroll-is-sticky.is-open-enrollment.is-open-enroll-timer .c-plyrWelcome { margin-top: 161px; margin-top: calc(161px + 147.77999999999997 * ((100vw - 320px) / 320)); } @media (max-width: 1023px) { .c-plyrWelcome { padding: 0; } } @media (min-width: 1024px) { .c-plyrWelcome { margin: 0 auto; /* Responsive Sizing Custom */ padding: 72px 0 72px; padding: calc(72px + 22 * ((100vw - 1024px) / 416)) calc(0px + 40 * ((100vw - 1024px) / 416)) calc(72px + 32 * ((100vw - 1024px) / 416)); max-width: 900px; max-width: calc(900px + 440 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrWelcome { padding: 94px 40px 104px; max-width: 1340px; } } @media (min-width: 640px) { .enroll-is-sticky .c-plyrWelcome { margin-top: 70px; } } @media (min-width: 1024px) { .enroll-is-sticky .c-plyrWelcome { margin-top: 60px; margin-top: calc(60px + 24 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .enroll-is-sticky .c-plyrWelcome { margin-top: 84px; } } @media (min-width: 640px) { .enroll-is-sticky.is-open-enrollment .c-plyrWelcome { margin-top: 79px; } } @media (min-width: 1024px) { .enroll-is-sticky.is-open-enrollment .c-plyrWelcome { margin-top: 68px; margin-top: calc(68px + 24 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .enroll-is-sticky.is-open-enrollment .c-plyrWelcome { margin-top: 87px; } } @media (min-width: 640px) { .enroll-is-sticky.is-open-enrollment.is-open-enroll-timer .c-plyrWelcome { margin-top: 226px; } } @media (min-width: 1024px) { .enroll-is-sticky.is-open-enrollment.is-open-enroll-timer .c-plyrWelcome { margin-top: 276px; margin-top: calc(276px + 122 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .enroll-is-sticky.is-open-enrollment.is-open-enroll-timer .c-plyrWelcome { margin-top: 398px; } } .c-plyrWelcome__left { margin-right: auto; margin-left: auto; padding: 64px 26px 36px; padding: calc(64px + 64 * ((100vw - 320px) / 320)) calc(26px + 26 * ((100vw - 320px) / 320)) calc(36px + 36 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-plyrWelcome__left { padding: 64px 26px 54px; } } @media (min-width: 1024px) { .c-plyrWelcome__left { width: 49.95%; padding: 42px 0 54px 36px; padding: calc(42px + 20 * ((100vw - 1024px) / 416)) calc(0px + 36 * ((100vw - 1024px) / 416)) calc(54px - 18 * ((100vw - 1024px) / 416)) 36px; } .c-plyrWelcome__left:nth-child(1n) { float: left; margin-right: 0; clear: none; } .c-plyrWelcome__left:last-child { margin-right: 0; } .c-plyrWelcome__left:nth-child(2n) { margin-right: 0; float: right; } .c-plyrWelcome__left:nth-child(2n + 1) { clear: both; } } @media (min-width: 1440px) { .c-plyrWelcome__left { width: calc(99.9% * 1/2 - 1rem); padding: 62px 36px 36px; } .c-plyrWelcome__left:nth-child(1n) { float: left; margin-right: 2rem; clear: none; } .c-plyrWelcome__left:last-child { margin-right: 0; } .c-plyrWelcome__left:nth-child(2n) { margin-right: 0; float: right; } .c-plyrWelcome__left:nth-child(2n + 1) { clear: both; } } .c-plyrWelcome__leftTitle { margin: 0 auto 31px; text-align: center; line-height: 1; /* Responsive Sizing Custom */ margin-bottom: calc(31px + 31 * ((100vw - 320px) / 320)); font-size: calc(33px + 33 * ((100vw - 320px) / 320)); letter-spacing: calc(1px + 1 * ((100vw - 320px) /320)); font-size: calc(33px + 33 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-plyrWelcome__leftTitle { font-size: 36px; line-height: 40px; margin-bottom: 26px; } } @media (min-width: 1024px) { .c-plyrWelcome__leftTitle { text-align: left; /* Responsive Sizing Custom */ margin-bottom: 13px; margin-bottom: calc(13px + 7 * ((100vw - 1024px) / 416)); font-size: calc(36px + 18 * ((100vw - 1024px) / 416)); line-height: calc(43px + 23.6 * ((100vw - 1024px) / 416)); letter-spacing: calc(1.5px - .2 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrWelcome__leftTitle { margin-bottom: 20px; font-size: 54px; line-height: 63.6px; letter-spacing: 1.3px; } } .c-plyrWelcome__paraItalic { font-size: 15px; line-height: 24px; max-width: 270px; margin: 0 auto; margin-bottom: 30px; letter-spacing: 0px; text-align: center; /* Responsive Sizing Custom */ font-size: calc(15px + 15 * ((100vw - 320px) / 320)); line-height: calc(24px + 24 * ((100vw - 320px) / 320)); max-width: calc(270px + 270 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-plyrWelcome__paraItalic { max-width: 456px; font-size: 15px; letter-spacing: .3px; margin-bottom: 31px; line-height: 2; } } @media (min-width: 1024px) { .c-plyrWelcome__paraItalic { text-align: left; font-size: 14px; letter-spacing: .3px; line-height: 22px; margin: 0; margin-bottom: 24px; max-width: 366px; /* Responsive Sizing Custom */ margin-bottom: 24px; margin-bottom: calc(24px + 10 * ((100vw - 1024px) / 416)); font-size: calc(14px + 8 * ((100vw - 1024px) / 416)); line-height: calc(22px + 8 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrWelcome__paraItalic { font-size: 22px; line-height: 30px; max-width: 530px; margin-bottom: 34px; } } .c-plyrWelcome__para { text-align: center; font-size: 13px; letter-spacing: .5px; max-width: 265px; line-height: 27px; margin: 0 auto; margin-bottom: 27px; /* Responsive Sizing Custom */ max-width: calc(265px + 265 * ((100vw - 320px) / 320)); font-size: calc(13px + 13 * ((100vw - 320px) / 320)); line-height: calc(27px + 27 * ((100vw - 320px) / 320)); letter-spacing: calc(.5px +.5 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-plyrWelcome__para { max-width: 456px; letter-spacing: .3px; font-size: 13px; line-height: 27px; } } @media (min-width: 1024px) { .c-plyrWelcome__para { margin: 0; margin-bottom: 27px; max-width: 350px; text-align: left; /* Responsive Sizing Custom */ margin-bottom: calc(27px + 6 * ((100vw - 1024px) / 416)); max-width: calc(350px + 150 * ((100vw - 1024px) / 416)); font-size: calc(12px + 5 * ((100vw - 1024px) / 416)); line-height: calc(23px + 10 * ((100vw - 1024px) / 416)); letter-spacing: calc(.3px + .1 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrWelcome__para { font-size: 17px; letter-spacing: .4px; max-width: 500px; line-height: 33px; margin-bottom: 33px; } .c-plyrWelcome__para:nth-of-type(3) { padding-right: 30px; } } .c-plyrWelcome__para:last-of-type { margin-bottom: 0; } .c-plyrWelcome__right { padding: 52px 0 84px; padding: calc(52px + 52 * ((100vw - 320px) / 320)) 0 calc(84px + 84 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-plyrWelcome__right { padding: 37px 0 0; } } @media (min-width: 1024px) { .c-plyrWelcome__right { width: 49.95%; padding: 37px 0 58px 46px; padding: calc(37px + 21 * ((100vw - 1024px) / 416)) calc(0px + 58 * ((100vw - 1024px) / 416)) calc(58px + 26 * ((100vw - 1024px) / 416)) calc(46px + 38 * ((100vw - 1024px) / 416)); } .c-plyrWelcome__right:nth-child(1n) { float: left; margin-right: 0; clear: none; } .c-plyrWelcome__right:last-child { margin-right: 0; } .c-plyrWelcome__right:nth-child(2n) { margin-right: 0; float: right; } .c-plyrWelcome__right:nth-child(2n + 1) { clear: both; } } @media (min-width: 1440px) { .c-plyrWelcome__right { width: calc(99.9% * 1/2 - 1rem); padding: 58px 58px 84px 58px; } .c-plyrWelcome__right:nth-child(1n) { float: left; margin-right: 2rem; clear: none; } .c-plyrWelcome__right:last-child { margin-right: 0; } .c-plyrWelcome__right:nth-child(2n) { margin-right: 0; float: right; } .c-plyrWelcome__right:nth-child(2n + 1) { clear: both; } } .c-plyrWelcome__rightTitle { font-size: 22px; line-height: 38px; letter-spacing: .3px; margin: 0 auto; margin-bottom: 40px; text-align: center; max-width: 240px; /* Responsive Sizing Custom */ margin-bottom: calc(40px + 40 * ((100vw - 320px) / 320)); max-width: calc(240px + 240 * ((100vw - 320px) / 320)); line-height: calc(38px + 38 * ((100vw - 320px) / 320)); letter-spacing: calc(.3px + .3 * ((100vw - 320px) / 320)); font-size: calc(22px + 22 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-plyrWelcome__rightTitle { max-width: 460px; font-size: 28px; letter-spacing: .6px; margin-bottom: 35px; } } @media (min-width: 1024px) { .c-plyrWelcome__rightTitle { max-width: none; letter-spacing: .4px; font-size: 21px; text-align: left; margin-bottom: 29px; /* Responsive Sizing Custom */ margin-bottom: calc(24px + 10 * ((100vw - 1024px) / 416)); letter-spacing: calc(.4px + .3 * ((100vw - 1024px) / 416)); line-height: calc(41px + 4 * ((100vw - 1024px) / 416)); font-size: calc(21px + 9 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrWelcome__rightTitle { font-size: 30px; line-height: 45px; letter-spacing: .7px; margin-bottom: 45px; } } .c-plyrWelcome__bulletsContainer {} @media(min-width: 640px) { .c-plyrWelcome__bulletsContainer { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; padding: 0 48px; } } @media(min-width: 1024px) { .c-plyrWelcome__bulletsContainer { padding: 0; -ms-flex-wrap: no-wrap; -webkit-flex-wrap: no-wrap; flex-wrap: no-wrap; display: block; } } .c-plyrWelcome__bulletSection { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; margin-bottom: 42px; /* Responsive Sizing Custom */ margin-bottom: calc(42px + 42 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-plyrWelcome__bulletSection { width: 50%; } } @media (min-width: 1024px) { .c-plyrWelcome__bulletSection { width: auto; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; margin-bottom: 32px; } } @media (min-width: 1440px) { .c-plyrWelcome__bulletSection { margin-bottom: 48px; } } .c-plyrWelcome__bulletSection:nth-of-type(2) .c-plyrWelcome__bulletIconContainer { padding-top: 5px; /* Responsive Sizing */ } @media screen and (min-width: 320px) and (max-width: 639px) { .c-plyrWelcome__bulletSection:nth-of-type(2) .c-plyrWelcome__bulletIconContainer { padding-top: calc(5px + 5 * ((100vw - 320px) / 320)); } } .c-plyrWelcome__bulletSection:nth-of-type(3) .c-plyrWelcome__bulletIconContainer { padding-top: 7px; /* Responsive Sizing */ } @media screen and (min-width: 320px) and (max-width: 639px) { .c-plyrWelcome__bulletSection:nth-of-type(3) .c-plyrWelcome__bulletIconContainer { padding-top: calc(7px + 7 * ((100vw - 320px) / 320)); } } .c-plyrWelcome__bulletSection:nth-of-type(4) { margin-bottom: 0; } .c-plyrWelcome__bulletSection:nth-of-type(4) .c-plyrWelcome__bulletIconContainer { padding-top: 7px; /* Responsive Sizing */ } @media screen and (min-width: 320px) and (max-width: 639px) { .c-plyrWelcome__bulletSection:nth-of-type(4) .c-plyrWelcome__bulletIconContainer { padding-top: calc(7px + 7 * ((100vw - 320px) / 320)); } } .c-plyrWelcome__bulletIconContainer { text-align: center; } @media (min-width: 640px) { .c-plyrWelcome__bulletIconContainer {} } @media (min-width: 1024px) { .c-plyrWelcome__bulletIconContainer { width: 34px; text-align: left; } } @media (min-width: 1440px) { .c-plyrWelcome__bulletIconContainer { width: 46px; text-align: center; } } .c-plyrWelcome__bulletIcon { -ms-flex-item-align: center; -ms-grid-row-align: center; -webkit-align-self: center; align-self: center; margin-bottom: 10px; /* Responsive Sizing Custom */ margin-bottom: calc(10px + 10 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-plyrWelcome__bulletIcon { margin-bottom: 10px; } } @media (min-width: 1024px) { .c-plyrWelcome__bulletIcon { -ms-flex-item-align: start; -webkit-align-self: flex-start; align-self: flex-start; } } @media (min-width: 1440px) { .c-plyrWelcome__bulletIcon {} } .c-plyrWelcome__bulletIcon.c-plyrWelcome__bulletIcon--1 { width: 27px; /* Responsive Sizing Custom */ width: calc(27px + 27 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-plyrWelcome__bulletIcon.c-plyrWelcome__bulletIcon--1 { width: 22px; } } @media (min-width: 1024px) { .c-plyrWelcome__bulletIcon.c-plyrWelcome__bulletIcon--1 { width: 24px; } } @media (min-width: 1440px) { .c-plyrWelcome__bulletIcon.c-plyrWelcome__bulletIcon--1 { width: 33px; } } .c-plyrWelcome__bulletIcon.c-plyrWelcome__bulletIcon--2 { width: 36px; /* Responsive Sizing Custom */ width: calc(36px + 36 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-plyrWelcome__bulletIcon.c-plyrWelcome__bulletIcon--2 { width: 34px; } } @media (min-width: 1024px) { .c-plyrWelcome__bulletIcon.c-plyrWelcome__bulletIcon--2 { width: 32px; } } @media (min-width: 1440px) { .c-plyrWelcome__bulletIcon.c-plyrWelcome__bulletIcon--2 { width: 46px; } } .c-plyrWelcome__bulletIcon.c-plyrWelcome__bulletIcon--3 { width: 28px; /* Responsive Sizing Custom */ width: calc(28px + 28 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-plyrWelcome__bulletIcon.c-plyrWelcome__bulletIcon--3 { width: 26px; } } @media (min-width: 1024px) { .c-plyrWelcome__bulletIcon.c-plyrWelcome__bulletIcon--3 { width: 27px; } } @media (min-width: 1440px) { .c-plyrWelcome__bulletIcon.c-plyrWelcome__bulletIcon--3 { width: 37px; } } .c-plyrWelcome__bulletIcon.c-plyrWelcome__bulletIcon--4 { width: 33px; /* Responsive Sizing Custom */ width: calc(33px + 33 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-plyrWelcome__bulletIcon.c-plyrWelcome__bulletIcon--4 { width: 27px; } } @media (min-width: 1024px) { .c-plyrWelcome__bulletIcon.c-plyrWelcome__bulletIcon--4 { width: 27px; } } @media (min-width: 1440px) { .c-plyrWelcome__bulletIcon.c-plyrWelcome__bulletIcon--4 { width: 41px; } } .c-plyrWelcome__bulletContentSection {} @media (min-width: 640px) { .c-plyrWelcome__bulletContentSection {} } @media (min-width: 1024px) { .c-plyrWelcome__bulletContentSection { margin-left: calc(15px + 9 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrWelcome__bulletContentSection { margin-left: 26px; } } .c-plyrWelcome__bulletTitle { text-transform: uppercase; margin-bottom: 6px; font-size: 12px; letter-spacing: 3.5px; text-align: center; /* Responsive Sizing Custom */ font-size: calc(12px + 12 * ((100vw - 320px) / 320)); letter-spacing: calc(3.5px + 3.5 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-plyrWelcome__bulletTitle { font-size: 11px; letter-spacing: 2.5px; } } @media (min-width: 1024px) { .c-plyrWelcome__bulletTitle { font-size: 11px; letter-spacing: 2.5px; text-align: left; /* Responsive Sizing Custom */ font-size: calc(11px + 5 * ((100vw - 1024px) / 416)); letter-spacing: calc(2.5px + 1 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrWelcome__bulletTitle { text-transform: uppercase; font-size: 16px; letter-spacing: 3.5px; } } .c-plyrWelcome__bulletText { font-size: 15px; text-align: center; margin: 0 auto; max-width: 288px; /* Responsive Sizing Custom */ font-size: calc(15px + 15 * ((100vw - 320px) / 320)); max-width: calc(288px + 288 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-plyrWelcome__bulletText { font-size: 14px; max-width: 190px; } } @media screen and (min-width: 640px) and (max-width: 1023px) { .c-plyrWelcome__bulletText {} .c-plyrWelcome__bulletText:nth-of-type(1), .c-plyrWelcome__bulletText:nth-of-type(2) { max-width: 220px; } } @media (min-width: 1024px) { .c-plyrWelcome__bulletText { text-align: left; font-size: 16px; max-width: 314px; /* Responsive Sizing Custom */ font-size: calc(16px + 6 * ((100vw - 1024px) / 416)); max-width: calc(314px + 122 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrWelcome__bulletText { max-width: 436px; font-size: 22px; } } /* Importing base settings */ /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ .c-plyrTestimonials { position: relative; } .c-plyrTestimonials__arrowBox { position: absolute; z-index: 1; width: 100%; top: 59%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } @media (min-width: 640px) { .c-plyrTestimonials__arrowBox { display: none; } } .c-plyrTestimonials__arrow { width: 23px; height: 50px; background-color: rgba(0, 0, 0, .2); transition: background-color 250ms ease; color: #fff; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; width: calc(23px + 23 * ((100vw - 320px) / 320)); height: calc(50px + 50 * ((100vw - 320px) / 320)); } .c-plyrTestimonials__arrow:hover { cursor: pointer; background-color: rgba(0, 0, 0, .8); } .c-plyrTestimonials__arrow.c-plyrTestimonials__arrow--prev { float: left; -webkit-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; padding: 0 5px 0 10px; padding-right: calc(5px + 5 * ((100vw - 320px) / 320)); padding-left: calc(10px + 10 * ((100vw - 320px) / 320)); } .c-plyrTestimonials__arrow.c-plyrTestimonials__arrow--next { float: right; -webkit-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; padding: 0 10px 0 5px; padding-right: calc(10px + 10 * ((100vw - 320px) / 320)); padding-left: calc(5px + 5 * ((100vw - 320px) / 320)); } .c-plyrTestimonials__arrowImage { -ms-flex-item-align: center; -ms-grid-row-align: center; -webkit-align-self: center; align-self: center; } .c-plyrTestimonials__slider {} .c-plyrTestimonials__slide { background-size: 100%; background-position: center top; background-repeat: no-repeat; height: auto; } @media (min-width: 640px) { .c-plyrTestimonials__slide { height: 460px; background-size: cover; background-position: center center; } } @media (min-width: 1024px) { .c-plyrTestimonials__slide { height: 507px; /* Responsive Sizing Custom */ height: calc(507px + 209 * ((100vw - 1024px) / 416)); } } @media (min-width: 1280px) { .c-plyrTestimonials__slide { background-position: center right; } } @media (min-width: 1440px) { .c-plyrTestimonials__slide { height: 716px; } } .c-plyrTestimonials__slide.c-plyrTestimonials__slide--1 { background-image: url('images/player-page/testimonial-1-bg-m1x.jpg'); } @media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (-moz-min-device-pixel-ratio: 1.5), screen and (min-device-pixel-ratio: 1.5) { .c-plyrTestimonials__slide.c-plyrTestimonials__slide--1 { background-image: url('images/player-page/testimonial-1-bg-m2x.jpg'); } } @media (min-width: 640px) { .c-plyrTestimonials__slide.c-plyrTestimonials__slide--1 { background-image: url('images/player-page/testimonial-1-bg-ml.jpg'); } } @media (min-width: 1024px) { .c-plyrTestimonials__slide.c-plyrTestimonials__slide--1 { background-image: url('images/player-page/testimonial-1-bg.jpg'); } } @media (min-width: 1280px) { .c-plyrTestimonials__slide.c-plyrTestimonials__slide--1 { background-image: url('images/player-page/testimonial-1-bg-desktop.jpg'); } } @media (min-width: 1024px) and screen and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 1024px) and screen and (-moz-min-device-pixel-ratio: 1.5), (min-width: 1024px) and screen and (min-device-pixel-ratio: 1.5) { .c-plyrTestimonials__slide.c-plyrTestimonials__slide--1 { background-image: url('images/player-page/testimonial-1-bg@2x.jpg'); } } @media (min-width: 640px) and screen and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 640px) and screen and (-moz-min-device-pixel-ratio: 1.5), (min-width: 640px) and screen and (min-device-pixel-ratio: 1.5) { .c-plyrTestimonials__slide.c-plyrTestimonials__slide--1 { background-image: url('images/player-page/testimonial-1-bg-ml@2x.jpg'); } } .c-plyrTestimonials__slide.c-plyrTestimonials__slide--2 { background-image: url('images/player-page/testimonial-2-bg-m1x.jpg'); } @media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (-moz-min-device-pixel-ratio: 1.5), screen and (min-device-pixel-ratio: 1.5) { .c-plyrTestimonials__slide.c-plyrTestimonials__slide--2 { background-image: url('images/player-page/testimonial-2-bg-m2x.jpg'); } } @media (min-width: 640px) { .c-plyrTestimonials__slide.c-plyrTestimonials__slide--2 { background-image: url('images/player-page/testimonial-2-bg-ml.jpg'); } } @media (min-width: 1024px) { .c-plyrTestimonials__slide.c-plyrTestimonials__slide--2 { background-image: url('images/player-page/testimonial-2-bg.jpg'); } } @media (min-width: 1280px) { .c-plyrTestimonials__slide.c-plyrTestimonials__slide--2 { background-image: url('images/player-page/testimonial-2-bg-desktop.jpg'); } } @media (min-width: 1024px) and screen and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 1024px) and screen and (-moz-min-device-pixel-ratio: 1.5), (min-width: 1024px) and screen and (min-device-pixel-ratio: 1.5) { .c-plyrTestimonials__slide.c-plyrTestimonials__slide--2 { background-image: url('images/player-page/testimonial-2-bg@2x.jpg'); } } @media (min-width: 640px) and screen and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 640px) and screen and (-moz-min-device-pixel-ratio: 1.5), (min-width: 640px) and screen and (min-device-pixel-ratio: 1.5) { .c-plyrTestimonials__slide.c-plyrTestimonials__slide--2 { background-image: url('images/player-page/testimonial-2-bg-ml@2x.jpg'); } } .c-plyrTestimonials__slide.c-plyrTestimonials__slide--3 { background-image: url('images/player-page/testimonial-3-bg-m1x.jpg'); } @media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (-moz-min-device-pixel-ratio: 1.5), screen and (min-device-pixel-ratio: 1.5) { .c-plyrTestimonials__slide.c-plyrTestimonials__slide--3 { background-image: url('images/player-page/testimonial-3-bg-m2x.jpg'); } } @media (min-width: 640px) { .c-plyrTestimonials__slide.c-plyrTestimonials__slide--3 { background-image: url('images/player-page/testimonial-3-bg-ml.jpg'); } } @media (min-width: 1024px) { .c-plyrTestimonials__slide.c-plyrTestimonials__slide--3 { background-image: url('images/player-page/testimonial-3-bg.jpg'); } } @media (min-width: 1280px) { .c-plyrTestimonials__slide.c-plyrTestimonials__slide--3 { background-image: url('images/player-page/testimonial-3-bg-desktop.jpg'); } } @media (min-width: 1024px) and screen and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 1024px) and screen and (-moz-min-device-pixel-ratio: 1.5), (min-width: 1024px) and screen and (min-device-pixel-ratio: 1.5) { .c-plyrTestimonials__slide.c-plyrTestimonials__slide--3 { background-image: url('images/player-page/testimonial-3-bg@2x.jpg'); } } @media (min-width: 640px) and screen and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 640px) and screen and (-moz-min-device-pixel-ratio: 1.5), (min-width: 640px) and screen and (min-device-pixel-ratio: 1.5) { .c-plyrTestimonials__slide.c-plyrTestimonials__slide--3 { background-image: url('images/player-page/testimonial-3-bg-ml@2x.jpg'); } } .c-plyrTestimonials__slide.c-plyrTestimonials__slide--4 { background-image: url('images/player-page/testimonial-4-bg-m1x.jpg'); } @media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (-moz-min-device-pixel-ratio: 1.5), screen and (min-device-pixel-ratio: 1.5) { .c-plyrTestimonials__slide.c-plyrTestimonials__slide--4 { background-image: url('images/player-page/testimonial-4-bg-m2x.jpg'); } } @media (min-width: 640px) { .c-plyrTestimonials__slide.c-plyrTestimonials__slide--4 { background-image: url('images/player-page/testimonial-4-bg-ml.jpg'); } } @media (min-width: 1024px) { .c-plyrTestimonials__slide.c-plyrTestimonials__slide--4 { background-image: url('images/player-page/testimonial-4-bg.jpg'); } } @media (min-width: 1280px) { .c-plyrTestimonials__slide.c-plyrTestimonials__slide--4 { background-image: url('images/player-page/testimonial-4-bg-desktop.jpg'); } } @media (min-width: 1024px) and screen and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 1024px) and screen and (-moz-min-device-pixel-ratio: 1.5), (min-width: 1024px) and screen and (min-device-pixel-ratio: 1.5) { .c-plyrTestimonials__slide.c-plyrTestimonials__slide--4 { background-image: url('images/player-page/testimonial-4-bg@2x.jpg'); } } @media (min-width: 640px) and screen and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 640px) and screen and (-moz-min-device-pixel-ratio: 1.5), (min-width: 640px) and screen and (min-device-pixel-ratio: 1.5) { .c-plyrTestimonials__slide.c-plyrTestimonials__slide--4 { background-image: url('images/player-page/testimonial-4-bg-ml@2x.jpg'); } } .c-plyrTestimonials__contentBox { max-width: 1276px; margin-left: auto; margin-right: auto; padding: 30px 32px 36px; position: relative; /* Responsive Sizing Custom */ padding: calc(30px + 30 * ((100vw - 320px) / 320)) calc(32px + 32 * ((100vw - 320px) / 320)) calc(36px + 36 * ((100vw - 320px) / 320)); } .c-plyrTestimonials__contentBox:before { /* Responsive Sizing Custom */ content: ''; display: table; } .c-plyrTestimonials__contentBox:after { /* Responsive Sizing Custom */ content: ''; display: table; clear: both; } .c-plyrTestimonials__slide--2 .c-plyrTestimonials__contentBox, .c-plyrTestimonials__slide--3 .c-plyrTestimonials__contentBox, .c-plyrTestimonials__slide--4 .c-plyrTestimonials__contentBox {} .c-plyrTestimonials__contentBox:before { content: ''; position: absolute; bottom: 0; left: 0; height: 40px; width: 100%; -webkit-transform: translateY(100%); transform: translateY(100%); } @media (min-width: 640px) { .c-plyrTestimonials__contentBox { background-color: transparent; padding: 47px 29px 0; } .c-plyrTestimonials__contentBox:before { content: none; } } @media (min-width: 1024px) { .c-plyrTestimonials__contentBox { padding: 88px 88px 0; /* Responsive Sizing Custom */ padding: calc(88px + 6 * ((100vw - 1024px) / 416)) calc(82px - 42 * ((100vw - 1024px) / 416)) 0; } } @media (min-width: 1440px) { .c-plyrTestimonials__contentBox { padding: 94px 40px 0; } } @media (min-width: 640px) { .c-plyrTestimonials__slide--2 .c-plyrTestimonials__contentBox, .c-plyrTestimonials__slide--3 .c-plyrTestimonials__contentBox, .c-plyrTestimonials__slide--4 .c-plyrTestimonials__contentBox { padding: 29px 27px 0; } } @media (min-width: 1024px) { .c-plyrTestimonials__slide--2 .c-plyrTestimonials__contentBox, .c-plyrTestimonials__slide--3 .c-plyrTestimonials__contentBox, .c-plyrTestimonials__slide--4 .c-plyrTestimonials__contentBox { padding: 50px 88px 0; /* Responsive Sizing Custom */ padding: calc(50px + 44 * ((100vw - 1024px) / 416)) calc(82px - 42 * ((100vw - 1024px) / 416)) 0; } } @media (min-width: 1440px) { .c-plyrTestimonials__slide--2 .c-plyrTestimonials__contentBox, .c-plyrTestimonials__slide--3 .c-plyrTestimonials__contentBox, .c-plyrTestimonials__slide--4 .c-plyrTestimonials__contentBox { padding: 94px 40px 0; } } .c-plyrTestimonials__slideTitle { margin-bottom: 34px; text-align: center; font-size: 32px; line-height: 40px; /* Responsive Sizing Custom */ margin-bottom: calc(34px + 34 * ((100vw - 320px) / 320)); font-size: calc(32px + 32 * ((100vw - 320px) / 320)); line-height: calc(40px + 40 * ((100vw - 320px) / 320)); } .c-plyrTestimonials__slide--2 .c-plyrTestimonials__slideTitle, .c-plyrTestimonials__slide--3 .c-plyrTestimonials__slideTitle, .c-plyrTestimonials__slide--4 .c-plyrTestimonials__slideTitle {} @media (min-width: 640px) { .c-plyrTestimonials__slideTitle { text-align: left; font-size: 31px; line-height: 40px; margin-bottom: 21px; width: 300px; } } @media (min-width: 1024px) { .c-plyrTestimonials__slideTitle { /* Responsive Sizing Custom */ width: 490px; margin-bottom: 20px; font-size: 34px; line-height: 43px; letter-spacing: 1px; /* Responsive Sizing Custom */ width: calc(490px + 190 * ((100vw - 1024px) / 416)); margin-bottom: calc(20px + 11 * ((100vw - 1024px) / 416)); font-size: calc(34px + 14 * ((100vw - 1024px) / 416)); line-height: calc(43px + 20.6 * ((100vw - 1024px) / 416)); letter-spacing: calc(1px + .3 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrTestimonials__slideTitle { width: 680px; margin-bottom: 31px; font-size: 48px; line-height: 63.6px; letter-spacing: 1.3px; } } @media (min-width: 640px) { .c-plyrTestimonials__slide--2 .c-plyrTestimonials__slideTitle, .c-plyrTestimonials__slide--3 .c-plyrTestimonials__slideTitle, .c-plyrTestimonials__slide--4 .c-plyrTestimonials__slideTitle { margin-bottom: 14px; } } @media (min-width: 1024px) { .c-plyrTestimonials__slide--2 .c-plyrTestimonials__slideTitle, .c-plyrTestimonials__slide--3 .c-plyrTestimonials__slideTitle, .c-plyrTestimonials__slide--4 .c-plyrTestimonials__slideTitle {} } @media (min-width: 1440px) { .c-plyrTestimonials__slide--2 .c-plyrTestimonials__slideTitle, .c-plyrTestimonials__slide--3 .c-plyrTestimonials__slideTitle, .c-plyrTestimonials__slide--4 .c-plyrTestimonials__slideTitle {} } .c-plyrTestimonials__slideQuote { position: relative; line-height: 29px; letter-spacing: .5px; font-weight: 400; margin-top: 196px; padding: 36px 12px 0 22px; font-size: 16px; margin-bottom: 0; color: #000; /* Responsive Sizing Custom */ margin-top: calc(196px + 196 * ((100vw - 320px) / 320)); padding: calc(36px + 36 * ((100vw - 320px) / 320)) calc(12px + 12 * ((100vw - 320px) / 320)) 0 calc(22px + 22 * ((100vw - 320px) / 320)); font-size: calc(16px + 16 * ((100vw - 320px) / 320)); line-height: calc(29px + 29 * ((100vw - 320px) / 320)); letter-spacing: calc(.5px + .5 * ((100vw - 320px) / 320)); } .c-plyrTestimonials__slideQuote a { color: #000; } .c-plyrTestimonials__slide--2 .c-plyrTestimonials__slideQuote, .c-plyrTestimonials__slide--3 .c-plyrTestimonials__slideQuote, .c-plyrTestimonials__slide--4 .c-plyrTestimonials__slideQuote {} .c-plyrTestimonials__slide--2 .c-plyrTestimonials__slideQuote:before, .c-plyrTestimonials__slide--3 .c-plyrTestimonials__slideQuote:before, .c-plyrTestimonials__slide--4 .c-plyrTestimonials__slideQuote:before { margin-left: -63px; font-size: 60px; left: 33px; top: 7px; } .c-plyrTestimonials__slide--2 .c-plyrTestimonials__slideQuote {} .c-plyrTestimonials__slide--3 .c-plyrTestimonials__slideQuote {} @media (min-width: 640px) { .c-plyrTestimonials__slideQuote { margin-top: 0; padding: 0; color: #fff; letter-spacing: 0; font-size: 17px; margin-left: 20px; margin-bottom: 20px; line-height: 26px; width: 295px; } } @media (min-width: 1024px) { .c-plyrTestimonials__slideQuote { letter-spacing: 0; font-size: 20px; margin-left: 28px; margin-bottom: 24px; line-height: 31px; width: 380px; font-weight: 300; color: #fff; /* Responsive Sizing Custom */ margin-left: calc(28px + 14 * ((100vw - 1024px) / 416)); margin-bottom: calc(24px + 21 * ((100vw - 1024px) / 416)); width: calc(380px + 160 * ((100vw - 1024px) / 416)); font-size: calc(20px + 8 * ((100vw - 1024px) / 416)); line-height: calc(31px + 13 * ((100vw - 1024px) / 416)); letter-spacing: calc(0px + .2 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrTestimonials__slideQuote { margin-left: 42px; font-size: 28px; line-height: 44px; letter-spacing: .2px; width: 540px; margin-bottom: 45px; color: #fff; } } @media (min-width: 640px) { .c-plyrTestimonials__slideQuote a { color: #fff; } } @media (min-width: 640px) { .c-plyrTestimonials__slide--2 .c-plyrTestimonials__slideQuote, .c-plyrTestimonials__slide--3 .c-plyrTestimonials__slideQuote, .c-plyrTestimonials__slide--4 .c-plyrTestimonials__slideQuote { letter-spacing: .5px; font-size: 14px; margin-left: 20px; margin-bottom: 20px; line-height: 21px; width: 305px; } } @media (min-width: 1024px) { .c-plyrTestimonials__slide--2 .c-plyrTestimonials__slideQuote, .c-plyrTestimonials__slide--3 .c-plyrTestimonials__slideQuote, .c-plyrTestimonials__slide--4 .c-plyrTestimonials__slideQuote { letter-spacing: .4px; font-size: 17px; margin-bottom: 28px; line-height: 28px; width: 440px; /* Responsive Sizing Custom */ margin-bottom: calc(28px - 8 * ((100vw - 1024px) / 416)); width: calc(440px + 100 * ((100vw - 1024px) / 416)); font-size: calc(17px + 4 * ((100vw - 1024px) / 416)); line-height: calc(28px + 5 * ((100vw - 1024px) / 416)); letter-spacing: calc(.4px + .1 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrTestimonials__slide--2 .c-plyrTestimonials__slideQuote, .c-plyrTestimonials__slide--3 .c-plyrTestimonials__slideQuote, .c-plyrTestimonials__slide--4 .c-plyrTestimonials__slideQuote { font-size: 21px; line-height: 33px; letter-spacing: .5px; width: 540px; margin-bottom: 20px; margin-left: 38px; } } @media (min-width: 640px) { .c-plyrTestimonials__slide--2 .c-plyrTestimonials__slideQuote:before, .c-plyrTestimonials__slide--3 .c-plyrTestimonials__slideQuote:before, .c-plyrTestimonials__slide--4 .c-plyrTestimonials__slideQuote:before { font-size: 38px; left: 42px; top: 4px; } } @media (min-width: 1024px) { .c-plyrTestimonials__slide--2 .c-plyrTestimonials__slideQuote:before, .c-plyrTestimonials__slide--3 .c-plyrTestimonials__slideQuote:before, .c-plyrTestimonials__slide--4 .c-plyrTestimonials__slideQuote:before { font-size: 42px; left: 38px; /* Responsive Sizing Custom */ font-size: calc(42px + 18 * ((100vw - 1024px) / 416)); left: calc(38px - 11 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrTestimonials__slide--2 .c-plyrTestimonials__slideQuote:before, .c-plyrTestimonials__slide--3 .c-plyrTestimonials__slideQuote:before, .c-plyrTestimonials__slide--4 .c-plyrTestimonials__slideQuote:before { top: 10px; font-size: 60px; left: 27px; } } @media (min-width: 640px) { .c-plyrTestimonials__slide--2 .c-plyrTestimonials__slideQuote { width: 310px; } } @media (min-width: 1024px) { .c-plyrTestimonials__slide--2 .c-plyrTestimonials__slideQuote { width: 440px; width: calc(440px + 100 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrTestimonials__slide--2 .c-plyrTestimonials__slideQuote { width: 540px; } } @media (min-width: 640px) { .c-plyrTestimonials__slide--3 .c-plyrTestimonials__slideQuote { width: 320px; } } @media (min-width: 1024px) { .c-plyrTestimonials__slide--3 .c-plyrTestimonials__slideQuote { width: 440px; width: calc(440px + 100 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrTestimonials__slide--3 .c-plyrTestimonials__slideQuote { width: 540px; } } .c-plyrTestimonials__slideQuote:before { position: absolute; font-family: 'GalaxieCopernicus', serif; margin-left: -63px; font-weight: 400; font-size: 60px; line-height: 1; left: 33px; top: 7px; } @media (min-width: 640px) { .c-plyrTestimonials__slideQuote:before { content: '“'; font-size: 38px; left: 42px; top: 7px; } } @media (min-width: 1024px) { .c-plyrTestimonials__slideQuote:before { font-size: 42px; left: 38px; /* Responsive Sizing Custom */ font-size: calc(42px + 18 * ((100vw - 1024px) / 416)); left: calc(38px - 11 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrTestimonials__slideQuote:before { top: 10px; font-size: 60px; left: 27px; } } .c-plyrTestimonials__slideEndingQuotationMark { fill: #fff; height: 24px; padding-bottom: 8px; padding-left: 9px; /* Responsive Sizing Custom */ height: calc(24px + 24 * ((100vw - 320px) / 320)); padding-bottom: calc(8px + 8 * ((100vw - 320px) / 320)); padding-left: calc(9px + 9 * ((100vw - 320px) / 320)); } .c-plyrTestimonials__slide--2 .c-plyrTestimonials__slideEndingQuotationMark, .c-plyrTestimonials__slide--3 .c-plyrTestimonials__slideEndingQuotationMark, .c-plyrTestimonials__slide--4 .c-plyrTestimonials__slideEndingQuotationMark {} @media (min-width: 640px) { .c-plyrTestimonials__slideEndingQuotationMark { padding-left: 6px; height: 12px; padding-bottom: 2px; } } @media (min-width: 1024px) { .c-plyrTestimonials__slideEndingQuotationMark { height: 13px; padding-bottom: 1px; height: calc(13px + 11 * ((100vw - 1026px) / 416)); padding-bottom: calc(1px + 7 * ((100vw - 1026px) / 416)); } } @media (min-width: 1440px) { .c-plyrTestimonials__slideEndingQuotationMark { height: 24px; padding-left: 9px; padding-bottom: 8px; } } @media (min-width: 640px) { .c-plyrTestimonials__slide--2 .c-plyrTestimonials__slideEndingQuotationMark, .c-plyrTestimonials__slide--3 .c-plyrTestimonials__slideEndingQuotationMark, .c-plyrTestimonials__slide--4 .c-plyrTestimonials__slideEndingQuotationMark { padding-left: 3px; height: 10px; padding-bottom: 1px; } } @media (min-width: 1024px) { .c-plyrTestimonials__slide--2 .c-plyrTestimonials__slideEndingQuotationMark, .c-plyrTestimonials__slide--3 .c-plyrTestimonials__slideEndingQuotationMark, .c-plyrTestimonials__slide--4 .c-plyrTestimonials__slideEndingQuotationMark { padding-left: 9px; height: 15px; padding-bottom: 5px; height: calc(15px + 1 * ((100vw - 1024px) / 416)); padding-bottom: calc(5px - 4 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrTestimonials__slide--2 .c-plyrTestimonials__slideEndingQuotationMark, .c-plyrTestimonials__slide--3 .c-plyrTestimonials__slideEndingQuotationMark, .c-plyrTestimonials__slide--4 .c-plyrTestimonials__slideEndingQuotationMark { height: 16px; padding-bottom: 1px; } } .c-plyrTestimonials__slideInfoBox { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; position: absolute; top: 253px; left: 11px; top: calc(253px + 253 * ((100vw - 320px) / 320)); left: calc(11px + 11 * ((100vw - 320px) / 320)); } .c-plyrTestimonials__slide--2 .c-plyrTestimonials__slideInfoBox, .c-plyrTestimonials__slide--3 .c-plyrTestimonials__slideInfoBox, .c-plyrTestimonials__slide--4 .c-plyrTestimonials__slideInfoBox {} @media (min-width: 640px) { .c-plyrTestimonials__slideInfoBox { position: static; margin-left: 12px; } } @media (min-width: 1024px) { .c-plyrTestimonials__slideInfoBox { margin-left: 24px; /* Responsive Sizing Custom */ margin-left: calc(24px + 18 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrTestimonials__slideInfoBox { margin-left: 42px; } } @media (min-width: 640px) { .c-plyrTestimonials__slide--2 .c-plyrTestimonials__slideInfoBox, .c-plyrTestimonials__slide--3 .c-plyrTestimonials__slideInfoBox, .c-plyrTestimonials__slide--4 .c-plyrTestimonials__slideInfoBox { margin-left: 12px; } } @media (min-width: 1024px) { .c-plyrTestimonials__slide--2 .c-plyrTestimonials__slideInfoBox, .c-plyrTestimonials__slide--3 .c-plyrTestimonials__slideInfoBox, .c-plyrTestimonials__slide--4 .c-plyrTestimonials__slideInfoBox { margin-left: 18px; /* Responsive Sizing Custom */ margin-left: calc(18px + 27 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrTestimonials__slide--2 .c-plyrTestimonials__slideInfoBox, .c-plyrTestimonials__slide--3 .c-plyrTestimonials__slideInfoBox, .c-plyrTestimonials__slide--4 .c-plyrTestimonials__slideInfoBox { margin-left: 35px; } } .c-plyrTestimonials__slideImage { display: none; } @media (min-width: 640px) { .c-plyrTestimonials__slideImage { display: block; border-radius: 50%; margin-right: 16px; width: 31px; height: 31px; margin-right: 12px; } } @media (min-width: 1024px) { .c-plyrTestimonials__slideImage { width: 35px; height: 35px; margin-right: 14px; /* Responsive Sizing Custom */ width: calc(35px + 17 * ((100vw - 1024px) / 416)); height: calc(35px + 17 * ((100vw - 1024px) / 416)); margin-right: calc(14px + 6 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrTestimonials__slideImage { width: 52px; height: 52px; margin-right: 20px; } } .c-plyrTestimonials__slideAttrBox {} .c-plyrTestimonials__slideAttr { position: relative; text-transform: uppercase; font-weight: 500; margin-top: 5px; margin-bottom: 0px; font-size: 9px; letter-spacing: 2px; margin-top: calc(5px + 5 * ((100vw - 320px) / 320)); font-size: calc(9px + 9 * ((100vw - 320px) / 320)); letter-spacing: calc(2px + 2 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-plyrTestimonials__slideAttr { font-size: 10px; letter-spacing: .2px; margin-bottom: 0; margin-top: 3px; font-weight: 400; } } @media (min-width: 1024px) { .c-plyrTestimonials__slideAttr { margin-top: 2px; font-size: 9px; letter-spacing: 1px; /* Responsive Sizing Custom */ margin-top: calc(2px + 3 * ((100vw - 1024px) / 416)); font-size: calc(9px + 6 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrTestimonials__slideAttr { margin-top: 5px; font-size: 13px; } } .c-plyrTestimonials__slideAttr:before { position: absolute; left: -11px; top: 1px; /* Responsive Sizing Custom */ left: calc(-11px -11 * ((100vw - 320px) / 320)); top: calc(1px + 1 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-plyrTestimonials__slideAttr:before { content: '-'; left: -6px; top: -1px; } } @media (min-width: 1024px) { .c-plyrTestimonials__slideAttr:before { top: 0; left: -8px; /* Responsive Sizing Custom */ top: calc(0px + 1 * ((100vw - 1024px) / 416)); font-size: calc(-8px - 3 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrTestimonials__slideAttr:before { top: 1; left: -11px; } } .c-plyrTestimonials__slideLocation { font-size: 11px; padding-top: 2px; /* Responsive Sizing Custom */ font-size: calc(11px + 11 * ((100vw - 320px) / 320)); padding-top: calc(2px + 2 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-plyrTestimonials__slideLocation { font-size: 9px; letter-spacing: 0; } } @media (min-width: 1024px) { .c-plyrTestimonials__slideLocation { padding-top: 0; font-size: 10px; letter-spacing: .2px; padding-left: 3px; /* Responsive Sizing Custom */ padding-left: calc(3px - 3 * ((100vw - 1024px) / 416)); font-size: calc(10px + 4 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrTestimonials__slideLocation { padding-left: 0; font-size: 14px; } } .c-plyrTestimonials__expandedText { display: none; } .c-plyrTestimonials__expandedText.is-expanded { display: inline; } .c-plyrTestimonials__textExpander { text-transform: uppercase; font-size: 10px; line-height: 1; display: block; padding: 25px 23px 0; letter-spacing: 1px; } .c-plyrTestimonials__textExpander:hover { cursor: pointer; } .c-plyrTestimonials__nav { background-color: #f7f7f7; } @media (min-width: 640px) { .c-plyrTestimonials__nav {} } .c-plyrTestimonials__navInner { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: distribute; -webkit-justify-content: space-around; justify-content: space-around; max-width: 1220px; margin: 0 auto; } @media (min-width: 640px) { .c-plyrTestimonials__navInner { padding: 20px 30px; } } @media (min-width: 1024px) { .c-plyrTestimonials__navInner { padding: 20px 98px; /* Responsive Sizing Custom */ padding: calc(20px + 8 * ((100vw - 1024px) / 416)) calc(98px - 98 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrTestimonials__navInner { padding: 28px 0; } } .c-plyrTestimonials__navItem { display: -webkit-box !important; display: -ms-flexbox !important; display: -webkit-flex !important; display: flex !important; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; padding: 18px 0; padding: calc(18px + 18 * ((100vw - 320px) / 320)) 0; } @media (min-width: 640px) { .c-plyrTestimonials__navItem { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; padding: 0; } } @media (min-width: 1024px) { .c-plyrTestimonials__navItem { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; } } @media (min-width: 1440px) { .c-plyrTestimonials__navItem {} } .c-plyrTestimonials__navItem:hover { cursor: pointer; } .c-plyrTestimonials__navItem:focus { outline: none; } .c-plyrTestimonials__navItem:hover .c-plyrTestimonials__navImage { opacity: 1; cursor: pointer; } .c-plyrTestimonials__navItem.is-active .c-plyrTestimonials__navImage {} @media (min-width: 640px) { .c-plyrTestimonials__navItem.is-active .c-plyrTestimonials__navImage { opacity: 1; } } @media (orientation:landscape) { .c-plyrTestimonials__navItem.is-active .c-plyrTestimonials__navImage { opacity: 1; } } .c-plyrTestimonials__navItem.slick-active .c-plyrTestimonials__navImage {} @media (max-width: 639px) { .c-plyrTestimonials__navItem.slick-active .c-plyrTestimonials__navImage { opacity: 1; } } .c-plyrTestimonials__navItem.is-prev-slide, .c-plyrTestimonials__navItem.is-starting-prev-slide {} @media (max-width: 639px) { .c-plyrTestimonials__navItem.is-prev-slide, .c-plyrTestimonials__navItem.is-starting-prev-slide { -webkit-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; } .c-plyrTestimonials__navItem.is-prev-slide .c-plyrTestimonials__navImage, .c-plyrTestimonials__navItem.is-starting-prev-slide .c-plyrTestimonials__navImage { margin-right: 6px; margin-right: calc(6px - 32 * ((100vw - 320px) / 320)); } } .c-plyrTestimonials__navItem.is-next-slide, .c-plyrTestimonials__navItem.is-starting-next-slide {} @media (max-width: 639px) { .c-plyrTestimonials__navItem.is-next-slide, .c-plyrTestimonials__navItem.is-starting-next-slide { -webkit-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; } } .c-plyrTestimonials__navItem.is-prev-slide.is-starting-next-slide {} @media (max-width: 639px) { .c-plyrTestimonials__navItem.is-prev-slide.is-starting-next-slide { -webkit-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; } .c-plyrTestimonials__navItem.is-prev-slide.is-starting-next-slide .c-plyrTestimonials__navImage { margin-right: 6px; margin-right: calc(6px - 32 * ((100vw - 320px) / 320)); } } .c-plyrTestimonials__navItem.is-next-slide.is-starting-prev-slide {} @media (max-width: 639px) { .c-plyrTestimonials__navItem.is-next-slide.is-starting-prev-slide { -webkit-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; } } .c-plyrTestimonials__navItem.slick-current.is-starting-next-slide { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .c-plyrTestimonials__navItem--child {} @media (max-width: 768px) { .c-plyrTestimonials__navItem--child { max-width: 300px; margin: auto; } } .c-plyrTestimonials__navImage { border-radius: 50%; opacity: .3; transition: opacity 250ms ease; width: 65px; height: 65px; margin-right: 17px; width: calc(65px + 65 * ((100vw - 320px) / 320)); height: calc(65px + 65 * ((100vw - 320px) / 320)); margin-right: calc(17px + 17 * ((100vw - 320px) / 320)); } .slick-active .c-plyrTestimonials__navImage { opacity: 1; margin-right: 17px; } @media (min-width: 640px) { .c-plyrTestimonials__navImage { width: 65px; height: 65px; margin-right: 0; } } @media (min-width: 1024px) { .c-plyrTestimonials__navImage { margin-right: 10px; /* Responsive Sizing Custom */ margin-right: calc(10px + 10 * ((100vw - 1024px) / 416)); width: calc(65px + 24 * ((100vw - 1024px) / 416)); height: calc(65px + 24 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrTestimonials__navImage { width: 89px; height: 89px; margin-right: 18px; } } .c-plyrTestimonials__navContentBox { color: #525252; display: none; } .slick-active .c-plyrTestimonials__navContentBox { display: block; } @media (min-width: 640px) { .c-plyrTestimonials__navContentBox { display: block; margin-top: 12px; } } @media (min-width: 1024px) { .c-plyrTestimonials__navContentBox { margin-top: 0; /* Responsive Sizing Custom */ margin-top: calc(0px + 3 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrTestimonials__navContentBox { margin-top: 3px; } } .c-plyrTestimonials__navName { display: block; margin-bottom: 6px; text-transform: uppercase; line-height: 1; text-align: left; font-size: 9px; letter-spacing: .8px; margin-bottom: calc(6px + 6 * ((100vw - 320px) / 320)); font-size: calc(9px + 9 * ((100vw - 320px) / 320)); letter-spacing: calc(.8px + .8 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-plyrTestimonials__navName { text-align: center; font-size: 8px; letter-spacing: 1.5px; margin-bottom: 3px; } } @media (min-width: 1024px) { .c-plyrTestimonials__navName { text-align: left; font-size: 9px; font-weight: 500; /* Responsive Sizing Custom */ margin-bottom: calc(3px + 4 * ((100vw - 1024px) / 416)); font-size: calc(9px + 3 * ((100vw - 1024px) / 416)); letter-spacing: calc(2px + .5px * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrTestimonials__navName { font-weight: 700; font-size: 12px; letter-spacing: 2.5px; margin-bottom: 10px; } } .c-plyrTestimonials__navPosition { text-align: left; font-size: 11px; letter-spacing: .4px; line-height: 1; font-size: calc(11px + 11 * ((100vw - 320px) / 320)); letter-spacing: calc(.4px + .4 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-plyrTestimonials__navPosition { text-align: center; font-size: 11px; letter-spacing: .4px; line-height: 1; } } @media (min-width: 1024px) { .c-plyrTestimonials__navPosition { text-align: left; /* Responsive Sizing Custom */ font-size: 9px; font-size: calc(9px + 5 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrTestimonials__navPosition { font-size: 14px; } } /* Importing base settings */ /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ .c-plyrAbout { /* Responsive Sizing Custom */ padding-top: 56px; padding-bottom: 50px; padding-top: calc(56px + 20 * ((100vw - 320px) / 320)); padding-bottom: calc(50px + 26 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-plyrAbout { padding-top: 76px; padding-bottom: 76px; } } @media (min-width: 1024px) { .c-plyrAbout { /* Responsive Sizing Custom */ padding-top: 123px; padding-bottom: 123px; padding-top: calc(123px + 7 * ((100vw - 1024px) / 416)); padding-bottom: calc(123px + 7 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrAbout { padding-top: 127px; padding-bottom: 127px; } } .c-plyrAbout__contentSection { margin: 0 auto; max-width: 630px; } @media (min-width: 1024px) { .c-plyrAbout__contentSection { float: left; /* Responsive Sizing Custom */ max-width: 480px; max-width: calc(480px + 150 * ((100vw - 1024px) / 416)); margin-top: 7px; margin-top: calc(7px + 3 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrAbout__contentSection { max-width: 630px; margin-top: 10px; } } .c-plyrAbout__title { text-align: center; margin: 0 auto 30px; /* Responsive Sizing Custom */ margin-bottom: 30px; margin-bottom: calc(30px + 2 * ((100vw - 320px) / 320)); font-size: calc(28px + 3 * ((100vw - 320px) / 320)); line-height: calc(35px + 5 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-plyrAbout__title { font-size: 31px; line-height: 40px; margin-bottom: 26px; } } @media (min-width: 1024px) { .c-plyrAbout__title { text-align: left; /* Responsive Sizing Custom */ margin-bottom: 32px; margin-bottom: calc(32px + 8 * ((100vw - 1024px) / 416)); font-size: calc(36px + 12 * ((100vw - 1024px) / 416)); line-height: calc(43px + 23.6 * ((100vw - 1024px) / 416)); letter-spacing: calc(1px + .3 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrAbout__title { margin-bottom: 40px; font-size: 48px; line-height: 63.6px; letter-spacing: 1.3px; } } .c-plyrAbout__content { letter-spacing: .3px; text-align: center; /* Responsive Typography */ font-size: calc(13px + 4 * ((100vw - 320px) / 320)); line-height: calc(27px + 7 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-plyrAbout__content { font-size: 13px; line-height: 27px; letter-spacing: .35px; max-width: 450px; margin: 0 auto; } } @media (min-width: 1024px) { .c-plyrAbout__content { text-align: left; margin: 0; /* Responsive Sizing Custom */ max-width: 365px; max-width: calc(365px + 151 * ((100vw - 1024px) / 416)); font-size: calc(12px + 5 * ((100vw - 1024px) / 416)); letter-spacing: calc(.3px + .2 * ((100vw - 1024px) / 416)); line-height: calc(23px + 10 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrAbout__content { max-width: 516px; font-size: 17px; letter-spacing: .5px; line-height: 33px; } } .c-plyrWelcome__image { display: block; margin: 0 auto 35px; height: auto; /* Responsive Sizing Custom */ max-width: 266px; max-width: calc(266px + 110 * ((100vw - 320px) / 320)); margin-bottom: 35px; margin-bttom: calc(35px + 5 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-plyrWelcome__image { margin-bottom: 40px; /* Responsive Sizing Custom */ max-width: 376px; max-width: calc(376px + 87 * ((100vw - 640px) / 384)); } } @media (min-width: 1024px) { .c-plyrWelcome__image { float: right; margin-bottom: 0px; /* Responsive Sizing Custom */ margin-right: -25px; margin-right: calc(-25px - 5 * ((100vw - 1024px) / 416)); max-width: 330px; max-width: calc(330px + 133 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrWelcome__image { margin-right: -30px; max-width: 463px; } } /* Importing base settings */ /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ .c-plyrScholarship { display: none; padding: 9px 40px; margin: 28px auto; border-top: 1px solid #f2f2f2; border-bottom: 1px solid #f2f2f2; overflow: hidden; } .show-player-scholarship .c-plyrScholarship { display: block; } .c-plyrScholarship img { display: inline-block; float: left; max-width: 65px; margin-right: 20px; padding-top: 12px; } .c-plyrScholarship h2 { font-size: 15px; color: #E57726; font-family: 'Gotham', sans-serif; transition: color 250ms ease; } .c-plyrScholarship:hover h2 { color: #a55725; } @media (min-width: 1024px) { .c-plyrScholarship { max-width: calc(900px + 440 * ((100vw - 1024px) / 416)); } } @media(min-width: 1440px) { .c-plyrScholarship { max-width: 1260px; } } .c-plyrScholarship__wrapper { max-width: 320px; margin: auto; } @media (min-width: 640px) { .c-plyrScholarship__wrapper { max-width: 768px; } } @media (min-width: 1024px) { .c-plyrScholarship__wrapper { max-width: 832px; } } @media (min-width: 640px) { .c-plyrScholarship img { padding-top: 16px; } } @media (min-width: 1024px) { .c-plyrScholarship img { padding-top: 0; } } @media (min-width: 640px) { .c-plyrScholarship h2 { font-size: 22px; padding-top: 8px; } } /* Importing base settings */ /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ .c-plyrComments { background-color: #f7f7f7; /* Responsive Sizing Custom */ padding-top: 54px; padding-bottom: 50px; padding-top: calc(54px + 54 * ((100vw - 320px) / 320)); padding-bottom: calc(50px + 50 * ((100vw - 320px) / 320)); } .c-plyrComments .o-wrapper {} @media (min-width: 640px) { .c-plyrComments { padding-top: 48px; padding-bottom: 48px; } } @media (min-width: 1024px) { .c-plyrComments { /* Responsive Sizing Custom */ padding-top: 75px; padding-bottom: 75px; padding-top: calc(75px + 27 * ((100vw - 1024px) / 416)); padding-bottom: calc(75px + 27 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrComments { padding-top: 102px; padding-bottom: 102px; } } @media screen and (min-width: 320px) and (max-width: 640px) { .c-plyrComments .o-wrapper { /* Responsive Sizing Custom */ padding-right: calc(16px + 16 * ((100vw - 320px) / 320)); padding-left: calc(16px + 16 * ((100vw - 320px) / 320)); } } @media screen and (min-width: 640px) and (max-width: 1024px) { .c-plyrComments .o-wrapper { /* Responsive Sizing Custom */ padding-right: calc(26px + 14 * ((100vw - 640px) / 384)); padding-left: calc(26px + 14 * ((100vw - 640px) / 384)); } } .c-plyrComments__introSection {} .c-plyrComments__title { text-align: center; margin: 0 auto 19px; width: 288px; /* Responsive Sizing Custom */ width: calc(288px + 288 * ((100vw - 320px) / 320)); margin-bottom: calc(19px + 19 * ((100vw - 320px) / 320)); font-size: calc(34px + 34 * ((100vw - 320px) / 320)); line-height: calc(42px + 42 * ((100vw - 320px) / 320)); letter-spacing: calc(1px + 1 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-plyrComments__title { width: auto; font-size: 31px; line-height: 40px; margin-bottom: 30px; letter-spacing: .7px; } } @media (min-width: 1024px) { .c-plyrComments__title { letter-spacing: 1.3px; /* Responsive Sizing Custom */ margin-bottom: 10px; margin-bottom: calc(10px + 6 * ((100vw - 1024px) / 416)); font-size: calc(38px + 10 * ((100vw - 1024px) / 416)); line-height: calc(43px + 10.6 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrComments__title { margin-bottom: 16px; font-size: 54px; line-height: 63.6px; letter-spacing: 1.3px; } } .c-plyrComments__introInfo { text-align: center; margin-bottom: 28px; font-size: 13.5px; font-size: calc(13.5px + 13.5 * ((100vw - 1024px) / 416)); margin-bottom: calc(28px + 28* ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-plyrComments__introInfo { font-size: 14px; margin-bottom: 23px; } } @media (min-width: 1024px) { .c-plyrComments__introInfo { /* Responsive Custom */ margin-bottom: 33px; margin-bottom: calc(33px + 9 * ((100vw - 1024px) / 416)); font-size: calc(12px + 4 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrComments__introInfo { font-size: 16px; } } .fb-comments, .fb-comments span, .fb-comments.fb_iframe_widget span iframe { width: 100% !important; } .c-plyrComments__likeSection { margin: 0 auto; text-align: center; } @media (min-width: 640px) { .c-plyrComments__likeSection {} } @media (min-width: 1024px) { .c-plyrComments__likeSection { text-align: left; /* Responsive Custom */ max-width: 616px; max-width: calc(616px + 220 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrComments__likeSection { max-width: 836px; margin-bottom: 40px; } } .c-plyrComments__likeInfo { text-align: center; margin: 0 auto 27px; line-height: 21px; font-weight: 600; color: #a6a6a6; font-size: 12px; width: calc(288px + 288 * ((100vw - 320px) / 320)); margin-bottom: calc(27px + 27 * ((100vw - 320px) / 320)); line-height: calc(21px + 21 * ((100vw - 320px) / 320)); font-size: calc(12px + 12 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-plyrComments__likeInfo { font-size: 12px; line-height: 22px; width: 345px; margin: 0 auto 28px; } } @media (min-width: 1024px) { .c-plyrComments__likeInfo { float: left; margin-bottom: 0; /* Responsive Custom */ margin-right: calc(5px + 10 * ((100vw - 1024px) / 416)); margin-left: calc(41px + 0 * ((100vw - 1024px) / 416)); width: calc(230px + 103 * ((100vw - 1024px) / 416)); font-size: calc(9.5px + 4.5 * ((100vw - 1024px) / 416)); letter-spacing: calc(.2px - .2 * ((100vw - 1024px) / 416)); line-height: calc(17px + 7 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrComments__likeInfo { letter-spacing: 0; width: 323px; margin-right: 15px; font-size: 14px; line-height: 24px; } } .c-plyrComments__likeArrow { float: left; margin: -12px 15px 0 0; } @media (min-width: 640px) { .c-plyrComments__likeArrow {} } @media (min-width: 1024px) { .c-plyrComments__likeArrow { float: left; /* Responsive Custom */ width: 52px; width: calc(52px + 18 * ((100vw - 1024px) / 416)); margin: -12px calc(30px + 5 * ((100vw - 1024px) / 416)) 0 0; } } @media (min-width: 1440px) { .c-plyrComments__likeArrow { width: 70px; margin: -12px 35px 0 0; } } .c-plyrComments__likeClick { width: 246px; width: calc(246px + 246 * ((100vw - 320px) / 320)); font-size: calc(30px + 30 * ((100vw - 320px) / 320)); margin-bottom: calc(0px + 0 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-plyrComments__likeClick { width: 344px; margin-bottom: 12px; } } @media (min-width: 1024px) { .c-plyrComments__likeClick { /* Responsive Custom */ width: 250px; width: calc(250px + 48 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrComments__likeClick { width: 300px; } } .c-plyrComments__commentsSection { text-align: center; margin: 0 auto; } @media (min-width: 640px) { .c-plyrComments__commentsSection { max-width: 480px; } } @media (min-width: 1024px) { .c-plyrComments__commentsSection { max-width: none; /* Responsive Custom */ width: 480px; width: calc(480px + 180 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrComments__commentsSection { width: 660px; } } .c-plyrComments__commentsInfo {} /* Importing base settings */ /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ .c-plyrQuestions { /* Responsive Sizing Custom */ padding-top: 52px; padding-bottom: 64px; padding-top: calc(52px + 52 * ((100vw - 320px) / 320)); padding-bottom: calc(52px + 64 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-plyrQuestions { padding-top: 69px; padding-bottom: 30px; } } @media (min-width: 1024px) { .c-plyrQuestions { /* Responsive Sizing Custom */ padding-top: 72px; padding-bottom: 72px; padding-top: calc(72px + 28 * ((100vw - 1024px) / 416)); padding-bottom: calc(72px + 28 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrQuestions { padding-top: 100px; padding-bottom: 100px; } } .c-plyrQuestions__title { margin: 0 auto 34px; text-align: center; /* Responsive Sizing Custom */ margin-bottom: 34px; margin-bottom: calc(34px + 34 * ((100vw - 320px) / 320)); font-size: calc(33px + 33 * ((100vw - 320px) / 320)); line-height: calc(43px + 43 * ((100vw - 320px) / 320)); letter-spacing: calc(1px + 1 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-plyrQuestions__title { line-height: 40px; margin-bottom: 36px; font-size: 32px; letter-spacing: 1px; } } @media (min-width: 1024px) { .c-plyrQuestions__title { /* Responsive Sizing Custom */ margin-bottom: 36px; margin-bottom: calc(36px + 18 * ((100vw - 1024px) / 416)); font-size: calc(38px + 6 * ((100vw - 1024px) / 416)); line-height: calc(43px + 23.6 * ((100vw - 1024px) / 416)); letter-spacing: calc(2px - .7 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrQuestions__title { margin-bottom: 50px; font-size: 54px; line-height: 63.6px; letter-spacing: 1.3px; } } .c-plyrQuestions__questionsContainer {} @media (min-width: 640px) { .c-plyrQuestions__questionsContainer { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; max-width: 450px; margin: 0 auto; } } @media (min-width: 1024px) { .c-plyrQuestions__questionsContainer { -ms-flex-wrap: no-wrap; -webkit-flex-wrap: no-wrap; flex-wrap: no-wrap; /* Responsive Custom */ max-width: 822px; max-width: calc(822px + 350 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrQuestions__questionsContainer { max-width: 1172px; } } .c-plyrQuestions__questionBox { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; padding: 0 36px; -webkit-box-flex: 1; -ms-flex: 1; -webkit-flex: 1; flex: 1; margin-bottom: 57px; /* Responsive Custom */ margin-bottom: 57px; margin-bottom: calc(57px + 57 * ((100vw - 320px) / 320)); } @media screen and (max-width: 639px) { .c-plyrQuestions__questionBox {} .c-plyrQuestions__questionBox:last-of-type { margin-bottom: 0; } } @media (min-width: 640px) { .c-plyrQuestions__questionBox { -ms-flex-preferred-size: 50%; -webkit-flex-basis: 50%; flex-basis: 50%; margin-bottom: 40px; -webkit-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; padding: 0 16px; } } @media (min-width: 1024px) { .c-plyrQuestions__questionBox { -webkit-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -ms-flex-preferred-size: 0; -webkit-flex-basis: 0; flex-basis: 0; margin-bottom: 0; } .c-plyrQuestions__questionBox:nth-of-type(1) .c-plyrQuestions__questionText {} .c-plyrQuestions__questionBox:nth-of-type(2) .c-plyrQuestions__questionText { padding: 0 12px; } .c-plyrQuestions__questionBox:nth-of-type(3) .c-plyrQuestions__questionText { padding: 0 12px; } .c-plyrQuestions__questionBox:nth-of-type(4) .c-plyrQuestions__questionText { padding: 0 26px; } } @media (min-width: 1440px) { .c-plyrQuestions__questionBox {} } .c-plyrQuestions__iconWrapper { text-align: center; } @media (min-width: 640px) { .c-plyrQuestions__iconWrapper { height: 40px; } } @media (min-width: 1024px) { .c-plyrQuestions__iconWrapper { height: 40px; /* Responsive Custom */ height: 40px; height: calc(40px + 10 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrQuestions__iconWrapper { height: 50px; } } .c-plyrQuestions__icon { margin: 0 auto; -ms-flex-item-align: center; -ms-grid-row-align: center; -webkit-align-self: center; align-self: center; height: auto; height: 100%; } .c-plyrQuestions__icon.c-plyrQuestions__icon--1 { width: 30px; margin-bottom: 10px; } @media (min-width: 640px) { .c-plyrQuestions__icon.c-plyrQuestions__icon--1 { width: 26px; margin-bottom: 7px; } } @media (min-width: 1024px) { .c-plyrQuestions__icon.c-plyrQuestions__icon--1 { /* Responsive Custom */ width: 28px; width: calc(28px + 11 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrQuestions__icon.c-plyrQuestions__icon--1 { width: 39px; } } .c-plyrQuestions__icon.c-plyrQuestions__icon--2 { width: 32px; margin-bottom: 7px; } @media (min-width: 640px) { .c-plyrQuestions__icon.c-plyrQuestions__icon--2 { width: 39px; } } @media (min-width: 1024px) { .c-plyrQuestions__icon.c-plyrQuestions__icon--2 { /* Responsive Custom */ width: 39px; width: calc(39px + 12 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrQuestions__icon.c-plyrQuestions__icon--2 { width: 54px; } } .c-plyrQuestions__icon.c-plyrQuestions__icon--3 { width: 12px; margin-bottom: 6px; padding-bottom: 6px; } @media (min-width: 640px) { .c-plyrQuestions__icon.c-plyrQuestions__icon--3 { width: 14px; } } @media (min-width: 1024px) { .c-plyrQuestions__icon.c-plyrQuestions__icon--3 { /* Responsive Custom */ width: 16px; width: calc(16px + 4 * ((100vw - 1024px) / 416)); margin-top: 6px; margin-top: calc(6px + 1 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrQuestions__icon.c-plyrQuestions__icon--3 { width: 20px; margin-top: 7px; } } .c-plyrQuestions__icon.c-plyrQuestions__icon--4 { width: 32px; margin-bottom: 8px; } @media (min-width: 640px) { .c-plyrQuestions__icon.c-plyrQuestions__icon--4 {} } @media (min-width: 1024px) { .c-plyrQuestions__icon.c-plyrQuestions__icon--4 { /* Responsive Custom */ width: 34px; width: calc(34px + 19 * ((100vw - 1024px) / 416)); margin-top: 8px; margin-top: calc(8px - 2 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrQuestions__icon.c-plyrQuestions__icon--4 { width: 53px; margin-top: 6px; } } .c-plyrQuestions__questionTitle { text-align: center; margin-bottom: 16px; font-size: 22px; letter-spacing: .8px; /* Responsive Custom */ margin-bottom: 16px; margin-bottom: calc(16px + 0 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-plyrQuestions__questionTitle { margin-bottom: 7px; font-size: 18px; letter-spacing: 1.2px; } } @media (min-width: 1024px) { .c-plyrQuestions__questionTitle {} } @media (min-width: 1440px) { .c-plyrQuestions__questionTitle { margin-bottom: 12px; font-size: 27px; letter-spacing: .3px; } } .c-plyrQuestions__questionText { text-align: center; letter-spacing: .3px; line-height: 24px; margin: 0 auto; /* Responsive Custom */ margin-bottom: 18px; margin-bottom: calc(18px + 18 * ((100vw - 320px) / 320)); max-width: 200px; max-width: calc(200px + 200 * ((100vw - 320px) / 320)); font-size: calc(13px + 13 * ((100vw - 320px) / 320)); letter-spacing: calc(.3px + .3 * ((100vw - 320px) / 320)); line-height: calc(24px + 24 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-plyrQuestions__questionText { font-size: 12px; line-height: 22px; margin-bottom: 7px; } } @media (min-width: 1024px) { .c-plyrQuestions__questionText { font-size: 9.2px; line-height: 17px; /* Responsive Custom */ margin-bottom: 15px; margin-bottom: calc(15px + 22 * ((100vw - 1024px) / 416)); font-size: calc(9.2px + 4.8 * ((100vw - 1024px) / 416)); line-height: calc(17px + 6 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-plyrQuestions__questionText { text-align: center; font-size: 14px; letter-spacing: .3px; line-height: 23px; margin-bottom: 22px; } } .c-plyrQuestions__questionLink { text-align: center; transition: color 300ms cubic-bezier(0.47, 0, 0.745, 0.715); text-transform: uppercase; letter-spacing: 3px; /* Responsive Typography */ font-size: calc(10px + 10 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-plyrQuestions__questionLink { font-size: 8px; letter-spacing: 2.5px; } } @media (min-width: 1024px) { .c-plyrQuestions__questionLink { font-size: 9px; } } @media (min-width: 1440px) { .c-plyrQuestions__questionLink { letter-spacing: 3.2px; font-size: 12px; } } .c-plyrQuestions__questionLink:hover { color: #A72D7C; } /* Importing base settings */ /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ .is-open-enrollment .c-timer__topPadding, .enrollment-closing-soon .c-timer__topPadding { padding-top: 22px; } .page-template-page-reviews-all .c-timer, .page-template-page-reviews-quiz .c-timer, .single-review .c-timer { margin: 10px; } @media (min-width: 1024px) { .page-template-page-reviews-all .c-timer, .page-template-page-reviews-quiz .c-timer, .single-review .c-timer { margin: 20px; } } .c-timer { display: none; text-align: center; background-color: #d97e3c; /* Responsive Sizing Custom */ padding-top: calc(27px + 19 * ((100vw - 320px) / 320)); padding-bottom: calc(27px + 19 * ((100vw - 320px) / 320)); } .is-open-enrollment .c-timer, .enrollment-closing-soon .c-timer { display: block; } .c-timer .o-wrapper {} @media (min-width: 640px) { .c-timer { /* Responsive Sizing Custom */ padding-top: calc(46px + 32 * ((100vw - 640px) / 384)); padding-bottom: calc(46px + 32 * ((100vw - 640px) / 384)); } } @media (min-width: 1024px) { .c-timer { /* Responsive Sizing Custom */ padding-top: calc(76px + 51 * ((100vw - 1024px) / 416)); padding-bottom: calc(76px + 51 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-timer { padding-top: 127px; padding-bottom: 127px; } } @media screen and (min-width: 320px) and (max-width: 640px) { .c-timer .o-wrapper { /* Responsive Sizing Custom */ padding-right: calc(16px + 10 * ((100vw - 320px) / 320)); padding-left: calc(16px + 10 * ((100vw - 320px) / 320)); } } @media screen and (min-width: 640px) and (max-width: 1024px) { .c-timer .o-wrapper { /* Responsive Sizing Custom */ padding-right: calc(26px + 14 * ((100vw - 640px) / 384)); padding-left: calc(26px + 14 * ((100vw - 640px) / 384)); } } .c-timer__inner { background-color: transparent; /* Responsive Sizing Custom */ padding: calc(33px + 33 * ((100vw - 320px) / 320)) 0 calc(10px + 10 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-timer__inner { padding: 0; } } .c-timer__title { text-align: center; margin: 0 auto 30px; color: #fff; /* Responsive Sizing Custom */ margin-bottom: calc(24px + 24 * ((100vw - 320px) / 320)); max-width: calc(220px + 220 * ((100vw - 320px) / 320)); font-size: calc(35px + 35 * ((100vw - 320px) / 320)); line-height: calc(43px + 40 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-timer__title { max-width: none; font-size: 38px; line-height: 44px; margin-bottom: 26px; /* Responsive Sizing Custom */ margin-bottom: calc(34px + 3 * ((100vw - 640px) / 384)); letter-spacing: calc(1.5px - 0.5px * ((100vw - 640px) / 384)); } } @media (min-width: 1024px) { .c-timer__title { /* Responsive Sizing Custom */ margin-bottom: calc(37px + 11 * ((100vw - 1024px) / 416)); font-size: calc(39px + 14 * ((100vw - 1024px) / 416)); line-height: calc(43pxpx + 20.6 * ((100vw - 1024px) / 416)); letter-spacing: calc(0.5px + 0.9 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-timer__title { margin-bottom: 48px; font-size: 50px; line-height: 64.13px; letter-spacing: 1.4px; } } .c-timer__noteOne { margin: 0 auto; letter-spacing: 0.3px; line-height: 27px; font-size: 12px; color: #fff; /* Responsive Sizing Custom */ max-width: calc(240px + 240 * ((100vw - 320px) / 320)); margin-bottom: calc(18px + 18 * ((100vw - 320px) / 320)); font-size: calc(12px + 12 * ((100vw - 320px) / 320)); line-height: calc(27px + 27 * ((100vw - 320px) / 320)); letter-spacing: calc(0.3px + 0.3 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-timer__noteOne { max-width: none; letter-spacing: 0.3px; line-height: 1.5; font-size: 15px; /* Responsive Sizing Custom */ margin-bottom: calc(14px + 2 * ((100vw - 640px) / 384)); } } @media (min-width: 1024px) { .c-timer__noteOne { /* Responsive Sizing Custom */ margin-bottom: calc(16px + 6 * ((100vw - 1024px) / 416)); font-size: calc(15px + 7 * ((100vw - 1024px) / 416)); letter-spacing: calc(0.3px - 0.3 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-timer__noteOne { letter-spacing: 0px; font-size: 20px; margin-bottom: 22px; } } .c-timer__noteTwo { margin: 0 auto 15px; letter-spacing: 0.3px; color: #fff; /* Responsive Custom */ max-width: calc(230px + 230 * ((100vw - 320px) / 320)); font-size: calc(12px + 12 * ((100vw - 320px) / 320)); line-height: calc(27px + 27 * ((100vw - 320px) / 320)); } .c-timer__noteTwo u { text-decoration: none; padding-bottom: 1px; border-bottom: 1px solid; } @media (min-width: 640px) { .c-timer__noteTwo { max-width: none; margin-bottom: 43px; line-height: 19.5px; line-height: 1.5; /* Responsive Typography */ font-size: calc(13px - 1 * ((100vw - 640px) / 384)); } } @media (min-width: 1024px) { .c-timer__noteTwo { /* Responsive Sizing Custom */ margin-bottom: calc(43px + 19 * ((100vw - 1024px) / 416)); font-size: calc(12px + 4 * ((100vw - 1024px) / 416)); letter-spacing: calc(0.3px + 0.1 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-timer__noteTwo { font-size: 16px; letter-spacing: 0.4px; margin-bottom: 62px; } } .c-timer__timer { padding: 24px 20px; max-width: 300px; margin: 0 auto 20px; /* Responsive Custom */ margin-bottom: calc(20px + 20 * ((100vw - 320px) / 320)); max-width: calc(300px + 300 * ((100vw - 320px) / 320)); padding: calc(24px + 20 * ((100vw - 320px) / 320)); } .c-timer__timer:after { content: ''; display: block; clear: both; } @media (min-width: 640px) { .c-timer__timer { border: 1px solid #dedede; /* Responsive Sizing Custom */ max-width: calc(476px + 104 * ((100vw - 640px) / 384)); margin-bottom: calc(40px + 3 * ((100vw - 640px) / 384)); padding: calc(16px + 3 * ((100vw - 640px) / 384)) calc(2px - 2 * ((100vw - 640px) / 384)) calc(17px + 9 * ((100vw - 640px) / 384)); } } @media (min-width: 1024px) { .c-timer__timer { /* Responsive Sizing Custom */ max-width: calc(580px + 240 * ((100vw - 1024px) / 416)); margin-bottom: calc(43px + 17 * ((100vw - 1024px) / 416)); padding: calc(20px + 9 * ((100vw - 1024px) / 416)) calc(2px - 2 * ((100vw - 1024px) / 416)) calc(26px + 10 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-timer__timer { padding: 29px 0 36px; border: 1px solid #dedede; max-width: 820px; margin: 0 auto 60px; } } .c-timer__timerSection { float: left; border-right: 1px solid #dedede; width: 50%; padding: 4px 0 8px; } @media (min-width: 640px) { .c-timer__timerSection { border: none; border-right: 1px solid #dedede; /* Responsive Custom */ padding: calc(6px + 5 * ((100vw - 320px) / 320)) 0 calc(8px - 3 * ((100vw - 320px) / 320)); } } @media (min-width: 1024px) { .c-timer__timerSection { float: left; border-right: 1px solid #dedede; width: 25%; padding: 11px 0 5px; /* Responsive Custom */ padding-bottom: 5px; padding-bottom: calc(5px + 3 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-timer__timerSection { float: left; border-right: 1px solid #dedede; width: 25%; padding: 11px 0 8px; } } .c-timer__timerSection:first-of-type .c-timer__number {} @media screen and (max-width: 639px) { .c-timer__timerSection:first-of-type { border-bottom: 1px solid #dedede; /* Responsive Custom */ padding-bottom: 22px; padding-bottom: calc(22px + 22 * ((100vw - 320px) / 320)); } } @media (min-width: 640px) { .c-timer__timerSection:first-of-type { width: 24%; } } @media (min-width: 1024px) { .c-timer__timerSection:first-of-type .c-timer__number { /* Responsive Custom */ margin-left: -8px; margin-left: calc(-8px + 15 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-timer__timerSection:first-of-type .c-timer__number { margin-left: 7px; } } .c-timer__timerSection:nth-of-type(2) {} @media screen and (max-width: 639px) { .c-timer__timerSection:nth-of-type(2) { border-bottom: 1px solid #dedede; border-right: none; /* Responsive Custom */ padding-bottom: 22px; padding-bottom: calc(22px + 22 * ((100vw - 320px) / 320)); } } @media (min-width: 640px) { .c-timer__timerSection:nth-of-type(2) { width: 25.5%; } } .c-timer__timerSection:nth-of-type(3) {} @media screen and (max-width: 639px) { .c-timer__timerSection:nth-of-type(3) { /* Responsive Custom */ padding-top: 14px; padding-top: calc(14px + 14 * ((100vw - 320px) / 320)); } } @media (min-width: 640px) { .c-timer__timerSection:nth-of-type(3) { width: 25%; } } .c-timer__timerSection:last-of-type { border-right: none; } @media screen and (max-width: 639px) { .c-timer__timerSection:last-of-type { /* Responsive Custom */ padding-top: 14px; padding-top: calc(14px + 14 * ((100vw - 320px) / 320)); } } @media (min-width: 640px) { .c-timer__timerSection:last-of-type { width: 25.5%; } } .c-timer__number { display: block; line-height: 48px; font-size: 50px; color: #d97e3c; /* Responsive Typography */ font-size: calc(50px + 50 * ((100vw - 320px) / 320)); line-height: calc(50px + 50 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-timer__number { /* Responsive Typography */ font-size: calc(56px + 14 * ((100vw - 640px) / 384)); line-height: calc(56px + 9 * ((100vw - 640px) / 384)); } } @media (min-width: 1024px) { .c-timer__number { /* Responsive Typography */ font-size: calc(70px + 28 * ((100vw - 1024px) / 416)); line-height: calc(65px + 33 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-timer__number { font-size: 98px; line-height: 98px; } } .c-timer__label { display: block; font-size: 11px; letter-spacing: 0.3px; line-height: 1; color: #d97e3c; /* Responsive Typography */ font-size: calc(11px + 11 * ((100vw - 320px) / 320)); letter-spacing: calc(0.3px + 0.3 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .c-timer__label { /* Responsive Typography */ font-size: calc(13px + 4 * ((100vw - 640px) / 384)); letter-spacing: calc(0.1px - 0.1 * ((100vw - 640px) / 384)); } } @media (min-width: 1024px) { .c-timer__label { /* Responsive Typography */ font-size: calc(17px + 5 * ((100vw - 1024px) / 416)); letter-spacing: calc(0px + 0.5 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-timer__label { font-size: 22px; letter-spacing: 0.5px; } } .c-timer__button { /* Responsive Custom */ width: calc(288px + 288 * ((100vw - 320px) / 320)); padding: calc(18px + 18* ((100vw - 320px) / 320)) 0; letter-spacing: calc(3.5px + 3.5 * ((100vw - 320px) / 320)); font-size: calc(14px + 10 * ((100vw - 320px) / 320)); background-color: #d97e3c; color: #fff; border: 1px solid #fff; } .c-timer__button:hover { background-color: #fff; color: #d97e3c; } @media (min-width: 640px) { .c-timer__button { font-size: 13px; /* Responsive Custom */ width: 270px; height: 56px; width: calc(270px - 16 * ((100vw - 1024px) / 416)); padding: 17px 0; padding: calc(17px - 3 * ((100vw - 1024px) / 416)) 0; letter-spacing: calc(4.8px - 0.8 * ((100vw - 1024px) / 416)); } } @media (min-width: 1024px) { .c-timer__button { border: 2px solid #fff; /* Responsive Custom */ width: 254px; height: auto; width: calc(254px + 100 * ((100vw - 1024px) / 416)); padding: 17px 0; padding: calc(17px + 7 * ((100vw - 1024px) / 416)) 0; font-size: calc(13px + 3 * ((100vw - 1024px) / 416)); letter-spacing: calc(4px + 1 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .c-timer__button { font-size: 16px; padding: 26px 0 24px 0; width: 354px; letter-spacing: 5px; } } /* Importing base settings */ /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ .c-headerAd__wrapper {} .c-headerAd { position: fixed; margin-top: -40px; right: -100%; width: 100%; background: #fff; padding: 10px; opacity: 0; transition: all 500ms ease-in-out; } .c-headerAd:after { content: ''; display: block; clear: both; } @media (min-width: 640px) { .c-headerAd { width: 372px; right: -372px; margin-top: -58px; } } @media (min-width: 1025px) { .c-headerAd { padding: 12px; margin-top: -57px; } } @media (min-width: 1280px) { .c-headerAd { margin-top: -51px; } } @media (min-width: 1440px) { .c-headerAd { margin-top: -63px; } } .c-headerAd.is-expanded { opacity: 1; right: 0; position: absolute; } @media (max-width: 1024px) { .c-headerAd.is-expanded { height: 100%; position: fixed; overflow-y: scroll; } } @media (max-width: 639px) { .c-headerAd.is-expanded { width: 100%; } } .c-headerAd__image { height: 400px; width: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; } @media (max-width: 1024px) { .c-headerAd__image { height: 570px; width: 100%; background-position: center 90%; } } @media (max-width: 768px) { .c-headerAd__image { height: 640px; background-position: center; } } @media (max-width: 639px) { .c-headerAd__image { height: 480px; } } @media (max-width: 320px) { .c-headerAd__image { height: 380px; } } @media (min-width: 1025px) { .c-headerAd__image { height: 586px; width: 348px; } } .enrollment-closed .c-headerAd__image {} @media (max-width: 639px) { .enrollment-closed .c-headerAd__image { background-position: center 100%; } } @media (max-width: 320px) { .enrollment-closed .c-headerAd__image { height: 480px; } } .c-headerAd__toggle { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; position: absolute; top: 0; right: 0; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; margin-top: 25px; margin-right: 22px; z-index: 13; letter-spacing: 2px; } @media (min-width: 640px) { .c-headerAd__toggle { margin-top: 41px; margin-right: 30px; } } @media (min-width: 1280px) { .c-headerAd__toggle { margin-top: 37px; margin-right: 26px; } } @media (min-width: 1440px) { .c-headerAd__toggle { margin-top: 47px; margin-right: 49px; } } .c-headerAd__toggle:hover { cursor: pointer; } .header-ad-is-open .c-headerAd__toggle.c-headerAd__toggle--original {} @media (max-width: 1024px) { .header-ad-is-open .c-headerAd__toggle.c-headerAd__toggle--original { display: none; } } .header-ad-is-open .c-headerAd__toggle.c-headerAd__toggle--copy {} @media (min-width: 1025px) { .header-ad-is-open .c-headerAd__toggle.c-headerAd__toggle--copy { display: none; } } .c-headerAd__toggle.is-expanded .c-hamburger__patty { background-color: #000; } .c-headerAd__toggleText { padding-right: 14px; color: #2f2e2d; font-weight: 400; font-size: 16px; line-height: 0; transition: 250ms color ease; display: none; position: relative; top: 1px; } @media (min-width: 640px) { .c-headerAd__toggleText { display: block; } } @media (min-width: 1280px) { .c-headerAd__toggleText { font-size: 14px; line-height: 0; } } @media (min-width: 1440px) { .c-headerAd__toggleText { font-size: 16px; line-height: 0; } } .c-headerAd__ad { padding: 30px 50px; color: #000; font-family: 'Gotham', sans-serif; position: absolute; text-align: center; width: 100%; left: 0; } @media (min-width: 640px) { .c-headerAd__ad { padding: 46px 50px; } } @media (min-width: 1280px) { .c-headerAd__ad { margin-top: 40px; } } .enrollment-closed .c-headerAd__ad { padding: 50px 22px 30px; } @media (min-width: 400px) { .enrollment-closed .c-headerAd__ad { padding: 30px 36px; } } @media (min-width: 640px) { .enrollment-closed .c-headerAd__ad { padding: 46px 36px; } } .c-headerAd__title { text-transform: uppercase; font-size: 11px; line-height: 25px; font-weight: 500; letter-spacing: 1.7px; } @media (min-width: 768px) { .c-headerAd__title { padding-top: 16px; } } @media (min-width: 1280px) { .c-headerAd__title { font-size: 14px; padding-top: 0; } } .c-headerAd__subtitle { font-size: 32px; line-height: 38px; margin-top: 7px; line-height: 45px; font-weight: 300; } @media (min-width: 1280px) { .c-headerAd__subtitle { font-size: 14px; font-size: 36px; } } .c-headerAd__cta { text-transform: uppercase; display: block; margin-top: 26px; color: #000; } @media (max-width: 639px) { .c-headerAd__cta { margin-top: 9px; } } .c-headerAd__ctaText { padding-bottom: 4px; color: #000; font-weight: 500; font-size: 13px; line-height: 25px; letter-spacing: 1.5px; position: relative; } .c-headerAd__ctaText:before { bottom: -2px; left: 0; content: ''; width: 100%; height: 1px; position: absolute; -webkit-transform-origin: 2px; transform-origin: 2px; background: #000000; -webkit-transform: scaleX(1); transform: scaleX(1); /* transition:transform .3s ease-in-out 0s, */ } .c-headerAd__ctaText:hover, .c-headerAd__ctaText:hover { color: #000; } .c-headerAd__ctaText:hover:before, .c-headerAd__ctaText:hover:before { /* transform:scaleX(1); */ -webkit-animation: x-move .3s linear 1; animation: x-move .3s linear 1; } @-webkit-keyframes x-move { 0% { -webkit-transform: scaleX(0); transform: scaleX(0); } 100% { -webkit-transform: scaleX(1); transform: scaleX(1); } } @keyframes x-move { 0% { -webkit-transform: scaleX(0); transform: scaleX(0); } 100% { -webkit-transform: scaleX(1); transform: scaleX(1); } } body.stop-scroll {} @media (max-width: 1024px) { body.stop-scroll { height: 100vh; overflow: hidden; } } /* Importing base settings */ /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ .c-headerMenu ul { margin: 0; padding: 10px 0 0 0; list-style: none; } .c-headerMenu ul li { display: block; text-align: left; padding: 20px 18px; } @media (min-width: 1280px) { .c-headerMenu { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } } @media (min-width: 1025px) { .c-headerMenu ul { padding: 0; } } @media (min-width: 1025px) { .c-headerMenu ul li { float: left; padding: 0 22px; } } .c-headerMenu--desktop { display: none; } @media (min-width: 1025px) { .c-headerMenu--desktop { display: block; position: relative; top: 2px; } } .c-headerMenu--mobile {} @media (min-width: 1025px) { .c-headerMenu--mobile { display: none; } } .c-headerMenu__link { color: #141414; font-family: 'Gotham', sans-serif; text-transform: uppercase; padding-bottom: 2px; font-size: 18px; letter-spacing: 2px; transition: all 250ms ease; font-weight: 500; position: relative; } @media (min-width: 1025px) { .c-headerMenu__link { font-size: 11px; } } .c-headerMenu__link:before { bottom: -2px; left: 0; content: ''; width: 100%; height: 1px; position: absolute; -webkit-transform-origin: 2px; transform-origin: 2px; background: #141414; -webkit-transform: scaleX(0); transform: scaleX(0); transition: -webkit-transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s; } .c-headerMenu__link:hover, .c-headerMenu__link:hover { color: #141414; } .c-headerMenu__link:hover:before, .c-headerMenu__link:hover:before { -webkit-transform: scaleX(1); transform: scaleX(1); } .c-headerMenu__link.active {} .c-headerMenu__link.active:before { -webkit-transform: scaleX(1); transform: scaleX(1); } .c-headerAd__toggle.is-expanded .c-headerAd__toggleText { color: #2f2e2d; } /* Importing base settings */ /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ .c-reviewHero { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; min-height: 482px; max-height: 492px; padding-top: 44px; color: #fff; text-align: center; background-color: #424340; background-size: cover; background-repeat: no-repeat; background-position: center; background-image: url('images/reviews/review-hero-small.png'); /* responsive padding */ padding: calc(30% + 44px) 0 30%; } @media (min-width: 768px) { .c-reviewHero { background-image: url('images/reviews/review-hero-large.png'); /* responsive padding */ padding: calc(26% + 44px) 0 26%; } } @media (min-width: 1024px) { .c-reviewHero { /* responsive padding */ padding: calc(16% + 44px) 0 16%; } } @media (min-width: 1440px) { .c-reviewHero { /* responsive padding */ padding: calc(11% + 44px) 0 11%; } } .c-reviewHero__wrap { width: 100%; max-width: 800px; margin: 0 auto; padding: 0 20px; } .c-reviewHero__heading { margin: 0 0 11px; font-size: 12px; font-style: italic; font-weight: 600; } @media (min-width: 768px) { .c-reviewHero__heading { font-size: 14px; } } @media (min-width: 1024px) { .c-reviewHero__heading { margin-bottom: 20px; font-size: 16px; } } .c-reviewHero__subHeading { margin: 0 0 10px; font-family: 'Gotham', sans-serif; font-size: 30px; font-weight: 300; line-height: 1.2; } @media (min-width: 768px) { .c-reviewHero__subHeading { font-size: 50px; } } @media (min-width: 1024px) { .c-reviewHero__subHeading { font-size: 52px; } } .c-reviewHero__desc { margin: 0; font-family: 'Gotham', sans-serif; font-size: 16px; } @media (min-width: 768px) { .c-reviewHero__desc { font-size: 22px; } } @media (min-width: 1024px) { .c-reviewHero__desc { font-size: 24px; } } .c-reviewBar { padding: 25px 0; color: #fff; font-size: 13px; font-style: italic; font-weight: 600; text-align: center; background-color: #f7f5f0; } .c-reviewBar .c-btn { padding: 7px 23px; margin-left: 12px; font-size: 12px; font-style: normal; color: #fff; background-color: transparent; } .c-reviewBar .c-btn:hover, .c-reviewBar .c-btn:focus { color: #000; background-color: #fff; } @media (max-width: 639px) { .c-reviewBar span { display: block; margin-bottom: 15px; } } .c-reviewBar--mobile { padding: 20px 0; color: #000; font-size: 11px; } .c-reviewBar--mobile a { color: #b92685; border-bottom: 1px solid #b92685; } @media (max-width: 1023px) { .page-template-page-reviews-all .c-reviewBar--mobile { display: none; } } .is-open-enrollment .c-reviewBar, .enrollment-closing-soon .c-reviewBar, .is-open-enrollment .c-reviewBar { color: #000; background-color: #f7f5f0 !important; } .is-open-enrollment .c-reviewBar .c-btn, .enrollment-closing-soon .c-reviewBar .c-btn, .is-open-enrollment .c-reviewBar .c-btn { background-color: #b92685; } .is-open-enrollment .c-reviewBar .c-btn:hover, .is-open-enrollment .c-reviewBar .c-btn:focus, .enrollment-closing-soon .c-reviewBar .c-btn:hover, .enrollment-closing-soon .c-reviewBar .c-btn:focus, .is-open-enrollment .c-reviewBar .c-btn:hover, .is-open-enrollment .c-reviewBar .c-btn:focus { color: #fff; background-color: #941d6a; } /* Importing base settings */ /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ .c-microHero { background-position: center 0; background-repeat: no-repeat; background-size: cover; } .c-microHero__container { height: 480px; } @media (min-width: 640px) { .c-microHero__container { height: 800px; } } @media (min-width: 768px) { .c-microHero__container { padding-top: 0; height: 520px; } } @media (min-width: 1440px) { .c-microHero__container { height: 690px; } } .c-microHero--faq { background-image: url(images/faq/micro-hero-faq-bg-mobile.jpg); } .c-microHero--faq .c-microHero__content {} .c-microHero--faq .c-microHero__paragraph {} @media (max-width: 767px) { .c-microHero--faq { background-size: 100% auto; } } @media (min-width: 768px) { .c-microHero--faq { background-image: url(images/faq/micro-hero-faq-bg-desktop-small.jpg); } } @media (min-width: 1440px) { .c-microHero--faq { background-image: url(images/faq/micro-hero-faq-bg-desktop.jpg); } } @media (max-width: 639px) { .c-microHero--faq .c-microHero__content { position: static; top: 0; -webkit-transform: translateY(0); transform: translateY(0); padding-top: 215px; max-width: 270px; } } @media (min-width: 640px) { .c-microHero--faq .c-microHero__content { padding-top: 430px; max-width: 440px; } } @media (min-width: 768px) { .c-microHero--faq .c-microHero__content { padding-top: 145px; } } @media (min-width: 1024px) { .c-microHero--faq .c-microHero__content { max-width: 462px; } } @media (min-width: 1440px) { .c-microHero--faq .c-microHero__content { max-width: 525px; padding-top: 200px; } } @media (min-width: 1440px) { .c-microHero--faq .c-microHero__paragraph { padding-right: 70px; } } .c-microHero--program { background-image: url(images/program/program-hero-bg-mobile-small.jpg); } .c-microHero--program .o-wrapperProgram {} .c-microHero--program .c-microHero__content { padding-top: 75px; max-width: 270px; } .c-microHero--program .c-microHero__heading {} @media (max-width: 639px) { .c-microHero--program { background-size: cover; } } @media (min-width: 321px) { .c-microHero--program { background-image: url(images/program/program-hero-bg-mobile.jpg); } } @media (min-width: 768px) { .c-microHero--program { background-image: url(images/program/program-hero-bg-mobile-large.jpg); } } @media (min-width: 1024px) { .c-microHero--program { background-image: url(images/program/program-hero-bg-desktop.jpg); background-position: right 0; } } @media (min-width: 1440px) { .c-microHero--program .o-wrapperProgram {} } @media (min-width: 640px) { .c-microHero--program .c-microHero__content { max-width: 530px; padding-top: 120px; padding-left: 0; margin-right: -30px; } } @media (min-width: 768px) { .c-microHero--program .c-microHero__content { padding-top: 180px; margin: 0; max-width: 420px; } } @media (min-width: 1280px) { .c-microHero--program .c-microHero__content { max-width: 610px; } } @media (min-width: 1440px) { .c-microHero--program .c-microHero__content { padding-top: 230px; } } .c-microHero__heading { font-size: 12px; line-height: 35px; font-style: italic; font-weight: 600; letter-spacing: 0.25px; margin: 0; } @media (min-width: 640px) { .c-microHero__heading { font-size: 15px; margin: 0 0 5px 0; } } @media (min-width: 1280px) { .c-microHero__heading { font-size: 16px; } } @media (min-width: 1440px) { .c-microHero__heading { font-size: 18px; } } .c-microHero__subHeading { font-family: 'Gotham', sans-serif; font-size: 26px; line-height: 34px; font-weight: 300; margin-bottom: 10px; letter-spacing: 0.02em; } @media (min-width: 640px) { .c-microHero__subHeading { font-size: 50px; line-height: 62px; } } @media (min-width: 1280px) { .c-microHero__subHeading { font-size: 52px; line-height: 64px; } } @media (min-width: 1440px) { .c-microHero__subHeading { font-size: 58px; line-height: 70px; margin-bottom: 15px; } } .c-microHero__paragraph { font-size: 13px; line-height: 26px; font-weight: 500; } @media (min-width: 640px) { .c-microHero__paragraph { font-size: 16px; line-height: 35px; } } @media (min-width: 1024px) { .c-microHero__paragraph { padding-right: 30px; } } @media (min-width: 1440px) { .c-microHero__paragraph { font-size: 18px; line-height: 40px; } } /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ .o-footer__padd { padding: 0px 10px 20px 10px; } @media (min-width: 1024px) { .o-footer__padd { padding: 0px 20px 20px 20px; } } .c-questions_padd { padding: 10px 10px 0 10px; } @media (min-width: 1024px) { .c-questions_padd { padding: 20px 20px 0 20px; } } .c-questions { background-color: #faf9f6; padding: 65px 0; } @media (min-width: 1024px) { .c-questions { padding: 100px 0; } } @media (min-width: 1440px) { .c-questions { padding: 113px 0 115px; } } .c-questions__contentSection { padding-left: 60px; padding-right: 60px; } @media (max-width: 1023px) { .c-questions__contentSection { max-width: 230px; margin-right: auto; margin-left: auto; padding: 0px; } } .c-questions__title { font-family: 'Gotham', sans-serif; font-weight: 300; color: #000; font-size: 33px; line-height: 45px; text-align: center; margin-bottom: 40px; letter-spacing: 1.4px; } @media (max-width: 1023px) { .c-questions__title { max-width: 360px; margin-left: auto; margin-right: auto; } } @media (min-width: 640px) { .c-questions__title { font-size: 38px; line-height: 52px; } } @media (min-width: 1024px) { .c-questions__title { font-size: calc(39px + 14 * ((100vw - 1024px) / 416)); line-height: 64px; margin-bottom: 55px; } } @media (min-width: 1440px) { .c-questions__title { font-size: 50px; line-height: 64.13px; margin-bottom: 63px; } } .c-questions__box { text-align: center; } @media (max-width: 1023px) { .c-questions__box { margin-bottom: 50px; } } .c-questions__box--one svg { width: 30px; } @media (min-width: 640px) { .c-questions__box--one svg { width: 36px; } } .c-questions__box--two svg { width: 16px; } @media (min-width: 640px) { .c-questions__box--two svg { width: 20px; } } @media (min-width: 1024px) { .c-questions__box--two svg { margin-top: 5px; } } .c-questions__box--three svg { width: 38px; } @media (min-width: 640px) { .c-questions__box--three svg { width: 42px; } } .c-questions__box--four svg { width: 44px; } @media (min-width: 640px) { .c-questions__box--four svg { width: 52px; } } .c-questions__boxImage {} @media (min-width: 1024px) { .c-questions__boxImage { min-height: 50px; } } .c-questions__heading { font-family: 'Gotham', sans-serif; color: #000; font-size: 23px; line-height: 30px; margin: 1px 0 12px 0; } @media (min-width: 640px) { .c-questions__heading { font-size: 23px; } } @media (min-width: 1024px) { .c-questions__heading { font-size: 26px; line-height: 1.2; } } @media (min-width: 1440px) { .c-questions__heading { font-size: 32px; } } .c-questions__text { font-size: 13px; line-height: 24px; padding: 0 0 15px 0; } @media (min-width: 1024px) { .c-questions__text { font-size: 14px; padding: 0 0 20px 0; } } .c-questions__text.c-questions__text--wider {} @media (min-width: 1024px) { .c-questions__text.c-questions__text--wider { margin-left: -1px; margin-right: -1px; } } @media (min-width: 1440px) { .c-questions__text { font-size: 16px; line-height: 26px; padding: 0 45px 16px 45px; } } .c-questions__link { font-family: 'Gotham', sans-serif; color: #B92685; text-transform: uppercase; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; padding-bottom: 2px; position: relative; } .c-questions__link:before { bottom: -2px; left: 0; content: ''; width: 100%; height: 1px; position: absolute; -webkit-transform-origin: 2px; transform-origin: 2px; background: #8e1b61; -webkit-transform: scaleX(0); transform: scaleX(0); transition: -webkit-transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s; } .c-questions__link:hover, .c-questions__link:hover { color: #8e1b61; } .c-questions__link:hover:before, .c-questions__link:hover:before { -webkit-transform: scaleX(1); transform: scaleX(1); } /* Importing base settings */ /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ /* Component specific settings */ .c-thankyou {} .c-thankyou__playBox { position: absolute; bottom: 0; left: 12px; margin: auto; width: 80px; height: 80px; cursor: pointer; top: 27%; } @media (min-width: 640px) { .c-thankyou__playBox { top: 9%; width: 80px; height: 64px; left: 64px; } } @media (min-width: 768px) { .c-thankyou__playBox { top: 43%; } } @media (min-width: 1024px) { .c-thankyou__playBox { top: 0; left: 0; right: 0; width: 120px; height: 120px; } } .c-thankyou__playBox:hover .c-thankyou__playButton path { fill: #5b5b5b; } .c-thankyou__playBox:hover .c-thankyou__playText { color: #5b5b5b; } .c-thankyou__playButton { display: block; margin: auto; } @media (max-width: 1023px) { .c-thankyou__playButton { width: 100%; height: 100%; } } @media (max-width: 639px) { .c-thankyou__playButton { width: 50px; height: 50px; } } .c-thankyou__playText { font-weight: 600; color: #4D4D4D; display: inline-block; font-size: 8px; } @media (min-width: 640px) { .c-thankyou__playText { font-size: 10px; } } @media (min-width: 1280px) { .c-thankyou__playText { font-size: 13px; } } @media (min-width: 1440px) { .c-thankyou__playText { font-size: 16px; } } .c-thankyoubg { background-image: url(images/thankyou/thankyou-bg-mobile.png); background-position: center 95%; background-repeat: no-repeat; background-size: 140%; } @media (min-width: 640px) { .c-thankyoubg { background-image: url(images/thankyou/thankyou-bg-mobile.png); background-position: center 90%; background-size: 100%; } } @media (min-width: 860px) { .c-thankyoubg { background-position: center 85%; background-image: url(images/thankyou/thankyou-bg.png); } } @media (min-width: 1280px) { .c-thankyoubg { background-position: center bottom; } } @media screen and (min-width: 1920px) { .c-thankyoubg { background-position: center bottom; background-size: 95%; } } @media screen and (min-width: 2000px) { .c-thankyoubg { background-size: 80%; } } @media screen and (min-width: 2300px) { .c-thankyoubg { background-size: 70%; } } .c-thankyoubg__grid { margin-right: auto; margin-left: auto; padding-right: 25px; padding-left: 25px; padding-left: 0; padding-right: 0; } @media (min-width: 640px) { .c-thankyoubg__grid { padding-right: 40px; padding-left: 40px; } } @media (min-width: 640px) { .c-thankyoubg__grid { padding-right: 70px; padding-left: 70px; } } @media (min-width: 1024px) { .c-thankyoubg__grid { max-width: 1046px; padding-right: 40px; padding-left: 40px; padding-top: 74px; padding-bottom: 70px; } } @media (min-width: 1280px) { .c-thankyoubg__grid { max-width: 1112px; padding-top: 92px; padding-bottom: 24px; } } @media (min-width: 1440px) { .c-thankyoubg__grid { max-width: 1380px; padding-top: 110px; padding-bottom: 105px; } } .c-thankyoubg__left { padding: 48px 25px; } @media (min-width: 640px) { .c-thankyoubg__left { padding: 74px 0 118px 0; } } @media (min-width: 769px) { .c-thankyoubg__left { max-width: 480px; padding: 80px 0; } } @media (min-width: 1024px) { .c-thankyoubg__left { max-width: 560px; padding: 0; } } .c-thankyoubg__right { padding: 50px 0; } @media (min-width: 640px) { .c-thankyoubg__right { padding: 0; } } @media(min-width: 1024px) { .c-thankyoubg__right { padding: 42px 29px 29px 38px; max-width: 400px; } } @media (min-width: 1280px) { .c-thankyoubg__right { padding: 31px 20px 60px 40px; margin-top: 12px; max-width: 444px; } } @media(min-width: 1440px) { .c-thankyoubg__right { padding: 63px 20px 60px 97px; margin-top: 12px; max-width: 582px; } } .c-thankyoubg__leftTitle { font-size: 30px; text-align: left; line-height: 1.2; } @media (min-width: 640px) { .c-thankyoubg__leftTitle { font-size: 38px; } } @media (min-width: 769px) { .c-thankyoubg__leftTitle { font-size: 34px; max-width: none; } } @media(min-width: 1280px) { .c-thankyoubg__leftTitle { font-size: 38px; line-height: 1.3; } } @media(min-width: 1440px) { .c-thankyoubg__leftTitle { font-size: 48px; } } .c-thankyoubg__para { font-size: 13px; padding-bottom: 38px; line-height: 2.6; } @media (min-width: 640px) { .c-thankyoubg__para { font-size: 15px; padding-bottom: 34px; line-height: 2.2; } } @media (min-width: 1024px) { .c-thankyoubg__para { font-size: 15px; line-height: 36px; } } @media(min-width: 1280px) { .c-thankyoubg__para { font-size: 17px; } } .c-thankyoubg__para:last-of-type { padding-bottom: 0; } .c-thankyoubg__link { color: #B92685; cursor: pointer; font-weight: 600; position: relative; } .c-thankyoubg__link:before { bottom: -2px; left: 0; content: ''; width: 100%; height: 1px; position: absolute; -webkit-transform-origin: 2px; transform-origin: 2px; background: #8e1b61; -webkit-transform: scaleX(0); transform: scaleX(0); transition: -webkit-transform .3s ease-in-out 0s; transition: transform .3s ease-in-out 0s; transition: transform .3s ease-in-out 0s, -webkit-transform .3s ease-in-out 0s; } .c-thankyoubg__link:hover, .c-thankyoubg__link:hover { color: #8e1b61; } .c-thankyoubg__link:hover:before, .c-thankyoubg__link:hover:before { -webkit-transform: scaleX(1); transform: scaleX(1); } .c-thankyoubg__bullet { padding-top: 29px; } .c-thankyoubg__bulletSection { margin-bottom: 34px; } .c-thankyoubg__bulletmedia {} @media (min-width: 1280px) { .c-thankyoubg__bulletmedia { width: 34px; text-align: center; } } .c-thankyoubg__bulletcontent {} @media (min-width: 1280px) { .c-thankyoubg__bulletcontent { overflow: hidden; padding-left: 16px; padding-top: 2px; } } .c-thankyoubg__bulletTitle {} @media (min-width: 1024px) { .c-thankyoubg__bulletTitle { font-size: 12px; text-transform: uppercase; margin-bottom: 5px; letter-spacing: 3px; } } .c-thankyoubg__rightTitle { font-size: 22px; padding: 0 0 40px 0; text-align: center; } @media (min-width: 640px) { .c-thankyoubg__rightTitle { font-size: 28px; padding: 40px 0; } } @media (min-width: 1024px) { .c-thankyoubg__rightTitle { font-size: 21px; padding: 0 0 34px 0; text-align: left; } } @media (min-width: 1440px) { .c-thankyoubg__rightTitle { font-size: 22px; } } .c-thankyoubg__bulletText {} @media (max-width: 639px) { .c-thankyoubg__bulletText { font-size: 15px; } } @media (min-width: 640px) { .c-thankyoubg__bulletText { padding: 0 14px; } } @media (min-width: 769px) { .c-thankyoubg__bulletText { padding: 0; } } @media (min-width: 1024px) { .c-thankyoubg__bulletText { font-size: 16px; } } @media (min-width: 1280px) { .c-thankyoubg__bulletText {} } @media (min-width: 1440px) { .c-thankyoubg__bulletText { font-size: 17px; } } .c-thankyoubg__bulletTitle {} @media (max-width: 639px) { .c-thankyoubg__bulletTitle { font-size: 13px; } } .c-thankyoubg__bulletIcon {} .c-thankyoubg__bulletIcon--1 { width: 25px; } .c-thankyoubg__bulletIcon--2 { width: 34px; } .c-thankyoubg__bulletIcon--3 { width: 31px; } .c-thankyoubg__bulletIcon--4 { width: 30px; } @media (min-width: 640px) { .c-thankyoubg__bulletIcon--4 { padding-top: 11px; } } @media (min-width: 1024px) { .c-thankyoubg__bulletIcon--4 { padding-top: 0; } } .c-shareNews .c-btn { font-size: 12px; padding: 16px 15px; letter-spacing: 2.6px; position: relative; } .c-shareNews .c-btn i { font-size: 24px; position: absolute; top: 12px; } .c-shareNews .c-btn span { padding-left: 24px; } .c-shareNews .c-btn:first-of-type { margin: 0 0 24px 0; } .c-shareNews__icons {} @media (max-width: 639px) { .c-shareNews__icons { max-width: 80%; margin: auto; } } .c-shareNews__content { padding: 49px 0 80px 0; } @media (min-width: 640px) { .c-shareNews__content { padding: 47px 60px 77px 60px; margin-top: 27px; } } @media (min-width: 1024px) { .c-shareNews__content { padding-top: 50px; padding-bottom: 64px; margin-top: 0; } } @media (min-width: 1280px) { .c-shareNews__content { padding: 40px 0 85px 0; } } @media (min-width: 1440px) { .c-shareNews__content { padding: 80px 0; } } @media (min-width: 640px) { .c-shareNews .c-btn { padding: 16px 40px; } } @media (min-width: 640px) { .c-shareNews .c-btn span { padding-left: 31px; } } @media only screen and (min-width: 846px) { .c-shareNews .c-btn:first-of-type { margin: 0; } } @media (min-width: 1024px) { .c-shareNews .c-btn:first-of-type { margin-right: 24px; } } .c-shareNews__title { font-size: 30px; } @media (min-width: 640px) { .c-shareNews__title { font-size: 46px; } } @media (min-width: 1280px) { .c-shareNews__title { font-size: 50px; } } @media (min-width: 1440px) { .c-shareNews__title { font-size: 60px; } } .c-shareNews__para { font-size: 13px; padding: 16px 48px; padding: 1rem 3rem; line-height: 2.1; } @media (min-width: 640px) { .c-shareNews__para { font-size: 16px; padding: 1rem; } } @media (min-width: 1280px) { .c-shareNews__para { font-size: 18px; } } @media (min-width: 1440px) { .c-shareNews__para { font-size: 20px; } } .c-shareNews__content { background-color: #fff; } .c-copyRight { color: #7c7c7c; padding: 6px 0; } .c-copyRight__text { font-family: 'Gotham', sans-serif; font-weight: 700; text-transform: uppercase; font-size: 11px; } .c-copyRight__divider { padding: 0 8px; } .c-thankyouHero { background-image: url(images/thankyou/thankyou-hero-bg-mobile-large.jpg); } @media (max-width: 768px) { .c-thankyouHero { background-size: cover; background-position: center bottom; } } @media (max-width: 767px) { .c-thankyouHero { background-position: 100% bottom; } } @media (min-width: 768px) { .c-thankyouHero { background-position: 65% 0px; background-image: url(images/thankyou/thankyou-hero-bg-desktop-small.jpg); } } @media (min-width: 769px) { .c-thankyouHero { background-image: url(images/thankyou/thankyou-hero-bg-desktop-small.jpg); background-position: 65% 0px; } } @media (min-width: 1024px) { .c-thankyouHero { background-position: center 45%; } } @media (min-width: 1280px) { .c-thankyouHero { background-image: url(images/thankyou/thankyou-hero-bg-desktop-small.jpg); background-position: center 0; } } @media (min-width: 1440px) { .c-thankyouHero { background-image: url(images/thankyou/thankyou-hero-bg-desktop.jpg); } } @media only screen and (min-width: 1920px) { .c-thankyouHero {} } .c-thankyouHero__container { height: 480px; } @media (min-width: 640px) { .c-thankyouHero__container { height: 800px; } } @media (min-width: 768px) { .c-thankyouHero__container { padding-top: 0; height: 520px; } } @media (min-width: 1440px) { .c-thankyouHero__container { height: 690px; } } .c-thankyouHero__para { font-size: 13px; padding-top: 16px; line-height: 2; } @media (min-width: 640px) { .c-thankyouHero__para { font-size: 16px; } } @media (min-width: 1280px) { .c-thankyouHero__para { font-size: 17px; } } @media (min-width: 1440px) { .c-thankyouHero__para { font-size: 18px; padding-top: 24px; } } .c-thankyouHero__subHeading { font-size: 40px; line-height: 50px; } @media (min-width: 640px) { .c-thankyouHero__subHeading { font-size: 65px; line-height: 75px; } } @media (min-width: 1024px) { .c-thankyouHero__subHeading { font-size: 50px; line-height: 60px; } } @media (min-width: 1280px) { .c-thankyouHero__subHeading { font-size: 65px; line-height: 75px; } } @media (min-width: 1440px) { .c-thankyouHero__subHeading { font-size: 74px; line-height: 84px; } } .c-thankyouHero__Center { position: absolute; top: 20%; } @media (min-width: 640px) { .c-thankyouHero__Center { top: 23%; } } @media (min-width: 1024px) { .c-thankyouHero__Center { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } } .page-template-anattapage-thankyou-php .c-copyright__text { display: none; } .c-post-header { background-repeat: no-repeat; background-position: center center; background-size: cover; font-family: 'Gotham', sans-serif; text-align: center; padding: 62px 7px 0; margin: 8px 8px 34px; } @media (min-width: 640px) { .c-post-header { padding: 87px 20px 0; margin: 8px 8px 50px; } } @media (min-width: 1024px) { .c-post-header { padding: 60px 40px 0; margin: 18px 18px 60px; } } .c-post-header__title { font-size: 25px; font-weight: 300; line-height: 36px; margin: 0 auto; max-width: 290px; } .c-post-header__title .u-highlight { display: inline-block; margin-bottom: 18px; padding: 15px 22px 10px 22px; line-height: 1; font-weight: 400; } @media (min-width: 640px) { .c-post-header__title { font-size: 42px; line-height: 56px; max-width: 480px; margin: 0 auto 14px; } } @media (min-width: 1024px) { .c-post-header__title { font-size: 50px; line-height: 1.4; max-width: 600px; } } .c-post-header__title:before { display: none; } @media (min-width: 1024px) { .c-post-header__title .u-highlight { font-size: 50px; } } .c-post-header__author { font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; font-weight: 700; margin: 0; } @media (min-width: 640px) { .c-post-header__author { font-size: 12px; } } @media (min-width: 1024px) { .c-post-header__author { font-size: 13px; } } .c-post-header__author::before { content: ''; display: inline-block; width: 42px; height: 42px; margin-right: 12px; background-color: #ddd; background-repeat: no-repeat; background-size: cover; background-position: center; background-image: url('images/marie-avatar2.png'); border-radius: 50%; vertical-align: middle; } .c-post-banner { position: relative; background: #fefaf7; height: 332px; } @media (min-width: 640px) { .c-post-banner { height: 510px; } } @media (min-width: 1024px) { .c-post-banner { height: 450px; } } .c-post-banner:before, .c-post-banner:after { height: 100%; position: absolute; z-index: 6; content: ''; top: 0; background-repeat: no-repeat; background-size: auto 100%; } .c-post-banner:before { left: 0; width: 76px; background-image: url('images/post-banner-left-img-mobile.jpg'); background-position: 0 0; } @media (min-width: 640px) { .c-post-banner:before { width: 106px; background-image: url('images/post-banner-left-img-mobile-large.jpg'); } } @media (min-width: 1024px) { .c-post-banner:before { width: 160px; background-image: url('images/post-banner-left-img.jpg'); } } .c-post-banner:after { right: 0; width: 88px; background-image: url('images/post-banner-right-img-mobile.jpg'); background-position: right 0; } @media (min-width: 640px) { .c-post-banner:after { width: 141px; background-image: url('images/post-banner-right-img-mobile-large.jpg'); } } @media (min-width: 1024px) { .c-post-banner:after { width: 235px; background-image: url('images/post-banner-right-img.jpg'); } } .c-post-header__content { position: relative; z-index: 7; } .c-post-content { position: relative; font-family: 'Elena', serif; font-size: 16px; } .c-post-content h2 { max-width: 600px; } .c-post-content h3 { font-size: 24px; line-height: 30px; font-style: italic; margin-bottom: 20px; } .c-post-content h4 { font-size: 18px; line-height: 26px; font-style: italic; text-transform: none; color: #000; } .c-post-content p { padding: 0; margin: 0; line-height: 28px; margin-bottom: 26px; } .c-post-content a:not(.c-btn) { text-decoration: underline; color: #000; } .c-post-content a:not(.c-btn):hover {} .c-post-content ul, .c-post-content ol { padding: 2px 0 0; margin: 0 0 60px; list-style: none; } .c-post-content ul.checklist, .c-post-content ol.checklist { margin-bottom: 30px; } .c-post-content ul.checklist li, .c-post-content ol.checklist li { line-height: 28px; padding-left: 52px; } .c-post-content ul.checklist li::before, .c-post-content ol.checklist li::before { display: block; content: ''; position: absolute; top: 9px; left: 28px; font-size: 14px; line-height: 16px; width: 12px; height: 14px; border-radius: 0; background: url('images/icon-checkmark.png') 0 0 no-repeat; background-size: 100% auto; } .c-post-content li { position: relative; line-height: 28px; padding: 0 10px 0 16px; margin-bottom: 18px; } .c-post-content li a { text-decoration: underline; } .c-post-content li a:hover {} .c-post-content li:last-child { margin-bottom: 0; } .c-post-content li::before { content: ''; position: absolute; top: 12px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: #000; } .c-post-content ol { margin-bottom: 40px; } .c-post-content ol li { list-style-type: decimal; list-style-position: inside; } .c-post-content ol li::before { display: none; } .c-post-content blockquote h2 { font-family: 'Gotham', sans-serif; font-size: 24px; line-height: 42px; margin: 0 0 26px; max-width: 100% !important; padding: 0 !important; } .c-post-content blockquote h2 .u-highlight { padding: 0.2em; } .c-post-content blockquote h2::before { display: none; } .c-post-content .alignleft { float: left; margin-right: 27px; } @media (min-width: 640px) { .c-post-content { font-size: 20px; } } @media (min-width: 640px) { .c-post-content h3 { font-size: 36px; line-height: 40px; } } @media (min-width: 1024px) { .c-post-content h3 { margin-bottom: 32px; } } @media (min-width: 640px) { .c-post-content h4 { font-size: 30px; line-height: 42px; } } @media (min-width: 1024px) { .c-post-content h4 { font-size: 28px; line-height: 38px; } } @media (min-width: 640px) { .c-post-content p { line-height: 38px; margin-bottom: 40px; } } @media (min-width: 1024px) { .c-post-content a:not(.c-btn):hover { text-decoration: none; } } @media (min-width: 640px) { .c-post-content ul, .c-post-content ol { padding-top: 5px; margin-bottom: 80px; } } @media (min-width: 1024px) { .c-post-content ul.checklist, .c-post-content ol.checklist { margin-bottom: 35px; } } @media (min-width: 640px) { .c-post-content ul.checklist li, .c-post-content ol.checklist li { line-height: 44px; } } @media (min-width: 1024px) { .c-post-content ul.checklist li, .c-post-content ol.checklist li { line-height: 38px; padding-left: 90px; } } @media (min-width: 640px) { .c-post-content ul.checklist li::before, .c-post-content ol.checklist li::before { width: 16px; left: 24px; top: 15px; } } @media (min-width: 1024px) { .c-post-content ul.checklist li::before, .c-post-content ol.checklist li::before { top: 11px; left: 61px; } } @media (min-width: 640px) { .c-post-content li { line-height: 44px; } } @media (min-width: 1024px) { .c-post-content li { margin-bottom: 22px; line-height: 38px; padding: 0 10px 0 25px; } } @media (min-width: 1024px) { .c-post-content li a:hover { text-decoration: none; } } @media (min-width: 640px) { .c-post-content li::before { top: 19px; } } @media (min-width: 1024px) { .c-post-content li::before { top: 15px; width: 6px; height: 6px; } } @media (min-width: 640px) { .c-post-content ol { margin-bottom: 60px; } } @media (min-width: 640px) { .c-post-content blockquote h2 { font-size: 34px; line-height: 52px; margin: 0 0 40px; } } @media (min-width: 1024px) { .c-post-content blockquote h2 { font-size: 30px; line-height: 50px; padding-right: 40px; margin: 0 0 30px; } } .c-section-heading { font-family: 'Gotham', sans-serif; text-align: center; margin-bottom: 35px; } .c-section-heading h2 { position: relative; display: inline-block; font-size: 31px; font-weight: 300; line-height: 44px; margin: 14px 0 0; } .c-section-heading h2 br { display: none; } .c-section-heading h2::before { content: ''; display: block; position: absolute; top: -12px; left: 0; height: 3px; width: 100%; background: black; } .c-section-heading p { display: none; } .c-section-heading > br { display: none; } .c-section-heading > em { display: block; margin-bottom: 4px; font-style: normal; font-weight: 700; font-size: 24px; } .c-section-heading > a { text-decoration: none !important; } .c-section-heading strong { font-size: 25px; font-weight: 300; } @media (min-width: 640px) { .c-section-heading { margin-bottom: 65px; } } @media (min-width: 640px) { .c-section-heading h2 { font-size: 54px; line-height: 60px; margin: 20px 0 2px; } } @media (min-width: 1024px) { .c-section-heading h2 { font-size: 46px; line-height: 60px; } } @media (min-width: 640px) { .c-section-heading h2::before { top: -18px; } } @media (min-width: 640px) { .c-section-heading h2 br { display: inline; } } @media (min-width: 640px) { .c-section-heading strong { font-size: 34px; } } @media (min-width: 1024px) { .c-section-heading strong { font-size: 36px; } } .c-section-heading__list { max-width: 590px; margin: 0 auto !important; padding-top: 0 !important; line-height: 16px !important; } .c-section-heading__list li { position: relative; display: inline-block; line-height: 16px !important; padding: 0; margin-bottom: 0; } .c-section-heading__list li::before { display: none; } .c-section-heading__list li::after { content: ''; position: absolute; top: 4px; right: -2px; width: 1px; height: 8px; background: #868883; } .c-section-heading__list li:last-child::after { display: none; } .c-section-heading__list a { position: relative; display: block; font-size: 8px; font-weight: 300; text-transform: uppercase; text-decoration: none !important; letter-spacing: 0.1em; margin: 0 4px; } .c-section-heading__list a::after { display: block; content: ''; position: absolute; left: 0; bottom: 2px; height: 1px; width: 100%; background: #bebbb9; } .c-section-heading__list a:hover::after {} @media (min-width: 640px) { .c-section-heading__list { padding-top: 5px !important; } } @media (min-width: 1024px) { .c-section-heading__list li { margin-bottom: 5px; } } @media (min-width: 1024px) { .c-section-heading__list li::after { top: 3px; right: -2px; height: 10px; } } @media (min-width: 640px) { .c-section-heading__list a { font-size: 10px; margin: 0 6px; } } @media (min-width: 1024px) { .c-section-heading__list a:hover::after { display: none; } } .c-section-heading__h3 { position: relative; display: inline-block; font-family: 'Gotham', sans-serif; font-size: 31px; font-weight: 300; line-height: 44px; margin: 28px 0 30px; } .c-section-heading__h3 .left-quotes { position: absolute; left: -13px; } .c-section-heading__h3 br { display: none; } @media (min-width: 640px) { .c-section-heading__h3 { font-size: 54px; line-height: 60px; margin: 40px 0; } } @media (min-width: 1024px) { .c-section-heading__h3 { font-size: 46px; line-height: 60px; margin: 45px 0 40px; } } .c-section-heading__h3::before { content: ''; display: block; position: absolute; top: -18px; left: 0; height: 3px; width: 100%; background: black; } @media (min-width: 640px) { .c-section-heading__h3::before { top: -17px; } } @media (min-width: 640px) { .c-section-heading__h3 .left-quotes { left: -22px; } } @media (min-width: 445px) { .c-section-heading__h3 br { display: inline; } } @media (min-width: 640px) { .c-section-heading__h3 br { display: none; } } @media (min-width: 1024px) { .c-section-heading__h3 br { display: inline; } } .c-post-navigation { max-width: 970px; margin: 0 auto 46px; } .c-post-navigation ol { padding: 38px 0 !important; margin: 0 !important; } .c-post-navigation ol > li { padding: 0 12px; list-style: none !important; margin-bottom: 40px; } .c-post-navigation ol > li ul { max-width: 500px; } .c-post-navigation ol > li a::after { /* background: $grey-medium; */ } .c-post-navigation ol > li:last-child { margin-bottom: 0; } .c-post-navigation ol > li::before { display: none; } @media (min-width: 640px) { .c-post-navigation { margin-bottom: 88px; } } @media (min-width: 640px) { .c-post-navigation ol { padding: 70px 0 !important; } } @media (min-width: 640px) { .c-post-navigation ol > li { padding: 0 20px; margin-bottom: 52px; } } @media (min-width: 1024px) { .c-post-navigation ol > li { padding: 0; } } .c-post-navigation-fixed { position: fixed; top: 0; left: 0; width: 100%; height: 104px; text-align: center; background: #e3eceb; z-index: 7; -webkit-transform: translateY(-100%); transform: translateY(-100%); transition: -webkit-transform 200ms ease; transition: transform 200ms ease; transition: transform 200ms ease, -webkit-transform 200ms ease; } .c-post-navigation-fixed p { margin: 0; font-size: 13px; line-height: 13px; } .c-post-navigation-fixed p br { display: none; } .c-post-navigation-fixed p a { text-decoration: underline; } .c-post-navigation-fixed p a:hover {} .c-post-navigation-fixed .c-btn { display: block; position: relative; font-size: 8px; line-height: 10px; padding: 9px 12px; margin: 9px auto 0; z-index: 2; text-decoration: none; max-width: 158px; } @media (min-width: 640px) { .c-post-navigation-fixed { height: 146px; } } @media (min-width: 1024px) { .c-post-navigation-fixed { height: 82px; text-align: left; } } .c-post-navigation-fixed.visible { -webkit-transform: translateY(0); transform: translateY(0); } .c-post-navigation-fixed.active .c-post-navigation-fixed__dropdown {} .c-post-navigation-fixed.active .c-post-navigation-fixed__dropdown__list { display: block; } .c-post-navigation-fixed.active .c-post-navigation-fixed__dropdown__selected::after { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .c-post-navigation-fixed.active .c-post-navigation-fixed__dropdown__overlay { display: block; } @media (min-width: 1024px) { .c-post-navigation-fixed.active .c-post-navigation-fixed__dropdown__selected::after { top: 35px; } } @media (min-width: 1024px) { .c-post-navigation-fixed.active .c-post-navigation-fixed__dropdown__overlay { display: none; } } @media (min-width: 640px) { .c-post-navigation-fixed p { font-size: 18px; line-height: 18px; } } @media (min-width: 1024px) { .c-post-navigation-fixed p { float: left; line-height: 82px; } } @media (min-width: 1024px) { .c-post-navigation-fixed p a:hover { text-decoration: none; } } .c-post-navigation-fixed__container { position: relative; margin: 0 auto; height: 104px; padding: 16px 15px 0; } @media (min-width: 640px) { .c-post-navigation-fixed__container { height: 146px; max-width: 600px; padding: 22px 20px 0; } } @media (min-width: 1024px) { .c-post-navigation-fixed__container { height: auto; max-width: 965px; padding: 0; } } .c-post-navigation-fixed__label { font-family: 'Gotham', sans-serif; font-size: 19px !important; font-weight: 300; line-height: 20px !important; margin: 0 0 5px !important; } @media (min-width: 640px) { .c-post-navigation-fixed__label { font-size: 26px !important; line-height: 26px !important; margin: 0 0 10px !important; } } @media (min-width: 1024px) { .c-post-navigation-fixed__label { font-size: 28px !important; line-height: 82px !important; margin: 0 13px 0 0 !important; } } .c-post-navigation-fixed__dropdown { position: relative; margin: 0; z-index: 3; } .c-post-navigation-fixed__dropdown + p { position: relative; z-index: 2; } @media (min-width: 640px) { .c-post-navigation-fixed__dropdown { margin: 0 0 5px; } } @media (min-width: 1024px) { .c-post-navigation-fixed__dropdown { float: left; margin: 0 20px 0 0; } } .c-post-navigation-fixed__dropdown__selected { display: block; position: relative; font-family: 'Gotham', sans-serif; font-size: 25px; cursor: pointer; } @media (min-width: 640px) { .c-post-navigation-fixed__dropdown__selected { font-size: 42px; } } @media (min-width: 1024px) { .c-post-navigation-fixed__dropdown__selected { font-size: 30px; line-height: 82px; height: 82px; padding-right: 23px; } } .c-post-navigation-fixed__dropdown__selected::after { content: ''; position: absolute; top: 13px; height: 7px; width: 7px; background: url('images/icon-down.png') 0 0 no-repeat; background-size: 100% auto; margin-left: 4px; } @media (min-width: 640px) { .c-post-navigation-fixed__dropdown__selected::after { top: 25px; height: 9px; width: 10px; margin-left: 14px; background-size: auto; } } @media (min-width: 1024px) { .c-post-navigation-fixed__dropdown__selected::after { top: 36px; right: 0; margin: 0; } } .c-post-navigation-fixed__dropdown__list { display: none; position: absolute; top: 36px; left: 50%; text-align: left; width: 224px; padding: 0 !important; /* background: $grey; */ z-index: 5; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .c-post-navigation-fixed__dropdown__list li { padding: 0 !important; margin: 0 !important; border-bottom: 1px solid #fff; } .c-post-navigation-fixed__dropdown__list li::before { display: none; } .c-post-navigation-fixed__dropdown__list li.selected { display: none; } .c-post-navigation-fixed__dropdown__list a { display: block; font-family: 'Gotham', sans-serif; font-size: 16px; line-height: 22px; text-decoration: none !important; padding: 10px 17px 8px; } @media (min-width: 640px) { .c-post-navigation-fixed__dropdown__list { top: 62px; width: 415px; } } @media (min-width: 1024px) { .c-post-navigation-fixed__dropdown__list { top: 82px; left: -10px; width: 240px; -webkit-transform: none; transform: none; } } @media (min-width: 640px) { .c-post-navigation-fixed__dropdown__list a { font-size: 28px; line-height: 38px; padding: 20px 32px 14px; } } @media (min-width: 1024px) { .c-post-navigation-fixed__dropdown__list a { font-size: 17px; line-height: 26px; padding: 10px 18px 7px; } } .c-post-navigation-fixed__dropdown__overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 1000%; background: rgba(0, 0, 0, .2); z-index: 4; cursor: pointer; } .c-post-navigation-fixed__close { display: block; position: absolute; left: auto; top: 5px; right: 5px; width: 9px; height: 9px; background: url('images/icon-close.png') 0 0 no-repeat; background-size: 100% auto; cursor: pointer; } @media (min-width: 640px) { .c-post-navigation-fixed__close { top: 7px; right: 7px; width: 14px; height: 12px; } } .c-post-navigation-fixed__image { display: block; position: absolute; right: 0; bottom: 1px; z-index: 1; max-width: 88px; } @media (min-width: 640px) { .c-post-navigation-fixed__image { max-width: 130px; } } @media (min-width: 1024px) { .c-post-navigation-fixed__image { right: -60px; max-width: 125px; } } @media (min-width: 640px) { .c-post-navigation-fixed .c-btn { font-size: 10px; padding: 14px; margin: 12px auto 0; max-width: 218px; } } @media (min-width: 1024px) { .c-post-navigation-fixed .c-btn { display: block; float: left; font-size: 9px; padding: 11px 20px; margin: 24px 0 0 13px; max-width: 100%; } } .c-comments--fb { margin-bottom: 50px; } .c-resources { padding: 0 25px 28px; } .c-resources p { color: #fff; margin: 0; } @media (min-width: 1024px) { .c-resources { padding: 0 28px 28px; } } .c-resources__container { position: relative; padding: 20px 22px 158px; background: #000; } @media (min-width: 640px) { .c-resources__container { padding: 35px 30px 250px; } } @media (min-width: 1024px) { .c-resources__container { padding: 50px 320px 50px 50px; } } .c-resources__text { font-size: 17px; line-height: 30px; margin: 0; } .c-resources__text a:not(.c-btn) { color: #fff; text-decoration: underline; font-style: normal; } .c-resources__text a:not(.c-btn):hover {} @media (min-width: 640px) { .c-resources__text { font-size: 24px; line-height: 36px; } } @media (min-width: 1024px) { .c-resources__text a:not(.c-btn):hover { text-decoration: none; } } .c-resources__image { display: block; position: absolute; left: 50%; bottom: -11px; -webkit-transform: translateX(-50%); transform: translateX(-50%); max-height: 135px; } @media (min-width: 640px) { .c-resources__image { max-height: 218px; } } @media (min-width: 1024px) { .c-resources__image { left: auto; right: 22px; bottom: -11px; max-width: 236px; max-height: none; -webkit-transform: none; transform: none; } } .c-cheatsheet { position: relative; text-align: center; padding: 85px 10px 46px; background: #fefaf7; overflow: hidden; margin: 0 -20px 80px; } .c-cheatsheet p { margin-bottom: 0; } .c-cheatsheet .c-btn { font-size: 9px; } @media (min-width: 640px) { .c-cheatsheet { padding: 85px 40px 46px; margin: 0 0 80px; } } .c-cheatsheet::before { content: '\f02e'; font-family: 'FontAwesome'; font-size: 46px; height: 50px; line-height: 50px; position: absolute; top: -8px; left: 50%; -webkit-transform: translateX(-50%) scaleX(0.8); transform: translateX(-50%) scaleX(0.8); } .c-cheatsheet__heading { font-family: 'Gotham', sans-serif; font-size: 28px; font-weight: 300; margin-bottom: 18px !important; } .c-cheatsheet__heading > span { padding: 10px 23px 4px; } @media (min-width: 640px) { .c-cheatsheet__heading { font-size: 36px; margin-bottom: 10px !important; } } .c-cheatsheet__content { font-size: 14px; line-height: 26px; max-width: 195px; margin: 0 auto 18px !important; } @media (min-width: 640px) { .c-cheatsheet__content { font-size: 18px; line-height: 30px; max-width: 415px; margin: 0 auto 20px !important; } } .c-dream-business { padding: 0 12px; margin: -20px 0 40px; } .c-dream-business p { margin: 0; } .c-dream-business ul.checklist { line-height: 20px; padding-top: 0 !important; margin: 0 auto; max-width: 260px; } .c-dream-business ul.checklist li { display: block; font-size: 14px; line-height: 20px; padding: 0 22px; margin: 0 auto 10px; } .c-dream-business ul.checklist li::before { position: relative; display: inline-block; top: 5px; left: -6px; background-image: url('images/icon-checkmark-white.png'); } .c-dream-business ul.checklist + ul {} .c-dream-business .c-btn { display: inline-block; margin-top: 20px; padding: 14px 40px; font-weight: 600; font-size: 11px; } @media (min-width: 640px) { .c-dream-business { padding: 0 25px; margin: -20px 0 55px; } } @media (min-width: 1024px) { .c-dream-business { margin: -30px 0 55px; } } .c-dream-business__container { position: relative; padding: 40px 20px 202px; margin: 0 auto; max-width: 970px; overflow: hidden; text-align: center; color: #fff; background: #72bfb8; } @media (min-width: 640px) { .c-dream-business__container { padding: 65px 20px 405px; } } @media (min-width: 1024px) { .c-dream-business__container { padding: 92px 20px 60px; margin: 0 auto 24px; overflow: hidden; } } .c-dream-business__heading { font-family: 'Gotham', sans-serif; font-size: 28px !important; font-style: normal !important; font-weight: 300; margin: 0 0 18px !important; } @media (min-width: 640px) { .c-dream-business__heading { font-size: 47px !important; } } .c-dream-business__subheading { font-family: 'Gotham', sans-serif; font-size: 19px !important; font-weight: 600; margin: 0 0 21px !important; } .c-dream-business__label { font-size: 16px; font-weight: 700; margin-bottom: 10px !important; } @media (min-width: 640px) { .c-dream-business__label { font-size: 18px; } } .c-dream-business__image { display: block; position: absolute; left: 50%; bottom: -130px; -webkit-transform: translateX(-50%); transform: translateX(-50%); max-width: 240px; } @media (min-width: 640px) { .c-dream-business__image { bottom: -285px; max-width: 507px; } } @media (min-width: 1024px) { .c-dream-business__image { left: auto; bottom: -52px; right: -60px; -webkit-transform: none; transform: none; max-width: 240px; } } @media (min-width: 640px) { .c-dream-business ul.checklist { max-width: 460px; } } @media (min-width: 1024px) { .c-dream-business ul.checklist { padding-top: 5px !important; max-width: 100%; } } @media (min-width: 640px) { .c-dream-business ul.checklist li { font-size: 24px; line-height: 32px; margin-bottom: 18px; } } @media (min-width: 1024px) { .c-dream-business ul.checklist li { display: inline-block; font-size: 18px; line-height: 20px; margin: 0; } } @media (min-width: 640px) { .c-dream-business ul.checklist li::before { top: -1px; left: -10px; } } @media (min-width: 1024px) { .c-dream-business ul.checklist li::before { position: absolute; display: block; top: 2px; left: 0; margin-right: 0; } } @media (min-width: 1024px) { .c-dream-business ul.checklist + ul { margin-top: 6px; } } @media (min-width: 640px) { .c-dream-business .c-btn { margin-top: 38px; min-width: 248px; } } @media (min-width: 1024px) { .c-dream-business .c-btn { margin-top: 50px; } } .c-share { display: none; position: absolute; top: 0; left: 50px; width: 40px; padding-top: 8px; margin-top: 92px; border-top: 3px solid #000; -webkit-transform: translateY(-80px); transform: translateY(-80px); z-index: 9; } .c-share p { margin: 0; } .c-share.active {} @media (min-width: 1024px) { .c-share.active { display: block; } } .c-share.fixed { position: fixed; -webkit-transform: translateY(0); transform: translateY(0); } .c-share__heading { font-family: 'Gotham', sans-serif; font-size: 9px; text-align: center; text-transform: uppercase; letter-spacing: 0.2em; margin: 0; line-height: 10px; } .c-share__list { list-style: none; padding: 16px 0 0 !important; margin: 0 !important; } .c-share__list__item { padding: 0 !important; margin: 0 0 16px !important; } .c-share__list__item::before { display: none; } .c-share__list__item__button { display: block; width: 26px; height: 26px; margin: 0 auto; background-position: 0 0; background-repeat: no-repeat; background-size: 100% auto; cursor: pointer; } .c-share__list__item__button.facebook { background-image: url('images/icon-facebook.png'); } .c-share__list__item__button.twitter { background-image: url('images/icon-twitter.png'); } .c-share__list__item__button.email { background-image: url('images/icon-email.png'); } .c-share__list__item__count { display: block; font-family: 'Gotham', sans-serif; font-size: 13px; line-height: 1 !important; text-align: center; font-weight: 300; padding: 8px 0 0 0 !important; } .c-twitter { position: relative; padding: 38px 30px 34px; margin-bottom: 26px; background: #e3eceb; } .c-twitter p { margin: 0; } .c-twitter br { display: none; } .c-twitter .c-btn { margin-top: 20px; } @media (min-width: 640px) { .c-twitter { padding: 55px 45px 115px; margin-bottom: 40px; } } @media (min-width: 1024px) { .c-twitter { float: right; max-width: 504px; padding: 55px 70px 98px 54px; margin: 0 -108px 0 45px; } } .c-twitter__icon { display: block; position: absolute; top: 32px; left: 30px; font-size: 14px; line-height: 12px; height: 12px; width: 20px; font-style: normal; background: #e3eceb; } @media (min-width: 640px) { .c-twitter__icon { top: 42px; left: 45px; font-size: 22px; line-height: 20px; height: 20px; width: 26px; } } @media (min-width: 1024px) { .c-twitter__icon { left: 54px; } } .c-twitter__tweet { margin: 0; padding-top: 24px; font-family: 'GalaxieCopernicus', serif; font-size: 16px; font-style: italic; line-height: 1.8; border-top: 1px solid #868883; } @media (min-width: 1024px) { .c-twitter__tweet { font-size: 20px; } } .c-twitter__author { display: block; font-family: 'Gotham', sans-serif; font-size: 9px; line-height: 10px; text-transform: uppercase; margin-top: 18px; } @media (min-width: 640px) { .c-twitter__author { position: absolute; left: 45px; bottom: 62px; font-size: 12px; } } @media (min-width: 1024px) { .c-twitter__author { left: 54px; bottom: 48px; font-size: 10px; } } @media (min-width: 640px) { .c-twitter .c-btn { position: absolute; bottom: 48px; right: 45px; } } @media (min-width: 1024px) { .c-twitter .c-btn { bottom: 36px; right: 54px; margin: 0; } } /* opt in component */ .c-optIn { padding: 70px 0 26px; } @media (min-width: 640px) { .c-optIn { padding-top: 90px; padding-bottom: 59px; } } @media (min-width: 1024px) { .c-optIn { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; min-height: calc(100vh - 61px); padding-top: 152px; padding-bottom: 100px; } } .c-optIn__content { position: relative; width: 100%; max-width: 984px; margin: 0 auto; padding: 0 20px; } .c-optIn__info { text-align: center; } @media (min-width: 1024px) { .c-optIn__info { width: 390px; text-align: left; } } .c-optIn__heading { margin: 0 0 3px; font-family: 'Gotham', sans-serif; font-size: 22px; font-weight: 300; line-height: 1.4; color: #54c3ba; } .c-optIn__heading br {} .c-optIn__heading br:first-of-type { display: none; } @media (min-width: 640px) { .c-optIn__heading { margin-bottom: 31px; font-size: 44px; } } @media (min-width: 1024px) { .c-optIn__heading { margin-bottom: 24px; font-size: 48px; line-height: 1.2; } } @media (min-width: 1024px) { .c-optIn__heading br { display: none; } } @media (min-width: 1024px) { .c-optIn__heading br:first-of-type { display: inline; display: initial; } } .c-optIn__img { margin: 0 auto; max-width: 573px; } @media (min-width: 640px) { .c-optIn__img { margin-bottom: 13px; } } @media (min-width: 1024px) { .c-optIn__img { position: absolute; top: -29px; right: -51px; } } .c-optIn__desc { font-size: 13px; line-height: 2.2; } .c-optIn__desc p { margin-bottom: 20px; } .c-optIn__desc p:last-child { margin-bottom: 0; } .c-optIn__desc .c-btn { width: 100%; padding-top: 16px; padding-bottom: 16px; font-size: 11px; letter-spacing: 2.6px; } @media (min-width: 640px) { .c-optIn__desc { font-size: 26px; } } @media (min-width: 1024px) { .c-optIn__desc { font-size: 16px; } } @media (min-width: 640px) { .c-optIn__desc p { margin-bottom: 40px; } } @media (min-width: 1024px) { .c-optIn__desc p { margin-bottom: 36px; } } @media (min-width: 640px) { .c-optIn__desc .c-btn { padding-top: 33px; padding-bottom: 33px; font-size: 21px; } } @media (min-width: 1024px) { .c-optIn__desc .c-btn { padding-top: 16px; padding-bottom: 16px; font-size: 14px; } } /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ .c-programSupport__mentor { text-align: center; background-color: #ffffff; width: 90%; margin: auto; padding: 30px 20px; } @media (min-width: 640px) { .c-programSupport__mentor { padding: 50px 20px; } } @media (min-width: 1024px) { .c-programSupport__mentor { max-width: 1340px; width: auto; padding: 78px 20px; } } .c-programSupport__mentorPara { padding-top: 5px; letter-spacing: 0.7px; padding-bottom: 40px; font-size: 13px; line-height: 24px; } @media (min-width: 640px) { .c-programSupport__mentorPara { font-size: 16px; } } @media (min-width: 1024px) { .c-programSupport__mentorPara { font-size: 18px; line-height: 2.3; } } .c-programSupport__mentorHeading { font-family: 'Gotham', sans-serif; color: #71bfb8; font-size: 18px; line-height: 1.6; position: relative; display: inline-block; } @media (min-width: 640px) { .c-programSupport__mentorHeading { font-size: 22px; } } @media (min-width: 1024px) { .c-programSupport__mentorHeading { font-size: 26px; } } .c-programSupport__mentorQuoteIcon { position: relative; font-family: 'GalaxieCopernicus', serif; font-size: 30px; line-height: 0; top: 10px; } @media (min-width: 640px) { .c-programSupport__mentorQuoteIcon { font-size: 40px; top: 15px; left: -10px; } } @media (min-width: 1024px) { .c-programSupport__mentorQuoteIcon { font-size: 60px; top: 25px; left: -20px; } } .c-programSupport__mentorQuoteIcon.end {} @media (min-width: 640px) { .c-programSupport__mentorQuoteIcon.end { right: -10px; left: auto; } } @media (min-width: 1024px) { .c-programSupport__mentorQuoteIcon.end { right: -20px; } } .c-programSupport__mentorPic { padding-top: 20px; font-family: 'Gotham', sans-serif; font-weight: 500; font-size: 13px; letter-spacing: 1px; color: #71bfb8; } .c-programSupport__mentorPic img { margin-right: 7px; } .page-template-page-webinar, .page-template-page-webinar-full { padding: 0; } .page-template-page-webinar #page, .page-template-page-webinar-full #page { padding: 0; } /* Hero */ .c-webinarHero { position: relative; min-height: 387px; padding-top: 20px; padding-bottom: 20px; } @media (min-width: 640px) { .c-webinarHero { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } } @media (min-width: 768px) { .c-webinarHero { height: 800px; } } @media (min-width: 1024px) { .c-webinarHero { height: 552px; } } .c-webinarHero.c-webinarHero--fh { height: auto; min-height: 100vh; } .c-webinarHero__img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #f8f8f8; background-repeat: no-repeat; background-position: center; background-size: cover; } .c-webinarHero__img--mobile {} @media (min-width: 1024px) { .c-webinarHero__img--mobile { display: none; } } .c-webinarHero__img--desktop { display: none; } @media (min-width: 1024px) { .c-webinarHero__img--desktop { display: block; } } .c-webinarHero__info { margin: 0 auto; padding: 35px 30px 33px; font-family: 'Gotham', sans-serif; text-align: center; background-color: #fff; } .c-webinarHero--slim .c-webinarHero__info {} @media (min-width: 640px) { .c-webinarHero__info { max-width: 595px; } } @media (min-width: 1024px) { .c-webinarHero__info { margin: 0; float: right; padding-top: 78px; padding-bottom: 78px; } } @media (min-width: 1024px) { .c-webinarHero--slim .c-webinarHero__info { padding-top: 40px; padding-bottom: 40px; } } .c-webinarHero__title { margin: 0 0 9px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; } @media (min-width: 640px) { .c-webinarHero__title { margin-bottom: 13px; font-size: 16px; letter-spacing: 4px; } } .c-webinarHero__heading { margin: 0 0 15px; font-size: 20px; line-height: 1.5; } @media (min-width: 640px) { .c-webinarHero__heading { margin-bottom: 30px; font-size: 45px; line-height: 1.3; } } .c-webinarHero__desc { max-width: 300px; margin: 0 auto 13px; padding: 0 15px; font-size: 13px; } @media (min-width: 640px) { .c-webinarHero__desc { margin-bottom: 41px; max-width: none; font-size: 22px; line-height: 1.8; padding: 0 70px; } } @media (min-width: 1024px) { .c-webinarHero__desc { padding: 0; } } .c-webinarHero__button.button { display: block; width: 100%; max-width: 400px; padding: 12px 20px; margin: 0 auto; font-family: 'Gotham', sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; text-align: center; letter-spacing: 3px; color: #fff; background-color: #f57000; border-color: #f57000; } @media (min-width: 640px) { .c-webinarHero__button.button { padding-top: 26px; padding-bottom: 26px; font-size: 23px; } } @media (min-width: 1024px) { .c-webinarHero__button.button { padding-top: 21px; padding-bottom: 21px; font-size: 19px; } } .c-webinarHero__button.button:hover, .c-webinarHero__button.button:focus { color: #fff; border-color: #c25900; background-color: #c25900; } /* Info */ .c-webinarInfo { padding-top: 30px; padding-bottom: 30px; } .c-webinarInfo .column {} @media (min-width: 1024px) { .c-webinarInfo { padding: 90px 0; } } @media screen and (min-width: 768px) and (max-width: 1023px) { .c-webinarInfo .column { padding-right: 60px; padding-left: 60px; } } .c-webinarInfo__content { font-family: 'Gotham', sans-serif; font-size: 13px; line-height: 2.0; } .c-webinarInfo__content p { margin: 0 0 28px; } .c-webinarInfo__content h2 { margin: 0 0 13px; font-size: 13px; text-transform: uppercase; font-weight: 700; letter-spacing: 2px; } .c-webinarInfo__content ul { margin: 0; padding: 0 0 0 17px; font-size: 12px; } .c-webinarInfo__content ul li { margin-bottom: 11px; } @media (min-width: 640px) { .c-webinarInfo__content { font-size: 20px; } } @media (min-width: 768px) { .c-webinarInfo__content { padding-top: 30px; } } @media (min-width: 1024px) { .c-webinarInfo__content { padding: 0 20px 0 60px; } } @media (min-width: 1440px) { .c-webinarInfo__content { padding-left: 0; padding-right: 0; } } @media (min-width: 640px) { .c-webinarInfo__content h2 { font-size: 20px; } } @media (min-width: 1024px) { .c-webinarInfo__content h2 { font-size: 18px; } } @media (min-width: 640px) { .c-webinarInfo__content ul { font-size: 20px; } } @media (min-width: 1024px) { .c-webinarInfo__content ul { font-size: 16px; } } /* Countdown timer */ .c-webinarCounter { margin-top: 36px; background-color: #f8f8f8; text-align: center; } @media (min-width: 1024px) { .c-webinarCounter { float: right; width: 454px; margin-top: 0; } } .c-webinarCounter__title { margin: 0; padding: 4px 0; font-family: 'Gotham', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; background-color: #eaeaea; } @media (min-width: 640px) { .c-webinarCounter__title { padding: 7px 0; font-size: 19px; } } @media (min-width: 1024px) { .c-webinarCounter__title { font-size: 16px; } } .c-webinarCounter__info { padding: 0 15px 15px; } @media (min-width: 640px) { .c-webinarCounter__info { padding: 0 25px 25px; } } .c-webinarCounter__timer { padding: 24px 0 6px; } @media (min-width: 640px) { .c-webinarCounter__timer { padding: 38px 0 18px; } } .c-webinarCounter__period { display: inline-block; padding: 0 3px; text-align: center; } @media (min-width: 640px) { .c-webinarCounter__period { padding: 0 6px; } } .c-webinarCounter__num { margin-bottom: 4px; font-family: 'flama-light', sans-serif; font-size: 51px; font-weight: 300; line-height: 1; } @media (min-width: 640px) { .c-webinarCounter__num { margin-bottom: 7px; font-size: 98px; } } @media (min-width: 1024px) { .c-webinarCounter__num { font-size: 82px; } } .c-webinarCounter__label { font-family: 'Gotham', sans-serif; font-size: 8px; font-weight: 700; line-height: 1; text-transform: uppercase; letter-spacing: 2px; } @media (min-width: 640px) { .c-webinarCounter__label { font-size: 15px; } } @media (min-width: 1024px) { .c-webinarCounter__label { font-size: 12px; } } .c-webinarCounter__button.button { display: block; width: 100%; max-width: 400px; padding: 12px 20px; margin: 0 auto; font-family: 'Gotham', sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; text-align: center; letter-spacing: 3px; color: #fff; background-color: #f57000; border: 0; } @media (min-width: 640px) { .c-webinarCounter__button.button { padding-top: 26px; padding-bottom: 26px; font-size: 23px; } } @media (min-width: 1024px) { .c-webinarCounter__button.button { padding-top: 21px; padding-bottom: 21px; font-size: 19px; } } .c-webinarCounter__button.button:hover, .c-webinarCounter__button.button:focus { color: #fff; background-color: #c25900; } /* About */ .c-webinarAbout { padding: 57px 0 25px; text-align: center; background-color: #f8f8f8; } .c-webinarAbout .column {} @media (min-width: 640px) { .c-webinarAbout { padding-bottom: 57px; text-align: left; } } @media (min-width: 1024px) { .c-webinarAbout { padding-top: 85px; padding-bottom: 60px; } } @media screen and (min-width: 768px) and (max-width: 1023px) { .c-webinarAbout .column { padding-right: 60px; padding-left: 60px; } } .c-webinarAbout__content { font-family: 'Gotham', sans-serif; font-size: 13px; line-height: 2.0; } .c-webinarAbout__content p { margin: 0 0 24px; } .c-webinarAbout__content h2 { margin: 0 0 26px; font-size: 24px; line-height: 1.0; } .c-webinarAbout__content img { display: inline-block; margin-bottom: 23px; } @media (min-width: 640px) { .c-webinarAbout__content { font-size: 20px; } } @media (min-width: 1024px) { .c-webinarAbout__content { font-size: 16px; } } @media (min-width: 640px) { .c-webinarAbout__content h2 { margin-top: 13px; margin-bottom: 22px; font-size: 40px; } } @media (min-width: 640px) { .c-webinarAbout__content img { float: left; max-width: 258px; margin: 0 24px 0 0; } } @media (min-width: 1024px) { .c-webinarAbout__content img { max-width: 100%; } } .c-webinarAbout__content--one h2 {} .c-webinarAbout__content--one img {} @media (min-width: 1024px) { .c-webinarAbout__content--one { padding-left: 70px; } } @media (min-width: 1024px) { .c-webinarAbout__content--one h2 { display: none; } } @media (max-width: 1023px) { .c-webinarAbout__content--one img { display: none; } } .c-webinarAbout__content--two h2 {} .c-webinarAbout__content--two img {} @media (min-width: 1024px) { .c-webinarAbout__content--two { padding-left: 60px; padding-right: 60px; } } @media (max-width: 1023px) { .c-webinarAbout__content--two h2 { display: none; } } @media (min-width: 1024px) { .c-webinarAbout__content--two img { display: none; } } /* Testimonials */ .c-webinarTestimonialList { padding-top: 45px; } @media (min-width: 1200px) { .c-webinarTestimonialList { padding-top: 100px; padding-bottom: 35px; } } .c-webinarTestimonial { font-family: 'Gotham', sans-serif; font-size: 13px; text-align: center; line-height: 2.0; } @media (min-width: 640px) { .c-webinarTestimonial { font-size: 14px; } } .c-webinarTestimonial__avatar { display: inline-block; margin-bottom: 15px; border-radius: 50%; max-width: 95px; } @media (min-width: 640px) { .c-webinarTestimonial__avatar { max-width: 191px; } } .c-webinarTestimonial__desc { margin: 0 0 9px; font-size: 11px; } @media (min-width: 640px) { .c-webinarTestimonial__desc { font-size: 18px; } } @media (min-width: 1024px) { .c-webinarTestimonial__desc { font-size: 27px; } } .c-webinarTestimonial__name { margin: 0; font-weight: 700; font-size: 9px; text-transform: uppercase; letter-spacing: 2px; } @media (min-width: 640px) { .c-webinarTestimonial__name { font-size: 15px; } } @media (min-width: 1024px) { .c-webinarTestimonial__name { font-size: 12px; } } body.page-template-page-webinar-starting-soon #page { position: relative; min-height: 100vh; } body.page-template-page-webinar-starting-soon .o-footer { position: absolute; bottom: 0; width: 100%; margin: 100px 0 30px; padding: 0; } .c-webinarStarting { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; padding-top: 111px; padding-bottom: 150px; min-height: 70vh; } .c-webinarStarting .c-webinarCounter__timer { padding: 15px 0 19px; } .c-webinarStarting .c-webinarCounter__period { padding: 8px 8px 19px; background-color: #fff; } .c-webinarStarting .c-webinarCounter__num { font-size: 43px; } @media (min-width: 640px) { .c-webinarStarting .c-webinarCounter__timer { padding-top: 30px; padding-bottom: 38px; } } @media (min-width: 640px) { .c-webinarStarting .c-webinarCounter__period { padding-right: 15px; padding-left: 15px; } } @media (min-width: 640px) { .c-webinarStarting .c-webinarCounter__num { font-size: 86px; } } .c-webinarStarting__info { font-family: 'Gotham', sans-serif; text-align: center; } .c-webinarStarting__title { margin: 0; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; } @media (min-width: 640px) { .c-webinarStarting__title { font-size: 16px; } } .c-webinarStarting__heading { margin: 0 -10px; font-size: 25px; line-height: 1.5; } @media (min-width: 640px) { .c-webinarStarting__heading { font-size: 50px; } } .c-webinarStarting__desc { margin: 0; font-size: 12px; line-height: 1.8; } @media (min-width: 640px) { .c-webinarStarting__desc { font-size: 24px; } } body.page-template-page-webinar-single { background-color: #f8f8f8; background-repeat: no-repeat; background-position: center top; background-size: 100% auto; min-height: 100vh; } body.page-template-page-webinar-single #page { position: relative; min-height: 100vh; } .c-webinarSingle { padding-top: 22px; padding-bottom: 100px; } .c-webinarSingle .column.row { max-width: 980px; } @media (min-width: 640px) { .c-webinarSingle { padding-top: 44px; } } .c-webinarSingle__info { font-family: 'Gotham', sans-serif; } .c-webinarSingle__heading { max-width: 200px; margin: 0 auto 19px; font-size: 15px; text-align: center; line-height: 1.5; } @media (min-width: 640px) { .c-webinarSingle__heading { max-width: 400px; margin-bottom: 37px; font-size: 30px; } } @media (min-width: 1024px) { .c-webinarSingle__heading { max-width: 580px; } } @media (min-width: 1280px) { .c-webinarSingle__heading { font-size: 38px; } } @media (min-width: 1520px) { .c-webinarSingle__heading { max-width: none; } } .c-webinarSingle__player { position: relative; padding-bottom: 56.25%; padding-top: 0px; height: 0; margin-bottom: 20px; } .c-webinarSingle__player iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .c-webinarSingle__actions { margin-bottom: 20px; text-align: center; background-color: #fff; } @media (min-width: 1024px) { .c-webinarSingle__actions { padding: 10px; } } .c-webinarSingle__actionsButton { display: block; width: 100%; padding: 10px 20px; margin: 0 auto; font-family: 'Gotham', sans-serif; font-size: 12px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 2px; background-color: #f57000; border-color: #f57000; } @media (min-width: 640px) { .c-webinarSingle__actionsButton { padding-top: 14px; padding-bottom: 12px; font-size: 18px; } } @media (min-width: 1024px) { .c-webinarSingle__actionsButton { max-width: 478px; font-size: 14px; } } .c-webinarSingle__actionsButton:hover, .c-webinarSingle__actionsButton:focus { color: #fff; border-color: #c25900; background-color: #c25900; } .c-webinarSingle__actionsSocial { display: block; position: relative; padding: 13px 13px 13px 51px; margin: 10px 2px; font-size: 9px; font-weight: 600; letter-spacing: 2px; line-height: 1; text-transform: uppercase; text-align: left; border: 2px solid #000; } @media (min-width: 640px) { .c-webinarSingle__actionsSocial { display: inline-block; } } .c-webinarSingle__actionsSocial::before { content: ''; position: absolute; top: 0; left: 0; width: 38px; height: 100%; border-right: 2px solid #000; background-repeat: no-repeat; background-position: center; background-size: 20px; } a.c-webinarSingle__actionsSocial--fb { border-color: #3b5998; color: #3b5998; } a.c-webinarSingle__actionsSocial--fb::before { border-color: #3b5998; background-image: url('images/facebook.svg'); } a.c-webinarSingle__actionsSocial--tw { border-color: #1da1f2; color: #1da1f2; } a.c-webinarSingle__actionsSocial--tw::before { border-color: #1da1f2; background-image: url('images/twitter.svg'); } .c-webinarSingle__comments { padding: 20px; background-color: #fff; } .c-webinarSingle__comments iframe { width: 100%; border: 1px solid #f0f0f0; } .page-template-page-webinar-replay { background-color: #f8f8f8; background-repeat: no-repeat; background-position: center; background-size: cover; min-height: 100vh; } .page-template-page-webinar-replay #page { position: relative; min-height: 100vh; } /* Replay */ .c-webinarReplay { padding-top: 20px; padding-bottom: 50px; } .c-webinarReplay .column.row { max-width: 980px; } .c-webinarReplay .c-webinarCounter__timer { padding: 8px 0; } .c-webinarReplay .c-webinarCounter__num {} .c-webinarReplay .c-webinarCounter__label {} @media (min-width: 640px) { .c-webinarReplay { padding-top: 42px; } } @media (min-width: 1024px) { .c-webinarReplay { padding-top: 64px; } } @media (min-width: 640px) { .c-webinarReplay .c-webinarCounter__timer { padding: 14px 0 20px; } } @media (min-width: 1024px) { .c-webinarReplay .c-webinarCounter__timer { float: right; width: 290px; padding: 0; text-align: right; } } @media (min-width: 1024px) { .c-webinarReplay .c-webinarCounter__num { font-size: 53px; } } @media (min-width: 1024px) { .c-webinarReplay .c-webinarCounter__label { font-size: 8px; } } .c-webinarReplay__info { padding: 25px 20px 20px; font-family: 'Gotham', sans-serif; background-color: #fff; } .c-webinarReplay__heading { margin: 0 auto 13px; font-size: 16px; line-height: 1.5; text-align: center; } .c-webinarReplay__heading br {} @media (min-width: 640px) { .c-webinarReplay__heading { margin-bottom: 22px; font-size: 30px; } } @media (min-width: 1024px) { .c-webinarReplay__heading { margin-bottom: 33px; padding-top: 10px; font-size: 38px; } } @media (min-width: 1024px) { .c-webinarReplay__heading br { display: none; } } .c-webinarReplay__player { position: relative; padding-bottom: 56.25%; padding-top: 0px; height: 0; margin-bottom: 16px; } .c-webinarReplay__player iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .c-webinarReplay__content { text-align: center; } .c-webinarReplay__content p { margin: 0; font-size: 12px; line-height: 1.5; } @media (min-width: 640px) { .c-webinarReplay__content p { font-size: 17px; } } @media (min-width: 1024px) { .c-webinarReplay__content p { font-size: 18px; text-align: left; } } .c-webinarReplay__infoTop {} @media (min-width: 1024px) { .c-webinarReplay__infoTop { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; padding: 0 0 12px; } } a.c-webinarReplay__Button { display: block; width: 100%; padding: 10px 20px; margin: 0 auto; font-family: 'Gotham', sans-serif; font-size: 9px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 3px; background-color: #f57000; border-color: #f57000; } @media (min-width: 640px) { a.c-webinarReplay__Button { font-size: 18px; } } @media (min-width: 1024px) { a.c-webinarReplay__Button { padding-top: 20px; padding-bottom: 20px; font-size: 16px; } } a.c-webinarReplay__Button:hover, a.c-webinarReplay__Button:focus { color: #fff; border-color: #c25900; background-color: #c25900; } .c-webinarStepProgress { max-width: 224px; margin: 0 auto 22px; text-align: left; } .c-webinarModal .c-webinarStepProgress, .c-webinarSuccess .c-webinarStepProgress { max-width: 180px; } @media (min-width: 640px) { .c-webinarStepProgress { margin-bottom: 44px; } } @media (min-width: 1024px) { .c-webinarStepProgress { margin-bottom: 49px; } } @media (min-width: 640px) { .c-webinarModal .c-webinarStepProgress, .c-webinarSuccess .c-webinarStepProgress { max-width: 360px; } } @media (min-width: 1024px) { .c-webinarModal .c-webinarStepProgress, .c-webinarSuccess .c-webinarStepProgress { max-width: 224px; } } .c-webinarStepProgress__label { font-size: 8px; font-weight: 700; color: #29c367; text-transform: uppercase; letter-spacing: 2px; } @media (min-width: 640px) { .c-webinarStepProgress__label { font-size: 14px; } } @media (min-width: 1024px) { .c-webinarStepProgress__label { font-size: 9px; } } .c-webinarStepProgress__bar { height: 7px; background-color: #ededed; border-radius: 7px; } .c-webinarStepProgress__bar span { display: block; height: 100%; border-radius: 7px; background-color: #29c367; } .page-template-page-webinar-success { padding: 0; } .page-template-page-webinar-success #page { padding-bottom: 0; } .c-webinarSuccess { position: relative; min-height: 100vh; padding-top: 20px; padding-bottom: 20px; } @media (min-width: 640px) { .c-webinarSuccess { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } } .c-webinarSuccess__img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #f8f8f8; background-repeat: no-repeat; background-position: center; background-size: cover; } .c-webinarSuccess__img--mobile {} @media (min-width: 1024px) { .c-webinarSuccess__img--mobile { display: none; } } .c-webinarSuccess__img--desktop { display: none; } @media (min-width: 1024px) { .c-webinarSuccess__img--desktop { display: block; } } .c-webinarSuccess__info { margin: 0 auto; padding: 35px 30px 30px; font-family: 'Gotham', sans-serif; background-color: #fff; } .c-webinarSuccess__info a { color: #000; } .c-webinarSuccess__info p { margin: 0 0 15px; font-size: 11px; line-height: 1.8; } .c-webinarSuccess__info p:last-child { margin-bottom: 0; } .c-webinarSuccess__info img { width: 75px; } @media (min-width: 640px) { .c-webinarSuccess__info { max-width: 595px; } } @media (min-width: 1024px) { .c-webinarSuccess__info { margin: 0; float: right; padding: 50px 70px 31px; } } @media (min-width: 640px) { .c-webinarSuccess__info p { margin-bottom: 32px; font-size: 20px; } } @media (min-width: 1024px) { .c-webinarSuccess__info p { font-size: 18px; } } @media (min-width: 640px) { .c-webinarSuccess__info img { width: 150px; } } @media (min-width: 1024px) { .c-webinarSuccess__info img { width: 139px; } } .c-webinarSuccess__heading { margin: 0 0 5px; font-size: 30px; line-height: 1.0; text-align: center; } @media (min-width: 640px) { .c-webinarSuccess__heading { margin-bottom: 11px; font-size: 60px; } } @media (min-width: 1024px) { .c-webinarSuccess__heading { font-size: 54px; } } p.c-webinarSuccess__title { margin-bottom: 21px; font-size: 13px; text-align: center; } @media (min-width: 640px) { p.c-webinarSuccess__title { margin-bottom: 43px; font-size: 24px; } } @media (min-width: 1024px) { p.c-webinarSuccess__title { font-size: 22px; } } /* --- Utilities ----------- */ /* Importing from postcss-utilities. https://ismamz.github.io/postcss-utilities/docs; */ /*Block-level element of an unknown height and width, centered vertically within his parent.*/ .u-absCenter { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .u-vAbsCenter { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } /* Importing from postcss-utilities. https://ismamz.github.io/postcss-utilities/docs; */ /* Center block with a width. */ .u-center { display: block; margin-left: auto; margin-right: auto; } /* Importing from postcss-utilities. https://ismamz.github.io/postcss-utilities/docs; */ /* The clearfix hack is a popular way to contain floats without resorting to using presentational markup. */ .u-clearFix:after { content: ''; display: block; clear: both; } /* Float left */ .u-floatLeft { float: left; } /* Float right */ .u-floatRight { float: right; } /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ /* Block hide */ .u-hide { display: none; } .u-hide--tabletSMax {} @media (max-width: 1023px) { .u-hide--tabletSMax { display: none; } } .u-hide--waitlistTablet {} @media (min-width: 961px) { .u-hide--waitlistTablet { display: none; } } .u-hide--tabletL {} @media (min-width: 1024px) { .u-hide--tabletL { display: none; } } .u-hide--tablet {} @media (min-width: 769px) { .u-hide--tablet { display: none; } } .u-hide--desktopSMax {} @media (max-width: 1279px) { .u-hide--desktopSMax { display: none; } } .u-hide--desktopS {} @media (min-width: 1280px) { .u-hide--desktopS { display: none; } } .u-hide--mobileL {} @media (min-width: 640px) { .u-hide--mobileL { display: none; } } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ /* Block show */ .u-show { display: block; } .u-show--mobileL { display: none; } @media (min-width: 640px) { .u-show--mobileL { display: block; } } .u-show--waitlistTablet { display: none; } @media (min-width: 961px) { .u-show--waitlistTablet { display: block; } } .u-show--tabletL { display: none; } @media (min-width: 1024px) { .u-show--tabletL { display: block; } } .u-show--tablet { display: none; } @media (min-width: 769px) { .u-show--tablet { display: block; } } /* Importing default settings */ /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ /* Spacing */ .u-pX0-5 { padding: 8px; padding: 0.5rem; } .u-pX0-5Vertical { padding-top: 8px; padding-top: 0.5rem; padding-bottom: 8px; padding-bottom: 0.5rem; } .u-pX0-5Top { padding-top: 8px; padding-top: 0.5rem; } .u-pX0-5Bottom { padding-bottom: 8px; padding-bottom: 0.5rem; } .u-pX0-5Horizontal { padding-right: 8px; padding-right: 0.5rem; padding-left: 8px; padding-left: 0.5rem; } .u-pX0-5Left { padding-left: 8px; padding-left: 0.5rem; } .u-pX0-5Right { padding-right: 8px; padding-right: 0.5rem; } .u-pX { padding: 16px; padding: 1rem; } .u-pXVertical { padding-top: 16px; padding-top: 1rem; padding-bottom: 16px; padding-bottom: 1rem; } .u-pXTop { padding-top: 16px; padding-top: 1rem; } .u-pXBottom { padding-bottom: 16px; padding-bottom: 1rem; } .u-pXHorizontal { padding-right: 16px; padding-right: 1rem; padding-left: 16px; padding-left: 1rem; } .u-pXLeft { padding-left: 16px; padding-left: 1rem; } .u-pXRight { padding-right: 16px; padding-right: 1rem; } .u-pX1-5 { padding: 24px; padding: 1.5rem; } .u-pX1-5Vertical { padding-top: 24px; padding-top: 1.5rem; padding-bottom: 24px; padding-bottom: 1.5rem; } .u-pX1-5Top { padding-top: 24px; padding-top: 1.5rem; } .u-pX1-5Bottom { padding-bottom: 24px; padding-bottom: 1.5rem; } .u-pX1-5Horizontal { padding-right: 24px; padding-right: 1.5rem; padding-left: 24px; padding-left: 1.5rem; } .u-pX1-5Left { padding-left: 24px; padding-left: 1.5rem; } .u-pX1-5Right { padding-right: 24px; padding-right: 1.5rem; } .u-pX2 { padding: 32px; padding: 2rem; } .u-pX2Vertical { padding-top: 32px; padding-top: 2rem; padding-bottom: 32px; padding-bottom: 2rem; } .u-pX2Top { padding-top: 32px; padding-top: 2rem; } .u-pX2Bottom { padding-bottom: 32px; padding-bottom: 2rem; } .u-pX2Horizontal { padding-right: 32px; padding-right: 2rem; padding-left: 32px; padding-left: 2rem; } .u-pX2Left { padding-left: 32px; padding-left: 2rem; } .u-pX2Right { padding-right: 32px; padding-right: 2rem; } .u-pX2-5 { padding: 40px; padding: 2.5rem; } .u-pX2-5Vertical { padding-top: 115.2px; padding-top: 7.2rem; padding-bottom: 115.2px; padding-bottom: 7.2rem; } .u-pX2-5Top { padding-top: 40px; padding-top: 2.5rem; } .u-pX2-5Bottom { padding-bottom: 40px; padding-bottom: 2.5rem; } .u-pX2-5Horizontal { padding-right: 40px; padding-right: 2.5rem; padding-left: 40px; padding-left: 2.5rem; } .u-pX2-5Left { padding-left: 40px; padding-left: 2.5rem; } .u-pX2-5Right { padding-right: 40px; padding-right: 2.5rem; } .u-pX3 { padding: 48px; padding: 3rem; } .u-pX3Vertical { padding-top: 48px; padding-top: 3rem; padding-bottom: 48px; padding-bottom: 3rem; } .u-pX3Top { padding-top: 48px; padding-top: 3rem; } .u-pX3Bottom { padding-bottom: 48px; padding-bottom: 3rem; } .u-pX3Horizontal { padding-right: 48px; padding-right: 3rem; padding-left: 48px; padding-left: 3rem; } .u-pX3Left { padding-left: 48px; padding-left: 3rem; } .u-pX3Right { padding-right: 48px; padding-right: 3rem; } .u-pX3-5 { padding: 56px; padding: 3.5rem; } .u-pX3-5Vertical { padding-top: 56px; padding-top: 3.5rem; padding-bottom: 56px; padding-bottom: 3.5rem; } .u-pX3-5Top { padding-top: 56px; padding-top: 3.5rem; } .u-pX3-5Bottom { padding-bottom: 56px; padding-bottom: 3.5rem; } .u-pX3-5Horizontal { padding-right: 56px; padding-right: 3.5rem; padding-left: 56px; padding-left: 3.5rem; } .u-pX3-5Left { padding-left: 56px; padding-left: 3.5rem; } .u-pX3-5Right { padding-right: 56px; padding-right: 3.5rem; } .u-pX4 { padding: 64px; padding: 4rem; } .u-pX4Vertical { padding-top: 64px; padding-top: 4rem; padding-bottom: 64px; padding-bottom: 4rem; } .u-pX4Top { padding-top: 64px; padding-top: 4rem; } .u-pX4Bottom { padding-bottom: 64px; padding-bottom: 4rem; } .u-pX4Horizontal { padding-right: 64px; padding-right: 4rem; padding-left: 64px; padding-left: 4rem; } .u-pX4Left { padding-left: 64px; padding-left: 4rem; } .u-pX4Right { padding-right: 64px; padding-right: 4rem; } .u-pX4-5 { padding: 72px; padding: 4.5rem; } .u-pX4-5Vertical { padding-top: 72px; padding-top: 4.5rem; padding-bottom: 72px; padding-bottom: 4.5rem; } .u-pX4-5Top { padding-top: 72px; padding-top: 4.5rem; } .u-pX4-5Bottom { padding-bottom: 72px; padding-bottom: 4.5rem; } .u-pX4-5Horizontal { padding-right: 72px; padding-right: 4.5rem; padding-left: 72px; padding-left: 4.5rem; } .u-pX4-5Left { padding-left: 72px; padding-left: 4.5rem; } .u-pX4-5Right { padding-right: 72px; padding-right: 4.5rem; } .u-pX5 { padding: 80px; padding: 5rem; } .u-pX5Vertical { padding-top: 80px; padding-top: 5rem; padding-bottom: 80px; padding-bottom: 5rem; } .u-pX5Top { padding-top: 80px; padding-top: 5rem; } .u-pX5Bottom { padding-bottom: 80px; padding-bottom: 5rem; } .u-pX5Horizontal { padding-right: 80px; padding-right: 5rem; padding-left: 80px; padding-left: 5rem; } .u-pX5Left { padding-left: 80px; padding-left: 5rem; } .u-pX5Right { padding-right: 80px; padding-right: 5rem; } .u-pX5-5 { padding: 88px; padding: 5.5rem; } .u-pX5-5Vertical { padding-top: 88px; padding-top: 5.5rem; padding-bottom: 88px; padding-bottom: 5.5rem; } .u-pX5-5Top { padding-top: 88px; padding-top: 5.5rem; } .u-pX5-5Bottom { padding-bottom: 88px; padding-bottom: 5.5rem; } .u-pX5-5Horizontal { padding-right: 88px; padding-right: 5.5rem; padding-left: 88px; padding-left: 5.5rem; } .u-pX5-5Left { padding-left: 88px; padding-left: 5.5rem; } .u-pX5-5Right { padding-right: 88px; padding-right: 5.5rem; } .u-pX6 { padding: 96px; padding: 6rem; } .u-pX6Vertical { padding-top: 96px; padding-top: 6rem; padding-bottom: 96px; padding-bottom: 6rem; } .u-pX6Top { padding-top: 96px; padding-top: 6rem; } .u-pX6Bottom { padding-bottom: 96px; padding-bottom: 6rem; } .u-pX6Horizontal { padding-right: 96px; padding-right: 6rem; padding-left: 96px; padding-left: 6rem; } .u-pX6Left { padding-left: 96px; padding-left: 6rem; } .u-pX6Right { padding-right: 96px; padding-right: 6rem; } .u-pX6-5 { padding: 104px; padding: 6.5rem; } .u-pX6-5Vertical { padding-top: 104px; padding-top: 6.5rem; padding-bottom: 104px; padding-bottom: 6.5rem; } .u-pX6-5Top { padding-top: 104px; padding-top: 6.5rem; } .u-pX6-5Bottom { padding-bottom: 104px; padding-bottom: 6.5rem; } .u-pX6-5Horizontal { padding-right: 104px; padding-right: 6.5rem; padding-left: 104px; padding-left: 6.5rem; } .u-pX6-5Left { padding-left: 104px; padding-left: 6.5rem; } .u-pX6-5Right { padding-right: 104px; padding-right: 6.5rem; } .u-pX7 { padding: 112px; padding: 7rem; } .u-pX7-Vertical { padding-top: 112px; padding-top: 7rem; padding-bottom: 112px; padding-bottom: 7rem; } .u-pX7-Top { padding-top: 112px; padding-top: 7rem; } .u-pX7-Bottom { padding-bottom: 112px; padding-bottom: 7rem; } .u-pX7-Horizontal { padding-right: 112px; padding-right: 7rem; padding-left: 112px; padding-left: 7rem; } .u-pX7-Left { padding-left: 112px; padding-left: 7rem; } .u-pX7-Right { padding-right: 112px; padding-right: 7rem; } .u-pX7-5 { padding: 120px; padding: 7.5rem; } .u-pX7-5Vertical { padding-top: 120px; padding-top: 7.5rem; padding-bottom: 120px; padding-bottom: 7.5rem; } .u-pX7-5Top { padding-top: 120px; padding-top: 7.5rem; } .u-pX7-5Bottom { padding-bottom: 120px; padding-bottom: 7.5rem; } .u-pX7-5Horizontal { padding-right: 120px; padding-right: 7.5rem; padding-left: 120px; padding-left: 7.5rem; } .u-pX7-5Left { padding-left: 120px; padding-left: 7.5rem; } .u-pX7-5Right { padding-right: 120px; padding-right: 7.5rem; } .u-pX8 { padding: 128px; padding: 8rem; } .u-pX8Vertical { padding-top: 128px; padding-top: 8rem; padding-bottom: 128px; padding-bottom: 8rem; } .u-pX8Top { padding-top: 128px; padding-top: 8rem; } .u-pX8Bottom { padding-bottom: 128px; padding-bottom: 8rem; } .u-pX8Horizontal { padding-right: 128px; padding-right: 8rem; padding-left: 128px; padding-left: 8rem; } .u-pX8Left { padding-left: 128px; padding-left: 8rem; } .u-pX8Right { padding-right: 128px; padding-right: 8rem; } .u-pTopForHeader { /* Responsive Custom */ padding-top: 16px; padding-top: calc(16px + 30 * ((100vw - 320px) / 320)); } @media (min-width: 640px) { .u-pTopForHeader { padding-top: 46px; } } @media (min-width: 1024px) { .u-pTopForHeader { /* Responsive Custom */ padding-top: 44px; padding-top: calc(44px + 14 * ((100vw - 1024px) / 416)); } } @media (min-width: 1440px) { .u-pTopForHeader { padding-top: 58px; } } /* Dynamic Spacing */ /* Padding 140px */ .u-pLarge { padding: 48px; padding: 3rem; } @media (min-width: 640px) { .u-pLarge { padding-top: 4rem; } } @media (min-width: 1024px) { .u-pLarge { padding-top: 6rem; } } @media (min-width: 1440px) { .u-pLarge { padding-top: 8.75rem; } } .u-pLargeVertical { padding-top: 48px; padding-top: 3rem; padding-bottom: 48px; padding-bottom: 3rem; } @media (min-width: 640px) { .u-pLargeVertical { padding-top: 4rem; } } @media (min-width: 1024px) { .u-pLargeVertical { padding-top: 6rem; } } @media (min-width: 1440px) { .u-pLargeVertical { padding-top: 8.75rem; } } .u-pLargeTop { padding-top: 48px; padding-top: 3rem; } @media (min-width: 640px) { .u-pLargeTop { padding-top: 4rem; } } @media (min-width: 1024px) { .u-pLargeTop { padding-top: 6rem; } } @media (min-width: 1440px) { .u-pLargeTop { padding-top: 8.75rem; } } .u-pLargeBottom { padding-bottom: 48px; padding-bottom: 3rem; } @media (min-width: 640px) { .u-pLargeBottom { padding-bottom: 4rem; } } @media (min-width: 1024px) { .u-pLargeBottom { padding-bottom: 6rem; } } @media (min-width: 1440px) { .u-pLargeBottom { padding-bottom: 8.75rem; } } /* Importing default settings */ /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ .u-fontItalic { font-style: italic; } .u-fontNormal { font-style: normal; } .u-fontLight { font-weight: 300; } .u-fontNormal { font-weight: 400; } .u-fontMedium { font-weight: 500; } .u-fontSemiBold { font-weight: 600; } .u-fontBold { font-weight: 700; } .u-fontExtraBold { font-weight: 800; } .u-fontHeavy { font-weight: 900; } .u-fontPrimary { font-family: 'Gotham', sans-serif; } .u-fontBase { font-family: 'GalaxieCopernicus', serif; } .u-fontFlama { font-family: 'FlamaCondensed-Basic', sans-serif; } .u-fontUnderline { text-decoration: underline; } /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ .u-colorWhite { color: #fff; } .u-colorBlack { color: #000; } .u-colorGray { color: #f2f2f2; } .u-colorGray--light { color: #f7f7f7; } .u-colorCharcoal { color: #424340; } .u-colorCharcoal--light { color: #CCCBCB; } .u-colorCharcoal--medium { color: #999999; } .u-colorCharcoal--dark { color: #4D4D4D; } .u-colorPurple { color: #B92685; } .u-colorPurple--light { color: #F1D3E6; } .u-colorPurple--dark { color: #A72D7C; } .u-colorPink { color: #E57F7D; } .u-colorTeal { color: #52C2B9; } .u-colorOrange { color: #E57726; } .u-colorGreen { color: #42B979; } /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ .u-bgColorWhite { background-color: #fff; } .u-bgColorBlack { background-color: #000; } .u-bgColorGray { background-color: #f2f2f2; } .u-bgColorGray--light { background-color: #f7f7f7; } .u-bgColorCharcoal { background-color: #424340; } .u-bgColorCharcoal--light { background-color: #CCCBCB; } .u-bgColorCharcoal--medium { background-color: #999999; } .u-bgColorCharcoal--dark { background-color: #4D4D4D; } .u-bgColorPurple { background-color: #B92685; } .u-bgColorPurple--light { background-color: #F1D3E6; } .u-bgColorPurple--dark { background-color: #A72D7C; } .u-bgColorPink { background-color: #E57F7D; } .u-bgColorTeal { background-color: #52C2B9; } .u-bgColorOrange { background-color: #E57726; } .u-bgColorGreen { background-color: #42B979; } .u-bg__beige { background-color: #fefaf7; } .u-bg__blue { background-color: #eaf1fa; } .u-alignLeft { text-align: left; } .u-alignCenter { text-align: center; } .u-alignRight { text-align: right; } .u-sizeWidth--max450 { max-width: 450px; } .u-sizeWidth--max580 { max-width: 580px; } .u-sizeWidth--max700 { max-width: 700px; } .u-sizeWidth--max800 { max-width: 800px; } .u-flex { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .u-flex1 { -webkit-box-flex: 1; -ms-flex: 1; -webkit-flex: 1; flex: 1; } .u-flex2 { -webkit-box-flex: 2; -ms-flex: 2; -webkit-flex: 2; flex: 2; } .u-alignItems--center { -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .u-alignItems--center { -webkit-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; } .u-alignItems--center { -webkit-box-align: end; -ms-flex-align: end; -webkit-align-items: flex-end; align-items: flex-end; } .u-justifyContent--center { -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .u-justifyContent--start { -webkit-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; } .u-justifyContent--end { -webkit-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; } .u-direction--column { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; } .u-direction--columnReverse { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; -webkit-flex-direction: column-reverse; flex-direction: column-reverse; } .u-direction--row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; } .u-direction--row-reverse { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; -webkit-flex-direction: row-reverse; flex-direction: row-reverse; } /* Layer 1: These include all the global settings */ /* Custom Responsive elements property: calc(currentValueW/Units + amountChangeNoUnits * ((100vw - startingBreakpointPx) / differenceBetweenStartingAndEndingBreakpoint)); Example: * Change from padding: 16px 26px; -- to --> padding: 18px 52px; * Starting at 1024px up to 1440px; padding: 16px 26px; padding: calc(16px + 2 * ((100vw - 1024px) / 416)) calc(26px + 26 * ((100vw - 1024px) / 416)); */ :root { /* Purple */ /* Orange */ /* Green */ /* Charcoal */ /* Gray */ /* /* Pink */ /* Teal */ /* Cream */ /* bg colors*/ } :root { /* 16px */ /* 32px */ /* 48px */ /* 64px */ /* 128px */ } /* Tablet landscape */ /* Desktop small mAx */ /* Desktop small */ /* Desktop */ /* Desktop large */ .u-underline { padding-bottom: 1px; border-bottom: 1px solid; } @media (min-width: 1024px) { .u-underline { border-bottom: 2px solid; } } .u-underline--teal { border-bottom-color: #52C2B9; } .u-underline--teal-light { border-bottom-color: #96dcd6; } /* Fix Safari jumping around when clicking on inputs within fixed position modal on iOS Safari*/ html, body {} html.ios-modal-is-open, body.ios-modal-is-open { /* position: relative; */ } html {} html.ios-modal-is-open { overflow: hidden; } html, body {} html.ios-modal-is-open, body.ios-modal-is-open { /* -webkit-overflow-scrolling : touch !important; */ /* overflow: auto !important; */ /* height: 100% !important; */ } .u-highlight { background-color: #fff65b; padding: 0.2em; } .u-highlight a { /* color: $color-text-base; */ text-decoration: underline; } .u-highlight a:hover { text-decoration: none; } /* --- Trumps ----------- */ /* Optin monster Exit Intent Popups */ /* Base styles for Optin Monster, pulled from launch-blog */ .optin-monster-saas-overlay #om-lightbox-target-optin { max-width: 1056px !important; background: #3cc1b9 !important; padding: 20px 0 !important; } .optin-monster-saas-overlay #om-lightbox-target-optin h3 { letter-spacing: 1px !important; font-weight: 500 !important; font-size: 60px !important; font-family: Gotham, Helvetica, Arial, sans-serif !important; } .optin-monster-saas-overlay #om-lightbox-target-optin p.line1, .optin-monster-saas-overlay #om-lightbox-target-optin p { font-size: 20px !important; line-height: 36px !important; font-family: Gotham, Helvetica, Arial, sans-serif !important; } .optin-monster-saas-overlay #om-lightbox-target-optin p.line2 { font-size: 22px !important; margin: 10px 0 30px !important; } .optin-monster-saas-overlay #om-lightbox-target-optin input[type="text"], .optin-monster-saas-overlay #om-lightbox-target-optin input[type="email"] { font-size: 15px !important; padding: 4px 10px !important; height: 44px; } .optin-monster-saas-overlay #om-lightbox-target-optin ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: gray !important; } .optin-monster-saas-overlay #om-lightbox-target-optin :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: gray !important; opacity: 1 !important; } .optin-monster-saas-overlay #om-lightbox-target-optin ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: gray !important; opacity: 1 !important; } .optin-monster-saas-overlay #om-lightbox-target-optin :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: gray !important; } .optin-monster-saas-overlay #om-lightbox-target-optin :placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */ color: gray !important; } .optin-monster-saas-overlay #om-lightbox-target-optin input[type="submit"] { font-size: 14px !important; font-weight: 700 !important; letter-spacing: 4px !important; } .optin-monster-saas-overlay #om-lightbox-target-optin .om-close { font-family: Open Sans, Helvetica Neue, Verdana, Arial, sans-serif !important; font-size: 60px !important; font-weight: 100 !important; top: -23px !important; } .optin-monster-saas-overlay #om-lightbox-target-optin .moonray-form-input-type-text, .optin-monster-saas-overlay #om-lightbox-target-optin .moonray-form-input-type-email, .optin-monster-saas-overlay #om-lightbox-target-optin .moonray-form-input-type-submit { width: 33% !important; padding-left: 4px !important; padding-right: 4px !important; } @media screen and (max-width: 830px) { .optin-monster-saas-overlay #om-lightbox-target-optin .moonray-form-input-type-text, .optin-monster-saas-overlay #om-lightbox-target-optin .moonray-form-input-type-email { width: 50% !important; } .optin-monster-saas-overlay #om-lightbox-target-optin .moonray-form-input-type-submit { width: 100% !important; } } @media screen and (max-width: 600px) { .optin-monster-saas-overlay #om-lightbox-target-optin .moonray-form-input-type-text, .optin-monster-saas-overlay #om-lightbox-target-optin .moonray-form-input-type-email, .optin-monster-saas-overlay #om-lightbox-target-optin .moonray-form-input-type-submit { width: 100% !important; } .optin-monster-saas-overlay #om-lightbox-target-optin h3 { font-size: 30px !important; } } html div#om-i4oxl9q3s5jqgf11 .denver-form input[type=submit] { height: 44px !important; } /* 6 Pillars Exit Intent */ html div#om-i4oxl9q3s5jqgf11 { background-color: rgba(0, 0, 0, .8) !important; } html div#om-i4oxl9q3s5jqgf11 #om-lightbox-target-optin { background: #3cc1b9 !important; max-width: 1056px !important; width: 96% !important; } html div#om-i4oxl9q3s5jqgf11 #om-lightbox-target-optin-wrap { border-left: 0 !important; } html div#om-i4oxl9q3s5jqgf11 .om-close { color: #fff !important; } html div#om-i4oxl9q3s5jqgf11 .moonray-form-p2c5757f219 .moonray-form { background: transparent !important; border: 0 !important; width: 100% !important; } html div#om-i4oxl9q3s5jqgf11 input, html div#om-i4oxl9q3s5jqgf11 #om-lightbox-target-optin-name, html div#om-i4oxl9q3s5jqgf11 #om-lightbox-target-optin-email { border-color: #3cc1b9 !important; box-shadow: none !important; border: 1px solid #fff !important; border-radius: 0 !important; } html div#om-i4oxl9q3s5jqgf11 input[type="submit"], html div#om-i4oxl9q3s5jqgf11 button, html div#om-i4oxl9q3s5jqgf11 #om-lightbox-target-optin-submit { background: #ea772d !important; border: 1px solid #fff !important; box-shadow: none !important; display: block !important; padding: 4px 40px !important; text-shadow: none !important; text-transform: uppercase !important; width: 100% !important; } html div#om-i4oxl9q3s5jqgf11 input[type="submit"]:hover, html div#om-i4oxl9q3s5jqgf11 button:hover, html div#om-i4oxl9q3s5jqgf11 #om-lightbox-target-optin-submit:hover { background: #c12b85 !important; } html div#om-i4oxl9q3s5jqgf11 .form-description { color: #fff !important; font-size: 224px !important; font-size: 14rem !important; font-size: 14px !important; margin-bottom: 30px !important; text-align: center !important; } html div#om-i4oxl9q3s5jqgf11 .moonray-form-label { display: none !important; } html div#om-i4oxl9q3s5jqgf11 #om-lightbox-target-content { display: none !important; } html div#om-i4oxl9q3s5jqgf11 #om-lightbox-target-header { padding: 0 !important; } html div#om-i4oxl9q3s5jqgf11 .exit-intent .img { float: left !important; width: 276px !important; } html div#om-i4oxl9q3s5jqgf11 .exit-intent .img img { max-width: 240px !important; } html div#om-i4oxl9q3s5jqgf11 .exit-intent .content { float: left !important; width: 680px !important; } html div#om-i4oxl9q3s5jqgf11 .exit-intent .content h3 { color: #ffffff !important; font-family: Gotham, Open Sans, Helvetica, sans-serif !important; font-size: 60px !important; margin: 0 0 20px 0 !important; } html div#om-i4oxl9q3s5jqgf11 .exit-intent .content .line1 { color: #ffffff !important; font-size: 22px !important; margin: 0 !important; margin-bottom: 20px !important; } html div#om-i4oxl9q3s5jqgf11 .exit-intent .content .line2 { color: #ffffff !important; font-size: 24px !important; font-weight: 700 !important; margin: 10px 0 20px !important; } html div#om-i4oxl9q3s5jqgf11 #om-lightbox-target-footer { padding: 35px 50px 70px !important; } html div#om-i4oxl9q3s5jqgf11 .moonray-form-p2c5757f313 .moonray-form { width: 100%; } @media screen and (max-width: 1023px) { html div#om-i4oxl9q3s5jqgf11 .exit-intent .img, html div#om-i4oxl9q3s5jqgf11 .exit-intent .content { float: none !important; text-align: center !important; width: 100% !important; } html div#om-i4oxl9q3s5jqgf11 .exit-intent .img { padding-bottom: 40px !important; } } @media screen and (min-width: 1024px) and (max-width: 1200px) { html div#om-i4oxl9q3s5jqgf11 .exit-intent .content { text-align: left !important; float: left !important; width: 580px !important; width: calc(580px + 100 * ((100vw - 1024px) / 176))!important; } html div#om-i4oxl9q3s5jqgf11 .exit-intent .content .img { float: left !important; width: 250px !important; margin-right: 20px !important; } html div#om-i4oxl9q3s5jqgf11 .exit-intent .content .img img { max-width: 240px !important; } html div#om-i4oxl9q3s5jqgf11 .exit-intent .content h3 { font-size: 50px !important; font-size: calc(50px + 10 * ((100vw - 1024px) / 176))!important; } html div#om-i4oxl9q3s5jqgf11 .exit-intent .content p.line1 { font-size: 18px !important; font-size: calc(18px + 4 * ((100vw - 1024px) / 176))!important; } html div#om-i4oxl9q3s5jqgf11 .exit-intent .content p.line2 { font-size: 20px !important; font-size: calc(20px + 4 * ((100vw - 1024px) / 176))!important; } } @media screen and (min-width: 1024px) and (max-width: 1200px) { html div#om-i4oxl9q3s5jqgf11 .denver-form input { height: 38px !important; height: calc(38px + 10 * ((100vw - 1024px) / 176))!important; font-size: 12px !important; font-size: calc(12px + 3 * ((100vw - 1024px) / 176))!important; } html div#om-i4oxl9q3s5jqgf11 .denver-form input[type=submit] { height: 38px !important; height: calc(38px + 10 * ((100vw - 1024px) / 176))!important; font-size: 12px !important; font-size: calc(12px + 2 * ((100vw - 1024px) / 176))!important; letter-spacing: 3px !important; letter-spacing: calc(3px + 1 * ((100vw - 1024px) / 176))!important; padding: 0 !important; } } .is-hidden-state, [v-cloak] { display: none; } .is-visible-state { display: block; } /*# sourceMappingURL=optins.css.map */