/** * Owl Carousel v2.3.4 * Copyright 2013-2018 David Deutsch * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE */ .owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0;}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(clientlib-site-revised/css/owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%} /*---===<<< VARIABLES >>>===---*/ /*---=== COLORS ===---*/ /*****Nav colors******/ /*---=== To Be Changed/Removed. Not for Production code use ===---*/ /*---=== FONT SETTINGS ===---*/ /*---=== MEDIA QUERIES ===---*/ /*---=== GRID ===---*/ /*---=== SOCIAL ICON COLORS ===---*/ /* -------------------------------------------------------------------------- *\ GLOBAL MIXINS These are a common set of mixins that are commonly \* -------------------------------------------------------------------------- */ /*---=== SR ONLY ===---*/ .srOnly { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip: rect(0, 0, 0, 0); } /*---=== CLEAR FIX ===---*/ .clearfix:before, .clearfix:after { display: block; height: 0; width: 100%; content: ""; clear: both; } /*--- CLEAR ---*/ /*---=== HOVER/FOCUS ===---*/ /*.hover { &:hover, &:focus { @content; } }*/ /*---=== BOXSHADOW ===---*/ /*---=== TEXTSHADOW ===---*/ /*---=== OVERLAY ===---*/ /*---=== TRANSFORM ===---*/ /*---=== POSITION ===---*/ /*---=== FLEX ===---*/ /*---=== COLUMNS ===---*/ /*---=== APPEARANCE ===---*/ /*---=== GRID ===---*/ /*--- GRID GENERATOR ---*/ /*---=== EFFECTS ===---*/ /*--- ANIMATIONS ---*/ /*--- FILTERS ---*/ /*--- TRANSITION ---*/ /*---=== FONTS ===---*/ /*--- FONT SIZE ---*/ /*---===<<< GOOGLE FONT IMPORT >>>===---* @font-face { font-family: 'Lato'; src: local('Lato Light'), local('Lato-Light'), url('../clientlib-local-fonts/resources/Lato-Light.woff2') format("woff2"), url('../clientlib-local-fonts/resources/Lato-Light.woff') format("woff"); font-weight: 300; font-style: normal; font-display: swap; text-rendering: optimizeSpeed; } @font-face { font-family: 'Lato'; src: local('Lato Light Italic'), local('Lato-LightItalic'), url('../clientlib-local-fonts/resources/Lato-LightItalic.woff2') format("woff2"), url('../clientlib-local-fonts/resources/Lato-LightItalic.woff') format("woff"); font-weight: 300; font-style: italic; font-display: swap; text-rendering: optimizeSpeed; } @font-face { font-family: 'Lato'; src: local('Lato Regular'), local('Lato-Regular'), url('../clientlib-local-fonts/resources/Lato-Regular.woff2') format("woff2"), url('../clientlib-local-fonts/resources/Lato-Regular.woff') format("woff"); font-weight: 400; font-style: normal; font-display: swap; text-rendering: optimizeSpeed; } @font-face { font-family: 'Lato'; src: local('Lato Italic'), local('Lato-Italic'), url('../clientlib-local-fonts/resources/Lato-Italic.woff2') format("woff2"), url('../clientlib-local-fonts/resources/Lato-Italic.woff') format("woff"); font-weight: 400; font-style: italic; font-display: swap; text-rendering: optimizeSpeed; } @font-face { font-family: 'Lato'; src: local('Lato Bold'), local('Lato-Bold'), url('../clientlib-local-fonts/resources/Lato-Bold.woff2') format("woff2"), url('../clientlib-local-fonts/resources/Lato-Bold.woff') format("woff"); font-weight: 700; font-style: normal; font-display: swap; text-rendering: optimizeSpeed; } @font-face { font-family: 'Lato'; src: local('Lato Bold Italic'), local('Lato-Bold-Italic'), url('../clientlib-local-fonts/resources/Lato-Bold.woff2') format("woff2"), url('../clientlib-local-fonts/resources/Lato-Bold.woff') format("woff"); font-weight: 700; font-style: italic; font-display: swap; text-rendering: optimizeSpeed; } @font-face { font-family: 'Lato'; src: local('Lato Black'), local('Lato-Black'), url('../clientlib-local-fonts/resources/Lato-Black.woff2') format("woff2"), url('../clientlib-local-fonts/resources/Lato-Black.woff') format("woff"); font-weight: 900; font-style: normal; font-display: swap; text-rendering: optimizeSpeed; } /*---===<<< Brandon/Adobe FONT IMPORT >>>===---* @font-face { font-family: "brandon-grotesque"; src: url("https://use.typekit.net/af/1da05b/0000000000000000000132df/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"), url("https://use.typekit.net/af/1da05b/0000000000000000000132df/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"), url("https://use.typekit.net/af/1da05b/0000000000000000000132df/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype"); font-display: swap; font-style: normal; font-weight: 400; } @font-face { font-family: "brandon-grotesque"; src: url("https://use.typekit.net/af/32d3ee/0000000000000000000132e0/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff2"), url("https://use.typekit.net/af/32d3ee/0000000000000000000132e0/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff"), url("https://use.typekit.net/af/32d3ee/0000000000000000000132e0/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("opentype"); font-display: swap; font-style: italic; font-weight: 400; } @font-face { font-family: "brandon-grotesque"; src: url("https://use.typekit.net/af/8f4e31/0000000000000000000132e3/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"), url("https://use.typekit.net/af/8f4e31/0000000000000000000132e3/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"), url("https://use.typekit.net/af/8f4e31/0000000000000000000132e3/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype"); font-display: swap; font-style: normal; font-weight: 700; } @font-face { font-family: "brandon-grotesque"; src: url("https://use.typekit.net/af/383ab4/0000000000000000000132e4/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff2"), url("https://use.typekit.net/af/383ab4/0000000000000000000132e4/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff"), url("https://use.typekit.net/af/383ab4/0000000000000000000132e4/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("opentype"); font-display: swap; font-style: italic; font-weight: 700; } @font-face { font-family: "brandon-grotesque"; src: url("https://use.typekit.net/af/1281a1/000000000000000077359ded/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff2"), url("https://use.typekit.net/af/1281a1/000000000000000077359ded/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff"), url("https://use.typekit.net/af/1281a1/000000000000000077359ded/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("opentype"); font-display: swap; font-style: normal; font-weight: 300; } @font-face { font-family: "brandon-grotesque"; src: url("https://use.typekit.net/af/d03e48/000000000000000077359df2/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff2"), url("https://use.typekit.net/af/d03e48/000000000000000077359df2/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff"), url("https://use.typekit.net/af/d03e48/000000000000000077359df2/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("opentype"); font-display: swap; font-style: normal; font-weight: 500; } @font-face { font-family: "brandon-grotesque"; src: url("https://use.typekit.net/af/b59a99/000000000000000077359df3/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("woff2"), url("https://use.typekit.net/af/b59a99/000000000000000077359df3/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("woff"), url("https://use.typekit.net/af/b59a99/000000000000000077359df3/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("opentype"); font-display: swap; font-style: italic; font-weight: 500; } @font-face { font-family: "brandon-grotesque"; src: url("https://use.typekit.net/af/257c86/000000000000000077359df6/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("woff2"), url("https://use.typekit.net/af/257c86/000000000000000077359df6/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("woff"), url("https://use.typekit.net/af/257c86/000000000000000077359df6/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("opentype"); font-display: swap; font-style: normal; font-weight: 900; } .tk-brandon-grotesque { font-family: "brandon-grotesque", sans-serif; } /*---===<<< Gazpacho/TT Norms >>>===---*/ @font-face { font-family: 'Gazpacho'; src: local('Gazpacho Bold'), local('Gazpacho-Bold'), url('custom-fonts/clientlib-gz/resources/subset-Gazpacho-Bold.woff2') format('woff2'), url('custom-fonts/clientlib-gz/resources/subset-Gazpacho-Bold.woff') format('woff'); font-weight: bold; font-style: normal; font-display: swap; text-rendering: optimizeSpeed; } @font-face { font-family: 'Gazpacho'; src: local('Gazpacho Black'), local('Gazpacho-Black'), url('custom-fonts/clientlib-gz/resources/subset-Gazpacho-Black.woff2') format('woff2'), url('custom-fonts/clientlib-gz/resources/subset-Gazpacho-Black.woff') format('woff'); font-weight: 900; font-style: normal; font-display: swap; text-rendering: optimizeSpeed; } @font-face { font-family: 'Gazpacho'; src: local('Gazpacho Medium'), local('Gazpacho-Medium'), url('custom-fonts/clientlib-gz/resources/subset-Gazpacho-Medium.woff2') format('woff2'), url('custom-fonts/clientlib-gz/resources/subset-Gazpacho-Medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; text-rendering: optimizeSpeed; } @font-face { font-family: 'Gazpacho'; src: local('Gazpacho Italic Bold'), local('GazpachoItalic-Bold'), url('custom-fonts/clientlib-gz/resources/subset-GazpachoItalic-Bold.woff2') format('woff2'), url('custom-fonts/clientlib-gz/resources/subset-GazpachoItalic-Bold.woff') format('woff'); font-weight: bold; font-style: italic; font-display: swap; text-rendering: optimizeSpeed; } @font-face { font-family: 'Gazpacho'; src: local('Gazpacho Italic Black'), local('GazpachoItalic-Black'), url('custom-fonts/clientlib-gz/resources/subset-GazpachoItalic-Black.woff2') format('woff2'), url('custom-fonts/clientlib-gz/resources/subset-GazpachoItalic-Black.woff') format('woff'); font-weight: 900; font-style: italic; font-display: swap; text-rendering: optimizeSpeed; } @font-face { font-family: 'Gazpacho'; src: local('Gazpacho Italic Medium'), local('GazpachoItalic-Medium'), url('custom-fonts/clientlib-gz/resources/subset-GazpachoItalic-Medium.woff2') format('woff2'), url('custom-fonts/clientlib-gz/resources/subset-GazpachoItalic-Medium.woff') format('woff'); font-weight: 500; font-style: italic; font-display: swap; text-rendering: optimizeSpeed; } @font-face { font-family: 'TT Norms Pro'; src: local('TT Norms Pro Black'), local('TTNormsPro-Blk'), url('custom-fonts/clientlib-tt/resources/subset-TTNormsPro-Blk.woff2') format('woff2'), url('custom-fonts/clientlib-tt/resources/subset-TTNormsPro-Blk.woff') format('woff'); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: 'TT Norms Pro'; src: local('TT Norms Pro Bold Italic'), local('TTNormsPro-BdIt'), url('custom-fonts/clientlib-tt/resources/subset-TTNormsPro-BdIt.woff2') format('woff2'), url('custom-fonts/clientlib-tt/resources/subset-TTNormsPro-BdIt.woff') format('woff'); font-weight: bold; font-style: italic; font-display: swap; } @font-face { font-family: 'TT Norms Pro'; src: local('TT Norms Pro Bold'), local('TTNormsPro-Bd'), url('custom-fonts/clientlib-tt/resources/subset-TTNormsPro-Bd.woff2') format('woff2'), url('custom-fonts/clientlib-tt/resources/subset-TTNormsPro-Bd.woff') format('woff'); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: 'TT Norms Pro'; src: local('TT Norms Pro Normal Italic'), local('TTNormsPro-NormalIt'), url('custom-fonts/clientlib-tt/resources/subset-TTNormsPro-NormalIt.woff2') format('woff2'), url('custom-fonts/clientlib-tt/resources/subset-TTNormsPro-NormalIt.woff') format('woff'); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: 'TT Norms Pro'; src: local('TT Norms Pro Normal'), local('TTNormsPro-Normal'), url('custom-fonts/clientlib-tt/resources/subset-TTNormsPro-Normal.woff2') format('woff2'), url('custom-fonts/clientlib-tt/resources/subset-TTNormsPro-Normal.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'TT Norms Pro'; src: local('TT Norms Pro Thin'), local('TTNormsPro-Th'), url('custom-fonts/clientlib-tt/resources/subset-TTNormsPro-Th.woff2') format('woff2'), url('custom-fonts/clientlib-tt/resources/subset-TTNormsPro-Th.woff') format('woff'); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: 'TT Norms Pro'; src: local('TT Norms Pro Thin Italic'), local('TTNormsPro-ThIt'), url('custom-fonts/clientlib-tt/resources/subset-TTNormsPro-ThIt.woff2') format('woff2'), url('custom-fonts/clientlib-tt/resources/subset-TTNormsPro-ThIt.woff') format('woff'); font-weight: 100; font-style: italic; font-display: swap; } /*---===<<< UNIVERSAL RESETS >>>===---*/ * { box-sizing: border-box; padding: 0; margin: 0; } html { font-size: 10px; font-size: 62.5%; } html, body { /*width: 100vw;*/ /*overflow-x: hidden;*/ } body { background-color: #ffffff; } :focus { outline: none; } :focus-visible { outline: auto; } a { transition: color .25s; } a.skip-content { position: fixed; z-index: -999; left: 50%; top: 0; transform: translate(-50%, -101%); padding: 2.9rem 1rem; background: #ffffff; color: #1b1b1b; transition: transform .25s, background .25s, color .25s; overflow: hidden; } a.skip-content:focus { position: fixed; width: 100%; background: #ffffff; color: #3c131c; text-decoration: underline; -webkit-transform: translate(-50%, 0rem); -ms-transform: translate(-50%, 0rem); transform: translate(-50%, 0rem); overflow: auto; z-index: 99999999; } a.skip-content:active { overflow: auto; } button { background: none; border: none; font-size: 1em; font-family: 'TT Norms Pro', sans-serif; cursor: pointer; } input, select, textarea { border: none; } .sr-only { position: absolute; z-index: 0; width: 1px; height: 1px; padding: 0; clip: rect(0, 0, 0, 0); overflow: hidden; border: 0; white-space: nowrap; } /*---===<<< GRID >>>===---*/ /*---=== BASE STUFF ===---*/ [class*="col-"] { padding: 0 2.5rem; margin: 0; flex: 0 0 auto; } .row { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: 'space-between, stretch, flex-start, row wrap'; align-items: null; align-content: null; flex-flow: row wrap; margin: 0 -2.5rem; width: calc(100% + (-2.5rem * -2)); } .row { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: 'space-between, stretch, flex-start, row wrap'; align-items: null; align-content: null; flex-flow: row wrap; margin: 0 -2.5rem; width: calc(100% + (-2.5rem * -2)); } .row + * { margin-top: 5rem; } .col-xs-1 { width: 8.33333333%; } .col-xs-2 { width: 16.66666667%; } .col-xs-3 { width: 25%; } .col-xs-4 { width: 33.33333333%; } .col-xs-5 { width: 41.66666667%; } .col-xs-6 { width: 50%; } .col-xs-7 { width: 58.33333333%; } .col-xs-8 { width: 66.66666667%; } .col-xs-9 { width: 75%; } .col-xs-10 { width: 83.33333333%; } .col-xs-11 { width: 91.66666667%; } .col-xs-12 { width: 100%; } .col-xs-1 { width: 8.33333333%; } .col-xs-2 { width: 16.66666667%; } .col-xs-3 { width: 25%; } .col-xs-4 { width: 33.33333333%; } .col-xs-5 { width: 41.66666667%; } .col-xs-6 { width: 50%; } .col-xs-7 { width: 58.33333333%; } .col-xs-8 { width: 66.66666667%; } .col-xs-9 { width: 75%; } .col-xs-10 { width: 83.33333333%; } .col-xs-11 { width: 91.66666667%; } .col-xs-12 { width: 100%; } @media screen and (min-width: 576px) { .col-sm-1 { width: 8.33333333%; } .col-sm-2 { width: 16.66666667%; } .col-sm-3 { width: 25%; } .col-sm-4 { width: 33.33333333%; } .col-sm-5 { width: 41.66666667%; } .col-sm-6 { width: 50%; } .col-sm-7 { width: 58.33333333%; } .col-sm-8 { width: 66.66666667%; } .col-sm-9 { width: 75%; } .col-sm-10 { width: 83.33333333%; } .col-sm-11 { width: 91.66666667%; } .col-sm-12 { width: 100%; } .col-sm-1 { width: 8.33333333%; } .col-sm-2 { width: 16.66666667%; } .col-sm-3 { width: 25%; } .col-sm-4 { width: 33.33333333%; } .col-sm-5 { width: 41.66666667%; } .col-sm-6 { width: 50%; } .col-sm-7 { width: 58.33333333%; } .col-sm-8 { width: 66.66666667%; } .col-sm-9 { width: 75%; } .col-sm-10 { width: 83.33333333%; } .col-sm-11 { width: 91.66666667%; } .col-sm-12 { width: 100%; } } @media screen and (min-width: 768px) { .col-md-1 { width: 8.33333333%; } .col-md-2 { width: 16.66666667%; } .col-md-3 { width: 25%; } .col-md-4 { width: 33.33333333%; } .col-md-5 { width: 41.66666667%; } .col-md-6 { width: 50%; } .col-md-7 { width: 58.33333333%; } .col-md-8 { width: 66.66666667%; } .col-md-9 { width: 75%; } .col-md-10 { width: 83.33333333%; } .col-md-11 { width: 91.66666667%; } .col-md-12 { width: 100%; } .col-md-1 { width: 8.33333333%; } .col-md-2 { width: 16.66666667%; } .col-md-3 { width: 25%; } .col-md-4 { width: 33.33333333%; } .col-md-5 { width: 41.66666667%; } .col-md-6 { width: 50%; } .col-md-7 { width: 58.33333333%; } .col-md-8 { width: 66.66666667%; } .col-md-9 { width: 75%; } .col-md-10 { width: 83.33333333%; } .col-md-11 { width: 91.66666667%; } .col-md-12 { width: 100%; } } @media screen and (min-width: 992px) { .col-lg-1 { width: 8.33333333%; } .col-lg-2 { width: 16.66666667%; } .col-lg-3 { width: 25%; } .col-lg-4 { width: 33.33333333%; } .col-lg-5 { width: 41.66666667%; } .col-lg-6 { width: 50%; } .col-lg-7 { width: 58.33333333%; } .col-lg-8 { width: 66.66666667%; } .col-lg-9 { width: 75%; } .col-lg-10 { width: 83.33333333%; } .col-lg-11 { width: 91.66666667%; } .col-lg-12 { width: 100%; } .col-lg-1 { width: 8.33333333%; } .col-lg-2 { width: 16.66666667%; } .col-lg-3 { width: 25%; } .col-lg-4 { width: 33.33333333%; } .col-lg-5 { width: 41.66666667%; } .col-lg-6 { width: 50%; } .col-lg-7 { width: 58.33333333%; } .col-lg-8 { width: 66.66666667%; } .col-lg-9 { width: 75%; } .col-lg-10 { width: 83.33333333%; } .col-lg-11 { width: 91.66666667%; } .col-lg-12 { width: 100%; } } .col-xs-1 { width: 8.33333333%; } .col-xs-2 { width: 16.66666667%; } .col-xs-3 { width: 25%; } .col-xs-4 { width: 33.33333333%; } .col-xs-5 { width: 41.66666667%; } .col-xs-6 { width: 50%; } .col-xs-7 { width: 58.33333333%; } .col-xs-8 { width: 66.66666667%; } .col-xs-9 { width: 75%; } .col-xs-10 { width: 83.33333333%; } .col-xs-11 { width: 91.66666667%; } .col-xs-12 { width: 100%; } .col-xs-1 { width: 8.33333333%; } .col-xs-2 { width: 16.66666667%; } .col-xs-3 { width: 25%; } .col-xs-4 { width: 33.33333333%; } .col-xs-5 { width: 41.66666667%; } .col-xs-6 { width: 50%; } .col-xs-7 { width: 58.33333333%; } .col-xs-8 { width: 66.66666667%; } .col-xs-9 { width: 75%; } .col-xs-10 { width: 83.33333333%; } .col-xs-11 { width: 91.66666667%; } .col-xs-12 { width: 100%; } @media screen and (min-width: 576px) { .col-sm-1 { width: 8.33333333%; } .col-sm-2 { width: 16.66666667%; } .col-sm-3 { width: 25%; } .col-sm-4 { width: 33.33333333%; } .col-sm-5 { width: 41.66666667%; } .col-sm-6 { width: 50%; } .col-sm-7 { width: 58.33333333%; } .col-sm-8 { width: 66.66666667%; } .col-sm-9 { width: 75%; } .col-sm-10 { width: 83.33333333%; } .col-sm-11 { width: 91.66666667%; } .col-sm-12 { width: 100%; } .col-sm-1 { width: 8.33333333%; } .col-sm-2 { width: 16.66666667%; } .col-sm-3 { width: 25%; } .col-sm-4 { width: 33.33333333%; } .col-sm-5 { width: 41.66666667%; } .col-sm-6 { width: 50%; } .col-sm-7 { width: 58.33333333%; } .col-sm-8 { width: 66.66666667%; } .col-sm-9 { width: 75%; } .col-sm-10 { width: 83.33333333%; } .col-sm-11 { width: 91.66666667%; } .col-sm-12 { width: 100%; } } @media screen and (min-width: 768px) { .col-md-1 { width: 8.33333333%; } .col-md-2 { width: 16.66666667%; } .col-md-3 { width: 25%; } .col-md-4 { width: 33.33333333%; } .col-md-5 { width: 41.66666667%; } .col-md-6 { width: 50%; } .col-md-7 { width: 58.33333333%; } .col-md-8 { width: 66.66666667%; } .col-md-9 { width: 75%; } .col-md-10 { width: 83.33333333%; } .col-md-11 { width: 91.66666667%; } .col-md-12 { width: 100%; } .col-md-1 { width: 8.33333333%; } .col-md-2 { width: 16.66666667%; } .col-md-3 { width: 25%; } .col-md-4 { width: 33.33333333%; } .col-md-5 { width: 41.66666667%; } .col-md-6 { width: 50%; } .col-md-7 { width: 58.33333333%; } .col-md-8 { width: 66.66666667%; } .col-md-9 { width: 75%; } .col-md-10 { width: 83.33333333%; } .col-md-11 { width: 91.66666667%; } .col-md-12 { width: 100%; } } @media screen and (min-width: 992px) { .col-lg-1 { width: 8.33333333%; } .col-lg-2 { width: 16.66666667%; } .col-lg-3 { width: 25%; } .col-lg-4 { width: 33.33333333%; } .col-lg-5 { width: 41.66666667%; } .col-lg-6 { width: 50%; } .col-lg-7 { width: 58.33333333%; } .col-lg-8 { width: 66.66666667%; } .col-lg-9 { width: 75%; } .col-lg-10 { width: 83.33333333%; } .col-lg-11 { width: 91.66666667%; } .col-lg-12 { width: 100%; } .col-lg-1 { width: 8.33333333%; } .col-lg-2 { width: 16.66666667%; } .col-lg-3 { width: 25%; } .col-lg-4 { width: 33.33333333%; } .col-lg-5 { width: 41.66666667%; } .col-lg-6 { width: 50%; } .col-lg-7 { width: 58.33333333%; } .col-lg-8 { width: 66.66666667%; } .col-lg-9 { width: 75%; } .col-lg-10 { width: 83.33333333%; } .col-lg-11 { width: 91.66666667%; } .col-lg-12 { width: 100%; } } /* -------------------------------------------------------------------------- *\ Background Styles here are used for background color/image/patterned of a component. // POSITIONING (DISPLAY, FLEX, FLEX ITEM, POSITION, LEFT, TOP, TRANSFORM) // BOX SIZING (WIDTH, HEIGHT, MARGIN, PADDING) // BOX STYLING (OPACITY, BACKGROUND, BOX SHADOW, BORDER, BORDER RADIUS, OVERFLOW) // FONT STYLING (FONT, FONT-FAMILY, FONT-STYLE, FONT-SIZE, LINE-HEIGHT, FONT-WEIGHT) // TEXT STYLING (TEXT-DECORATION, TEXT-TRANSFORM, TEXT-ALIGN, TEXT-SHADOW) // OTHER (TRANSITONS, ANIMATIONS, CURSOR) \* -------------------------------------------------------------------------- */ .light-background { background-color: #ffffff; } .light-gray-background { background-color: #f6f6f6; } .dark-gray-background { background-color: #999999; } .brown-background { background-color: #553b33; } .dark-brown-background { background-color: #3c131c; } .corporate-warm-tan { background-color: #feebd0; } .corporate-munsell { background-color: #3f000b; } .corporate-dark-munsell { background-color: #270107; } .corporate-cool-tan { background-color: #e2d6c5; } .corporate-gray { background-color: #efeaea; } .corporate-white { background-color: #ffffff; } .corporate-purple { background-color: #5a357b; } .corporate-purple-variant-500 { background-color: #724990; } .corporate-purple-variant-300 { background-color: #bc8dd7; } .corporate-purple-variant-100 { background-color: #e0baf1; } /* -------------------------------------------------------------------------- *\ Angle Styles here are used for Angle of a component. // POSITIONING (DISPLAY, FLEX, FLEX ITEM, POSITION, LEFT, TOP, TRANSFORM) // BOX SIZING (WIDTH, HEIGHT, MARGIN, PADDING) // BOX STYLING (OPACITY, BACKGROUND, BOX SHADOW, BORDER, BORDER RADIUS, OVERFLOW) // FONT STYLING (FONT, FONT-FAMILY, FONT-STYLE, FONT-SIZE, LINE-HEIGHT, FONT-WEIGHT) // TEXT STYLING (TEXT-DECORATION, TEXT-TRANSFORM, TEXT-ALIGN, TEXT-SHADOW) // OTHER (TRANSITONS, ANIMATIONS, CURSOR) \* -------------------------------------------------------------------------- */ /*original angle function .renderAngle(@y, @y-value, @x, @x-value, @rotate, @origin) { @{y}: @y-value; @{x}: @x-value; .transform(rotate(@rotate)); .transformOrigin(@origin); }*/ .has-angle { overflow: hidden; /**top & bottom angle settings**/ /**left & right angle settings**/ /*ORIGIN SETTINGS*/ /**Rotation settings**/ /*&.top-right-angle::before { .renderAngle( @y: top, @y-value: -400%, @x: left, @x-value: 0, @rotate: 5deg, @origin: left bottom); } &.top-left-angle::before { .renderAngle(@y: top, @y-value: -400%, @x: right, @x-value: 0, @rotate: -5deg, @origin: right bottom); } &.bottom-right-angle::before { .renderAngle( @y: top, @y-value: 100%, @x: left, @x-value: 0, @rotate: -5deg, @origin: left top); } &.bottom-left-angle::before { .renderAngle( @y: top, @y-value: 100%, @x: right, @x-value: 0, @rotate: 5deg, @origin: right top); } &.left-tapers-down-angle::before { .renderAngle( @y: top, @y-value: 0, @x: right, @x-value: 100%, @rotate: -5deg, @origin: right top); } &.right-tapers-down-angle::before { .renderAngle( @y: top, @y-value: 0, @x: left, @x-value: 100%, @rotate: 5deg, @origin: left top); } &.left-tapers-up-angle::before { .renderAngle( @y: bottom, @y-value: 0, @x: right, @x-value: 100%, @rotate: 5deg, @origin: right bottom); } &.right-tapers-up-angle::before { .renderAngle( @y: bottom, @y-value: 0, @x: left, @x-value: 100%, @rotate: -5deg, @origin: left bottom); }*/ } .has-angle.top-right-angle::before, .has-angle.top-left-angle::before, .has-angle.bottom-right-angle::before, .has-angle.bottom-left-angle::before, .has-angle.left-tapers-down-angle::before, .has-angle.left-tapers-up-angle::before, .has-angle.right-tapers-down-angle::before, .has-angle.right-tapers-up-angle::before { content: ''; display: block; width: 400%; height: 400%; position: absolute; z-index: 0; } .has-angle.top-right-angle::before, .has-angle.top-left-angle::before { top: -400%; } .has-angle.bottom-right-angle::before, .has-angle.bottom-left-angle::before { top: 100%; } .has-angle.left-tapers-down-angle::before, .has-angle.right-tapers-down-angle::before { top: 0; } .has-angle.left-tapers-up-angle::before, .has-angle.right-tapers-up-angle::before { bottom: 0; } .has-angle.top-right-angle::before, .has-angle.bottom-right-angle::before { left: 0; } .has-angle.top-left-angle::before, .has-angle.bottom-left-angle::before { right: 0; } .has-angle.left-tapers-down-angle::before, .has-angle.left-tapers-up-angle::before { right: 100%; } .has-angle.right-tapers-down-angle::before, .has-angle.right-tapers-up-angle::before { left: 100%; } .has-angle.right-tapers-up-angle::before, .has-angle.top-right-angle::before { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; } .has-angle.right-tapers-down-angle::before, .has-angle.bottom-right-angle::before { -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; } .has-angle.bottom-left-angle::before, .has-angle.left-tapers-down-angle::before { -webkit-transform-origin: right top; -ms-transform-origin: right top; transform-origin: right top; } .has-angle.left-tapers-up-angle::before, .has-angle.top-left-angle::before { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; } .has-angle.top-right-angle::before, .has-angle.bottom-left-angle::before, .has-angle.left-tapers-up-angle::before, .has-angle.right-tapers-down-angle::before { -webkit-transform: rotate(5deg); -ms-transform: rotate(5deg); transform: rotate(5deg); } .has-angle.right-tapers-up-angle::before, .has-angle.bottom-right-angle::before, .has-angle.left-tapers-down-angle::before, .has-angle.top-left-angle::before { -webkit-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg); } .core-primary-1, .core-variant-1-500, .core-variant-1-300, .core-primary-2, .core-variant-2-500, .core-variant-2-300, .core-primary-3, .core-variant-3-500, .core-variant-3-300, .theme-accent-color, .core-variant-1-100, .core-variant-2-100, .core-variant-3-100, .light-background, .light-gray-background, .dark-gray-background, .brown-background, .dark-brown-background, .corporate-purple { position: relative; } .core-variant-1-100.has-angle::before, .core-variant-2-100.has-angle::before, .core-variant-3-100.has-angle::before, .light-background.has-angle::before, .light-gray-background.has-angle::before, .dark-gray-background.has-angle::before, .brown-background.has-angle::before, .dark-brown-background.has-angle::before { opacity: 0.4; } .light-background.has-angle { /*&::before { opacity: 0.4; }*/ } .light-background.has-angle.top-right-angle::before, .light-background.has-angle.top-left-angle::before, .light-background.has-angle.bottom-right-angle::before, .light-background.has-angle.bottom-left-angle::before, .light-background.has-angle.left-tapers-up-angle::before, .light-background.has-angle.left-tapers-down-angle::before, .light-background.has-angle.right-tapers-down-angle::before, .light-background.has-angle.right-tapers-up-angle::before { background-color: #ffffff; } .light-gray-background.has-angle { /*&::before { opacity: 0.4; }*/ } .light-gray-background.has-angle.top-right-angle::before, .light-gray-background.has-angle.top-left-angle::before, .light-gray-background.has-angle.bottom-right-angle::before, .light-gray-background.has-angle.bottom-left-angle::before, .light-gray-background.has-angle.left-tapers-up-angle::before, .light-gray-background.has-angle.left-tapers-down-angle::before, .light-gray-background.has-angle.right-tapers-down-angle::before, .light-gray-background.has-angle.right-tapers-up-angle::before { background-color: #ffffff; } .dark-gray-background.has-angle { /*&::before { opacity: 0.4; }*/ } .dark-gray-background.has-angle.top-right-angle::before, .dark-gray-background.has-angle.top-left-angle::before, .dark-gray-background.has-angle.bottom-right-angle::before, .dark-gray-background.has-angle.bottom-left-angle::before, .dark-gray-background.has-angle.left-tapers-up-angle::before, .dark-gray-background.has-angle.left-tapers-down-angle::before, .dark-gray-background.has-angle.right-tapers-down-angle::before, .dark-gray-background.has-angle.right-tapers-up-angle::before { background-color: #b3b3b3; } .brown-background.has-angle { /*&::before { opacity: 0.4; }*/ } .brown-background.has-angle.top-right-angle::before, .brown-background.has-angle.top-left-angle::before, .brown-background.has-angle.bottom-right-angle::before, .brown-background.has-angle.bottom-left-angle::before, .brown-background.has-angle.left-tapers-up-angle::before, .brown-background.has-angle.left-tapers-down-angle::before, .brown-background.has-angle.right-tapers-down-angle::before, .brown-background.has-angle.right-tapers-up-angle::before { background-color: #806c66; } .dark-brown-background.has-angle { /*&::before { opacity: 0.4; }*/ } .dark-brown-background.has-angle.top-right-angle::before, .dark-brown-background.has-angle.top-left-angle::before, .dark-brown-background.has-angle.bottom-right-angle::before, .dark-brown-background.has-angle.bottom-left-angle::before, .dark-brown-background.has-angle.left-tapers-up-angle::before, .dark-brown-background.has-angle.left-tapers-down-angle::before, .dark-brown-background.has-angle.right-tapers-down-angle::before, .dark-brown-background.has-angle.right-tapers-up-angle::before { background-color: #553b33; } .corporate-purple.has-angle.top-right-angle::before, .corporate-purple.has-angle.top-left-angle::before, .corporate-purple.has-angle.bottom-right-angle::before, .corporate-purple.has-angle.bottom-left-angle::before, .corporate-purple.has-angle.left-tapers-up-angle::before, .corporate-purple.has-angle.left-tapers-down-angle::before, .corporate-purple.has-angle.right-tapers-down-angle::before, .corporate-purple.has-angle.right-tapers-up-angle::before { background-color: #83689c; } .corporate-purple-variant-500.has-angle.top-right-angle::before, .corporate-purple-variant-500.has-angle.top-left-angle::before, .corporate-purple-variant-500.has-angle.bottom-right-angle::before, .corporate-purple-variant-500.has-angle.bottom-left-angle::before, .corporate-purple-variant-500.has-angle.left-tapers-up-angle::before, .corporate-purple-variant-500.has-angle.left-tapers-down-angle::before, .corporate-purple-variant-500.has-angle.right-tapers-down-angle::before, .corporate-purple-variant-500.has-angle.right-tapers-up-angle::before { background-color: #9577ac; } .corporate-purple-variant-300.has-angle.top-right-angle::before, .corporate-purple-variant-300.has-angle.top-left-angle::before, .corporate-purple-variant-300.has-angle.bottom-right-angle::before, .corporate-purple-variant-300.has-angle.bottom-left-angle::before, .corporate-purple-variant-300.has-angle.left-tapers-up-angle::before, .corporate-purple-variant-300.has-angle.left-tapers-down-angle::before, .corporate-purple-variant-300.has-angle.right-tapers-down-angle::before, .corporate-purple-variant-300.has-angle.right-tapers-up-angle::before { background-color: #cdaae1; } .corporate-purple-variant-100.has-angle.top-right-angle::before, .corporate-purple-variant-100.has-angle.top-left-angle::before, .corporate-purple-variant-100.has-angle.bottom-right-angle::before, .corporate-purple-variant-100.has-angle.bottom-left-angle::before, .corporate-purple-variant-100.has-angle.left-tapers-up-angle::before, .corporate-purple-variant-100.has-angle.left-tapers-down-angle::before, .corporate-purple-variant-100.has-angle.right-tapers-down-angle::before, .corporate-purple-variant-100.has-angle.right-tapers-up-angle::before { background-color: #e8cbf5; } /* -------------------------------------------------------------------------- *\ COPY STYLES Global styles for all basic copy styling. This should set all basic copy elements at the root level for each, then you can modify for specific components later. \* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- *\ COPY - BODY STYLES \* -------------------------------------------------------------------------- */ body { color: #1b1b1b; font-family: 'TT Norms Pro', sans-serif; font-weight: 500; font-size: 1.7rem; line-height: 1.5; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body .is-invalid { outline: none; border: 3px solid #eb0029; border-radius: 3px; } body .intro { font-size: 1.6rem; } @media screen and (min-width: 768px) { body .intro { font-size: 2rem; } } body .caption { font-size: 1rem; font-style: italic; } @media screen and (min-width: 768px) { body .caption { font-size: 1.2rem; } } body a.tertiary, body a .tertiary, body .tertiary a { font-size: 1.6rem; } @media screen and (min-width: 992px) { body a.tertiary, body a .tertiary, body .tertiary a { font-size: 1.8rem; } } body blockquote { background-color: #b00060; color: #ffffff; padding: 2rem; margin: 1rem; font-size: 2.2rem; font-weight: 700; font-family: 'TT Norms Pro', sans-serif; } @media screen and (min-width: 992px) { body blockquote { margin: 4rem 0; padding: 3rem 2rem; font-size: 2.8rem; } body blockquote .article-detail { margin-left: -10.5rem; } } body blockquote .author { display: block; margin-top: 2rem; font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; } @media screen and (min-width: 992px) { body blockquote .author { font-size: 1.2rem; } } @media screen and (min-width: 992px) { body.article-detail blockquote { margin-left: -10.5rem; } } body.microsite-base.page.basicpage.reese-primary { font-family: 'Lato', sans-serif; } /* -------------------------------------------------------------------------- *\ COPY - BLOCK ELEMENTS \* -------------------------------------------------------------------------- */ p, ul, ol, dl, table, blockquote, figure { padding: 0; margin: 0 0 1.5em; } hr { margin: 2.5rem auto; width: 80%; height: .2rem; background: #cfcfcf; border: none; } section hr { width: 100%; } section .cmp-separator { padding: 2rem 0; } section .cmp-separator hr { margin: auto; } .intro { font-size: 2.4rem; } .disclaimer { color: #4a4a4a; font-size: 1.2rem; } /* -------------------------------------------------------------------------- *\ COPY - MULTI COLUMNS \* -------------------------------------------------------------------------- */ @media screen and (min-width: 768px) { [class*="multi-col-"] { margin: 0 0 1.5em; padding: 0; -webkit-column-count: 2; -ms-column-count: 2; column-count: 2; -webkit-column-gap: 2.5rem; -ms-column-gap: 2.5rem; column-gap: 2.5rem; -webkit-column-rule: 0.2rem solid #f1f1f1; -ms-column-rule: 0.2rem solid #f1f1f1; column-rule: 0.2rem solid #f1f1f1; } } @media screen and (min-width: 992px) { .multi-col-3 { -webkit-column-count: 3; -ms-column-count: 3; column-count: 3; -webkit-column-gap: null; -ms-column-gap: null; column-gap: null; -webkit-column-rule: null; -ms-column-rule: null; column-rule: null; } .multi-col-4 { -webkit-column-count: 4; -ms-column-count: 4; column-count: 4; -webkit-column-gap: null; -ms-column-gap: null; column-gap: null; -webkit-column-rule: null; -ms-column-rule: null; column-rule: null; } } /* -------------------------------------------------------------------------- *\ COPY - BASIC LINK STYLES BUTTONS are located in the Components > Basic > Button file. \* -------------------------------------------------------------------------- */ a { border-bottom: solid 1px #007bbd; font-family: 'TT Norms Pro', sans-serif; color: #007bbd; font-weight: 700; text-decoration: none; } a:hover, a:focus { border: none; color: #333333; } [data-nav='true'] { cursor: pointer; } body.microsite-base.page.basicpage.reese-primary a { font-family: brandon-grotesque, 'Lato', sans-serif; font-weight: 900; } body.one-primary a { font-family: 'Intro', 'TT Norms Pro', sans-serif; } /* -------------------------------------------------------------------------- *\ COPY - BODY STYLES \* -------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { margin: 0 0 .75em; padding: 0; font-family: 'TT Norms Pro', sans-serif; font-weight: 700; } .h1, .h1, .h3, .h4, .h5, .h6 { font-family: 'TT Norms Pro', sans-serif; font-weight: 700; margin: 0 0 .75em; padding: 0; } h1, .h1 { font-size: 3.6rem; font-family: 'Gazpacho', 'TT Norms Pro', sans-serif; font-weight: 900; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } h1 a, .h1 a { font-family: 'Gazpacho', 'TT Norms Pro', sans-serif; font-weight: 900; } @media screen and (min-width: 992px) { h1, .h1 { font-size: 4.8rem; } } h2, .h2 { margin-bottom: .8rem; font-size: 2.8rem; font-family: 'Gazpacho', 'TT Norms Pro', sans-serif; font-weight: 900; } h2 a, .h2 a { font-family: 'Gazpacho', 'TT Norms Pro', sans-serif; font-weight: 900; } @media screen and (min-width: 992px) { h2, .h2 { font-size: 3.6rem; } } h3, .h3 { margin-bottom: 1rem; font-size: 2.4rem; font-family: 'Gazpacho', 'TT Norms Pro', sans-serif; font-weight: 900; } @media screen and (min-width: 992px) { h3, .h3 { font-size: 2.8rem; margin-bottom: 3rem; } } h4, .h4 { font-size: 2rem; margin-bottom: .8rem; } @media screen and (min-width: 992px) { h4, .h4 { font-size: 1.8rem; margin-bottom: 2.5rem; } } h5, .h5 { font-size: 1.8rem; margin-bottom: .7rem; } @media screen and (min-width: 992px) { h5, .h5 { font-size: 1.8rem; margin-bottom: .7rem; } } h6, .h6 { font-size: 1.4rem; margin-bottom: 1rem; text-transform: uppercase; } @media screen and (min-width: 992px) { h6, .h6 { font-size: 1.4rem; letter-spacing: 1px; margin-bottom: .8rem; } } body.microsite-base.page.basicpage.reese-primary h1, body.microsite-base.page.basicpage.reese-primary h2, body.microsite-base.page.basicpage.reese-primary h3, body.microsite-base.page.basicpage.reese-primary h4, body.microsite-base.page.basicpage.reese-primary h5, body.microsite-base.page.basicpage.reese-primary h6, body.microsite-base.page.basicpage.reese-primary .h1, body.microsite-base.page.basicpage.reese-primary .h1, body.microsite-base.page.basicpage.reese-primary .h3, body.microsite-base.page.basicpage.reese-primary .h4, body.microsite-base.page.basicpage.reese-primary .h5, body.microsite-base.page.basicpage.reese-primary .h6 { font-family: brandon-grotesque, 'Lato', sans-serif; font-weight: 700; } body.one-primary h1, body.one-primary h2, body.one-primary h3, body.one-primary h4, body.one-primary h5, body.one-primary h6, body.one-primary .h1, body.one-primary .h1, body.one-primary .h3, body.one-primary .h4, body.one-primary .h5, body.one-primary .h6 { font-family: 'Intro', 'TT Norms Pro', sans-serif; font-weight: 700; text-transform: uppercase; line-height: 1.3; } body.fulfilnutrition-primary h1, body.fulfilnutrition-primary h2, body.fulfilnutrition-primary h3, body.fulfilnutrition-primary h4, body.fulfilnutrition-primary h5, body.fulfilnutrition-primary h6, body.fulfilnutrition-primary .h1, body.fulfilnutrition-primary .h1, body.fulfilnutrition-primary .h3, body.fulfilnutrition-primary .h4, body.fulfilnutrition-primary .h5, body.fulfilnutrition-primary .h6 { font-family: 'TT Norms Pro', sans-serif; font-weight: 900; text-transform: uppercase; } @media screen and (min-width: 992px) { body.one-primary h1, body.one-primary .h1, body.fulfilnutrition-primary h1, body.fulfilnutrition-primary .h1 { font-size: 6.4rem; } } /* -------------------------------------------------------------------------- *\ COPY - LIST STYLES \* -------------------------------------------------------------------------- */ ul, ol { list-style: none; } ul li, ol li { position: relative; z-index: 0; padding: 0 0 0 1em; } ul li:before, ol li:before { position: absolute; z-index: 0; left: 0; top: 0.75em; transform: translate(0, -50%); } ul li + li, ol li + li { margin: .5em 0 0; } ul ul, ol ul, ul ol, ol ol { margin-bottom: 0; margin-top: 1rem; } /* -------------------------------------------------------------------------- *\ COPY - LISTS - UNORDERED \* -------------------------------------------------------------------------- */ ul li:before { width: .4rem; height: .4rem; background: #3c131c; border-radius: .4rem; content: ""; } ul ul li:before { display: block; width: auto; height: auto; border-radius: 0; background: transparent; color: #3c131c; content: "-"; } ul ul ul li:before { -webkit-transform: translate(0, -50%) rotate(45deg); -ms-transform: translate(0, -50%) rotate(45deg); transform: translate(0, -50%) rotate(45deg); } /* -------------------------------------------------------------------------- *\ COPY - LISTS - ORDERED \* -------------------------------------------------------------------------- */ ol { counter-reset: r2i-cl; } ol li { counter-increment: r2i-cl; padding: 0 0 0 1.2em; } ol li:before { color: #3c131c; font-weight: 900; content: counter(r2i-cl, decimal) "."; top: .72em; } ol ol li:before { content: counter(r2i-cl, lower-alpha) "."; } ol ol ol li:before { content: counter(r2i-cl, lower-roman) "."; } /* -------------------------------------------------------------------------- *\ COPY - LISTS - DEFINITION \* -------------------------------------------------------------------------- */ dl dt { font-size: 1.8rem; line-height: null; font-weight: bold; } dl dt ~ dt { margin: .5em 0 0; } dl dd { padding: 0 0 0 1em; } /* -------------------------------------------------------------------------- *\ COPY - ALIGNMENTS \* -------------------------------------------------------------------------- */ .ta-left { text-align: left !important; } .ta-center { text-align: center !important; } .ta-right { text-align: right !important; } /* -------------------------------------------------------------------------- *\ NAVIGATION RESET This removes the styling from our basic list styling. \* -------------------------------------------------------------------------- */ nav ul, nav ol { margin: 0; list-style: none; } nav li { position: static; padding: 0; } nav li:before { display: none; } nav li + li { margin: 0; } nav a { text-decoration: none; } /* -------------------------------------------------------------------------- *\ THE SITES HEADER Make sure to keep the header within the body so that we can use
in other places as well and style it differently \* -------------------------------------------------------------------------- */ html { scroll-behavior: smooth; } body > header, .cmp-header { /* -------------------------- *\ RELATIVE HEADER .position(relative, 1000); \* -------------------------- */ /* -------------------------- *\ FIXED HEADER .position(fixed, 1000, @left: 0, @top: 0); width: 100%; \* -------------------------- */ /* -------------------------- *\ STICKY HEADER \* -------------------------- */ position: -webkit-sticky; position: sticky; z-index: 1000; top: 0; width: 100%; padding: 2rem 0; background: #ffffff; /* -------------------------- *\ HEADER LAYOUT OPTIONS \* -------------------------- */ /* ------------------ *\ Toggle Only \* ------------------ */ /* ------------------ *\ Main Nav Only \* ------------------ */ /* ------------------ *\ Main Nav w/ Utility Nav \* ------------------ */ /* ------------------ *\ Main Nav w/ Utility Bar \* ------------------ */ /* -------------------------- *\ LOGO OPTIONS We want to use SVG for our logos when available. Choose which option below is the most relevant to your site. \* -------------------------- */ /* ------------------ *\ SVG Logo @import 'header/logo/_svg'; \* ------------------ */ /* -------------------------------------------------------------------------- *\ SVG LOGO W/ TAGLINE \* -------------------------------------------------------------------------- */ /* ------------------ *\ Text Logo @import 'header/logo/_text'; \* ------------------ */ /* ------------------ *\ IMG Logo @import 'header/logo/_img'; @import 'header/logo/_img-w-tagline'; \* ------------------ */ /* -------------------------- *\ NAVIGATIONS OPTIONS \* -------------------------- */ /* ------------------ *\ Main Nav - Toggle Only \* ------------------ */ /* ------------------ *\ Main Nav - Root Only \* ------------------ */ /* ------------------ *\ Main Nav - With Dropodown \* ------------------ */ /* ------------------ *\ Medga Menu \* ------------------ */ /* ------------------ *\ Utility Navigation \* ------------------ */ /* -------------------------- *\ SEARCH OPTIONS \* -------------------------- */ /* ------------------ *\ Search Inline \* ------------------ */ /* ------------------ *\ Search Toggle \* ------------------ */ /* ------------------ *\ Search Dialog - does not require a css file to be imported \* ------------------ */ } body > header.t-only, .cmp-header.t-only { /* -------------------------------------------------------------------------- *\ TOGGLE ONLY \* -------------------------------------------------------------------------- */ } body > header.t-only > div, .cmp-header.t-only > div { position: static; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: space-between; align-items: center; align-content: center; flex-flow: row wrap; max-width: 1600px; margin: 0 auto; padding: 0 2.5rem; width: 100%; } @media screen and (min-width: 768px) { body > header.t-only > div, .cmp-header.t-only > div { width: 95%; } } @media screen and (min-width: 992px) { body > header.t-only > div, .cmp-header.t-only > div { width: 90%; } } @media screen and (min-width: 1200px) { body > header.t-only > div, .cmp-header.t-only > div { width: 85%; } } body > header.mn-only, .cmp-header.mn-only { /* -------------------------------------------------------------------------- *\ MAIN NAV ONLY \* -------------------------------------------------------------------------- */ } body > header.mn-only > div, .cmp-header.mn-only > div { position: static; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: space-between; align-items: center; align-content: center; flex-flow: row nowrap; max-width: 1600px; margin: 0 auto; padding: 0 2.5rem; width: 100%; } @media screen and (min-width: 768px) { body > header.mn-only > div, .cmp-header.mn-only > div { width: 95%; } } @media screen and (min-width: 992px) { body > header.mn-only > div, .cmp-header.mn-only > div { width: 90%; } } @media screen and (min-width: 1200px) { body > header.mn-only > div, .cmp-header.mn-only > div { width: 85%; } } body > header.mn-w-un, .cmp-header.mn-w-un { /* -------------------------------------------------------------------------- *\ MAIN NAV W/ UTILITY BAR \* -------------------------------------------------------------------------- */ } body > header.mn-w-un > div, .cmp-header.mn-w-un > div { position: static; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: space-between; align-items: center; align-content: center; flex-flow: row nowrap; max-width: 1600px; margin: 0 auto; padding: 0 2.5rem; width: 100%; } @media screen and (min-width: 768px) { body > header.mn-w-un > div, .cmp-header.mn-w-un > div { width: 95%; } } @media screen and (min-width: 992px) { body > header.mn-w-un > div, .cmp-header.mn-w-un > div { width: 90%; } } @media screen and (min-width: 1200px) { body > header.mn-w-un > div, .cmp-header.mn-w-un > div { width: 85%; } } @media screen and (min-width: 992px) { body > header.mn-w-un > div, .cmp-header.mn-w-un > div { align-content: stretch; align-items: stretch; } } body > header.mn-w-un nav, .cmp-header.mn-w-un nav { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: flex-start; align-items: stretch; align-content: stretch; flex-flow: column nowrap; overflow: auto; } @media screen and (min-width: 992px) { body > header.mn-w-un nav, .cmp-header.mn-w-un nav { justify-content: space-between; overflow: visible; } body > header.mn-w-un nav > ul:first-child, .cmp-header.mn-w-un nav > ul:first-child { order: 1; } body > header.mn-w-un nav > ul:last-child, .cmp-header.mn-w-un nav > ul:last-child { order: 0; } body > header.mn-w-un nav ul ul > li:nth-child(-n + 2), .cmp-header.mn-w-un nav ul ul > li:nth-child(-n + 2) { display: none; } } body > header.mn-w-ub, .cmp-header.mn-w-ub { /* -------------------------------------------------------------------------- *\ MAIN NAV W/ UTILITY BAR \* -------------------------------------------------------------------------- */ padding: 1.5rem 0; } @media screen and (min-width: 992px) { body > header.mn-w-ub, .cmp-header.mn-w-ub { padding: 5rem 0 0; } } body > header.mn-w-ub > div, .cmp-header.mn-w-ub > div { position: static; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: space-between; align-items: center; align-content: center; flex-flow: row wrap; max-width: 1600px; margin: 0 auto; padding: 0 2.5rem; width: 100%; } @media screen and (min-width: 768px) { body > header.mn-w-ub > div, .cmp-header.mn-w-ub > div { width: 95%; } } @media screen and (min-width: 992px) { body > header.mn-w-ub > div, .cmp-header.mn-w-ub > div { width: 90%; } } @media screen and (min-width: 1200px) { body > header.mn-w-ub > div, .cmp-header.mn-w-ub > div { width: 85%; } } body > header.mn-w-ub > div .utility-bar, .cmp-header.mn-w-ub > div .utility-bar { max-width: 1600px; width: 100%; } @media screen and (min-width: 768px) { body > header.mn-w-ub > div .utility-bar, .cmp-header.mn-w-ub > div .utility-bar { width: 95%; } } @media screen and (min-width: 992px) { body > header.mn-w-ub > div .utility-bar, .cmp-header.mn-w-ub > div .utility-bar { width: 90%; } } @media screen and (min-width: 1200px) { body > header.mn-w-ub > div .utility-bar, .cmp-header.mn-w-ub > div .utility-bar { width: 85%; } } @media screen and (min-width: 992px) { body > header.mn-w-ub > div .utility-bar, .cmp-header.mn-w-ub > div .utility-bar { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: space-between; align-items: center; align-content: center; flex-flow: row nowrap; position: absolute; z-index: 0; left: 50%; top: 0; transform: translate(-50%, 0); padding: 1rem 2.5rem; background: #f0f0f0; } body > header.mn-w-ub > div .utility-bar:before, .cmp-header.mn-w-ub > div .utility-bar:before { position: absolute; z-index: -1; left: 50%; top: 0; transform: translate(-50%, 0); width: 100vw; height: 100%; background: #f0f0f0; content: ""; } } body > header .logo, .cmp-header .logo { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: space-between; align-items: center; align-content: center; flex-flow: row nowrap; text-decoration: none; } body > header .logo svg, .cmp-header .logo svg { width: 5rem; height: auto; margin: 0 1rem 0 0; fill: currentColor; } @media screen and (min-width: 768px) { body > header .logo svg, .cmp-header .logo svg { width: 6rem; } } @media screen and (min-width: 1200px) { body > header .logo svg, .cmp-header .logo svg { width: 7.5rem; margin: 0 1.5rem 0 0; } } body > header .logo small, .cmp-header .logo small { display: none; font-size: 1.8rem; line-height: 1; } @media screen and (min-width: 992px) { body > header .logo small, .cmp-header .logo small { display: block; } } body > header .logo:hover, .cmp-header .logo:hover, body > header .logo:focus, .cmp-header .logo:focus { text-decoration: underline; } body > header.t-only, .cmp-header.t-only { /* -------------------------------------------------------------------------- *\ MAIN NAVIGATION - TOGGLE ONLY \* -------------------------------------------------------------------------- */ } body > header.t-only .toggle, .cmp-header.t-only .toggle { position: relative; z-index: 100; width: 3.5rem; height: 2.4rem; cursor: pointer; } body > header.t-only .toggle .bar, .cmp-header.t-only .toggle .bar { display: block; position: absolute; z-index: 100; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 0.4rem; width: 100%; background: #1b1b1b; transition: transform 0.25s; } body > header.t-only .toggle .bar:nth-child(2), .cmp-header.t-only .toggle .bar:nth-child(2) { -webkit-transform: translate(-50%, -1.2rem); -ms-transform: translate(-50%, -1.2rem); transform: translate(-50%, -1.2rem); } body > header.t-only .toggle .bar:nth-child(3), .cmp-header.t-only .toggle .bar:nth-child(3) { -webkit-transform: translate(-50%, 0.8rem); -ms-transform: translate(-50%, 0.8rem); transform: translate(-50%, 0.8rem); } body > header.t-only nav, .cmp-header.t-only nav { position: absolute; z-index: 1; left: 100%; top: 100%; width: 0; height: calc(100vh - 11.5rem); background: #f1f1f1; overflow: hidden; transition: width .25s linear, transform .25s ease-out; } body > header.t-only nav ul, .cmp-header.t-only nav ul { text-align: center; } body > header.t-only nav li + li, .cmp-header.t-only nav li + li { border-top: 0.2rem solid #cccccc; } body > header.t-only nav a, .cmp-header.t-only nav a, body > header.t-only nav button, .cmp-header.t-only nav button { display: block; padding: 2rem; } body > header.t-only nav a:hover, .cmp-header.t-only nav a:hover, body > header.t-only nav button:hover, .cmp-header.t-only nav button:hover, body > header.t-only nav a:focus, .cmp-header.t-only nav a:focus, body > header.t-only nav button:focus, .cmp-header.t-only nav button:focus { text-decoration: underline; } body > header.t-only input[type="checkbox"], .cmp-header.t-only input[type="checkbox"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip: rect(0, 0, 0, 0); } body > header.t-only input[type="checkbox"]:checked + .toggle .bar:nth-child(1), .cmp-header.t-only input[type="checkbox"]:checked + .toggle .bar:nth-child(1) { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } body > header.t-only input[type="checkbox"]:checked + .toggle .bar:nth-child(2), .cmp-header.t-only input[type="checkbox"]:checked + .toggle .bar:nth-child(2) { -webkit-transform: translate(-50%, -50%) rotate(45deg); -ms-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); } body > header.t-only input[type="checkbox"]:checked + .toggle .bar:nth-child(3), .cmp-header.t-only input[type="checkbox"]:checked + .toggle .bar:nth-child(3) { -webkit-transform: translate(-50%, -50%) rotate(-45deg); -ms-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg); } body > header.t-only input[type="checkbox"]:checked ~ nav, .cmp-header.t-only input[type="checkbox"]:checked ~ nav { -webkit-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); transform: translate(-100%, 0); width: 100vw; } body > header.mn-root, .cmp-header.mn-root { /* -------------------------------------------------------------------------- *\ MAIN NAVIGATION - ROOT ONLY \* -------------------------------------------------------------------------- */ } body > header.mn-root .toggle, .cmp-header.mn-root .toggle { position: relative; z-index: 100; width: 3.5rem; height: 2.4rem; cursor: pointer; } body > header.mn-root .toggle .bar, .cmp-header.mn-root .toggle .bar { display: block; position: absolute; z-index: 100; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 0.4rem; width: 100%; background: #1b1b1b; transition: transform 0.25s; } body > header.mn-root .toggle .bar:nth-child(2), .cmp-header.mn-root .toggle .bar:nth-child(2) { -webkit-transform: translate(-50%, -1.2rem); -ms-transform: translate(-50%, -1.2rem); transform: translate(-50%, -1.2rem); } body > header.mn-root .toggle .bar:nth-child(3), .cmp-header.mn-root .toggle .bar:nth-child(3) { -webkit-transform: translate(-50%, 0.8rem); -ms-transform: translate(-50%, 0.8rem); transform: translate(-50%, 0.8rem); } @media screen and (min-width: 992px) { body > header.mn-root .toggle, .cmp-header.mn-root .toggle { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip: rect(0, 0, 0, 0); } } @media screen and (max-width: 991.9px) { body > header.mn-root nav, .cmp-header.mn-root nav { position: absolute; z-index: 1; left: 100%; top: 100%; width: 100vw; height: calc(100vh - 11.5rem); background: #f1f1f1; transition: transform 0.25s ease-out; } body > header.mn-root nav ul, .cmp-header.mn-root nav ul { text-align: center; } body > header.mn-root nav li + li, .cmp-header.mn-root nav li + li { border-top: 0.2rem solid #cccccc; } body > header.mn-root nav a, .cmp-header.mn-root nav a, body > header.mn-root nav button, .cmp-header.mn-root nav button { display: block; padding: 2rem; } body > header.mn-root nav a:hover, .cmp-header.mn-root nav a:hover, body > header.mn-root nav button:hover, .cmp-header.mn-root nav button:hover, body > header.mn-root nav a:focus, .cmp-header.mn-root nav a:focus, body > header.mn-root nav button:focus, .cmp-header.mn-root nav button:focus { text-decoration: underline; } body > header.mn-root nav button, .cmp-header.mn-root nav button { width: 100%; text-align: center; } } @media screen and (min-width: 992px) { body > header.mn-root nav ul, .cmp-header.mn-root nav ul { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: flex-end; align-items: center; align-content: center; flex-flow: row wrap; font-weight: bold; } body > header.mn-root nav li, .cmp-header.mn-root nav li { padding: 0 0 0 2rem; } body > header.mn-root nav a, .cmp-header.mn-root nav a { display: block; } } @media screen and (min-width: 1200px) { body > header.mn-root nav li, .cmp-header.mn-root nav li { padding: 0 0 0 2.5rem; } } body > header.mn-root input[type="checkbox"], .cmp-header.mn-root input[type="checkbox"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip: rect(0, 0, 0, 0); } body > header.mn-root input[type="checkbox"]:checked + .toggle .bar:nth-child(1), .cmp-header.mn-root input[type="checkbox"]:checked + .toggle .bar:nth-child(1) { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } body > header.mn-root input[type="checkbox"]:checked + .toggle .bar:nth-child(2), .cmp-header.mn-root input[type="checkbox"]:checked + .toggle .bar:nth-child(2) { -webkit-transform: translate(-50%, -50%) rotate(45deg); -ms-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); } body > header.mn-root input[type="checkbox"]:checked + .toggle .bar:nth-child(3), .cmp-header.mn-root input[type="checkbox"]:checked + .toggle .bar:nth-child(3) { -webkit-transform: translate(-50%, -50%) rotate(-45deg); -ms-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg); } @media screen and (max-width: 991.9px) { body > header.mn-root input[type="checkbox"]:checked ~ nav, .cmp-header.mn-root input[type="checkbox"]:checked ~ nav { -webkit-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); transform: translate(-100%, 0); } } body > header.mn-w-dd, .cmp-header.mn-w-dd { /* -------------------------------------------------------------------------- *\ MAIN NAVIGATION - WITH DROPDOWNS \* -------------------------------------------------------------------------- */ } body > header.mn-w-dd .toggle, .cmp-header.mn-w-dd .toggle { position: relative; z-index: 100; width: 3.5rem; height: 2.4rem; cursor: pointer; } body > header.mn-w-dd .toggle .bar, .cmp-header.mn-w-dd .toggle .bar { display: block; position: absolute; z-index: 100; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 0.4rem; width: 100%; background: #1b1b1b; transition: transform 0.25s; } body > header.mn-w-dd .toggle .bar:nth-child(2), .cmp-header.mn-w-dd .toggle .bar:nth-child(2) { -webkit-transform: translate(-50%, -1.2rem); -ms-transform: translate(-50%, -1.2rem); transform: translate(-50%, -1.2rem); } body > header.mn-w-dd .toggle .bar:nth-child(3), .cmp-header.mn-w-dd .toggle .bar:nth-child(3) { -webkit-transform: translate(-50%, 0.8rem); -ms-transform: translate(-50%, 0.8rem); transform: translate(-50%, 0.8rem); } @media screen and (min-width: 992px) { body > header.mn-w-dd .toggle, .cmp-header.mn-w-dd .toggle { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip: rect(0, 0, 0, 0); } } @media screen and (max-width: 991.9px) { body > header.mn-w-dd nav, .cmp-header.mn-w-dd nav { position: absolute; z-index: 1; left: 100%; top: 100%; width: 100vw; height: calc(100vh - 11.5rem); background: #f1f1f1; transition: transform 0.25s ease-out; } body > header.mn-w-dd nav ul, .cmp-header.mn-w-dd nav ul { width: 100%; background: #f1f1f1; } body > header.mn-w-dd nav ul ul, .cmp-header.mn-w-dd nav ul ul { display: none; position: absolute; z-index: 100; left: 100%; top: 0; width: 100%; height: 100%; transition: transform 0.25s; } body > header.mn-w-dd nav ul ul > li:nth-child(-n + 2), .cmp-header.mn-w-dd nav ul ul > li:nth-child(-n + 2) { font-weight: bold; } body > header.mn-w-dd nav li, .cmp-header.mn-w-dd nav li { position: static; } body > header.mn-w-dd nav li + li, .cmp-header.mn-w-dd nav li + li { border-top: 0.2rem solid #cccccc; } body > header.mn-w-dd nav a, .cmp-header.mn-w-dd nav a, body > header.mn-w-dd nav label, .cmp-header.mn-w-dd nav label, body > header.mn-w-dd nav button, .cmp-header.mn-w-dd nav button { display: block; padding: 2rem; } body > header.mn-w-dd nav a:hover, .cmp-header.mn-w-dd nav a:hover, body > header.mn-w-dd nav label:hover, .cmp-header.mn-w-dd nav label:hover, body > header.mn-w-dd nav button:hover, .cmp-header.mn-w-dd nav button:hover, body > header.mn-w-dd nav a:focus, .cmp-header.mn-w-dd nav a:focus, body > header.mn-w-dd nav label:focus, .cmp-header.mn-w-dd nav label:focus, body > header.mn-w-dd nav button:focus, .cmp-header.mn-w-dd nav button:focus { text-decoration: underline; } body > header.mn-w-dd nav label, .cmp-header.mn-w-dd nav label { display: block; position: relative; z-index: 0; padding: 2rem; } body > header.mn-w-dd nav label .fa-chevron-right, .cmp-header.mn-w-dd nav label .fa-chevron-right { position: absolute; z-index: 100; left: calc(100% - 2.5rem); top: 50%; transform: translate(-100%, -50%); } body > header.mn-w-dd nav .toggle-text, .cmp-header.mn-w-dd nav .toggle-text { display: none; } body > header.mn-w-dd nav a:not(:only-child), .cmp-header.mn-w-dd nav a:not(:only-child) { display: none; } body > header.mn-w-dd nav input[type="checkbox"]:focus + label, .cmp-header.mn-w-dd nav input[type="checkbox"]:focus + label { text-decoration: underline; } body > header.mn-w-dd nav input[type="checkbox"]:checked ~ ul, .cmp-header.mn-w-dd nav input[type="checkbox"]:checked ~ ul { display: block; -webkit-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); transform: translate(-100%, 0); } } @media screen and (min-width: 992px) { body > header.mn-w-dd nav ul, .cmp-header.mn-w-dd nav ul { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: flex-end; align-items: center; align-content: center; flex-flow: row wrap; font-weight: bold; /*-----------------------*\ The &:first-child is only necessary when used with a utility navigation \*-----------------------*/ } body > header.mn-w-dd nav ul ul, .cmp-header.mn-w-dd nav ul ul { display: none; position: absolute; z-index: 100; left: 50%; top: 100%; transform: translate(-50%, 0); flex-flow: column nowrap; min-width: 15rem; background: #f0f0f0; font-weight: normal; text-align: center; } body > header.mn-w-dd nav ul label, .cmp-header.mn-w-dd nav ul label { display: none; position: absolute; z-index: 100; left: 100%; top: 100%; transform: translate(-50%, -50%); padding: 1rem 1.5rem; border: 0.2rem solid #1b1b1b; background: #1b1b1b; color: #ffffff; font-size: 1.4rem; line-height: 1; font-weight: normal; white-space: nowrap; } body > header.mn-w-dd nav ul input[type="checkbox"]:focus + label, .cmp-header.mn-w-dd nav ul input[type="checkbox"]:focus + label { display: block; } body > header.mn-w-dd nav ul input[type="checkbox"]:checked + label, .cmp-header.mn-w-dd nav ul input[type="checkbox"]:checked + label { display: none; } body > header.mn-w-dd nav ul input[type="checkbox"]:checked ~ ul, .cmp-header.mn-w-dd nav ul input[type="checkbox"]:checked ~ ul { display: block; } body > header.mn-w-dd nav a, .cmp-header.mn-w-dd nav a { display: block; padding: 2rem 0; } body > header.mn-w-dd nav a:hover, .cmp-header.mn-w-dd nav a:hover, body > header.mn-w-dd nav a:focus, .cmp-header.mn-w-dd nav a:focus { text-decoration: underline; } body > header.mn-w-dd nav li, .cmp-header.mn-w-dd nav li { position: relative; z-index: 0; } body > header.mn-w-dd nav li + li, .cmp-header.mn-w-dd nav li + li { margin: 0 0 0 1.25rem; } body > header.mn-w-dd nav li li, .cmp-header.mn-w-dd nav li li { margin: 0; } body > header.mn-w-dd nav li li + li, .cmp-header.mn-w-dd nav li li + li { margin: 0; border-top: 0.1rem solid #f1f1f1; white-space: nowrap; } body > header.mn-w-dd nav li li a, .cmp-header.mn-w-dd nav li li a { padding: 1rem 2rem; } body > header.mn-w-dd nav li:hover ul, .cmp-header.mn-w-dd nav li:hover ul { display: block; } } @media screen and (min-width: 1200px) { body > header.mn-w-dd nav li + li, .cmp-header.mn-w-dd nav li + li { margin: 0 0 0 2.5rem; } } body > header.mn-w-dd input[type="checkbox"], .cmp-header.mn-w-dd input[type="checkbox"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip: rect(0, 0, 0, 0); } body > header.mn-w-dd input[type="checkbox"]:checked + .toggle .bar:nth-child(1), .cmp-header.mn-w-dd input[type="checkbox"]:checked + .toggle .bar:nth-child(1) { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } body > header.mn-w-dd input[type="checkbox"]:checked + .toggle .bar:nth-child(2), .cmp-header.mn-w-dd input[type="checkbox"]:checked + .toggle .bar:nth-child(2) { -webkit-transform: translate(-50%, -50%) rotate(45deg); -ms-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); } body > header.mn-w-dd input[type="checkbox"]:checked + .toggle .bar:nth-child(3), .cmp-header.mn-w-dd input[type="checkbox"]:checked + .toggle .bar:nth-child(3) { -webkit-transform: translate(-50%, -50%) rotate(-45deg); -ms-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg); } @media screen and (max-width: 991.9px) { body > header.mn-w-dd input[type="checkbox"]:checked ~ nav, .cmp-header.mn-w-dd input[type="checkbox"]:checked ~ nav { -webkit-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); transform: translate(-100%, 0); } } body > header.mm, .cmp-header.mm { /* -------------------------------------------------------------------------- *\ MEGA MENU \* -------------------------------------------------------------------------- */ } body > header.mm .toggle, .cmp-header.mm .toggle { position: relative; z-index: 100; width: 3.5rem; height: 2.4rem; cursor: pointer; } body > header.mm .toggle .bar, .cmp-header.mm .toggle .bar { display: block; position: absolute; z-index: 100; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 0.4rem; width: 100%; background: #1b1b1b; transition: transform 0.25s; } body > header.mm .toggle .bar:nth-child(2), .cmp-header.mm .toggle .bar:nth-child(2) { -webkit-transform: translate(-50%, -1.2rem); -ms-transform: translate(-50%, -1.2rem); transform: translate(-50%, -1.2rem); } body > header.mm .toggle .bar:nth-child(3), .cmp-header.mm .toggle .bar:nth-child(3) { -webkit-transform: translate(-50%, 0.8rem); -ms-transform: translate(-50%, 0.8rem); transform: translate(-50%, 0.8rem); } @media screen and (min-width: 992px) { body > header.mm .toggle, .cmp-header.mm .toggle { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip: rect(0, 0, 0, 0); } } @media screen and (max-width: 991.9px) { body > header.mm .mega, .cmp-header.mm .mega { position: absolute; z-index: 1; left: 100%; top: 100%; width: 100vw; height: calc(100vh - 11.5rem); background: #f1f1f1; transition: transform 0.25s ease-out; } body > header.mm .mega ul, .cmp-header.mm .mega ul { width: 100%; background: #f1f1f1; } body > header.mm .mega li, .cmp-header.mm .mega li { position: static; } body > header.mm .mega li + li, .cmp-header.mm .mega li + li { border-top: 0.2rem solid #cccccc; } body > header.mm .mega li > div, .cmp-header.mm .mega li > div { position: absolute; z-index: 100; left: 100%; top: 0; width: 100%; height: 100%; transition: transform 0.25s; } body > header.mm .mega li > div .row, .cmp-header.mm .mega li > div .row { padding: 0; margin: 0; } body > header.mm .mega li > div ul > li:nth-child(-n + 2), .cmp-header.mm .mega li > div ul > li:nth-child(-n + 2) { font-weight: bold; } body > header.mm .mega a, .cmp-header.mm .mega a, body > header.mm .mega label, .cmp-header.mm .mega label, body > header.mm .mega button, .cmp-header.mm .mega button { display: block; padding: 2rem; } body > header.mm .mega a:hover, .cmp-header.mm .mega a:hover, body > header.mm .mega label:hover, .cmp-header.mm .mega label:hover, body > header.mm .mega button:hover, .cmp-header.mm .mega button:hover, body > header.mm .mega a:focus, .cmp-header.mm .mega a:focus, body > header.mm .mega label:focus, .cmp-header.mm .mega label:focus, body > header.mm .mega button:focus, .cmp-header.mm .mega button:focus { text-decoration: underline; } body > header.mm .mega label, .cmp-header.mm .mega label { display: block; position: relative; z-index: 0; padding: 2rem; } body > header.mm .mega label .fa-chevron-right, .cmp-header.mm .mega label .fa-chevron-right { position: absolute; z-index: 100; left: calc(100% - 2.5rem); top: 50%; transform: translate(-100%, -50%); } body > header.mm .mega .toggle-text, .cmp-header.mm .mega .toggle-text { display: none; } body > header.mm .mega a:not(:only-child), .cmp-header.mm .mega a:not(:only-child) { display: none; } body > header.mm .mega input[type="checkbox"]:checked ~ ul, .cmp-header.mm .mega input[type="checkbox"]:checked ~ ul { -webkit-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); transform: translate(-100%, 0); } } @media screen and (min-width: 992px) { body > header.mm .mega > ul, .cmp-header.mm .mega > ul { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: flex-end; align-items: center; align-content: center; flex-flow: row wrap; font-weight: bold; } body > header.mm .mega > ul label, .cmp-header.mm .mega > ul label { display: none; position: absolute; z-index: 100; left: 100%; top: 100%; transform: translate(-50%, -50%); padding: 1rem 1.5rem; border: 0.2rem solid #1b1b1b; background: #1b1b1b; color: #ffffff; font-size: 1.4rem; line-height: 1; font-weight: normal; white-space: nowrap; } body > header.mm .mega > ul input[type="checkbox"]:focus + label, .cmp-header.mm .mega > ul input[type="checkbox"]:focus + label { display: block; } body > header.mm .mega > ul input[type="checkbox"]:checked + label, .cmp-header.mm .mega > ul input[type="checkbox"]:checked + label { display: none; } body > header.mm .mega > ul input[type="checkbox"]:checked ~ div, .cmp-header.mm .mega > ul input[type="checkbox"]:checked ~ div { display: block; } body > header.mm .mega > ul > li > a, .cmp-header.mm .mega > ul > li > a { display: block; padding: 4rem 0; } body > header.mm .mega li, .cmp-header.mm .mega li { position: static; } body > header.mm .mega li + li, .cmp-header.mm .mega li + li { margin: 0 0 0 1.25rem; } body > header.mm .mega li li, .cmp-header.mm .mega li li { margin: 0; } body > header.mm .mega li li + li, .cmp-header.mm .mega li li + li { margin: 0; border-top: 0.1rem solid #f1f1f1; white-space: nowrap; } body > header.mm .mega li li a, .cmp-header.mm .mega li li a { padding: 1rem 2rem; } body > header.mm .mega li > a, .cmp-header.mm .mega li > a { display: block; padding: 2rem 0; } body > header.mm .mega li > a:hover, .cmp-header.mm .mega li > a:hover, body > header.mm .mega li > a:focus, .cmp-header.mm .mega li > a:focus { text-decoration: underline; } body > header.mm .mega li > div, .cmp-header.mm .mega li > div { display: none; position: absolute; z-index: 100; left: 0; top: 100%; flex-flow: column nowrap; width: 100%; padding: 2.5rem; background: #f0f0f0; font-weight: normal; } body > header.mm .mega li > div > div, .cmp-header.mm .mega li > div > div { max-width: 1600px; margin: 0 auto; padding: 0 2.5rem; width: 100%; } body > header.mm .mega li:hover > div, .cmp-header.mm .mega li:hover > div { display: block; } } @media screen and (min-width: 992px) and screen and (min-width: 768px) { body > header.mm .mega li > div > div, .cmp-header.mm .mega li > div > div { width: 95%; } } @media screen and (min-width: 992px) and screen and (min-width: 992px) { body > header.mm .mega li > div > div, .cmp-header.mm .mega li > div > div { width: 90%; } } @media screen and (min-width: 992px) and screen and (min-width: 1200px) { body > header.mm .mega li > div > div, .cmp-header.mm .mega li > div > div { width: 85%; } } @media screen and (min-width: 1200px) { body > header.mm .mega li + li, .cmp-header.mm .mega li + li { margin: 0 0 0 2.5rem; } } body > header.mm input[type="checkbox"], .cmp-header.mm input[type="checkbox"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip: rect(0, 0, 0, 0); } body > header.mm input[type="checkbox"]:checked + .toggle .bar:nth-child(1), .cmp-header.mm input[type="checkbox"]:checked + .toggle .bar:nth-child(1) { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } body > header.mm input[type="checkbox"]:checked + .toggle .bar:nth-child(2), .cmp-header.mm input[type="checkbox"]:checked + .toggle .bar:nth-child(2) { -webkit-transform: translate(-50%, -50%) rotate(45deg); -ms-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); } body > header.mm input[type="checkbox"]:checked + .toggle .bar:nth-child(3), .cmp-header.mm input[type="checkbox"]:checked + .toggle .bar:nth-child(3) { -webkit-transform: translate(-50%, -50%) rotate(-45deg); -ms-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg); } @media screen and (max-width: 991.9px) { body > header.mm input[type="checkbox"]:checked ~ nav, .cmp-header.mm input[type="checkbox"]:checked ~ nav { -webkit-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); transform: translate(-100%, 0); } } body > header.un, .cmp-header.un { /* -------------------------------------------------------------------------- *\ UTILITY NAVIGATION \* -------------------------------------------------------------------------- */ } @media screen and (max-width: 991.9px) { body > header.un nav ul.util, .cmp-header.un nav ul.util { border-top: 0.2rem solid #cccccc; } } @media screen and (min-width: 992px) { body > header.un nav ul.util, .cmp-header.un nav ul.util { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: flex-end; align-items: center; align-content: center; flex-flow: row wrap; font-weight: bold; font-size: .75em; } body > header.un nav ul.util li + li, .cmp-header.un nav ul.util li + li { margin: 0 0 0 1.5rem; } body > header.un nav ul.util a, .cmp-header.un nav ul.util a { padding: 0; } body > header.un nav ul.util a:hover, .cmp-header.un nav ul.util a:hover, body > header.un nav ul.util a:focus, .cmp-header.un nav ul.util a:focus { text-decoration: underline; } } body > header.si, .cmp-header.si { /* -------------------------------------------------------------------------- *\ SEARCH - INLINE \* -------------------------------------------------------------------------- */ } body > header.si form.search, .cmp-header.si form.search { padding: 2rem; border: none; border-top: 2px solid #cccccc; } @media screen and (min-width: 992px) { body > header.si form.search, .cmp-header.si form.search { padding: 0; border-top: none; } } body > header.si form.search [class*="btn-"], .cmp-header.si form.search [class*="btn-"] { margin: 0; padding: 0.5rem 1.5rem; border: none; } body > header.si form.search label, .cmp-header.si form.search label { padding: 0.5rem 1.5rem 0 0; } body > header.si form.search input:not([type="checkbox"]):not([type="radio"]), .cmp-header.si form.search input:not([type="checkbox"]):not([type="radio"]) { padding: 0.5rem; background: #ffffff; border: none; color: #333333; } body > header.st, .cmp-header.st { /* -------------------------------------------------------------------------- *\ SEARCH - TOGGLE \* -------------------------------------------------------------------------- */ } body > header.st #searchToggle:checked ~ form, .cmp-header.st #searchToggle:checked ~ form { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; } body > header.st .search, .cmp-header.st .search { position: absolute; z-index: 100; top: 0; right: 0; transform: translate(0, -100%); width: 100%; height: 100%; background: #ffffff; border: none; opacity: 0; transition: transform .25s, opacity .25s; } body > header.st .search > div, .cmp-header.st .search > div { max-width: 1600px; margin: 0 auto; padding: 0 2.5rem; width: 100%; } @media screen and (min-width: 768px) { body > header.st .search > div, .cmp-header.st .search > div { width: 95%; } } @media screen and (min-width: 992px) { body > header.st .search > div, .cmp-header.st .search > div { width: 90%; } } @media screen and (min-width: 1200px) { body > header.st .search > div, .cmp-header.st .search > div { width: 85%; } } /* -------------------------------------------------------------------------- *\ THE SITES FOOTER Make sure to keep the footer within the body so that we can use