@charset "UTF-8";
/*------------------------------------*\ #TABLE OF CONTENTS \*------------------------------------*/
/** ABSTRACTS..............................Declarations of Sass variables & mixins ANIMATION..............................Animation-specific styles BASE...................................Default element styles .....Body .....Links .....Headings .....Forms .....Defaults LAYOUT.................................Layout-specific styles COMPONENTS.............................Component styles UTILITIES..............................Utility classes */
/*------------------------------------*\ #ABSTRACTS \*------------------------------------*/
/*------------------------------------*\ #VARIABLES \*------------------------------------*/
/** CONTENTS COLORS Brand colors...............Globally-available variables and config Neutral colors.............Grayscale colors, including white and black Utility colors.............Colors used for info, success, warnings, errors TYPOGRAPHY Font families..............The fonts used in the design system Font sizing.....................Font sizing LAYOUT Max-widths.................Maximum layout container width SPACING Spacing defaults...........Spacing between elements BORDERS Border width...............Border thicknesses Border radius..............Border radius definitions ANIMATION Transition speed............Transition/animation speed variables Transition properties...........Easing variables BREAKPOINTS Breakpoints................Global breakpoint definitions */
/*------------------------------------*\ #COLORS \*------------------------------------*/
/** Brand Colors 1) Main identifiable colors involved in creating the UI */
/** Neutral Colors 1) Neutral colors are grayscale values used throughout the application */
/** Utility Colors 1) Utility colors are colors used to provide feedback, such as alert messages, form validation, etc. */
/*------------------------------------*\ #TYPOGRAPHY \*------------------------------------*/
/** Font Family */
/** Font Sizing */
/*------------------------------------*\ #LAYOUT \*------------------------------------*/
/** Max Width */
/*------------------------------------*\ #SPACING \*------------------------------------*/
/** Spacing and offsets */
/*------------------------------------*\ #ANIMATION \*------------------------------------*/
/** Transition Speed */
/** Transition Properties */
/*------------------------------------*\ #BREAKPOINTS \*------------------------------------*/
/** Breakpoints used in media queries */
/*------------------------------------*\ #ANIMATION \*------------------------------------*/
/*------------------------------------*\ #ANIMATIONS \*------------------------------------*/
/** 1) All blocks/keyframes added for animations */
/** Block added for navigation swipe animation when activated */
.di-js-animation { position: absolute; top: 0; width: 100%; -webkit-transform: translateX(-100%); transform: translateX(-100%); background: #000; z-index: 2; -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.86, 0, 0.07, 1); transition: -webkit-transform 0.5s cubic-bezier(0.86, 0, 0.07, 1); transition: transform 0.5s cubic-bezier(0.86, 0, 0.07, 1); transition: transform 0.5s cubic-bezier(0.86, 0, 0.07, 1), -webkit-transform 0.5s cubic-bezier(0.86, 0, 0.07, 1); /** If body is disabled (nav is active), slide into frame */ }

body.di-is-disabled .di-js-animation { -webkit-transform: translateX(0); transform: translateX(0); height: 9999rem; }

/** Block added for sidebar expand animation */
@media all and (min-width: 66em) { .di-js-sidebar-animation { position: absolute; top: 0; height: 100vh; width: 100%; -webkit-transform: translateX(-100%); transform: translateX(-100%); background: rgba(250, 249, 242, 0.98); z-index: -1; -webkit-transition: -webkit-transform 1.5s cubic-bezier(0.86, 0, 0.07, 1); transition: -webkit-transform 1.5s cubic-bezier(0.86, 0, 0.07, 1); transition: transform 1.5s cubic-bezier(0.86, 0, 0.07, 1); transition: transform 1.5s cubic-bezier(0.86, 0, 0.07, 1), -webkit-transform 1.5s cubic-bezier(0.86, 0, 0.07, 1); /** Expand on page load when JS is active */ }
  body.js .di-js-sidebar-animation { -webkit-transform: translateX(0); transform: translateX(0); } }

/** Hide on pages where animation is disabled */
.di-u-no-animation .di-js-sidebar-animation { display: none; }

/** Slides items out of frame and then slides them back in */
@-webkit-keyframes slideOutIn { 0% { -webkit-transform: translateX(0rem); transform: translateX(0rem); }
  50% { -webkit-transform: translateX(20rem); transform: translateX(20rem); }
  55% { -webkit-transform: translate(-20rem); transform: translate(-20rem); }
  100% { opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0); } }
@keyframes slideOutIn { 0% { -webkit-transform: translateX(0rem); transform: translateX(0rem); }
  50% { -webkit-transform: translateX(20rem); transform: translateX(20rem); }
  55% { -webkit-transform: translate(-20rem); transform: translate(-20rem); }
  100% { opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0); } }

/** Increases opacity and slides into frame */
@-webkit-keyframes fadeSlideIn { 0% { opacity: 0;
    -webkit-transform: translateX(-1rem);
            transform: translateX(-1rem); }
  50% { opacity: 0;
    -webkit-transform: translateX(-1rem);
            transform: translateX(-1rem); }
  100% { opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0); } }
@keyframes fadeSlideIn { 0% { opacity: 0;
    -webkit-transform: translateX(-1rem);
            transform: translateX(-1rem); }
  50% { opacity: 0;
    -webkit-transform: translateX(-1rem);
            transform: translateX(-1rem); }
  100% { opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0); } }

/** Increases opactiy and slides up into frame */
@-webkit-keyframes slideUp { 0% { opacity: 0;
    -webkit-transform: translateY(1rem);
            transform: translateY(1rem); }
  25% { opacity: 0;
    -webkit-transform: translateY(1rem);
            transform: translateY(1rem); }
  50% { opacity: 0;
    -webkit-transform: translateY(1rem);
            transform: translateY(1rem); }
  75% { opacity: 0;
    -webkit-transform: translateY(1rem);
            transform: translateY(1rem); }
  100% { opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0); } }
@keyframes slideUp { 0% { opacity: 0;
    -webkit-transform: translateY(1rem);
            transform: translateY(1rem); }
  25% { opacity: 0;
    -webkit-transform: translateY(1rem);
            transform: translateY(1rem); }
  50% { opacity: 0;
    -webkit-transform: translateY(1rem);
            transform: translateY(1rem); }
  75% { opacity: 0;
    -webkit-transform: translateY(1rem);
            transform: translateY(1rem); }
  100% { opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0); } }

/** Used for loader to get staggered blinking effect */
@-webkit-keyframes opacitychange { 0%, 100% { opacity: 0; }
  60% { opacity: 1; } }
@keyframes opacitychange { 0%, 100% { opacity: 0; }
  60% { opacity: 1; } }

/*------------------------------------*\ #BASE \*------------------------------------*/
/*------------------------------------*\ #RESET \*------------------------------------*/
/** Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/ */
* { -webkit-box-sizing: border-box; box-sizing: border-box; }

/** 1) Zero out margins and padding for elements */
html, body, div, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, ol, ul, li, form, legend, label, table, header, footer, nav, section, figure { margin: 0; padding: 0; }

/** 1) Set HTML5 elements to display: block */
header, footer, nav, section, article, hgroup, figure { display: block; }

/*------------------------------------*\ #BODY \*------------------------------------*/
/** HTML base styles */
html { min-height: 100vh; }

/** Body base styles */
body { background: #fff; font: 100%/1.5 "Trade Gothic W01", Helvetica, Arial, sans-serif; -webkit-text-size-adjust: 100%; color: #000; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; min-height: 100vh; -webkit-transition: min-height 0s ease-in-out 1s; transition: min-height 0s ease-in-out 1s; /** Body is disabled 1) Added to body when modal is open so that the body underneath doesn't scroll while modal is open */ }

body.di-is-disabled { overflow: hidden; position: fixed; width: 100%; min-height: 100%; }

@media all and (min-width: 66em) { body.di-is-disabled { position: inherit; min-height: inherit; width: inherit; } }

/*------------------------------------*\ #LINKS \*------------------------------------*/
/** Link base styles */
a { color: #000; text-decoration: none; outline: 0; -webkit-transition: color 0.2s ease-out, border-bottom 0.2s ease-out; transition: color 0.2s ease-out, border-bottom 0.2s ease-out; }

a:hover, a:focus { color: #808080; color: #A51534; }

/*------------------------------------*\ #LISTS \*------------------------------------*/
/** 1) List base styles */
/** Remove list styles from unordered and ordered lists */
ol, ul { list-style: none; }

/*------------------------------------*\ #HEADINGS \*------------------------------------*/
/** Heading 1 base styles */
h1 { font-size: 1.9rem; letter-spacing: 0.05rem; text-transform: uppercase; line-height: 1; word-wrap: break-word; font-weight: 700; }

@media all and (min-width: 46.8em) { h1 { font-size: 2.3rem; } }

@media all and (min-width: 80em) { h1 { font-size: 2.75rem; } }

/** Heading 2 base styles */
h2 { font-size: 1.6em; line-height: 1.2; letter-spacing: -0.02rem; font-weight: normal; margin-bottom: 0.5rem; word-wrap: break-word; font-weight: 700; }

/** Heading 3 base styles */
h3 { font-size: 1.2em; line-height: 1.2; margin-bottom: 0.3rem; word-wrap: break-word; }

/*------------------------------------*\ #FORMS \*------------------------------------*/
/** 1) Form element base styles */
/** Input placeholder text base styles */
::-webkit-input-placeholder { color: #808080; font-style: italic; }

::-moz-placeholder { /* Firefox 19+ */ color: #808080; font-style: italic; }

:-ms-input-placeholder { color: #808080; font-style: italic; }

/** Fieldset base styles */
fieldset { border: 0; padding: 0; margin: 0; }

/** Legend base styles */
legend { text-transform: lowercase; margin-bottom: 0.25em; }

/** Label base styles */
label { display: block; padding-bottom: 0.25rem; color: #444; font-size: 1rem; }

/** Add font size 100% of form element and margin 0 to these elements */
button, input, select, textarea { font-family: inherit; font-size: 100%; margin: 0; }

/** Text area base styles */
textarea { resize: none; }

/** Input  and text area base styles */
input, textarea { width: 100%; border: none; padding: 0.5rem 0.65rem; background: #eee; }

/** Remove webkit appearance styles from these elements */
input[type=text], input[type=search], input[type=url], input[type=number], textarea { -webkit-appearance: none; }

/** Checkbox and radio button base styles */
input[type="checkbox"], input[type="radio"] { width: auto; margin-right: 0.3em; }

/** Search input base styles */
input[type="search"] { -webkit-appearance: none; border-radius: 0; }

/** Remove webkit appearance styles from search input cancel and decoration */
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/** Select 1) Remove default styling */
select { display: block; font-size: 0.85rem; height: 2rem; width: 100%; border: 1px solid #ddd; padding: 0.3rem; border-radius: 0; background: #fff; color: #444; -moz-appearance: none; -webkit-appearance: none; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTIgMTEiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEyIDExOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgZmlsbD0iIzgwODA4MCI+PHBhdGggZD0iTTIsNGw0LDRsNC00SDJ6Ii8+PC9zdmc+); background-position: calc(100% - 0.3rem) 50%; background-size: 16px 16px; background-repeat: no-repeat; /** 1) Remove IE select arrow */ /** 1) Style IE value selector */ }

select:focus { outline: 0; border-color: #808080; }

select::-ms-expand { /* 1 */ display: none; }

select::-ms-value { /* 1 */ background: transparent; color: #808080; }

/*------------------------------------*\ #FONTS \*------------------------------------*/
/** Trade Gothic W01 Font Regular */
@font-face { font-family: 'Trade Gothic W01'; src: url("../fonts/346A90_1_0.eot"); src: url("../fonts/346A90_1_0.eot?#iefix") format("embedded-opentype"), url("../fonts/346A90_1_0.woff2") format("woff2"), url("../fonts/346A90_1_0.woff") format("woff"), url("../fonts/346A90_1_0.ttf") format("truetype"); }

/** Trade Gothic W01 Font Italic */
@font-face { font-family: 'Trade Gothic W01'; src: url("../fonts/346A90_0_0.eot"); src: url("../fonts/346A90_0_0.eot?#iefix") format("embedded-opentype"), url("../fonts/346A90_0_0.woff2") format("woff2"), url("../fonts/346A90_0_0.woff") format("woff"), url("../fonts/346A90_0_0.ttf") format("truetype"); font-style: italic; }

/** Trade Gothic W01 Font Bold */
@font-face { font-family: 'Trade Gothic W01'; src: url("../fonts/346A90_2_0.eot"); src: url("../fonts/346A90_2_0.eot?#iefix") format("embedded-opentype"), url("../fonts/346A90_2_0.woff2") format("woff2"), url("../fonts/346A90_2_0.woff") format("woff"), url("../fonts/346A90_2_0.ttf") format("truetype"); font-weight: bold; }

/** Trade Gothic W02 Font Condensed */
@font-face { font-family: 'Trade Gothic W02'; src: url("../fonts/346A90_3_0.eot"); src: url("../fonts/346A90_3_0.eot?#iefix") format("embedded-opentype"), url("../fonts/346A90_3_0.woff2") format("woff2"), url("../fonts/346A90_3_0.woff") format("woff"), url("../fonts/346A90_3_0.ttf") format("truetype"); }

/*------------------------------------*\ #BUTTONS \*------------------------------------*/
/** Button and submit inputs reset 1) These should be styled using di-c-btn */
button, input[type=submit] { cursor: pointer; color: #fff; }

/*------------------------------------*\ #MAIN ELEMENT \*------------------------------------*/
/** Main element */
[role=main] { display: block; /** Main element within page layout mainNavPanel 1) Used in two-column-fixed layout in styleguide */ }

.di-l-page-layout__main [role=main] { display: block; -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; padding: 0; }

@media all and (min-width: 66em) { .di-l-page-layout__main [role=main] { margin: 2rem 0; } }

@media all and (min-width: 66em) { [role=main] { padding-top: 8rem; } }

/*------------------------------------*\ #MEDIA \*------------------------------------*/
/** Responsive image styling 1) Allows for images to flex with varying screen size */
img, object, video { max-width: 100%; height: auto; }

/*------------------------------------*\ #TEXT \*------------------------------------*/
/** Paragraph base styles */
p { margin-bottom: 1rem; }

article { overflow: hidden; }

/** Address base styles */
address { font-style: normal; }

/** Blockquote base styles */
blockquote { font-style: italic; border-left: 2px solid #A51534; color: #000; padding-left: 1rem; margin-bottom: 1rem; }

/** Blockquote citation */
cite { display: block; font-size: 1.2rem; }

/** Horizontal rule base styles */
hr { border: 0; height: 1px; background: #ddd; margin: 1rem 0; }

/** Selection styles */
::-moz-selection { background: #ddd; /* Gecko Browsers */ }

::selection { background: #ddd; /* WebKit/Blink Browsers */ }

/** Code base styles */
code { display: inline-block; background: #f9f9f9; border: 1px solid #ddd; padding: .2rem .5rem; line-height: 1.2; font-size: .85rem; }

/** Preformatted text base styles */
pre { background: #f9f9f9; border: 1px solid #ddd; font-size: 1rem; padding: 1rem; overflow-x: auto; /** Remove border from code within preformatted text block */ }

pre code { border: 0; }

/** Code with languages associated with them 1) Override Prism sysles for code blocks with language */
code[class*="language-"], pre[class*="language-"] { font-family: monospace !important; }

/*------------------------------------*\ #TABLES \*------------------------------------*/
/** Table */
table { border-collapse: collapse; border-spacing: 0; width: 100%; }

/** Table header cell */
th { text-align: left; }

/** Table row */
tr { vertical-align: top; }

/*------------------------------------*\ # WORDPRESS GENERATIVE CLASSES \*------------------------------------*/
.alignnone { margin: .5rem 1rem 1rem 0; }

.aligncenter, div.aligncenter { display: block; margin: .5rem auto .5rem auto; }

.alignright { float: right; margin: .5rem 0 1rem 1rem; }

.alignleft { float: left; margin: .5rem 1rem 1rem 0; }

a img.alignright { float: right; margin: .5rem 0 1rem 1rem; }

a img.alignnone { margin: .5rem 1rem 1rem 0; }

a img.alignleft { float: left; margin: .5rem 1rem 1rem 0; }

a img.aligncenter { display: block; margin-left: auto; margin-right: auto; }

.wp-caption.alignleft { text-align: left; margin: .5rem 1rem 1rem 0; }

.wp-caption.alignright { text-align: right; margin: .5rem 0 1rem 1rem; }

.wp-caption img { border: 0 none; height: auto; margin: 0; max-width: 98.5%; padding: 0; width: auto; }

/* Text meant only for screen readers. */
.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */ }

.screen-reader-text:focus { background-color: #eee; clip: auto !important; -webkit-clip-path: none; clip-path: none; color: #444; display: block; font-size: 1em; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar. */ }

/*------------------------------------*\ #LAYOUT \*------------------------------------*/
/*------------------------------------*\ #LAYOUT \*------------------------------------*/
/** Layout Container 1) The base container that adds padding to the sides and top */
.di-l-container { padding: 1rem 2rem 0 3.5rem; /** Layout container within page layout main in two column fixed wide layout */ /** Layout container within sticky container 1) Layout within container that is position: sticky */ }

@media all and (min-width: 66em) { .di-l-page-layout--two-column-fixed-wide .di-l-page-layout__main .di-l-container { margin-right: 7.3rem; margin-left: 50%; } }

.di-l-sticky-container .di-l-container { padding-top: 0; padding-bottom: 0; }

/** Padded layout container 1) Adds more padding to the sides on large screens */
@media all and (min-width: 66em) { .di-l-container--padded { padding: 1rem 4rem 0 12rem; } }

/** Capped layout container 1) Caps the content within by setting max width 2) Also centers the content in the page layout */
.di-l-container--capped { max-width: 65rem; /* 1 */ margin: 0 auto; /* 2 */ }

/** Layout Container skew 1) Removes padding from right side within skew right section */
.di-l-container--skew { padding-right: 0; }

/** Layout container two column bleed 1) Used to stretch component in two column layout full bleed on large screens */
@media all and (min-width: 66em) { .di-l-page-layout--two-column-fixed-wide .di-l-page-layout__main .di-l-container--two-col-bleed { margin-left: 0; margin-right: 0; padding-left: 50%; padding-right: 0; } }

/** Article layout container 1) Used to layout article at large screens */
@media all and (min-width: 50em) { .di-l-container--article { width: 90%; padding-right: 6rem; max-width: 85rem; } }

@media all and (min-width: 66em) { .di-l-container--article { width: 85%; padding-right: 6rem; } }

@media all and (min-width: 90em) { .di-l-container--article { width: 75%; padding-left: 20rem; } }

/** Linelength container 1) Caps excerpts of text so it doesn't expand to where it is uncomfortable for a user to read text */
.di-l-linelength-container { max-width: 35rem; }

/** Linelength container grow 1) Caps linelength at small screens until text grows in size and a max width is not needed anymore on large screens. */
@media all and (min-width: 90em) { .di-l-linelength-container--grow { max-width: none; } }

/** Layout band 1) Adds band of color around container full bleed around items in container */
.di-l-band { background: #eee; padding-top: 2rem; padding-bottom: 2rem; }

/** Cream layout band */
.di-l-band--cream { background: rgba(250, 249, 242, 0.98); }

/** Cream layout band */
.di-l-band--blue-light { background: #F2F6F7; }

/** Dark layout band */
.di-l-band--dark { background: #001622; }

/** Sticky container 1) Houses the content used in position: sticky component */
@media all and (min-width: 66em) { .di-l-sticky-container { position: relative; height: 100%; overflow: auto; -ms-overflow-style: none; padding-top: 3.3rem; /** Remove scrollbar from sticky sidebar */ /** Sticky container when JS is activated. 1) Adds animation of the background */ }
  .di-l-sticky-container::-webkit-scrollbar { display: none; }
  .js .di-l-sticky-container { background: rgba(255, 255, 255, 0.98); -webkit-transition: background 0s ease-in-out 1s; transition: background 0s ease-in-out 1s; }
  .js.di-u-no-animation .di-l-sticky-container { -webkit-transition-delay: 0s; transition-delay: 0s; } }

@media all and (min-width: 66em) and (min-width: 66em) and (min-height: 864px) { .di-l-sticky-container { padding-top: 5rem; } }

@media all and (min-width: 66em) and (min-width: 66em) and (min-height: 1088px) { .di-l-sticky-container { padding-top: 8rem; } }

/** Cream background layout 1) Adds cream background to the sidebar */
@media all and (min-width: 66em) { .di-l-cream-background { /** Cream background layout when JS is activated */ }
  .js .di-l-cream-background { background: rgba(250, 249, 242, 0.98); -webkit-transition: background 0s ease-in-out 1s; transition: background 0s ease-in-out 1s; }
  .js.di-u-no-animation .di-l-cream-background { background: rgba(250, 249, 242, 0.97); -webkit-transition-delay: 0s; transition-delay: 0s; } }

/** Veritical band 1) Band that spans the entire page that contains the date */
.di-l-vertical-band { /** Wide vertical band 1) Used on pages where the logo would be obscured by a dark full bleed background */ }

@media all and (min-width: 66em) { .di-l-vertical-band { position: fixed; top: 0; left: 0; height: 100vh; width: 7.3rem; background: #fff; opacity: 0.98; z-index: 2; } }

.di-l-vertical-band--wide { width: 10rem; }

/** Flex container is used to place stacked items side by side on large screens */
@media all and (min-width: 50em) { .di-l-flex-container { display: -webkit-box; display: -ms-flexbox; display: flex; } }

/*------------------------------------*\ #LAYOUT SECTIONS \*------------------------------------*/
/** Two column page layout 1) Layout used for a general two column layout with no column fixed */
.di-l-page-layout--two-column { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }

@media all and (min-width: 66em) { .di-l-page-layout--two-column { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } }

/** Page layout main section 1) The main section is the primary content container */
.di-l-page-layout__main { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; /** Page layout main section within two column page layout */ /** Page layout main section of two column fixed layout 1) Margin left equals width of the fixed positioned sidebar */ /** Page layout main section of two column fixed wide layout */ }

@media all and (min-width: 66em) { .di-l-page-layout--two-column > .di-l-page-layout__main { padding-top: 8rem; width: 50%; } }

.di-l-page-layout--two-column-fixed > .di-l-page-layout__main { height: 100vh; }

@media all and (min-width: 66em) { .di-l-page-layout--two-column-fixed > .di-l-page-layout__main { margin-left: 20rem; /* 1 */ } }

@media all and (min-width: 66em) and (min-height: 0px) { .di-l-page-layout--two-column-fixed-wide > .di-l-page-layout__main { margin-top: -100vh; padding-top: 7rem; } }

@media all and (min-width: 66em) and (min-height: 864px) { .di-l-page-layout--two-column-fixed-wide > .di-l-page-layout__main { padding-top: 9rem; } }

@media all and (min-width: 66em) and (min-height: 1088px) { .di-l-page-layout--two-column-fixed-wide > .di-l-page-layout__main { padding-top: 12rem; } }

/** Secondary section 1) The secondary section is an auxiliary container Otherwise known as "sidebar", but we try to avoid that term to be mindful of the fact in responsive environments "sidebar" */
.di-l-page-layout__secondary { /** Page layout secondary section within two column page layout */ /** Secondary section in a two-column fixed layout 1) This is a fixed element */ /** Page layout secondary section within two column fixed wide page layout 1) This element contains a position: sticky sidebar component */ }

@media all and (min-width: 66em) { .di-l-page-layout--two-column > .di-l-page-layout__secondary { width: 50%; padding-left: 7.3rem; } }

@media all and (min-width: 66em) { .di-l-page-layout--two-column-fixed > .di-l-page-layout__secondary { position: fixed; width: 20rem; height: 100vh; overflow: auto; z-index: 2; } }

@media all and (min-width: 66em) { .di-l-page-layout--two-column-fixed-wide > .di-l-page-layout__secondary { height: 100vh; width: 50%; padding-left: 7.3rem; z-index: 2; } }

/*------------------------------------*\ #GRID \*------------------------------------*/
/** Grid Container 1) If grid is not supported, display block and add negative margin for alignment purposes */
.di-l-grid { display: block; margin: 0 -1rem; /** Grid container in browser that supports display grid 1) Grid gap takes care of margins */ }

@supports (display: grid) { .di-l-grid { display: grid; grid-gap: 1rem; margin: 0; } }

/** Grid container offset 1) Used to stagger grid items below one another */
.di-l-grid--offset { /** Grid container offset in browser that supports display grid */ }

@supports (display: grid) { .di-l-grid--offset { grid-gap: 0; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } }

/** 2-up grid 1) Used as a fallback for browsers that do not support grid 2) Grid that starts out stacked on small screens then goes to 2up on med/large screens */
.di-l-grid--2up { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; /** 2-up grid in browser that supports display grid 1) Grid gap takes care of margins */ }

@media all and (min-width: 46.8em) { .di-l-grid--2up { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; } }

@supports (display: grid) { @media all and (min-width: 46.8em) { .di-l-grid--2up { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1rem 2rem; } } }

/** 3-up grid */
.di-l-grid--3up { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; /** 3-up grid when display grid is supported in a browser */ }

@media all and (min-width: 46.8em) { .di-l-grid--3up { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } }

@supports (display: grid) { .di-l-grid--3up { display: grid; }
  @media all and (min-width: 46.8em) { .di-l-grid--3up { grid-template-columns: repeat(auto-fill, minmax(33.33%, 1fr)); } }
  @media all and (min-width: 50em) { .di-l-grid--3up { grid-template-columns: repeat(auto-fill, minmax(25%, 1fr)); } } }

/** 4-up grid */
.di-l-grid--4up { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; /** 4-up grid when display grid is supported in a browser */ }

@media all and (min-width: 46.8em) { .di-l-grid--4up { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } }

@supports (display: grid) { .di-l-grid--4up { display: grid; }
  @media all and (min-width: 46.8em) { .di-l-grid--4up { grid-template-columns: repeat(auto-fill, minmax(33.33%, 1fr)); } }
  @media all and (min-width: 50em) { .di-l-grid--4up { grid-template-columns: repeat(auto-fill, minmax(25%, 1fr)); } }
  @media all and (min-width: 66em) { .di-l-grid--4up { grid-template-columns: repeat(auto-fill, minmax(20%, 1fr)); } } }

/** Grid Item */
.di-l-grid__item { padding: 1rem; display: block; /** Grid Item within offset grid */ /** Grid item within 2-up grid */ /** Grid item within 3-up grid */ /** Grid item within 3-up grid */ /** Grid item that supports display grid 1) Set padding to 0 */ }

.di-l-grid--offset .di-l-grid__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; /** Even grid item within offset grid */ /** Grid Item within offset grid that supports display: grid */ }

.di-l-grid--offset .di-l-grid__item:nth-child(even) { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; }

@supports (display: grid) { .di-l-grid--offset .di-l-grid__item { /** Odd grid Item */ /** Event grid item */ }
  .di-l-grid--offset .di-l-grid__item:nth-child(odd) { grid-column: 1 / 5; grid-row: 1; }
  .di-l-grid--offset .di-l-grid__item:nth-child(even) { grid-column: 2 / 6; grid-row: 2; } }

.di-l-grid--2up .di-l-grid__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; /** 1) If CSS Grid is supported, set the width of grid__items to 100% to fill space automatically */ }

@media all and (min-width: 46.8em) { .di-l-grid--2up .di-l-grid__item { width: 50%; } }

@supports (display: grid) { .di-l-grid--2up .di-l-grid__item { width: 100%; /* 1 */ } }

.di-l-grid--3up .di-l-grid__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; /** 1) If CSS Grid is supported, set the width of grid__items to 100% to fill space automatically */ }

@media all and (min-width: 46.8em) { .di-l-grid--3up .di-l-grid__item { width: 50%; } }

@media all and (min-width: 50em) { .di-l-grid--3up .di-l-grid__item { width: 33.33333%; } }

@supports (display: grid) { .di-l-grid--3up .di-l-grid__item { width: 100%; /* 1 */ padding: 0; } }

.di-l-grid--4up .di-l-grid__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; /** 1) If CSS Grid is supported, set the width of grid__items to 100% to fill space automatically */ }

@media all and (min-width: 46.8em) { .di-l-grid--4up .di-l-grid__item { width: 50%; } }

@media all and (min-width: 50em) { .di-l-grid--4up .di-l-grid__item { width: 33.33333%; } }

@media all and (min-width: 66em) { .di-l-grid--4up .di-l-grid__item { width: 25%; } }

@supports (display: grid) { .di-l-grid--4up .di-l-grid__item { width: 100%; /* 1 */ padding: 0; } }

@supports (display: grid) { .di-l-grid__item { padding: 0; } }

/*------------------------------------*\ #COMPONENTS \*------------------------------------*/
/*------------------------------------*\ #ACCORDION \*------------------------------------*/
/** 1) The accordion is typically applied to a <ul> tag. */
.di-c-accordion { margin-bottom: 1rem; border: 1px solid #ddd; border-top: 0; }

/** Bare accordion 1) Remove the border from the accordion. Used for simple show/hide function */
.di-c-accordion--bare { border: 0; /* 1 */ }

/** Accordion Header 1) The handle of the accordion that contains the accordion title and icon */
.di-c-accordion__header { border-top: 1px solid #bbb; cursor: pointer; font-size: 0.85rem; /** Accordion header within bare accordion */ }

.di-c-accordion--bare .di-c-accordion__header { border-top: 0; }

/** Accordion Title 1) Set to display flex to span the width of the container so entire accordion header is click target */
.di-c-accordion__title { display: -webkit-box; display: -ms-flexbox; display: flex; /* 1 */ -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: .75rem 1rem; background: #ddd; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; -webkit-transition: background 0.2s ease; transition: background 0.2s ease; /** Accordion title within accordion bare */ }

.di-c-accordion--bare .di-c-accordion__title { display: inline-block; padding: 0; background: none; border-bottom: 1px solid #A51534; }

.di-c-accordion__title:hover, .di-c-accordion__title:focus { background: #eee; }

/** Accordion Body 1) The container that houses the accordion content, that can be opened and closed */
.di-c-accordion__body { overflow: hidden; max-height: 9999em; padding: 1rem; border-top: 1px solid #bbb; -webkit-transition: max-height 0.2s ease; transition: max-height 0.2s ease; font-size: 0.85rem; /* Accordion body within closed accordion item */ /** Accordion body within accordion bare */ }

.di-c-accordion__item.di-is-closed .di-c-accordion__body { max-height: 0; padding-top: 0; padding-bottom: 0; border-top: 0; }

.di-c-accordion--bare .di-c-accordion__body { border-top: none; padding: 1rem 0; }

/** Accordion icon */
.di-c-accordion__icon { top: 2px; margin-right: 0.5rem; color: #444; fill: #444; -webkit-transition: -webkit-transform 0.2s ease; transition: -webkit-transform 0.2s ease; transition: transform 0.2s ease; transition: transform 0.2s ease, -webkit-transform 0.2s ease; /** Accordion icon within closed accordion item */ /** Accordion icon within accordion bare */ }

.di-c-accordion__item.di-is-closed .di-c-accordion__icon { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); }

.di-c-accordion--bare .di-c-accordion__icon { height: 8px; width: 8px; fill: #A51534; }

/*------------------------------------*\ #ADDRESS \*------------------------------------*/
/** 1) Address of a person or organization */
.di-c-address { /** Address within the footer */ }

.di-c-footer .di-c-address { color: #fff; }

/*------------------------------------*\ #ALERT \*------------------------------------*/
/** 1) A block containing a message to the user */
.di-c-alert { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 1em; margin-bottom: 1rem; background: #d3f2ff; border: 1px solid #0192d0; }

/** Alert success status */
.di-c-alert--success { background: #d4f3e6; border-color: #03804d; color: #03804d; }

/** Alert warning status */
.di-c-alert--warning { background: #fffecf; border-color: #a59b15; }

/** Alert error status */
.di-c-alert--error { background: #fdded8; border-color: #b12a0b; color: #b12a0b; }

/** 1) Alert Icon */
.di-c-alert__icon { height: 16px; width: 16px; margin-right: 1rem; fill: #0192d0; color: #0192d0; /** Alert icon within error alert */ /** Alert icon within successful alert */ /** Alert icon within warning alert */ }

.di-c-alert--error .di-c-alert__icon { fill: #b12a0b; color: #b12a0b; }

.di-c-alert--success .di-c-alert__icon { fill: #03804d; color: #03804d; }

.di-c-alert--warning .di-c-alert__icon { fill: #a59b15; color: #a59b15; }

/** Alert Body 1) Flex  1 added to fill up the rest of the space of the alert */
.di-c-alert__body { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; /* 1 */ /** Link inside of alert body */ /** Last paragraph item within alert body */ }

.di-c-alert__body a { color: inherit; text-decoration: underline; }

.di-c-alert__body p:last-child { margin-bottom: 0; }

/** 1) Alert Actions */
.di-c-alert__actions { margin-left: 1rem; }

/*------------------------------------*\ #ARTICLE \*------------------------------------*/
/** 1) Block that contains an article as well as various items associated with it */
/** Article container */
.di-c-article-container { position: relative; }

/** Article */
.di-c-article { padding-top: 2rem; /** Article that is expanded 1) Used when the show more button for buttons is visible and is added when that button is clicked */ }

@media all and (min-width: 50em) { .di-c-article { max-height: none !important; } }

@media all and (min-width: 66em) { .di-c-article { padding-top: 4rem; } }

.di-c-article.di-is-expanded { max-height: none !important; overflow: inherit; }

/** Article meta share 1) Block that contains article meta data (author, etc.) and share components */
@media all and (min-width: 50em) { .di-c-article__meta-share { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } }

/** Article meta 1) Contains the meta data (author, etc.) for the article */
.di-c-article__meta { margin-bottom: 1rem; color: #7EA4AB; font-family: "Trade Gothic W02", "Trade Gothic W01", Helvetica, Arial, sans-serif; text-transform: uppercase; }

@media all and (min-width: 50em) { .di-c-article__meta { padding: 0.5rem 1rem 0.5rem 0; border-right: 1px solid #ddd; }
  .di-c-article__meta:last-child { border-right: 0; padding-left: 1rem; } }

.di-c-article__meta:last-child { border: 0; }

/** Article meta link 1) Links within the article meta */
.di-c-article__meta-link { color: #7EA4AB; border-bottom: solid 1px #D90038; }

.di-c-article__meta-link:hover, .di-c-article__meta-link:focus { color: #000; }

/** Article feature image 1) Used for the image that is featured at the top of an article */
.di-c-article__feature-image { display: block; width: 100%; }

/** Article TL;DR 1) Used to summarize an article in a short description/bullet points */
.di-c-article__tldr { position: relative; margin: 0 -2rem 0 -3.5rem; }

@media all and (min-width: 50em) { .di-c-article__tldr { float: left; margin: 1rem 1rem 1rem -4rem; width: 30rem; } }

@media all and (min-width: 66em) { .di-c-article__tldr { width: 32rem; /** Cream background attached to TLDR 1) Used on larger screeens to add depth to the article */ }
  .di-c-article__tldr:before { content: ""; display: block; position: absolute; bottom: 100%; height: 150rem; width: 32rem; background: rgba(250, 249, 242, 0.98); z-index: -1; } }

@media all and (min-width: 90em) { .di-c-article__tldr { margin: 1rem 1rem 1rem -19rem; width: 38rem; padding-left: 6rem; }
  .di-c-article__tldr:before { width: 32rem; } }

/** Article author share 1) Container at the bottom of an article containing the author and a way to share the article */
@media all and (min-width: 50em) { .di-c-article__author-share { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-top: 1px solid #ddd; } }

/*------------------------------------*\ #AVATAR BLOCK \*------------------------------------*/
/** 1) Block consisting of an image and text vertically aligned */
.di-c-avatar-block { display: -webkit-box; display: -ms-flexbox; display: flex; }

/** Avatar block media 1) Container that houses any media within the avatar block */
.di-c-avatar-block__media { margin-right: 1rem; }

/** Avatar block image 1) Border radius added makes the image circular */
.di-c-avatar-block__img { border-radius: 50%; max-height: 11rem; /** Avatar block image in a small variation */ /** Avatar block image in a tiny variation */ }

.di-c-avatar-block--small .di-c-avatar-block__img { max-height: 5rem; }

.di-c-avatar-block--tiny .di-c-avatar-block__img { max-height: 2.5rem; }

/** Avatar block body 1) Container that houses the text of the media block */
.di-c-avatar-block__body { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; /** Avatar block body in a small/tiny variation */ }

.di-c-avatar-block--small .di-c-avatar-block__body, .di-c-avatar-block--tiny .di-c-avatar-block__body { font-size: 0.85rem; }

/** Avatar block title */
.di-c-avatar-block__title { display: inline; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0 0 1rem 0; font-size: 1.4375rem; font-weight: bold; /** Avatar block title in a small/tiny variation */ }

.di-c-avatar-block--small .di-c-avatar-block__title, .di-c-avatar-block--tiny .di-c-avatar-block__title { font-size: 1.2rem; }

/** Avatar block link */
.di-c-avatar-block__link { display: block; position: relative; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }

.di-c-avatar-block__link:before { content: ''; display: block; position: absolute; top: 0; right: 0; height: 100%; width: 0; background: #A51534; -webkit-transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1); transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1); z-index: -1; }

.di-c-avatar-block__link:hover, .di-c-avatar-block__link:focus { color: #fff; }

.di-c-avatar-block__link:hover:before, .di-c-avatar-block__link:focus:before { width: 100%; left: 0; }

/** Avatar block link text 1) Used to add the border bottom so hover state works correctly */
.di-c-avatar-block__link-text { border-bottom: 1px solid #A51534; }

/** Avatar block description */
.di-c-avatar-block__desc { margin-bottom: 0; }

/*------------------------------------*\ #BREADCRUMBS \*------------------------------------*/
/** 1) This is an ordered list showing what level you are on in the site */
.di-c-breadcrumbs { display: -webkit-box; display: -ms-flexbox; display: flex; /* 2 */ -ms-flex-wrap: wrap; flex-wrap: wrap; /* 3 */ margin: 0 0 1rem 0; /* 4 */ }

/** Breadcrumbs list item 1) Set to position relative so :after is positioned relative to the breadcrumbs item */
.di-c-breadcrumbs__item { position: relative; /* 1 */ margin-right: 0.5rem; /** Icon in between list item 1) Set to position absolute so it is positioned relative to its parent container */ /** Last breadcrumbs list item */ }

.di-c-breadcrumbs__item:after { content: ''; display: inline-block; position: absolute; top: 50%; margin-left: 0.5rem; right: -0.5rem; width: 0; height: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 6px solid #808080; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }

.di-c-breadcrumbs__item:last-child { margin-right: 0; }

/** Breadcrumbs link */
.di-c-breadcrumbs__link { margin: 0 0.5rem; color: #A51534; font-weight: bold; text-transform: uppercase; /** Breadcrumbs link within first breadcrumb item */ }

.di-c-breadcrumbs__item:first-child .di-c-breadcrumbs__link { margin-left: 0; }

.di-c-breadcrumbs__link:hover, .di-c-breadcrumbs__link:focus { color: #808080; }

/*------------------------------------*\ #BULLETED LIST \*------------------------------------*/
/** 1) Unordered list with customized bullets */
.di-c-bulleted-list__item { margin-bottom: 1rem; /** Last bulleted list item */ /** Link within a bulleted list */ /** Link within a bulleted list */ }

.di-c-bulleted-list__item:last-child { margin-bottom: none; }

.di-c-bulleted-list__item:before { content: ""; display: inline-block; position: relative; bottom: 3px; height: 6px; width: 6px; margin-right: 0.5rem; background: #A51534; }

.di-c-bulleted-list__item a { color: #000; border-bottom: 1px solid #A51534; overflow-wrap: break-word; word-wrap: break-word; }

.di-c-bulleted-list__item a:hover, .di-c-bulleted-list__item a:focus { color: #808080; }

/*------------------------------------*\ #BUTTONS \*------------------------------------*/
/** 1) Button or link that has functionality to it */
.di-c-btn { display: inline-block; position: relative; cursor: pointer; color: #fff; line-height: 1; font-weight: bold; padding: 1rem 2rem; background: none; border: 0; border-bottom: none; /* 2 */ text-align: center; text-transform: uppercase; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; /** Button before 1) Before is used to add the color of the button and creates the hover/focus animation swipe */ /** Button within hero */ /** Button within input group or search form */ /** Button within button group */ /** Button within button group */ /** Button within a media block */ }

.di-c-btn:before { content: ''; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: #A51534; -webkit-transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1); transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1); z-index: -1; }

.di-c-btn:hover, .di-c-btn:focus { color: #A51534; /** Button before within hovered/focused button */ }

.di-c-btn:hover:before, .di-c-btn:focus:before { right: 0; width: 0; left: auto; }

.di-c-hero .di-c-btn { display: block; margin-left: auto; }

.di-c-input-group .di-c-btn, .di-c-search .di-c-btn { margin-left: 0.5rem; outline: 0; }

.di-c-btn-group .di-c-btn { margin-right: 0.5rem; /** Remove right margin on last button group button */ }

.di-c-btn-group .di-c-btn:last-child { margin-right: 0; }

.di-c-btn-group--responsive .di-c-btn { margin-right: 0; margin-bottom: 0.5rem; }

@media all and (min-width: 24em) { .di-c-btn-group--responsive .di-c-btn { margin-right: 0.5rem; margin-bottom: 0; /** Remove right margin on last responsive button group button */ }
  .di-c-btn-group--responsive .di-c-btn:last-child { margin-right: 0; } }

.di-c-media-block .di-c-btn { margin-top: 1rem; }

/** Blue button */
.di-c-btn--blue { color: #fff; }

.di-c-btn--blue:before { background: #668B99; }

.di-c-btn--blue:hover, .di-c-btn--blue:focus { color: #668B99; }

/** Small button */
.di-c-btn--small { padding: .375rem .75rem; font-size: 0.75rem; letter-spacing: 1px; }

/** Bare button */
.di-c-btn--bare { background: none; color: #000; }

.di-c-btn--bare:after, .di-c-btn--bare:before { content: none; }

.di-c-btn--bare:hover, .di-c-btn--bare:focus { background: none; color: #000; outline: none; }

/** Circular button */
.di-c-btn--circle { border-radius: 50%; border: 3px solid #444; background: none; padding: 1rem; /** Circular button within the footer */ /** Circular button hover state within footer */ }

.di-c-btn--circle:after, .di-c-btn--circle:before { content: none; }

.di-c-btn--circle:hover, .di-c-btn--circle:focus { background: #bbb; background: #A51534; border-color: #A51534; }

.di-c-footer .di-c-btn--circle { color: #fff; border-color: #fff; }

.di-c-footer .di-c-btn--circle:hover, .di-c-footer .di-c-btn--circle:focus { border-color: #A51534; }

/** Button loading 1) Button that indicates a loading state */
.di-c-btn.di-is-loading { cursor: not-allowed; background: #A51534; /** Remove the before pseudo-element and hover/focus animations */ }

.di-c-btn.di-is-loading:before { content: none; }

/** Facebook button 1) Used for sharing to Facebook */
.di-c-btn--facebook { /** Element that adds hover/focus state */ }

.di-c-btn--facebook:before { background: #3B5598; }

.di-c-btn--facebook:hover, .di-c-btn--facebook:focus { color: #3B5598; }

.di-c-btn--facebook:hover:before, .di-c-btn--facebook:focus:before { right: 0; width: 0; left: auto; }

/** Twitter button 1) Used for sharing to Twitter */
.di-c-btn--twitter { /** Element that adds hover/focus state */ }

.di-c-btn--twitter:before { background: #1DA1F2; }

.di-c-btn--twitter:hover, .di-c-btn--twitter:focus { color: #1DA1F2; }

.di-c-btn--twitter:hover:before, .di-c-btn--twitter:focus:before { right: 0; width: 0; left: auto; }

/** Bare button with red text 1) Used for "Continue Reading" button on article pages */
.di-c-btn--bare.di-c-btn--red-text { color: #A51534; }

.di-c-btn--bare.di-c-btn--red-text:hover, .di-c-btn--bare.di-c-btn--red-text:focus { background: none; color: #fff; }

/** Lined button 1) Used for the lines on "Continue Reading Button" */
.di-c-btn--bare.di-c-btn--lined { display: block; position: relative; bottom: 1rem; width: 100%; font-family: "Trade Gothic W02", "Trade Gothic W01", Helvetica, Arial, sans-serif; z-index: 2; /** Lined button within show more component */ }

.di-c-btn--bare.di-c-btn--lined:before { content: ""; position: absolute; top: 50%; left: 0; height: 3px; width: 100%; background: #000; z-index: -1; }

.di-c-btn--bare.di-c-btn--lined:hover, .di-c-btn--bare.di-c-btn--lined:focus { background: none; }

.di-c-show-more .di-c-btn--bare.di-c-btn--lined { position: absolute; left: 0; }

/* Inner container of the buton Allows for display flex on a button */
.di-c-btn__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: background 0.2s ease-in-out; transition: background 0.2s ease-in-out; /* Button inner within header nav button */ /* Button inner within lined button */ /* Button inner within hovered/focused bare, red text button */ }

.di-c-header__nav-btn .di-c-btn__inner { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }

.di-c-btn--lined .di-c-btn__inner { display: inline-block; background: #fff; z-index: 3; padding: 1rem; }

.di-c-btn--bare.di-c-btn--red-text:hover .di-c-btn__inner, .di-c-btn--bare.di-c-btn--red-text:focus .di-c-btn__inner { background: #A51534; }

/* Button text */
.di-c-btn__text { /* Button inner within active header 1) Add slide out animation for button */ }

.di-c-header.di-is-active .di-c-header__nav-btn .di-c-btn__text, .di-c-btn__text .di-u-no-animation .di-c-header.di-is-active .di-c-header__nav-btn { -webkit-animation: slideOutIn 1s ease 0.8s 1 !important; animation: slideOutIn 1s ease 0.8s 1 !important; /* 1 */ }

/* Button icon */
.di-c-btn__icon { width: 16px; height: 16px; margin-right: 0.5rem; fill: #fff; position: relative; -webkit-transition: fill 0.2s ease-in-out; transition: fill 0.2s ease-in-out; /* Button icon within header navigation button */ /* Button icon within bare button */ /* Button icon within hovered/focused bare button */ /* Button icon within button hover */ /* Button icon within active button */ /* Button icon within social follow */ /* Button icon within social follow inside footer */ /* Button icon within circular button */ /* Button icon within bare, red text button */ /* Button icon within hovered/focused bare, red text button */ /* Button icon within show more component */ /* Button icon within Twitter button */ /* Button icon within Facebook button */ /* Button icon within hovered/focused Facebook button */ }

.di-c-header__nav-btn .di-c-btn__icon { height: 32px; width: 32px; margin-right: 0; margin-bottom: 0.2rem; }

.di-c-btn--bare .di-c-btn__icon { fill: #444; }

.di-c-btn.di-c-btn--bare:hover .di-c-btn__icon, .di-c-btn.di-c-btn--bare:focus .di-c-btn__icon { fill: #000; }

.di-c-btn:hover .di-c-btn__icon, .di-c-btn:focus .di-c-btn__icon { fill: #444; }

.di-c-btn.di-is-active .di-c-btn__icon { fill: #000; }

.di-c-social-follow .di-c-btn__icon { fill: #444; }

.di-c-footer .di-c-social-follow .di-c-btn__icon { fill: #fff; }

.di-c-btn--circle .di-c-btn__icon { margin-right: 0; fill: #000; }

.di-c-btn--bare.di-c-btn--red-text .di-c-btn__icon { fill: #A51534; }

.di-c-btn--bare.di-c-btn--red-text:hover .di-c-btn__icon, .di-c-btn--bare.di-c-btn--red-text:focus .di-c-btn__icon { fill: #fff; }

.di-c-show-more .di-c-btn__icon { height: 10px; width: 10px; }

.di-c-btn--twitter:hover .di-c-btn__icon, .di-c-btn--twitter:hover .di-c-btn__icon { fill: #1DA1F2; }

.di-c-btn--facebook .di-c-btn__icon { position: relative; top: -3px; }

.di-c-btn--facebook:hover .di-c-btn__icon, .di-c-btn--facebook:hover .di-c-btn__icon { fill: #3B5598; }

/** Button line 1) Lines on the hamburger menu. Used instead of SVG for animation purposes */
.di-c-btn__line { display: block; height: 3px; width: 100%; margin-bottom: 0.5rem; background: #444; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; /* Button line within hovered/focused button */ /* Button line within hovered/focused button within active header */ /* First button line */ /* Second button line */ }

.di-c-btn:hover .di-c-btn__line, .di-c-btn:focus .di-c-btn__line { background: #A51534; }

.di-c-header.di-is-active .di-c-btn:hover .di-c-btn__line, .di-c-header.di-is-active .di-c-btn:focus .di-c-btn__line { background: #A51534; }

.di-c-btn__line:first-child { /* First button line within active header or no animation class added */ }

.di-c-header.di-is-active .di-c-btn__line:first-child, .di-u-no-animation .di-c-header.di-is-active .di-c-btn__line:first-child { background: #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-animation: slideOutIn 1s ease 0.2s 1 !important; animation: slideOutIn 1s ease 0.2s 1 !important; -webkit-transition: background 0.5s ease-in-out, -webkit-transform 0.2s ease-in-out 0.5s; transition: background 0.5s ease-in-out, -webkit-transform 0.2s ease-in-out 0.5s; transition: background 0.5s ease-in-out, transform 0.2s ease-in-out 0.5s; transition: background 0.5s ease-in-out, transform 0.2s ease-in-out 0.5s, -webkit-transform 0.2s ease-in-out 0.5s; }

.di-c-btn__line:nth-child(2) { position: relative; top: 0; /* Second button line within active header */ }

.di-c-header.di-is-active .di-c-btn__line:nth-child(2), .di-u-no-animation .di-c-header.di-is-active .di-c-btn__line:nth-child(2) { background: #fff; top: -10px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: slideOutIn 1s ease 0.5s 1 !important; animation: slideOutIn 1s ease 0.5s 1 !important; -webkit-transition: background 0.5s ease-in-out, top 0.2s ease-in-out 0.5s, -webkit-transform 0.2s ease-in-out 0.5s; transition: background 0.5s ease-in-out, top 0.2s ease-in-out 0.5s, -webkit-transform 0.2s ease-in-out 0.5s; transition: background 0.5s ease-in-out, transform 0.2s ease-in-out 0.5s, top 0.2s ease-in-out 0.5s; transition: background 0.5s ease-in-out, transform 0.2s ease-in-out 0.5s, top 0.2s ease-in-out 0.5s, -webkit-transform 0.2s ease-in-out 0.5s; }

/*------------------------------------*\ #TEXT BUTTON \*------------------------------------*/
/** 1) Button that is text only and doesn't contain a border or background. */
.di-c-text-btn { background: none; color: #444; font-weight: bold; text-decoration: underline; border: 0; padding: 0; cursor: pointer; -webkit-transition: background 0.2s ease; transition: background 0.2s ease; }

.di-c-text-btn:hover, .di-c-text-btn:focus { color: #808080; }

/*------------------------------------*\ #BUTTON GROUP \*------------------------------------*/
/** 1) A button group displays buttons side-by-side. */
.di-c-btn-group { display: -webkit-box; display: -ms-flexbox; display: flex; /** Button group within article meta share */ }

.di-c-article__meta-share .di-c-btn-group { margin-bottom: 1rem; padding: 0.25rem 0; }

@media all and (min-width: 46.8em) { .di-c-article__meta-share .di-c-btn-group { padding-right: 1rem; margin-bottom: 0; margin-right: 1rem; border-right: 1px solid #ddd; } }

/** Responsive button group 1) A button group that is in a column on small screens but side by side when there is enough room */
.di-c-btn-group--responsive { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }

@media all and (min-width: 24em) { .di-c-btn-group--responsive { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } }

/*------------------------------------*\ #CARD \*------------------------------------*/
/** 1) A card is a block of media followed by a body of text in a vertical format */
.di-c-card { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; position: relative; padding: 1rem 0 2rem; }

.di-l-band--dark .di-c-card { color: #fff; }

/** Card Header */
.di-c-card__header { margin-bottom: 1rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: #7EA4AB; }

/** Card Body */
.di-c-card__body { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; }

/** Card title container */
.di-c-card__title-container { position: relative; margin-bottom: 1rem; margin-top: 1rem; /** Card within dark band */ /** Card within skew right section */ /** Card within page layout main */ }

.di-l-band--dark .di-c-card__title-container { margin-bottom: 1rem; }

.di-c-section--skew-right .di-c-card__title-container { margin-right: 2rem; }

@media all and (min-width: 66em) { .di-c-card__title-container { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } }

@media all and (min-width: 66em) { .di-l-page-layout__main .di-c-card__title-container { margin-left: 4rem; } }

/** Card title container */
.di-c-card__number { position: absolute; left: -2rem; top: 5px; font-family: "Trade Gothic W02", "Trade Gothic W01", Helvetica, Arial, sans-serif; font-size: 0.85rem; font-weight: normal; text-transform: uppercase; text-align: center; letter-spacing: 0.15rem; color: #bbb; /** Card number within dark band */ /** Card number within card without an image */ /** Card number within page layout main */ /** Card number within card where text is above image */ }

.di-l-band--dark .di-c-card__number { color: #fff; }

.di-c-card--no-image .di-c-card__number { top: 13px; }

@media all and (min-width: 66em) { .di-l-page-layout__main .di-c-card__number { left: -4rem; } }

.di-c-card--text-above .di-c-card__number { top: -7px; }

/** Card di-c-card__date 1) Similar to number but formatted differently. Used for event dates */
.di-c-card__date { position: absolute; left: -2.5rem; top: 5px; font-family: "Trade Gothic W02", "Trade Gothic W01", Helvetica, Arial, sans-serif; font-size: 0.85rem; font-weight: normal; text-transform: uppercase; text-align: center; letter-spacing: 1px; color: #bbb; /** Card date within dark band */ /** Card date within card without image */ /** Card date within page layout main */ /** Card date within card with text above the image */ }

.di-l-band--dark .di-c-card__date { color: #fff; }

.di-c-card--no-image .di-c-card__date { top: 13px; }

@media all and (min-width: 66em) { .di-l-page-layout__main .di-c-card__date { left: -4rem; } }

.di-c-card--text-above .di-c-card__date { top: -10px; }

/** Card date month */
.di-c-card__date-month { display: block; font-size: 0.85rem; line-height: 1.1; }

/** Card date day */
.di-c-card__date-day { display: block; font-size: 1.2rem; line-height: 1.1; }

/** Card date year */
.di-c-card__date-year { display: block; font-size: 0.75rem; line-height: 1.1; }

/** Card title */
.di-c-card__title { display: inline; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0 0 1rem 0; font-size: 1.4375rem; font-weight: bold; /** Card title within card list item when JS is active 1) Before is used to hide the text until .js-animate swipes the panel to reveal the text */ /** Card title within card list item when JS is active and sidebar has animated */ /** Card title within card without image */ }

.js .di-c-card-list__item .di-c-card__title:before { content: ''; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: #fff; z-index: 1; }

.js.js-animate .di-c-card-list__item .di-c-card__title:before { right: 0; width: 0; left: auto; -webkit-transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 1.2s; transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 1.2s; }

.di-u-no-animation .di-c-card__title:before { content: none !important; }

.di-c-card--no-image .di-c-card__title { font-size: 2rem; }

/** Card Title Text */
.di-c-card__title-text { display: inline-block; position: relative; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; /** Card title text within dark band */ /** Card title text animation initialization 1) Used for the hover states with crimson background */ }

.di-u-no-animation .di-c-card__title-text { -webkit-transition: none !important; transition: none !important; }

.di-l-band--dark .di-c-card__title-text { color: #fff; }

.di-c-card__title-text:before { content: ''; display: block; position: absolute; top: 0; right: 0; height: 100%; width: 0; background: #A51534; -webkit-transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1); transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1); z-index: -1; }

.di-c-card__title-text:hover, .di-c-card__title-text:focus { color: #fff; }

.di-c-card__title-text:hover:before, .di-c-card__title-text:focus:before { width: 100%; left: 0; }

.di-c-card__title-text--teal:before { background: #3BC1C7; }

.di-c-card__title-text--blue:before { background: #668B99; }

/** Card Link Text 1) Used to add the bottom border so hover state on card headlines works right */
.di-c-card__link-text { display: inline; border-bottom: 1px solid #A51534; }

.di-c-card__link-text--teal { border-bottom-color: #3BC1C7; }

.di-c-card__link-text--blue { border-bottom-color: #668B99; }

/** Card Footer */
.di-c-card__footer { /** Card Footer within skewed right section */ /** Card Footer within page layout main */ }

.di-c-section--skew-right .di-c-card__footer { margin-right: 2rem; }

@media all and (min-width: 66em) { .di-l-page-layout__main .di-c-card__footer { margin-left: 4rem; } }

/** Card description */
.di-c-card__desc { margin-bottom: 0; }

/** Card Actions 1) Card actions is a container for links and buttons within a card. */
.di-c-card__actions { margin-top: 1rem; }

/** Card meta */
.di-c-card__meta { margin: 0.5rem 0; font-weight: bold; color: #7EA4AB; /** Card meta within dark band */ }

.di-l-band--dark .di-c-card__meta { color: #fff; }

/** Card icon */
.di-c-card__icon { margin-left: auto; }

/** Card image 1) Enforcing a max-height to account for especially tall photos */
.di-c-card__image { max-height: 400px; }

/*------------------------------------*\ #CARD LIST \*------------------------------------*/
/** 1) A list of cards */
/** Card list item */
.di-c-card-list__item { border-top: 1px solid #eee; padding-top: 1rem; /** First card list item */ /** Second card list item */ /** Third card list item */ /** Fourth card list item */ }

.di-c-card-list__item:first-child { border-top: none; -webkit-animation: slideUp 2.5s ease 0s 1; animation: slideUp 2.5s ease 0s 1; }

.di-c-card-list__item:nth-child(2) { -webkit-animation: slideUp 3s ease 0s 1; animation: slideUp 3s ease 0s 1; }

.di-c-card-list__item:nth-child(3) { -webkit-animation: slideUp 3.5s ease 0s 1; animation: slideUp 3.5s ease 0s 1; }

.di-c-card-list__item:nth-child(4) { -webkit-animation: slideUp 4s ease 0s 1; animation: slideUp 4s ease 0s 1; }

@media all and (min-width: 46.8em) { .di-c-card-list__item { border-top: none; } }

/*------------------------------------*\ #CAROUSEL \*------------------------------------*/
/** 1) A carousel is an container where you use pagination to navigate through various items inside the container */
/** Carousel fraction 1) Houses the fraction that shows what number item out of total items you are currently on */
.di-c-carousel__fraction { position: absolute; top: 53px; left: -27px; font-family: "Trade Gothic W02", "Trade Gothic W01", Helvetica, Arial, sans-serif; font-weight: normal; text-transform: uppercase; text-align: center; letter-spacing: 0.15rem; color: #bbb; }

@media all and (min-width: 29.75em) { .di-c-carousel__fraction { left: 24px; } }

/** Carousel numerator 1) Shows what carousel item you are on */
.di-c-carousel__numerator { color: #131313; display: block; }

/** Carousel bar 1) Bar of the fraction */
.di-c-carousel__bar { width: 1.15em; height: 1px; background: #bbb; display: block; }

/** Carousel denominator 1) Shows total number of items in carousel */
.di-c-carousel__denominator { display: block; }

/** Carousel image */
.di-c-carousel__link { display: inline-block; -webkit-transition: border-color 0.4s ease-in-out; transition: border-color 0.4s ease-in-out; }

.di-c-carousel__link:focus { outline: auto 5px !important; }

.di-c-carousel__image { display: block; width: 210px; }

.di-c-carousel__navigation { position: relative; }

.di-c-carousel__navigation .di-c-headline-link { position: absolute; top: 0.5em; opacity: 1; visibility: visible; font-weight: 700; }

.di-c-carousel__navigation .di-c-headline-link[aria-disabled="true"] { pointer-events: none; opacity: 0; visibility: hidden; }

.di-c-carousel__navigation .di-c-headline-link--previous { left: 1rem; }

@media (min-width: 29.75em) { .di-c-carousel__navigation .di-c-headline-link--previous { left: 64px; } }

.di-c-carousel__navigation .di-c-headline-link--previous .di-c-headline-link__icon { margin-right: 0.5rem; margin-left: 0; }

.di-c-carousel__navigation .di-c-headline-link--previous:hover .di-c-headline-link__icon, .di-c-carousel__navigation .di-c-headline-link--previous:focus .di-c-headline-link__icon { -webkit-transform: translateX(-4px); transform: translateX(-4px); }

.di-c-carousel__navigation .di-c-headline-link--next { right: 1rem; }

@media (min-width: 29.75em) { .di-c-carousel__navigation .di-c-headline-link--next { right: 64px; } }

.di-c-carousel__navigation .di-c-headline-link__link { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; border-radius: 0; background: transparent; padding: 0; font-family: "Trade Gothic W02", "Trade Gothic W01", Helvetica, Arial, sans-serif; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.05rem; }

.di-c-carousel__navigation .di-c-headline-link__link:hover, .di-c-carousel__navigation .di-c-headline-link__link:focus { color: #A51534; outline: none; }

/** Carousel track 1) Container of the carousel progress bar */
.di-c-carousel__track { background: #D8D8D8; height: 4px; position: relative; margin: 1em auto 3em; width: calc(100% - 2rem); }

@media (min-width: 29.75em) { .di-c-carousel__track { width: calc(100% - 128px); } }

/** Carousel progress bar */
.di-c-carousel__progressBar { background: #A51534; height: 4px; position: absolute; left: 0; top: 0; -webkit-transition: -webkit-transform 300ms ease-in-out; transition: -webkit-transform 300ms ease-in-out; transition: transform 300ms ease-in-out; transition: transform 300ms ease-in-out, -webkit-transform 300ms ease-in-out; }

/** Carousel list */
.di-c-carousel__list--images .flickity-slider { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; }

.di-c-carousel__list--images .flickity-slider .di-c-carousel__item { width: 210px; padding: 0.5em; }

.di-c-carousel__list--contents { position: relative; }

/* Hack to disable Flickity flexbox on IE10+ */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { .di-c-carousel__list--images .flickity-slider { display: block !important; } }

/** Carousel item */
.js .di-c-carousel__item { opacity: 1; visibility: visible; position: absolute; -webkit-transition-property: opacity, visibility; transition-property: opacity, visibility; -webkit-transition-duration: 300ms; transition-duration: 300ms; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; }

.di-c-carousel__item[aria-hidden="true"] { opacity: 0; visibility: hidden; }

/** Carousel content */
.js .di-c-carousel__content { padding: 0; max-width: 700px; }

@media all and (min-width: 29.75em) { .js .di-c-carousel__content { padding: 0px 64px; } }

/** Carousel headline */
.di-c-carousel__headline { font-size: 1.4375rem; letter-spacing: 0; text-transform: none; }

/** Carousel headline link 1) Link within the carousel headline */
.di-c-carousel__headline-link { display: inline-block; position: relative; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; /** Used for the crimson background hover state */ }

.di-c-carousel__headline-link:before { content: ''; display: block; position: absolute; top: 0; right: 0; height: 100%; width: 0; background: #A51534; -webkit-transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1); transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1); z-index: -1; }

.di-c-carousel__headline-link:hover, .di-c-carousel__headline-link:focus { color: #fff; }

.di-c-carousel__headline-link:hover:before, .di-c-carousel__headline-link:focus:before { width: 100%; left: 0; }

/** Carousel image container images 1) List of images */
.di-c-carousel__headline-link-text { display: inline; border-bottom: 1px solid #A51534; }

/*------------------------------------*\ #CAROUSEL2 \*------------------------------------*/
/** 1) A carousel is an container where you use pagination to navigate through various items inside the container */
.di-c-carousel2 { /** Carousel after pseduoelement */ }

.di-c-carousel2:focus { outline: none; }

.di-c-carousel2:after { content: ""; display: table; clear: both; }

.js .di-c-carousel2 { width: 100%; }

/** Carousel fraction 1) Houses the fraction that shows what number item out of total items you are currently on */
.di-c-carousel2__fraction { position: absolute; top: 0; left: -27px; font-family: "Trade Gothic W02", "Trade Gothic W01", Helvetica, Arial, sans-serif; font-weight: normal; text-transform: uppercase; text-align: right; letter-spacing: 0.15rem; color: #bbb; }

@media all and (min-width: 29.75em) { .di-c-carousel2__fraction { left: 24px; } }

/** Carousel numerator 1) Shows what carousel item you are on */
.di-c-carousel2__numerator { color: #131313; }

/** Carousel bar 1) Bar of the fraction */
.di-c-carousel2__bar { position: absolute; top: 1.6em; right: 0.1em; width: 1.15em; height: 1px; background: #bbb; }

/** Carousel denominator 1) Shows total number of items in carousel */
.di-c-carousel2__denominator { position: absolute; top: 2em; right: 0; }

/** Carousel fade in 1) Added to active carousel text to show it */
.di-c-carousel2__fadeIn { -webkit-transition: opacity 0.5s; transition: opacity 0.5s; opacity: 1 !important; }

/** Carousel fade out 1) Added to inactive carousel text to remove visibility and place behind active item */
.di-c-carousel2__fadeOut { pointer-events: none; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; opacity: 0 !important; z-index: -1; }

/** Carousel slight fade 1) Slight fade added to the carousel inactive images to show transparency */
.di-c-carousel2__slightFade { -webkit-transition: opacity 0.5s; transition: opacity 0.5s; opacity: 0.4 !important; }

/** Carousel fully opaque 1) Added to active image to differentiate it from inactive images */
.di-c-carousel2__fullyOpaque { -webkit-transition: opacity 0.5s; transition: opacity 0.5s; opacity: 1 !important; }

/** Carousel text container */
.di-c-carousel2__textContainer { position: relative; width: 100%; }

/** Carousel image container */
.di-c-carousel2__imageContainer { overflow-x: hidden; width: 100%; margin-bottom: 2em; padding-left: 0; cursor: ew-resize; /** Carousel image container images 1) List of images */ }

.di-c-carousel2__imageContainer__images { width: 6000px; overflow: scroll; -ms-overflow-style: none; }

@media all and (min-width: 29.75em) { .di-c-carousel2__imageContainer { padding-left: 64px; } }

/** Carousel image */
.di-c-carousel2__image { width: 210px; display: inline-block; margin-right: 16px; vertical-align: bottom; -webkit-user-select: none; -moz-user-select: -moz-none; -ms-user-select: none; user-select: none; pointer-events: none; margin-bottom: 1em; }

.js .di-c-carousel2__image { margin-bottom: 0; }

/** Carousel track 1) Container of the carousel progress bar */
.di-c-carousel2__track { background: #D8D8D8; height: 4px; position: relative; margin: 0 auto 2em; width: calc(100% - 128px); }

/** Carousel progress bar */
.di-c-carousel2__progressBar { background: #A51534; height: 4px; position: absolute; left: 0; top: 0; }

/** Carousel list */
.js .di-c-carousel2__list { width: 6000px; }

/** Carousel item */
.di-c-carousel2__item { margin-bottom: 1em; }

.js .di-c-carousel2__item { float: left; margin-right: 1em; width: 210px; }

/** Carousel content */
.js .di-c-carousel2__content { opacity: 0; padding: 0; position: absolute; top: 0; max-width: 700px; }

@media all and (min-width: 29.75em) { .js .di-c-carousel2__content { padding: 0px 64px; } }

/** Carousel headline */
.di-c-carousel2__headline { font-size: 1.4375rem; letter-spacing: 0; text-transform: none; }

/** Carousel headline link 1) Link within the carousel headline */
.di-c-carousel2__headline-link { display: inline-block; position: relative; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; /** Used for the crimson background hover state */ }

.di-c-carousel2__headline-link:before { content: ''; display: block; position: absolute; top: 0; right: 0; height: 100%; width: 0; background: #A51534; -webkit-transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1); transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1); z-index: -1; }

.di-c-carousel2__headline-link:hover, .di-c-carousel2__headline-link:focus { color: #fff; }

.di-c-carousel2__headline-link:hover:before, .di-c-carousel2__headline-link:focus:before { width: 100%; left: 0; }

/** Carousel image container images 1) List of images */
.di-c-carousel2__headline-link-text { display: inline; border-bottom: 1px solid #A51534; }

/*------------------------------------*\ #CONVERSATION \*------------------------------------*/
/** 1) Block containing two or more quotes from contradicting articles */
.di-c-conversation { padding: 2rem 0 4rem; background: #eee; }

.di-c-section--skew-right .di-c-conversation { margin-left: -4.5rem; padding-left: 4.5rem; }

/** Conversation block 1) Block within the conversation representing an article */
.di-c-conversation__block { width: 75%; padding: 1rem; background: #fff; }

@supports (display: grid) { .di-c-conversation__block { width: 100%; } }

/** Conversation title container */
.di-c-conversation__title-container { position: relative; margin-bottom: 1rem; /** Conversation title within page layout main */ }

@media all and (min-width: 66em) { .di-l-page-layout__main .di-c-conversation__title-container { margin-left: 4rem; } }

/** Conversation title */
.di-c-conversation__title { position: relative; position: relative; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); /** Conversation title container within card list item where JS is activated */ /** Conversation title within animated card list item */ }

.js .di-c-card-list__item .di-c-conversation__title:before { content: ''; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: #eee; z-index: 1; }

.js.js-animate .di-c-card-list__item .di-c-conversation__title:before { right: 0; width: 0; left: auto; -webkit-transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 1.5s; transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 1.5s; }

/** Conversation number */
.di-c-conversation__number { position: absolute; left: -2rem; top: 5px; font-family: "Trade Gothic W02", "Trade Gothic W01", Helvetica, Arial, sans-serif; font-size: 0.85rem; font-weight: normal; text-transform: uppercase; text-align: center; letter-spacing: 0.15rem; color: #bbb; }

@media all and (min-width: 66em) { .di-l-page-layout__main .di-c-conversation__number { left: -4rem; } }

/** Conversation title kicker */
.di-c-conversation__kicker { display: block; font-size: 1.2rem; font-family: "Trade Gothic W02", "Trade Gothic W01", Helvetica, Arial, sans-serif; font-weight: normal; text-transform: uppercase; letter-spacing: 0.05rem; color: #AEB299; margin-bottom: 1rem; /** Conversation title kicker within page layout main */ }

@media all and (min-width: 66em) { .di-l-page-layout__main .di-c-conversation__kicker { margin-left: 4rem; } }

/** Conversation Title */
.di-c-conversation__block-title { display: inline; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0 0 1rem 0; font-size: 1rem; font-weight: bold; border-bottom: 1px solid #A51534; }

/** Conversation block excerpt */
.di-c-conversation__block-excerpt { font-size: 0.85rem; }

/** Conversation list 1) The actual list of conversation blocks */
.di-c-conversation__list { /** Conversation list within skewed right section */ }

.di-c-section--skew-right .di-c-conversation__list { margin-right: 2rem; }

/*------------------------------------*\ #COUNTDOWN \*------------------------------------*/
/** 1) Time countdown created by JS calculating weeks, days, hours, and minutes until a set point */
.di-c-countdown { display: block; margin-bottom: 1rem; }

/** Countdown list */
.di-c-countdown__list { display: -webkit-box; display: -ms-flexbox; display: flex; max-width: 30rem; }

/** Countdown list item */
.di-c-countdown__item { margin-right: 2rem; text-align: center; font-size: 1.4375rem; /** Last countdown list item */ }

.di-c-countdown__item:last-child { margin-right: 0; }

/** Countdown label */
.di-c-countdown__label { display: block; color: #A51534; font-size: 0.65rem; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; }

/*------------------------------------*\ #DATE \*------------------------------------*/
/** 1) Current date displayed on larger screens */
.di-c-date { display: block; font-family: "Trade Gothic W02", "Trade Gothic W01", Helvetica, Arial, sans-serif; letter-spacing: 1px; text-transform: uppercase; }

@media all and (min-width: 66em) { .di-c-date { position: absolute; top: 24rem; left: -3.4rem; width: 14rem; text-align: right; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); z-index: 2; } }

@media all and (min-height: 1088px) { .di-c-date { top: 26rem; } }

.di-l-vertical-band .di-c-date { display: none; }

@media all and (min-width: 66em) { .di-l-vertical-band .di-c-date { display: block; } }

/*------------------------------------*\ #FIELDS \*------------------------------------*/
/** 1) Form field */
.di-c-field { margin-bottom: 1rem; position: relative; }

@media all and (min-width: 70em) { .di-c-section--responsive .di-c-field { padding-right: 2rem; width: 50%; }
  .di-c-section--responsive .di-c-field:last-of-type { padding-right: 0; } }

/** Field label */
.di-c-field__label { margin-bottom: 0.2rem; }

/** Field input */
.di-c-field__input { position: relative; z-index: 1; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }

/*------------------------------------*\ #FLICKITY #v2.1.1 #https://flickity.metafizzy.co \*------------------------------------*/
.flickity-enabled { position: relative; }

.flickity-enabled:focus { outline: none; }

.flickity-viewport { overflow: hidden; position: relative; height: 100%; }

.flickity-slider { position: absolute; width: 100%; height: 100%; }

/* draggable */
.flickity-enabled.is-draggable { -webkit-tap-highlight-color: transparent; tap-highlight-color: transparent; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.flickity-enabled.is-draggable .flickity-viewport { cursor: move; cursor: -webkit-grab; cursor: grab; }

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down { cursor: -webkit-grabbing; cursor: grabbing; }

/* ---- flickity-button ---- */
.flickity-button { position: absolute; background: rgba(255, 255, 255, 0.75); border: none; color: #333; }

.flickity-button:hover { background: white; cursor: pointer; }

.flickity-button:focus { outline: none; -webkit-box-shadow: 0 0 0 5px #19F; box-shadow: 0 0 0 5px #19F; }

.flickity-button:active { opacity: 0.6; }

.flickity-button:disabled { opacity: 0.3; cursor: auto; /* prevent disabled button from capturing pointer up event. #716 */ pointer-events: none; }

.flickity-button-icon { fill: #333; }

/* ---- previous/next buttons ---- */
.flickity-prev-next-button { top: 50%; width: 44px; height: 44px; border-radius: 50%; /* vertically center */ -webkit-transform: translateY(-50%); transform: translateY(-50%); }

.flickity-prev-next-button.previous { left: 10px; }

.flickity-prev-next-button.next { right: 10px; }

/* right to left */
.flickity-rtl .flickity-prev-next-button.previous { left: auto; right: 10px; }

.flickity-rtl .flickity-prev-next-button.next { right: auto; left: 10px; }

.flickity-prev-next-button .flickity-button-icon { position: absolute; left: 20%; top: 20%; width: 60%; height: 60%; }

/* ---- page dots ---- */
.flickity-page-dots { position: absolute; width: 100%; bottom: -25px; padding: 0; margin: 0; list-style: none; text-align: center; line-height: 1; }

.flickity-rtl .flickity-page-dots { direction: rtl; }

.flickity-page-dots .dot { display: inline-block; width: 10px; height: 10px; margin: 0 8px; background: #333; border-radius: 50%; opacity: 0.25; cursor: pointer; }

.flickity-page-dots .dot.is-selected { opacity: 1; }

/*------------------------------------*\ #FOOTER NAVIGATION \*------------------------------------*/
/** 1) Navigation within the footer */
.di-c-footer-nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-wrap: wrap; flex-wrap: wrap; }

@media all and (min-width: 29.75em) { .di-c-footer-nav { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } }

/** Footer navigation item */
.di-c-footer-nav__item { margin-bottom: 1rem; }

@media all and (min-width: 29.75em) { .di-c-footer-nav__item { width: inherit; margin-right: 1rem; } }

/** Footer navigation link */
.di-c-footer-nav__link { display: block; line-height: 1; color: #fff; font-weight: bold; -webkit-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; }

.di-c-footer-nav__link:hover, .di-c-footer-nav__link:focus { color: #bbb; }

/*------------------------------------*\ $FOOTER \*------------------------------------*/
/** 1) Global block at the bottom of each page that contains a navigation and other information */
.di-c-footer { -ms-flex-negative: 0; flex-shrink: 0; padding: 4rem 0; margin-top: auto; background: #000; z-index: 1; }

/** Footer inner */
.di-c-footer__inner { margin: 0 2rem 0 3.5rem; }

@media all and (min-width: 66em) { .di-c-footer__inner { margin: 0 12rem; } }

.di-l-page-layout--two-column-fixed .di-c-footer__inner { margin: 0 2rem 0 3.5rem; }

@media all and (min-width: 66em) { .di-l-page-layout--two-column-fixed .di-c-footer__inner { margin: 0 2rem 0 3.5rem; } }

/** Container for footer elements that are on the left side on larger screens 1) Display flex is used on footer inner to position this on the left */
@media all and (min-width: 46.8em) { .di-c-footer__bottom { display: -webkit-box; display: -ms-flexbox; display: flex; } }

/** Footer tagline */
.di-c-footer__tagline { color: #fff; margin-bottom: 0; /** Link within the footer tagline */ }

.di-c-footer__tagline a { color: #fff; font-weight: bold; }

.di-c-footer__tagline a:hover, .di-c-footer__tagline a:focus { color: #808080; }

/** Container for footer elements that are on the left side on larger screens 1) Display flex is used on footer inner to position this on the left */
@media all and (min-width: 46.8em) { .di-c-footer__left { width: 50%; margin-right: 2rem; } }

/** Container for footer elements that are on the right side on larger screens 1) Display flex is used on footer inner to position this on the right */
@media all and (min-width: 46.8em) { .di-c-footer__right { margin-left: auto; } }

/** Footer title 1) Title of the footer section */
.di-c-footer__title { font-size: 1rem; line-height: 1; color: #fff; font-weight: bold; }

/** Footer link Used for maps and email items */
.di-c-footer__link { color: #fff; /** Link within footer link */ }

.di-c-footer__link a { color: #fff; font-weight: bold; }

.di-c-footer__link a:hover, .di-c-footer__link a:focus { color: #808080; }

/** Footer copyright */
.di-c-footer__legal { color: #fff; margin-bottom: 0; }

/*------------------------------------*\ #FORMS \*------------------------------------*/
/** 1) Global block at the bottom of each page that contains a navigation and other information */
.di-c-form, .wpcf7 { /** Form within responsive section */ /** Form within skew-right section */ }

@media all and (min-width: 50em) { .di-c-section--responsive .di-c-form, .di-c-section--responsive .wpcf7 { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } }

@media all and (min-width: 70em) { .di-c-section--responsive .di-c-form, .di-c-section--responsive .wpcf7 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 50%; margin-left: auto; } }

.di-c-section--skew-right .di-c-form, .di-c-section--skew-right .wpcf7 { margin-right: 2rem; }

/*------------------------------------*\ #WORDPRESS FORMS \*------------------------------------*/
/** Remove not valid tip from WP contact form */
span.wpcf7-not-valid-tip { display: none !important; }

/** Add red borde to text field input when form is not valid */
.di-c-field__input.wpcf7-not-valid { border: 2px solid #A51534 !important; }

/** Block that contains the form error message */
.wpcf7-response-output.wpcf7-validation-errors { display: block !important; position: absolute !important; padding: 0.2rem 0.75rem !important; margin: 0.5rem 0 0 0; background: #A51534 !important; border: none; color: #fff !important; font-size: 0.85rem !important; font-weight: bold !important; }

/** Block that contains the form success message */
.wpcf7-response-output.wpcf7-mail-sent-ok { display: block !important; position: absolute !important; padding: 0.2rem 0.75rem !important; margin: 0.5rem 0 0 0; background: #03804d !important; border: none; color: #fff !important; font-size: 0.85rem !important; font-weight: bold !important; }

/** Input group body */
.di-c-input-group__body { /** Display none once the form is sent so user can't submit again */ }

.di-c-input-group.wpcf7-form.sent .di-c-input-group__body { display: none !important; }

/** Added second ajax loader to include our own loader SVG */
.ajax-loader { position: relative; background-image: none !important; width: auto !important; height: auto !important; margin: 0 !important; }

/*------------------------------------*\ #HBS HEADER \*------------------------------------*/
/** Header that displays the Harvard Business School Logo at the top */
.di-c-hbs-header { position: relative; background: #eee; width: 100%; z-index: 3; }

@media all and (min-width: 66em) { .di-c-hbs-header { position: fixed; top: 0; } }

/** HBS Header inner */
.di-c-hbs-header__inner { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0.25rem 1rem 0.25rem 1rem; height: 2rem; }

/*------------------------------------*\ #HEADER \*------------------------------------*/
/** Global header at the top of each page containing the navigation, logo, and other potential contents */
.di-c-header { position: relative; z-index: 3; margin-bottom: 2rem; pointer-events: none; }

@media all and (min-width: 66em) and (min-height: 0px) { .di-c-header { position: fixed; width: 100%; top: 1.5rem; }
  .di-c-header.di-is-active { height: 6rem; } }

@media all and (min-width: 66em) and (min-height: 1088px) { .di-c-header { top: 2rem; } }

/** Vertical header variation */
.di-c-header--vertical { margin-bottom: 0; }

@media all and (min-width: 66em) { .di-c-header--vertical { position: relative; top: 0; width: 20rem; min-height: 100%; overflow: auto; border-right: 1px solid #eee; background: rgba(250, 249, 242, 0.98); } }

/** Header inner */
.di-c-header__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; padding: 1rem; /** Header inner within vertical header */ }

.di-c-header--vertical .di-c-header__inner { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }

@media all and (min-width: 66em) { .di-c-header--vertical .di-c-header__inner { padding: 0; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; min-height: 100vh; } }

@media all and (min-width: 66em) { .di-c-header__inner { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } }

/** Change the positioning on IE 10+ because it positions after differently */
@media all and (-ms-high-contrast: none) { .di-c-header__inner { height: 6rem; } }

@media all and (-ms-high-contrast: none) and (min-width: 66em) { .di-c-header__inner { height: auto; } }

/** Header left container */
.di-c-header__left-container { position: relative; }

.di-c-header--vertical .di-c-header__left-container { width: 100%; }

@media all and (min-width: 66em) { .di-c-header--vertical .di-c-header__left-container { padding: 2rem 1rem; } }

@media all and (min-width: 66em) and (min-height: 1088px) { .di-c-header__left-container { top: 1rem; } }

/** Header navigation button 1) Button used to toggle the navigation on/off on small screens */
.di-c-header__nav-btn { margin-left: auto; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 1rem 0.5rem; height: 4rem; background: #fff; font-size: 0.65rem; letter-spacing: 1px; overflow: hidden; pointer-events: all; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; /** Header nav button within active header */ /** Header navigation button within vertical header */ }

.di-c-header__nav-btn:hover, .di-c-header__nav-btn:focus { background: #fff; }

.di-c-header.di-is-active .di-c-header__nav-btn { color: #fff; background: transparent; }

@media all and (min-width: 66em) { .di-c-header--vertical .di-c-header__nav-btn { display: none; background: #fff; } }

/** Header title */
.di-c-header__title { color: #A51534; margin-bottom: 2rem; }

/** Header tagline */
.di-c-header__tagline { position: relative; color: #fff; max-width: 35rem; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); /** Link within header tagline */ /** Animate tagline when JS is activated */ /** Animate tagline when JS is activated */ }

.di-c-header__tagline a { color: #fff; font-weight: bold; }

.di-c-header__tagline a:hover, .di-c-header__tagline a:focus { color: #808080; }

.js .di-c-header .di-c-header__tagline:before { content: ''; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: #000; -webkit-transition: all 0s cubic-bezier(0.42, 0, 0.58, 1) 0s; transition: all 0s cubic-bezier(0.42, 0, 0.58, 1) 0s; z-index: 1; }

.js .di-c-header.di-is-active .di-c-header__tagline:before { right: 0; width: 0; left: auto; -webkit-transition: width 1.2s cubic-bezier(0.77, 0, 0.175, 1) 0.3s; transition: width 1.2s cubic-bezier(0.77, 0, 0.175, 1) 0.3s; }

@media all and (min-width: 50em) { .di-c-header__tagline { font-size: 1.2rem; } }

/** Animate tagline differently in IE 10+ */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .js .di-c-header .di-c-header__tagline { opacity: 0; -webkit-transform: translateX(-1rem); transform: translateX(-1rem); -webkit-transition: all 0s ease-in-out; transition: all 0s ease-in-out; }
  .js .di-c-header .di-c-header__tagline:before { content: none; }
  .js .di-c-header.di-is-active .di-c-header__tagline { opacity: 1; -webkit-transform: translateX(0rem); transform: translateX(0rem); -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; }
  .js .di-c-header.di-is-active .di-c-header__tagline:before { content: none; } }

/** Animate tagline differently in Edge */
@supports (-ms-accelerator: true) { .js .di-c-header .di-c-header__tagline { opacity: 0; -webkit-transform: translateX(-1rem); transform: translateX(-1rem); -webkit-transition: all 0s ease-in-out; transition: all 0s ease-in-out; }
  .js .di-c-header .di-c-header__tagline:before { content: none; }
  .js .di-c-header.di-is-active .di-c-header__tagline { opacity: 1; -webkit-transform: translateX(0rem); transform: translateX(0rem); -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; }
  .js .di-c-header.di-is-active .di-c-header__tagline:before { content: none; } }

/** Animate tagline differently in Edge */
@supports (-ms-ime-align: auto) { .js .di-c-header .di-c-header__tagline { opacity: 0; -webkit-transform: translateX(-1rem); transform: translateX(-1rem); -webkit-transition: all 0s ease-in-out; transition: all 0s ease-in-out; }
  .js .di-c-header .di-c-header__tagline:before { content: none; }
  .js .di-c-header.di-is-active .di-c-header__tagline { opacity: 1; -webkit-transform: translateX(0rem); transform: translateX(0rem); -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; }
  .js .di-c-header.di-is-active .di-c-header__tagline:before { content: none; } }

/*------------------------------------*\ #HEADLINE LINK \*------------------------------------*/
/** 1) Heading that can serve as a headline with or without a link */
.di-c-headline-link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; /** Headline link within media block */ }

.di-c-media-block .di-c-headline-link { margin-top: 2rem; }

/** Teal headline link */
.di-c-headline-link--teal, .di-c-headline-link--blue { display: inline-block; margin: 0 0.5rem; }

/** Headline link text */
.di-c-headline-link__text { display: inline; margin-bottom: 1rem; font-family: "Trade Gothic W02", "Trade Gothic W01", Helvetica, Arial, sans-serif; font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0.05rem; /** Headline link text within a teal/blue headline link */ /** Teal variant 1) Box shadow added to include padding on the inline text without breaking the lines of text */ /** Blue variant 1) Box shadow added to include padding on the inline text without breaking the lines of text */ /** Headline link text within white headline link */ /** Headline link text within crimson headline link */ /** Headline link text within a large headline link */ /** Headline link text within a small headline link */ }

.di-c-headline-link--blue .di-c-headline-link__text, .di-c-headline-link--teal .di-c-headline-link__text { padding: 0.7rem 0 0.5rem; border-bottom: none; color: #fff; line-height: 1.5; font-family: "Trade Gothic W01", Helvetica, Arial, sans-serif; -webkit-animation: fadeSlideIn 3s ease 0s 1; animation: fadeSlideIn 3s ease 0s 1; }

.di-c-headline-link--teal .di-c-headline-link__text { -webkit-box-shadow: 0.5rem 0 0 #3BC1C7, -0.5rem 0 0 #3BC1C7; box-shadow: 0.5rem 0 0 #3BC1C7, -0.5rem 0 0 #3BC1C7; /* 1 */ background: #3BC1C7; }

.di-c-headline-link--blue .di-c-headline-link__text { -webkit-box-shadow: 0.5rem 0 0 #668B99, -0.5rem 0 0 #668B99; box-shadow: 0.5rem 0 0 #668B99, -0.5rem 0 0 #668B99; /* 1 */ background: #668B99; }

.di-c-headline-link--white .di-c-headline-link__text { border-bottom: none; margin-bottom: 0; font-family: "Trade Gothic W01", Helvetica, Arial, sans-serif; }

.di-c-headline-link--crimson .di-c-headline-link__text { border-bottom: none; }

.di-c-headline-link--large .di-c-headline-link__text { font-size: 1.4375rem; }

.di-c-headline-link--small .di-c-headline-link__text { font-size: 1rem; }

/** Headline link text  within firefox only 1) Used to set the headline link to display block since firefox doesn't support the box-shadow for padding when lines wrap */
@-moz-document url-prefix() { .di-c-headline-link--teal .di-c-headline-link__text { display: block; padding: 0.7rem 0.5rem 0.5rem 0.5rem; } }

/** Link within a headline link */
.di-c-headline-link__link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #000; position: relative; /** Link within a teal headlin link */ /** Link within a white headline link */ /** Link within a crimson headline link */ /** Link within a lined headline link */ }

.di-c-headline-link--teal .di-c-headline-link__link, .di-c-headline-link--blue .di-c-headline-link__link { display: inline; color: #fff; }

.di-c-headline-link--teal .di-c-headline-link__link:hover, .di-c-headline-link--teal .di-c-headline-link__link:focus, .di-c-headline-link--blue .di-c-headline-link__link:hover, .di-c-headline-link--blue .di-c-headline-link__link:focus { color: #fff; }

.di-c-headline-link--white .di-c-headline-link__link { color: #fff; }

.di-c-headline-link--crimson .di-c-headline-link__link { color: #A51534; }

.di-c-headline-link--lined .di-c-headline-link__link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; /** Swipe hover/focus animation for the lined headline link */ }

.di-c-headline-link--lined .di-c-headline-link__link:before { width: 0; content: ''; position: absolute; left: 54%; height: 100%; padding: 1rem 0; overflow: hidden; -webkit-transform: translateX(-50%); transform: translateX(-50%); background: #A51534; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }

.di-c-headline-link--lined .di-c-headline-link__link:hover, .di-c-headline-link--lined .di-c-headline-link__link:focus { color: #000; }

.di-c-headline-link--lined .di-c-headline-link__link:hover:before, .di-c-headline-link--lined .di-c-headline-link__link:focus:before { width: 50%; }

/** Headline link headline 1) Border bottom added to this so hover/focus animation can work properly */
.di-c-headline-link__headline { border-bottom: 1px solid #A51534; /* 1 */ /** Headline link headline within teal and lined headline link 1) Don't display crimson bottom border */ /** Headline link headline within lined headline link */ }

.di-c-headline-link--teal .di-c-headline-link__headline, .di-c-headline-link--blue .di-c-headline-link__headline, .di-c-headline-link--lined .di-c-headline-link__headline { border-bottom: none; /* 1 */ }

.di-c-headline-link--lined .di-c-headline-link__headline { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 1; }

/** Headline link line */
.di-c-headline-link__headline:before { /** Headline link line 1) Used for the line to the left of the text */ /** Headline link line within hovered/focused headline link link */ /** Headline link line within white headline link */ }

.di-c-headline-link--lined .di-c-headline-link__headline:before { content: ''; display: block; height: 3px; width: 5rem; margin-right: 1rem; background: #000; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }

.di-c-headline-link__link:hover .di-c-headline-link__headline:before, .di-c-headline-link__link:focus .di-c-headline-link__headline:before { width: 0; }

.di-c-headline-link--white .di-c-headline-link__headline:before { background: #fff; }

/** Headline link line after text on hover */
.di-c-headline-link__headline:after { /** Headline link line after text within lined headline link */ /** Headline link line after text within headline hovered/focused link link */ /** Headline link line after text within white headline link */ }

.di-c-headline-link--lined .di-c-headline-link__headline:after { content: ''; display: block; height: 3px; width: 0; margin-left: 1rem; background: #000; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }

.di-c-headline-link__link:hover .di-c-headline-link__headline:after, .di-c-headline-link__link:focus .di-c-headline-link__headline:after { width: 5rem; }

.di-c-headline-link--white .di-c-headline-link__headline:after { background: #fff; }

/** Headline link icon */
.di-c-headline-link__icon { fill: #A51534; height: 12px; width: 12px; margin-left: 0.5rem; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; /** Headline link icon within teal and white headline links */ /** Headline link icon within hovered/focused headline link link */ /** Headline link icon within hovered/focused headline link link within lined headline link */ }

.di-c-headline-link--teal .di-c-headline-link__icon, .di-c-headline-link--blue .di-c-headline-link__icon, .di-c-headline-link--white .di-c-headline-link__icon { fill: #fff; }

.di-c-headline-link__link:hover .di-c-headline-link__icon, .di-c-headline-link__link:focus .di-c-headline-link__icon { -webkit-transform: translateX(4px); transform: translateX(4px); }

.di-c-headline-link--lined .di-c-headline-link__link:hover .di-c-headline-link__icon, .di-c-headline-link--lined .di-c-headline-link__link:focus .di-c-headline-link__icon { fill: #A51534; }

.di-c-link-list__text--white .di-c-headline-link__icon, .di-c-link-list__text--white:hover .di-c-headline-link__icon { fill: #fff; }

/*------------------------------------*\ #HERO \*------------------------------------*/
/** 1) Block containing headline, description text, that serves as a primary content area */
.di-c-hero { display: block; background-repeat: no-repeat; background-size: cover; background-position: 100% 100%; position: relative; margin-bottom: 1rem; }

/** Hero Image */
.di-c-hero__img { display: block; width: 100%; margin-bottom: 1rem; }

@media all and (min-width: 29.75em) { .di-c-hero__img { margin: 0; } }

/** Hero Body */
.di-c-hero__body { padding: 2rem 1rem; /** Blue tinted hero */ /** Red tinted hero */ }

.di-c-hero--blue-tint .di-c-hero__body { background: rgba(0, 0, 100, 0.4); }

.di-c-hero--red-tint .di-c-hero__body { background: rgba(100, 0, 0, 0.4); }

@media all and (min-width: 46.8em) { .di-c-hero__body { padding: 4rem 2rem; } }

@media all and (min-width: 66em) { .di-c-hero__body { padding: 5rem; } }

/** Hero Title */
.di-c-hero__title { max-width: 48rem; margin: 0 0 1rem auto; font-size: 2rem; text-align: right; }

@media all and (min-width: 46.8em) { .di-c-hero__title { margin: 0 0 2rem auto; font-size: 3rem; } }

/** Hero Description */
.di-c-hero__desc { margin-bottom: 2rem; margin-left: auto; max-width: 34rem; text-align: right; }

@media all and (min-width: 46.8em) { .di-c-hero__desc { font-size: 1.25rem; } }

/*------------------------------------*\ #ICON \*------------------------------------*/
/** 1) Small image that represents functionality */
.di-c-icon { height: 16px; width: 16px; }

/*------------------------------------*\ #FEATURED IMAGE STACKS \*------------------------------------*/
.di-c-stack { margin: 20px auto; max-width: 100%; padding: 0; position: relative; max-width: 100%; cursor: pointer; }

.di-c-stack__item { position: relative; top: 0; left: 0; -webkit-transition: all .75s ease-out; transition: all .75s ease-out; background: #fff; -webkit-transform-origin: top right; transform-origin: top right; width: 100%; max-height: 150px; overflow: hidden; display: block !important; /* Fade stacked items */ }

.di-c-stack__item:first-child { max-height: none; z-index: 2; }

.di-c-stack__item:nth-child(2) { display: block !important; position: absolute; z-index: 1; -webkit-transform: translate(0, -2vw) scale(0.97); transform: translate(0, -2vw) scale(0.97); }

.di-c-stack__item:nth-child(3) { display: block !important; position: absolute; z-index: 0; -webkit-transform: translate(0, -4vw) scale(0.94); transform: translate(0, -4vw) scale(0.94); }

.di-c-stack__item img { width: 100%; -webkit-transition: opacity 0.15s ease-in-out; transition: opacity 0.15s ease-in-out; }

.di-c-stack__item:hover img { opacity: 1 !important; -webkit-transition: opacity 0.25s ease-in-out; transition: opacity 0.25s ease-in-out; }

.di-c-stack__item:nth-child(2) img { opacity: 0.75; }

.di-c-stack__item:nth-child(3) img { opacity: 0.5; }

/* "Peek" stacked items on hover */
.di-c-stack:hover .di-c-stack__item { -webkit-transition: all 0.5s cubic-bezier(0.87, -0.41, 0.19, 1.44); transition: all 0.5s cubic-bezier(0.87, -0.41, 0.19, 1.44); }

.di-c-stack:hover .di-c-stack__item:nth-child(2) { -webkit-transform: translate(0, -3vw) scale(0.94); transform: translate(0, -3vw) scale(0.94); }

.di-c-stack:hover .di-c-stack__item:nth-child(3) { -webkit-transform: translate(0, -6vw) scale(0.88); transform: translate(0, -6vw) scale(0.88); }

/* Center stacking on wider screens */
@media all and (min-width: 66em) { .di-c-stack__item { -webkit-transform-origin: top center; transform-origin: top center; }
  .di-c-stack__item:nth-child(2) { -webkit-transform: translate(0, -0.75vw) scale(0.95); transform: translate(0, -0.75vw) scale(0.95); }
  .di-c-stack__item:nth-child(3) { -webkit-transform: translate(0, -1.5vw) scale(0.9); transform: translate(0, -1.5vw) scale(0.9); }
  .di-c-stack:hover .di-c-stack__item:nth-child(2) { -webkit-transform: translate(0, -1.5vw) scale(0.9); transform: translate(0, -1.5vw) scale(0.9); }
  .di-c-stack:hover .di-c-stack__item:nth-child(3) { -webkit-transform: translate(0, -3vw) scale(0.8); transform: translate(0, -3vw) scale(0.8); } }

/*------------------------------------*\ #INPUT GROUP \*------------------------------------*/
/** 1) A grouping of a text input and a button */
.di-c-input-group { -webkit-animation: fadeSlideIn 2.5s ease 0s 1; animation: fadeSlideIn 2.5s ease 0s 1; /** Input group within skew right section */ /** Input group within article meta share container */ }

.di-c-section--skew-right .di-c-input-group { margin-right: 2rem; }

.di-c-article__meta-share .di-c-input-group { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }

/** Input group inline large 1) Input group that has the label stacked on top of the input and button on small screens but switches to side by side on larger screens */
@media all and (min-width: 50em) { .di-c-input-group--inline-large { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } }

/** Input group label */
.di-c-input-group__label { color: #444; font-weight: bold; /** Input group label within footer */ /** Input group within article meta share container */ }

.di-c-footer .di-c-input-group__label { color: #fff; }

@media all and (min-width: 50em) { .di-c-input-group--inline-large .di-c-input-group__label { margin-right: 0.5rem; padding-bottom: 0; } }

/** Input group body 1) Container for the inputs. Display flex used to put content within input group in a row */
.di-c-input-group__body { display: -webkit-box; display: -ms-flexbox; display: flex; /* 1 */ /** Input group body within inline large input group */ }

@media all and (min-width: 50em) { .di-c-input-group--inline-large .di-c-input-group__body { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } }

/** Input group input 1) Flex 1 used to take up the rest of the space within search form with the input */
.di-c-input-group__input { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; /* 1 */ -webkit-box-shadow: none; box-shadow: none; z-index: 0; /** Input group within input group small */ /** Input group within cream background 1) Change the background of the text input to white within cream sidebar */ /** Input group within the sharing div 1) Don't allow it to get too small */ }

.di-c-input-group--small .di-c-input-group__input { font-size: 0.85rem; }

@media all and (min-width: 66em) { .di-l-cream-background .di-c-input-group__input { background: #fff; } }

.di-c-article__meta-share .di-c-input-group__input { min-width: 130px; }

/*------------------------------------*\ #LOADER \*------------------------------------*/
/** 1) Animated image that represents that something is loading */
.di-c-loader { display: -webkit-box; display: -ms-flexbox; display: flex; border-radius: 100%; position: relative; margin: 0 auto; /** Loader within ajax loader 1) Used for masking the button while the form validation is loading */ }

div.wpcf7 .ajax-loader .di-c-loader { border-radius: 0; position: absolute; padding: 0.72rem .75rem; margin: 0 auto; z-index: 58; left: -59px; top: 0px; background: #A51534; }

/** Loader dot */
.di-c-loader__dot { display: block; width: 1rem; height: 1rem; border-radius: 100%; background-color: #000; margin-right: 1rem; opacity: 0; /** First loader dot */ /** Second loader dot */ /** Third loader dot */ /** Loader dot within a button */ /** Loader dot within ajax loader */ }

.di-c-loader__dot:nth-child(1) { -webkit-animation: opacitychange 1s ease-in-out infinite; animation: opacitychange 1s ease-in-out infinite; }

.di-c-loader__dot:nth-child(2) { -webkit-animation: opacitychange 1s ease-in-out 0.25s infinite; animation: opacitychange 1s ease-in-out 0.25s infinite; }

.di-c-loader__dot:nth-child(3) { margin-right: 0; -webkit-animation: opacitychange 1s ease-in-out 0.5s infinite; animation: opacitychange 1s ease-in-out 0.5s infinite; }

.di-c-btn .di-c-loader__dot { height: 0.5rem; width: 0.5rem; margin: 0.25rem 0.5rem 0.25rem 0; background: #fff; }

.ajax-loader .di-c-loader__dot { height: 0.5rem; width: 0.5rem; margin: 0.25rem 0.5rem 0.25rem 0; background: #fff; }

/*------------------------------------*\ #LOGO \*------------------------------------*/
/** Branding image or text of the site */
.di-c-logo { display: block; width: 100%; -webkit-transition: fill 0s ease-in-out; transition: fill 0s ease-in-out; height: 46px; /** Logo svg within active header */ }

.di-c-header.di-is-active .di-c-logo { fill: #fff; -webkit-transition: fill 0.1s ease-in-out; transition: fill 0.1s ease-in-out; }

@media all and (min-width: 66em) { .di-c-logo { height: auto; } }

/** Logo link */
.di-c-logo-link { display: block; max-width: 8rem; height: 3rem; pointer-events: all; }

@media all and (min-width: 66em) { .di-c-logo-link { height: auto; }
  .di-c-header--vertical .di-c-logo-link { margin-bottom: 0; height: 3rem; } }

/** Change the positioning on IE 10+ because it positions after differently */
@media all and (-ms-high-contrast: none) { .di-c-logo-link { height: 14rem; position: relative; top: 11.5rem; } }

@media all and (-ms-high-contrast: none) and (min-width: 66em) { .di-c-logo-link { position: static; } }

/** Change the positioning on IE 10+ because it positions after differently */
@supports (-ms-ime-align: auto) { .di-c-logo-link { width: 15rem; } }

.long-pipe { display: none; opacity: 1; -webkit-transition: opacity 0s ease-in-out; transition: opacity 0s ease-in-out; }

.di-c-header--vertical .long-pipe { display: none; }

.di-c-header.di-is-active .long-pipe { opacity: 0; -webkit-transition: opacity 0.1s ease-in-out; transition: opacity 0.1s ease-in-out; }

@media all and (min-width: 66em) { .long-pipe { display: block; }
  .di-c-header--vertical .long-pipe { display: none; } }

/** HBS logo SVG used in the full screen navigation */
.di-c-logo-hbs { display: block; -webkit-transition: fill 0.2s ease-in-out; transition: fill 0.2s ease-in-out; width: 100%; /** HBS logo SVG within nav container */ /** HBS logo SVG within hovered/focused HBS logo link */ }

.di-c-nav-container .di-c-logo-hbs { fill: #fff; }

.di-c-logo-hbs-link:hover .di-c-logo-hbs, .di-c-logo-hbs-link:focus .di-c-logo-hbs { fill: #808080; }

/** Harvard Business School logo SVG */
.di-c-logo-hbs-long { display: block; position: relative; top: 9px; width: 100%; }

/** Change the positioning on IE 10+ because it positions HBS long logo differently */
@media all and (-ms-high-contrast: none) { .di-c-logo-hbs-long { top: 0; } }

/** HBS logo link 1) Link wrapper around the actual logo SVG */
.di-c-logo-hbs-link { display: block; /** HBS logo link within nav container */ /** Initialize animation within header when JS is activated */ /** Slide and fade in HBS logo when navigation is activated */ }

.di-c-nav-container .di-c-logo-hbs-link { width: 15rem; }

@media all and (min-width: 50em) { .di-c-nav-container .di-c-logo-hbs-link { width: 100%; } }

.js .di-c-header .di-c-logo-hbs-link { opacity: 0; -webkit-transform: translateX(-1rem); transform: translateX(-1rem); -webkit-transition: all 0s ease-in-out; transition: all 0s ease-in-out; }

.js .di-c-header .di-c-logo-hbs-link:before { content: none; }

.js .di-c-header.di-is-active .di-c-logo-hbs-link { opacity: 1; -webkit-transform: translateX(0rem); transform: translateX(0rem); -webkit-transition: all 2.5s ease-in-out; transition: all 2.5s ease-in-out; }

.js .di-c-header.di-is-active .di-c-logo-hbs-link:before { content: none; }

/** Harvard Business School logo link 1) Link wrapper around the actual Harvard Business School SVG */
.di-c-logo-hbs-long-link { display: block; width: 15rem; height: 2rem; position: relative; top: -6px; margin-left: 0.5rem; }

@media all and (min-width: 46.8em) { .di-c-logo-hbs-long-link { margin-left: 1rem; } }

/** Change the positioning on IE 10+ because it positions HBS long logo differently */
@media all and (-ms-high-contrast: none) { .di-c-logo-hbs-long-link { top: -4px; } }

/** Logo fill 1) Text to the right of the pipe in the primary logo */
.di-c-logo__fill { -webkit-transition: fill 0s ease-in-out; transition: fill 0s ease-in-out; /** Logo fill within active header 1) Change text from crimson to red when navigation is activated */ }

.di-c-header.di-is-active .di-c-logo__fill { fill: #D90038; -webkit-transition: fill 0.1s ease-in-out; transition: fill 0.1s ease-in-out; }

/** Hide dropshadow for site logo on dark backgrounds */
.di-c-header.di-is-active .logo-shadow { fill: transparent; -webkit-transition: fill 0.1s ease-in-out; transition: fill 0.1s ease-in-out; }

/** Logo shield 1) Shield used in the top header next to the Harvard Business School logo */
.di-c-logo-shield { display: block; width: 2rem; margin-left: 1.6rem; }

/*------------------------------------*\ #LINK LIST \*------------------------------------*/
/** 1) List of links */
.di-c-link-list { /** Small variant */ }

.di-c-link-list--small { font-size: 0.85rem; }

/** Link list 2up 1) Link list that stacks on small screens but becomes 2 columns on larger screens */
@media all and (min-width: 66em) { .di-c-link-list--2up { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } }

/** 1) Link list items */
.di-c-link-list__item { position: relative; margin-bottom: 2rem; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); /** Link list item within small link list */ /** Link list item within header */ /** Link list item within text passage */ /** Link list item within link list 2up */ /** Link list item within header when JS is activated 1) Initializes animation of link list items */ /** Link list item within active header when JS is activated 1) Adds animation of link list items to swipe in when navigation is activated */ }

.di-c-link-list__item:last-child { margin-bottom: 0; }

.di-c-link-list--small .di-c-link-list__item { margin-bottom: 1rem; }

.di-c-nav-container .di-c-link-list__item { margin-bottom: 1rem; }

.di-c-text-passage .di-c-link-list__item { /** Link list item before within header */ }

.di-c-text-passage .di-c-link-list__item:before { display: none; }

.di-c-link-list--2up .di-c-link-list__item { width: 50%; }

@media all and (min-width: 66em) { .di-c-link-list--2up .di-c-link-list__item { padding-right: 1rem; /** Last link list item within link list 2up */ }
  .di-c-link-list--2up .di-c-link-list__item:last-child { padding-right: 0; } }

.js .di-c-nav-container .di-c-link-list__item:before { content: ''; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: #000; -webkit-transition: all 0s cubic-bezier(0.42, 0, 0.58, 1) 0s; transition: all 0s cubic-bezier(0.42, 0, 0.58, 1) 0s; z-index: 1; }

.js .di-c-nav-container.di-is-active .di-c-link-list .di-c-link-list__item { /** Even link list items within active header when JS is activated 1) Set differently to lag behind the odd list items */ }

.js .di-c-nav-container.di-is-active .di-c-link-list .di-c-link-list__item:before { right: 0; width: 0; left: auto; -webkit-transition: width 1.2s cubic-bezier(0.77, 0, 0.175, 1) 0.4s; transition: width 1.2s cubic-bezier(0.77, 0, 0.175, 1) 0.4s; }

.js .di-c-nav-container.di-is-active .di-c-link-list .di-c-link-list__item:nth-child(2n):before { -webkit-transition: width 1.2s cubic-bezier(0.77, 0, 0.175, 1) 0.6s; transition: width 1.2s cubic-bezier(0.77, 0, 0.175, 1) 0.6s; }

/** Set different animation in IE 10+ 1) IE Doesn't like the swipe in animation. Change to slide and fade in when navigation is activated */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .js .di-c-nav-container .di-c-link-list__item { opacity: 0; -webkit-transform: translateX(-1rem); transform: translateX(-1rem); -webkit-transition: all 0s ease-in-out; transition: all 0s ease-in-out; }
  .js .di-c-nav-container .di-c-link-list__item:before { content: none; }
  .js .di-c-nav-container.di-is-active .di-c-link-list__item { opacity: 1; -webkit-transform: translateX(0rem); transform: translateX(0rem); -webkit-transition: all 2s ease-in-out; transition: all 2s ease-in-out; }
  .js .di-c-nav-container.di-is-active .di-c-link-list__item:before { content: none; } }

/** Set different animation in Edge 14+ 1) IE Doesn't like the swipe in animation. Change to slide and fade in when navigation is activated */
@supports (-ms-accelerator: true) { .js .di-c-nav-container .di-c-link-list__item { opacity: 0; -webkit-transform: translateX(-1rem); transform: translateX(-1rem); -webkit-transition: all 0s ease-in-out; transition: all 0s ease-in-out; }
  .js .di-c-nav-container .di-c-link-list__item:before { content: none; }
  .js .di-c-nav-container.di-is-active .di-c-link-list__item { opacity: 1; -webkit-transform: translateX(0rem); transform: translateX(0rem); -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; }
  .js .di-c-nav-container.di-is-active .di-c-link-list__item:before { content: none; } }

/** Set different animation in Edge 12/13 1) IE Doesn't like the swipe in animation. Change to slide and fade in when navigation is activated */
@supports (-ms-ime-align: auto) { .js .di-c-nav-container .di-c-link-list__item { opacity: 0; -webkit-transform: translateX(-1rem); transform: translateX(-1rem); -webkit-transition: all 0s ease-in-out; transition: all 0s ease-in-out; }
  .js .di-c-nav-container .di-c-link-list__item:before { content: none; }
  .js .di-c-nav-container.di-is-active .di-c-link-list__item { opacity: 1; -webkit-transform: translateX(0rem); transform: translateX(0rem); -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; }
  .js .di-c-nav-container.di-is-active .di-c-link-list__item:before { content: none; } }

/** Link within link list */
.di-c-link-list__link { display: inline; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-weight: bold; border-bottom: 1px solid #A51534; -webkit-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; /** Link list link within footer */ /** Link list link within header */ /** Link list link within  teal link list */ /** Link list link within white link list */ /** Link list link within crimson link list */ }

.di-c-link-list__link:hover, .di-c-link-list__link:focus { color: #808080; }

.di-c-footer .di-c-link-list__link { color: #fff; border-bottom: none; }

.di-c-nav-container .di-c-link-list__link { color: #F57053; text-transform: uppercase; border-bottom: none; display: inline-block; /** Link list link within header initialize hover/focus state */ }

.di-c-nav-container .di-c-link-list__link:before { content: ''; display: block; position: absolute; top: 0; right: 0; height: 100%; width: 0; background: #F57053; -webkit-transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1); transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1); z-index: -1; }

.di-c-nav-container .di-c-link-list__link:hover, .di-c-nav-container .di-c-link-list__link:focus { color: #fff; /** Link list link within header animate swiping animation on hover/focus */ }

.di-c-nav-container .di-c-link-list__link:hover:before, .di-c-nav-container .di-c-link-list__link:focus:before { width: 100%; left: 0; }

.di-c-link-list--teal .di-c-link-list__link { color: #3BC1C7; border-bottom: none; /** Animation for teal link list */ }

.di-c-link-list--teal .di-c-link-list__link:before { content: ''; display: block; position: absolute; top: 0; right: 0; height: 100%; width: 0; background: #3BC1C7; -webkit-transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1); transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1); z-index: -1; }

.di-c-link-list--teal .di-c-link-list__link:hover, .di-c-link-list--teal .di-c-link-list__link:focus { color: #808080; color: #fff; /** Link list link within header animate swiping animation on hover/focus */ }

.di-c-link-list--teal .di-c-link-list__link:hover:before, .di-c-link-list--teal .di-c-link-list__link:focus:before { width: 100%; left: 0; }

.di-c-link-list--white .di-c-link-list__link { color: #fff; }

.di-c-link-list--white .di-c-link-list__link:hover, .di-c-link-list--white .di-c-link-list__link:focus { color: #808080; }

.di-c-link-list--crimson .di-c-link-list__link { color: #A51534; border-bottom: none; }

/** Link list text 1) Used so the text can get underlined but not the icon next to it if included */
.di-c-link-list__text { /** Link list text within crimson link list */ }

.di-c-link-list--crimson .di-c-link-list__text { font-weight: normal; border-bottom: 1px solid #A51534; }

/** Link list icon */
.di-c-link-list__icon { margin-right: 0.5rem; fill: #808080; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; /** Link list icon within small link list */ }

.di-c-link-list--small .di-c-link-list__icon { position: relative; top: 1px; height: 12px; width: 12px; }

/** Link list kicker 1) Label above the link list link */
.di-c-link-list__kicker { display: block; color: #fff; font-size: 0.75rem; }

/** Link list meta 1) Contains items like author, date, etc. */
.di-c-link-list__meta { display: block; margin-top: 0.5rem; font-size: 0.75rem; }

/** Link list number 1) Appears after the link list text in the navigation currently */
.di-c-link-list__number { color: #808080; font-size: 0.75rem; }

/** Link list text - white variant */
.di-c-link-list__item--white .di-c-link-list__link, .di-c-link-list__item--white .di-c-link-list__link:hover { color: #fff; }

.di-c-link-list__item--white .di-c-headline-link__icon { fill: #808080; }

.di-c-link-list__item--white .di-c-link-list__link:hover .di-c-headline-link__icon { fill: #fff; }

/*------------------------------------*\ #MEDIA BLOCK \*------------------------------------*/
/** 1) A media block features a block of media(i.e. image) and text 2) Display flex is added to put contents within the media block side by side */
.di-c-media-block { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; -webkit-box-align: center; -ms-flex-align: center; align-items: center; max-width: 65rem; /** Media block within footer */ }

.di-c-footer .di-c-media-block { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }

@media all and (min-width: 29.75em) { .di-c-footer .di-c-media-block { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } }

/** Media block align top 1) Align text with the top of the image */
.di-c-media-block--align-top { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }

/** Media block cream */
.di-c-media-block--cream { padding-bottom: 2rem; /** Actual cream background of the media block so the text looks like it overflows the block */ }

.di-c-media-block--cream:before { content: ""; display: block; position: absolute; top: -1rem; left: -3.5rem; padding-right: 3.5rem; padding-bottom: 2rem; bottom: 0; width: 100%; background: rgba(250, 249, 242, 0.98); z-index: -1; }

@media all and (min-width: 66em) { .di-c-media-block--cream:before { top: -10rem; left: -4rem; padding-right: 0; } }

/** Large media block */
.di-c-media-block--large { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; max-width: none; }

@media all and (min-width: 50em) { .di-c-media-block--large { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; padding-left: 2rem; } }

/** Media block number */
.di-c-media-block__number { position: Absolute; left: -3rem; font-family: "Trade Gothic W02", "Trade Gothic W01", Helvetica, Arial, sans-serif; font-size: 0.85rem; font-weight: bold; text-transform: uppercase; text-align: center; letter-spacing: 1px; margin-right: 1rem; /** Media block numberin a large variation */ /** Large media block within dark band */ }

.di-c-media-block--large .di-c-media-block__number { font-size: 1.2rem; left: -2.5rem; }

@media all and (min-width: 50em) { .di-c-media-block--large .di-c-media-block__number { left: -2rem; } }

@media all and (min-width: 66em) { .di-c-media-block--large .di-c-media-block__number { left: -1rem; } }

.di-l-band--dark .di-c-media-block__number { color: #fff; }

/** Media block date 1) Date next to the media block title */
.di-c-media-block__date { position: absolute; left: -2.5rem; top: 5px; font-family: "Trade Gothic W02", "Trade Gothic W01", Helvetica, Arial, sans-serif; font-size: 0.85rem; font-weight: normal; text-transform: uppercase; text-align: center; letter-spacing: 1px; color: #bbb; /** Media block date within dark band */ }

.di-l-band--dark .di-c-media-block__date { color: #fff; }

@media all and (min-width: 50em) { .di-c-media-block__date { left: -2rem; } }

@media all and (min-width: 66em) { .di-c-media-block__date { left: -0.75rem; } }

/** Media block date month 1) Span used to display the month */
.di-c-media-block__date-month { display: block; font-size: 1rem; line-height: 1.1; }

/** Media block date day 1) Span used to display the day */
.di-c-media-block__date-day { display: block; font-size: 1.4375rem; line-height: 1.1; }

/** Media block date year 1) Span used to display the year */
.di-c-media-block__date-year { display: block; font-size: 0.75rem; line-height: 1.1; }

/** Media block body 1) This is the body of the media block 2) Display flex allows the body of the media block to either display vertically or horizontally Flex direction column stacks content vertically. Justify content center centers content. 3) Flex 1 is added to take up remaining space that isn't taken up by di-c-media-block__media */
.di-c-media-block__body { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; /** Media block body within reversed */ /** Media block body within reversed, large media block 1) Display text above image on small screens and then display text to the right of the image on larger screens */ /** Media block body within dark band */ /** Media block body within skew right section */ }

.di-c-media-block--reversed .di-c-media-block__body { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }

.di-c-media-block--reversed.di-c-media-block--large .di-c-media-block__body { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; /* 1 */ }

@media all and (min-width: 50em) { .di-c-media-block--reversed.di-c-media-block--large .di-c-media-block__body { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; /* 1 */ } }

.di-l-band--dark .di-c-media-block__body { color: #fff; }

.di-c-section--skew-right .di-c-media-block__body { margin-right: 2rem; }

/** Media block text */
.di-c-media-block__text { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }

/** Media block kicker */
.di-c-media-block__kicker { font-style: normal; text-transform: uppercase; letter-spacing: 2px; margin: 0 0 0.5rem; font-family: "Trade Gothic W02", "Trade Gothic W01", Helvetica, Arial, sans-serif; font-size: 0.75rem; color: #808080; }

/** Media block headline 1) This is the headline of the media block */
.di-c-media-block__headline { margin-bottom: 0.2em; font-size: 1.4375rem; /** Media block headline in a large variation */ }

.di-c-media-block--large .di-c-media-block__headline { font-size: 2rem; }

/** Media block description */
.di-c-media-block__desc { font-size: 0.85rem; /** Media block description within footer */ /** Media block description within large media block */ }

.di-c-footer .di-c-media-block__desc { color: #fff; /** Link within media block description */ }

.di-c-footer .di-c-media-block__desc a { color: #fff; font-weight: bold; }

.di-c-footer .di-c-media-block__desc a:hover, .di-c-footer .di-c-media-block__desc a:focus { color: #bbb; }

.di-c-media-block--large .di-c-media-block__desc { font-size: 1rem; }

/** Media block link */
.di-c-media-block__link { display: inline-block; position: relative; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; /** Swiping of background animation initialization for hover/focus */ /** Media block link within footer */ /** Media block link within dark band */ }

.di-c-media-block__link:before { content: ''; display: block; position: absolute; top: 0; right: 0; height: 100%; width: 0; background: #A51534; -webkit-transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1); transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1); z-index: -1; }

.di-c-media-block__link:hover, .di-c-media-block__link:focus { color: #fff; /** Swiping of background animation on hover/focus */ }

.di-c-media-block__link:hover:before, .di-c-media-block__link:focus:before { width: 100%; left: 0; }

.di-c-footer .di-c-media-block__link { color: #fff; }

.di-c-footer .di-c-media-block__link:hover, .di-c-footer .di-c-media-block__link:focus { color: #bbb; }

.di-l-band--dark .di-c-media-block__link { color: #fff; }

/** Media block link text */
.di-c-media-block__link-text { display: inline; border-bottom: 1px solid #A51534; }

/** Media block URL 1) URL path to the link */
.di-c-media-block__url { color: #bbb; font-size: 0.75rem; }

/** Media container 1) This is the container that holds the image (or media) */
.di-c-media-block__media { width: 35%; max-width: 11rem; margin-left: 1rem; /** Media block media container in a small variation */ /** Media block media container in a large variation */ /** Media block media container in a tiny variation */ /** Media block media container within reversed media block */ /** Media block media container within reversed, large media block */ }

.di-c-media-block--small .di-c-media-block__media { max-width: 7rem; }

.di-c-media-block--large .di-c-media-block__media { width: 100%; max-width: none; margin-top: 2rem; }

@media all and (min-width: 50em) { .di-c-media-block--large .di-c-media-block__media { width: 50%; margin-top: 0; } }

.di-c-media-block--tiny .di-c-media-block__media { max-width: 1rem; width: 1rem; }

.di-c-media-block--reversed .di-c-media-block__media { margin-left: 0; margin-right: 1rem; }

.di-c-media-block--reversed.di-c-media-block--large .di-c-media-block__media { margin-right: 2rem; }

/** Media block image 1) Max height added to work in IE 10 and Edge */
.di-c-media-block__img { max-height: 11rem; /** Media container in a large variation */ /** Media block image in a small variation */ /** Media block image in a tiny variation */ }

.di-c-media-block--large .di-c-media-block__img { max-height: 100vh; }

.di-c-media-block--small .di-c-media-block__img { max-height: 7rem; }

.di-c-media-block--tiny .di-c-media-block__img { max-height: 1rem; }

/*------------------------------------*\ #MEDIA BLOCK LIST \*------------------------------------*/
/** 1) List of media blocks */
.di-c-media-block-list.di-l-grid--2up { margin: 0; }

.di-c-media-block-list__item { border-top: 1px solid #eee; padding: 2rem 0; /** Media block list item within 2up grid */ }

@media all and (min-width: 46.8em) { .di-l-grid--2up .di-c-media-block-list__item { border-top: 0; } }

/*------------------------------------*\ #MODAL \*------------------------------------*/
/** Modal 1) The modal container, positioned to sit over the rest of the content with position absolute 2) Display flex sits items within modal side by side. Align items and justify content center allows contents within modal to be centered. 3) z-index is used to position the modal over top of the rest of the content. Normally, such high z-index values shouldn't be used, but in this case it makes sense since the modal should override every other element. */
/** Modal When JS fails */
.di-c-modal { display: block; position: relative; /** Modal When JS is active */ /** Closed Modal when JS fails 1) Displays since JS cannot add or remove di-is-closed class */ }

.js .di-c-modal { display: -webkit-box; display: -ms-flexbox; display: flex; /* 2 */ -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 50; /* 3 */ background: rgba(0, 0, 0, 0.4); overflow: auto; -webkit-transition: all 2s ease; transition: all 2s ease; }

.di-c-modal.di-is-closed { display: -webkit-box; display: -ms-flexbox; display: flex; /* 1 */ /** Closed Modal when JS is active */ }

.js .di-c-modal.di-is-closed { display: none; }

/** Modal Window When JS fails 1) Position relative to get it to show up in the bottom of the DOM 2) Margin bottom to differentiate this modal from the next one */
.di-c-modal__window { position: relative; /* 1 */ margin: 2rem 0; /* 2 */ /** Modal Window When JS is active 1) The container that actually houses the modal content 2) Position set to relative so close button sits within the modal window */ /** Modal window within a flush modifier */ /** Modal window within an alert modifier */ /** Modal window within a flush modifier */ }

.js .di-c-modal__window { width: 40em; max-width: 90%; max-height: 90vh; padding: 2rem; margin: 0 0 1rem; background: #fff; }

.di-c-modal--large .di-c-modal__window { width: 90vw; }

.di-c-modal--alert .di-c-modal__window { padding: 1rem 2rem 3.7rem; }

.di-c-modal--flush .di-c-modal__window { padding: 0; background: none; color: #fff; }

/** Modal header */
.di-c-modal__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }

/** Modal body */
.di-c-modal__body { padding: 1rem 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; /** Modal body within a flush modal */ }

.di-c-modal--flush .di-c-modal__body { padding: 0; border-bottom: 0; border-top: 0; margin-bottom: 0.5rem; }

/** Modal footer */
.di-c-modal__footer { margin-top: 1rem; }

/** Modal close button 1) Button used to close the modal 2) Position set to absolute so it can be positioned in upper right hand corner of modal window */
.di-c-modal__close-btn { margin: -0.3rem -1.5rem 0.4rem auto; /** Modal close btn within a flush modal */ }

.di-c-modal--flush .di-c-modal__close-btn { color: #fff; }

/*------------------------------------*\ #NAV CONTAINER \*------------------------------------*/
/** 1) Container that houses the primary navigation and search form */
.di-c-nav-container { width: 100%; margin: 0; padding: 0 2rem 0 3.5rem; overflow: hidden; background: #000; z-index: 2; pointer-events: all; /** Navigation conntainer within vertical header */ }

.js .di-c-nav-container { position: absolute; top: 100%; left: 0; height: 0; min-height: 0; visibility: hidden; overflow: hidden; background: #000; z-index: 2; pointer-events: all; -webkit-transition: all 0s ease-in-out 0s; transition: all 0s ease-in-out 0s; }

.di-c-header--vertical .di-c-nav-container { position: absolute; }

@media all and (min-width: 66em) { .di-c-header--vertical .di-c-nav-container { display: block; visibility: visible; position: static; background: none; margin-left: 0; width: 100%; height: auto; padding: 0; } }

@media all and (min-width: 66em) { .di-c-nav-container { padding: 0 7.3rem 0 7.3rem; } }

/** Navigation container when JS is active in IE 10+ 1) Remove background so that animated black background is smooth transition */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .js .di-c-nav-container { background: none; } }

/** Navigation container when JS is active in Edge 14/15 1) Remove background so that animated black background is smooth transition */
@supports (-ms-accelerator: true) { .js .di-c-nav-container { background: none; } }

/** Navigation container when JS is active in Edge 12/13 1) Remove background so that animated black background is smooth transition */
@supports (-ms-ime-align: auto) { .js .di-c-nav-container { background: none; } }

/** Active header nav container */
.di-c-nav-container.di-is-active { max-height: calc(100vh - 7.1875rem); height: calc(100vh - 7.1875rem); overflow: scroll; visibility: visible; padding: 1rem 2rem 4rem 3.5rem; z-index: 5; -webkit-transition: all 0s cubic-bezier(0.86, 0, 0.07, 1) 0.5s; transition: all 0s cubic-bezier(0.86, 0, 0.07, 1) 0.5s; -webkit-overflow-scrolling: touch; /** Active header nav container within vertical header */ }

@media all and (min-width: 66em) { .di-c-header--vertical .di-c-nav-container.di-is-active { margin-left: 0; width: 100%; } }

@media all and (min-width: 66em) { .di-c-nav-container.di-is-active { padding: 1rem 7.3rem 0 7.3rem; } }

/** Nav container tagline nav section */
.di-c-header--vertical .di-c-nav-container__tagline-nav { border-bottom: none; }

@media all and (min-width: 50em) { .di-c-nav-container__tagline-nav { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 4rem; border-bottom: 1px solid #444; } }

@media all and (min-width: 66em) { .di-c-header--vertical .di-c-nav-container__tagline-nav { margin-bottom: 0; padding: 0 1rem; } }

/** Nav container editions categories section */
.di-c-nav-container__editions-categories { margin-bottom: 4rem; }

@media all and (min-width: 50em) { .di-c-nav-container__editions-categories { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 0; } }

/** Nav container HBS general category container */
@media all and (min-width: 50em) { .di-c-nav-container__hbs-container { display: -webkit-box; display: -ms-flexbox; display: flex; border-top: 1px solid #444; padding-top: 4rem; }
  .di-c-header--vertical .di-c-nav-container__hbs-container { border-top: none; padding: 0; } }

/*------------------------------------*\ #PAGE HEADER \*------------------------------------*/
/** 1) Container that consists of of a page header title and description */
.di-c-page-header { position: relative; margin-bottom: 2rem; /** Page header within page layout secondary */ }

@media all and (min-width: 66em) and (min-height: 0px) { .di-l-page-layout__secondary .di-c-page-header { margin-bottom: 0.5rem; } }

@media all and (min-width: 66em) and (min-height: 864px) { .di-l-page-layout__secondary .di-c-page-header { margin-bottom: 1rem; } }

@media all and (min-width: 66em) and (min-height: 1088px) { .di-l-page-layout__secondary .di-c-page-header { margin-bottom: 2rem; } }

/** Page header article 1) Page header used on article page */
.di-c-page-header--article { margin-bottom: 1rem; }

/** Page header image */
.di-c-page-header__image { width: 100%; margin-bottom: 2rem; }

@media all and (min-width: 46.8em) { .di-c-page-header__image { width: 75%; } }

@media all and (min-width: 66em) { .di-c-page-header__image { width: 100%; } }

/** Page header body */
.di-c-page-header__body { position: relative; margin-top: -4rem; /** Page header body within page header article */ }

.di-c-page-header--article .di-c-page-header__body { margin-top: 0; }

/** Page header kicker */
.di-c-page-header__kicker { display: block; color: #AEB299; text-transform: uppercase; font-size: 1.2rem; padding: 0.5rem 0; font-family: "Trade Gothic W02", "Trade Gothic W01", Helvetica, Arial, sans-serif; -webkit-animation: fadeSlideIn 1.5s ease 0s 1; animation: fadeSlideIn 1.5s ease 0s 1; letter-spacing: 0.05rem; }

/** Page header title */
.di-c-page-header__title { background: none; line-height: 1; color: #000; /** Page header title within an article page header */ /** Colored page header title within an article page header */ /** Page header title within page header article */ }

.di-c-page-header--teal .di-c-page-header__title, .di-c-page-header--orange .di-c-page-header__title, .di-c-page-header--blue .di-c-page-header__title { display: inline; margin-bottom: 1rem; padding: 0.9rem 0 0.55rem; line-height: 1.4; color: #fff; }

@media all and (max-width: 22.5rem) { .di-c-page-header--teal .di-c-page-header__title, .di-c-page-header--orange .di-c-page-header__title, .di-c-page-header--blue .di-c-page-header__title { font-size: 1.6rem; line-height: 1.5; } }

.di-c-page-header--teal .di-c-page-header__title { background: #3BC1C7; -webkit-box-shadow: 0.7rem 0 0 #3BC1C7, -0.7rem 0 0 #3BC1C7; box-shadow: 0.7rem 0 0 #3BC1C7, -0.7rem 0 0 #3BC1C7; }

.di-c-page-header--orange .di-c-page-header__title { background: #F57053; -webkit-box-shadow: 0.7rem 0 0 #F57053, -0.7rem 0 0 #F57053; box-shadow: 0.7rem 0 0 #F57053, -0.7rem 0 0 #F57053; }

.di-c-page-header--blue .di-c-page-header__title { background: #668B99; -webkit-box-shadow: 0.7rem 0 0 #668B99, -0.7rem 0 0 #668B99; box-shadow: 0.7rem 0 0 #668B99, -0.7rem 0 0 #668B99; }

.di-c-page-header--article .di-c-page-header__title { margin-bottom: 1rem; text-transform: none; }

@media all and (max-width: 22.5rem) { .di-c-page-header__title { font-size: 1.6rem; line-height: 1.5; } }

/** Page header title in Firefox 1) Display block since box shadow doesn't add padding when lines of text wrap inline */
@-moz-document url-prefix() { .di-c-page-header--teal .di-c-page-header__title, .di-c-page-header--orange .di-c-page-header__title, .di-c-page-header--blue .di-c-page-header__title { display: block; box-shadow: none; padding: 0.9rem 0.7rem 0.55rem 0.7rem; } }

/** Page header meta */
.di-c-page-header__meta { margin-bottom: 1rem; font-weight: bold; color: #7EA4AB; font-family: "Trade Gothic W02", "Trade Gothic W01", Helvetica, Arial, sans-serif; text-transform: uppercase; }

/** Page header description */
.di-c-page-header__desc { margin-bottom: 0; max-width: 36rem; font-size: 1rem; color: #444; -webkit-animation: fadeSlideIn 2.5s cubic-bezier(0.77, 0, 0.175, 1) 0s 1; animation: fadeSlideIn 2.5s cubic-bezier(0.77, 0, 0.175, 1) 0s 1; /** Page header description within page header image */ /** Page header description within page layout secondary (sidebar) */ }

.di-c-page-header--image .di-c-page-header__desc { margin-bottom: 0; }

.di-l-page-layout__secondary .di-c-page-header__desc { font-size: 1.2rem; }

@media all and (min-width: 66em) { .di-l-page-layout__secondary .di-c-page-header__desc { max-width: none; } }

@media all and (min-width: 66em) and (min-height: 0px) { .di-l-page-layout__secondary .di-c-page-header__desc { font-size: 1rem; } }

@media all and (min-width: 66em) and (min-height: 864px) { .di-l-page-layout__secondary .di-c-page-header__desc { font-size: 1.2rem; } }

@media all and (min-width: 90em) and (min-height: 1088px) { .di-l-page-layout__secondary .di-c-page-header__desc { font-size: 1.4375rem; } }

/** Page header title container */
.di-c-page-header__title-container { position: relative; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); /** Page header title container when JS is activated */ /** Page header title container when JS and animation are activated 1) Fade in text */ /** Page header title container when there is no animation utility class 1) Used when we want to remove animations from a page 2) Needed in addition to the utility class itself since removing transitions in utility class would mess up non-animation transitions */ /** Page header title container animation initialization */ /** Page header title container within page header teal/orange/blue */ /** Page header title container within page header teal/orange/blue */ /** Page header title container within no animation utility class */ }

.js .di-c-page-header__title-container { opacity: 0; }

.js.js-animate .di-c-page-header__title-container { opacity: 1; -webkit-transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 1s; transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 1s; }

.di-u-no-animation .di-c-page-header__title-container { opacity: 1; -webkit-transition: none !important; transition: none !important; -webkit-animation: none !important; animation: none !important; }

.di-c-page-header__title-container:before { /** Page header animation initialization where there is no animation 1) Removes this pseudoelement when transitions are removed */ /** Page header title container animation initialization when JS is activated */ /** Page header title container animation when JS and animation are both activated */ /** Page header title container animation within page header teal and page header orange 1) Need more padding since teal/orange/blue backgrounds add padding */ /** Page header title container animation within page header teal, page header orange, and page header blue 1) Ease in page header title container */ }

.di-u-no-animation .di-c-page-header__title-container:before { content: none !important; -webkit-transition: none !important; transition: none !important; -webkit-animation: none !important; animation: none !important; }

.js .di-c-page-header__title-container:before { content: ''; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: #fff; z-index: 1; }

.js.js-animate .di-c-page-header__title-container:before { right: 0; width: 0; left: auto; -webkit-transition: all 1s cubic-bezier(0.86, 0, 0.07, 1) 0.25s; transition: all 1s cubic-bezier(0.86, 0, 0.07, 1) 0.25s; }

.js .di-c-page-header--teal .di-c-page-header__title-container:before, .js .di-c-page-header--orange .di-c-page-header__title-container:before, .js .di-c-page-header--blue .di-c-page-header__title-container:before { top: -0.6rem; left: -0.7rem; padding-bottom: 0.8rem; }

.js.js-animate .di-c-page-header--teal .di-c-page-header__title-container:before, .js.js-animate .di-c-page-header--orange .di-c-page-header__title-container:before, .js.js-animate .di-c-page-header--blue .di-c-page-header__title-container:before { right: 0; width: 0; left: auto; -webkit-transition: all 1s cubic-bezier(0.86, 0, 0.07, 1) 0.25s; transition: all 1s cubic-bezier(0.86, 0, 0.07, 1) 0.25s; /* 1 */ }

@media all and (min-width: 66em) { .di-c-page-header__title-container:before { top: -0.5rem; left: -0.7rem; padding-bottom: 0.5rem; /** Page header title container :before within cream background layout */ }
  .di-l-cream-background .di-c-page-header__title-container:before { background: rgba(250, 249, 242, 0.98); } }

.di-c-page-header--teal .di-c-page-header__title-container, .di-c-page-header--orange .di-c-page-header__title-container, .di-c-page-header--blue .di-c-page-header__title-container { margin: 0 0.5rem 0.5rem 0; padding-bottom: 0.15rem; }

@media all and (min-height: 1088px) { .di-c-page-header--teal .di-c-page-header__title-container, .di-c-page-header--orange .di-c-page-header__title-container, .di-c-page-header--blue .di-c-page-header__title-container { margin: 0 0.5rem 1rem 0; } }

.di-c-page-header--teal .di-c-page-header__title-container, .di-c-page-header--orange .di-c-page-header__title-container, .di-c-page-header--blue .di-c-page-header__title-container { border-left: 0.7rem solid transparent; }

.di-u-no-animation .di-c-page-header__title-container { -webkit-transition: none !important; transition: none !important; -webkit-animation: none !important; animation: none !important; }

/** Page header title container in Firefox 1) Remove left border because page header is display block in Firefox */
@-moz-document url-prefix() { .di-c-page-header--teal .di-c-page-header__title-container, .di-c-page-header--orange .di-c-page-header__title-container, .di-c-page-header--blue .di-c-page-header__title-container { border-left: none; } }

/*------------------------------------*\ #PRIMARY NAVIGATION \*------------------------------------*/
/** Primary navigation most likely existing in the header */
.di-c-primary-nav { /** Primary navigation list within a vertical header */ /** Primary navigation within nav container slide */ }

.di-c-header--vertical .di-c-primary-nav { margin-left: -1rem; margin-right: -1rem; }

.di-c-nav-container--slide .di-c-primary-nav { padding: 1rem; }

@media all and (min-width: 50em) { .di-c-primary-nav { margin-right: 2.3rem; } }

/** Primary navigation list */
.di-c-primary-nav__list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; /** Primary navigation list within a vertical header */ /** Header nav container within nav container slide */ }

.di-c-header--vertical .di-c-primary-nav__list { display: block; }

.di-c-nav-container--slide .di-c-primary-nav__list { display: block; }

/** Primary navigation item */
.di-c-primary-nav__item { position: relative; margin-bottom: 1rem; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); /** Primary navigation item within header when JS is activated */ /** Primary navigation item within active header when JS is activated */ /** Primary navigation item within vertical header */ /** Primary navigation item within vertical header */ /** Last primary navigation item */ }

.js .di-c-header .di-c-primary-nav__item { /** Primary navigation item animation initialization */ }

.js .di-c-header .di-c-primary-nav__item:before { content: ''; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: #000; -webkit-transition: all 0s cubic-bezier(0.42, 0, 0.58, 1) 0s; transition: all 0s cubic-bezier(0.42, 0, 0.58, 1) 0s; z-index: 1; }

.js .di-c-header.di-is-active .di-c-primary-nav__item { /** Primary navigation item animation within active header when JS is activated */ /** Even primary navigation items */ }

.js .di-c-header.di-is-active .di-c-primary-nav__item:before { right: 0; width: 0; left: auto; -webkit-transition: width 1.2s cubic-bezier(0.77, 0, 0.175, 1) 0.3s; transition: width 1.2s cubic-bezier(0.77, 0, 0.175, 1) 0.3s; }

.js .di-c-header.di-is-active .di-c-primary-nav__item:nth-child(2n) { /** Even primary navigation item animation 1) Different transition to lag behind odd primary navigation items */ }

.js .di-c-header.di-is-active .di-c-primary-nav__item:nth-child(2n):before { -webkit-transition: width 1.2s cubic-bezier(0.77, 0, 0.175, 1) 0.5s; transition: width 1.2s cubic-bezier(0.77, 0, 0.175, 1) 0.5s; }

.di-c-header.di-c-header--vertical .di-c-primary-nav__item:before { content: none; }

.di-c-header--vertical .di-c-primary-nav__item { margin-right: 0; }

@media all and (min-width: 66em) { .di-c-header--vertical .di-c-primary-nav__item { border-bottom: 1px solid #ddd; margin-bottom: 0; } }

.di-c-nav-container--slide .di-c-primary-nav__item { margin-right: 0; }

.di-c-primary-nav__item:last-child { margin-bottom: 0; }

@media all and (min-width: 66em) { .di-c-header--vertical .di-c-primary-nav__item:last-child { border-bottom: none; } }

/** Primary navigation item in IE 10+ 1) Needs different transition since IE doesn't do well with swiping animation 2) Fade and slide in animation instead */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .js .di-c-header .di-c-primary-nav__item { opacity: 0; -webkit-transform: translateX(-1rem); transform: translateX(-1rem); -webkit-transition: all 0s ease-in-out; transition: all 0s ease-in-out; }
  .js .di-c-header .di-c-primary-nav__item:before { content: none; }
  .js .di-c-header.di-is-active .di-c-primary-nav__item { opacity: 1; -webkit-transform: translateX(0rem); transform: translateX(0rem); -webkit-transition: all 1.5s ease-in-out; transition: all 1.5s ease-in-out; }
  .js .di-c-header.di-is-active .di-c-primary-nav__item:before { content: none; } }

/** Primary navigation item in Edge 14/15+ 1) Needs different transition since IE doesn't do well with swiping animation 2) Fade and slide in animation instead */
@supports (-ms-accelerator: true) { .js .di-c-header .di-c-primary-nav__item { opacity: 0; -webkit-transform: translateX(-1rem); transform: translateX(-1rem); -webkit-transition: all 0s ease-in-out; transition: all 0s ease-in-out; }
  .js .di-c-header .di-c-primary-nav__item:before { content: none; }
  .js .di-c-header.di-is-active .di-c-primary-nav__item { opacity: 1; -webkit-transform: translateX(0rem); transform: translateX(0rem); -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; }
  .js .di-c-header.di-is-active .di-c-primary-nav__item:before { content: none; } }

/** Primary navigation item in Edge 12/13 1) Needs different transition since IE doesn't do well with swiping animation 2) Fade and slide in animation instead */
@supports (-ms-ime-align: auto) { .js .di-c-header .di-c-primary-nav__item { opacity: 0; -webkit-transform: translateX(-1rem); transform: translateX(-1rem); -webkit-transition: all 0s ease-in-out; transition: all 0s ease-in-out; }
  .js .di-c-header .di-c-primary-nav__item:before { content: none; }
  .js .di-c-header.di-is-active .di-c-primary-nav__item { opacity: 1; -webkit-transform: translateX(0rem); transform: translateX(0rem); -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; }
  .js .di-c-header.di-is-active .di-c-primary-nav__item:before { content: none; } }

/** Primary navigation link */
.di-c-primary-nav__link { display: inline-block; font-size: 1.4375rem; font-weight: bold; color: #D90038; text-transform: uppercase; cursor: pointer; /** Primary navigation link hover/focus state animation initialization */ /** Primary navigation link within vertical header */ }

.di-c-primary-nav__link:before { content: ''; display: block; position: absolute; top: 0; right: 0; height: 100%; width: 0; background: #D90038; -webkit-transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1); transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1); z-index: -1; }

.di-c-header--vertical .di-c-primary-nav__link:before { height: 3rem; }

@media all and (min-width: 66em) { .di-c-header--vertical .di-c-primary-nav__link:before { content: none; } }

.di-c-primary-nav__link:hover, .di-c-primary-nav__link:focus { color: #fff; /** Primary navigation link animation on hover/focus */ }

.di-c-primary-nav__link:hover:before, .di-c-primary-nav__link:focus:before { width: 100%; left: 0; }

.di-c-header--vertical .di-c-primary-nav__link:hover, .di-c-header--vertical .di-c-primary-nav__link:focus { color: #fff; }

@media all and (min-width: 66em) { .di-c-header--vertical .di-c-primary-nav__link:hover, .di-c-header--vertical .di-c-primary-nav__link:focus { color: #808080; } }

.di-c-header--vertical .di-c-primary-nav__link:hover:before, .di-c-header--vertical .di-c-primary-nav__link:focus:before { height: 3rem; }

.di-c-header--vertical .di-c-primary-nav__link { padding: 0.5rem 1rem; }

@media all and (min-width: 66em) { .di-c-header--vertical .di-c-primary-nav__link { padding: 1rem; width: 100%; color: #A51534; } }

/** Active primary navigation link */
.di-c-primary-nav__link.di-is-active { font-weight: bold; }

/** Current primary navigation link */
.di-c-primary-nav__link.di-is-current { font-weight: bold; color: #A51534; }

/** Primary navigation link with subnavigation */
.di-c-primary-nav__link--has-children { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; /** Primary navigation link withing active item */ /** Primary navigation link within active item in vertical header */ /** Primary navigation link within active item in nav container slide */ }

.di-c-primary-nav__item.di-is-active .di-c-primary-nav__link--has-children { /** Primary navigation link within active item in the nav container slide */ }

.di-c-nav-container--slide .di-c-primary-nav__item.di-is-active .di-c-primary-nav__link--has-children:hover, .di-c-nav-container--slide .di-c-primary-nav__item.di-is-active .di-c-primary-nav__link--has-children:focus { color: #808080; }

@media all and (min-width: 66em) { .di-c-primary-nav__item.di-is-active .di-c-primary-nav__link--has-children { background: #444; color: #fff; } }

.di-c-header--vertical .di-c-primary-nav__item.di-is-active .di-c-primary-nav__link--has-children { background: none; color: #fff; }

@media all and (min-width: 66em) { .di-c-header--vertical .di-c-primary-nav__item.di-is-active .di-c-primary-nav__link--has-children { color: #000; } }

.di-c-nav-container--slide .di-c-primary-nav__item.di-is-active .di-c-primary-nav__link--has-children { background: none; color: inherit; }

/** Primary navigation list subnavigation Targets descendant of the */
.di-c-primary-nav__subitem { /** Primary navigation sublist within subitem */ /** Primary navigation sublist within active subitem */ }

.di-c-primary-nav__subitem .di-c-primary-nav__subitem { display: none; }

.di-c-primary-nav__subitem.di-is-active .di-c-primary-nav__subitem { display: block; }

/** Primary navigation sublist */
.di-c-primary-nav__sublist { border-left: 1px solid #bbb; }

/** Primary navigation list subnavigation first of type 1) First of type is chosen to only choose direct descendant of primary navigation item */
.di-c-primary-nav__sublist:first-of-type { display: none; margin-left: 1rem; border-left: 1px solid #bbb; /** Primary navigation sublist within vertical header */ /** Primary navigation sublist within vertical header active primary nav item */ /** Primary navigation sublist within active primary navigation item */ /** Primary navigation sublist within active item in vertical header */ /** Primary navigation sublist within active item in nav container slide */ }

.di-c-header--vertical .di-c-primary-nav__sublist:first-of-type { margin-left: 1rem; }

.di-c-header--vertical.di-is-active > .di-c-primary-nav__sublist:first-of-type { display: block; }

.di-c-primary-nav__item.di-is-active .di-c-primary-nav__sublist:first-of-type { display: block; }

@media all and (min-width: 66em) { .di-c-primary-nav__item.di-is-active .di-c-primary-nav__sublist:first-of-type { background: #444; margin: 0; position: absolute; top: 100%; z-index: 6; min-width: 8rem; /** Primary navigation sublist within active primary navigation item in vertical header */ }
  .di-c-header--vertical .di-c-primary-nav__item.di-is-active .di-c-primary-nav__sublist:first-of-type { padding: .5rem 1rem 1rem; } }

.di-c-header--vertical .di-c-primary-nav__item.di-is-active .di-c-primary-nav__sublist:first-of-type { background: none; }

@media all and (min-width: 66em) { .di-c-header--vertical .di-c-primary-nav__item.di-is-active .di-c-primary-nav__sublist:first-of-type { margin: 0 0 1rem 1rem; padding: 0; position: static; } }

.di-c-nav-container--slide .di-c-primary-nav__item.di-is-active .di-c-primary-nav__sublist:first-of-type { background: none; margin: 0; margin-left: 1rem; padding: 0; position: static; border-left: 1px solid #bbb; }

@media all and (min-width: 66em) { .di-c-primary-nav__sublist:first-of-type { margin-left: 0; border-left: 0; /** Primary navigation sublist within vertical header on larger screens */ }
  .di-c-header--vertical .di-c-primary-nav__sublist:first-of-type { border-left: 1px solid #bbb; } }

/** Primary navigation sublink */
.di-c-primary-nav__sublink { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-family: "Trade Gothic W02", "Trade Gothic W01", Helvetica, Arial, sans-serif; padding: 0.5rem 1rem; /** Primary navigation sublink within vertical header */ /** Primary navigation sublink within nav container slide */ }

@media all and (min-width: 66em) { .di-c-primary-nav__sublink { color: #fff; } }

.di-c-header--vertical .di-c-primary-nav__sublink { color: #fff; }

@media all and (min-width: 66em) { .di-c-header--vertical .di-c-primary-nav__sublink { color: #000; } }

.di-c-nav-container--slide .di-c-primary-nav__sublink { color: #444; }

.di-c-primary-nav__sublink:hover, .di-c-primary-nav__sublink:focus { color: #808080; }

/** Active primary navigation link */
.di-c-primary-nav__sublink.di-is-active { font-weight: bold; color: #A51534; }

/** Current primary navigation link */
.di-c-primary-nav__sublink.di-is-current { font-weight: bold; color: #A51534; }

/** Primary navigation sublink with subnavigation */
.di-c-primary-nav__sublink--has-children { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

/** Primary navigation icon */
.di-c-primary-nav__icon { fill: #D90038; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; margin-left: auto; /** Primary navigation icon within vertical header */ /** Primary navigation icon within active link */ /** Primary navigation icon within active link within vertical header */ /** Primary navigation icon within hovered/focused primary navigation link */ }

.di-c-header--vertical .di-c-primary-nav__icon { fill: #D90038; margin-left: auto; }

@media all and (min-width: 50em) { .di-c-header--vertical .di-c-primary-nav__icon { fill: #A51534; } }

.di-c-primary-nav__item.di-is-active .di-c-primary-nav__icon { -webkit-transform: rotate(180deg); transform: rotate(180deg); }

@media all and (min-width: 66em) { .di-c-primary-nav__item.di-is-active .di-c-primary-nav__icon { fill: #fff; /** Primary navigation icon within active link inside vertical header and nav container slide */ }
  .di-c-header--vertical .di-c-primary-nav__item.di-is-active .di-c-primary-nav__icon { fill: #444; } }

.di-c-header--vertical .di-c-primary-nav__item.di-is-active .di-c-primary-nav__icon { fill: #fff; -webkit-transform: rotate(90deg); transform: rotate(90deg); }

@media all and (min-width: 66em) { .di-c-header--vertical .di-c-primary-nav__item.di-is-active .di-c-primary-nav__icon { fill: #000; } }

.di-c-primary-nav__link:hover .di-c-primary-nav__icon, .di-c-primary-nav__link:focus .di-c-primary-nav__icon { fill: #fff; }

@media all and (min-width: 66em) { .di-c-primary-nav__link:hover .di-c-primary-nav__icon, .di-c-primary-nav__link:focus .di-c-primary-nav__icon { fill: #808080; /** Primary navigation icon within hovered/focused primary navigation link in active nav item */ /** Primary navigation icon within hovered/focused primary navigation link in active nav item inside vertical header and nav container slide */ }
  .di-c-primary-nav__item.di-is-active .di-c-primary-nav__link:hover .di-c-primary-nav__icon, .di-c-primary-nav__item.di-is-active .di-c-primary-nav__link:focus .di-c-primary-nav__icon { fill: #fff; }
  .di-c-header--vertical .di-c-primary-nav__item.di-is-active .di-c-primary-nav__link:hover .di-c-primary-nav__icon, .di-c-nav-container--slide .di-c-primary-nav__item.di-is-active .di-c-primary-nav__link:hover .di-c-primary-nav__icon, .di-c-header--vertical .di-c-primary-nav__item.di-is-active .di-c-primary-nav__link:focus .di-c-primary-nav__icon, .di-c-nav-container--slide .di-c-primary-nav__item.di-is-active .di-c-primary-nav__link:focus .di-c-primary-nav__icon { fill: #808080; } }

/** Primary navigation subicon */
.di-c-primary-nav__subicon { fill: #fff; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; margin-left: auto; /** Primary navigation icon within vertical header */ /** Primary navigation subicon within active link */ /** Primary navigation subicon within active subitem within vertical header */ /** Primary navigation icon within hovered/focused primary navigation link */ }

.di-c-header--vertical .di-c-primary-nav__subicon { margin-left: auto; }

.di-c-primary-nav__subitem.di-is-active .di-c-primary-nav__subicon { fill: #fff; -webkit-transform: rotate(180deg); transform: rotate(180deg); }

.di-c-header--vertical .di-c-primary-nav__subitem.di-is-active .di-c-primary-nav__subicon { fill: #444; -webkit-transform: rotate(90deg); transform: rotate(90deg); }

@media all and (min-width: 66em) { .di-c-header--vertical .di-c-primary-nav__subitem.di-is-active .di-c-primary-nav__subicon { fill: #000; } }

.di-c-primary-nav__sublink:hover .di-c-primary-nav__subicon, .di-c-primary-nav__sublink:focus .di-c-primary-nav__subicon { fill: #808080; }

@media all and (min-width: 66em) { .di-c-primary-nav__subicon { fill: #000; } }

/*------------------------------------*\ #LOGO \*------------------------------------*/
/** Quote that is pulled out from article and highlighted */
.di-c-pullquote { font-family: "Trade Gothic W02", "Trade Gothic W01", Helvetica, Arial, sans-serif; font-size: 1.4375rem; text-transform: uppercase; margin-bottom: 1rem; /** Pullquote red line before text */ }

.di-c-pullquote:before { content: ''; display: inline-block; position: relative; bottom: 5px; width: 4rem; height: 4px; margin: 0 0.5rem 0 -1rem; background: #A51534; }

@media all and (min-width: 50em) { .di-c-pullquote { font-size: 2rem; /** Pullquote red line before text on larger screens */ }
  .di-c-pullquote:before { bottom: 8px; height: 6px; width: 5rem; margin: 0 0.5rem 0 -2rem; } }

/*------------------------------------*\ #SEARCH FORM \*------------------------------------*/
/** Search form body 1) Container for the inputs. Display flex used to put content within search form in a row */
.di-c-search__body { display: -webkit-box; display: -ms-flexbox; display: flex; /* 1 */ }

.di-c-search__inner { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; position: relative; }

.di-c-search__inner .di-c-text-btn { position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); padding: 0.5em; -webkit-transition-property: background, opacity, visibility; transition-property: background, opacity, visibility; opacity: 1; visibility: visible; }

.di-c-search__inner .di-c-text-btn.js-is-hidden { opacity: 0; visibility: hidden; }

/** Search form input 1) Flex 1 used to take up the rest of the space within search form with the input */
.di-c-search__input { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; /* 1 */ -webkit-box-shadow: none; box-shadow: none; z-index: 0; }

/*------------------------------------*\ #SECTION \*------------------------------------*/
/** Section block that helps chunk related items together */
.di-c-section { margin-bottom: 4rem; /** First section */ /** Second section */ /** Section within article meta share */ /** Section within page layout secondary */ /** Section within article TL;DR */ }

.di-c-section:first-of-type { /** First section within nav container tagline nav section */ /** First section within nav container editions categories section */ /** First section within nav container general HBS section */ /** First section within flex container layout */ }

@media all and (min-width: 50em) { .di-c-nav-container__tagline-nav .di-c-section:first-of-type { margin-right: 0; padding-top: 0.5rem; padding-bottom: 0.5rem; padding-right: 2rem; -ms-flex-preferred-size: 66.67%; flex-basis: 66.67%; } }

@media all and (min-width: 66em) { .di-c-header--vertical .di-c-nav-container__tagline-nav .di-c-section:first-of-type { margin-right: 0; padding: 0; } }

.di-c-nav-container__editions-categories .di-c-section:first-of-type { margin-bottom: 4rem; }

@media all and (min-width: 50em) { .di-c-nav-container__editions-categories .di-c-section:first-of-type { margin-bottom: 2rem; -ms-flex-preferred-size: 66.67%; flex-basis: 66.67%; padding-right: 2rem; } }

.di-c-nav-container__hbs-container .di-c-section:first-of-type { margin-bottom: 4rem; }

@media all and (min-width: 50em) { .di-c-nav-container__hbs-container .di-c-section:first-of-type { width: 45rem; margin-right: 2rem; margin-bottom: 2rem; } }

@media all and (min-width: 50em) { .di-l-flex-container .di-c-section:first-of-type { margin-right: 4rem; } }

.di-c-section:nth-of-type(2) { /** Second section within nav container tagline nav section */ /** Second section within nav container editions categories section */ /** Second section within nav container general HBS section */ /** Second section within flex container layout */ }

.di-c-nav-container__tagline-nav .di-c-section:nth-of-type(2) { margin-bottom: 4rem; }

@media all and (min-width: 50em) { .di-c-nav-container__tagline-nav .di-c-section:nth-of-type(2) { margin-bottom: 2rem; -ms-flex-preferred-size: 33.33%; flex-basis: 33.33%; } }

@media all and (min-width: 50em) { .di-c-nav-container__editions-categories .di-c-section:nth-of-type(2) { -ms-flex-preferred-size: 33.33%; flex-basis: 33.33%; } }

@media all and (min-width: 29.75em) { .di-c-nav-container__hbs-container .di-c-section:nth-of-type(2) { margin-right: 2rem; } }

@media all and (min-width: 50em) { .di-c-nav-container__hbs-container .di-c-section:nth-of-type(2) { width: 18.75rem; margin-right: 4rem; margin-left: 4rem; } }

@media all and (min-width: 50em) { .di-l-flex-container .di-c-section:nth-of-type(2) { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } }

@media all and (min-width: 46.8em) { .di-c-article__meta-share .di-c-section { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } }

@media all and (min-width: 50em) { .di-c-article__meta-share .di-c-section { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } }

.di-l-page-layout__secondary .di-c-section { /** Last section within page layout secondary */ }

@media all and (min-width: 66em) and (min-height: 0px) { .di-l-page-layout__secondary .di-c-section:last-of-type { margin-bottom: 0; padding: 0.75rem 0 0.5rem; } }

@media all and (min-width: 66em) and (min-height: 864px) { .di-l-page-layout__secondary .di-c-section:last-of-type { padding: 2rem 0; } }

@media all and (min-width: 66em) and (min-height: 1088px) { .di-l-page-layout__secondary .di-c-section:last-of-type { margin-bottom: 4rem; } }

.di-c-article__tldr .di-c-section { margin-bottom: 2rem; }

@media all and (min-width: 90em) { .di-c-article__tldr .di-c-section { margin-left: 2rem; } }

/** Section responsive 1) Used to place items within section side-by-side at larger screens */
@media all and (min-width: 66em) { .di-c-section--responsive { display: -webkit-box; display: -ms-flexbox; display: flex; /* 1 */ } }

/** Section float right 1) Used to float the edition section to the right of the article on large screens */
@media all and (min-width: 90em) { .di-c-section--float-right { position: absolute; top: 48rem; right: 6rem; max-width: 20rem; } }

/** Section float right width 1) Used to float the "Also In" section the right of the article on large screens */
@media all and (min-width: 90em) { .di-c-section--float-right-width { position: absolute; right: 7rem; max-width: 17rem; } }

/** Section that is skewed to the right */
.di-c-section--skew-right { margin-right: -2rem; }

@media all and (min-width: 66em) { .di-c-section--skew-right { margin-right: 0; } }

/** Section with top and bottom border */
.di-c-section--lined { border-top: 1px solid #eee; border-bottom: 1px solid #eee; padding: 2rem 0; }

/** Section with bold top and bottom border */
.di-c-section--bold-lined { border-top: 5px solid #000; border-bottom: 5px solid #000; padding: 4rem 0; }

/** Section with top border */
.di-c-section--lined-top { border-top: 1px solid #eee; padding: 2rem 0; }

/** Section with bold top border */
.di-c-section--bold-lined-top { border-top: 5px solid #000; padding: 2rem 0; }

/** Section with top border only on small screens */
.di-c-section--lined-top-small { border-top: 1px solid #eee; padding: 2rem 0; /** Section with top border within article author share container */ }

@media all and (min-width: 50em) { .di-c-section--lined-top-small { border-top: none; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } }

@media all and (min-width: 50em) { .di-c-article__author-share .di-c-section--lined-top-small { width: 50%; } }

/** Section with bottom border */
.di-c-section--lined-bottom { border-bottom: 1px solid #eee; padding: 2rem 0; }

/** Section with bold bottom border */
.di-c-section--bold-lined-bottom { border-bottom: 5px solid #000; padding: 2rem 0; }

/** Section with bottom border only on small screens */
.di-c-section--lined-bottom-small { border-bottom: 1px solid #eee; padding: 2rem 0; /** Section with bottom border only on small screens within header */ }

.di-c-header .di-c-section--lined-bottom-small { border-bottom: 1px solid #808080; }

@media all and (min-width: 50em) { .di-c-section--lined-bottom-small { border-bottom: none; /** Section with bottom border only on small screens within header on large screens */ }
  .di-c-header .di-c-section--lined-bottom-small { border-bottom: none; } }

/** Section with right border only on large screens */
@media all and (min-width: 50em) { .di-c-section--lined-right-large { padding-right: 1rem; margin-right: 1rem; border-right: 1px solid #ddd; } }

/*------------------------------------*\ #SECTION HEADER \*------------------------------------*/
/** 1) Block containing section title and description to distinguish section */
.di-c-section-header { margin-bottom: 1.75rem; -webkit-animation: fadeSlideIn 2.5s ease 0s 1; animation: fadeSlideIn 2.5s ease 0s 1; /** Section header within last section of page layout secondary (sidebar) */ /** Section header within two column bleed layout 1) Used for the carousel in two column layout fixed wide */ }

@media all and (min-width: 66em) and (min-height: 0px) { .di-l-page-layout__secondary .di-c-section:last-of-type .di-c-section-header { margin-bottom: 0.5rem; } }

@media all and (min-width: 66em) and (min-height: 720px) { .di-l-page-layout__secondary .di-c-section:last-of-type .di-c-section-header { margin-bottom: 1rem; } }

@media all and (min-width: 66em) and (min-height: 1088px) { .di-l-page-layout__secondary .di-c-section:last-of-type .di-c-section-header { margin-bottom: 1.75rem; padding-top: 1rem; } }

@media all and (min-width: 66em) { .di-l-container--two-col-bleed .di-c-section-header { margin-left: 3.5rem; } }

/** Lined section header */
.di-c-section-header--lined { margin-left: 3.5rem; -webkit-animation: none; animation: none; }

@media all and (min-width: 66em) { .di-c-section-header--lined { margin-left: 0; } }

/** Section header title */
.di-c-section-header__title { font-size: 1.2rem; font-family: "Trade Gothic W02", "Trade Gothic W01", Helvetica, Arial, sans-serif; color: #AEB299; font-weight: normal; /** Section header title within small section header */ /** Section header title within blue section header */ /** Section header title within lined section header */ }

.di-c-section-header--small .di-c-section-header__title { font-size: 0.85rem; }

.di-c-section-header--blue .di-c-section-header__title { color: #668B99; }

.di-c-section-header--lined .di-c-section-header__title { -webkit-animation: fadeSlideIn 3.5s ease 0s 1; animation: fadeSlideIn 3.5s ease 0s 1; }

@media all and (min-width: 66em) { .di-c-section-header--lined .di-c-section-header__title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #000; /** Section header title line to the left of section header */ }
  .di-c-section-header--lined .di-c-section-header__title:before { content: ''; display: block; height: 3px; width: 25%; margin-left: 25%; padding-right: 6.5rem; margin-right: 1rem; background: #000; margin-top: -3px; } }

.di-c-section-header--lined .di-c-section-header__title .di-c-section-header__title-icon { display: none; }

@media all and (min-width: 66em) { .di-c-section-header--lined .di-c-section-header__title .di-c-section-header__title-icon { display: block; height: 15px; width: 10px; margin-left: -20px; margin-right: 10px; margin-top: -3px; } }

/** Section header link */
.di-c-section-header__link { color: #F57053; /** Section header link within section header in text passage */ }

.di-c-text-passage .di-c-section-header .di-c-section-header__link { border-bottom: none; }

/** Section header description */
.di-c-section-header__desc { margin-bottom: 0; }

.di-c-section-header--lined .di-c-section-header__desc { margin-right: 2rem; -webkit-animation: fadeSlideIn 3.5s ease 0s 1; animation: fadeSlideIn 3.5s ease 0s 1; }

@media all and (min-width: 66em) { .di-c-section-header--lined .di-c-section-header__desc { margin-left: 50%; padding-left: 7.5rem; margin-right: 7.3rem; } }

/*------------------------------------*\ #SHOW MORE \*------------------------------------*/
/** 1) Block used to fade article and chop until clicked on */
.di-c-show-more { display: none; /** Show more block when JS is activated */ }

.js .di-c-show-more { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; /** Show more block linear gradient 1) Adds the faded look to text just above the show more button */ }

.js .di-c-show-more:before { content: ""; position: absolute; bottom: 0; left: 0; z-index: 1; display: block; width: 100%; height: 10rem; background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255, 255, 255, 0)), color-stop(50%, #fff), to(#fff)); background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #fff 50%, #fff 100%); opacity: 1; }

@media all and (min-width: 50em) { .di-c-show-more { /** Show more block within article container when JS is activated 1) Remove show more block from large screens */ }
  .js .di-c-article-container .di-c-show-more { display: none; /* 1 */ } }

/*------------------------------------*\ #SOCIAL FOLLOW \*------------------------------------*/
/** 1) Section containing a title and a list of social media follow buttons */
.di-c-social-follow { /** Social follow within footer */ }

.di-c-footer .di-c-social-follow { margin-bottom: 1rem; }

/** Social follow title */
.di-c-social-follow__title { font-size: 1rem; line-height: 1; padding: 1rem 0 0; /** Social follow title within footer */ }

.di-c-footer .di-c-social-follow__title { color: #fff; }

/** Social follow list */
.di-c-social-follow__list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }

/** Social follow item */
.di-c-social-follow__item { margin: 0 0.5rem 0.5rem 0; }

/*------------------------------------*\ #STACKED BLOCK \*------------------------------------*/
/** 1) Block consisting of an image and text that are stacked on top of each other */
/** Stacked block title container */
.di-c-stacked-block__title-container { position: relative; }

/** Stacked block title */
.di-c-stacked-block__number { position: absolute; left: -1.5rem; top: 5px; font-family: "Trade Gothic W02", "Trade Gothic W01", Helvetica, Arial, sans-serif; font-size: 0.85rem; font-weight: bold; letter-spacing: 1px; color: #bbb; }

/** Stacked block title */
.di-c-stacked-block__title { font-size: 1.4375rem; font-weight: bold; border-bottom: 1px solid #A51534; /** Stacked block title within small stacked block */ }

.di-c-stacked-block--small .di-c-stacked-block__title { font-size: 1.2rem; border-bottom: none; }

/** Stacked block link */
.di-c-stacked-block__media { display: block; margin-bottom: 1rem; }

/** Stacked block image */
.di-c-stacked-block__image { display: block; }

/** Stacked block body, footer, and title container */
.di-c-stacked-block__body, .di-c-stacked-block__footer, .di-c-stacked-block__title-container { /** Stacked block body, footer, and title container within carousel item 1) Opacity set to 0 so carousel height works and for carousel item transition to selected state */ /** Stacked block body, footer, and title container within active carousel item 1) Opacity set to 1 for carousel item transition to selected state */ }

.di-c-carousel__item .di-c-stacked-block__body, .di-c-carousel__item .di-c-stacked-block__footer, .di-c-carousel__item .di-c-stacked-block__title-container { opacity: 0; -webkit-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; }

.di-c-carousel__item.is-selected .di-c-stacked-block__body, .di-c-carousel__item.is-selected .di-c-stacked-block__footer, .di-c-carousel__item.is-selected .di-c-stacked-block__title-container { opacity: 1; }

/*------------------------------------*\ #STACKED BLOCK LIST \*------------------------------------*/
/** 1) List of stacked blocks */
/** Stacked block list item */
.di-c-stacked-block-list__item { margin-bottom: 2rem; /** Last stacked block list item */ }

.di-c-stacked-block-list__item:last-child { margin-bottom: 0; }

/*------------------------------------*\ #STICKY \*------------------------------------*/
/** 1) Code used for sticky sidebar */
@media all and (min-width: 66em) { .di-js-sticky { position: -webkit-sticky; position: sticky; /* 1 */ top: 0; } }

/*------------------------------------*\ #TABLE \*------------------------------------*/
/** 1) Data Table */
.di-c-table { margin-bottom: 1rem; min-width: 600px; /* 2 */ }

/** Table Header */
.di-c-table__header { background: #A51534; }

/** Table Header Cell */
.di-c-table__header-cell { color: #fff; padding: 0.8rem; }

/** Table Row */
.di-c-table__row { border-bottom: 1px solid #eee; }

/** Table Cell */
.di-c-table__cell { padding: 1.6rem 0.8rem; }

.di-c-table__cell--code { font-family: monospace; color: #07a; }

/** Table Footer Cell */
.di-c-table__footer-cell { padding: 0.8rem; }

/*------------------------------------*\ #TABS \*------------------------------------*/
/** 1) Unordered list of links where the each link targets different information */
/** Tabs list */
.di-c-tabs__list { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0.5rem 2rem 0 3.5rem; background: #eee; /** Tabs list within padded tabs 1) Add more space around the tabs */ }

@media all and (min-width: 66em) { .di-c-tabs--padded .di-c-tabs__list { padding: 0.5rem 12rem 0 12rem; } }

/** Tabs list item 1) Set to flex shrink 0 to display all text on one line */
.di-c-tabs__item { -ms-flex-negative: 0; flex-shrink: 0; /* 1 */ }

/** Tabs list 1) Overlap the tabs bottom border */
.di-c-tabs__link { display: block; padding: 0.5rem 1rem; margin-bottom: -1px; min-width: 5rem; text-align: center; font-family: "Trade Gothic W02", "Trade Gothic W01", Helvetica, Arial, sans-serif; text-transform: uppercase; letter-spacing: 1px; color: #bbb; /** Active tabs link */ }

.di-c-tabs__link.di-is-active { background: #fff; color: #000; }

/** Tab Body */
.di-c-tabs__body { padding: 1rem 0; border-top: 0; }

/** Tab Panel 1) Display by default, and only hide if JS is available */
.di-c-tabs__panel { display: none; padding: 1rem 2rem 1rem 3.5rem; /** Active tabs panel */ /** Tabs panel within padded tabs */ }

.di-c-tabs__panel.di-is-active { display: block; }

@media all and (min-width: 66em) { .di-c-tabs--padded .di-c-tabs__panel { padding: 1rem 12rem 1rem 12rem; } }

/*------------------------------------*\ #TAGS \*------------------------------------*/
/** 1) Terms or phrases that help filter data 2) Display flex used to display items in row and flex wrap wraps items to next line if not enough space */
.di-c-tags { display: -webkit-box; display: -ms-flexbox; display: flex; /* 2 */ -ms-flex-wrap: wrap; flex-wrap: wrap; /* 2 */ }

@media all and (min-width: 40em) { .di-c-tags { margin-left: 0; } }

/** Table of contents title */
.di-c-tags__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; margin-right: 0.5em; margin-bottom: 0.5em; /** Last tags item */ }

.di-c-tags__item:last-child { margin-right: 0; }

/** Tags link */
.di-c-tags__link { display: block; position: relative; padding: 0.25rem 0.625rem; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 1px; color: #fff; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; /** Tags link hover/focus animation initialization for swipe effect */ /** Closable tags link 1) Margin and padding added to space out closing icon and text */ }

.di-c-tags__link:before { content: ''; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: #F57053; -webkit-transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1); transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1); z-index: -1; }

.di-c-tags--closing .di-c-tags__link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0.4rem 0.9rem; margin-right: 0.5rem; }

.di-c-tags__link:hover, .di-c-tags__link:focus { color: #F57053; /** Tags link hover/focus swipe animation */ }

.di-c-tags__link:hover:before, .di-c-tags__link:focus:before { right: 0; width: 0; left: auto; }

/** Tags icon */
.di-c-tags__icon { height: 10px; width: 10px; margin-right: 0.5rem; fill: #fff; color: #fff; }

/** Tags icon inside 1) Icon located inside tags */
.di-c-tags__icon-inside { height: 10px; width: 10px; fill: #fff; margin-left: 1rem; }

/*------------------------------------*\ #TEXT PASSAGE \*------------------------------------*/
/** 1) A passage of text, including various components (i.e. article, blog post) */
.di-c-text-passage { /** Paragraph within the text passage */ /** Link within the text passage */ /** Blockquote citation within text passage */ /** First-level heading within text passage */ /** Second-level heading within text passage */ /** Third-level heading within text passage */ /** Fourth-level heading within text passage */ /** Fifth-level heading within text passage */ /** Sixth-level heading within text passage */ /** Unordered list within text passage */ /** Ordered list within text passage */ /** List item within text passage */ /** Pullquote citation within text passage */ /** Image caption within text passage */ /** External link within text passage */ /** Section responsive within text passage */ }

.di-c-text-passage p { margin-bottom: 1rem; }

.di-c-text-passage--small .di-c-text-passage p { font-size: 0.85rem; }

.di-c-text-passage a:not(.di-c-btn) { color: #000; border-bottom: 1px solid #A51534; overflow-wrap: break-word; word-wrap: break-word; }

.di-c-text-passage a:not(.di-c-btn):hover, .di-c-text-passage a:not(.di-c-btn):focus { color: #808080; color: #A51534; }

.di-c-text-passage cite { display: block; margin-top: 1rem; font-style: normal; font-weight: bold; text-transform: uppercase; font-size: 0.75rem; /** Dash before citation */ }

.di-c-text-passage cite:before { content: "—"; }

.di-c-text-passage h1 { margin-bottom: 1rem; }

.di-c-text-passage h2 { margin: 1rem 0 1rem; color: #444; font-weight: bold; }

.di-c-text-passage h3 { margin: 1rem 0 1rem; }

.di-c-text-passage h4 { margin: 1rem 0 1rem; }

.di-c-text-passage h5 { margin: 1rem 0 1rem; }

.di-c-text-passage h6 { margin: 1rem 0 1rem; }

.di-c-text-passage ul { margin-bottom: 1rem; margin-left: 2rem; /** Unordered list item */ /** Last unordered list item */ /** Unordered list within article TL;DR */ }

.di-c-text-passage ul li { /** Bullet of unordered list item */ }

.di-c-text-passage ul li:before { content: ""; display: inline-block; position: relative; bottom: 3px; height: 6px; width: 6px; margin-right: 0.5rem; background: #A51534; }

.di-c-text-passage ul li:last-child { margin-bottom: 0; }

.di-c-article__tldr .di-c-text-passage ul { margin-left: 0; }

.di-c-text-passage ol { list-style: decimal; margin-left: 3rem; margin-bottom: 1rem; /** Last ordered list item */ /** Ordered list within article TL;DR */ }

.di-c-text-passage ol li:last-child { margin-bottom: 0; }

.di-c-article__tldr .di-c-text-passage ol { margin-left: 0; }

.di-c-text-passage li { margin-bottom: 0.5rem; line-height: 1.6; }

.di-c-text-passage .di-c-pullquote__citation { margin-top: 0; font-size: 1.4375rem; font-weight: bold; font-style: normal; text-transform: inherit; }

.di-c-text-passage .di-c-caption { font-size: 0.75rem; font-style: italic; }

.di-c-text-passage .di-c-external-link { display: inline-block; position: relative; font-size: 1.4375rem; font-weight: bold; margin: 1rem 0; /** Icon after text in the external link within text passage */ }

.di-c-text-passage .di-c-external-link:after { content: ''; display: inline-block; margin-left: 0.5rem; top: 0; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid #A51534; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }

.di-c-text-passage .di-c-external-link:hover, .di-c-text-passage .di-c-external-link:focus { /** Icon after text in the hovered/focused external link within text passage */ }

.di-c-text-passage .di-c-external-link:hover:after, .di-c-text-passage .di-c-external-link:focus:after { -webkit-transform: translateX(4px); transform: translateX(4px); }

@media all and (min-width: 50em) { .di-c-section--responsive .di-c-text-passage { width: 50%; } }

/** Small text passage 1) Font size decreases to small 2 */
.di-c-text-passage--small { font-size: 0.85rem; /* 1 */ }

/** Text passage grow 1) Text passage starts out with medium font then grows to medium 2 font size */
@media all and (min-width: 90em) { .di-c-text-passage--grow { font-size: 1.2rem; } }

/** Text passage linear-gradient 1) Font size increased to large */
.di-c-text-passage--large { font-size: 1.4375rem; }

/*------------------------------------*\ #TILE \*------------------------------------*/
/** 1) A block of stylized content containing a key and a value 2) The root of a tile is typically <a> tag */
.di-c-tile { display: block; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 1.5rem; background: #444; color: #fff; -webkit-transition: background 0.2s ease-in-out; transition: background 0.2s ease-in-out; }

.di-c-tile:hover, .di-c-tile:focus { color: #fff; background: #000; }

/** Tile headline 1) Headline of the tile */
.di-c-tile__headline { display: block; font-size: 1.4375rem; }

/*------------------------------------*\ #UTILITIES \*------------------------------------*/
/*------------------------------------*\ #ALIGNMENT \*------------------------------------*/
/** Alignment-related classes */
.di-u-align-baseline { -webkit-box-align: baseline !important; -ms-flex-align: baseline !important; align-items: baseline !important; }

/*------------------------------------*\ #ANIMATION \*------------------------------------*/
/** No animation 1) Remove animation from any element with this class */
.di-u-no-animation { -webkit-animation: none !important; animation: none !important; /** All elements within no animation 1) Remove animation */ }

.di-u-no-animation * { -webkit-animation: none !important; animation: none !important; /* 1 */ }

/*------------------------------------*\ #DISPLAY CLASSES \*------------------------------------*/
/** Display block 1) Add display block by overriding */
.di-u-display-block { display: block !important; }

/** Display flex 1) Add display flex by overriding */
.di-u-display-flex { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; }

/** Display inline 1) Add display inline by overriding */
.di-u-display-inline { display: inline !important; }

/*------------------------------------*\ #HEIGHT CLASSES \*------------------------------------*/
/** Set min height 100% of viewport height 1) Add min-height 100vh to override */
.di-u-min-height-100 { min-height: 100vh !important; }

/** Used for flexbox IE bug fixes 1) Images don't like flexbox in IE. Set the the outermost container within the element that is display: flex to have a min-height of 1px. This fixes the bug. */
.di-u-min-height-1 { min-height: 1px !important; }

.di-u-height-50 { height: 50rem !important; }

/*------------------------------------*\ #WIDTH CLASSES \*------------------------------------*/
/** Force width to 100% */
.di-u-width-25 { width: 25% !important; }

/** Force width to 100% */
.di-u-width-100 { width: 100% !important; }

/*------------------------------------*\ #POSITION CLASSES \*------------------------------------*/
/** Position relative 1) Add position relative by overriding */
.di-u-position-relative { position: relative !important; }

/*------------------------------------*\ #PADDING \*------------------------------------*/
/** No Padding */
.di-u-padding-none { padding: 0 !important; }

/** Half Padding */
.di-u-padding-half { padding: 0.5rem !important; }

/** Default Padding */
.di-u-padding { padding: 1rem !important; }

/** Double Padding */
.di-u-padding-double { padding: 2rem !important; }

/** No Padding 1) Adds 2rem to all sides padding */
.di-u-padding-quad { padding: 4rem !important; }

/** No Top Padding 1) Adds 0 to top padding */
.di-u-padding-top-none { padding-top: 0 !important; }

/** Half Top Padding 1) Adds 0.5rem to top padding */
.di-u-padding-top-half { padding-top: 0.5rem !important; }

/** Single Top Padding 1) Adds 1rem of top padding */
.di-u-padding-top { padding-top: 1rem !important; }

/** Double Top Padding 1) Adds 2rem of top padding */
.di-u-padding-top-double { padding-top: 2rem !important; }

/** quad Top Padding 1) Adds 4rem of top padding */
.di-u-padding-top-quad { padding-top: 4rem !important; }

/** No right Padding 1) Adds 0 to right padding */
.di-u-padding-right-none { padding-right: 0 !important; }

/** Half Right Padding 1) Adds 0.5rem of right padding */
.di-u-padding-right-half { padding-right: 0.5rem !important; }

/** Single Right Padding 1) Adds 1rem of right padding */
.di-u-padding-right { padding-right: 1rem !important; }

/** Double Right Padding 1) Adds 2rem of right padding */
.di-u-padding-right-double { padding-right: 2rem !important; }

/** quad Right Padding 1) Adds 4rem of right padding */
.di-u-padding-right-quad { padding-right: 4rem !important; }

/** No bottom Padding 1) Adds 0 to bottom padding */
.di-u-padding-bottom-none { padding-bottom: 0 !important; }

/** Half Bottom Padding 1) Adds 0.5rem of bottom padding */
.di-u-padding-bottom-half { padding-bottom: 0.5rem !important; }

/** Single Bottom Padding 1) Adds 1rem of bottom padding */
.di-u-padding-bottom { padding-bottom: 1rem !important; }

/** Double Bottom Padding 1) Adds 2rem of bottom padding */
.di-u-padding-bottom-double { padding-bottom: 2rem !important; }

/** quad Bottom Padding 1) Adds 4rem of bottom padding */
.di-u-padding-bottom-quad { padding-bottom: 4rem !important; }

/** No left Padding 1) Adds 0 to left padding */
.di-u-padding-left-none { padding-left: 0 !important; }

/** Half Left Padding 1) Adds 0.5rem of left padding */
.di-u-padding-left-half { padding-left: 0.5rem !important; }

/** Single Left Padding 1) Adds 1rem of left padding */
.di-u-padding-left { padding-left: 1rem !important; }

/** Double Left Padding 1) Adds 2rem of left padding */
.di-u-padding-left-double { padding-left: 2rem !important; }

/** quad Left Padding 1) Adds 4rem of left padding */
.di-u-padding-left-quad { padding-left: 4rem !important; }

/** Padding left 10rem on large screens 1) Used for sidebar in two column layout for wide vertical bar to take care of the overlay */
@media all and (min-width: 66em) { .di-u-padding-left-10-large { padding-left: 10rem !important; } }

/*------------------------------------*\ #MARGIN \*------------------------------------*/
/** No Margin */
.di-u-margin-none { margin: 0 !important; }

/** Half margin */
.di-u-margin-half { margin: 0.5rem !important; }

/** Default margin */
.di-u-margin { margin: 1rem !important; }

/** Double margin */
.di-u-margin-double { margin: 2rem !important; }

/** No margin 1) Adds 2rem to all sides margin */
.di-u-margin-quad { margin: 4rem !important; }

/** No Top margin 1) Adds 0 to top margin */
.di-u-margin-top-none { margin-top: 0 !important; }

/** Half Top margin 1) Adds 0.5rem to top margin */
.di-u-margin-top-half { margin-top: 0.5rem !important; }

/** Single Top margin 1) Adds 1rem of top margin */
.di-u-margin-top { margin-top: 1rem !important; }

/** Double Top margin 1) Adds 2rem of top margin */
.di-u-margin-top-double { margin-top: 2rem !important; }

/** quad Top margin 1) Adds 4rem of top margin */
.di-u-margin-top-quad { margin-top: 4rem !important; }

/** Foce a margin top of 12rem */
.di-u-margin-top-twelve { margin-top: 12rem; }

/** Foce a margin top of -2rem */
.di-u-margin-top-double-negative { margin-top: -2rem; }

/** No right margin 1) Adds 0 to right margin */
.di-u-margin-right-none { margin-right: 0 !important; }

/** Half Right margin 1) Adds 0.5rem of right margin */
.di-u-margin-right-half { margin-right: 0.5rem !important; }

/** Single Right margin 1) Adds 1rem of right margin */
.di-u-margin-right { margin-right: 1rem !important; }

/** Double Right margin 1) Adds 2rem of right margin */
.di-u-margin-right-double { margin-right: 2rem !important; }

/** quad Right margin 1) Adds 4rem of right margin */
.di-u-margin-right-quad { margin-right: 4rem !important; }

/** No bottom margin 1) Adds 0 to bottom margin */
.di-u-margin-bottom-none { margin-bottom: 0 !important; }

/** Half Bottom margin 1) Adds 0.5rem of bottom margin */
.di-u-margin-bottom-half { margin-bottom: 0.5rem !important; }

/** Single Bottom margin 1) Adds 1rem of bottom margin */
.di-u-margin-bottom { margin-bottom: 1rem !important; }

/** Double Bottom margin 1) Adds 2rem of bottom margin */
.di-u-margin-bottom-double { margin-bottom: 2rem !important; }

/** quad Bottom margin 1) Adds 4rem of bottom margin */
.di-u-margin-bottom-quad { margin-bottom: 4rem !important; }

/** No left margin 1) Adds 0 to left margin */
.di-u-margin-left-none { margin-left: 0 !important; }

/** Half Left margin 1) Adds 0.5rem of left margin */
.di-u-margin-left-half { margin-left: 0.5rem !important; }

/** Single Left margin 1) Adds 1rem of left margin */
.di-u-margin-left { margin-left: 1rem !important; }

/** Double Left margin 1) Adds 2rem of left margin */
.di-u-margin-left-double { margin-left: 2rem !important; }

/** quad Left margin 1) Adds 4rem of left margin */
.di-u-margin-left-quad { margin-left: 4rem !important; }

/** Foce a margin left of -2rem */
.di-u-margin-left-double-negative { margin-left: -2rem; }

/** Foce a margin left of -4rem */
.di-u-margin-left-quad-negative { margin-left: -4rem; }

/** Force margin 0 auto to center content */
.di-u-margin-center { margin: 0 auto; }

/** Force margin left auto 1) Used with di-u-margin-right-auto to center item */
.di-u-margin-left-auto { margin-left: auto; }

/** Force margin right auto 1) Used with di-u-margin-left-auto to center item */
.di-u-margin-right-auto { margin-right: auto; }

/*------------------------------------*\ #FLEXBOX \*------------------------------------*/
/** Force flex 1 0 auto to take up rest of space in flexbox item */
.di-u-flex-one { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; }

/*------------------------------------*\ #VISIBILITY CLASSES \*------------------------------------*/
/** Is Hidden 1) Completely remove from the flow and screen readers. */
.di-u-is-hidden { display: none !important; visibility: hidden !important; }

/** Is Visibly Hidden 1) Completely remove from the flow but leave available to screen readers. */
.di-u-is-vishidden { position: absolute !important; overflow: hidden; width: 1px; height: 1px; padding: 0; border: 0; clip: rect(1px, 1px, 1px, 1px); }

/* VENDOR */
.grecaptcha-badge { visibility: hidden; }