@charset "UTF-8"; /* Adjust font smoothing for improved rendering when light text is on top of dark backgrounds. */ /* Convert pixels to ems eg. for a relational value of 12px write em(12) when the paren if the parent is another value say 24px write em(12, 24) */ /* Convert pixels to rems eg. for a relational value of 12px write rem(12) Assumes $em-base is the font-size of */ /* Strips the units from a value. e.g. 12px -> 12 Used by the px-to-rem and px-to-em mixins */ /* Function for getting deeply nested sass maps. */ /* Adjust font smoothing for improved rendering when light text is on top of dark backgrounds. */ /* Utility that automatically generates all of the type styles for a project. Relies on $type-styles and $font-stacks map variables existing in the following format: */ /* Function for getting a specific style map from within the $type-styles map @param $key (string) - Key style you want @param $map (map) - Map to search for $key [$font-stacks] */ /* Generates font styles related to a specific font-stack. @param $key (string) - Key to find in $map @param $map (map) - Map to search for $key [$font-stacks] */ /* Mixin for getting a font-stack and size from the $type-styles map. @param $key (string) - Should be a top level key from the $type-styles map @param $size (string) - The size key to grab, should correspond to a breakpoint @param $map (map) - Map to search for $key [$font-stacks] */ /* Generate font-family and typesize styles across breakpoints. @param $key (string) - Should be a top level key from the $type-styles map @param $map (map) - Map to search for $key [$font-stacks] */ /* Loop through the $type-styles map (defined in `_base/variables.scss`) and generate helpers classes we can use to apply directly into our template markup. */ .h-type-a { font-size: 10px; font-size: 1rem; font-family: "Replica-Bold", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.375; } .h-type-b { font-size: 22.5px; font-size: 2.25rem; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: "Replica-Bold", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.06; } @media (min-width: 47.5em) { .h-type-b { font-size: 3rem; } } .h-type-c { font-size: 12.5px; font-size: 1.25rem; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: "Replica-Bold", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.25; } .h-type-d { font-size: 6.25px; font-size: 0.625rem; font-family: "ReplicaMono-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.25; } .h-type-e { font-size: 18.75px; font-size: 1.875rem; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: "Replica-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.25; } .h-type-f { font-size: 30px; font-size: 3rem; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: "Replica-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.25; } .h-type-g { font-size: 8.75px; font-size: 0.875rem; font-family: "Replica-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.3; } .h-type-h { font-size: 8.75px; font-size: 0.875rem; font-family: "ReplicaMono-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.3; } .h-type-i { font-size: 15.625px; font-size: 1.5625rem; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: "Replica-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.22; } @media (min-width: 47.5em) { .h-type-i { font-size: 2.25rem; } } .h-type-j { font-size: 10px; font-size: 1rem; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: "Replica-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.19; } @media (min-width: 47.5em) { .h-type-j { font-size: 1.3125rem; } } .h-type-k { font-size: 8.125px; font-size: 0.8125rem; font-family: "ReplicaMono-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.3; letter-spacing: 1px; text-transform: uppercase; } /* Strips the unit from a value. e.g. 12px -> 12 @param {String} $val - Value to remove unit from @return {Number} - Unitless number */ /* Mixin to provide sizing (often either margin or padding, but can be any numeric property) to a defined location of an element and have that spacing scale fluidly between screen sizes. Relies on a $fluid-sizes map variable existing in the following format: */ /* Function for getting a specific size/breakpoint value from the $fluid-sizes map. @param $size (string) - Key size you want @param $breakpoint (string) - The breakpoint you want sizing at */ /* Function for getting a specific size set from the $fluid-sizes map. @param $size (string) - Size set you want */ /* Generates fluid size and applies it to the supplied property. @param $size (key) - Key size you want (from the $fluid-sizes map) @param $property (string) - The css property you'd like to apply the size to will only be applied up until this breakpoint. @param $negative (boolean) - If true, returns a negative range */ /* Loop through the $fluid-sizes map (defined in `_base/variables.scss`) and generate helpers classes we can use to apply directly into our template markup. */ .h-fluid-size-top-margin-none { margin-top: 0px; } @media screen and (min-width: 320px) { .h-fluid-size-top-margin-none { margin-top: calc(0px + 0 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .h-fluid-size-top-margin-none { margin-top: 0px; } } .h-fluid-size-bottom-margin-none { margin-bottom: 0px; } @media screen and (min-width: 320px) { .h-fluid-size-bottom-margin-none { margin-bottom: calc(0px + 0 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .h-fluid-size-bottom-margin-none { margin-bottom: 0px; } } .h-fluid-size-top-padding-none { padding-top: 0px; } @media screen and (min-width: 320px) { .h-fluid-size-top-padding-none { padding-top: calc(0px + 0 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .h-fluid-size-top-padding-none { padding-top: 0px; } } .h-fluid-size-bottom-padding-none { padding-bottom: 0px; } @media screen and (min-width: 320px) { .h-fluid-size-bottom-padding-none { padding-bottom: calc(0px + 0 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .h-fluid-size-bottom-padding-none { padding-bottom: 0px; } } .h-fluid-size-top-margin-xs { margin-top: 10px; } @media screen and (min-width: 320px) { .h-fluid-size-top-margin-xs { margin-top: calc(10px + 0 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .h-fluid-size-top-margin-xs { margin-top: 10px; } } .h-fluid-size-bottom-margin-xs { margin-bottom: 10px; } @media screen and (min-width: 320px) { .h-fluid-size-bottom-margin-xs { margin-bottom: calc(10px + 0 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .h-fluid-size-bottom-margin-xs { margin-bottom: 10px; } } .h-fluid-size-top-padding-xs { padding-top: 10px; } @media screen and (min-width: 320px) { .h-fluid-size-top-padding-xs { padding-top: calc(10px + 0 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .h-fluid-size-top-padding-xs { padding-top: 10px; } } .h-fluid-size-bottom-padding-xs { padding-bottom: 10px; } @media screen and (min-width: 320px) { .h-fluid-size-bottom-padding-xs { padding-bottom: calc(10px + 0 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .h-fluid-size-bottom-padding-xs { padding-bottom: 10px; } } .h-fluid-size-top-margin-xms { margin-top: 16px; } @media screen and (min-width: 320px) { .h-fluid-size-top-margin-xms { margin-top: calc(16px + 0 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .h-fluid-size-top-margin-xms { margin-top: 16px; } } .h-fluid-size-bottom-margin-xms { margin-bottom: 16px; } @media screen and (min-width: 320px) { .h-fluid-size-bottom-margin-xms { margin-bottom: calc(16px + 0 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .h-fluid-size-bottom-margin-xms { margin-bottom: 16px; } } .h-fluid-size-top-padding-xms { padding-top: 16px; } @media screen and (min-width: 320px) { .h-fluid-size-top-padding-xms { padding-top: calc(16px + 0 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .h-fluid-size-top-padding-xms { padding-top: 16px; } } .h-fluid-size-bottom-padding-xms { padding-bottom: 16px; } @media screen and (min-width: 320px) { .h-fluid-size-bottom-padding-xms { padding-bottom: calc(16px + 0 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .h-fluid-size-bottom-padding-xms { padding-bottom: 16px; } } .h-fluid-size-top-margin-s { margin-top: 30px; } @media screen and (min-width: 320px) { .h-fluid-size-top-margin-s { margin-top: calc(30px + 0 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .h-fluid-size-top-margin-s { margin-top: 30px; } } .h-fluid-size-bottom-margin-s { margin-bottom: 30px; } @media screen and (min-width: 320px) { .h-fluid-size-bottom-margin-s { margin-bottom: calc(30px + 0 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .h-fluid-size-bottom-margin-s { margin-bottom: 30px; } } .h-fluid-size-top-padding-s { padding-top: 30px; } @media screen and (min-width: 320px) { .h-fluid-size-top-padding-s { padding-top: calc(30px + 0 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .h-fluid-size-top-padding-s { padding-top: 30px; } } .h-fluid-size-bottom-padding-s { padding-bottom: 30px; } @media screen and (min-width: 320px) { .h-fluid-size-bottom-padding-s { padding-bottom: calc(30px + 0 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .h-fluid-size-bottom-padding-s { padding-bottom: 30px; } } .h-fluid-size-top-margin-sm { margin-top: 30px; } @media screen and (min-width: 320px) { .h-fluid-size-top-margin-sm { margin-top: calc(30px + 10 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .h-fluid-size-top-margin-sm { margin-top: 40px; } } .h-fluid-size-bottom-margin-sm { margin-bottom: 30px; } @media screen and (min-width: 320px) { .h-fluid-size-bottom-margin-sm { margin-bottom: calc(30px + 10 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .h-fluid-size-bottom-margin-sm { margin-bottom: 40px; } } .h-fluid-size-top-padding-sm { padding-top: 30px; } @media screen and (min-width: 320px) { .h-fluid-size-top-padding-sm { padding-top: calc(30px + 10 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .h-fluid-size-top-padding-sm { padding-top: 40px; } } .h-fluid-size-bottom-padding-sm { padding-bottom: 30px; } @media screen and (min-width: 320px) { .h-fluid-size-bottom-padding-sm { padding-bottom: calc(30px + 10 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .h-fluid-size-bottom-padding-sm { padding-bottom: 40px; } } .h-fluid-size-top-margin-m { margin-top: 30px; } @media screen and (min-width: 320px) { .h-fluid-size-top-margin-m { margin-top: calc(30px + 20 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .h-fluid-size-top-margin-m { margin-top: 50px; } } .h-fluid-size-bottom-margin-m { margin-bottom: 30px; } @media screen and (min-width: 320px) { .h-fluid-size-bottom-margin-m { margin-bottom: calc(30px + 20 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .h-fluid-size-bottom-margin-m { margin-bottom: 50px; } } .h-fluid-size-top-padding-m { padding-top: 30px; } @media screen and (min-width: 320px) { .h-fluid-size-top-padding-m { padding-top: calc(30px + 20 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .h-fluid-size-top-padding-m { padding-top: 50px; } } .h-fluid-size-bottom-padding-m { padding-bottom: 30px; } @media screen and (min-width: 320px) { .h-fluid-size-bottom-padding-m { padding-bottom: calc(30px + 20 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .h-fluid-size-bottom-padding-m { padding-bottom: 50px; } } .h-fluid-size-top-margin-ml { margin-top: 40px; } @media screen and (min-width: 320px) { .h-fluid-size-top-margin-ml { margin-top: calc(40px + 20 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .h-fluid-size-top-margin-ml { margin-top: 60px; } } .h-fluid-size-bottom-margin-ml { margin-bottom: 40px; } @media screen and (min-width: 320px) { .h-fluid-size-bottom-margin-ml { margin-bottom: calc(40px + 20 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .h-fluid-size-bottom-margin-ml { margin-bottom: 60px; } } .h-fluid-size-top-padding-ml { padding-top: 40px; } @media screen and (min-width: 320px) { .h-fluid-size-top-padding-ml { padding-top: calc(40px + 20 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .h-fluid-size-top-padding-ml { padding-top: 60px; } } .h-fluid-size-bottom-padding-ml { padding-bottom: 40px; } @media screen and (min-width: 320px) { .h-fluid-size-bottom-padding-ml { padding-bottom: calc(40px + 20 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .h-fluid-size-bottom-padding-ml { padding-bottom: 60px; } } .h-fluid-size-top-margin-l { margin-top: 40px; } @media screen and (min-width: 320px) { .h-fluid-size-top-margin-l { margin-top: calc(40px + 45 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .h-fluid-size-top-margin-l { margin-top: 85px; } } .h-fluid-size-bottom-margin-l { margin-bottom: 40px; } @media screen and (min-width: 320px) { .h-fluid-size-bottom-margin-l { margin-bottom: calc(40px + 45 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .h-fluid-size-bottom-margin-l { margin-bottom: 85px; } } .h-fluid-size-top-padding-l { padding-top: 40px; } @media screen and (min-width: 320px) { .h-fluid-size-top-padding-l { padding-top: calc(40px + 45 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .h-fluid-size-top-padding-l { padding-top: 85px; } } .h-fluid-size-bottom-padding-l { padding-bottom: 40px; } @media screen and (min-width: 320px) { .h-fluid-size-bottom-padding-l { padding-bottom: calc(40px + 45 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .h-fluid-size-bottom-padding-l { padding-bottom: 85px; } } .h-fluid-size-top-margin-xl { margin-top: 50px; } @media screen and (min-width: 320px) { .h-fluid-size-top-margin-xl { margin-top: calc(50px + 85 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .h-fluid-size-top-margin-xl { margin-top: 135px; } } .h-fluid-size-bottom-margin-xl { margin-bottom: 50px; } @media screen and (min-width: 320px) { .h-fluid-size-bottom-margin-xl { margin-bottom: calc(50px + 85 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .h-fluid-size-bottom-margin-xl { margin-bottom: 135px; } } .h-fluid-size-top-padding-xl { padding-top: 50px; } @media screen and (min-width: 320px) { .h-fluid-size-top-padding-xl { padding-top: calc(50px + 85 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .h-fluid-size-top-padding-xl { padding-top: 135px; } } .h-fluid-size-bottom-padding-xl { padding-bottom: 50px; } @media screen and (min-width: 320px) { .h-fluid-size-bottom-padding-xl { padding-bottom: calc(50px + 85 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .h-fluid-size-bottom-padding-xl { padding-bottom: 135px; } } .h-fluid-size-top-margin-xxl { margin-top: 60px; } @media screen and (min-width: 320px) { .h-fluid-size-top-margin-xxl { margin-top: calc(60px + 130 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .h-fluid-size-top-margin-xxl { margin-top: 190px; } } .h-fluid-size-bottom-margin-xxl { margin-bottom: 60px; } @media screen and (min-width: 320px) { .h-fluid-size-bottom-margin-xxl { margin-bottom: calc(60px + 130 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .h-fluid-size-bottom-margin-xxl { margin-bottom: 190px; } } .h-fluid-size-top-padding-xxl { padding-top: 60px; } @media screen and (min-width: 320px) { .h-fluid-size-top-padding-xxl { padding-top: calc(60px + 130 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .h-fluid-size-top-padding-xxl { padding-top: 190px; } } .h-fluid-size-bottom-padding-xxl { padding-bottom: 60px; } @media screen and (min-width: 320px) { .h-fluid-size-bottom-padding-xxl { padding-bottom: calc(60px + 130 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .h-fluid-size-bottom-padding-xxl { padding-bottom: 190px; } } .h-fluid-size-top-margin-bottom-overlap-padding { margin-top: 100px; } @media screen and (min-width: 320px) { .h-fluid-size-top-margin-bottom-overlap-padding { margin-top: calc(100px + 90 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .h-fluid-size-top-margin-bottom-overlap-padding { margin-top: 190px; } } .h-fluid-size-bottom-margin-bottom-overlap-padding { margin-bottom: 100px; } @media screen and (min-width: 320px) { .h-fluid-size-bottom-margin-bottom-overlap-padding { margin-bottom: calc(100px + 90 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .h-fluid-size-bottom-margin-bottom-overlap-padding { margin-bottom: 190px; } } .h-fluid-size-top-padding-bottom-overlap-padding { padding-top: 100px; } @media screen and (min-width: 320px) { .h-fluid-size-top-padding-bottom-overlap-padding { padding-top: calc(100px + 90 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .h-fluid-size-top-padding-bottom-overlap-padding { padding-top: 190px; } } .h-fluid-size-bottom-padding-bottom-overlap-padding { padding-bottom: 100px; } @media screen and (min-width: 320px) { .h-fluid-size-bottom-padding-bottom-overlap-padding { padding-bottom: calc(100px + 90 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .h-fluid-size-bottom-padding-bottom-overlap-padding { padding-bottom: 190px; } } /* Animated Divider A divider with a little down arrow in the middle. Gets animated on scroll. .animated-divider--reverse - Reverses button color */ .animated-divider { position: relative; display: block; height: 0; width: 100%; padding-top: 2.47%; max-width: 851px; margin: 30px auto 0; margin: 3rem auto 0; } .animated-divider > svg { position: absolute; top: 0; left: 0; max-width: 100%; height: 100%; } /* Big Stat A large statistic callout */ .big-stat__stat { font-size: 30px; font-size: 3rem; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: "Replica-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.25; margin: 0; color: #fdd615; } .big-stat__completion { font-size: 6.25px; font-size: 0.625rem; font-family: "ReplicaMono-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.25; color: #3babef; margin-top: -2px; } /* Breadcrumbs Breadcrumb navigation, not to be confused with `.breadcrumb` which is added by the theme. */ .breadcrumbs { font-size: 8.125px; font-size: 0.8125rem; font-family: "ReplicaMono-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.3; letter-spacing: 1px; text-transform: uppercase; color: #16467f; text-transform: uppercase; } > .breadcrumbs__divider { display: inline-block; } .breadcrumbs__item { display: inline-block; } .breadcrumbs__item > a { color: #16467f; border-bottom: 1px solid #16467f; padding-bottom: 0.2em; transition: 0.15s; transition-property: border-bottom-color, color; } .breadcrumbs__item > a:hover { color: #3babef; border-bottom-color: #3babef; } /* Btn A common button style .btn--alt-1 - Alternative button/hover color .btn--alt-2 - Alternative button/hover color .btn--reverse - Reverses button color .btn--hollow - Stroke on button .btn--hollow-alt - Alternative stroke on button */ .btn { font-size: 8.75px; font-size: 0.875rem; font-family: "ReplicaMono-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.3; color: #fff; border: 1px solid #16467f; padding: 10px 21px 11px; background-color: #16467f; cursor: pointer; text-align: center; display: inline-block; } .btn:hover { background-color: #3babef; border-color: #3babef; color: #fff; } .btn__arrow { position: relative; left: 3px; } .btn--alt-1 { border-color: #3babef; background-color: #3babef; } .btn--alt-1:hover { background-color: #fff; border-color: #fff; color: #011d41; } .btn--alt-2:hover { background-color: #fff; border-color: #fff; color: #011d41; } .btn--reverse { color: #fff; border-color: #fff; background-color: transparent; } .btn--reverse:hover { background-color: #fff; border-color: #fff; color: #011d41; } .btn--hollow { color: #16467f; border-color: #16467f; background-color: transparent; } .btn--hollow:hover { background-color: #3babef; border-color: #3babef; color: #fff; } .btn--hollow-alt { color: #3babef; border-color: #3babef; background-color: transparent; } .btn--hollow-alt:hover { background-color: #3babef; border-color: #3babef; color: #fff; } /* Chart Trio Contains several animated charts. */ .chart-trio > * { margin-top: 25px; } /* Chart An animated chart */ .chart { position: relative; width: 202px; height: 67px; } .chart > svg { position: absolute; top: 0; left: 0; max-width: 100%; height: 100%; } /* Checkbox Set Contains a checkbox and label */ .checkbox-set__checkbox { display: none; } .checkbox-set__label { font-size: 8.75px; font-size: 0.875rem; font-family: "ReplicaMono-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.3; color: #fff; padding-left: 2.4em; display: inline-block; position: relative; cursor: pointer; } .checkbox-set__label:after { content: ''; position: absolute; top: 0px; left: 0; background-color: transparent; border: 1px solid #FFFFFF; height: 16px; width: 16px; } .checkbox-set__checkbox:checked + .checkbox-set__label:after { content: '\2714'; font-size: 17px; text-align: center; line-height: 1.05em; } /* Comparison Table Product comparison table */ .comparison-table__wide-cell { -ms-flex-preferred-size: 50%; flex-basis: 50%; border-top: 1px solid #396ab6; border-left: 1px solid #396ab6; padding: 30px; } @media screen and (min-width: 320px) { .comparison-table__wide-cell { padding: calc(30px + 0 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .comparison-table__wide-cell { padding: 30px; } } @media (max-width: 47.49em) { .comparison-table__wide-cell { border-right: 1px solid #396ab6; } } .comparison-table__narrow-cell { -ms-flex-preferred-size: 25%; flex-basis: 25%; border-top: 1px solid #396ab6; border-left: 1px solid #396ab6; position: relative; padding: 30px; } @media screen and (min-width: 320px) { .comparison-table__narrow-cell { padding: calc(30px + 0 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .comparison-table__narrow-cell { padding: 30px; } } .comparison-table__narrow-cell:last-child { border-right: 1px solid #396ab6; } @media (max-width: 47.49em) { .comparison-table__narrow-cell { border-right: 1px solid #396ab6; } } .comparison-table__header-row { display: none; } @media (min-width: 47.5em) { .comparison-table__header-row { display: -ms-flexbox; display: flex; -ms-flex-pack: end; justify-content: flex-end; } } .comparison-table__header-row .comparison-table__wide-cell { border-top-color: transparent; border-left-color: transparent; } .comparison-table__header-row .comparison-table__narrow-cell:not(.is-active):nth-child(2) { border-top-color: transparent; border-left-color: transparent; } .comparison-table__header-row .comparison-table__narrow-cell:not(.is-active):nth-child(3) { border-right-color: transparent; border-top-color: transparent; } @media (min-width: 47.5em) { .comparison-table__row { display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; } } .comparison-table__row:last-child > * { border-bottom: 1px solid #396ab6; } .comparison-table__heading { margin: 0 auto; max-width: 60px; max-width: 6rem; } .comparison-table__heading h4 { font-size: 18px; color: #fff; } .comparison-table__heading p { font-size: 6.25px; font-size: 0.625rem; font-family: "ReplicaMono-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.25; font-size: 11px; color: #3babef; margin-bottom: 0; } .comparison-table__feature h4 { font-size: 15px; color: #fff; margin-bottom: 0.3em; } .comparison-table__feature p { font-size: 13px; color: #3babef; margin-bottom: 0; line-height: 1.4; } .comparison-table__icon { width: 30px; height: 30px; position: relative; display: block; position: absolute; top: 0; bottom: 0; right: 30px; margin: auto 0; } @media screen and (min-width: 320px) { .comparison-table__icon { right: calc(30px + 0 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .comparison-table__icon { right: 30px; } } @media (min-width: 47.5em) { .comparison-table__icon { left: 0; right: 0; margin: auto; } } .comparison-table__icon > svg { position: absolute; top: 0; left: 0; max-width: 100%; height: 100%; } .comparison-table__icon > svg path, .comparison-table__icon > svg polyline, .comparison-table__icon > svg line { stroke: #3babef; } .comparison-table__icon--inactive { opacity: 0.2; } .comparison-table__feature-label { font-size: 15px; color: #fff; margin: 0; } @media (min-width: 47.5em) { .comparison-table__feature-label { display: none; } } .comparison-table__narrow-cell.is-active { background-color: rgba(59, 171, 239, 0.08); } .comparison-table__narrow-cell.is-active .comparison-table__heading p { color: #fff; } .comparison-table__narrow-cell.is-active .comparison-table__icon:not(.comparison-table__icon--inactive) > svg path, .comparison-table__narrow-cell.is-active .comparison-table__icon:not(.comparison-table__icon--inactive) > svg polyline, .comparison-table__narrow-cell.is-active .comparison-table__icon:not(.comparison-table__icon--inactive) > svg line { stroke: #fff; } /* Cta Banner A call-to-action banner */ .cta-banner { text-align: center; } .cta-banner > .btn { display: block; } @media (max-width: 47.49em) { .cta-banner > .btn { margin-top: 30px; } } @media screen and (max-width: 47.49em) and (min-width: 320px) { .cta-banner > .btn { margin-top: calc(30px + 10 * ((100vw - 320px) / 980)); } } @media screen and (max-width: 47.49em) and (min-width: 1300px) { .cta-banner > .btn { margin-top: 40px; } } @media (min-width: 47.5em) { .cta-banner > .btn { display: inline-block; vertical-align: middle; } } .cta-banner > * { margin: 0 30px; } .cta-banner__text { font-size: 18.75px; font-size: 1.875rem; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: "Replica-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.25; color: #fff; display: block; } @media (min-width: 47.5em) { .cta-banner__text { display: inline-block; vertical-align: middle; } } /* Data Animation The data animation */ .data-animation { position: relative; } .data-animation > canvas { max-width: 100%; display: block; } .data-animation > svg { position: absolute; top: 0; left: 0; max-width: 100%; height: 100%; } .data-animation > svg #callout1, .data-animation > svg #callout2, .data-animation > svg #callout3, .data-animation > svg #callout4, .data-animation > svg #callout5, .data-animation > svg #callout6, .data-animation > svg #callout7, .data-animation > svg #callout8, .data-animation > svg #callout9, .data-animation > svg #callout10, .data-animation > svg #callout11, .data-animation > svg #callout12, .data-animation > svg #callout13 { display: none; } .data-animation > svg #funnel { display: block; } @media only screen and (min-width: 720px) { .data-animation > svg g { display: block !important; } } /* Digital Twin Animation Contains the digital twin animation */ .digital-twin-animation { position: relative; width: 100%; max-width: 660px; height: 0; padding-top: 88.787%; } .digital-twin-animation > svg { position: absolute; top: 0; left: 0; max-width: 100%; height: 100%; } /* Down Arrow An arrow pointing down */ .down-arrow { font-family: "ReplicaMono-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; font-size: 1.5em; color: #396ab6; } /* Dri Add Factory Btn A button to add a new factory to the DRI section */ .dri-add-factory-btn { font-size: 8.75px; font-size: 0.875rem; font-family: "ReplicaMono-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.3; color: #fff; padding: 15px; cursor: pointer; position: relative; background-color: #3babef; transition: 0.5s cubic-bezier(0.19, 1, 0.22, 1); } .dri-add-factory-btn:hover { background-color: #fff; color: #396ab6; } .dri-add-factory-btn:after { content: "+"; display: inline-block; position: absolute; right: 15px; top: 2px; font-size: 30px; } /* Dri Chart Axis The axis and labels for a Digital Readiness Index chart .dri-chart-axis--vertical - Oriented vertically */ .dri-chart-axis { padding: 11px 0; } .dri-chart-axis:before { content: ""; width: 100%; height: 1px; display: block; background-color: red; position: absolute; background-image: linear-gradient(to right, #3babef 0, #fff 100%); top: 0; } .dri-chart-axis__title { font-size: 12.5px; font-size: 1.25rem; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: "Replica-Bold", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.25; color: #fff; text-align: center; margin: 0; margin-top: 5px; } .dri-chart-axis__labels { width: 100%; display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; } .dri-chart-axis__labels-label { font-size: 8.75px; font-size: 0.875rem; font-family: "ReplicaMono-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.3; color: #3babef; margin: 0; } .dri-chart-axis__labels-label:nth-child(2) { color: #99d3f7; } .dri-chart-axis__labels-label:nth-child(3) { color: #fff; } .dri-chart-axis--vertical:before { top: auto; bottom: 0; } .dri-chart-axis--vertical .dri-chart-axis__title { margin-top: 0; margin-bottom: 5px; } /* Dri Chart Sticky Wrapper Wraps the DRI chart in an element just to make it sticky */ /* Dri Chart The core chart component used on the digital readiness index page .dri-chart--use-case-zones - Shows the use case zones on a background .dri-chart--use-case-labels - Shows the use case labels */ .dri-chart { width: 100%; height: calc(100vh - 290px); min-height: 25vw; max-height: 43.1vw; position: relative; } @media (max-width: 63.99em) { .dri-chart { height: 100vw; max-height: 100vw; } } .dri-chart > .dri-chart-axis { position: absolute; } .dri-chart > .dri-chart-axis:nth-child(2) { width: 100%; bottom: 0; transform: translateY(100%); } .dri-chart > .dri-chart-axis:nth-child(1) { width: calc(100vh - 290px); min-width: 25vw; max-width: 43.1vw; transform: rotate(-90deg); transform-origin: 50% 100%; bottom: 50%; left: -100%; right: 0; margin: 0 auto; } @media (max-width: 63.99em) { .dri-chart > .dri-chart-axis:nth-child(1) { width: 100vw; max-width: 100vw; } } .dri-chart__plot { position: absolute; top: 0; right: 0; bottom: 20px; left: 20px; } .dri-chart__plot:before, .dri-chart__plot:after { content: ""; display: block; border-style: dashed; border-color: #3babef; position: absolute; border-width: 0; } .dri-chart__plot:before { border-left-width: 1px; top: 0; bottom: 0; left: 50%; } .dri-chart__plot:after { border-top-width: 1px; top: 50%; right: 0; left: 0; } .dri-chart__plot-use-case-zones { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: url(images/dri-use-case-zones.svg); background-repeat: no-repeat; background-position: 0 0; background-size: 100% 100%; opacity: 0; transform: scale(0.95); will-change: opacity, transform; transition: 0.8s cubic-bezier(0.19, 1, 0.22, 1); transition-property: opacity, transform; } .dri-chart__plot-use-case-zones > p { font-size: 6.25px; font-size: 0.625rem; font-family: "ReplicaMono-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.25; font-size: 8px; font-size: 0.8rem; color: #fff; text-align: right; opacity: 0; position: absolute; right: 10px; right: 1rem; will-change: opacity; transition: 0.8s cubic-bezier(0.19, 1, 0.22, 1); transition-property: opacity; } @media (min-width: 47.5em) { .dri-chart__plot-use-case-zones > p { opacity: 0; } } .dri-chart__plot-use-case-zones > p:nth-child(1) { left: 10px; left: 1rem; right: auto; text-align: left; top: 95%; } .dri-chart__plot-use-case-zones > p:nth-child(2) { top: 95%; } .dri-chart__plot-use-case-zones > p:nth-child(3) { top: 67%; } .dri-chart__plot-use-case-zones > p:nth-child(4) { top: 42%; } .dri-chart__plot-use-case-zones > p:nth-child(5) { top: 11%; } .dri-chart__plot-factories { position: absolute; top: 0; right: 20px; left: 30px; bottom: 50px; z-index: 1; } .dri-chart__plot-factories > .dri-factory { position: absolute; bottom: 0; left: 0; margin-left: -45px; margin-bottom: -65px; } .dri-chart--use-case-zones .dri-chart__plot-use-case-zones { opacity: 1; transform: scale(1); } @media (min-width: 47.5em) { .dri-chart--use-case-labels .dri-chart__plot-use-case-zones p { opacity: 0.6; } } /* Dri Detail Footer Controls Save/edit/etc controls at the bottom of detail areas for the DRI page */ .dri-detail-footer-controls { max-width: 100%; margin-left: auto; margin-right: auto; } .dri-detail-footer-controls:after { content: " "; display: block; clear: both; } .dri-detail-footer-controls > p { font-size: 8.75px; font-size: 0.875rem; font-family: "ReplicaMono-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.3; color: #fff; cursor: pointer; width: 50%; float: left; margin: 0; } .dri-detail-footer-controls > p:nth-of-type(2) { text-align: right; } /* Dri Detail Group Header A small header group for individual sets of factory details */ .dri-detail-group-header { padding: 0 15px 3px; position: relative; padding-right: 70px; padding-right: 7rem; } .dri-detail-group-header > .toggle { position: absolute; top: 0px; right: 15px; } .dri-detail-group-header__text { font-size: 8.75px; font-size: 0.875rem; font-family: "ReplicaMono-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.3; margin: 0; color: #3babef; } /* Dri Edit Question An individual question when editing a DRI factory .is-selected - Selected item */ .dri-edit-question { padding-right: 120px; position: relative; } .dri-edit-question__text { font-size: 6.25px; font-size: 0.625rem; font-family: "ReplicaMono-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.25; line-height: 1.3; color: #fff; margin: 0; } .dri-edit-question__controls { position: absolute; right: 0; top: 0; } .dri-edit-question__control { display: inline-block; width: 15px; height: 15px; margin: 0 9px; text-indent: -99999px; cursor: pointer; background: url(images/radio_unselected.svg) center center no-repeat; } .dri-edit-question__control.is-selected { background: url(images/radio_selected.svg) center center no-repeat; } /* Dri Edit Section Header A header for a subsection when editing a DRI factory */ .dri-edit-section-header { padding-right: 120px; position: relative; } .dri-edit-section-header__heading { font-size: 8.75px; font-size: 0.875rem; font-family: "ReplicaMono-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.3; color: #3babef; margin: 0; } .dri-edit-section-header__labels { position: absolute; right: 0; top: -4px; } .dri-edit-section-header__labels > p { font-size: 6.25px; font-size: 0.625rem; font-family: "ReplicaMono-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.25; font-size: 9px; color: #3babef; display: inline-block; width: 33px; text-align: center; } /* Dri Factory Details Details for an individual factory related to a Digital Readiness Index chart .dri-factory-details--progress-1 - The very first stage of DRI progress .dri-factory-details--progress-2 - The second stage of DRI progress .dri-factory-details--progress-3 - The third stage of DRI progress .is-collapsed - Details are hidden */ .dri-factory-details { border-color: rgba(255, 255, 255, 0.65); background-color: rgba(1, 29, 65, 0.5); border-width: 1px; border-style: solid; padding: 15px; transition: none; position: relative; } .dri-factory-details .dri-factory-details__header-heading, .dri-factory-details .dri-factory-details__header-open, .dri-factory-details .dri-factory-details__factory-details-text { color: #fff; } .dri-factory-details .dri-factory-details__stats .big-stat__stat, .dri-factory-details .dri-factory-details__stats .big-stat__completion { color: #fff; } .dri-factory-details > * { transition: 0.5s; transition-property: opacity, transform; will-change: opacity, transform; } .dri-factory-details > *:nth-child(1) { transition-delay: 0.1s; } .dri-factory-details > *:nth-child(2) { transition-delay: 0.2s; } .dri-factory-details > *:nth-child(3) { transition-delay: 0.3s; } .dri-factory-details > *:nth-child(4) { transition-delay: 0.4s; } .dri-factory-details > *:nth-child(5) { transition-delay: 0.5s; } .dri-factory-details > *:nth-child(6) { transition-delay: 0.6s; } .dri-factory-details > *:nth-child(7) { transition-delay: 0.7s; } .dri-factory-details > *:nth-child(8) { transition-delay: 0.8s; } .dri-factory-details > *:nth-child(9) { transition-delay: 0.9s; } .dri-factory-details > *:nth-child(10) { transition-delay: 1s; } .dri-factory-details__header { padding: 15px; margin: -15px; cursor: pointer; } .dri-factory-details__header-heading { font-size: 12.5px; font-size: 1.25rem; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: "Replica-Bold", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.25; margin: 0; } .dri-factory-details__header-open { font-size: 8.75px; font-size: 0.875rem; font-family: "ReplicaMono-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.3; position: absolute; right: 15px; top: 18px; display: none; } .dri-factory-details__header-delete { font-size: 8.75px; font-size: 0.875rem; font-family: "ReplicaMono-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.3; position: absolute; right: 15px; top: 20px; display: inline-block; cursor: pointer; color: #fff; } .dri-factory-details__header-delete:active { opacity: 0.7; } .dri-factory-details__use-case { margin-top: 30px; } @media screen and (min-width: 320px) { .dri-factory-details__use-case { margin-top: calc(30px + 0 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .dri-factory-details__use-case { margin-top: 30px; } } .dri-factory-details__use-case > p { margin-top: 2px; margin-top: 0.2rem; font-size: 18.75px; font-size: 1.875rem; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: "Replica-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.25; font-size: 17px; font-size: 1.7rem; color: #fff; } .dri-factory-details__stats { margin-top: 30px; max-width: 100%; margin-left: auto; margin-right: auto; } @media screen and (min-width: 320px) { .dri-factory-details__stats { margin-top: calc(30px + 0 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .dri-factory-details__stats { margin-top: 30px; } } .dri-factory-details__stats:after { content: " "; display: block; clear: both; } .dri-factory-details__stats > * { width: 46.91689%; float: left; } .dri-factory-details__stats > *:nth-child(2n + 1) { margin-left: 0; margin-right: -100%; clear: both; margin-left: 0; } .dri-factory-details__stats > *:nth-child(2n + 2) { margin-left: 53.08311%; margin-right: -100%; clear: none; } .dri-factory-details__factory-details { min-height: 82px; margin-top: 10px; } @media screen and (min-width: 320px) { .dri-factory-details__factory-details { margin-top: calc(10px + 0 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .dri-factory-details__factory-details { margin-top: 10px; } } .dri-factory-details__factory-details-text { font-size: 8.75px; font-size: 0.875rem; font-family: "Replica-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.3; margin-bottom: 0; margin-top: 4px; } .dri-factory-details__content { margin-top: 10px; margin-bottom: 10px; } @media screen and (min-width: 320px) { .dri-factory-details__content { margin-top: calc(10px + 0 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .dri-factory-details__content { margin-top: 10px; } } @media screen and (min-width: 320px) { .dri-factory-details__content { margin-bottom: calc(10px + 0 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .dri-factory-details__content { margin-bottom: 10px; } } .dri-factory-details__content-group + .dri-factory-details__content-group { margin-top: 16px; } @media screen and (min-width: 320px) { .dri-factory-details__content-group + .dri-factory-details__content-group { margin-top: calc(16px + 0 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .dri-factory-details__content-group + .dri-factory-details__content-group { margin-top: 16px; } } .dri-factory-details__content-group > .text-list { margin-top: 10px; } @media screen and (min-width: 320px) { .dri-factory-details__content-group > .text-list { margin-top: calc(10px + 0 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .dri-factory-details__content-group > .text-list { margin-top: 10px; } } .dri-factory-details__footer { margin-top: 30px; } @media screen and (min-width: 320px) { .dri-factory-details__footer { margin-top: calc(30px + 0 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .dri-factory-details__footer { margin-top: 30px; } } .dri-factory-details--progress-1 { border-color: rgba(255, 255, 255, 0.65); } .dri-factory-details--progress-1 .dri-factory-details__header-heading, .dri-factory-details--progress-1 .dri-factory-details__header-open, .dri-factory-details--progress-1 .dri-factory-details__factory-details-text { color: #fff; } .dri-factory-details--progress-1 .dri-factory-details__stats .big-stat__stat, .dri-factory-details--progress-1 .dri-factory-details__stats .big-stat__completion { color: #fff; } .dri-factory-details--progress-2 { border-color: rgba(255, 255, 255, 0.65); } .dri-factory-details--progress-2 .dri-factory-details__header-heading, .dri-factory-details--progress-2 .dri-factory-details__header-open, .dri-factory-details--progress-2 .dri-factory-details__factory-details-text { color: #fff; } .dri-factory-details--progress-2 .dri-factory-details__stats .big-stat__stat, .dri-factory-details--progress-2 .dri-factory-details__stats .big-stat__completion { color: #fff; } .dri-factory-details--progress-3 { border-color: rgba(255, 255, 255, 0.65); } .dri-factory-details--progress-3 .dri-factory-details__header-heading, .dri-factory-details--progress-3 .dri-factory-details__header-open, .dri-factory-details--progress-3 .dri-factory-details__factory-details-text { color: #fff; } .dri-factory-details--progress-3 .dri-factory-details__stats .big-stat__stat, .dri-factory-details--progress-3 .dri-factory-details__stats .big-stat__completion { color: #fff; } .dri-factory-details.is-collapsed { background-color: transparent; } .dri-factory-details.is-collapsed > * { position: absolute; opacity: 0; transform: translateY(15px); transition: none; left: -999999px; top: -999999px; } .dri-factory-details.is-collapsed > .dri-factory-details__header { position: static; transform: translateY(0); left: auto; top: auto; opacity: 1; } .dri-factory-details.is-collapsed .dri-factory-details__header-open { display: inline; } /* Dri Factory An individual factory on the Digital Readiness Chart .dri-factory--progress-1 - The very first stage of DRI progress .dri-factory--progress-2 - The second stage of DRI progress .dri-factory--progress-3 - The third stage of DRI progress .is-active - The currently active factory */ .dri-factory { width: 90px; cursor: pointer; transition: 0.3s; transition-property: top, bottom, left, right; } .dri-factory .dri-factory__icon svg *:not([fill="none"]) { fill: #fff; } .dri-factory .dri-factory__title { color: #fff; } .dri-factory .dri-factory__stats { background-color: #fff; } .dri-factory .dri-factory__stats:after { border-color: #fff transparent transparent transparent; } .dri-factory__icon, .dri-factory__title { transition-property: opacity; will-change: opacity; transition: 0.8s cubic-bezier(0.19, 1, 0.22, 1); opacity: 0.6; } .dri-factory__icon { width: 38px; height: 33px; margin: 0 auto; } .dri-factory__title { margin-top: 10px; font-size: 8.75px; font-size: 0.875rem; font-family: "Replica-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.3; text-align: center; } @media screen and (min-width: 320px) { .dri-factory__title { margin-top: calc(10px + 0 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .dri-factory__title { margin-top: 10px; } } .dri-factory__stats { display: none; position: absolute; left: 72%; bottom: 100%; margin-bottom: 9px; padding: 8px 7px 4px; pointer-events: none; transition: 0.25s; opacity: 0; transform: translateY(10px); width: 125px; } .dri-factory__stats:after { content: ""; display: block; width: 0; height: 0; border-style: solid; border-width: 14px 17px 0 0; position: absolute; transition: 0.25s; left: 0; } @media (min-width: 47.5em) { .dri-factory__stats { display: block; } } .dri-factory__stats-group { display: inline-block; margin-right: -4px; width: 52px; } .dri-factory__stats-group:first-child { margin-right: 10px; } .dri-factory__stats-group-label { font-size: 6.25px; font-size: 0.625rem; font-family: "ReplicaMono-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.25; color: #011d41; margin: 0; } .dri-factory__stats-group-number { font-size: 12.5px; font-size: 1.25rem; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: "Replica-Bold", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.25; color: #011d41; margin: 0; } .dri-factory--progress-1 .dri-factory__icon svg *:not([fill="none"]) { fill: #fff; } .dri-factory--progress-1 .dri-factory__title { color: #fff; } .dri-factory--progress-1 .dri-factory__stats { background-color: #fff; } .dri-factory--progress-1 .dri-factory__stats:after { border-color: #fff transparent transparent transparent; } .dri-factory--progress-2 .dri-factory__icon svg *:not([fill="none"]) { fill: #fff; } .dri-factory--progress-2 .dri-factory__title { color: #fff; } .dri-factory--progress-2 .dri-factory__stats { background-color: #fff; } .dri-factory--progress-2 .dri-factory__stats:after { border-color: #fff transparent transparent transparent; } .dri-factory--progress-3 .dri-factory__icon svg *:not([fill="none"]) { fill: #fff; } .dri-factory--progress-3 .dri-factory__title { color: #fff; } .dri-factory--progress-3 .dri-factory__stats { background-color: #fff; } .dri-factory--progress-3 .dri-factory__stats:after { border-color: #fff transparent transparent transparent; } .dri-factory:hover .dri-factory__stats, .dri-factory.is-active .dri-factory__stats { opacity: 1; transform: translateY(0); } .dri-factory.is-active { z-index: 9999; } .dri-factory.is-active .dri-factory__icon svg *:not([fill="none"]) { fill: #fff; } .dri-factory.is-active .dri-factory__title { color: #fff; } .dri-factory.is-active .dri-factory__stats { background-color: #fff; } .dri-factory.is-active .dri-factory__stats:after { border-color: #fff transparent transparent transparent; } .dri-factory.is-active .dri-factory__icon, .dri-factory.is-active .dri-factory__title { opacity: 1; } /* Dri Input Set A simple form input set for the DRI page */ .dri-input-set__label { font-size: 8.75px; font-size: 0.875rem; font-family: "ReplicaMono-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.3; color: #3babef; } .dri-input-set__input { font-size: 12.5px; font-size: 1.25rem; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: "Replica-Bold", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.25; padding: 3px 0; color: #fff; background-color: transparent; border: none; border-bottom: 1px solid #fff; border-radius: 0; -webkit-appearance: none; } .dri-input-set__input:focus { color: #fff; border-bottom: 1px solid #3babef; } .dri-input-set__input::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.2); } .dri-input-set__input:-ms-input-placeholder { color: rgba(255, 255, 255, 0.2); } .dri-input-set__input::placeholder { color: rgba(255, 255, 255, 0.2); } /* Em Product Preview Preview for an Enterprise Manufacturing product */ .em-product-preview > .btn { margin-top: 30px; } @media screen and (min-width: 320px) { .em-product-preview > .btn { margin-top: calc(30px + 0 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .em-product-preview > .btn { margin-top: 30px; } } .em-product-preview__number { font-size: 6.25px; font-size: 0.625rem; font-family: "ReplicaMono-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.25; color: #16467f; border-top: 1px solid #16467f; display: inline-block; padding-top: 0.4em; margin-bottom: 0; } .em-product-preview__heading { font-size: 12.5px; font-size: 1.25rem; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: "Replica-Bold", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.25; margin-top: 3px; color: #16467f; } .em-product-preview__heading > strong { font-size: 22.5px; font-size: 2.25rem; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: "Replica-Bold", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.06; margin-top: 2px; display: block; } @media (min-width: 47.5em) { .em-product-preview__heading > strong { font-size: 3rem; } } .em-product-preview__text { margin-top: 30px; margin-bottom: 0; } @media screen and (min-width: 320px) { .em-product-preview__text { margin-top: calc(30px + 0 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .em-product-preview__text { margin-top: 30px; } } /* Expandable Row A row with a heading that can be expanded to show text .expandable-row--reverse - Reverses color .expandable-row--last - Removes the bottom border */ .expandable-row { padding: 11px 0; border-bottom: 1px solid #396ab6; } .expandable-row__heading { font-family: "Replica-Bold", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; font-size: 18px; color: #396ab6; margin: 0; position: relative; cursor: pointer; padding-right: 20px; padding-right: 2rem; } .expandable-row__heading:after { content: '-'; display: block; position: absolute; right: 0; top: 0; } .expandable-row__text { margin: 0; margin-top: 10px; margin-bottom: 7px; } .expandable-row--reverse { border-bottom-color: #fff; } .expandable-row--reverse .expandable-row__heading { color: #fff; } .expandable-row--reverse .expandable-row__text { color: #3babef; } .expandable-row--last { border-bottom-color: transparent; } .expandable-row.is-collapsed .expandable-row__heading:after { content: '+'; } .expandable-row.is-collapsed .expandable-row__text { display: none; } /* Featured Case Study A callout for a featured case study .featured-case-study--alt-1 - Alternative coloring .featured-case-study--alt-2 - Alternative coloring */ .featured-case-study__details { padding-top: 30px; padding-right: 30px; padding-left: 30px; margin-top: -40px; position: relative; background-color: #16467f; padding-bottom: 83px; min-height: 330px; } @media screen and (min-width: 320px) { .featured-case-study__details { padding-top: calc(30px + 10 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .featured-case-study__details { padding-top: 40px; } } @media screen and (min-width: 320px) { .featured-case-study__details { padding-right: calc(30px + 10 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .featured-case-study__details { padding-right: 40px; } } @media screen and (min-width: 320px) { .featured-case-study__details { padding-left: calc(30px + 10 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .featured-case-study__details { padding-left: 40px; } } @media screen and (min-width: 320px) { .featured-case-study__details { margin-top: calc(-40px + -45 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .featured-case-study__details { margin-top: -85px; } } @media (min-width: 47.5em) { .featured-case-study__details { margin-right: 16px; margin-left: 16px; } } @media screen and (min-width: 47.5em) and (min-width: 320px) { .featured-case-study__details { margin-right: calc(16px + 0 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 47.5em) and (min-width: 1300px) { .featured-case-study__details { margin-right: 16px; } } @media screen and (min-width: 47.5em) and (min-width: 320px) { .featured-case-study__details { margin-left: calc(16px + 0 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 47.5em) and (min-width: 1300px) { .featured-case-study__details { margin-left: 16px; } } .featured-case-study__details > .btn { bottom: 30px; position: absolute; } @media screen and (min-width: 320px) { .featured-case-study__details > .btn { bottom: calc(30px + 10 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .featured-case-study__details > .btn { bottom: 40px; } } .featured-case-study__title a, .featured-case-study__text a { color: inherit; } .featured-case-study__title { font-size: 18.75px; font-size: 1.875rem; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: "Replica-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.25; } .featured-case-study__text { margin-top: 16px; color: #fff; } @media screen and (min-width: 320px) { .featured-case-study__text { margin-top: calc(16px + 0 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .featured-case-study__text { margin-top: 16px; } } .featured-case-study--alt-1 .featured-case-study__details { background-color: #fff; } .featured-case-study--alt-1 .featured-case-study__title { color: #16467f; } .featured-case-study--alt-1 .featured-case-study__text { color: #6d6e70; } .featured-case-study--alt-2 .featured-case-study__details { background-color: #3babef; } .featured-case-study--alt-2 .featured-case-study__title { color: #16467f; } .featured-case-study--alt-2 .featured-case-study__text { color: #fff; } /* ============================================================== Illustration Label ============================================================== */ /* Illustration Label The text that sits underneath an illustration */ .illustration-label { font-family: 'ReplicaMono-Regular', sans-serif; color: #3babef; text-align: center; } /* Image Caption A caption for an image */ .image-caption { font-size: 8.75px; font-size: 0.875rem; font-family: "Replica-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.3; color: #3babef; line-height: 1.6; font-style: italic; border-top: 1px solid #3babef; padding-top: 8px; } /* ============================================================== Infographic Box ============================================================== */ /* Infographic Box A class to contain an animated box for an infographic */ .infographic-box { position: relative; } .infographic-box > svg { position: absolute; top: -1px; left: -1px; } .infographic-box > svg * { stroke: #bbbdbf; } .infographic-box--blue > svg * { stroke: #3babef; } /* Input Button A simple, common form input button .input-btn--alt-1 - Unique styling */ .input-btn { font-size: 8.75px; font-size: 0.875rem; font-family: "ReplicaMono-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.3; color: #fff; border: 1px solid #fff; padding: 9px 20px 11px; background-color: transparent; cursor: pointer; text-align: center; } .input-btn:hover { background-color: #fff; border-color: #fff; color: #011d41; } .input-btn--alt-1 { color: #396ab6; border-color: #396ab6; } .input-btn--alt-1:hover { background-color: #396ab6; border-color: #396ab6; color: #fff; } /* Input W Submit Includes an input and submit button side-by-side .input-w-submit--dark - For use on light colored backgrounds .input-w-submit--clipboard - Adjusts spacing for the "Copy to Clipboard" link */ .input-w-submit { position: relative; } @media (min-width: 47.5em) { .input-w-submit { padding-right: 115px; } } .input-w-submit__input { font-size: 8.75px; font-size: 0.875rem; font-family: "ReplicaMono-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.3; background-color: transparent; border: 1px solid #fff; color: #fff; padding: 9px 14px 11px; width: 100%; } .input-w-submit__input::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: rgba(255, 255, 255, 0.4); } .input-w-submit__input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: rgba(255, 255, 255, 0.4); opacity: 1; } .input-w-submit__input::-moz-placeholder { /* Mozilla Firefox 19+ */ color: rgba(255, 255, 255, 0.4); opacity: 1; } .input-w-submit__input:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: rgba(255, 255, 255, 0.4); } .input-w-submit__input::-ms-input-placeholder { /* Microsoft Edge */ color: rgba(255, 255, 255, 0.4); } .input-w-submit__input:focus { outline: none; border: 1px solid #3babef; color: #fff; } button.input-w-submit__submit { font-size: 8.75px; font-size: 0.875rem; font-family: "ReplicaMono-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.3; color: #fff; border: 1px solid #fff; padding: 9px 20px 11px; width: 100%; margin-top: 14px; } button.input-w-submit__submit:hover { background-color: #fff; border-color: #fff; color: #011d41; } @media (min-width: 47.5em) { button.input-w-submit__submit { position: absolute; right: 0; top: 0; width: auto; margin-top: 0; } } .input-w-submit--dark .input-w-submit__input { border-color: #16467f; color: #16467f; } .input-w-submit--dark .input-w-submit__input:focus { border-color: #3babef; color: #16467f; } .input-w-submit--dark button.input-w-submit__submit { color: #fff; background-color: #16467f; border-color: #16467f; } .input-w-submit--dark button.input-w-submit__submit:hover { background-color: #3babef; border-color: #3babef; color: #fff; } .input-w-submit--dark button.input-w-submit__submit:active { background-color: #396ab6; } @media (min-width: 47.5em) { .input-w-submit--clipboard { padding-right: 200px; } } /* List A simple list of items with an optional heading */ .list__heading { font-size: 10px; font-size: 1rem; font-family: "Replica-Bold", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.375; color: #fff; } .list__items { color: #3babef; } .list__items > li { position: relative; list-style-type: none; } .list__items > li:before { position: absolute; content: "→"; display: block; left: -1.2em; top: -0.04em; } .list__items > li + li { margin-top: 10px; } @media screen and (min-width: 320px) { .list__items > li + li { margin-top: calc(10px + 0 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .list__items > li + li { margin-top: 10px; } } /* Logo Grid A grid of logos */ .logo-grid { max-width: 100%; margin-left: auto; margin-right: auto; } .logo-grid:after { content: " "; display: block; clear: both; } .logo-grid__logo { border-top: 1px solid #f1f2f2; } @media (max-width: 47.49em) { .logo-grid__logo { width: 46.91689%; float: left; } .logo-grid__logo:nth-child(2n + 1) { margin-left: 0; margin-right: -100%; clear: both; margin-left: 0; } .logo-grid__logo:nth-child(2n + 2) { margin-left: 53.08311%; margin-right: -100%; clear: none; } } @media (min-width: 47.5em) { .logo-grid__logo { width: 29.22252%; float: left; } .logo-grid__logo:nth-child(3n + 1) { margin-left: 0; margin-right: -100%; clear: both; margin-left: 0; } .logo-grid__logo:nth-child(3n + 2) { margin-left: 35.38874%; margin-right: -100%; clear: none; } .logo-grid__logo:nth-child(3n + 3) { margin-left: 70.77748%; margin-right: -100%; clear: none; } } /* Manufacturing Analytics Trio */ .manufacturing-analytics-trio > * { margin: 0 auto; position: relative; } .manufacturing-analytics-trio > * > .illustration-label { width: 90px; position: absolute; margin: 0 auto; left: 0; right: 0; bottom: 0; } .manufacturing-analytics-trio > * + * { margin-top: 90px; } .manufacturing-analytics-trio > * > svg { position: absolute; top: 0; left: 0; max-width: 100%; height: 100%; } .manufacturing-analytics-trio__sensors { width: 91px; height: 97px; } .manufacturing-analytics-trio__machines { width: 146px; height: 132px; } .manufacturing-analytics-trio__lines { width: 200px; height: 113px; } /* Magnific Popup Share Modal Styling for a popup modal powered by Magnific Popup */ .mfp-share-modal { /* overlay animate in */ /* overlay animate out */ /* content at start */ /* content animate it */ /* content animate out */ } .mfp-share-modal.mfp-bg { opacity: 0; transition: opacity 0.2s cubic-bezier(0.165, 0.84, 0.44, 1); background-color: #011d41; will-change: opacity; } .mfp-share-modal.mfp-bg.mfp-ready { opacity: 0.85; } .mfp-share-modal.mfp-bg.mfp-removing { opacity: 0; } .mfp-share-modal.mfp-wrap .mfp-content { max-width: 860px; opacity: 0; transform: translateY(30px); transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); will-change: opacity, transform; } .mfp-share-modal.mfp-wrap.mfp-ready .mfp-content { opacity: 1; transform: translateY(0); } .mfp-share-modal.mfp-wrap.mfp-removing .mfp-content { opacity: 0; transform: translateY(30px); } /* Magnific Popup Simple Modal Styling for a popup modal powered by Magnific Popup */ .mfp-simple-modal { /* overlay animate in */ /* overlay animate out */ /* content at start */ /* content animate it */ /* content animate out */ } .mfp-simple-modal.mfp-bg { opacity: 0; transition: opacity 0.2s cubic-bezier(0.165, 0.84, 0.44, 1); background-color: #011d41; will-change: opacity; } .mfp-simple-modal.mfp-bg.mfp-ready { opacity: 0.85; } .mfp-simple-modal.mfp-bg.mfp-removing { opacity: 0; } .mfp-simple-modal.mfp-wrap .mfp-content { max-width: 480px; opacity: 0; transform: translateY(30px); transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); will-change: opacity, transform; } .mfp-simple-modal.mfp-wrap.mfp-ready .mfp-content { opacity: 1; transform: translateY(0); } .mfp-simple-modal.mfp-wrap.mfp-removing .mfp-content { opacity: 0; transform: translateY(30px); } /* Numbered Nav Item A small numbered nav link */ .numbered-nav-item__number { font-size: 6.25px; font-size: 0.625rem; font-family: "ReplicaMono-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.25; color: #3babef; margin: 0; } .numbered-nav-item__number:before { content: ""; display: block; height: 1px; border-bottom: 1px solid #3babef; width: 17px; margin-bottom: 4px; } .numbered-nav-item__title { font-size: 10px; font-size: 1rem; font-family: "Replica-Bold", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.375; color: #3babef; margin: 0; margin-top: 3px; } .numbered-nav-item:hover .numbered-nav-item__number { color: #16467f; } .numbered-nav-item:hover .numbered-nav-item__number:before { content: ""; display: block; height: 1px; border-bottom: 1px solid #16467f; width: 17px; margin-bottom: 4px; } .numbered-nav-item:hover .numbered-nav-item__title { color: #16467f; } /* Page Heading Large heading at the top of a page */ .page-heading { font-size: 30px; font-size: 3rem; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: "Replica-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.25; color: #16467f; } /* Data Animation The data animation */ .plant-group-animation { position: relative; width: 100%; max-width: 498px; padding-top: 109.64%; } .plant-group-animation > svg { position: absolute; top: 0; left: 0; max-width: 100%; height: 100%; } /* Process Anim Anim Container wraps the contents of all animation contents */ .process-anim-container { width: 1280px; height: 720px; margin: auto; position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; background-color: white; } /* Process Anim Anim Stat A statistic for a factory */ .process-anim-stat > span { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: 'Replica-Regular', sans-serif; font-weight: normal; } .process-anim-stat > span:nth-child(1) { font-size: 60px; color: #3babef; display: inline-block; border: 2px solid #3babef; line-height: 1; padding: 0 6px; min-width: 113px; } .process-anim-stat > span:nth-child(2) { font-size: 42px; color: #fff; display: block; margin-top: 8px; } .process-anim-stat--alt-1 > span:nth-child(1) { border-color: #f4f200; color: #f4f200; } .process-anim-stat--alt-2 > span:nth-child(1) { border-color: #00ce9b; color: #00ce9b; } /* Process Anim Cube In Contains the generic cube in transtion SVG */ .process-anim-cube-in > svg { height: auto; width: 1280px; } .process-anim-cube-in > svg > #state2 { visibility: hidden; } /* Process Anim Data Anim The data animation container for the Process Anim animation */ .process-anim-data-anim { padding: 0 115px; padding-top: 130px; margin: 0 auto; height: 720px; position: relative; } .process-anim-data-anim__intro { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: 'Replica-Bold', sans-serif; color: #396ab6; line-height: 1em; font-size: 62px; margin: 0 auto; padding: 0 76px; } .process-anim-data-anim__intro > span { color: #3babef; } .process-anim-data-anim__data { display: block; position: absolute; bottom: 21px; width: 100%; } .process-anim-data-anim__data > .data-animation > canvas { margin-left: 40px; top: 21px; position: relative; } .process-anim-data-anim__data > .data-animation > svg { width: 1050px; height: auto; } .process-anim-data-anim__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .process-anim-data-anim__bg > svg { width: 100%; height: 100%; } /* Process Anim Data Pipeline Anim The second phase of the homepage animation */ .process-anim-data-pipeline-anim { height: calc($process-anim-height + 61px); position: relative; margin-top: 61px; } .process-anim-data-pipeline-anim > .process-anim-cube-in { position: absolute; top: 65px; } .process-anim-data-pipeline-anim > .process-anim-section-title { position: absolute; bottom: 33px; left: 7%; } .process-anim-data-pipeline-anim > .process-anim-text-list { position: absolute; right: 50px; top: 65px; height: 720px; width: 350px; } .process-anim-data-pipeline-anim__infobox { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; top: -50px; text-align: center; background-color: #3aaaee; max-width: 850px; width: 95%; margin-left: auto; margin-right: auto; padding-left: 4%; padding-right: 4%; color: #fff; font: 27.7px/1.5em 'ReplicaMono-Regular', sans-serif; padding-top: 1em; padding-bottom: 1em; position: relative; z-index: 1; margin-top: -11px; } .process-anim-data-pipeline-anim__infobox > span { display: block; color: #19477d; } .process-anim-data-pipeline-anim__infobox:after { content: ''; width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 18px solid #3aaaee; position: absolute; bottom: -18px; left: 50%; margin-left: -20px; } .process-anim-data-pipeline-anim__dots { margin-top: -69px; } .process-anim-data-pipeline-anim__dots > svg { width: 1280px; height: auto; } /* Process Anim Data Pipeline Twin Container Container for both the Data Pipeline and Digital Twin sections */ .process-anim-data-pipeline-twin-container { background: linear-gradient(to bottom, #16467f, #011d41); position: relative; height: 785px; } /* Process Anim Intro Anim The introductory animation for the Process Anim presentation */ .process-anim-intro-anim { height: 720px; padding-top: 130px; position: relative; } .process-anim-intro-anim__bg { background: linear-gradient(to bottom, #16467f, #011d41); position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .process-anim-intro-anim__logos { margin: 0 auto; display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-align: center; align-items: center; width: 300px; } .process-anim-intro-anim__logos-logo > svg { height: auto; } .process-anim-intro-anim__logos-logo:nth-child(1) > svg { width: 70px; } .process-anim-intro-anim__logos-logo:nth-child(3) > svg { width: 156px; } .process-anim-intro-anim__logos-divider { background-color: white; width: 2px; height: 95px; display: inline-block; opacity: 0.2; } .process-anim-intro-anim__heading { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: 'Replica-Regular', sans-serif; font-weight: normal; font-size: 54px; color: #3babef; text-align: center; margin-top: 50px; } .process-anim-intro-anim__plants { width: 100%; position: absolute; bottom: -4px; } .process-anim-intro-anim__plants > svg { width: 100%; height: auto; } .process-anim-intro-anim__plants > svg #titles text { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: 'ReplicaMono-Regular', sans-serif; } .process-anim-intro-anim--outro { position: absolute; width: 100%; bottom: 0; } .process-anim-intro-anim--outro svg #bg-texture, .process-anim-intro-anim--outro svg #data, .process-anim-intro-anim--outro svg #titles { display: none; } /* Process Anim Section Title Text title for a portion of the animation */ .process-anim-section-title { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: 'Replica-Regular', sans-serif; font-weight: normal; font-size: 50px; line-height: 1.2; color: #fff; position: relative; } .process-anim-section-title:before { content: ""; display: block; position: absolute; top: -12px; width: 20px; height: 2px; background-color: #fff; opacity: 0.3; } /* Process Anim Text List A list of text items */ .process-anim-text-list:before { content: ""; display: inline-block; vertical-align: middle; width: 0.5%; margin-right: -4px; height: 100%; } .process-anim-text-list__inner { display: inline-block; width: 99%; vertical-align: middle; } .process-anim-text-list__item { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: 'ReplicaMono-Regular', sans-serif; font-size: 25px; line-height: 1.5; color: #fff; } .process-anim-text-list__item + .process-anim-text-list__item { margin-top: 50px; } .process-anim-text-list__item:before { content: ""; display: block; width: 20px; height: 2px; background-color: #fff; opacity: 0.3; margin-bottom: 12px; } /* Process Anim Twin Anim Contains pieces fr the digital twin and digital twin builder animations .process-anim-twin--ratio - Scales instead of having a fixed ratio */ .process-anim-twin { height: 720px; position: absolute; top: 65px; left: 0; width: 100%; z-index: 1; overflow: hidden; transition: opacity 1s; will-change: opacity; } .process-anim-twin > .process-anim-cube-in { position: absolute; width: 100%; top: 0; } .process-anim-twin > .process-anim-cube-in > svg { width: 100%; height: 100%; } .process-anim-twin > .process-anim-section-title { position: absolute; bottom: 39px; left: 7%; } .process-anim-twin__factory-lineup { position: absolute; bottom: 0; } .process-anim-twin__factory-lineup > svg { width: 100%; height: 100%; } .process-anim-twin__factory-lineup--home { top: 0; bottom: auto; } .process-anim-twin__factory-names { position: absolute; left: 7%; bottom: 200px; width: 300px; } .process-anim-twin__factory-names > p { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: 'ReplicaMono-Regular', sans-serif; font-weight: normal; font-size: 25px; line-height: 1.3; color: #3babef; position: absolute; bottom: 0; left: 0; width: 100%; } .process-anim-twin__large-factory-names { position: absolute; left: 7%; top: 43px; width: 600px; } .process-anim-twin__large-factory-names > .process-anim-section-title { position: absolute; } .process-anim-twin__charts { position: absolute; right: 7%; top: 0; bottom: 0; margin: auto 0; height: 500px; } @media (max-width: 63.99em) { .process-anim-twin__charts { display: none !important; } } .process-anim-twin__charts__chart + .process-anim-twin__charts__chart { margin-top: 50px; } .process-anim-twin__charts__chart-heading { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: 'ReplicaMono-Regular', sans-serif; font-weight: normal; font-size: 20px; line-height: 1.2; color: #3babef; } .process-anim-twin__factory-cubes, .process-anim-twin__factory-cube { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .process-anim-twin__factory-cubes > svg, .process-anim-twin__factory-cube > svg { width: 100%; height: 100%; } .process-anim-twin__stat-sets { position: absolute; width: 50%; left: 50%; top: 63px; } .process-anim-twin__stat-set { position: absolute; } .process-anim-twin__stat-set > * + * { margin-top: 43px; } .process-anim-twin__stat-set-heading { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: 'ReplicaMono-Regular', sans-serif; font-size: 25px; line-height: 1.5; color: #3babef; border-bottom: 1px solid #fff; padding-bottom: 12px; } .process-anim-twin__stat-set-heading + .process-anim-twin__stat-set-heading { margin-top: 40px; } .process-anim-twin__stat-set-heading:before { content: ""; display: block; width: 20px; height: 2px; background-color: #fff; opacity: 0.3; margin-bottom: 12px; } .process-anim-twin--ratio { height: 0; padding-top: 56.25%; } .process-anim-twin--ratio .process-anim-cube-in, .process-anim-twin--ratio .process-anim-twin__factory-lineup, .process-anim-twin--ratio .process-anim-twin__factory-cubes { position: absolute; top: 0; left: 0; width: 100%; } .process-anim-twin--ratio .process-anim-twin__factory-names { left: 7%; bottom: 30%; } @media (max-width: 47.49em) { .process-anim-twin--ratio .process-anim-twin__factory-names > p { display: none; } } @media (max-width: 63.99em) { .process-anim-twin--ratio .process-anim-twin__factory-names > p { font-size: 18px; } } .process-anim-twin.is-hidden { opacity: 0; } /* Process Anim Why to Solved The introductory animation for the Process Anim "Why to Solved" section */ .process-anim-why-to-solved { height: 720px; position: relative; } .process-anim-why-to-solved__bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .process-anim-why-to-solved__bg > svg { width: 100%; height: auto; } .process-anim-why-to-solved__logos { position: absolute; top: 113px; left: 7%; display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-align: center; align-items: center; width: 375px; } .process-anim-why-to-solved__logos-logo > svg { height: auto; } .process-anim-why-to-solved__logos-logo:nth-child(1) > svg { width: 85px; } .process-anim-why-to-solved__logos-logo:nth-child(3) > svg { width: 221px; } .process-anim-why-to-solved__logos-logo--solo:nth-child(1) > svg { width: 265px; height: 86px; } .process-anim-why-to-solved__logos-divider { background-color: #16467f; width: 2px; height: 95px; display: inline-block; } .process-anim-why-to-solved__heading { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: 'Replica-Bold', sans-serif; color: #3babef; line-height: 1.15; font-size: 62px; position: absolute; top: 50px; left: 7%; } .process-anim-why-to-solved__heading > span { color: #16467f; } .process-anim-why-to-solved__plants { width: 100%; position: absolute; bottom: -4px; } .process-anim-why-to-solved__plants > svg { width: 100%; height: auto; } .process-anim-why-to-solved__plants > svg #titles text { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: 'ReplicaMono-Regular', sans-serif; } .process-anim-why-to-solved__questions { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .process-anim-why-to-solved__questions > * { position: absolute; max-width: 300px; max-width: 30rem; } .process-anim-why-to-solved__questions > *:nth-child(1) { bottom: 403px; left: 524px; } .process-anim-why-to-solved__questions > *:nth-child(2) { bottom: 358px; left: 744px; } .process-anim-why-to-solved__questions > *:nth-child(3) { bottom: 422px; right: 225px; } .process-anim-why-to-solved__questions > *:nth-child(4) { bottom: 404px; left: 522px; } .process-anim-why-to-solved__questions > *:nth-child(5) { bottom: 422px; left: 603px; } .process-anim-why-to-solved--outro { position: absolute; width: 100%; bottom: 0; } .process-anim-why-to-solved--outro .process-anim-why-to-solved__bg { background-color: #fff; } .process-anim-why-to-solved--outro svg #bg-texture, .process-anim-why-to-solved--outro svg #data, .process-anim-why-to-solved--outro svg #titles { display: none; } /* Quote A large quotation .quote--reverse - For dark backgrounds */ .quote__text { font-size: 18.75px; font-size: 1.875rem; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: "Replica-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.25; font-family: "Replica-Bold", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; color: #396ab6; } .quote__text:before { content: '“'; position: absolute; margin-left: -0.6em; } .quote__text:after { content: '”'; } .quote__source { font-size: 8.125px; font-size: 0.8125rem; font-family: "ReplicaMono-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.3; letter-spacing: 1px; text-transform: uppercase; color: #16467f; margin-top: 30px; } @media screen and (min-width: 320px) { .quote__source { margin-top: calc(30px + 10 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .quote__source { margin-top: 40px; } } .quote--reverse .quote__text, .quote--reverse .quote__source { color: #fff; } /* Recommendations Table Contains a list of recommendations for DRI zones */ .recommendations-table { margin-top: 30px; margin-bottom: 0; } @media screen and (min-width: 320px) { .recommendations-table { margin-top: calc(30px + 20 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .recommendations-table { margin-top: 50px; } } .recommendations-table__col-head { font-size: 8.75px; font-size: 0.875rem; font-family: "ReplicaMono-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.3; color: #3babef; } .recommendations-table__col { vertical-align: top; padding: 13px 14px 22px; width: 28%; } .recommendations-table__row-head { font-size: 8.75px; font-size: 0.875rem; font-family: "ReplicaMono-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.3; color: #396ab6; width: 16%; } .recommendations-table__list { font-size: 8.75px; font-size: 0.875rem; font-family: "Replica-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.3; } .recommendations-table__list > li { position: relative; padding-left: 0.9em; list-style: none; } .recommendations-table__list > li:before { content: "-"; display: block; position: absolute; left: 0; top: 0em; } .recommendations-table__list > li + li { margin-top: 10px; } .recommendations-table tbody tr:nth-child(2n + 1) .recommendations-table__col { background-color: rgba(0, 0, 0, 0.02); } /* Rich Text Styles that can accomodate a wide range of HTML text .rich-text--reverse - Reverses colors */ .rich-text > *:last-child { margin-bottom: 0; } .rich-text ul, .rich-text ol { list-style: none; } .rich-text ul li, .rich-text ol li { list-style: none; position: relative; padding-left: 25px; } .rich-text ul li + li, .rich-text ol li + li { margin-top: 12px; } .rich-text ul li:before { content: "\2192"; color: #3babef; display: block; position: absolute; left: 0; } .rich-text ol { counter-reset: ordered-list-text-counter; } .rich-text ol li:before { font-family: "Replica-Bold", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; position: absolute; left: -10px; content: counter(ordered-list-text-counter) "."; counter-increment: ordered-list-text-counter; text-align: right; width: 25px; color: #3babef; } .rich-text { color: #fff; } /* Share Modal A popup modal with some simple sharing elements. */ .share-modal { background-color: #fff; padding: 30px 35px; margin-left: 20px; margin-right: 20px; } .modal-popup__header { margin: 0; } .share-modal__description { margin-top: 30px; } @media screen and (min-width: 320px) { .share-modal__description { margin-top: calc(30px + 0 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .share-modal__description { margin-top: 30px; } } .share-modal__form { margin-top: 30px; } @media screen and (min-width: 320px) { .share-modal__form { margin-top: calc(30px + 0 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .share-modal__form { margin-top: 30px; } } .share-modal__close { margin-top: 30px; font-size: 8.75px; font-size: 0.875rem; font-family: "ReplicaMono-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.3; display: inline-block; color: #3babef; } @media screen and (min-width: 320px) { .share-modal__close { margin-top: calc(30px + 0 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .share-modal__close { margin-top: 30px; } } .share-modal__close:hover { text-decoration: underline; } /* Simple Modal A simple, basic modal .simple-modal--light - Light-colored background */ .simple-modal { background-color: #396ab6; padding: 40px 28px 12px; padding: 4rem 2.8rem 1.2rem; margin-left: 20px; margin-right: 20px; } .simple-modal__close { background: url(images/menu-close.svg) no-repeat; background-position: center center; background-size: 17px 17px; text-indent: -99990px; text-indent: -9999rem; display: block; width: 40px; height: 40px; margin: 0 auto; margin-top: 25px; margin-top: 2.5rem; } .simple-modal--light { background-color: #fff; } .simple-modal--light .simple-modal__close { background-image: url(images/menu-close-dark.svg); } /* Slideshow Nav Navigation for various slideshows */ .slideshow-nav__item { font-size: 8.75px; font-size: 0.875rem; font-family: "ReplicaMono-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.3; color: #a5a5a5; display: inline-block; border-top: 1px solid #a5a5a5; padding-top: 5px; transition: 0.2s; transition-property: color, border-color; } .slideshow-nav__item:hover { color: #396ab6; border-top-color: #396ab6; } .slideshow-nav__item + .slideshow-nav__item { margin-left: 13px; } .slideshow-nav__item.is-active { color: #3babef; border-top-color: #3babef; } /* Small Contact Form A contact form with a few fields, typically used as a sort of CTA .small-contact-form--modal - Appears in a .simple-modal */ .small-contact-form > * + * { margin-top: 16px; } @media screen and (min-width: 320px) { .small-contact-form > * + * { margin-top: calc(16px + 0 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .small-contact-form > * + * { margin-top: 16px; } } .small-contact-form__heading { font-size: 6.25px; font-size: 0.625rem; font-family: "ReplicaMono-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.25; color: #3babef; margin: 0; } .small-contact-form--modal .small-contact-form__heading { color: #fff; } /* Speech Bubble A speech bubble that typically contains a question .speech-bubble--left - Stem is on the left .speech-bubble--right - Stem is on the right .speech-bubble--blue - Color is blue .speech-bubble--yellow - Color is yellow .speech-bubble--red - Color is red .speech-bubble--green - Color is green */ .speech-bubble { background-color: black; padding: 26px 30px; position: absolute; display: inline-block; } .speech-bubble > p { color: white; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: 'Replica-Bold', sans-serif; line-height: 1.22; font-size: 38px; margin: 0; } .speech-bubble__stem { position: absolute; top: 0; left: 0; max-width: 100%; height: 100%; position: absolute; top: 99%; width: 46px; height: 27px; } .speech-bubble__stem > svg { width: 46px; height: 27px; } .speech-bubble--left { transform-origin: 0 100%; } .speech-bubble--left .speech-bubble__stem { left: 0; } .speech-bubble--right { transform-origin: 100% 100%; } .speech-bubble--right .speech-bubble__stem { left: 100%; margin-left: -46px; } .speech-bubble--blue, .speech-bubble--blue .speech-bubble-stem { background-color: #3babef; fill: #3babef; } .speech-bubble--yellow, .speech-bubble--yellow .speech-bubble-stem { background-color: #fdd615; fill: #fdd615; } .speech-bubble--red, .speech-bubble--red .speech-bubble-stem { background-color: #f03140; fill: #f03140; } .speech-bubble--green, .speech-bubble--green .speech-bubble-stem { background-color: #86cc1a; fill: #86cc1a; } /* Styleguide Item An indiviudal item in the styleguide */ .styleguide-item:after { content: " "; display: block; clear: both; } .styleguide-item__title { padding-top: 30px; padding-bottom: 7px; margin-bottom: 30px; border-bottom: 1px solid #e8e8e8; } .styleguide-item__title--code { font-family: "Andale Mono", AndaleMono, monospace; font-size: 14px; font-weight: 400; color: #dbdbdb; text-transform: none; letter-spacing: 0; transition: color 0.2s; } .styleguide-item:hover .styleguide-item__title--code { color: #666; } .styleguide-item__title-spacer { display: inline-block; margin-left: 40px; } .styleguide-item__code-sample { width: 38.06971%; float: left; margin-right: 6.16622%; font-family: "Andale Mono", AndaleMono, monospace; font-size: 14px; font-weight: 400; color: #848484; padding: 10px; padding: 1rem; background: #f2f2f2; border: 1px solid #e8e8e8; border-radius: 4px; cursor: pointer; } .styleguide-item__code-sample > pre { margin: 0; } .styleguide-item__object-sample { width: 55.76408%; float: right; margin-right: 0; padding: 30px; } .styleguide-item__object-sample--narrow { padding-right: 11.52815%; } .styleguide-item__object-sample--large { width: 100%; float: right; margin-right: 0; margin-top: 40px; clear: left; } .styleguide-item__object-sample--bg-grey { background: #f4f4f4; min-height: 200px; } .styleguide-item__object-sample--bg-black { background: #000; } .styleguide-item__object-sample--bg-brand { background: #16467f; } .styleguide-item__object-sample--bg-brand-2 { background: #3babef; } /* Styleguide Typography Item A styleguide item representing typography for the site */ @media (min-width: 64em) { .styleguide-typography-item { position: relative; padding-left: 350px; } } .styleguide-typography-item__code { margin-bottom: 10px; font-family: "Andale Mono", AndaleMono, monospace; font-size: 14px; font-weight: 400; color: #848484; padding: 1em; background: #f2f2f2; border: 1px solid #e8e8e8; border-radius: 4px; cursor: pointer; min-width: 300px; } @media screen and (min-width: 320px) { .styleguide-typography-item__code { margin-bottom: calc(10px + 0 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .styleguide-typography-item__code { margin-bottom: 10px; } } .styleguide-typography-item__code > pre { margin: 0; } @media (min-width: 64em) { .styleguide-typography-item__code { position: absolute; left: 0; } } /* Subpage Intro Introduces a subpage on the site .subpage-intro--spaced-subheading - Spaced out subheading .subpage-intro--eyebrow - Adds an eyebrow above heading .subpage-intro--reverse - Reversed colors for use on dark backgrounds .subpage-intro--banner-header - Unique layout for use in .l-banner-header .subpage-intro--banner-header-case-study - Unique layout for use in .l-banner-head--case-study */ .subpage-intro__heading { font-size: 22.5px; font-size: 2.25rem; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: "Replica-Bold", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.06; color: #396ab6; } @media (min-width: 47.5em) { .subpage-intro__heading { font-size: 3rem; } } .subpage-intro__subheading { font-size: 12.5px; font-size: 1.25rem; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: "Replica-Bold", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.25; margin: 0; margin-top: 0px; color: #3babef; } .subpage-intro__text { margin-top: 16px; } @media screen and (min-width: 320px) { .subpage-intro__text { margin-top: calc(16px + 0 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .subpage-intro__text { margin-top: 16px; } } .subpage-intro__cta { margin-top: 30px; } @media screen and (min-width: 320px) { .subpage-intro__cta { margin-top: calc(30px + 10 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .subpage-intro__cta { margin-top: 40px; } } .subpage-intro__cta > .input-btn { display: block; } @media (min-width: 47.5em) { .subpage-intro__cta > .input-btn { display: inline-block; margin-right: 10px; } } @media (max-width: 47.49em) { .subpage-intro__cta > * + * { margin-top: 30px; } } @media screen and (max-width: 47.49em) and (min-width: 320px) { .subpage-intro__cta > * + * { margin-top: calc(30px + 0 * ((100vw - 320px) / 980)); } } @media screen and (max-width: 47.49em) and (min-width: 1300px) { .subpage-intro__cta > * + * { margin-top: 30px; } } .subpage-intro--alt .subpage-intro__heading { color: #3babef; } .subpage-intro--spaced-subheading .subpage-intro__subheading { margin-top: 24px; } .subpage-intro--eyebrow:before { content: ""; display: block; height: 1px; border-bottom: 1px solid #396ab6; width: 17px; margin-bottom: 32px; } .subpage-intro--reverse .subpage-intro__heading, .subpage-intro--reverse .subpage-intro__text { color: #fff; } .subpage-intro--reverse.subpage-intro--eyebrow:before { content: ""; display: block; height: 1px; border-bottom: 1px solid #fff; width: 17px; margin-bottom: 32px; } @media (min-width: 47.5em) { .subpage-intro--banner-header .subpage-intro__subheading, .subpage-intro--banner-header .subpage-intro__text { padding-right: 20.67308%; } } @media (min-width: 47.5em) { .subpage-intro--banner-header-case-study .subpage-intro__subheading, .subpage-intro--banner-header-case-study .subpage-intro__text { padding-right: 24.6888%; } } /* Text List A list of text items */ .text-list > li { font-size: 8.75px; font-size: 0.875rem; font-family: "Replica-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.3; color: #fff; list-style-type: none; padding-left: 11px; position: relative; } .text-list > li:before { content: "-"; position: absolute; left: 0; } .text-list > li + li { margin-top: 10px; } @media screen and (min-width: 320px) { .text-list > li + li { margin-top: calc(10px + 0 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .text-list > li + li { margin-top: 10px; } } /* Text Set A common combination of headings and body copy. .text-set--reverse - Reverses the text for light backgrounds .text-set--white - Makes the heading text white .text-set--large - Larger heading and text .text-set--strong-heading - Stronger heading style .text-set--minor-heading - Weaker heading style */ .text-set__heading { font-size: 18.75px; font-size: 1.875rem; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: "Replica-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.25; margin-top: 3px; } .text-set__heading.text-set__heading--eyebrow:before { content: ""; display: block; height: 1px; border-bottom: 1px solid #3babef; width: 17px; margin-bottom: 0.7em; } .text-set__text { color: #fff; } .text-set__text > * { margin: 0; } .text-set__text > * + * { margin-top: 10px; } @media screen and (min-width: 320px) { .text-set__text > * + * { margin-top: calc(10px + 0 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .text-set__text > * + * { margin-top: 10px; } } .text-set__text > ol { padding-left: 30px; } .text-set__text > ol > li { margin-top: 10px; list-style-type: decimal; } @media screen and (min-width: 320px) { .text-set__text > ol > li { margin-top: calc(10px + 0 * ((100vw - 320px) / 980)); } } @media screen and (min-width: 1300px) { .text-set__text > ol > li { margin-top: 10px; } } .text-set--reverse .text-set__text { color: #6d6e70; } .text-set--white .text-set__heading { color: #fff; } .text-set--large .text-set__heading { font-size: 15.625px; font-size: 1.5625rem; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: "Replica-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.22; } @media (min-width: 47.5em) { .text-set--large .text-set__heading { font-size: 2.25rem; } } .text-set--large .text-set__heading.text-set__heading--eyebrow:before { content: ""; display: block; height: 1px; border-bottom: 1px solid #3babef; width: 17px; margin-bottom: 10px; } .text-set--large .text-set__text { font-size: 10px; font-size: 1rem; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: "Replica-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.19; margin-top: 11px; margin-top: 1.1rem; } @media (min-width: 47.5em) { .text-set--large .text-set__text { font-size: 1.3125rem; } } .text-set--strong-heading .text-set__heading { font-family: "Replica-Bold", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; } .text-set--strong-heading .text-set__text { margin-top: 13px; margin-top: 1.3rem; } .text-set--minor-heading .text-set__heading { font-size: 10px; font-size: 1rem; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: "Replica-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.19; } @media (min-width: 47.5em) { .text-set--minor-heading .text-set__heading { font-size: 1.3125rem; } } /* Tiny Subheading A very small subheading .tiny-subheading--large - Slightly bigger */ .tiny-subheading { font-size: 6.25px; font-size: 0.625rem; font-family: "ReplicaMono-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.25; margin-bottom: 0; color: #3babef; } .tiny-subheading:before { content: ""; display: block; height: 1px; border-bottom: 1px solid #3babef; width: 17px; margin-bottom: 9px; } .tiny-subheading--large { font-size: 8.75px; font-size: 0.875rem; font-family: "ReplicaMono-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.3; } /* Toggle Toggles between two values .is-off - The "off" state */ .toggle { width: 80px; background-color: rgba(255, 255, 255, 0.08); border-radius: 10px; height: 20px; position: relative; cursor: pointer; padding: 3px; } .toggle:before { content: ""; display: block; width: 37px; height: 14px; background-color: #fff; border-radius: 7px; transition: transform 0.3s; } .toggle__option { font-size: 6.25px; font-size: 0.625rem; font-family: "ReplicaMono-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.25; color: #000; width: 50%; position: absolute; transition: 0.3s; line-height: 20px; top: 0; left: 0; text-align: center; } .toggle__option:nth-child(2) { color: #3babef; left: auto; right: 0; } .toggle.is-off:before { transform: translateX(100%); } .toggle.is-off .toggle__option:nth-child(1) { color: #3babef; } .toggle.is-off .toggle__option:nth-child(2) { color: #000; }