:root { /*Colors*/ --color1: #B7312C; /* Red */ --color1Trans: #B7312Ce9; /* Red Trans */ --color2: #EFBD47; /* Yellow */ --color3: #A2A4A3; /* Gray */ --color4: #303030; /* Dark Gray */ --color4Trans: #303030e8; /* Dark Gray Trans */ --color5: #38A1F3; /* Bright Blue */ --black: #000000; /* Black */ --white: #ffffff; /* White */ --gray: #f4f4f4; /* Gray */ /*Fonts */ --headingFont: 'adobe-text-pro','Times New Roman', Times, serif; --bodyFont: 'source-sans-pro', Arial, Helvetica, san-serif; } /*Background Colors and Gradients*/ .color1Bg { background-color: var(--color1); } /* Red */ .color2Bg { background-color: var(--color2); } /* Yellow */ .color3Bg { background-color: var(--color3); } /* Gray */ .color4Bg { background-color: var(--color4); } /* Dark Gray */ .color5Bg { background-color: var(--color5); } /* Bright Blue */ .blackBg { background-color: var(--black); color: var(--white); } /* Black */ .whiteBg { background-color: var(--white); } /* White */ .grayBg { background-color: var(--gray); } /* Gray */ /*Overlay versions with opacity*/ .overlay { background-color: transparent; } .overlay.color1Bg { background-color: var(--color1Trans); } /* Red */ .overlay.color4Bg { background-color: var(--color4Trans); } /* Dark Gray */ .overlay.grayBg { background-color: rgba(244, 244, 244, .95); } /* Light Gray */ /* Style Guide */ .colorBoxWrapper { display: inline-block; margin-right: 10px; margin-bottom: 10px; } .colorBox { width: 120px; height: 120px; margin-bottom: 10px; } .styleList { column-count: 3; } .styleList li { margin-bottom: 10px; } @media all and (max-width: 580px) { .styleList { column-count: 1; } } /* ============================ GLOBAL ELEMENTS * ============================*/ html { -webkit-text-size-adjust: 100%; } html, body { height:100%; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, article, aside, canvas, details, embed, figure, figcaption, footer, .header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, .header, hgroup, menu, nav, section { display: block; } body { line-height: 1.65; font-family: var(--bodyFont); font-weight: 400; font-size: 1em; color: var(--color4); background-color: var(--white); } body { top: 0px !important; } /* For Google Translate Bar Fix */ blockquote { border-left: 3px solid var(--color2); color: #666; font-size: 1.125rem; font-style: italic; margin-bottom: 25px; padding: 0 40px 0 25px;} .mobileOnly { display: none !important; } .tabletOnly { display: none !important; } .desktopOnly { display: block !important; } .hidden { display: none; } .visuallyhidden, .slick-sr-only { position: absolute; left: -99999px; } .loadingContent { visibility: hidden; } input[type=submit], input[type=text], input[type=email], input[type=url], input[type=password] { -webkit-appearance: none; -moz-appearance: none; border-radius: 0; } select { font-family: var(--bodyFont); padding: 5px; cursor: pointer; border-radius: 0;-moz-border-radius: 0; -webkit-border-radius: 0; border: 2px solid var(--color4); } * { -moz-font-smoothing: antialiased; -webkit-font-smoothing: antialiased; box-sizing: border-box; -moz-box-sizing: border-box;-webkit-box-sizing: border-box;} .screenreader { position: fixed; top: 0; z-index: 999999; } .screenreader a { position: absolute; width: 260px; padding: 10px; left: -100000px; background-color: var(--color1); color: var(--white); font-weight: bold; text-decoration: none; line-height: 1.4; text-align: center; } .screenreader a:hover { text-decoration: underline; } .screenreader a:focus { left: 0; top: 0; } sup { vertical-align: super; font-size:.875em; } ol li { padding-left: 5px; } table { border-collapse: collapse;} table, th, td { border: 1px solid #999; } table#borderless, table#borderless td {border: none !important;} /* Global Form Styles */ /* Form field text size must be a minimum of 1rem */ .formGroup fieldset { border: 0; padding: 0; } .formGroup legend { font-size: 1rem; font-weight: 600; } .formGroup label { font-size: 1rem; font-weight: 600; cursor: pointer; } .formGroup input { border-radius: 0; font-size: 1rem; color: var(--color4); } .formGroup select, .formGroup input[type=text], .formGroup input[type=email], .formGroup input[type=url], .formGroup input[type=password], .formGroup textarea { display: flex; color: var(--color4); font-family: var(--bodyFont); font-size: 1rem; border: 1px solid var(--color4); border-radius: 0; background: var(--white); padding: 8px 8px; margin-bottom: 15px; } .formGroup button { font-size: 1rem; font-weight: 600; background-color: var(--color2); color: var(--color4); padding: 10px 25px; border: 1px solid var(--color2); border-radius: 0; cursor: pointer; } .formGroup button:hover, .formGroup button:focus { background-color: var(--color2); border: 1px solid var(--color2); } .formGroup button:after { display: inline-block; vertical-align: top; content: url(../images/cta-button-arrow-dark-gray.svg) ; transition: all 0.4s ease-in-out; transform: translate(10px, 0); padding: 2px 0 0 0; } .formGroup button:hover:after, .formGroup button:focus:after { transform: translate(15px, 0); } .formRow { margin: 0 0 20px 0; } @media all and (max-width: 580px) { .formGroup select, .formGroup input[type=text], .formGroup input[type=email], .formGroup input[type=url], .formGroup input[type=password], .formGroup textarea { width: 100%; } } /* Global Headings */ h1, h2, h3, h4, h5, h6 { position: relative; width: 100%; display: block; } h1 { font-family: var(--headingFont); font-weight: 400; font-size: 2.2rem; color: var(--color4); line-height: 1.15; margin-bottom: 13px; } h2 { font-family: var(--headingFont); font-size: 2.7rem; color: var(--color1); line-height: 1.15; margin-bottom: 18px; font-weight: 400; } h3 { font-family: var(--bodyFont); font-size: 1.55rem; color: var(--color4); line-height: 1.1; font-weight: 700; margin-bottom: 11px; } .two h3:first-child { margin-bottom: 18px; } h4 { font-family: var(--bodyFont); font-size: 1.4rem; color: var(--color4); line-height: 1.1; font-weight: 600; margin-bottom: 11px; } h5 { font-family: var(--bodyFont); font-size: 1.3rem; color: var(--color4); line-height: 1.1; font-weight: 600; margin-bottom: 11px; } h6 { font-family: var(--bodyFont); font-size: 1.2rem; color: var(--color4); line-height: 1.1; font-weight: 600; margin-bottom: 11px; } .color1 h1, .color1 h2, .color1 h3, .color1 h4, .color1 h5, .color1 h6, .color1Bg h1, .color1Bg h2, .color1Bg h3, .color1Bg h4, .color1Bg h5, .color1Bg h6 { color: var(--white); } @media all and (max-width: 580px) { h2 { font-size: 2.25rem; margin-bottom: 25px; } } /* Global Content */ a { color: var(--color1); } .semibold { font-weight: 600; } /* Main Content HREF */ .wysiwygContent a, .columns .content a { color: var(--color1); font-weight: 600; word-wrap: break-word; transition: all 0.4s ease-in-out; } .wysiwygContent a:hover, .columns .content a:hover { color: var(--color4); } .columns .content p:last-of-type + a.ctaButton, .columns .content p:last-of-type + a.ctaLink { margin-top: 10px; } /* Main Content HREF Color Background */ .color1 .wysiwygContent a, .columns.color1 .content a, .color1Bg .content a, .color1Bg .content a:not(.ctaButton) { color: var(--white); font-weight: 700; } h3 a, .color1 .wysiwygContent h3 a, .columns.color1 .content h3 a, .color1Bg .content h3 a, .color1Bg .content h3 a:not(.ctaButton) { font-weight: 600; } .color1 .wysiwygContent a:not(.ctaButton):hover, .columns.color1 .content a:not(.ctaButton):hover, .color1 .wysiwygContent a:not(.ctaButton):focus, .columns.color1 .content a:not(.ctaButton):focus, .color1Bg .content a:not(.ctaButton):hover, .color1Bg .content a:not(.ctaButton):focus { color: var(--white); } /* Callout Link Base */ .ctaLink, a.ctaLink, .wysiwygContent a.ctaLink, .columns .content a.ctaLink { display: inline-block; position: relative; font-size: 1.15rem; font-weight: 600; color: #4c4c4c; text-align: left; text-decoration: none; text-transform: uppercase; padding-bottom: 0; transition: all 0.4s ease-in-out; } .ctaLink:not(:last-of-type), a.ctaLink:not(:last-of-type) { margin-bottom: 15px; margin-right: 55px; } .ctaLink:hover, .ctaLink:focus, a.ctaLink:hover, a.ctaLink:focus, .wysiwygContent a.ctaLink:hover, .wysiwygContent a.ctaLink:focus, .columns .content a.ctaLink:hover, .columns .content a.ctaLink:focus { color: #4c4c4c; } .ctaLink span { position: relative; padding-bottom: 2px; } .center a.ctaLink, *[style="text-align: center;"] a.ctaLink, a[style="text-align: center;"].ctaLink, .columns .content *[style="text-align: center;"] a.ctaLink { text-align: center; margin-left: auto; margin-right: auto; } .center a.ctaLink span:before, *[style="text-align: center;"] a.ctaLink span:before, a[style="text-align: center;"].ctaLink span:before, .columns .content *[style="text-align: center;"] a.ctaLink span:before, .center a.ctaLink:hover span:before, *[style="text-align: center;"] a.ctaLink:hover span:before, a[style="text-align: center;"].ctaLink:hover span:before, .columns .content *[style="text-align: center;"] a.ctaLink:hover span:before, .center a.ctaLink:focus span:before, *[style="text-align: center;"] a.ctaLink:focus span:before, a[style="text-align: center;"].ctaLink:focus span:before, .columns .content *[style="text-align: center;"] a.ctaLink span:focus:before { display: none; } .center a.ctaLink:hover, *[style="text-align: center;"] a.ctaLink:hover, a[style="text-align: center;"].ctaLink:hover, .columns .content *[style="text-align: center;"] a.ctaLink:hover, .center a.ctaLink:focus, *[style="text-align: center;"] a.ctaLink:focus, a[style="text-align: center;"].ctaLink:focus, .columns .content *[style="text-align: center;"] a.ctaLink:focus { text-decoration: underline; } /* Callout Link Base Underline */ .ctaLink span:before, a .ctaLink span:before, a.ctaLink span:before, .wysiwygContent a.ctaLink span:before, .columns .content a.ctaLink span:before { display: block; content:""; position: absolute; bottom: 0; left: 0; height: 1px; width: 100%; border-bottom: 1px solid transparent; transition: all 0.4s ease-in-out; } .ctaLink:hover span:before, a.ctaLink:hover span:before, .wysiwygContent a.ctaLink:hover span:before, .columns .content a.ctaLink:hover span:before, a:focus .ctaLink span:before, a.ctaLink:focus span:before, .wysiwygContent a.ctaLink:focus span:before, .columns .content a.ctaLink:focus span:before { border-bottom: 1px solid var(--color4); } /* Callout Link Base Indicator */ .ctaLink:after, a .ctaLink:after, a.ctaLink:after, .wysiwygContent a.ctaLink:after, .columns .content a.ctaLink:after { display: inline-block; height: 15px; content: url(../images/link-arrow-right.svg) ; transform: translate(2px, 0); padding: 2px 0 0 8px; vertical-align: top; transition: all 0.3s ease-in-out; } .ctaLink:hover:after, a:hover .ctaLink:after, a.ctaLink:hover:after, .wysiwygContent a.ctaLink:hover:after, .columns .content a.ctaLink:hover:after, a:focus .ctaLink:after, a.ctaLink:focus:after, .wysiwygContent a.ctaLink:focus:after, .columns .content a.ctaLink:focus:after { transform: translate(7px, 0); } /* Callout Link Base Back Link Indicator */ a.ctaLink.backLink:after { display: none; } a.ctaLink.backLink:before { display: inline-block; height: 15px; content: url(../images/link-arrow-left.svg) ; transform: translate(2px, 0); padding: 2px 18px 0 0; vertical-align: top; transition: all 0.3s ease-in-out; } a.ctaLink.backLink:hover:before, a.ctaLink.backLink:focus:after { transform: translate(2px, 0); } /* Callout Link Color Background */ .color1 .ctaLink, .color1 a.ctaLink, .color1Bg a.ctaLink, .wysiwygContent.color1 a.ctaLink, .columns.color1 .content a.ctaLink, .columns .color1Bg .content a.ctaLink { color: var(--white); } .color1 a.ctaLink:hover, .color1 a.ctaLink:focus, .wysiwygContent .color1 a.ctaLink:hover, .wysiwygContent .color1 a.ctaLink:focus, .columns .color1 .content a.ctaLink:hover, .columns .color1 .content a.ctaLink:focus, .columns.color1 .content a.ctaLink:hover, .columns.color1 .content a.ctaLink:focus { color: var(--white); } .color1 a:hover .ctaLink span:before, .color1 .ctaLink:hover span:before, .color1 a.ctaLink:hover span:before, .color1 .wysiwygContent a.ctaLink:hover span:before, .columns.color1 .content a.ctaLink:hover span:before, .color1 a:focus .ctaLink span:before, .color1 a.ctaLink:focus span:before, .color1 .wysiwygContent a.ctaLink:focus span:before, .columns.color1 .content a.ctaLink:focus span:before, .columns .color1Bg .content a.ctaLink:hover span:before, .columns .color1Bg .content a.ctaLink:focus span:before { border-bottom: 1px solid var(--white); } /* CTA Button Base */ a.ctaButton { position: relative; display: inline-flex; justify-content: space-around; min-width: 148px; font-size: .95rem; font-weight: 600; color: var(--color4); text-align: center; text-transform: uppercase; line-height: 1.1; background-color: var(--color2); text-decoration: none; margin: 0 0 20px 0; padding: 13px 30px 12px 30px; transition: all 0.4s ease-in-out; } a.ctaButton:last-of-type { margin-bottom: 0; } .color1Bg a.ctaButton:last-of-type, .grayBg a.ctaButton:last-of-type { margin-bottom: 20px; } a.ctaButton:last-of-type + p { margin-top: 20px; } a.ctaButton:not(:last-of-type) { margin: 0 50px 20px 0; } a.ctaButton, .columns .content a.ctaButton { color: var(--color4); } a.ctaButton:hover, a.ctaButton:focus { color: var(--color4); background-color: var(--color2); padding: 13px 42px 12px 18px; } a.ctaButton:after { position: absolute; top: 0; bottom: 0; right: 15px; width: 12px; height: 12px; content: ""; margin: auto 0; background-image: url(../images/cta-button-arrow-dark-gray.svg) ; background-repeat: no-repeat; background-position: center; transition: all 0.4s ease-in-out; opacity: 0; } a.ctaButton:hover:after, a.ctaButton:focus:after, .wysiwygContent a.ctaButton:hover:after, .wysiwygContent a.ctaButton:focus:after, .columns .content a.ctaButton:hover:after, .columns .content a.ctaButton:focus:after { opacity: 1; } @media all and (max-width: 767px) { a.ctaButton { display: block; clear: both; max-width: max-content; margin: 0 0 20px 0; } .center a.ctaButton, *[style="text-align: center;"] a.ctaButton { display: block; clear: both; margin: 20px auto; } .center a.ctaButton:last-of-type, *[style="text-align: center;"] a.ctaButton:last-of-type { margin-top: 0; margin-bottom: 0; } .columns .content p:last-of-type + a.ctaButton { margin-top: 40px; } .columns .content p:last-of-type + a.ctaLink { margin-top: 0; } } /* Taggbox Button*/ .tb_see_more_btn { font-size: .95rem !important; font-weight: 600 !important; background-color: var(--color2) !important; color: var(--color4) !important; text-align: center; text-transform: uppercase; line-height: 1.1; border-radius: 0 !important; border: 1px solid var(--color2) !important; margin: 0 0 20px 0; padding: 13px 30px 12px 30px !important; transition: all 0.4s ease-in-out; } .tb_see_more_btn:hover, .tb_see_more_btn:focus { color: var(--color4); background-color: var(--color2); padding: 13px 42px 12px 18px; } .tb_see_more_btn:after { position: absolute; top: 0; bottom: 0; right: 15px; width: 12px; height: 12px; content: ""; margin: auto 0; background-image: url(../images/cta-button-arrow-dark-gray.svg) ; background-repeat: no-repeat; background-position: center; transition: all 0.4s ease-in-out; opacity: 0; } .tb_see_more_btn:hover:after, .tb_see_more_btn:focus:after { opacity: 1; } /* Back to Top */ a#topLink { position: fixed; width: 45px; height: 45px; bottom: 80px; right: 30px; display: block; font-size: 1.3rem; text-align: center; opacity: 0.5; background: var(--white); border-radius: 50%; color: var(--color4); z-index: 20; transition: all 0.4s ease-in-out; } a#topLink ion-icon { color: var(--color4); margin: 12px auto; } a#topLink :hover, a#topLink :focus { opacity: 1; } a#topLink .topLinkText { position: absolute; text-indent: -99999px; } @media all and (max-width: 960px) { a#topLink { right: 22px; } } /* WYSIWYG Items */ p { margin-bottom: 22px; } p.subhead, .subhead, h2.subhead { position: relative; display: block; font-family: var(--bodyFont); font-weight: 600; font-size: 1.57rem; color: var(--color4); line-height: 1.2; text-transform: uppercase; margin: 0 0 22px 0; } .home p.subhead, .home .subhead, .home h2.subhead { margin: 0 0 35px 0; } .color1 .subhead, .color1Bg .subhead { color: var(--white); } .subhead:after { position: absolute; top: auto; bottom: -14px; left: 0; right: auto; content: ""; width: 122px; height: 3px; background-color: var(--color2); } .center .subhead:after, *[style="text-align: center;"] .subhead:after { right: 0; margin-left: auto; margin-right: auto; } .wysiwygContent ul, .content ul, .wysiwygContent ol, .content ol { padding: 0 0 20px 48px; } .wysiwygContent > ul, .content > ul, .wysiwygContent > ol, .content > ol { padding-top: 5px; padding-bottom: 20px; } .wysiwygContent p + ul, .content p + ul, .wysiwygContent p + ol, .content p + ol, .wysiwygContent ul + ul, .content ul + ul, .wysiwygContent ul + ol, .content ul + ol, .wysiwygContent ol + ul, .content ol + ul, .wysiwygContent ol + ul, .content ol + ul, .wysiwygContent ol + ol, .content ol + ol, .wysiwygContent ol + ol, .content ol + ol { padding-top: 0; } .wysiwygContent ul > li:before, .content ul > li:before { float: left; content: url("../images/red-caret-indicator.svg"); font-size: 1rem; vertical-align: top; padding: 0; line-height: 1; margin: 5px 6px 0 -17px; } .wysiwygContent ul > li, .content ul > li { list-style-type: none; } .wysiwygContent ul > li::marker, .content ul > li::marker { display: none; } .wysiwygContent ol > li::marker, .content ol > li::marker { font-size: 1.15rem; color: var(--color1); } em { font-style: italic; } img { height: auto; max-width: 100%; } td img { max-width: none; } strong { font-weight: 700; } iframe { max-width: 100%; } input { border-radius: 0;-webkit-border-radius:0px; } button { font-family: var(--bodyFont); } /* Table */ table { margin-bottom: 20px; } table th, table td { padding: 5px 10px; vertical-align: baseline; } table.stripes { clear: both; border-spacing: 0; border: 1px solid #ccc; } table.stripes th { border: 1px solid #ccc; } table.stripes tr:nth-child(even) { background-color: var(--gray); } table.stripes tr { display: table-row; border: 1px solid var(--gray); } table.stripes thead td, table.stripes thead th { vertical-align: middle; } table.stripes td { border: 1px solid #ccc; } /* Figure Image */ figure { position: relative; } figure .align-right { float: right; } figure .align-left { float: left; } figure > figcaption { position: relative; color: var(--color4); font-size: 1rem; font-weight: 600; font-style: italic; clear: both; margin: 20px 0 20px 0; } /* WYSIWYG Image Positioning */ .center { text-align: center; } .align-left, img[align*="left"], img[style*="text-align: left"], img[style*="float: left"] { float: left; margin: 0 30px 20px 0; } p > .align-left, span > .align-left { margin: 8px 30px 20px 0; } .align-right, img[align*="right"], img[style*="text-align: right"], img[style*="float: right"] { float: right; margin: 0 0 20px 30px; } p > .align-right, span > .align-right { margin: 8px 0 15px 30px; } img[align*="center"], img[style*="text-align: center"], [style*="text-align: center"] img { margin: 0 auto 20px auto; } .align-center { text-align: center; display: block; } @media all and (max-width: 960px) { /* Global */ .tabletOnly { display: block!important; } .desktopOnly { display: none!important; } input { font-size: 1rem; } .wysiwygContent ul, .content ul, .wysiwygContent ol, .content ol { padding: 0 0 0 20px; } } @media all and (max-width: 580px) { .mobileOnly { display: block !important; } /* WYSIWYG Image Positioning */ .align-left, img[align*="left"], img[style*="text-align: left"], .align-right, img[align*="right"], img[style*="text-align: right"], .align-center, img[align*="center"], img[style*="text-align: center"] { float: none; clear: both; display: block; margin-left: 0; margin-right: 0; } figure.image { float: left; width: 100%; text-align: center; margin-top: 15px; margin-bottom: 20px; } figure .align-right { float: none; width: auto; max-width: 100%; clear: both; text-align: center; margin-left: auto; margin-right: auto; } figure .align-left { float: none; width: auto; max-width: 100%; clear: both; text-align: center; margin-left: auto; margin-right: auto; } } .wrapper { max-width: 1440px; width: 100%; margin: 0 auto; } .landing .mainContent { max-width: 100%; } /* ============================ GRID LAYOUT LEFT SECTION * ============================*/ .interior .mainContent { display: grid; grid-area: 1 / 1 / 8 / 2; grid-template-columns: 1fr 3fr; padding: 60px 35px 0 35px; max-width: 1740px; } .interiorContent { display: grid; grid-area: 1 / 2 / 8 / 2; grid-template-rows: max-content; grid-auto-rows: max-content; max-width: 1106px; } .sectionNavColumn { display: grid; grid-area: 1 / 1 / 6 / 2; grid-template-columns: 100%; max-width: 423px; width: 100%; padding: 0; } @media all and (min-width: 1801px) { .interiorContent { margin-left: 10.5%; } } @media all and (min-width: 961px) and (max-width: 1800px) { .interiorContent { margin-left: 5.5%; } } @media all and (min-width: 961px) { .interiorContent { margin-top: -25px; width: 89.5%; } } @media all and (max-width: 960px) { .interior .mainContent { grid-template-columns: 1fr; } .sectionNavColumn { position: relative; grid-area: 1 / 1 / 3 / 2; grid-template-columns: 100%; max-width: 100%; margin: 0 0 5px 0; padding: 0; } .interiorContent { display: grid; grid-area: 3 / 1 / 8 / 2; } } @media all and (max-width: 580px) { .sectionNavColumn { margin: 0; } } /* ============================ GRID LAYOUT RIGHT SECTION * ============================*/ /* Update Section Optional SideBar class if included */ .rightSection .mainContent { display: grid; grid-area: 1 / 1 / 8 / 2; grid-template-columns: 3fr 1fr; padding: 0; max-width: 1440px; } .rightSection .interiorContent { display: grid; grid-area: 1 / 1 / 8 / 2; grid-template-rows: max-content; } .rightSection .sectionNavColumn { display: grid; grid-area: 1 / 2 / 6 / 2; grid-template-columns: 332px; padding: 0 0 0 20px; } @media all and (min-width: 961px) { .rightSection .interiorContent { margin-top: -25px; margin-left: 0; margin-right: 4.5%; width: 95.5%; } } @media all and (max-width: 960px) { .rightSection .sectionNavColumn { grid-area: 1 / 1 / 3 / 2; grid-template-columns: 100%; padding: 0 20px; } .rightSection .interiorContent { grid-area: 3 / 1 / 8 / 2; grid-template-columns: 1fr; } } /* ============================ GRID LAYOUT NEWS RIGHT SECTION * ============================*/ .news.landing.rightSection .mainContent { display: block; } .news.landing.rightSection .newsContainer { display: grid; grid-area: 1 / 1 / 8 / 2; grid-template-columns: 3fr 1fr; padding: 0; margin-top: 30px; max-width: 1440px; } @media all and (min-width: 961px) and (max-width: 1480px) { .news.landing.rightSection .newsContainer { padding: 0 20px; } } @media all and (min-width: 961px) { .news.landing.rightSection .interiorContent { margin-top: 0; } } @media all and (max-width: 960px) { .news.landing.rightSection .interiorContent { padding: 0 20px; } .news.landing.rightSection .newsContainer { grid-template-columns: 1fr; } .news.landing.rightSection .sectionNavColumn { padding: 0 20px; } } /*Grid Columns*/ .columns { display: grid; position: relative; } .columns .cell.centered { display: flex; align-items: flex-start; justify-content: center; padding: 0 20px; } .columns .cell > img, .columns .cell > a > img, .columns .cell > div > a > img { display: inherit; max-width: 100%; width: 100%; } .columns .one { display: grid; grid-template-columns: minmax(0, 1fr); } .columns .two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } .columns .twoColumn { gap: 1.25rem; } .columns .three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3.25rem; } .interior .columns .three { gap: 2rem; } .columns .four { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem; } .columns .oneTwo { display: grid; grid-template-columns: 30% minmax(0, 1fr); gap: 3.75rem; margin-bottom: 20px; } .interior .columns .oneTwo { grid-template-columns: 37% minmax(0, 1fr); gap: 2rem; margin-bottom: 20px; } .columns .twoOne { display: grid; grid-template-columns: 30% minmax(0, 1fr); gap: 3.75rem; } .interior .columns .twoOne { grid-template-columns: minmax(0, 1fr) 37%; gap: 2rem; } .columns .oneTwo.one, .columns .twoOne.one { grid-template-columns: minmax(0, 1fr); gap: 0; } .one .cell, .two .cell, .three .cell, .four .cell, .oneTwo .cell, .twoOne .cell { display: flex; flex-flow: column nowrap; } @media all and (min-width: 581px) and (max-width: 960px) { .columns .two { gap: 2.5rem; } .columns .three, .columns .four { grid-template-columns: minmax(0, 1fr); } .columns .three .cell, .columns .four .cell { display: block; } .columns .three .cell > *, .columns .four .cell > * { display: inline-grid; grid-template-columns: minmax(0, 1fr); max-width: 49%; vertical-align: top; } .columns .three .cell > * + *, .columns .four .cell > * + * { padding-left: 35px; } .columns .three .cell.noImageVideo > .content { max-width: 100%; } .columns .oneTwo { grid-template-columns: 48% minmax(0, 1fr); gap: 2.5rem; } .columns .twoOne { grid-template-columns: minmax(0, 1fr) 48%; gap: 2.5rem; } .interior .columns .oneTwo { grid-template-columns: 48% minmax(0, 1fr); } .interior .columns .twoOne { grid-template-columns: minmax(0, 1fr) 48%; } } @media all and (max-width: 580px) { .columns .two, .columns .three, .columns .oneTwo, .columns .twoOne, .columns .four { grid-template-columns: minmax(0, 1fr); grid-column: auto; grid-row: auto; gap: 2em; } .columns .oneTwo, .interior .columns .oneTwo, .columns .twoOne, .interior .columns .twoOne { grid-template-columns: minmax(0, 1fr); gap: 1.25em; } } /* ============================ HOME MAIN CONTENT * ============================*/ .home .mainContent { padding: 0; } .home .mainContent.wrapper { max-width: 100%; } .home .columns .wrapper { max-width: 1440px; padding: 20px 15px; } /* ============================ ALERT BANNER * ============================*/ /* Alert Message Button and Icons */ .alertBtnWrapper { display: flex; position: absolute; left: 0; right: 0; top: 160px; width: 100%; max-width: 1800px; z-index: 99999; margin: 0 auto; padding: 0 15px; } .toggleAlertBtn { display: flex; position: relative; width: 206px; text-decoration: none; box-shadow: 0px 1px 6px 1px rgba(0,0,0,0.2); } .toggleAlertBtn span { display: flex; font-size: 1.1rem; font-weight: 600; line-height: 1.05; text-transform: uppercase; margin: 0 0 0 auto; padding: 12px 15px; text-align: center; text-decoration: none; color: var(--color4); background-color: var(--white); } a.toggleAlertBtn:focus, a.toggleAlertBtn:hover { text-decoration: none; } .toggleAlertBtn:hover span, .toggleAlertBtn:focus span { color: var(--color1); } .alertIcon { display: block; padding: 5px 0; text-align: center; } .alertIcon:before { display: block; width: 23px; height: 23px; content: ""; background-repeat: no-repeat; background-size: 100%; background-position: center; padding: 18px; margin: 0 auto; } /* Alert Toggle Colors */ .alertActive ~ div .toggleAlertBtn { display: none; } .toggleAlertBtn:before { display: flex; content: ""; background-repeat: no-repeat; background-size: 100%; background-position: center; width: 20px; height: 20px; padding: 15px 16px; margin: 6px 16px; } .news.landing .toggleAlertBtn:before, .eventsDetail .toggleAlertBtn:before, .eventsListing .toggleAlertBtn:before, .facultyBioDetail .toggleAlertBtn:before, .facultyListing .toggleAlertBtn:before { width: 30px; height: 46px; padding: 18px 16px; margin: 7px 16px; } /* Alert Red */ .toggleAlertBtn.color1.bg { background-color: var(--color1); color: var(--white); } .toggleAlertBtn.color1.bg:before, .alert.color1.bg .alertIcon:before { background-image: url(../images/alert-warning-icon-white.svg); } .toggleAlertBtn.color1:hover, .toggleAlertBtn.color1:focus { outline: 1px solid var(--white); } /* Alert Yellow */ .toggleAlertBtn.color2.bg { background-color: var(--color2); color: var(--color4); } .toggleAlertBtn.color2.bg:before, .alert.color2.bg .alertIcon:before { background-image: url(../images/alert-warning-icon-black.svg) ; } .toggleAlertBtn.color2:hover, .toggleAlertBtn.color2:focus { outline: 1px solid var(--color4); } /* Alert Message Colors */ .alert.color1 { border-top: 9px solid var(--color1); } .alert.color1.bg .alertIcon:before { background-image: url(../images/alert-warning-icon-red.svg) ; } .alert.color2 { border-top: 9px solid var(--color1); } .alert.color2.bg { background-color: var(--white); color: var(--color4); } .alert.color2.bg .alertIcon:before { background-image: url(../images/alert-warning-icon-red.svg) ; } /* Alert Message Area */ .alert { position: relative; font-family: var(--bodyFont); color: var(--white); border-top: 9px solid var(--color1); z-index: 99999; width: 100%; max-width: 810px; margin: auto; } .alert button.mfp-close { width: 150px; max-width: 150px; color: var(--color4); background-color: var(--color2); top: auto; bottom: 28px; left: 0; right: 0; font-size: .9rem; font-weight: 600; line-height: 1; text-transform: uppercase; margin: 0 auto; cursor: pointer; } .alert .mfp-close:before { display: none; } .alert .mfp-close:hover, .alert .mfp-close:focus { background-color: var(--color2); top: auto; } .alert .mfp-close:after { display: inline-flex; width: 12px; height: 12px; content: ""; background-image: url(../images/cta-button-arrow-dark-gray.svg) ; background-repeat: no-repeat; background-position: center; padding: 0 0 0 34px; transition: all 0.4s ease-in-out; opacity: 0; } .news.landing .alert .mfp-close:after, .eventsDetail .alert .mfp-close:after, .eventsListing .alert .mfp-close:after, .facultyBioDetail .alert .mfp-close:after, .facultyListing .alert .mfp-close:after { padding: 0 0 0 48px; } .alert .mfp-close:hover:after, .alert .mfp-close:focus:after { margin: 0 0 0 10px; opacity: 1; } /* Alert Message Area in Interior Content */ .alert .wrapper { max-width: 1570px; width: 100%; padding: 25px 30px 80px 30px; background-color:var(--white); } .alert .alertIntro { font-family: var(--headingFont); font-size: 1.45rem; color:var(--color1); line-height: 1.2; margin: 18px 0; font-weight: 600; } .alert .summary { width: 71%; line-height: 1.5; text-align: center; margin: 0 auto; } .alert .summary > a { color: var(--white); font-variant: normal; } .alert .container:after { content: ''; clear: both; display: block; } .alert .wrapper:after { content: ''; clear: both; display: block; } .alertMessage { position: relative; width: 100%; color: var(--color4); z-index: 9999; } .alertMessage a { color: var(--white); } @media all and (max-width:960px) { /* Alert Message Button and Icons */ .alertBtnWrapper { top: 109px; } .toggleAlertBtn { width: 45px; height: 45px; padding: 3px 10px; } .toggleAlertBtn:before { padding: 9px 10px; margin: 0; } .news.landing .toggleAlertBtn:before, .eventsDetail .toggleAlertBtn:before, .eventsListing .toggleAlertBtn:before, .facultyBioDetail .toggleAlertBtn:before, .facultyListing .toggleAlertBtn:before { padding: 19px 10px; width: 30px; height: 30px; margin: 0; } .toggleAlertBtn span { position: absolute; left: -9999px; } /* Alert Message Area in Interior Content */ .alert .summary { width: 100%; } } /* ============================ Header Audience / Quicklinks * ============================*/ /* Header More Information */ .headerArea .menuMoreInfo { float: left; width: 100%; background-color: var(--white); } .headerArea .menuMoreInfo > .wrapper { display: flex; flex-flow: column; width: 100%; padding: 0; margin: 0 auto; } .headerArea .menuMoreInfo.topSet { margin: 25px 0; } /* Header Info For and Quicklinks */ #toggleQuicklinks, #toggleInfo { color: var(--color4); font-weight: 600; line-height: 1; text-transform: uppercase; background-color: var(--white); border: 1px solid var(--white); border-bottom: 3px solid var(--color2); padding: 11px 0 10px 0; margin: 0 0 5px 0; cursor: pointer; transition: all 0.4s ease-in-out; } #toggleQuicklinks:hover, #toggleQuicklinks:focus, #toggleInfo:hover, #toggleInfo:focus { color: var(--color1); } #toggleQuicklinks:after, #toggleInfo:after { display: inline-block; content: url(../images/quicklinks-arrow.svg) ; padding: 3px 0 0 13px; vertical-align: top; transition: all 0.4s ease-in-out; } #toggleQuicklinks .menuText, #toggleInfo .menuText { font-size: 1.15rem; } .quicklinksMenu.open #toggleQuicklinks:after, .infoMenu.open #toggleInfo:after { transform: rotate(-180deg); padding: 2px 13px 0 0; } .quicklinksMenu ul, .infoMenu ul { width: 100%; padding: 10px 0; margin: 0; list-style-type: none; } .quicklinksMenu ul > li, .infoMenu ul > li { margin-bottom: 0; } .quicklinksMenu a, .infoMenu a { display: inline-block; font-weight: 400; color: var(--white); line-height: 1.4; margin-bottom: 0; padding: 4px 23px; } .quicklinksMenu #quicklinkSubMenu, .infoMenu #infoSubMenu { display: none; color: var(--color4); background-color: var(--white); z-index: 999; column-count: 2; } .quicklinksMenu #quicklinkSubMenu a, .infoMenu #infoSubMenu a { color: var(--color4); text-decoration: none; } .quicklinksMenu #quicklinkSubMenu a:hover, .quicklinksMenu #quicklinkSubMenu a:focus, .infoMenu #infoSubMenu a:hover, .infoMenu #infoSubMenu a:focus { color: var(--color1); } /* ============================ Header * ============================*/ .home .header, .hasImpact .header { background: linear-gradient(to bottom, rgba(0,0,0,0.77) 0%,rgba(0,0,0,0.77) 1%,rgba(0,0,0,0.74) 45%,rgba(0,0,0,0.3) 81%,rgba(0,0,0,0) 100%); } .noImpact .header { background: var(--color4); } .landing .header { background: linear-gradient(to bottom, rgba(0,0,0,0.77) 0%,rgba(0,0,0,0.77) 1%,rgba(0,0,0,0.74) 45%,rgba(0,0,0,0.3) 81%,rgba(0,0,0,0) 100%); } .header { position: fixed; width: 100%; background: linear-gradient(to bottom, rgba(0,0,0,0.77) 0%,rgba(0,0,0,0.77) 1%,rgba(0,0,0,0.74) 45%,rgba(0,0,0,0.3) 81%,rgba(0,0,0,0) 100%); padding: 0; z-index: 99999; } .noImage .header { background: linear-gradient(to bottom, #303030 0%,#303030 80%,transparent 82%,transparent 100%); } .headerArea .wrapper { display: flex; justify-content: space-between; max-width: 1800px; width: 100%; padding: 0 15px; margin: 0 auto; } /* Logo */ .logo { position: relative; display: inline-block; padding: 0; margin: 0; background-color: var(--color1); box-shadow: 3px 3px 6px rgba(0, 0, 0, .26); z-index: 1; } .logo a { display: block; padding: 28px 16px 18px 16px; margin: 0; } .logo img { max-width: 156px; width: 100%; } /* Main Menu Toggle Menu */ #skipToTopNav { display: inline-block; color: var(--color4); width: 35px; height: 25px; padding: 0; margin: 40px 3.5% auto 5.5%; border: 1px solid transparent; background-color: transparent; cursor: pointer; transition: all 0.4s ease-in-out; -webkit-appearance: none; -moz-appearance: none; transition: transform .2s; } #skipToTopNav:hover, #skipToTopNav:focus { transform: scale(1.1); } #skipToTopNav > .img { display: inline-block; width: 35px; height: 25px; color: var(--white); font-family: var(--bodyFont); font-weight: 600; font-size: 1rem; line-height: 1.4; padding: 0; background: url(../images/menu-open-icon.svg) no-repeat left center; } /* Main Menu Toggle Close Wrapper */ .menuCloseWrapper { display: flex; flex-flow: wrap; align-items: start; background-color: var(--color1); padding: 25px 58px 42px 58px; } /* Main Menu Toggle Close Menu */ #toggleButtonClose { display: flex; align-items: center; color: var(--white); background: var(--color1); border: 1px solid transparent; cursor: pointer; padding: 2px 0; margin: 0; transition: transform .2s; line-height: 1.4; } #toggleButtonClose:before { display: inline-block; content: url(../images/menu-close-icon.svg) ; width: 25px; height: 12px; padding: 0 5px 0 0; line-height: 1; } #toggleButtonClose:hover, #toggleButtonClose:focus { transform: scale(1.1); } #toggleButtonClose > .menuText { font-family: var(--bodyFont); font-size: 1.15rem; font-weight: 600; line-height: 1; } /* Main Menu Header Menu */ .menuLogo { position: relative; display: flex; justify-content: flex-end; width: 34%; padding: 0; margin: 0 0 0 auto; background-color: var(--color1); z-index: 1; } .menuLogo a { display: block; padding: 0; margin: 0; top: 0; transition: all 0.4s ease-in-out; } .menuLogo img { max-width: 156px; width: 100%; } /* Main Menu Header Social */ .socialbar { display: flex; width: 66%; margin: -33px auto 0 0; } .news.landing .socialbar, .eventsDetail .socialbar, .eventsListing .socialbar, .facultyBioDetail .socialbar, .facultyListing .socialbar { margin: -26px auto 4px 0; } .header .socialbar a { position: relative; display: inline-block; margin: 0 16px 0 0; font-size: 1.1rem; color: var(--white); top: 0; transition: all 0.4s ease-in-out; } .header .socialbar a:hover, .header .socialbar a:focus { top: -3px; } .header .socialbar a span { position: absolute; left: -999999px; } .header .socialbar a img { width: 18px; height: 25px; text-align: center; vertical-align: top; padding: 7px 0 0 0; } /* Main Menu Container */ .topNavWrapper { float: left; width: 100%; height: 100vh; } #skipToTopNav ~ .topNav, #toggleButtonClose.close ~ .topNav { position: fixed; max-width: 575px; width: 100%; height: 100%; top: 0; right: -575px; visibility: hidden; z-index: 99999; transition: all 0.8s ease-in-out; } #skipToTopNav.open ~ .topNav { visibility: visible; right: 0; } .menuContainer { position: relative; float: left; width: 100%; height: 100%; color: var(--color4); background-color: var(--white); margin-top: 0; z-index: -1; display: inline-block; overflow-x: hidden; right: 0; } .dim { visibility: hidden; opacity: 0; position: fixed; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); transition: all 0.8s ease-in-out; z-index: 2; } .dim.on { visibility: visible; opacity: 1; z-index: 998; } /* Main Menu */ .mobileWrapper { height: 100vh; overflow-x: hidden; } .topNavWrapper { width: 100%; max-width: 580px; height: auto; padding: 0 10% 62px 10%; } #mainMenu { float: left; width: 100%; height: auto; } #mainMenu .parentMenu { float: left; width: 100%; height: 100%; padding: 18px 0 14px 0px; list-style-type: none; } #mainMenu .parentMenu .navMenu { display: block; position: relative; list-style: none; margin: 0; padding: 0; } /* Main Nav top level navigation item */ #mainMenu .parentMenu .menuItem { position: relative; display: inline-block; width: 100%; border-bottom: 1px solid rgba(162, 164, 163, .8); list-style: none; padding: 5px; margin: 0; } /* first descendant link within a top level navigation item */ #mainMenu .parentMenu .menuItem > a { display: inline-block; width: auto; font-family: 'source-serif-pro', serif; font-size: 1.45rem; color: var(--color1); font-weight: 600; line-height: 1.2; text-decoration: none; padding: 13px 0; } /* focus/open states of first descendant link within a top level navigation item */ #mainMenu .parentMenu .menuItem > a:hover, #mainMenu .parentMenu .menuItem > a:focus, #mainMenu .parentMenu .menuItem > a.open { color: #0C1E50; } /* open state of first descendant link within a top level navigation item */ #mainMenu .parentMenu .menuItem > a.open { background-color: var(--white); border-bottom: none; z-index: 1; } /* sub-navigation panel */ #mainMenu .parentMenu .subNav { position: relative; display: none; } /* sub-navigation panel open state */ /*#mainMenu .parentMenu .menuItem:focus .subNav.open, #mainMenu .parentMenu .menuItem:focus-within .subNav.open { display: block !important; }*/ #mainMenu .parentMenu .menuItem.open .subNav { display: block; height: auto; } /* list of items within sub-navigation panel */ #mainMenu .parentMenu .subNav ul { display: block; vertical-align: top; margin: 0; padding: 5px 0 5px 20px; column-count: 2; } /* list item within sub-navigation panel */ #mainMenu .parentMenu .subNav li { display: block; line-height: 1.4; list-style-type: none; margin: 0 0 8px 0; padding: 0; } #mainMenu .parentMenu .subNav li a { color: var(--color4); font-size: .98rem; font-weight: 400; padding: 5px 0; text-decoration: none; } #mainMenu .parentMenu .subNav li a:hover, #mainMenu .parentMenu .subNav li a:focus { color: var(--color1); } #mainMenu .parentMenu .menuExpand { display: block; cursor: pointer; position: absolute; left: auto; right: 0; top: 24px; padding: 17px 20px; z-index: 1; content: ' '; width: 24px; height: 19px; background: url() no-repeat top right; } #mainMenu .parentMenu .menuItem.open .menuExpand, #mainMenu .parentMenu .menuItem > a.open + .menuExpand { background: url() no-repeat top right; } /* Main Nav Expander */ .navSubButton { position: absolute; width: 32px; height: 64px; background-color: transparent; top: 0; bottom: auto; left: auto; right: 6px; padding: 0; margin: 0; transform: translate(0%, 0%) rotate(0deg); cursor: pointer; z-index: 100; transition: 0.4s cubic-bezier(0.2, 0.6, 0.3, 1.1); border: 1px solid transparent; } .navSubButton:before { content: url(../images/menu-sub-caret.svg) ; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 16px; width: 18px; } .open + .navSubButton:before { display: none; } .navSubButton.clicked { top: 4px; right: 4px; transform: translate(0%, 0%) rotate(180deg); } .noSub > .navSubButton { display: none; } /* Search Bar and Input */ #searchBox { background-color: var(--white); padding: 7px 9px; box-shadow: 0px 1px 6px 1px rgba(0,0,0,0.2); } .searchBox { display: inline; font-family: var(--bodyFont); color: var(--color4); background-color: transparent; -webkit-appearance: none; -moz-appearance: none; border-radius: 0;-moz-border-radius: 0; -webkit-border-radius: 0; padding: 10px 2px !important; margin-bottom: 0; width: 84%; min-height: 35px; max-height: 35px; border: none; font-size: 1rem; } .searchBox::placeholder{ color: var(--color4); } .searchBox::-webkit-input-placeholder { color: var(--color4); } .searchBox::-moz-placeholder { color: var(--color4); } .searchBox:-ms-input-placeholder { color: var(--color4); } .searchBox:-moz-placeholder { color: var(--color4); } .searchContainer { margin: -28px 0 0 0; } .searchContainer input[type=search] { float: left; border: 0; padding: 10px 6px; width: 85%; font-size: 1rem; -webkit-appearance: none; margin: 0; font-style: normal; } .searchContainer button[type=submit] { float: right; position: relative; border: none; font-size: 1.125em; width: 30px; height: 35px; padding: 0; margin: 0; cursor: pointer; background-color: var(--white); background-image: url(../images/search-icon.svg) ; background-repeat: no-repeat; background-position: center; background-size: 25px; transition: all 0.4s ease-in-out; } .searchContainer button[type=submit]:hover, .searchContainer button[type=submit]:focus { background-image: url(../images/search-icon-hover.svg) ; } /* Header CTA Buttons */ .headerArea .ctaButtons { display: inline-block; padding: 0; margin: 40px 0 auto 0; list-style-type: none; } .headerArea .ctaButtons li { display: inline-block; padding: 0 4.25rem; margin: 0; line-height: 1; } .headerArea .ctaButtons li:not(:last-child) { border-right: 1px solid rgba(255, 255, 255, .5); } .headerArea .ctaButtons li a { position: relative; color: var(--white); font-size: 1.1rem; font-weight: 600; line-height: 1rem; text-decoration: none; text-transform: uppercase; padding: 10px 0; top: 0; transition: all 0.4s ease-in-out; } .headerArea .ctaButtons li a:hover, .headerArea .ctaButtons li a:focus { top: -3px; } /* Main Menu CTA Buttons */ .menuCTA { display: flex; justify-content: center; padding: 0; margin: 0; list-style-type: none; } .menuCTA.topSet{ margin: 40px 0; } .menuCTA.bottomSet { margin: 44px 0 5px 0; } .menuCTA li { display: block; padding: 0 1.25em; margin: 0; line-height: 1; } .menuCTA li:first-child { padding-left: 0; } .menuCTA li:last-child { padding-right: 0; } .menuCTA li:not(:last-child) { border-right: 1px solid rgba(162, 164, 163, .5); } .menuCTA li a { position: relative; color: var(--color4); font-size: 1.15rem; font-weight: 600; line-height: 1; text-decoration: none; text-transform: uppercase; padding: 10px 0; top: 0; transition: all 0.4s ease-in-out; } .menuCTA li a:hover, .menuCTA li a:focus { top: -3px; } @media all and (max-height:900px) { #skipToTopNav.open ~ .topNav { overflow: auto; } .mobileWrapper { overflow-y: auto; height: auto; margin-bottom: 0; } } @media all and (min-width: 1500px) { .headerArea .ctaButtons li:last-of-type a { padding-right: 0; } } @media all and (max-width: 1460px) { .menuMoreInfo > .wrapper { padding-right: 0; } } @media all and (min-width: 961px) { .headerArea > .wrapper { min-height: 88px; } /* Main Menu CTA Buttons */ .menuCTA.topSet{ display: none; } } @media all and (max-width: 960px) { .headerArea { min-height: 66px; } .headerArea > .wrapper { padding: 0 15px; } /* Header Logo */ .logo a { padding: 17px 14px 9px 8px; } .logo img { max-width: 122px; } /* Header CTA Buttons */ .headerArea .ctaButtons { display: none; } /* Main Menu Container */ #skipToTopNav { margin: 27px 3.5% auto 5.5%; } /* Main Menu */ .topNavWrapper { padding: 0 35px 62px 35px; } .menuCloseWrapper { padding: 25px 35px; } /* Header Search */ #searchBox { padding: 7px 20px; } .searchContainer { margin: -20px 0 0 0; } .searchBox { padding: 5px 2px !important; } .searchContainer button[type=submit] { height: 30px; background-size: 20px; } /* Main Menu CTA Buttons */ .headerArea .menuMoreInfo.topSet { margin: 20px 0; } #toggleQuicklinks, #toggleInfo { margin: 0; } .menuCTA { width: 100%; } .menuCTA.bottomSet { margin: 0; } .menuCTA li a { font-size: 1.05rem; } } @media all and (max-width: 480px) { /* Header Logo */ .menuLogo { margin: 8px 0 0 auto; } /* Main Menu */ .topNavWrapper { padding: 0 35px 62px 35px; } /* Main Menu CTA Buttons */ .menuCTA li { width: inherit; text-align: center; } .menuCTA li:first-child { text-align: left; } .menuCTA li:last-child { text-align: right; } /* Main Menu Header Social */ .header .socialbar { margin: -30px auto 0 0; } } /* ============================ FOOTER * ============================*/ /* FOOTER CTA */ .footerCTAGroup { display: flex; position: relative; width: 100%; z-index: 1; margin: 0 0 -15px 0; } .footerCTA { position: relative; width: 60%; background-color: var(--color1); } .footerCTABg { background-image: url(../images/footer-cta-bg.png) ; background-position: center bottom; background-size: cover; background-repeat: no-repeat; } .footerCTA .wrapper { display: flex; width: 100%; max-width: 1470px; margin: 0 auto; padding: 50px 6.5% 45px 11%; } .footerCTA .ctaLeft { display: flex; flex-direction: column; max-width: 700px; } .footerCTA .ctaLeft .text { position: relative; bottom: auto; font-family: var(--headingFont); font-size: 2.81rem; font-weight: 400; color: var(--white); line-height: 1.1; padding: 0; } .footerCTA .ctaRight { display: flex; flex-direction: row; justify-content: flex-end; max-width: 450px; width: 100%; margin: 0 0 0 auto; padding: 10px 0 0 20px; } .footerCTA a.ctaButton { min-width: 156px; flex-direction: column; align-self: center; } .footerCTA a.ctaButton:not(:last-of-type) { margin: 0 60px 0 0; } .footerCTA a.ctaButton:last-of-type { margin: 0; } .footerCTAGroup + .footer:before { display: block; content:""; position: absolute; width: 100%; height: 110px; top: -110px; bottom: 0; left: 0; right: 0; background-color: var(--gray); z-index: -1; } @media all and (max-width: 2000px) { .footerCTA { max-width: 1228px; width: 100%; } } @media all and (max-width: 1350px) { .footerCTA { max-width: 1228px; width: 100%; } .footerCTA a.ctaButton:not(:last-of-type) { margin: 0 30px 0 0; } } @media all and (max-width: 1200px) { .footerCTABg { background-size: unset; } .footerCTA .wrapper { flex-direction: column; padding: 50px 20px 45px 20px; } .footerCTA .ctaLeft { text-align: center; max-width: 100%; margin: 0 0 20px 0; } .footerCTA .ctaRight { justify-content: center; max-width: none; padding: 0; margin: 0 auto; } } @media all and (max-width: 580px) { .footerCTA .wrapper { padding: 30px 15px 50px 15px;} .footerCTA .ctaLeft { max-width: 100%; flex-direction: column; margin: 0 0 30px 0; } .footerCTA .ctaLeft .text { font-size: 2.25rem; } .footerCTA .ctaRight { max-width: 100%; flex-direction: column; margin: 0; padding: 0; } .footerCTA a.ctaButton:not(:last-of-type) { margin: 0 0 20px 0; } } /* Footer */ .footer { position: relative; display: block; width: 100%; color: var(--white); padding: 0; z-index: 0; background-color: var(--color4); background-image: url(../images/footer-bg.jpg) ; background-size: cover; Background-position: 50% 50%; } .footer .footerBg { position: relative; } .footer .footerBg:before { content:""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(48,48,48,.9) 0%,rgba(48,48,48,0) 100%); } .footer .footerBg:after { content:""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(48,48,48,.9) 0%,rgba(48,48,48,.9) 100%); } .footer .wrapper { position: relative; max-width: 1475px; padding: 74px 70px 18px 70px; z-index: 1; } .footer .footerLeft { display: flex; width: 100%; padding: 0; } /* Footer Address */ .footer .footerLogo { display: block; max-width: 812px; width: 100%; margin: 35px auto 68px auto; } .footer .address { display: flex; flex-direction: column; width: 40%; font-size: 1rem; color: var(--white); padding: 0 4% 0 0; margin: 0 auto 14px 0; line-height: 1.8; } .footer .street { margin: 0 0 30px 0; } .footer .contactInfo a { color: var(--white); margin: 0 16px 0 0; } .footer .contactInfo a:hover { color: var(--white); } /* Footer Social */ .footer .socialbar { display: block; margin: 34px 0 16px 0; } .footer .socialbar a { position: relative; display: inline-block; font-size: 1.5rem; color: var(--white); text-align: center; margin: 0 23px 0 0; top: 0; transition: all 0.5s ease-in-out; } .footer .socialbar a:hover, .footer .socialbar a:focus { color: var(--white); top: -3px; } .footer .socialbar a span { position: absolute; left: -999999px; } .footer .socialbar a img { width: 32px; height: 32px; text-align: center; vertical-align: text-top; } /* Footer Columns */ .footer .footerlinks { display: flex; width: 59%; justify-content: space-between; column-gap: 30px; font-family: var(--bodyFont); margin: 0 0 0 auto; } .footer .footerlinks ul { list-style: none; } .footer .footerlinks ul li { display: block; font-size: 1rem; color: var(--white); line-height: 1.5; margin: 0 0 11px 0; } .footer .footerlinks a { text-decoration: none; color: var(--white); } .footer .footerlinks a:hover, .footer .footerlinks a:focus { text-decoration: underline; } .footer .subtitle, .footer .footerlinks ul li.subtitle { display: block; font-family: var(--bodyFont); font-size: 1.55rem; font-weight: 600; color: var(--color2); line-height: 1.3; text-transform: uppercase; margin: 0 0 18px 0; } .footer .subtitle { margin: 0 0 13px 0; } /* Footer Subfooter */ .footer .subFooter { width: 100%; font-size: 1rem; color: var(--white); background-color: var(--color1); padding: 0 35px; margin: 0 auto; } .footer .subFooter .wrapper { display: flex; flex-direction: column; max-width: 1170px; width: 100%; padding: 20px 0; } .footer .subFooter a { color: var(--white); font-weight: 400; } .footer .subFooter p { text-align: center; line-height: 1.2; margin-bottom: 0; } #footerLink { color: var(--white); } /* Google Translate */ .button.translator { display: flex; } .goog-te-gadget { padding: 0; color: transparent !important; } .VIpgJd-ZVi9od-ORHb-OEVmcd.skiptranslate { position: fixed; top: 0; display: none; } a.VIpgJd-ZVi9od-l4eHX-hSRGPd { position: absolute; left: -99999px; color: var(--white) !important; } .goog-te-gadget img { display: none; } select.goog-te-combo { font-size: 1rem; width: 100%; min-height: 35px; background-color: var(--white); color: var(--color4); padding: 0 15px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url(../images/select-arrow-gray.svg) ; background-repeat: no-repeat; background-position: right 14px center; } select.goog-te-combo:after { display: block; position: absolute; top: 15px; bottom: auto; left: auto; right: 14px; width: 9px; height: 4px; content: url(../images/select-arrow.svg) ; } select.goog-te-combo:focus { border: 1px solid var(--white) !important; outline: 1px solid var(--white) !important; } @media all and (max-width: 960px) { .footer .wrapper { padding-left: 35px; padding-right: 35px; } .footer .address { width: 36%; } .footer .footerlinks { width: 64%; } } @media all and (max-width: 720px) { /* Footer */ .footer > .wrapper { padding: 57px 35px 0 35px; } .footer .wrapper { flex-direction: column; } .footer .footerLeft { flex-direction: column; width: 100%; margin: 0 0 32px 0; padding: 0; } .footer .footerLogo { margin: 16px auto 28px auto; } /* Footer Address */ .footer .address { width: 100%; margin: 0 0 16px 0; padding: 0; } /* Footer Social */ .footer .socialbar { margin: 34px 0 0px 0; } /* Footer Columns */ .footer .footerlinks { flex-direction: column; width: 100%; padding-left: 0; } .footer .subtitle, .footer .footerlinks ul li.subtitle { margin-top: 14px; } } /* ============================ HOME IMPACT * ============================*/ .impact { position: relative; width: 100%; margin: 0 auto; } .impact img, .impact video { position: relative; width: 100%; height: 989px; overflow: hidden; display: block; z-index: 0; padding: 0; margin: 0; object-fit: cover; } .sliderMain { position: relative; height: 989px; overflow: hidden; background: var(--color4); } .impact .captionContent img { object-fit: unset; z-index: unset; width: auto; height: auto; margin-bottom: 28px; } .impact video { position: absolute; top: 0; left: 50%; transform: translate(-50%, 0%); } .impact video::-webkit-media-controls { opacity: 0; } .impact .sliderMain .caption { /*display: none;*/ } .impact .slick-initialized .caption, .impact .videoTexture + .caption { display: block; position: absolute; width: 100%; max-width: 1455px; margin: 0 auto; top: 0; bottom: 0; right: 0; left: 0; z-index: 1; } .impact .caption .wrapper { max-width: 1400px; height: 100%; } .impact .caption.left .wrapper .captionContent { position: absolute; top: 3.5%; left: 90px; width: 53%; height: 100%; display: -ms-flexbox; display: flex; align-items: start; justify-content: center; flex-direction: column; } .impact .caption.right .wrapper .captionContent { position: absolute; top: 3.5%; right: 90px; width: 53%; height: 100%; display: -ms-flexbox; display: flex; text-align: right; align-items: end; justify-content: center; flex-direction: column; } .impact .caption.center .wrapper .captionContent { position: absolute; top: 3.5%; left: 0; right: 0; width: 56%; height: 100%; text-align: center; display: -ms-flexbox; display: flex; align-items: center; justify-content: center; flex-direction: column; margin: auto; } .impact .caption .wrapper h1, .impact .caption .wrapper h2 { color: var(--white); font-size: 3.5rem; font-weight: 400; line-height: 1.15; margin-bottom: 27px; } .impact .caption .wrapper .subtext { font-size: 1.13rem; font-weight: 300; color: var(--white); line-height: 1.55; margin-bottom: 48px; } .impact .caption.center .wrapper .subtext { margin-left: auto; margin-right: auto; } .impact .caption .wrapper .subtext p:last-of-type { margin-bottom: 0; } .impact .ctaButtonSet { display: flex; align-items: flex-start; } .impact .caption.center .ctaButtonSet { margin: 0 auto; } .impact a.ctaButton { min-width: 167px; } .impact .slick-slider { margin-bottom: 0; overflow:hidden; } .impact ul.slick-dots { bottom: 9%; text-align: right; right: 115px; left: 0; z-index: 11; max-width: 1620px; margin: 0 auto; padding: 0; width: 100%; } .impact ul.slick-dots .slick-sr-only { color: var(--color4); } .impact ul.slick-dots > li { position: relative; margin: 0 2px; } .impact ul.slick-dots > li button { text-indent: -99999px; display: inline-block; padding: 0; margin: 0 5px 10px 0; width: 8px; height: 8px; color: var(--white); background-color: rgba(255, 255, 255, .6); border: 1px solid rgba(255,255,255,.6); border-radius: 50%; transition: all 0.4s ease-in-out; } .impact ul.slick-dots > li:hover button, .impact ul.slick-dots > li button:focus { background-color: var(--white); border: 1px solid var(--white); } .impact ul.slick-dots > li.slick-active button { background-color: var(--white); border: 1px solid var(--white); } .impact ul.slick-dots > li:last-child { margin-right: 0; } .impact .slick-prev, .impact .slick-next { color: var(--white); top: 54%; bottom: auto; background-color: rgba(32, 32, 32, 0.90); } .impact .slick-prev:hover, .impact .slick-prev:focus, .impact .slick-next:hover, .impact .slick-next:focus { color: var(--white); top: 54%; bottom: auto; background-color: rgba(84, 84, 84, 0.90); } .impact .slick-prev { left: 0; right: auto; } .impact .slick-next { left: auto; right: 0; } .impact .slick-prev:before, .impact .slick-next:before { font-size: 1.4rem; } /*.impact .impactGradient { position: absolute; top: 0; bottom: 0; right: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(84,84,84,0.8) 100%); opacity: .6; z-index: 0; }*/ .impact .impactGradient { position: absolute; top: 0; bottom: 0; right: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(84,84,84,0) 100%); opacity: .4; z-index: 0; } /* ADA Slider Play/Pause Controls */ .slick-autoplay-toggle-button { display: flex; justify-content: right; position: absolute; bottom: 9%; right: 15px; left: 0; max-width: 1645px; width: 100%; padding: 0; margin: 0 auto; background: none; border: 0; cursor: pointer; color: var(--white); z-index: 10; } .slick-autoplay-toggle-button .slick-pause-icon, .slick-autoplay-toggle-button .slick-play-icon { display: block !important; width: 24px; height: 24px; background-repeat: no-repeat; background-position: center center; background-size: 100%; } .slick-autoplay-toggle-button .slick-pause-icon[style="display: none;"], .slick-autoplay-toggle-button .slick-play-icon[style="display: none;"] { display: none !important; } .slick-autoplay-toggle-button .slick-pause-icon { background-image: url(../images/pause-button.svg) ; } .slick-autoplay-toggle-button .slick-play-icon { background-image: url(../images/play-button.svg) ; } .impact .slick-autoplay-toggle-button { color: var(--white); } .slick-pause-text, .slick-play-text { color: var(--color4); } .impact .slick-pause-text, .impact .slick-play-text { color: var(--white); } /* Video Play/Pause Controls */ #playButton span { color: var(--white); display: block; position: absolute; text-indent: -999999px; } #playButton:after { content: url(../images/pause-button.svg) ; color: var(--white); } #playButton.on.initial:after { content: url(../images/pause-button.svg) ; } #playButton.on:after,#playButton.initial:after { content: url(../images/play-button.svg) ; } @media all and (max-width: 1690px) { .slick-autoplay-toggle-button { max-width: 96%; right: 0; } .impact ul.slick-dots { max-width: 88%; right: 0; } } @media all and (max-width: 1540px){ .sliderMain, .impact img, .impact video { height: 782px; } .impact .caption.left .wrapper .captionContent { left: 120px; } .impact .caption.right .wrapper .captionContent { right: 140px; } .impact .caption.left .wrapper .captionContent, .impact .caption.right .wrapper .captionContent, .impact .caption.center .wrapper .captionContent { width: 75%; } .impact ul.slick-dots { bottom: 10.75%; } /* ADA Slider Play/Pause Controls */ .slick-autoplay-toggle-button { bottom: 11%; } } @media all and (max-width: 960px){ .impact .caption .wrapper { margin: auto; } .impact .caption.left .wrapper .captionContent, .impact .caption.right .wrapper .captionContent { width: 100%; left: 0; padding-left: 75px; padding-right: 75px; } .impact .caption.left .wrapper .captionContent { left: 0; } .impact .caption.right .wrapper .captionContent { right: 0; } .impact .caption.center .wrapper .captionContent { width: 82%; } .impact .caption .wrapper h1, .impact .caption .wrapper h2 { width: 100%; margin-bottom: 20px; } .impact .impactGradient { background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(48,48,48,1) 100%); } .impact .slick-prev, .impact .slick-next { width: 55px; height: 55px; background-size: 40%; } .impact ul.slick-dots { bottom: 7.75%; right: 125px; } /* ADA Slider Play/Pause Controls */ .slick-autoplay-toggle-button { bottom: 8%; right: 20px; } } @media all and (max-width: 767px) { .impact .caption.center .wrapper .captionContent { width: 76%; } .impact .ctaButtonSet { flex-direction: column; } .impact a.ctaButton:not(:last-of-type) { margin: 0 0 20px 0; } /*.impact video { display: none; } #playButton { display: none; }*/ } @media all and (max-width: 580px) { .impact .caption.left .wrapper .captionContent, .impact .caption.right .wrapper .captionContent { padding-left: 40px; padding-right: 40px; } .impact .caption .wrapper h1, .impact .caption .wrapper h2 { font-size: 2.5rem; } .impact .slick-prev, .impact .slick-next { width: 42px; height: 42px; background-size: 40%; } .impact ul.slick-dots { max-width: 84%; right: 125px; } /* ADA Slider Play/Pause Controls */ .slick-autoplay-toggle-button { max-width: 93%; right: 40px; } } /* ============================ HOME IMPACT CHOOSE YOUR PATH LINKS * ============================*/ .impactLinks .ctaLink:before { bottom: -5px; } @media all and (min-width: 961px) { .impactLinks #impactLinksSubMenu { display: block !important; } .impactLinksMainText { position: absolute; bottom: 122px; left: 0; right: 0; display: block; width: 100%; max-width: 1660px; padding: 0 15px; margin: -41px auto 0 auto; background-color: transparent; border: 1px solid transparent; pointer-events: none; } .impactLinksMainText > .wrapper { font-size: 1.15rem; line-height: 1; color: var(--white); text-align: left; text-transform: uppercase; padding: 0 10px; margin: 0 0 20px 0; border-left: 1px solid var(--color2); } button.impactLinksButton { display: none; } .impactLinks { position: relative; display: block; width: 100%; margin: -73px auto 15px auto; z-index: 10; } .impactLinks > .wrapper { display: flex; width: 100%; max-width: 1678px; padding: 0 20px; margin: 0 auto; } .impactLinks ul { display: flex; width: 100%; margin: 0 auto; align-items: flex-end; justify-content: space-between; list-style-type: none; background-color: var(--color1); box-shadow: 0px 1px 6px 1px rgba(0,0,0,0.2); } .impactLinks ul > li { position: relative; width: 100%; display: flex; flex-flow: column; justify-content: space-evenly; list-style-type: none; font-size: 1.15rem; font-weight: 600; line-height: 1.1; text-align: center; text-transform: uppercase; } /* Choose Path Box Link Title */ .impactLinks ul li > a { position: relative; display: flex; text-decoration: none; color: var(--white); padding: 60px 16%; transition: all 0.3s ease-in-out; } .impactLinks ul li > a > span { display: none; visibility: hidden; height: 0; line-height: 0; } .impactLinks ul li > a span { position: relative; transition: all 0.3s ease-in-out; } .impactLinks ul li > a:hover span, .impactLinks ul li > a:focus span { color: var(--color4); } /* Choose Path Box */ .impactLinks .choosePathBox { display: flex; flex-direction: column; position: absolute; top: auto; bottom: 0; left: 0; right: 0; color: var(--color4); text-align: center; padding: 0 20px; border-top: 9px solid transparent; transition: transform 0.3s ease-in-out; overflow: hidden; } .impactLinks ul li > a:hover .choosePathBox, .impactLinks ul li > a:focus .choosePathBox { padding: 20px; background-color: var(--white); box-shadow: 0px 1px 6px 1px rgba(0,0,0,0.2); border-top: 9px solid var(--color1); z-index: 1; } .impactLinks ul li:after { display: block; position: absolute; top: 0; bottom: 0; right: 0; left: auto; content:""; width: 1px; height: 40%; margin: auto; background-color: rgba(255,255,255,.5); } .impactLinks ul li:last-of-type:after { display: none; } /* Choose Path Box Name */ .impactLinks .choosePathBox .pathName { font-size: 1.15rem; color: var(--white); background-color: var(--color1); align-self: center; padding: 0 0 12px 0; margin: 0px 15% 25px 15%; border-bottom: 3px solid transparent; z-index: 0; } .impactLinks .choosePathBox .pathName:after { content:""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background-color: var(--color1); z-index: -1; } .impactLinks ul li > a:hover .choosePathBox .pathName:after, .impactLinks ul li > a:focus .choosePathBox .pathName:after { display: none; } .impactLinks ul li > a:hover .choosePathBox .pathName, .impactLinks ul li > a:focus .choosePathBox .pathName { display: block; visibility: visible; height: auto; color: var(--color1); background-color: var(--white); border-bottom: 3px solid var(--color2); margin: 0px 15% 5px 15%; } /* Choose Path Text */ .impactLinks .choosePathBox p { visibility: hidden; height: 0; color: var(--color4); font-size: 1rem; font-weight: 400; line-height: 1.25; text-transform: none; margin: 0; transition: all 0.3s ease-in-out; } .impactLinks ul li > a:hover .choosePathBox p, .impactLinks ul li > a:focus .choosePathBox p { display: flex; visibility: visible; height: auto; margin: 22px 0 30px 0; } /* Choose Path Link */ .impactLinks .choosePathBox .ctaLink { display: none; visibility: hidden; height: 0; color: var(--color4); margin: 0 auto; transition: all 0.3s ease-in-out; } .impactLinks ul li > a:hover .choosePathBox .ctaLink, .impactLinks ul li > a:focus .choosePathBox .ctaLink { display: flex; visibility: visible; height: auto; } } @media all and (max-width: 1700px) and (min-width: 961px) { /* Choose Path Box Name */ .impactLinks .choosePathBox .pathName { font-size: 1rem; } /* Choose Path Text */ .impactLinks .choosePathBox p { font-size: .9rem; } /* Choose Path Link */ .impactLinks .choosePathBox .ctaLink { font-size: .9rem; } } @media all and (max-width: 1330px) and (min-width: 961px) { .impactLinks .choosePathBox .ctaLink:after { padding-top: 0; } /* Choose Path Box Name */ .impactLinks .choosePathBox .pathName { font-size: 1rem; margin: 0px 7% 25px 7%; } } @media all and (max-width: 1220px) and (min-width: 961px) { /* Choose Path Box */ .impactLinks .choosePathBox { padding: 0 10px; } /* Choose Path Box Name */ .impactLinks .choosePathBox .pathName { font-size: .9rem; } /* Choose Path Text */ .impactLinks .choosePathBox p { font-size: .85rem; } /* Choose Path Link */ .impactLinks .choosePathBox .ctaLink { font-size: .85rem; } } @media all and (max-width: 960px) { /* Hide Choose Path Hover Version */ .impactLinksMainText, .impactLinks .choosePathBox p, .impactLinks .choosePathBox .ctaLink { display: none; } /* Toggle Menu */ .impactLinks { position: relative; width: 93%; padding: 0; margin: -44px 3.5% 15px 3.5%; border-top: 9px solid var(--color1); box-shadow: 0px 1px 6px 1px rgba(0,0,0,0.2); z-index: 1; } #toggleImpactLinks { width: 100%; font-size: 1.12rem; font-weight: 600; color: var(--color4); text-align: left; line-height: 1; text-transform: uppercase; background-color: var(--white); border: 1px solid transparent; border-radius: 0; padding: 20px; margin: 0; cursor: pointer; transition: all 0.4s ease-in-out; } #toggleImpactLinks:hover, #toggleImpactLinks:focus { color: var(--color1); } #toggleImpactLinks:after { position: absolute; top: 22px; right: 16px; width: 20px; height: 16px; content: url(../images/section-dropdown.svg) ; transform-origin: center; transform: rotate(0deg); transition: all 0.4s ease-in-out; } .impactLinks.open #toggleImpactLinks:after { transform: rotate(-180deg); } .impactLinks ul { position: relative; width: 100%; padding: 0 0 20px 0; margin: 0; list-style-type: none; } .impactLinks ul > li { margin-bottom: 0; } .impactLinks a { display: inline-block; color: var(--color4); line-height: 1.4; margin-bottom: 0; padding: 10px 23px; transition: all 0.4s ease-in-out; } .impactLinks #impactLinksSubMenu { position: relative; display: none; color: var(--color4); background-color: var(--white); z-index: 999; } .impactLinks #impactLinksSubMenu:before { position: absolute; top: -10px; bottom: auto; left: 22px; right: auto; content: ""; width: 122px; height: 3px; background-color: var(--color2); } .impactLinks #impactLinksSubMenu a { color: var(--color4); text-decoration: none; } .impactLinks #impactLinksSubMenu a:hover, .impactLinks #impactLinksSubMenu a:focus { color: var(--color1); } } @media all and (max-width: 580px) { .impactLinks { width: 86%; margin-left: 7%; margin-left: 7%; } } /* ============================ HOME PROGRAM GALLERY * ============================*/ /* Program Intro */ .programFinder { width: 100%; padding: 0; z-index: 2; } .programFinder.columns { display: flex; flex-direction: column; background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 57.75%,rgba(183,49,44,1) 57.75%,rgba(183,49,44,1) 100%); } .programFinder.columns .wrapper.topPanel .content { display: flex; flex-direction: column; width: 51%; } .programFinder.columns .wrapper.topPanel .content .description { width: 75%; } .programFinder .homeProgramsHeader { position: relative; display: flex; flex-direction: row; text-transform: none; align-self: flex-start; margin: 0 0 30px 0; } .programFinder .topPanel .subhead { margin: 0 0 17px 0; } .programFinder.columns > .wrapper.topPanel .homeProgramsHeader h2.sectionName { position: relative; display: inline-flex; width: auto; margin: 0 auto 0 0; } .programFinder a.viewAll { align-self: center; margin: 12px auto 0 38px; } .programFinder.columns > .wrapper { position: relative; max-width: 1900px; width: 100%; margin: 0 auto; padding: 118px 20px 0 6.75%; z-index: 1; } /* Program Gallery */ .programFinder.columns .two { display: flex; flex-direction: row; } .programFinder.columns .two .cell { display: flex; } .programFinder.columns > .wrapper.bottomPanel { padding-top: 48px; padding-bottom: 109px; } .programFinder.columns .two .cell.leftPanel { width: 60%; } .programFinder.columns .two .cell.rightPanel { width: 40%; } /* Program Gallery Left Panel */ .programGallery .programSlideImage { display: flex; position: relative; max-width: 892px; width: 89%; height: auto; max-height: 496px; z-index: 1; } .programGallery .programSlideImage img { max-height: 496px; object-fit: cover; } .programGallery .programSlideImage .imageGradient:after { content: ""; position: absolute; width: 100%; height: 70%; top: auto; bottom: 0; left: 0; right: 0; background: linear-gradient(to bottom, rgba(28, 28, 28, 0) 0%, rgba(0, 0, 0, 0.7) 100%); opacity: .6; } .programGallery .videoButton { color: var(--white); } /* Program Gallery Right Panel */ .programGallery .programSlides { padding: 0 0 80px 0; } .programGallery .rightPanel .caption { width: 90%; padding: 0 20px; z-index: 1; background-color: var(--color1); } .programGallery .rightPanel .caption .wrapper { padding: 0 20px; } .programGallery .rightPanel .caption .subhead { font-size: 1.62rem; line-height: 1.15; margin: 0 0 28px 0; } .programGallery .rightPanel .caption .subhead:after { bottom: -20px; } .columns .programGallery .rightPanel.cell.color1 h2 { font-size: 2.78rem; color: var(--color2); margin-bottom: 32px; font-weight: 600; } .programGallery .rightPanel .caption .subtext { color: var(--white); line-height: 1.55; margin: 0 0 50px 0; } .programGallery .rightPanel .caption .subtext a { color: var(--color2); font-weight: 600; } .programGallery .rightPanel .caption a.ctaButton:not(:last-of-type) { margin-right: 26px; } /* Program Thumbnails */ .programGallery .programThumbnails { width: 91%; padding: 0 4.5%; } .programGallery .programThumbImage { display: flex; position: relative; max-height: 496px; background-color: var(--color4); z-index: 1; } .programGallery .programThumbImage .caption { display: flex; flex-direction: column; position: absolute; top: auto; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; color: var(--white); padding: 6px 6px 6px 15px; z-index: 1; } .programGallery .programThumbImage .caption .subtext { font-size: 1rem; line-height: 1.1; color: var(--white); text-align: left; padding: 0 10px; margin: auto 0 10px 0; border-left: 1px solid var(--color2); z-index: 1; } .programGallery .programThumbImage img { height: auto; max-height: 210px; object-fit: cover; } .programGallery .programThumbImage .imageGradient { z-index: 0; } .programGallery .programThumbImage .imageGradient:after { content: ""; position: absolute; width: 100%; height: 100%; top: auto; bottom: 0; left: 0; right: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); opacity: .8; } .programGallery .slick-current .programThumbImage .imageGradient:after { background: rgba(48,48,48,.3); opacity: 1; } .programGallery .slick-current .programThumbImage .caption .subtext { display: none; } /* Program Thumbnails Controls */ .programThumbnails .slick-prev { left: 0; } .programThumbnails .slick-next { right: 0; } .programThumbnails .slick-dots { bottom: -28px; text-align: left; margin-left: 40px; } .programThumbnails .slick-autoplay-toggle-button { justify-content: left; bottom: -25px; left: 35px; right: auto; width: auto; max-width: none; color: var(--color4); margin: 0 0 0 2.5%; } /* Program Thumbnails Slides */ .programThumbnails .slick-slide { margin: 0 16px; } /* Program Thumbnails List */ .programThumbnails .slick-list { margin: 0 -16px; } @media all and (max-width: 1675px) { /* Program Intro */ .programFinder.columns > .wrapper { padding: 75px 20px 0 3.25%; } .programFinder.columns .wrapper.topPanel .content .description { width: 85%; } /* Program Gallery */ .programGallery .programSlides { padding: 0 0 40px 0; } } @media all and (max-width: 1280px) { /* Program Intro */ .programFinder.columns > .wrapper { padding: 52px 20px 0 35px; } /* Program Gallery Right Panel */ .programGallery .rightPanel .caption { padding: 0; } .programGallery .rightPanel .caption .wrapper { padding: 0; } } @media all and (max-width: 1200px) { .programFinder.columns { background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 52.75%, rgba(183, 49, 44, 1) 52.75%, rgba(183, 49, 44, 1) 100%); } /* Program Intro */ .programFinder .homeProgramsHeader { flex-direction: column; } .programFinder.columns .wrapper.topPanel .content .description { width: 95%; } .programFinder a.viewAll { align-self: flex-start; margin: 8px auto 0 0; } /* Program Gallery */ .programFinder.columns > .wrapper.bottomPanel { padding-top: 28px; } .programGallery .programSlides { padding: 0 0 20px 0; } /* Program Gallery Left Panel */ .programFinder.columns .two .cell.leftPanel { width: 62%; } /* Program Gallery Right Panel */ .programFinder.columns .two .cell.rightPanel { width: 48%; } .programGallery .rightPanel .caption { width: 95%; } .columns .programGallery .rightPanel.cell.color1 h2 { font-size: 2.25rem; margin-bottom: 15px; } .programGallery .rightPanel .caption .subtext { margin: 0 0 20px 0; } } @media all and (max-width: 960px) { .programFinder.columns { background: none; } .programFinder.columns > .wrapper.topPanel { padding: 52px 35px 0 35px; } .programFinder.columns > .wrapper.bottomPanel { padding: 52px 0 0 0; } /* Program Intro */ .programFinder.columns .wrapper.topPanel .content { width: 100%; } .programFinder .topPanel .subhead { margin: 0px 0 28px 0; } /* Program Gallery */ .programGallery { display: flex; flex-direction: column; } .programGallery .programSlides { order: 2; padding: 0; background-color: var(--color1); } .programFinder.columns .two { flex-direction: column; } /* Program Gallery Left Panel */ .programFinder.columns .two .cell.leftPanel { display: none; } /* Program Gallery Right Panel */ .programFinder.columns .two .cell.rightPanel { width: 100%; padding: 100px 35px 60px 35px; } .programGallery .rightPanel .caption { width: 100%; } .programGallery .rightPanel .caption .subhead { margin: 0 0 35px 0; } .columns .programGallery .rightPanel.cell.color1 h2 { margin-bottom: 30px; } .programGallery .rightPanel .caption .subtext { margin: 0 0 30px 0; } /* Program Thumbnails Slides */ .programGallery .programThumbnails { order: 1; z-index: 1; width: 100%; padding: 0 35px; margin: 0 auto -40px auto; } .programGallery .programThumbImage img { max-height: 496px; } .programGallery .programThumbImage .caption { display: none; } .programThumbnails .slick-slide { margin: 0; } /* Program Thumbnails List */ .programThumbnails .slick-list { margin: 0; } /* Program Gallery Controls */ .programThumbnails .slick-dots { width: auto; bottom: -40px; left: 0; right: 0; text-align: center; margin: 0 auto; } .programThumbnails ul.slick-dots > li button { color: var(--white); background-color: rgba(255, 255, 255, .6); border: 1px solid rgba(255,255,255,.6); } .programThumbnails ul.slick-dots > li:hover button, .programThumbnails ul.slick-dots > li button:focus { background-color: var(--white); border: 1px solid var(--white); } .programThumbnails ul.slick-dots > li.slick-active button { background-color: var(--white); border: 1px solid var(--white); } .programThumbnails .slick-autoplay-toggle-button { bottom: -34px; margin: 0; } } @media all and (max-width: 767px) { .programGallery .rightPanel .caption .ctaButtonSet { display: flex; flex-direction: column; align-items: center; } .programGallery .rightPanel .caption a.ctaButton:not(:last-of-type) { margin: 0 auto 20px auto; } } @media all and (max-width: 580px) { /* Program Intro */ .programFinder .homeProgramsHeader { margin: 0 0 25px 0; } .programFinder.columns > .wrapper.topPanel .homeProgramsHeader h2.sectionName { font-size: 2.25rem; } } /* ============================ LANDING/INTERIOR IMPACT * ============================*/ .impactLanding { position: relative; height: auto; } .impactLanding img { width: 100%; height: 650px; display: block; z-index: 0; padding: 0; margin: 0; object-fit: cover; } .interior .impactLanding img { height: 450px; } .impactLanding .caption { position: relative; height: 100%; padding: 0 15px; z-index: 1; } .impactLanding.landingLeft .caption { max-width: 1330px; width: 100%; } .impactLanding .caption .wrapper { display: flex; max-width: 1775px; } .noImage .impactLanding .caption .wrapper { max-width: 1642px; } .impactLanding .caption h1, .impactLanding .caption .sectionName { display: flex; width: auto; /*min-width: 466px;*/ align-self: flex-end; font-family: var(--headingFont); color: var(--white); font-size: 2.82rem; font-weight: 400; line-height: 1.15; background-color: var(--color1); box-shadow: 3px 3px 6px rgba(0, 0, 0, .26); padding: 25px 65px; margin-top: -80px; margin-bottom: 13px; } .interior .impactLanding .caption h1, .interior .impactLanding .caption .sectionName { margin-top: -70px; } @media all and (max-width: 1280px){ .impactLanding img { height: 460px; } .interior .impactLanding img { height: 350px; } } @media all and (max-width: 960px){ .impactLanding img { height: 360px; } .interior .impactLanding img { height: 250px; } .impactLanding .caption h1, .impactLanding .caption .sectionName { /* min-width: 435px;*/ font-size: 2rem; padding: 20px 50px; margin-top: -60px; } .interior .impactLanding .caption h1, .interior .impactLanding .caption .sectionName { margin-top: -60px; } } @media all and (max-width: 580px){ .impactLanding .caption h1, .impactLanding .caption .sectionName { min-width: 176px; font-size: 1.48rem; padding: 12px 22px; margin-top: -38px; } .interior .impactLanding .caption h1, .interior .impactLanding .caption .sectionName { margin-top: -38px; } } /* ============================== LANDING/INTERIOR IMPACT NO IMAGE * ==============================*/ .noImage .impactLanding .caption .wrapper { height: 318px; } @media all and (max-width: 960px){ .noImage .impactLanding .caption .wrapper { height: 235px; } } @media all and (max-width: 580px) { .noImage .impactLanding .caption .wrapper { height: 207px; } } /* ============================ BREADCRUMBS * ============================*/ .breadcrumbs { display: grid; grid-area: 3 / 1 / 3 / 12; width: 100%; padding: 0; margin: 12px auto 0 auto; } .noImage .breadcrumbs { width: 100%; max-width: 1590px; margin: 18px auto 0 auto; } .breadcrumbs ol { display: block; max-width: 1720px; width: 100%; padding: 3px 40px; margin: 0 auto; list-style: none; } .breadcrumbs li { display: inline; color: var(--color1); font-size: 1.14rem; font-weight: 600; line-height: 1.4; padding: 0; } .breadcrumbs li a { color: var(--color4); opacity: .7; font-weight: 400; text-decoration: none; } .breadcrumbs li a:hover, .breadcrumbs li a:focus { text-decoration: underline; } .breadcrumbs li + li::before { display: inline-block; margin: 0 13px 0 11px; vertical-align: top; content: url(../images/breadcrumb-divider.svg) ; } @media all and (max-width: 960px){ .breadcrumbs { margin: 12px auto 20px auto; } } /* ============================ SECTION NAVIGATION * ============================*/ .sectionNav { display: flex; flex-direction: column; position: relative; margin-bottom: 20px; font-size: .98rem; background-color: var(--white); z-index: 3; width: 100%; } .sectionNav ul { position: relative; margin: 0; padding: 0; text-indent: 0; list-style: none; } .sectionNav > ul { width: 100%; margin-bottom: 0; padding-bottom: 0; } .sectionNav ul li.row { padding: 16px 0; } /* Section Sub Nav Toggle */ .sectionNav .sectionNavSubBtn { position: absolute; top: 8px; right: -16px; width: 42px; height: 42px; padding: 0; background-color: transparent; border: 1px solid transparent; border-radius: 0; margin: 0; cursor: pointer; background-image: url(../images/section-nav-caret.svg) ; background-repeat: no-repeat; background-position: center;transform-origin: center; transform: rotate(0deg); transition: all 0.4s ease-in-out; } .sectionNav .sectionNavSubBtn.open { transform: rotate(-180deg); } /* Tier 2 */ .sectionNav ul li { position: relative; font-size: 1.12rem; line-height: 1.4; padding: 6px 0; margin-bottom: 0; } .sectionNav ul li a { position: relative; display: inline-block; color: var(--color4); text-decoration: none; transition: all .4s ease-in-out; z-index: 1; } .sectionNav ul > li > a { font-weight: 400; } .sectionNav ul li::before { content: normal; } .sectionNav ul li.active ul { padding: 2px 0 20px 0; } .sectionNav ul li.active > a { color: var(--color1); /*text-decoration: underline;*/ } .sectionNav .content > ul { padding: 0 16px; } .sectionNav .content > ul + ul > li { border-top: 1px solid rgba(162, 164, 163, .3); } .sectionNav .content > ul > li > a { color: var(--color1); font-weight: 600; padding: 8px 0; } .sectionNav .content ul.sub > li > a { padding: 10px 0; } .sectionNav .content ul li a { text-decoration: none; } .sectionNav .content ul li.active a { font-weight: 400; } .sectionNav .content ul li a:hover, .sectionNav .content ul li a:focus { color: var(--color1); /*text-decoration: underline;*/ } .sectionNav ul li.active > a:hover, .sectionNav ul li.active > a:focus { color: var(--color1); } .sectionNav .content > ul > li > a:hover, .sectionNav .content > ul > li > a:focus { color: var(--color4); } .sectionNav .content ul > li > a span { padding-left: 0; padding-right: 20px; } /* Tier 3 */ .sectionNav .content > ul > li > ul > li:first-of-type { border-top: 1px solid rgba(162, 164, 163, .3); } .sectionNav .content > ul > li > ul > li { padding: 15px 5px 15px 42px; border-bottom: 1px solid rgba(162, 164, 163, .3); } .sectionNav .content > ul > li > ul > li:last-of-type { padding-bottom: 8px; border-bottom: none; } .sectionNav .content > ul > li > ul > li a { text-transform: none; font-weight: 400; } .sectionNav .content > ul > li > ul > li.active > a { color: var(--color1); } @media all and (min-width: 961px) { .sectionNav a.sectionTitle { position: relative; width: 100%; font-size: 1.12rem; font-weight: 600; color: var(--color1); line-height: 1; padding: 11px 15px; margin: 0; background-color: var(--gray); z-index: 1; } .sectionNav a.sectionTitle:hover, #mainWrapper .sectionNav a.sectionTitle:focus { color: var(--color4); /*text-decoration: underline;*/ } .sectionNav .content { display: block !important; } } @media all and (max-width: 960px) { .sectionNav { position: relative; width: 93%; padding: 0; margin: 0 3.5% 5px 3.5%; border-top: 9px solid var(--color1); box-shadow: 0px 1px 6px 1px rgba(0,0,0,0.2); z-index: 1; } .sectionNav a.sectionTitle { font-size: 1.12rem; font-weight: 600; color: var(--color4); line-height: 1; padding: 20px; margin: 0; transition: all 0.4s ease-in-out; } .sectionNav.open a.sectionTitle, .sectionNav a.sectionTitle:hover, .sectionNav a.sectionTitle:focus { color: var(--color1); } .sectionNav.open a.sectionTitle:hover, .sectionNav.open a.sectionTitle:focus { color: var(--color4); } .sectionNav > ul { margin-left: auto; margin-right: auto; margin-bottom: 0; padding: 0; } .sectionNav .navSectionExpander { position: absolute; top: 8px; right: 8px; width: 40px; height: 42px; background-color: transparent; border: 1px solid transparent; border-radius: 0; margin: 0; cursor: pointer; background-image: url(../images/section-dropdown.svg) ; background-repeat: no-repeat; background-position: center;transform-origin: center; transform: rotate(0deg); transition: all 0.4s ease-in-out; } .sectionNav.open .navSectionExpander { transform: rotate(-180deg); } .sectionNav ul li.row { max-width: 100%; padding: 0; } .sectionNav ul li { font-size: 1rem; padding: 0; } .sectionNav .content { display: none; width: 100%; padding: 0 0 10px 0; } .sectionNav .content > ul { padding: 0 20px; } /* Section Sub Nav Toggle */ .sectionNav .sectionNavSubBtn { top: 2px; } /* Tier 3 */ .sectionNav .content > ul > li > ul { padding: 0 25px; } .sectionNav .content > ul + ul:nth-child(2) > li { border-top: 1px solid transparent; } .sectionNav .content > ul > li > ul > li { padding: 10px 0; } .sectionNav .content > ul > li > ul > li:first-of-type { padding-top: 3px; border-top: none; } } @media all and (max-width: 580px) { .sectionNav { width: 86%; margin-left: 7%; margin-left: 7%; } } /* ============================ SECTION SIDEBAR * ============================*/ .sideBar.components { padding: 20px 5px 20px 15px; } .rightSection .sideBar.components { padding: 20px 0 20px 20px; } .sideBar.components:last-of-type { padding-bottom: 52px; } /* Side Bar CTA Buttons Area */ .sideBar .ctaButtonSet { padding: 0 20px; margin-bottom: 50px; } .sideBar .ctaButtonSet a.ctaButton { width: 100%; max-width: 100%; font-size: 1.12rem; padding-top: 19px; padding-bottom: 18px; box-shadow: 0 2px 6px rgba(0, 0, 0, .26); } .sideBar .ctaButtonSet a.ctaButton:after { right: 30px; } .sideBar a.ctaButton:not(:last-of-type) { margin: 0 auto 28px 0; } .sideBar a.ctaLink:not(:last-of-type) { margin: 0 auto 20px 0; } /* Side Bar Content Area */ .sideBar.columns > .wrapper { padding-top: 20px; padding-bottom: 20px; padding-left: 35px; } .landing .sideBar.columns .wrapper .one .content p { padding-right: 0; } .landing .sideBar.columns .wrapper .one .content *[style="text-align: center;"] { width: 100%; } .landing .sideBar.columns.columnBg .wrapper .one .content *[style="text-align: center;"] { width: 100%; } .sideBar .columns, .sideBar .columns.columnBg, .landing .sideBar .columns.columnBg, .interior .sideBar .columns.columnBg { margin-bottom: 48px; } .sideBar .columns.columnBg, .landing .sideBar .columns.columnBg, .interior .sideBar .columns.columnBg { padding: 26px 20px; } .sideBar .columns.columnBg.bgimg { padding-top: 60px; padding-bottom: 45px; } .sideBar .columns.columnBg, .landing .sideBar .columns.columnBg, .interior .sideBar .columns.columnBg { background-attachment: unset; } .sideBar .columns .wrapper, .landing .sideBar .columns .wrapper, .interior .sideBar .columns .wrapper { padding: 0; } .sideBar .columns.columnBg > .wrapper:before { display: none; } .sideBar .columns.columnBg + .columns.columnBg { margin: 0 0 48px 0; } .sideBar h2, .landing .sideBar .columns.columnBg > .wrapper > h2, .interior .sideBar .columns.columnBg > .wrapper > h2 { font-size: 2.25rem; line-height: 1.1; text-align: center; margin-bottom: 38px; } .sideBar h2, .sideBar .columnBg:not(.bgimg) h2, .landing .sideBar .columns.columnBg:not(.bgimg) > .wrapper > h2, .interior .sideBar .columns.columnBg:not(.bgimg) > .wrapper > h2 { margin-bottom: 30px; } .sideBar h2:after { position: absolute; top: auto; bottom: -14px; left: 0; right: 0; content: ""; width: 122px; height: 3px; margin: 0 auto; background-color: var(--color2); } .sideBar.columns .content { padding: 0 10px; line-height: 1.55; } .sideBar h3, .sideBar .columns.columnBg .wrapper h3, .interior .sideBar .columns.columnBg .wrapper h3 { font-size: 1.12rem; text-transform: uppercase; padding: 0; margin-bottom: 12px; } .sideBar .columns.columnBg .wrapper h3:before { display: none; } @media all and (max-width: 960px) { .sideBar.components { padding: 0 15px 20px 15px; } .rightSection .sideBar.components { padding: 0 15px; } .news.rightSection .sideBar.components { padding: 0; } .sideBar .ctaButtonSet { margin-bottom: 15px; } .galleryWrapper + .sideBar.components { padding-top: 20px; } } /* ============================ INFOGRAPHICS * ============================*/ .infographics { width: 100%; padding: 40px 15px; background-color: var(--white); } .grayBg + .infographics { background: linear-gradient(to bottom, rgba(244,244,244,1) 0%,rgba(244,244,244,1) 50%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%); } .infographics.columns > .wrapper { position: relative; display: flex; flex-direction: row; align-self: center; max-width: 1396px; width: 100%; padding: 50px 4% 40px 4%; margin: 0 auto; box-shadow: 0px 1px 6px 1px rgba(0,0,0,0.2); } .infographics.columns > .wrapper:before { position: absolute; content: ""; top: 0; bottom: auto; left: 0; right: 0; width: 100%; height: 10px; background-color: var(--color2); z-index: 2; } .infographics.columns > .wrapper > .overlay { display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; z-index: 0; } .infographics .infographic { position: relative; height: 100%; align-self: center; flex: 1 1 0; margin: 0; } .infographics .infographicWrap { display: flex; flex-direction: column; position: relative; width: 100%; height: 100%; text-align: center; line-height: 1; align-items: center; } .infographics .infographic .infographicInner { display: flex; flex-direction: column; flex: auto; width: 100%; padding: 0 20px; } .infographics .cell:not(:last-child):after { display: block; content: ""; position: absolute; top: 0; bottom: 0; left: auto; right: 0; width: 1px; height: 58px; margin: auto; background-color: rgba(255, 255, 255, .75); } .infographics .infographic .infoText { font-size: 1.3rem; font-weight: 600; color: var(--white); line-height: 1.1; padding: 0 16%; margin: 0; text-transform: uppercase; } .infographics .infographic .infoStat { font-size: 5.1rem; color: var(--white); font-weight: 600; letter-spacing: .05em; } @media all and (max-width: 1200px) { .infographics.columns > .wrapper { flex-flow: wrap; justify-content: space-evenly; padding: 66px 5% 40px 5%; } .infographics .infographic { margin: 0 0 25px 0; } .infographics .wrapper .cell { width: 100%; max-width: 47%; flex: auto; } .infographics .wrapper .cell:nth-child(3):after { display: none; } } @media all and (max-width: 960px) { .infographics.columns > .wrapper .cell, .infographics.columns > .wrapper .cell:last-child { margin-right: 0; } } @media all and (max-width: 720px) { .infographics.columns > .wrapper { width: 100%; padding: 66px 5%; } .infographics.columns > .wrapper .cell { display: flex; flex-direction: column; max-width: 100%; margin: 0 0 85px 0; } .infographics.columns > .wrapper .cell:last-child { margin: 0; } .infographics.columns > .wrapper .cell:after, .infographics.columns > .wrapper .cell:nth-child(2):after { display: block; content: ""; position: absolute; top: auto; bottom: -35px; left: 0; right: 0; width: 80px; height: 1px; margin: auto; background-color: rgba(255,255,255,.75); } .infographics.columns > .wrapper .cell:last-child:after { display: none; } } /* ============================ TABS * ============================*/ .responsiveTabs { padding: 35px 35px 55px 35px; margin: 0 auto; background-color: var(--white); } .responsiveTabs > .wrapper { max-width: 1395px; } .responsiveTabs.grayBg { padding: 55px 35px; background-color: var(--gray); } .responsiveTabs .columns .two { gap: 1.5rem; } .responsiveTabs .columns .wrapper { width: 100%; max-width: 1455px; padding: 0; margin: 0 auto; } .responsiveTabs .ghost { position: absolute; top: auto; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .responsiveTabs .standardTabs { display: flex; flex-flow: wrap; justify-content: right; width: auto; padding: 0; margin: 0; text-align: center; } .responsiveTabs .standardTabs li { position: relative; display: flex; justify-content: right; font-size: 1.15rem; font-weight: 500; line-height: 1; text-transform: uppercase; vertical-align: middle; cursor: pointer; margin: 0; } .responsiveTabs .standardTabs li a { color: var(--color4); font-weight: 400; background-color: var(--white); display: block; padding: 14px 26px; text-decoration: none; transition: all 0.3s ease-in-out; } .responsiveTabs.grayBg .standardTabs li a { background-color: var(--gray); } .responsiveTabs .standardTabs li:last-child a { padding-right: 5px; } .responsiveTabs .standardTabs li a:hover { color: var(--color4); background-color: var(--white); font-weight: 700; } .responsiveTabs.grayBg .standardTabs li a:hover { background-color: var(--gray); } .responsiveTabs .standardTabs .active a, .responsiveTabs .standardTabs .active a:hover, .responsiveTabs .standardTabs .active a:focus { background-color: var(--white); color: var(--color4); } .responsiveTabs.grayBg .standardTabs .active a, .responsiveTabs.grayBg .standardTabs .active a:hover, .responsiveTabs.grayBg .standardTabs .active a:focus { background-color: var(--gray); } .responsiveTabs .standardTabs a span:after { display: inline-flex; content: ""; width: 100%; height: 2px; background-color: transparent; margin: 8px 0 0 0; } .responsiveTabs .standardTabs .active a span { display: inline-flex; flex-direction: column; font-weight: 700; } .responsiveTabs .standardTabs .active a span:after, .responsiveTabs .standardTabs .active a:hover span:after, .responsiveTabs .standardTabs .active a:focus span:after { background-color: var(--color1); } .responsiveTabs .tabContainer { position: relative; clear: both; padding: 0; } .responsiveTabs .tabContent { display: none; padding: 0; } .responsiveTabs .tabContent.active { display: flex; position: relative; z-index: 0; } .responsiveTabs .tabContent:not(.active) a, .responsiveTabs .tabContent:not(.active) iframe { display: none; } .responsiveTabs .accordionHeading { display: none; font-size: 1rem; font-weight: 500; } .responsiveTabs .twoColumn .wrapper .two .cell .content { margin-top: 0; padding: 0 14% 0 0; } .responsiveTabs .columns .wrapper .cell .imgZoom { position: relative; display: inline-flex; } .responsiveTabs .columns .wrapper .cell .imgZoom img:hover { transform: scale(1.0); } .responsiveTabs .columns .wrapper .cell .imgZoom:after { content: ""; position: absolute; width: 100%; height: 26%; top: auto; bottom: 0; left: 0; right: 0; background: linear-gradient(to bottom, rgba(28,28,28,0) 0%,rgba(0,0,0,0.7) 100%); } @media all and (max-width: 960px) { .responsiveTabs .twoColumn .wrapper .two .cell .content { padding: 0 3% 0 0; } } @media all and (max-width: 768px) { .responsiveTabs .twoColumn .wrapper .two .cell .content { padding: 0 3% 0 0; } .responsiveTabs .columns .two { grid-template-columns: 1fr; gap: 2rem; } .responsiveTabs .columns .wrapper .cell .imgZoom:after { height: 20%; } .responsiveTabs .twoColumn .wrapper .two .cell:first-child { order: 2; } .responsiveTabs .twoColumn .wrapper .two .cell:last-child { order: 1; overflow-x: hidden; } .responsiveTabs .columns .wrapper .cell .imgZoom, .responsiveTabs .columns .wrapper .two .cell .imgZoom { display: flex; width: 100%; margin: 0 auto; } } @media all and (max-width: 720px) { .responsiveTabs .standardTabs { margin-bottom: 16px; } .responsiveTabs { padding: 10px 35px 65px 35px; } .responsiveTabs.grayBg { padding: 35px 35px 22px 35px; } .responsiveTabs .standardTabs li { width: 50%; flex: auto; justify-content: left; min-width: 1px; } .responsiveTabs .standardTabs li a { padding: 4px 20px; } .responsiveTabs .standardTabs li { justify-content: left; } .responsiveTabs .standardTabs li:nth-of-type(1n) a, .responsiveTabs .standardTabs li:nth-of-type(3n) a { padding-left: 0; } .responsiveTabs .standardTabs li:nth-of-type(2n) a { padding-right: 0; } .responsiveTabs .standardTabs li:nth-of-type(2n), .responsiveTabs .standardTabs li:nth-of-type(4n), .responsiveTabs .standardTabs li:nth-of-type(6n) { justify-content: right; } } /* Tabs Virtual Tour */ .responsiveTabs .virtual-tour:not(.active):not(:first-of-type) { display: block; position: absolute; top: 0; z-index: -999999; } .responsiveTabs .virtual-tour .imgZoom { height: 100%; max-height: 385px; width: 100%; overflow: hidden; } .responsiveTabs .virtual-tour .imgZoom:after { display: none; } @media all and (max-width: 1279px) { .responsiveTabs .virtual-tour .imgZoom { max-width: 554px; max-height: 285px; } } @media all and (max-width: 1100px) { .responsiveTabs .virtual-tour .imgZoom { max-width: 450px; } } @media all and (max-width: 960px) { .responsiveTabs .virtual-tour .imgZoom { max-width: 640px; height: 385px; } } @media all and (max-width: 480px) { .responsiveTabs .virtual-tour .imgZoom { max-width: 100%; height: 190px; } } /* ============================ SHARED NEWS * ============================*/ .sharedNews { position: relative; width: 100%; margin: 0; padding: 0; background-repeat: no-repeat; background-position: bottom center; } .sharedNews > .overlay { display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; z-index: 0; } .sharedNewsHeader { display: flex; flex-direction: row; align-self: flex-start; } .sharedNews.columns > .wrapper, .sharedNews.global.columns > .wrapper { position: relative; display: flex; flex-direction: column; max-width: 1470px; width: 100%; margin: 0 auto; padding: 40px 35px; z-index: 1; } .landing .columns .sharedNews > .wrapper, .interior .columns .sharedNews > .wrapper { padding-top: 20px; } .sharedNews .sectionName { position: relative; display: inline-flex; width: auto; margin: 0 auto 0 0; } .sharedNews a.viewAll { align-self: center; margin: 8px auto 0 50px; } /* Shared News Featured */ .sharedNews .newsFeatured { position: relative; display: flex; flex-direction: row; margin: 32px 0 38px 0; } .sharedNews .newsFeatured .newsOverlay { position: absolute; top: 0; bottom: auto; left: 0; right: auto; color: var(--white); font-size: .92rem; font-weight: 600; background-color: rgba(135,40,55,0.81); text-transform: uppercase; padding: 12px 28px; } .sharedNews .newsFeatured .newsThumb { width: 78%; max-height: 414px; } .sharedNews .newsFeatured .newsThumb img { max-width: 750px; width: 100%; height: auto; } .sharedNews .newsFeatured .subhead { font-size: 1rem; text-transform: none; margin: 0 0 5px 0; } .sharedNews .newsFeatured .subhead:after { display: none; } .sharedNews .newsFeatured .description { width: 65%; padding: 28px 0 28px 45px; } .sharedNews .newsFeatured .newsDate { font-size: 1rem; font-weight: 500; color: var(--color4); line-height: 1; margin: 0 0 22px 0; } .sharedNews .newsFeatured .newsTitle, .sharedNews .newsFeatured .newsTitle a { display: block; font-family: var(--headingFont); font-size: 2.25rem; line-height: 1.3; font-weight: 400; color: var(--color1); text-decoration: none; margin: 0 0 25px 0; } .sharedNews .newsFeatured .newsTitle a:hover, .sharedNews .newsFeatured .newsTitle a:focus { text-decoration: underline; } .sharedNews .newsFeatured .newsSummary { font-size: 1rem; } .sharedNews .newsFeatured .newsSummary p { max-width: 90%; margin-bottom: 44px; } /* Shared News Listing */ .sharedNews .newsListing { position: relative; display: flex; padding: 40px 0 12px 0; } .sharedNews .newsListing:before { position: absolute; top: 0; bottom: auto; left: 0; right: 0; content: ""; width: 36%; height: 2px; background-color: rgba(48, 48, 48, .1); margin: 0 auto; } .sharedNews .newsListing .cell { display: flex; flex-direction: row; flex: 1; padding-right: 5%; } .sharedNews .newsListing .cell:last-child { padding-right: 0; } .sharedNews .newsListing .imageCTA { position: relative; display: flex; max-height: 118px; width: 100%; margin: 0 0 7px 0; } .sharedNews .newsListing .imageCTA:after { display: block; content: ""; position: absolute; top: auto; bottom: 0; left: auto; right: 0; width: 16px; height: 16px; background-image: url(../images/link-arrow-right.svg) ; background-repeat: no-repeat; background-size: 100%; } .sharedNews .newsListing .imageCTA img { width: 100%; object-fit: cover; } .sharedNews .newsListing .newsDate { font-size: .88rem; color: var(--color1); line-height: 1; margin: 2px 0 8px 0; } .sharedNews .newsListing a { display: flex; flex-direction: column; max-width: 214px; font-size: 1rem; font-weight: 500; color: var(--color4); text-decoration: none; line-height: 1.5; margin: 0; transition: all 0.3s ease-in-out; } .sharedNews .newsListing a .imageCTA { transform: translate(0, 0); transition: all 0.3s ease-in-out; } .sharedNews .newsListing a:hover .imageCTA, .sharedNews .newsFeatured a:focus .imageCTA { transform: translate(0, -5px); } .sharedNews .newsListing a .newsTitle { font-size: 1rem; font-weight: 600; color: var(--color4); line-height: 1.3; transition: all 0.3s ease-in-out; } .sharedNews .newsListing a:hover .newsTitle, .sharedNews .newsFeatured a:focus .newsTitle { color: var(--color1); } /* Landing and Interior Shared News */ .sharedNews.global .sharedNewsHeader { margin: 0 0 18px 0; } .sharedNews.global .sectionName:after { position: absolute; top: auto; bottom: -18px; left: 0; right: auto; content: ""; width: 122px; height: 3px; background-color: var(--color2); } .sharedNews.global .newsListing { padding: 40px 0 5px 0; } .sharedNews.global .newsListing:before { display: none; } .sharedNews.global .newsListing a { max-width: 276px; } .sharedNews.global a.viewAll { align-self: flex-end; margin: 8px auto 0 32px; } .sharedNews.global .newsListing .cell { padding-right: 6.5%; } .sharedNews.global .newsListing .cell:last-of-type { padding-right: 0; } .sharedNews.global .newsListing .imageCTA { max-height: 152px; margin: 0 0 16px 0; } .sharedNews.global .newsListing .imageCTA:after { width: 20px; height: 20px; } .sharedNews.global .newsListing a .newsTitle { line-height: 1.3; } @media all and (max-width: 960px) { .sharedNews.columns > .wrapper { padding: 40px 35px 15px 35px; } .sharedNewsHeader { flex-direction: column; } .sharedNews a.viewAll { margin: 8px auto 0 0; } .sharedNews.columns > .wrapper, .sharedNews.global.columns > .wrapper { padding: 35px 35px; } /* Shared News Featured */ .sharedNews .newsFeatured { flex-direction: column; } .sharedNews .newsFeatured .newsThumb { width: 100%; } .sharedNews .newsFeatured .newsThumb img { margin: 0 auto; } .sharedNews .newsFeatured .newsSummary { text-align: center; } .sharedNews .newsFeatured .newsSummary a.ctaButton { margin-left: auto; margin-right: auto; } .sharedNews .newsFeatured .newsSummary p { text-align: left; max-width: 100%; margin-bottom: 30px; } .sharedNews .newsFeatured .description { width: 100%; padding: 11px 0; } /* Shared News Listing */ .sharedNews .newsListing .cell { padding-right: 3%; } /* Landing and Interior Shared News */ .sharedNews.global .sectionName:after { bottom: -10px; } .sharedNews.global a.viewAll { align-self: flex-start; margin: 25px auto 0 0; } .sharedNews.global .newsListing .cell { padding-right: 3.5%; } } @media all and (max-width: 768px) { /* Shared News Listing */ .sharedNews .newsListing .cell:nth-child(4), .sharedNews .newsListing .cell:nth-child(5) { display: none; } .sharedNews.global .newsListing .cell:nth-child(4) { display: flex; margin-bottom: 0; } } @media all and (max-width: 580px) { /* Shared News Featured */ .sharedNews .newsFeatured .newsTitle a { display: block; font-family: var(--headingFont); font-size: 1.5rem; line-height: 1.3; margin: 0 0 15px 0; } /* Shared News Listing */ .sharedNews .newsListing { width: 100%; flex-flow: column; } .sharedNews .newsListing .cell { flex-flow: column; padding-right: 0; margin: 0 auto 30px auto; } .sharedNews:not(.global) .newsListing .cell:nth-child(3) { margin-bottom: 8px; } .sharedNews .newsListing a { max-width: 100%; } .sharedNews .newsListing .imageCTA { max-height: 275px; } /* Landing and Interior Shared News */ .sharedNews.global .newsListing { padding: 10px 0 25px 0; } .sharedNews.global .newsListing .cell { width: 100%; padding-right: 0; } .sharedNews.global .newsListing a { max-width: 100%; } .sharedNews.global .newsListing .imageCTA { max-height: 225px; } } /* ============================ SHARED EVENTS * ============================*/ .sharedNews + .sharedEvents.columns { padding: 0 15px 40px 15px; } .sharedEvents.columns { padding: 40px 20px; } .sharedEvents .wrapper > .overlay { display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; z-index: 0; } .sharedEvents.columns > .wrapper { position: relative; display: flex; flex-direction: column; max-width: 1640px; padding: 30px 5% 5px 6.5%; z-index: 1; background-repeat: no-repeat; } .sharedEvents.columns > .wrapper:before { position: absolute; content: ""; top: 0; bottom: auto; left: 0; right: 0; width: 100%; height: 10px; background-color: var(--color2); z-index: 2; } .sharedEvents .sharedEventsHeader { position: relative; display: flex; flex-direction: row; text-transform: none; align-self: flex-start; } .sharedEvents .sharedEventsHeader:after { position: absolute; top: auto; bottom: -18px; left: 0; right: auto; content: ""; width: 122px; height: 3px; background-color: var(--color2); } .sharedEvents.columns > .wrapper > .sharedEventsHeader h2.sectionName { position: relative; display: inline-flex; color: var(--white); width: auto; margin: 0 auto 0 0; } .sharedEvents a.viewAll { align-self: center; margin: 8px auto 0 50px; } /* Shared Events Listing */ .sharedEvents .eventListing { display: flex; flex-direction: column; width: 100%; margin: 45px 0 0 0; } .sharedEvents .eventListing .eventItems { display: flex; justify-content: space-between; } .sharedEvents .eventListing .cell { position: relative; max-width: 24%; margin: 0 2.5% 25px 0; } .sharedEvents .eventListing .cell:last-child { margin-right: 0; } .sharedEvents .eventListing .cell:after { display: block; content: ""; position: absolute; top: 5px; bottom: auto; left: auto; right: 0; width: 1px; height: 74px; margin: auto; background-color: rgba(255,255,255,.75); } .sharedEvents .eventListing .cell:last-child:after { display: none; } .sharedEvents .eventListing .cell a { display: flex; height: 100%; text-decoration: none; box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.0); transition: all 0.4s ease-in-out; } .sharedEvents .eventListing .cell a .ctaLink:before { width: 88%; margin-top: 5px; } .sharedEvents .eventListing .eventDate { position: relative; display: block; font-weight: 600; color: var(--color1); text-decoration: none; padding: 8px 3px; transition: all 0.4s ease-in-out; } .sharedEvents .eventListing .eventDate span { display: block; } .sharedEvents .eventListing .eventDateGroup { position: relative; width: 100%; max-width: 66px; min-height: 73px; text-transform: uppercase; text-align: center; line-height: 1; padding: 0; margin: 0 auto; background-color: var(--white); box-shadow: 0px 1px 6px 1px rgba(0,0,0,0.2); } .sharedEvents .eventListing .eventDate .month { font-size: .88rem; font-weight: 400; color: var(--white); background-color: var(--color1); padding: 3px 19px; } .sharedEvents .eventListing .eventDate .day { font-size: 1.25rem; font-weight: 600; color: var(--color4); padding: 6px 16px; } .sharedEvents .eventListing .eventDate .dayText { font-size: 1.05rem; font-weight: 600; color: var(--color4); padding: 0px 16px; } .sharedEvents .eventListing .eventInfo { padding: 5px 15px; } .sharedEvents .eventListing .eventInfo .ctaLink { line-height: 1.4; margin: 0 5% 1px 0; } .sharedEvents .eventListing .eventLocation { display: block; font-size: 1rem; font-weight: 400; color: var(--white); line-height: 1.5; text-align: left; padding: 5px 0; } .sharedEvents .eventListing .eventTime { font-size: .88rem; line-height: 1; } /* Landing and Interior Shared Events */ .sharedNews.global + .sharedEvents.columns { padding: 0 0 40px 0; } .sharedNews.global + .sharedEvents.columns.components:last-child, .sharedEvents.columns.components:last-child { padding: 0 0 80px 0; } .sharedEvents.columns.global > .wrapper { max-width: 1640px; } .sharedEvents.columns.global > .wrapper:before { display: none; } .sharedEvents.global .eventListing .eventItems { justify-content: center; } .sharedEvents.global .eventListing .eventLocation { color: var(--color4); } .sharedEvents.columns.global > .wrapper { background-position: bottom; padding: 5px 35px 20px 35px; } .sharedEvents.global .eventListing .cell { max-width: 28%; } .sharedEvents.global .eventListing .eventInfo { padding: 5px 45px 5px 30px; } .sharedEvents.global .eventListing .cell:after { top: 13px; height: 88px; background-color: rgba(162,164,163,.5); } .sharedEvents.global a.viewAll { margin: -20px auto 0 auto; z-index: 1; } @media all and (max-width: 1540px) { .sharedEvents .eventListing .eventInfo .ctaLink { margin: 0 2% 1px 0; } /* Landing and Interior Shared Events */ .sharedEvents.global .eventListing .cell { max-width: 30.5%; } } @media all and (max-width: 1200px) { .sharedEvents .eventListing .eventItems { flex-flow: wrap; justify-content: space-evenly; } .sharedEvents .eventListing .eventItems .cell { width: 100%; max-width: 47%; flex: auto; } .sharedEvents .eventListing .cell:nth-child(2):after { display: none; } .sharedEvents .eventListing .cell:last-child { margin-right: 2.5%; } /* Landing and Interior Shared Events */ .sharedEvents.global .eventListing .eventItems { flex-flow: nowrap; } .sharedEvents.global .eventListing .eventInfo { padding: 5px 30px; } .sharedEvents.global .eventListing .cell:nth-child(2):after { display: block; } } @media all and (max-width: 960px) { .sharedEvents .eventListing .cell, .sharedEvents .eventListing .cell:last-child { margin-right: 0; } /* Landing and Interior Shared Events */ .sharedNews.global + .sharedEvents.columns.components:last-child, .sharedEvents.columns.components:last-child { padding: 0 0 50px 0; } .sharedEvents .eventListing { margin: 40px 0 0 0; } .sharedEvents.global .eventListing .eventItems { flex-direction: column; flex-flow: wrap; } .sharedEvents .eventListing .eventItems .cell { max-width: 100%; } .sharedEvents .eventListing .cell:after, .sharedEvents .eventListing .cell:nth-child(2):after { display: block; content: ""; position: absolute; top: auto; bottom: -16px; left: 0; right: 0; width: 80px; height: 1px; margin: auto; background-color: rgba(255,255,255,.75); } .sharedEvents.global .eventListing .cell:after, .sharedEvents.global .eventListing .cell:nth-child(2):after { display: none; } .sharedEvents.global .eventListing .eventInfo { padding-right: 0; } } @media all and (max-width: 580px) { .sharedEvents.columns > .wrapper { padding: 53px 20px 30px 20px; } .sharedEvents .sharedEventsHeader { flex-direction: column; } .sharedEvents a.viewAll { margin: 8px auto 0 0; } .sharedEvents .eventListing .eventItems .cell { flex-direction: column; max-width: 100%; margin: 0 0 40px 0; } .sharedEvents .eventListing .eventInfo .ctaLink { margin: 0 5% 1px 0; } /* Shared Events Listing */ .sharedEvents .eventListing { width: 100%; } } /* ============================ SOCIAL JUICER * ============================*/ /* Social Feed */ .socialFeed > .wrapper { max-width: 1720px; padding: 25px 40px; } .socialFeed .socialbar { display: block; margin: 0; } .socialFeed .socialbar a { position: relative; display: inline-block; font-size: 1.5rem; color: var(--color4); text-align: center; margin: 0 18px 0 0; top: 0; transition: all 0.5s ease-in-out; } .socialFeed .socialbar a:hover, .socialFeed .socialbar a:focus { color: var(--color4); top: -3px; } .socialFeed .socialbar a span { position: absolute; left: -999999px; } .socialFeed .socialbar a img { width: 25px; height: 25px; text-align: center; vertical-align: text-top; } .socialFeed .sectionName { position: relative; } .socialFeed .sectionName:after { position: absolute; top: 0; bottom: 0; content: ""; width: 340px; height: 3px; margin: 30px 0 auto 42px; background-color: var(--color2); } /* CTA Juicer Button Base */ .socialListing .juicer-feed { text-align: center; } .socialListing .juicer-feed a.j-paginate.juicer-button { position: relative; display: inline-flex; justify-content: space-around; width: auto; font-family: var(--bodyFont); font-size: .95rem; font-weight: 600; color: var(--color4); text-align: center; text-transform: uppercase; line-height: 1.1; background-color: var(--color2); border-color: var(--color2); border-radius: 0; text-decoration: none; margin: 0 0 40px 0; padding: 13px 30px 12px 30px; transition: all 0.4s ease-in-out; } .socialListing .juicer-feed a.j-paginate.juicer-button:hover, .socialListing .juicer-feed a.j-paginate.juicer-button:focus { color: var(--color4); background-color: var(--color2); padding: 13px 42px 12px 18px; } .socialListing .juicer-feed a.j-paginate.juicer-button:after { position: absolute; top: 0; bottom: 0; right: 15px; width: 12px; height: 12px; content: ""; margin: auto 0; background-image: url(../images/cta-button-arrow-dark-gray.svg) ; background-repeat: no-repeat; background-position: center; transition: all 0.4s ease-in-out; opacity: 0; } .socialListing .juicer-feed a.j-paginate.juicer-button:hover:after, .socialListing .juicer-feed a.j-paginate.juicer-button:focus:after { opacity: 1; } .socialListing .juicer-feed h1.referral { display: none !important; } .socialListing .juicer-feed h1.referral a { color: var(--color4) !important; } .j-poster .j-date { color: var(--color4) !important; } @media all and (max-width: 960px) { .socialFeed > .wrapper { padding: 10px 35px; } .socialFeed .socialbar a img { width: 23px; height: 23px; } .socialFeed .sectionName:after { top: auto; bottom: -14px; left: 0; width: 158px; margin: 0; } } /* ============================ NEWS LISTING * ============================*/ /* News Listing Intro Header */ .newsIntroHeader { position: relative; display: flex; flex-direction: row; text-transform: none; align-self: flex-start; margin: 0; } .newsIntroHeader h1.sectionName, .newsIntroHeader h2.sectionName { position: relative; display: inline-flex; width: auto; color: var(--color1); font-weight: 400; line-height: 1.15; margin: 0; } .newsIntroHeader a.viewAll { align-self: center; margin: 18px auto 0 28px; } @media all and (max-width: 960px) { /* News Listing Intro Header */ .newsIntroHeader { flex-direction: column; } .newsIntroHeader a.viewAll { align-self: flex-start; margin: 16px auto 0 0; } } @media all and (max-width: 580px) { /* News Listing Intro Header */ .newsIntroHeader { margin: 0; } } /* News Listing */ .newsListings { padding: 0; } .news.landing .impactLanding img { height: 450px; } .news.landing .impactLanding .caption h1 { margin-top: -70px; } .newsListing.wrapper { display: flex; flex-direction: column; padding: 0 15px; max-width: 1435px; } .newsListing .newsItems { padding: 0 0 50px 0; } .articleListing { display: flex; width: 100%; margin: 32px 0 0 0; } /* News Listing Thumbnail */ .articleListing .newsImage { position: relative; display: inline-block; width: 33.5%; height: 100%; margin-bottom: 10px; } .articleListing .newsThumb { display: block; width: 100%; max-width: 408px; max-height: 300px; } .articleListing .newsThumb img { width: 100%; max-height: 300px; object-fit: cover; object-position: top; } @media all and (min-width: 1300px) { .newsListing.interior .articleListing .newsThumb img { min-height: 1300px; } } /* News Listing Article Content */ .articleListing .newsDescription { display: inline-block; width: 61%; vertical-align: top; padding: 23px 0 0 0; border-top: 1px solid #30303080; } .articleListing .wysiwygContent { width: 100%; margin-bottom: 0; } .articleListing .wysiwygContent p { font-size: 1.12rem; line-height: 1.4; margin: 18px 0; } .articleListing .wysiwygContent .newsLink a { text-decoration: underline; font-size: .85rem; color: var(--color1); } .articleListing h2.newsTitle { font-size: 1.5rem; font-family: var(--bodyFont); font-weight: 600; line-height: 1.25; margin-bottom: 36px; } .articleListing h2.newsTitle:after { position: absolute; top: auto; bottom: -18px; left: 0; right: auto; content: ""; width: 122px; height: 3px; background-color: var(--color2); } .articleListing h2.newsTitle a { display: block; color: var(--color4); text-decoration: none; margin-bottom: 0; transition: all 0.4s ease-in-out; } .articleListing h2.newsTitle a:hover, .articleListing h2.newsTitle a:focus { color: var(--color1); } /* News Listing Filter Bars */ /* News Filter Container */ .newsFilter { margin: 0 0 17px 0; } .newsFilter .catDrop { position: relative; margin: 0 0 27px 0; border: 1px solid #A2A4A333; box-shadow: 0 3px 6px rgba(0, 0, 0, .29); z-index: 10; } .newsFilter .catDrop:last-of-type { z-index: 9; } /* News Filter Buttons */ .newsFilter .infoBtn { position: relative; width: 100%; min-height: 49px; color: var(--color4); line-height: 1; text-align: left; background-color: var(--white); border: 1px solid #fff; padding: 5px 15px; margin: 0; cursor: pointer; transition: all 0.4s ease-in-out; } .newsFilter .infoBtn .menuText { font-size: 1rem; } .newsFilter .select.open .infoBtn .menuText { font-weight: 600; } .newsFilter .infoBtn:hover, .newsFilter .infoBtn:focus { color: var(--color1); } .newsFilter .infoBtn:after { display: block; position: absolute; top: 15px; bottom: auto; left: auto; right: 14px; width: 9px; height: 4px; content: url(../images/select-arrow.svg) ; background-repeat: no-repeat; background-position: center; transform-origin: center; transform: rotate(0deg); transition: all 0.4s ease-in-out; } .newsFilter .select.open .infoBtn:after { top: 26px; transform: rotate(-180deg); } /* News Filter Dropdown */ .newsFilter .select ul.categoryDropdown { position: absolute; top: 96%; left: -1px; width: 100.75%; display: none; color: var(--color4); background-color: var(--white); z-index: 999; padding: 3px 0 10px 7px; margin: 0; list-style-type: none; border: 1px solid #A2A4A333; border-top: none; box-shadow: 0 8px 6px rgba(0, 0, 0, .29); } .newsFilter .select ul.categoryDropdown > li { margin-bottom: 0; } .newsFilter .select ul.categoryDropdown a { display: inline-block; font-weight: 400; line-height: 1.4; margin-bottom: 10px; padding: 2px 23px; color: var(--color4); text-decoration: none; } .newsFilter .select ul.categoryDropdown a:hover, .newsFilter .select ul.categoryDropdown a:focus { color: var(--color1); } /* News Category Widget */ .sideBar .newsWidget h2 { text-align: left; } .columns > .newsWidget .wrapper > h2 { margin-bottom: 22px; } .sideBar .newsWidget h2:after { display: none; } .sideBar .newsWidget article h2 { margin-bottom: 33px; } .sideBar .newsWidget article h2, .sideBar .newsWidget article h2 a { color: var(--color4); font-family: var(--bodyFont); font-size: 1.5rem; line-height: 1.25; text-decoration: none; transition: all 0.4s ease-in-out; } .sideBar .newsWidget article .newsDescription h2 a:hover, .sideBar .newsWidget article .newsDescription h2 a:focus { color: var(--color1); } .sideBar .newsWidget .newsDescription .newsDate { display:block; font-size: 1.12rem; font-weight: 600; color: var(--color1); line-height: 1.2; margin-bottom: 6px; text-transform: none; } /* News Related Widget */ .sideBar .newsWidget.related.columns + .columns.columnBg { margin-top: 0; } .sideBar .newsWidget.related .grayBg { padding: 12px 28px; } .columns > .newsWidget.related .wrapper > h2 { margin-bottom: 10px; } .sideBar .newsWidget.related article { padding: 20px 0 10px 0; border-bottom: 1px solid #30303033; } .sideBar .newsWidget.related article:last-of-type { border-bottom: none; } .sideBar .newsWidget.related article h3 { margin-bottom: 11px; } .sideBar .newsWidget.related article h3, .sideBar .newsWidget article h3 a { color: var(--color4); font-family: var(--bodyFont); font-size: 1.15rem; letter-spacing: .05em; line-height: 1.32; text-decoration: none; text-transform: none; } .sideBar .newsWidget.related article h3 a:hover, .sideBar .newsWidget article h3 a:focus { color: var(--color1); transition: all 0.4s ease-in-out; } .sideBar .newsWidget.related .newsDate { display:block; font-size: 1.12rem; font-weight: 600; color: var(--color1); line-height: 1.2; margin-bottom: 8px; text-transform: none; } @media all and (min-width: 961px) { .news.landing .sectionNavColumn { margin-top: 83px; } } @media all and (min-width: 961px) and (max-width: 1100px) { .news.landing.detail .sectionNavColumn { margin-top: 0; } } @media all and (max-width: 960px) { /* News Listing */ .news.landing .impactLanding img { height: 350px; } .news.landing .impactLanding .caption h1 { margin-top: -60px; } .newsFilter { margin: 0 0 7px 0; } .newsListing .newsItems { padding: 0 0 35px 0; } /* News Listing Article Content */ .newsListings { padding: 0; } .articleListing .newsDescription { padding: 15px 0 0 0; } .articleListing .newsDescription p:last-child { margin: 0 0 12px 0; } /* News Category Widget */ .sideBar .newsWidget { padding: 0 20px; } /* News Related Widget */ .sideBar .newsWidget.related { padding: 0 10px; } } @media all and (min-width:581px) { /* News Listing Article Content */ .articleListing .newsImage { margin-right: 2.5%; } .articleListing a.ctaLink { display: none; } } @media all and (max-width: 580px) { /* News Listing */ .news.landing .impactLanding img { height: 250px; } .news.landing .impactLanding .caption h1 { margin-top: -38px; } .newsListing.interior .sectionNavColumn { margin: 5px 0 50px 0; } /* News Listing Article Content */ .articleListing { display: flex; flex-flow: column wrap; padding-top: 30px; margin: 25px 0 0 0; border-top: 1px solid var(--color4); } .articleListing:first-child { padding-top: 0; border-top: none; } .articleListing h2.newsTitle { line-height: 1.1; margin-bottom: 16px; } .articleListing h2.newsTitle:after { bottom: -28px; } .articleListing .newsDescription { display: flex; flex-flow: row wrap; width: 100%; padding: 0; border-top: none; } .articleListing .newsImage { width: 100%; max-width: 100%; height: 100%; float: none; display: flex; flex-flow: row wrap; } .articleListing .wysiwygContent p { display: none; } .articleListing .newsThumb { max-height: none; max-width: 100%; } .articleListing .newsThumb img { max-height: none; } .articleListing a.ctaLink { margin-top: 28px; } /* News Category Widget */ .newsWidget .newsImage img { width: 100%; } } /* ============================ NEWS FEATURED STORY * ============================*/ .newsGalleryWrapper { overflow-y: hidden; } .newsGallery { position: relative; background: var(--white); width: 100%; max-height: 614px; max-width: 1516px; padding: 0; margin: 45px auto 0 auto; } .newsGallery .slick-slide { display: flex; width: 100%; flex-direction: column; } .newsGallery .caption { /*display: none;*/ } /* News Gallery Controls */ .newsGallery ul.slick-dots { width: 70%; bottom: 10px; left: 0; right: auto; margin: 0; text-align: left; } .newsGallery ul.slick-dots .slick-sr-only { color: var(--color4); } .newsGallery ul.slick-dots > li { position: relative; } .newsGallery ul.slick-dots > li button { } .newsGallery ul.slick-dots > li:hover button, .newsGallery ul.slick-dots > li button:focus { } .newsGallery ul.slick-dots > li.slick-active button { } .newsGallery .slick-autoplay-toggle-button { bottom: 36px; left: 15px; right: auto; width: auto; max-width: none; margin: 0; } .appendNewsGalleryArrows .slick-prev, .appendNewsGalleryArrows .slick-next { top: 14px; width: 44px; height: 44px; background-color: #202020; } .appendnewsGalleryArrows .slick-prev:hover, .appendNewsGalleryArrows .slick-prev:focus, .appendNewsGalleryArrows .slick-next:hover, .appendNewsGalleryArrows .slick-next:focus { background-color: #545454; } .appendNewsGalleryArrows .slick-prev { left: auto; right: 49px; } .appendNewsGalleryArrows .slick-next { left: auto; right: 0; } @media all and (max-width: 960px){ .newsGallery { max-height: none; margin: 24px auto 42px auto; } .newsGallery .slick-slider { max-height: 100%; } .newsGallery .slick-list { margin-bottom: 0; } .newsGallery .slick-track { display: flex; } .newsGallery .slick-initialized .slick-slide, .newsGallery .slick-slide { display: flex; height: inherit; } .newsGallery .slick-slide > div { height: 100%; } .newsGallery .slick-initialized .caption { bottom: auto; max-height: 100%; } .newsGallery .slick-slide > div, .newsGallery .slick-slide > div > div { display: flex !important; max-height:100%; } .newsGallery .slick-initialized .caption .wrapper.newsGalleryCaption { position: relative; bottom: auto; } .newsGallery ul.slick-dots { bottom: -35px; left: 15px; } } @media all and (max-width: 580px){ .appendNewsGalleryArrows .slick-prev, .appendNewsGalleryArrows .slick-next { top: 10px; width: 23px; height: 23px; background-size: 20%; } .appendNewsGalleryArrows .slick-prev { right: 28px; } } /* News Featured Story Article*/ .newsFeaturedStory { display: flex; position: relative; overflow: hidden; width: 100%; min-height: 416px; margin: 15px auto 48px auto; padding: 0; } .newsFeaturedStory > img { display: block; position: absolute; top: 0; bottom: 0; left: 0; right: auto; width: 53%; max-width: 53%; height: 100%; min-height: 402px; object-fit: cover; margin: 0; } .newsFeaturedStory .caption { display: flex; flex: auto; position: relative; width: 100%; max-width: 47%; margin: 0 0 0 auto; padding: 0; z-index: 1; } .newsFeaturedStory .caption > .wrapper > .overlay { display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; z-index: 0; } .newsFeaturedStory .caption > .wrapper { display: flex; background-image: url(../images/news-featured-bg.jpg) ; background-repeat: no-repeat; background-position: left bottom; } .newsFeaturedStory .caption .wrapper .right { position: relative; max-width: 100%; width: 100%; padding: 35px 50px; z-index: 1; display: -ms-flexbox; display: flex; align-items: start; flex-direction: column; } .newsFeaturedStory .caption .wrapper h2 { font-size: 2.25rem; font-weight: 500; color: var(--color1); line-height: 1.2; margin: 5px 0 15px 0; } .newsFeaturedStory .caption .wrapper .subtext { font-size: 1rem; font-weight: 400; color: var(--color4); line-height: 1.55; padding: 0; margin-bottom: 20px; } .newsFeaturedStory .subtext p { margin-bottom: 28px; } .newsFeaturedStory h2 a {color: var(--color1); text-decoration: none; font-weight: 500;} .newsFeaturedStory h2 a:hover {text-decoration: underline;} .newsFeaturedStory .newsOverlay { color: var(--white); font-size: 1.05rem; font-weight: 500; background-color: var(--color1); padding: 1px 13px; margin: 0 0 11px 0; } .newsDateOverlay { position: absolute; top: 0; bottom: auto; left: 0; right: auto; color: var(--white); font-size: .8rem; font-weight: 500; text-align: center; text-transform: uppercase; background-color: var(--color1); padding: 14px 14px 12px 14px; margin: 0; box-shadow: 1px 3px 6px rgba(0, 0, 0, .26); z-index: 1; } .newsDateOverlay .month { font-size: 1.55rem; font-weight: 600; line-height: 1; margin: 0 0 3px 0; } .newsDateOverlay .day { font-size: 1.55rem; font-weight: 600; line-height: 1; } .newsFeaturedStory span.newsDate { font-size: 1.01rem; font-weight: 500; } @media all and (max-width: 960px) { .newsFeaturedStory { flex-direction: column; height: auto; min-height: auto; margin: 15px auto 0 auto; } .newsFeaturedStory > img { position: relative; max-width: 100%; width: 100%; height: auto; min-height: 0; max-height: none; } .newsFeaturedStory .caption { max-width: 100%; height: auto; margin: 0; } .newsFeaturedStory .caption .wrapper { height: 100%; margin: auto; } .newsFeaturedStory .caption .wrapper .right { padding: 32px 22px; } .newsFeaturedStory .caption .wrapper h2 { width: 100%; line-height: 1.12; } .newsFeaturedStory .newsOverlay { padding: 2px 14px; margin: 0 0 15px 0; } .newsFeaturedStory .caption .wrapper .subtext { margin-bottom: 0; } } @media all and (max-width: 580px){ .newsFeaturedStory .caption .wrapper .right { width: 100%; } } /* ============================ HH NEWS LISTING * ============================*/ /* HH News Featured Area */ .section.hh-news.hh-module .hot-post { margin-bottom: 0; } .hh-module .post-meta span::after { content: "-"; } .hh-module .post-category span, .hh-module .post-category a { color: var(--color4); font-weight: 600; font-size: 1rem; text-transform: none; } /* HH News Listing Item */ .hh-module .post .post-title, .hh-module .post .post-title.title-lg { font-family: var(--bodyFont); font-size: 1.5rem; font-weight: 600; line-height: 1.25; margin-bottom: 36px; } .hh-module .post .post-title.title-lg { margin-bottom: 0; } .hh-module .post .post-title:after { position: absolute; top: auto; bottom: -18px; left: 0; right: auto; content: ""; width: 122px; height: 3px; background-color: var(--color2); } .hh-module .post .post-title.title-lg:after { display: none; } .hh-module .post .post-title a { display: block; color: var(--color4); text-decoration: none; margin-bottom: 0; transition: all 0.4s ease-in-out; } .hh-module .post .post-title a:hover, .hh-module .post .post-title a:focus { color: var(--color1); } .hh-module .section-title .title { font-family: var(--headingFont); font-size: 2.82rem; line-height: 1.15; margin-bottom: 10px; font-weight: 400; text-transform: none; } .hh-module .post.post-row .post-body { padding: 23px 0 0 0; border-top: 1px solid #30303080; } .hh-module .post-meta span { color: var(--color4); font-size: 1.2rem; text-transform: none; font-weight: 600; } .hh-module .post .post-body p { font-size: 1.12rem; line-height: 1.4; margin: 18px 0; } /* HH News Listing Side Bar */ .hh-module .aside-widget .columns.color1:before, .landing .hh-module .aside-widget .columns.columnBg > .wrapper:before { display: none; } .landing .hh-module .aside-widget .columns.columnBg { padding: 26px 20px; } .hh-module .aside-widget .section-title .title, .hh-module .aside-widget h2 { font-size: 2.25rem; line-height: 1.1; text-align: center; margin-bottom: 0; } .hh-module .aside-widget .columns h2:after { position: absolute; top: auto; bottom: -14px; left: 0; right: 0; content: ""; width: 122px; height: 3px; margin: 0 auto; background-color: var(--color2); } .hh-module .category-widget ul li a { text-transform: none; font-weight: 600; color: var(--color4); } .hh-module .newsletter-widget { padding: 0 30px 30px; border-left: none; border-right: none; } .hh-module .aside-widget:last-child .newsletter-widget { border-bottom: none; } .hh-module .newsletter-widget:after { display: none; } .hh-module .aside-widget h3, .hh-module .aside-widget .columns.columnBg .wrapper h3 { font-size: 1.12rem; text-transform: uppercase; padding: 0; margin-bottom: 12px; } .hh-module .aside-widget h3:before, .hh-module .aside-widget .columns.columnBg .wrapper h3:before { display: none; } .hh-module .aside-widget .columnBg .wrapper { padding-left: 0; padding-right: 0; } /* HH News Listing CTA Button Base */ .hh-module a.secondary-button { position: relative; display: inline-flex; justify-content: space-around; min-width: 148px; font-size: .95rem; font-weight: 600; color: var(--color4); text-align: center; text-transform: uppercase; line-height: 1.1; background-color: var(--color2); border: 1px solid var(--color2); box-shadow: none; text-decoration: none; margin: 0 0 20px 0; padding: 13px 30px 12px 30px; transition: all 0.4s ease-in-out; } .hh-module a.secondary-button:hover, .hh-module a.secondary-button:focus { color: var(--color4); background-color: var(--color2); padding: 13px 42px 12px 18px; } .hh-module a.secondary-button:after { position: absolute; top: 0; bottom: 0; right: 15px; width: 12px; height: 12px; content: ""; margin: auto 0; background-image: url(../images/cta-button-arrow-dark-gray.svg) ; background-repeat: no-repeat; background-position: center; transition: all 0.4s ease-in-out; opacity: 0; } .hh-module a.secondary-button:hover:after, .hh-module a.secondary-button:focus:after { opacity: 1; } @media all and (min-width: 1440px) { .section.hh-news.hh-module > .container { width: 1420px; margin-top: 30px; } } @media all and (min-width: 992px) { /* HH News Listing Side Bar */ .section.hh-news.hh-module .col-md-4:not(.hot-post-right) { margin-top: 70px; } .hh-module .aside-widget { max-width: 75%; margin-right: 0; margin-left: auto; } } @media all and (max-width: 580px) { /* HH News Listing Item */ .section.hh-news.hh-module { padding-left: 20px; padding-right: 20px; } .hh-module .post.post-row .post-img { float: none; width: 100%; } .hh-module .post.post-row .post-body { width: 100%; margin-left: auto; margin-right: auto; } } /* ============================ NEWS DETAIL * ============================*/ .news.detail a.ctaLink.backLink { margin: 77px 0 18px 0; } .news.detail .newsListing.wrapper { display: block; } .news.detail h1 { position: relative; display: block; width: auto; color: var(--color1); font-size: 2.82rem; font-weight: 400; line-height: 1.15; margin-bottom: 25px; } /* News Detail Date and Category */ .newsInformation { position: relative; font-size: 1.12rem; font-weight: 600; line-height: 1.4; margin: 0 0 57px 0; text-transform: uppercase; } .newsInformation:after { position: absolute; top: auto; bottom: -30px; left: 0; right: auto; content: ""; width: 122px; height: 3px; background-color: var(--color2); } .newsInformation .spacer { padding: 0 5px; } .newsInformation sup { font-size: .7rem; } .newsContent { padding: 0 0 80px 0; } .news.detail .newsFilter { margin: 0; } /* News Article Image */ .newsArticleImage { margin-bottom: 40px; } .news .interiorContent .newsContent .newsArticleImage img { margin-bottom: 0; } figure.newsArticleImage > figcaption { margin-bottom: 0; } /* ShareThis */ #st-cmp-v2, #st-1 .st-btn[data-network='email'], .popup_popup { display: none !important; } @media all and (max-width: 1480px) { /* Spacing for News Detail Top Section */ .news.detail a.ctaLink.backLink, .news.detail h1, .newsInformation, .shareName, .sharethis-inline-share-buttons { margin-left: 20px; } } @media all and (min-width: 1100px) { .news.landing.detail .sectionNavColumn { margin-top: -68px; } } @media all and (min-width: 961px) { .shareName, .sharethis-inline-share-buttons, #st-1.sharethis-inline-share-buttons { margin-right: 4.5%; width: 69.5%; } .news.detail h1, .newsInformation { margin-right: 4.5%; width: 76.5%; } } @media all and (max-width: 960px) { .news.detail a.ctaLink.backLink { margin-top: 35px; margin-bottom: 18px; } .newsContent { padding: 0 0 20px 0; } } @media all and (max-width: 580px) { .news.detail h1 { font-size: 2.25rem; line-height: 1.12; } } /* ShareThis*/ .shareName { font-size: 1.12rem; font-weight: 600; text-transform: uppercase; margin-bottom: 13px; } .sharethis-inline-share-buttons, #st-1.sharethis-inline-share-buttons { text-align: left; } /* ShareThis Privacy Box Overrides */ .sharethis-inline-share-buttons { margin-bottom: 20px; } #st-cmp-v2 .st-cmp-app .st-cmp-content h1 { color: var(--color1) !important; text-transform: none !important; } #st-cmp-v2 .st-cmp-app .st-cmp-content a { color: var(--color1) !important; text-decoration: underline; font-weight: 600; } #st-cmp-v2 .st-cmp-app .st-button .st-button-inner { background: var(--color2) !important; border: 1px solid var(--color2) !important; border-radius: 0 !important; color: var(--color4) !important; } #st-cmp-v2 .st-cmp-app .st-switch .slider[data-checked] { background-color: var(--color2) !important; } #st-cmp-v2 .st-cmp-app .st-cmp-settings { font-weight: 600; background-color: var(--color2) !important; color: var(--color4) !important; border-radius: 0 !important; } #st-1 .st-btn[data-network='whatsapp'] > span, #st-1 .st-btn[data-network='sharethis'] > span { color: var(--color4) !important; } #st-cmp-v2 .st-cmp-app { position: absolute !important; } #st-cmp-v2 .st-cmp-app .st-cmp-content { position: relative !important; height: auto !important; top: 0 !important; transform: translate(-50%, 5%) !important; } #st-cmp-v2 .st-cmp-app .st-cmp-content h1 { font-size: 1.25rem !important; padding: 5px 10px !important; text-transform: none !important; font-weight: 600 !important; background-color: var(--gray); } #st-cmp-v2 .st-cmp-app .st-cmp-content h2 { margin: 32px 0 0 10px !important; font-size: 1.2rem !important; } #st-cmp-v2 .st-cmp-app .st-cmp-content .st-cmp-selection-cards { overflow: unset !important; max-height: none !important; } #st-cmp-v2 .st-cmp-app .st-cmp-content .st-cmp-disclaimer { overflow: unset !important; height: auto !important; } #st-cmp-v2 .st-cmp-app .st-cmp-content ul { margin: 10px 4% !important; } @media (max-height: 1000px) { #st-cmp-v2 .st-cmp-app .st-cmp-content .st-cmp-selection-cards { max-height: none !important; } #st-cmp-v2 .st-cmp-app .st-cmp-content .st-cmp-disclaimer { height: auto !important; } } /* ============================ CUSTOM RESUABLE MIX FILTERS * ============================*/ /* Program Dropdown */ select.categoryDropdown::-ms-expand { display: none; } select.categoryDropdown { font-size: 1rem; width: 100%; padding: 0 15px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url(../images/select-arrow.svg) ; background-repeat: no-repeat; background-position: right 14px center; } select.categoryDropdown { min-height: 50px; color: var(--color4); background-color: var(--white); border: 1px solid #A2A4A333; box-shadow: 0 3px 6px rgba(0, 0, 0, .29); } select.categoryDropdown:focus { color:var(--color4); background-color: var(--white); border: 1px solid var(--color4); } .categoryDropdown option { color:var(--color4); text-transform: none; background-color: var(--white); font-weight: normal; font-style: normal; } /* Program Search */ .columns .searchBoxWrap > #programSearchBoxWrapper { background-color: var(--white); border: 1px solid #A2A4A333; box-shadow: 0 3px 6px rgba(0, 0, 0, .29); } .searchBoxWrap .filterIcon { float: right; position: relative; width: 34px; height: 34px; padding: 0; margin: 6px 8px; color: var(--color4); background-color: var(--white); background-image: url(../images/search-filter-icon.svg) ; background-repeat: no-repeat; background-position: center; transition: all 0.4s ease-in-out; } .searchBoxWrap .filterIcon .visuallyhidden { color: var(--color4); } input[type=text].searchFiltersBox { width: 90%; height: 45px; font-family: var(--bodyFont); font-size: 1rem; color: var(--color4); background-color: var(--white); padding: 5px 15px; border: none; } input[type=text].searchFiltersBox::placeholder, input[type=text].searchFiltersBox::-webkit-input-placeholder, .input[type=text].searchFiltersBox::-moz-placeholder, input[type=text].searchFiltersBox:-ms-input-placeholder, input[type=text].searchFiltersBox:-moz-placeholder { color: var(--color4); } .no-results { display: none; } .mixitup-container-failed > .no-results { display: block; color: var(--color1); font-weight: 600; } button.clearFilters { display: flex; align-self: flex-end; max-width: 100px; width: auto; color: var(--color1); font-family: var(--bodyFont); font-size: 1rem; font-weight: 600; text-align: right; text-decoration: underline; padding: 5px 0 5px 5px; margin: 3px 0; background-color: transparent; border: 1px solid transparent; cursor: pointer; } button.clearFilters:hover, button.clearFilters:focus { color: var(--color4); } /* ============================ PROGRAMS LISTING * ============================*/ .programsListing.landing .columns.programs { padding-bottom: 10px; } .programsListing.landing .columns.programs .wrapper { max-width: 1715px; } .programsListing.landing .impactLanding img { height: 450px; } .programsListing.landing .impactLanding .caption h1 { margin-top: -70px; } .programsListing.landing .intro h2 { margin-bottom: 30px; } .programsListing.landing .intro h2:after { position: absolute; top: auto; bottom: -14px; left: 0; right: auto; content: ""; width: 122px; height: 3px; background-color: var(--color2); } .programsListing.landing .center .intro h2:after, .programsListing.landing .intro *[style="text-align: center;"] h2:after { right: 0; margin-left: auto; margin-right: auto; } .programsListing.landing .columns.intro .wrapper { max-width: 1190px; padding-top: 68px; padding-bottom: 36px; } /* Program Filters Box */ .filterIntro { font-size: 1.25rem; font-weight: 700; color: var(--color4); line-height: 1.1; text-transform: uppercase; margin: 0 auto 20px auto; } #programFilters { max-width: 1125px; margin: 0 auto; } .programsFilter { padding: 0 0 43px 0; } .programsListing.landing .columns .three.programsFilter { max-width: 885px; margin: 0 auto; gap: 2.5rem; } .programsListing input::placeholder {color: var(--color4); opacity: 1;} /* Program Card */ .programsListing.landing .columns .three.programContainer { gap: 30px; column-gap: 6%; } .programCard { position: relative; display: flex; flex-flow: column wrap; min-height: 120px; height: 100%; } .programCard > a { display: flex; flex-direction: column; flex: auto; justify-content: center; width: 100%; height: 100%; color: var(--color4); background-color: #F4F4F480; border-left: 4px solid var(--color1); text-decoration: none; padding: 15px 25px; transition: all 0.4s ease-in-out; } .programCard > a:hover, .programCard > a:focus { color: var(--white); background-color: var(--color1); border-left: 4px solid var(--color2); } .programCard .programNameGroup { display: block; width: 100%; } .programCard .programName { font-family: var(--headingFont); font-size: 1.48rem; color: var(--color1); font-weight: 400; line-height: 1.15; margin: 0 14px 5px 0; } .programCard > a:hover .programName, .programCard > a:focus .programName { color: var(--white); } .programCard .programCredentials { font-size: 1rem; color: var(--color4); text-transform: uppercase; } .programCard > a:hover .programCredentials, .programCard > a:focus .programCredentials { color: var(--white); } .programCard .programSchool { display: block; width: 100%; font-size: 1.18rem; font-weight: 600; color: var(--color4); line-height: 1.15; text-transform: uppercase; padding: 10px 0 0 0; } .programCard > a:hover .programSchool, .programCard > a:focus .programSchool { color: var(--white); } .programCard .programNote { display: block; width: 100%; color: var(--color1); font-size: 1.06rem; font-weight: 600; font-style: italic; line-height: 1.15; padding: 8px 0 0 0; } .programCard > a:hover .programNote, .programCard > a:focus .programNote { color: var(--white); } @media all and (max-width: 1280px) { .programsListing.landing .impactLanding img { height: 350px; } } @media all and (max-width: 960px) { .programsListing.landing .impactLanding img { height: 250px; } .programsListing.landing .impactLanding .caption h1 { margin-top: -60px; } .programsListing.landing .columns .three.programsFilter { gap: 1.15rem; padding: 0 20px 30px 20px; } .programsListing.landing .columns .three.programContainer { grid-template-columns: repeat(2, 1fr); } .programsListing.landing .columns.programs { padding-bottom: 0; } button.clearFilters { padding: 10px 0 10px 5px; } } @media all and (min-width:581px) and (max-width:960px) { .programsListing.landing .columns .three .cell > * { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 100%; } button.clearFilters { float: right; } } @media all and (max-width: 580px) { .programsListing.landing .impactLanding .caption h1 { margin-top: -38px; } .programsListing.landing .columns .three.programContainer { grid-template-columns: 1fr; } input[type=text].searchFiltersBox { width: 83%; } .programCard > a { padding: 30px 25px; } } /* ============================ LANDING/INTERIOR MAIN CONTENT * ============================*/ .mainContent h1 { color: var(--color1); font-size: 3rem; } .columns > .wrapper > h2 { margin-bottom: 30px; } .landing .columns.columnBg { position: relative; max-width: 1640px; margin: 35px auto; padding: 53px 35px 35px 35px; background-attachment: fixed; } .landing .fullWidth + .columns.columnBg { margin: 63px auto 35px auto; } .landing .columns.columnBg > .wrapper:before, .interior .columns.columnBg > .wrapper:before { position: absolute; content: ""; top: 0; bottom: auto; left: 0; right: 0; width: 100%; height: 10px; background-color: var(--color2); z-index: 2; } .columns.columnBg.color1 h2, .columns.columnBg.color1 h3, .columns.columnBg.color1 h4, .columns.columnBg.color1 h5.columns, .columnBg.color1 h6 { color: var(--white); } .landing .columns.columnBg > .wrapper > h2 { margin-bottom: 30px; text-align: center; } .interior .columns.columnBg > .wrapper > h2 { margin-bottom: 30px; text-align: center; } .landing .columns .three { gap: 10%; } .columns.columnBg .wrapper h3 { position: relative; font-size: 1.5rem; font-weight: 600; padding: 0 15px; margin-bottom: 15px; } .interior .columns.columnBg .wrapper h3 { padding: 0 0 0 15px; } .columns.columnBg .wrapper h3:before { display: inline-block; content:""; position: absolute; top: 2px; left: 0; right: auto; width: 1px; height: 95%; background-color: var(--color2); } .landing .columns .wrapper, .interior .columns .wrapper { max-width: 1465px; padding: 30px 35px; z-index: 1; } .interior .columns .wrapper { padding: 35px 0 0 0; } .landing .columns .wrapper .one .content p { padding-right: 15%; } .landing .contentWidth .wrapper .one .content p { padding-right: 0; } .interior .contentWidth .wrapper .one .content p { padding-right: 0; } .landing .columns .wrapper .one .content *[style="text-align: center;"] p, .landing .columns .wrapper .one .content p[style="text-align: center;"] { padding-right: 0; } .landing .columns .wrapper .one .content *[style="text-align: center;"] { width: 75%; margin-left: auto; margin-right: auto; } .landing .columns.columnBg .wrapper .one .content *[style="text-align: center;"] { width: 80%; } .landing .columns .twoColumn .wrapper { padding: 35px 20px 35px 20px; } .interior .columns.columnBg { padding: 40px 50px; margin-top: 35px; margin-bottom: 35px; } .columns.columnBg { width: 100%; } .columns.color1, .columns .cell.color1 { background-color: var(--color1); background-size: cover; background-position: 50%;} .columns.color1.bgimg:before, .columns .cell.color1.bgimg::before { background-color: var(--color1Trans); } .columns.color1:before, .columns .cell.color1:before { position: absolute; top: 0; bottom: 0; left: 0; right: 0; content: ""; } .columns.color1 .content, .columns .cell.color1 .content, .color1Bg .content { color: var(--white); } .columns.color1 > .wrapper { padding-top: 0; padding-bottom: 0; } .columns .content { display: block; padding: 0; } .columns .content hr { display: block; width: 150px; height: 1px; border: 2px solid var(--color2); border-radius: 0; padding: 0; margin: 20px auto 30px auto; } .landing .columns .one .content { width: 100%; /*max-width: 1050px;*/ margin: 0 auto; } .columns .cell.color1 .content { padding: 20px; } .columns .two .cell.bg .content, .columns .three .cell.bg .content { padding: 20px; } .columns .cell.color1 .content a.ctaLink, .columns .cell.color1 .content, .columns .cell.color1 .content * { color: var(--white); } .columns p:last-child { margin-bottom: 0; } .columns .wrapper > .oneTwo, .columns .wrapper > .twoOne { padding-bottom: 43px; margin-bottom: 48px; border-bottom: 1px solid rgba(48, 48, 48, .5); } .columns .wrapper > .oneTwo:last-child, .columns .wrapper > .twoOne:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: none; } .columns .wrapper > .oneTwo .content, .columns .wrapper > .twoOne .content { max-width: 97%; height: 100%; font-size: 1.13rem; line-height: 1.4; } .columns .wrapper > .oneTwo.one .content, .columns .wrapper > .twoOne.one .content { max-width: 100%; } .columns .oneTwo h2.title, .columns .oneTwo h3.title, .columns .twoOne h2.title, .columns .twoOne h3.title { position: relative; font-size: 1.5rem; color: var(--color1); font-weight: 600; margin: 7px 0 49px 0; } .columns .oneTwo h2.title:after, .columns .oneTwo h3.title:after, .columns .twoOne h2.title:after, .columns .twoOne h3.title:after { position: absolute; top: auto; bottom: -23px; left: 0; right: auto; content: ""; width: 122px; height: 3px; background-color: var(--color2); } .columns .oneTwo .ctaLink:last-of-type, .columns .twoOne .ctaLink:last-of-type { margin-bottom: 15px; margin-right: 55px; } .columns .oneTwo .ctaButton:last-of-type, .columns .twoOne .ctaButton:last-of-type { margin-bottom: 20px; } .columns .wrapper .oneTwo + .columns .wrapper .oneTwo, .columns .wrapper .twoOne + .columns .wrapper .twoOne { margin-bottom: 25px; } .columns.twoColumn .wrapper .two .content > p { margin-bottom: 23px; } .columns .wrapper .three .content > p { font-size: 1.1rem; line-height: 1.4; padding-right: 9%; margin-bottom: 15px; } .columns .three .cell .content { margin-top: 22px; } .twoColumn .wrapper .two .cell .content { margin-top: 30px; } .landing .twoColumn .wrapper .two .cell:first-child .content { padding: 4% 18% 0 0; } .landing .twoColumn .wrapper .two .cell:first-child h2 { padding-right: 11%; } .landing .twoColumn .wrapper .two .cell:last-child .content { padding: 4% 0 0 18%; } .landing .twoColumn .wrapper .two .cell:last-child h2 { padding-right: 13%; } .columns + .columns.columnBg, .gallery.cell + .accordion, .gallery.cell + .columns.columnBg, .columns.columnBg + .gallery.cell, .accordion + .columns.columnBg, .columns.columnBg + .columns.columnBg, .gallery.cell + .gallery.cell, .accordion + .gallery.cell { margin-top: 25px ; } /* Image Zoom */ .imgZoom { display: flex; flex-direction: column; overflow: hidden; width: 100%; } .imgZoom img { transition: all 0.4s ease-in-out; transform-origin: center; } .imgZoom img:hover, .fullWidth:hover .imgZoom img { transform: scale(1.05); } .columns:not(.sharedNews) .wrapper .cell .imgZoom img, .columns:not(.sharedNews) .wrapper .cell .imgZoom img:hover, .columns .wrapper .cell .videoContent .imgZoom img, .columns .wrapper .cell .videoContent .imgZoom img:hover, .columns .wrapper .cell .imgZoom .videoContent img, .columns .wrapper .cell .imgZoom .videoContent img:hover { transition: none; transform: none; } .columns .wrapper .cell .imgZoom a .imageCTA { overflow: hidden; } .columns .wrapper .cell .imgZoom a .imageCTA img { transition: all 0.4s ease-in-out; } .columns .wrapper .cell .imgZoom a:hover .imageCTA img, .columns .wrapper .cell .imgZoom a:focus .imageCTA img { transform: scale(1.05); transition: all 0.4s ease-in-out; } .columns .wrapper .cell .imgZoom, .columns .wrapper .cell .imgZoom .videoContent { width: 100%; line-height: 1; margin-bottom: 0; } .columns .wrapper .cell .imgZoom img, .columns .wrapper .cell .imgZoom .videoContent a { width: 100%; object-fit: cover; display: block; } .imgZoom + .content { margin-top: 20px; } .columns .imageCTA { position: relative; display: block; } .columns .imageCTA:after { content: ""; position: absolute; top: auto; bottom: 0; left: auto; right: 0; width: 29px; height: 29px; background-image: url(../images/link-arrow-right.svg) ; background-repeat: no-repeat; background-size: 100%; } .columns .one .imageCTA:after, .columns .two .imageCTA:after { background-image: url(../images/link-arrow-right-large.svg) ; width: 44px; height: 44px; } @media all and (max-width: 1540px) { .landing .twoColumn .wrapper .two .cell:first-child .content { padding: 2% 5% 0 0; } .landing .twoColumn .wrapper .two .cell:first-child h2 { padding-right: 0; } .landing .twoColumn .wrapper .two .cell:last-child .content { padding: 2% 0 0 5%; } .landing .twoColumn .wrapper .two .cell:last-child h2 { padding-right: 0; } } @media all and (max-width: 960px) { .interior .columns .wrapper { padding: 30px 35px; } .landing .columns .wrapper .one .content p { padding-right: 0; } .landing .columns .wrapper .one .content *[style="text-align: center;"], .interior .columns .wrapper .one .content *[style="text-align: center;"] { width: 100%; } .landing .columns.columnBg .wrapper .one .content *[style="text-align: center;"], .interior .columns.columnBg .wrapper .one .content *[style="text-align: center;"] { width: 100%; } .landing .twoColumn .wrapper .two .cell:last-child .content { padding: 2% 0 0 0; } .landing .columns .three { gap: 2rem; } .landing .fullWidth + .columns.columnBg { margin-top: 0; } .landing .columns.columnBg { padding: 53px 35px; } .columns.twoColumn .wrapper .cell .content {margin-top: 0;} .components:last-child { padding-bottom: 0; } .columns .oneTwo h2.title, .columns .oneTwo h3.title, .columns .twoOne h2.title, .columns .twoOne h3.title { margin: 7px 0 30px 0; } .columns .oneTwo h2.title:after, .columns .oneTwo h3.title:after, .columns .twoOne h2.title:after, .columns .twoOne h3.title:after { bottom: -17px; } .columns .wrapper > .oneTwo .content p:last-of-type, .columns .wrapper > .twoOne .content p:last-of-type { margin-bottom: 30px; } .columns .wrapper > .oneTwo, .columns .wrapper > .twoOne { padding-bottom: 13px; margin-bottom: 29px; } /* Image Zoom */ .columns .wrapper .two .cell .imgZoom, .columns .wrapper .oneTwo .cell .imgZoom, .columns .wrapper .twoOne .cell .imgZoom, .columns .wrapper .three .cell .imgZoom, .columns .wrapper .oneTwo .cell .imgZoom .videoContent, .columns .wrapper .twoOne .cell .imgZoom .videoContent, .columns .wrapper .two .cell .imgZoom .videoContent {height: auto; width: auto; } .columns .wrapper .two .cell .imgZoom img, .columns .wrapper .oneTwo .cell .imgZoom img, .columns .wrapper .twoOne .cell .imgZoom img, .columns .wrapper .three .cell .imgZoom img, .columns .wrapper .oneTwo .cell .imgZoom .videoContent a, .columns .wrapper .twoOne .cell .imgZoom .videoContent a, .columns .wrapper .two .cell .imgZoom .videoContent a { width: 100%; max-height: none; max-width: none; } .columns .wrapper .cell .imgZoom img:hover { transform: none; } .columns .one .imageCTA:after, .columns .two .imageCTA:after { background-image: url(../images/link-arrow-right.svg) ; width: 29px; height: 29px; } } @media all and (max-width: 580px) { .mainContent h1 { font-size: 2.5rem; } .landing .fullWidth + .columns.columnBg, .columns.columnBg { margin: 0 auto; } .landing .twoColumn .wrapper .two .cell:first-child .content, .landing .twoColumn .wrapper .two .cell:last-child .content { padding: 0; } .columns .wrapper .three .content > p { padding-right: 0; } /* Image Zoom */ .columns .wrapper .two .cell .imgZoom, .columns .wrapper .oneTwo .cell .imgZoom, .columns .wrapper .twoOne .cell .imgZoom, .columns .wrapper .three .cell .imgZoom, .columns .wrapper .oneTwo .cell .imgZoom .videoContent, .columns .wrapper .twoOne .cell .imgZoom .videoContent, .columns .wrapper .two .cell .imgZoom .videoContent {display: block; } .columns .wrapper .twoOne .cell .imgZoom { margin-bottom: 25px; } } /* ============================ LANDING MAIN CONTENT * ============================*/ .landing .mainContent > div:first-child.hoverColumns { padding-top: 0; } /* ============================ INTERIOR MAIN CONTENT * ============================*/ @media all and (max-width: 960px){ .landing .columns.color1 > .wrapper { padding: 0; } .interior .mainContent { padding: 20px 0 0 0; } .interior .columns.columnBg { padding: 25px 25px; } .interior .columns.columnBg .wrapper { padding: 25px 0; } .interior .columns.sideBar .wrapper { padding: 0; } .columns .two .content { padding-top: 0; } } /* ============================ VIDEO CONTENT OPTIONS * ============================*/ /* Video Options */ .videoContent { display: flex; flex-direction: column; margin-bottom: 0; position: relative; } .videoContent a.popupVideo { position: relative; display: block; } .videoContent .videoWrapper { position: relative; padding-bottom: 56.25%; padding-top: 20px; height: 0; } .videoContent .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .videoContent .videoButton { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 60px; height: 45px; background-color: var(--color1); background-image: url(../images/video-play-button.svg) ; background-repeat: no-repeat; background-position: center; transition: all 0.4s ease-in-out; z-index: 1; text-indent: -999999px; } .videoContent a:hover .videoButton, .videoContent a:focus .videoButton { background-color: var(--color1Trans); } @media all and (max-width: 960px) { /* Video Options */ .videoContent a.popupVideo img { max-width:100%; width: 100%; } } /* ============================ ACCORDIONS * ============================*/ /* Accordion */ .accordion { width: 100%; margin: 35px auto; } .landing .accordion { max-width: 1455px; padding-left: 15px; padding-right: 15px; } .accordion > .wrapper { display: flex; flex-direction: column; width: 100%; max-width: 1465px; padding: 0; margin: 0 auto; } .accordion > .wrapper > .subhead { padding-left: 15px; padding-right: 15px; margin: 0px 0 10px 0; } .accordion > .wrapper > .subhead:after { display: none; } .accordion > .wrapper > h2.title { position: relative; padding-left: 15px; padding-right: 15px; margin-bottom: 20px; } .accordion > .wrapper > h2.title:after { position: absolute; top: auto; bottom: -18px; left: 15px; right: auto; content: ""; width: 122px; height: 3px; background-color: var(--color2); } .accordion > .wrapper > h2.accordionRowTitle { position: relative; padding: 10px 0; margin-bottom: 0; } .accordion > .wrapper > h2.accordionRowTitle:before { content: ""; position: absolute; top: 0; bottom: auto; left: 0; right: 0; width: 98%; margin: 0 auto; border-top: 1px solid rgba(48, 48, 48, .5); } .accordion > .wrapper h2.accordionRowTitle:nth-of-type(1):before, .accordion > .wrapper h2.title + h2.accordionRowTitle:nth-of-type(2):before { border-top: 1px solid rgba(48, 48, 48, 0); } .accordion.focus { border-color: var(--color4); } .accordionTrigger { background: none; color: var(--color4); font-size: 1.5rem; font-weight: 700; line-height: 1.15; margin: 0; padding: 7px 14px; position: relative; text-align: left; width: 100%; transition: all 0.4s ease-in-out; cursor: pointer; } .accordionTrigger[aria-expanded="true"], .accordion button { border: none; } .accordion button::-moz-focus-inner { border: none; } .accordionTrigger[aria-expanded="true"] { border-bottom: none; background-color: var(--gray); margin-top: 14px; } .accordionTitle { position: relative; display: block; pointer-events: none; border: transparent 2px solid; padding: 9px 40px 9px 0; } .accordionTrigger:focus .accordionTitle { border-color: transparent; } .accordionPanel { margin: 0; padding: 12px 85px 12px 15px; } .accordionPanel[hidden] { display: none; } /* Accordion Expander Icon */ .accordion .accordionIcon { position: absolute; width: 30px; height: 30px; top: 0; bottom: auto; left: auto; right: 0; padding: 0; margin: 8px 0; cursor: pointer; z-index: 100; background-color: var(--color2); border: 1px solid transparent; } .accordion .accordionIcon:after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(0deg); transition: 0.4s cubic-bezier(0.2, 0.6, 0.3, 1.1); height: 2px; width: 16px; background: var(--color4); } .accordion .accordionIcon:before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(0deg); transition: 0.4s cubic-bezier(0.2, 0.6, 0.3, 1.1); height: 16px; width: 2px; background: var(--color4); } .accordion .accordionTrigger[aria-expanded="true"] .accordionIcon:before { transform: translate(-50%, -50%) rotate(180deg); width: 0; } .accordion .accordionTrigger[aria-expanded="true"] .accordionIcon:after { transform: translate(-50%, -50%) rotate(180deg); } @media all and (min-width: 961px) { .interior .accordion > .wrapper > .subhead { padding-left: 0; padding-right: 0; } .interior .accordion > .wrapper > h2.title { padding-left: 0; padding-right: 0; } .interior .accordion > .wrapper > h2.title:after { left: 0; } .interior .accordion > .wrapper > h2.accordionRowTitle:before { width: 100%; } .interior .accordionTrigger { padding: 7px 7px 7px 0; } .interior .accordionTrigger[aria-expanded="true"] { padding: 7px 7px 7px 14px; } } @media all and (max-width: 960px) { .accordion { margin: 35px auto 10px auto; } .interior .accordion { padding-left: 20px; padding-right: 20px; } .accordionTrigger { font-size: 1.12rem; } .accordion .accordionIcon { margin: 4px 0; } .accordionPanel { margin: 0; padding: 12px 15px; } } /* ============================ HOVER BOXES * ============================*/ .hoverColumns { position: relative; width: 100%; padding: 52px 38px 114px 38px; background-repeat: no-repeat; background-position: bottom center; } .hoverColumns > .overlay { display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; z-index: 0; } .interior .hoverColumns { padding: 40px 40px; } .hoverColumns.columns > .wrapper { position: relative; display: flex; flex-direction: column; max-width: 1400px; width: 100%; min-height: 425px; margin: 0 auto; padding: 0; } .hoverColumns.columns .three { gap: 3.25rem; } .interior .hoverColumns.columns .three { gap: 2.5rem; } .hoverColumns .hoverBlock { position: relative; min-height: 548px; background-color: var(--color4); } .hoverColumns .hoverBlock { min-height: 375px; } .hoverColumns .hoverImg { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; flex-basis: auto; overflow: hidden; } .hoverColumns .hoverImg img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; z-index: 0; } .hoverColumns .hoverBlock.cell { display: flex; flex-flow: column nowrap; } .hoverColumns .hoverBlock .hoverInner { display: flex; position: relative; width: 100%; flex-basis: auto; flex-grow: 1; opacity: 0; text-align: center; padding: 0; transition: all 0.4s ease-in-out; z-index: 1; } .hoverColumns .hoverBlock:hover .hoverInner, .hoverColumns .hoverBlock:focus .hoverInner, .hoverColumns .hoverBlock:focus-within .hoverInner { flex-grow: 0; height: 0; } .hoverColumns .hoverBlock .cardFront { position: relative; width: 100%; align-content: flex-end; padding: 20px 20px 42px 20px; color: var(--white); z-index: 1; transition: all 0.4s ease-in-out; } .hoverColumns .hoverBlock:hover .cardFront, .hoverColumns .hoverBlock:focus .cardFront, .hoverColumns .hoverBlock:focus-within .cardFront { flex-grow: 1; padding-bottom: 54px; } /* Hover Box Indicator */ .hoverColumns .hoverBlock .cardFront:after { content: url(../images/link-arrow-up.svg) ; position: absolute; top: auto; bottom: -16px; left: 0; right: 0; width: 44px; height: 44px; margin: 0 auto; opacity: 1; transition: all 0.4s ease-in-out; } .hoverColumns .hoverBlock:hover .cardFront:after, .hoverColumns .hoverBlock:focus .cardFront:after, .hoverColumns .hoverBlock:focus-within .cardFront:after { opacity: 0; } /* Hover Box Content */ .hoverColumns .hoverBlock .hoverTitle { font-size: 1.5rem; font-weight: 700; line-height: 1.05; text-transform: uppercase; margin: 0 0 11px 0; transition: all 0.4s ease-in-out; } .hoverColumns .hoverBlock .subtext { font-size: 1.1rem; font-weight: 400; line-height: 0; opacity: 0; padding: 0 14%; transition: all 0.4s ease-in-out; transform: scale(1,0); transform-origin: bottom; } .hoverColumns .hoverBlock .subtext p { margin-bottom: 0; } .hoverColumns .hoverBlock:hover .subtext, .hoverColumns .hoverBlock:focus .subtext, .hoverColumns .hoverBlock:focus-within .subtext { height: auto; line-height: 1.45; opacity: 1; padding: 7px 14%; transform: scale(1,1); } .hoverColumns .hoverBlock:hover .subtext p, .hoverColumns .hoverBlock:focus .subtext p, .hoverColumns .hoverBlock:focus-within .subtext p { margin-bottom: 14px; } /* Hover Box Gradient */ .hoverColumns .hoverBlock .imageGradient { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0); z-index: 1; transition: background 0.4s ease-in-out; } .hoverColumns .hoverBlock:hover .imageGradient, .hoverColumns .hoverBlock:focus .imageGradient, .hoverColumns .hoverBlock:focus-within .imageGradient { background: rgba(0,0,0,0.6); } .hoverColumns .hoverBlock .imageGradientFade { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.1) 40%,rgba(0,0,0,0.7) 100%); z-index: 1; transition: all 0.4s ease-in-out; } @media all and (min-width: 961px) { .landing .hoverColumns .hoverBlock .ctaButton { display: none; } .landing .hoverColumns .hoverBlock:hover .ctaButton, .landing .hoverColumns .hoverBlock:focus .ctaButton, .landing .hoverColumns .hoverBlock:focus-within .ctaButton { display: inline-block; } } @media all and (min-width: 961px) { .hoverColumns .two .hoverBlock { min-height: 534px; } .interior .hoverColumns .hoverBlock .ctaButton { display: none; } .interior .hoverColumns .hoverBlock:hover .ctaButton, .interior .hoverColumns .hoverBlock:focus .ctaButton, .interior .hoverColumns .hoverBlock:focus-within .ctaButton { display: inline-block; } } @media all and (max-width: 1280px) and (min-width: 961px) { .interior .hoverColumns.columns .three { grid-template-columns: 1fr; gap: 2rem; } .interior .hoverColumns .hoverBlock.cell { max-width: 480px; min-height: 400px; margin: 0 auto; } } @media all and (min-width: 581px) and (max-width: 960px) { .hoverColumns.columns .three .cell > * { max-width: 100%; } } @media all and (max-width: 960px) { .hoverColumns { padding: 40px 38px; } .hoverColumns .hoverBlock { min-height: 263px; } .hoverColumns.columns .three { grid-template-columns: 1fr 1fr 1fr; gap: 2.5rem; } .hoverColumns .hoverBlock .cardFront, .hoverColumns .hoverBlock:hover .cardFront, .hoverColumns .hoverBlock:focus .cardFront, .hoverColumns .hoverBlock:focus-within .cardFront { padding: 20px; } .hoverColumns .hoverBlock .hoverTitle { margin: 0 0 6px 0; } .hoverColumns .hoverBlock .subtext, .hoverColumns .hoverBlock:hover .subtext, .hoverColumns .hoverBlock:focus .subtext, .hoverColumns .hoverBlock:focus-within .subtext { visibility: visible; height: auto; font-size: 1rem; line-height: 1.25; opacity: 1; padding: 10px 0; transform: scale(1,1); } .hoverColumns .hoverBlock .subtext p, .hoverColumns .hoverBlock:hover .subtext p, .hoverColumns .hoverBlock:focus .subtext p, .hoverColumns .hoverBlock:focus-within .subtext p { margin-bottom: 22px; } /* Hover Box Gradient */ .hoverColumns .hoverBlock .imageGradient { background: rgba(0,0,0,0.6); } .hoverColumns .hoverBlock .imageGradientFade { display: none; } /* Hover Box Indicator */ .hoverColumns .hoverBlock .cardFront:after { display: none; } } @media all and (max-width: 767px) { .hoverColumns.columns .three { grid-template-columns: 1fr; } .hoverColumns .hoverBlock.cell { max-width: 480px; min-height: 400px; margin: 0 auto; } .hoverColumns.columns .three { gap: 2rem; } } @media all and (max-width: 580px) { .interior .hoverColumns { padding: 40px 20px; } .hoverColumns .hoverBlock.cell { min-height: 320px; } } @media all and (max-width: 480px) { .hoverColumns .hoverBlock.cell { min-height: 320px; } } /* ============================ FULL WIDTH CTA BANNER SLANTED * ============================*/ .fullWidth.columns { position: relative; background-color: var(--color4); } .fullWidth.columns > .wrapper { position: absolute; top: auto; bottom: 0; left: 0; right: auto; max-width: 815px; padding: 50px 20px 50px 13.5%; z-index: 3; } .fullWidth.columns .grayTriangle { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background-image: url(../images/cta-angle-gray-large.svg) ; background-repeat: no-repeat; background-position: left bottom; z-index: 2; } .fullWidth.columns > .imageGradient { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(84,84,84,0.8) 100%); opacity: .3; z-index: 1; } .fullWidth > img, .fullWidth > .imgZoom img { display: block; position: relative; width: 100%; min-height: 607px; max-height: 607px; object-fit: cover; object-position: top; z-index: 0; } .landing .fullWidth > img, .landing .fullWidth > .imgZoom img { min-height: 572px; max-height: 572px; } .fullWidth.columns .content { display: flex; flex-direction: column; color: var(--white); padding: 0; margin-bottom: 20px; } .fullWidth.columns .content h2 { font-family: var(--bodyFont); font-size: 3rem; font-weight: 700; color: var(--white); line-height: 1; text-transform: uppercase; padding: 0; margin: 28px 0; } .fullWidth.columns .content h2 .white, .columns .white { color: var(--white); } .fullWidth.columns .content h2 .yellow, .columns .yellow { color: var(--color2); } .fullWidth.columns .content .contentPanel { display: flex; flex-direction: row; } .fullWidth.columns .content .leftPanel { width: 58%; font-size: 1.13rem; line-height: 1.4; padding: 0 9% 0 0; } .fullWidth.columns .content .rightPanel { display: flex; width: 42%; padding: 0 15px; } .fullWidth .subtext { font-size: 1rem; color: var(--white); margin-bottom: 5px; } .fullWidth a.ctaButton { align-self: flex-end; } /* Full Width Video Button */ .fullWidth .videoContent { position: absolute; top: auto; bottom: 35px; left: auto; right: 7%; z-index: 3; } .fullWidth .videoContent .videoButton { position: relative; color: var(--white); } @media all and (max-width: 960px) { .fullWidth .videoContent { position: absolute; top: 30%; bottom: auto; left: 0; right: 0; } } @media all and (max-width: 580px) { .fullWidth.columns > .wrapper { padding: 35px 35px; } .fullWidth.columns .content .contentPanel { flex-direction: column; } .fullWidth.columns .content .leftPanel { width: 90%; } .fullWidth.columns .content .rightPanel { width: 100%; padding: 0; margin: 25px 0 0 0; } .fullWidth > img, .fullWidth > .imgZoom img { min-height: 917px; max-height: 917px; } /* Full Width Video Button */ .fullWidth .videoContent { top: 34%; } } /* ============================ CONTENT WIDTH CTA BANNER * ============================*/ .contentWidth.columns { position: relative; padding: 30px 30px; } .contentWidth.columns > .wrapper { max-width: 1046px; padding: 30px 35px; } .landing .contentWidth.columns > .wrapper { max-width: 1046px; padding: 35px 4% 30px 4%; } .contentWidth.columns .content { display: flex; flex-direction: column; padding: 0; } .landing .contentWidth.columns .content { font-size: 1.12rem; line-height: 1.4; } .contentWidth.columns .content h2 { font-size: 2.25rem; margin-bottom: 12px; } .contentWidth.columns .content p:last-of-type + a.ctaLink { margin-top: 0; } @media all and (max-width: 960px) { .contentWidth.columns { padding: 30px 15px; } .contentWidth.columns > .wrapper { padding: 30px 25px; } .landing .contentWidth.columns > .wrapper { padding: 30px 25px; } } /* ============================ IMAGE GALLERY SLIDER * ============================*/ .galleryWrapper { overflow-y: hidden; } .gallery { position: relative; background: var(--white); width: 100%; max-height: 614px; max-width: 1516px; margin: 45px auto 35px auto; } .interior .gallery { margin: 45px auto; } .gallery .slick-slide > div > div img { width: 100%; max-width: 100%; height: 100%; max-height: 577px; object-fit: cover; margin: 0 auto; object-position: 50% 40%; transform: scale(1);} .gallery .caption { /*display: none;*/ } .gallery .slick-slider { display: flex; flex-direction: column; width: 100%; margin-bottom: 0; max-height: 614px;} .gallery .slick-track { display: flex; width: 100%; } .gallery .slick-list { display: flex; min-height: 645px; margin-bottom: 45px; } .gallery .slick-slide > div, .gallery .slick-slide > div > div { height: 100%; max-height: 614px; } .gallery .slick-initialized .caption { position: absolute; bottom: 0; display: flex; align-items: flex-end; width: 100%; max-width: 1477px; height: 100%; margin: 0 auto; padding: 42px 40px 0 40px; z-index: 2; } .interior .gallery .slick-initialized .caption { bottom: 70px; } .gallery .slick-initialized .caption.left .wrapper { display: flex; max-width: 1477px; width: 100%; height: 100%; justify-content: start; } .gallery .slick-initialized .caption.right .wrapper { display: flex; max-width: 1477px; width: 100%; height: 100%; justify-content: end; } .gallery .slick-initialized .caption .wrapper.galleryCaption { position: absolute; bottom: 30px; max-width: 1477px; display: flex; align-items: center; } .gallery .slick-initialized .caption .wrapper .captionInner { display: flex; flex-direction: column; align-items: start; position: relative; max-width: 711px; width: 100%; min-height: 362px; padding: 32px 5.5% 0 5.5%; height: 100%; } .interior .gallery .slick-initialized .caption .wrapper .captionInner { min-height: 308px; } .gallery .subhead { margin: 0 0 30px 0; } .gallery .subhead:after { bottom: -21px; } .gallery .slick-initialized .caption .wrapper .subtext { font-family: var(--bodyFont); font-size: 1.01rem; font-weight: 400; color: var(--white); line-height: 1.55; margin-bottom: 22px; } .gallery .caption .wrapper .subtext a { color: var(--color2); font-weight: 600; } .gallery .slick-initialized .caption .wrapper h2 { font-size: 2.25rem; font-weight: 400; color: var(--white); line-height: 1.12; margin-bottom: 15px; } .gallery .subtext p:last-child { margin-bottom: 0; } /* Gallery Controls */ .gallery ul.slick-dots { width: 40%; bottom: 53px; left: auto; right: 56px; margin: 0; text-align: right; } .interior .gallery ul.slick-dots { bottom: 13px; } .gallery ul.slick-dots .slick-sr-only { color: var(--color4); } .gallery ul.slick-dots > li { position: relative; margin: 0 2px; } .gallery ul.slick-dots > li button { text-indent: -99999px; display: inline-block; padding: 0; margin: 0 5px 10px 0; width: 8px; height: 8px; color: var(--white); background-color: rgba(255, 255, 255, .6); border: 1px solid rgba(255,255,255,.6); border-radius: 50%; transition: all 0.4s ease-in-out; } .gallery ul.slick-dots > li:hover button, .gallery ul.slick-dots > li button:focus { background-color: var(--white); border: 1px solid var(--white); } .gallery ul.slick-dots > li.slick-active button { background-color: var(--white); border: 1px solid var(--white); } .gallery ul.slick-dots > li:last-child { margin-right: 0; } .gallery .slick-autoplay-toggle-button { bottom: 54px; left: auto; right: 15px; width: auto; max-width: none; margin: 0; } .interior .gallery .slick-autoplay-toggle-button { bottom: 14px; } .appendGalleryArrows .slick-prev, .appendGalleryArrows .slick-next { top: -6px; width: 44px; height: 44px; background-color: #202020; } .appendGalleryArrows .slick-prev:hover, .appendGalleryArrows .slick-prev:focus, .appendGalleryArrows .slick-next:hover, .appendGalleryArrows .slick-next:focus { background-color: #545454; } .appendGalleryArrows .slick-prev { left: auto; right: 104px; } .appendGalleryArrows .slick-next { left: auto; right: 60px; } /* Interior Gallery */ .interior .gallery { max-height: 574px; } .interior .gallery .slick-slider { max-height: 574px;} .interior .gallery .slick-slide > div, .interior .gallery .slick-slide > div > div { height: 100%; max-height: 574px; } .interior .gallery .slick-initialized .caption { padding: 30px; } .interior .gallery .slick-initialized .caption .wrapper.galleryCaption { max-height: 350px; } .interior .gallery .slick-initialized .caption .wrapper .captionInner { max-width: 675px; padding: 27px 5.5%; } @media all and (max-width: 960px) { .gallery, .interior .gallery { min-height: 395px; background-color: transparent; max-height: 100%; margin: 25px auto 0 auto; } .gallery .slick-slider, .interior .gallery .slick-slider {max-height: 100%;} .gallery .slick-slide > div > div img, .gallery .impactGradient { position: absolute; height: 395px; min-height: 395px; max-height: 395px; } .gallery .slick-list { margin-bottom: 0; } .gallery .slick-initialized .caption, .interior .gallery .slick-initialized .caption { position: relative; bottom: auto; padding: 350px 15px 0 15px; height: auto; max-height: 100%; align-items: unset; } .gallery .slick-slide > div, .gallery .slick-slide > div > div, .interior .gallery .slick-slide > div, .interior .gallery .slick-slide > div > div { display: flex !important; max-height:100%; } .gallery .slick-initialized .caption .wrapper .captionInner, .interior .gallery .slick-initialized .caption .wrapper .captionInner { max-width: 100%; padding: 40px 45px; } .gallery .slick-initialized .caption .wrapper.galleryCaption { position: relative; bottom: auto; } .gallery .slick-initialized .caption .wrapper h2 { width: 100%; } .gallery ul.slick-dots { width: 100%; top: 310px; bottom: auto; left: 0; right: 0; text-align: center; } .gallery .slick-autoplay-toggle-button { top: 312px; bottom: auto; left: auto; right: 20px; } } @media all and (max-width: 580px) { .gallery .slick-initialized .caption .wrapper.galleryCaption, .interior .gallery .slick-initialized .caption .wrapper.galleryCaption {max-height: fit-content; height: 100%; } } .interior .components:last-child { padding-bottom: 52px; } .landing .components:last-child { padding-bottom: 70px; } .interior .sideBar .newsWidget.components:last-child { padding-bottom: 0; } .landing .sideBar .newsWidget.components:last-child { padding-bottom: 0; } @media all and (max-width: 960px) { .landing .components:last-child { padding-bottom: 52px; } .landing .interiorContent .components:last-child { padding-bottom: 0; } .interior .interiorContent .components:last-child { padding-bottom: 0; } } /* ============================ FACULTY * ============================*/ .facultyListing .mainContent, .facultyBioDetail .mainContent { max-width: 1575px; margin: 0 auto; padding: 35px; } @media all and (max-width: 960px) { .facultyListing .mainContent, .facultyBioDetail .mainContent { padding: 35px 15px; } } /* ============================ EVENTS * ============================*/ .eventsListing .mainContent, .eventsDetail .mainContent { max-width: 1575px; margin: 0 auto; padding: 35px; } @media all and (max-width: 960px) { .eventsListing .mainContent, .eventsDetail .mainContent { padding: 35px 15px; } } /* ============================ PLUGINS * ============================*/ /* Tables - Tablesaw */ .tablesaw { width: 100%; max-width: 100%; empty-cells: show; border-collapse: collapse; border: 0; padding: 0; } .tablesaw * { box-sizing: border-box; } .tablesaw-stack td .tablesaw-cell-label, .tablesaw-stack th .tablesaw-cell-label { display: none; } /* Mobile first styles: Begin with the stacked presentation at narrow widths */ /* Show the table cells as a block level element */ .tablesaw-stack { clear: both; border-spacing: 0; border: 1px solid #ccc; } .tablesaw-stack td, .tablesaw-stack th { text-align: left; display: block; } .tablesaw-stack td, .tablesaw-stack th, .tablesaw-stack thead td, .tablesaw-stack thead th { line-height: 1.5; } .tablesaw-stack tr { clear: both; display: table-row; } .tablesaw-stack td { vertical-align: top; } /* Make the label elements a percentage width */ .tablesaw-stack td .tablesaw-cell-label, .tablesaw-stack th .tablesaw-cell-label { display: inline-block; padding: 0 .6em 0 0; width: 30%; } /* For grouped headers, have a different style to visually separate the levels by classing the first label in each col group */ .tablesaw-stack th .tablesaw-cell-label-top, .tablesaw-stack td .tablesaw-cell-label-top { display: block; padding: .4em 0; margin: .4em 0; } .tablesaw-cell-label { display: block; } /* Avoid double strokes when stacked */ .tablesaw-stack tbody th.group { margin-top: -1px; } /* Avoid double strokes when stacked */ .tablesaw-stack th.group b.tablesaw-cell-label { display: none !important; } .tablesaw-stack tr:nth-child(even) { background-color: var(--color4); } @media all and (min-width: 721px) { .tablesaw-stack thead, .tablesaw-stack th { background-color: var(--color4); color: var(--color4); } .tablesaw-stack th { border: 1px solid var(--color4); } .tablesaw-stack tr { display: table-row; border: 1px solid var(--color4); } /* Show the table header rows */ .tablesaw-stack thead td, .tablesaw-stack thead th { vertical-align: middle; } .tablesaw-stack td { border: 1px solid #ccc; } .tablesaw-stack td, .tablesaw-stack th, .tablesaw-stack thead td, .tablesaw-stack thead th { display: table-cell; margin: 0; padding: 12px 20px; } .tablesaw-stack td { padding: 15px 20px; } /* Hide the labels in each cell */ .tablesaw-stack td .tablesaw-cell-label, .tablesaw-stack th .tablesaw-cell-label { display: none !important; } } @media all and (max-width: 720px) { .tablesaw-stack tbody tr { display: inline-block; width: 100%; padding: 12px 20px; } .tablesaw-stack thead td, .tablesaw-stack thead th { display: none; } .tablesaw-stack tbody td, .tablesaw-stack tbody th { display: block; float: left; clear: left; width: 100%; } .tablesaw-cell-label { vertical-align: top; } .tablesaw-stack td .tablesaw-cell-label, .tablesaw-stack th .tablesaw-cell-label { display: block; padding: 0; width: 100%; color: var(--color4); font-weight: 600; margin-bottom: 10px; } .tablesaw-stack td:last-of-type { margin-bottom: 20px; } .tablesaw-cell-content { display: inline-block; max-width: 100%; margin-bottom: 16px; } .tablesaw-stack .tablesaw-stack-block .tablesaw-cell-label, .tablesaw-stack .tablesaw-stack-block .tablesaw-cell-content { display: block; width: 100%; max-width: 100%; padding: 0; } .tablesaw-stack td:empty, .tablesaw-stack th:empty { display: none; } } /* Slick Slider Default */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative;display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; } .slick-slider .slick-track, .slick-slider .slick-list { transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; } .slick-track:before, .slick-track:after { display: table; content: '';} .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: auto; min-height: 1px; } .slick-slide:not(.slick-active) a { /*display: none;*/ visibility: hidden; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } /* Arrows */ .slick-prev, .slick-next { font-size: 1rem; line-height: 0; position: absolute; top: 50%; display: block; width: 44px; height: 44px; padding: 0; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); cursor: pointer; border: none; z-index: 2; color: var(--white); background-color: rgba(32, 32, 32, 0.9); transition: background-color 0.4s ease-in-out; } .slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { background-color: rgba(32, 32, 32, 1); } .slick-prev { left: 10px; background-image: url(../images/impact-arrow-left.svg) ; background-repeat: no-repeat; background-position: center center; } .slick-next { right: 10px; background-image: url(../images/impact-arrow-right.svg) ; background-repeat: no-repeat; background-position: center center; } /* Dots */ .slick-dots, [class^="content col"] ul.slick-dots { position: absolute; bottom: -25px; display: block; padding: 0; margin: 0; width: 100%; list-style: none; text-align: center; } .slick-dots li { position: relative; display: inline-block; margin: 0 5px; padding: 0; cursor: pointer; } .slick-dots li button { text-indent: -99999px; display: inline-block; padding: 0.22rem; margin: 0 0 10px 0; width: 8px; height: 8px; color: var(--color4); background-color: #cacaca; border: 1px solid #cacaca; border-radius: 50%; cursor: pointer; transition: all 0.4s ease-in-out; } .slick-dots li button:focus, .slick-dots li button:hover { color: var(--white); background-color: var(--color1); border: 1px solid var(--color1); opacity: 1; } .slick-dots li button:focus .slick-dot-icon, .slick-dots li button:hover .slick-dot-icon { color: var(--white); background-color: var(--color1); opacity: 1; } .slick-dots li button:focus .slick-dot-icon:before { color: var(--color4); } .slick-dots li button .slick-dot-icon { color: var(--black); opacity: 0.25; } .slick-dots li button .slick-dot-icon:before { position: absolute; top: 0; left: 0; content: "•"; font-family: slick; font-size: 26px; line-height: 1; text-align: center; transition: all 0.05s linear; } .slick-dots li.slick-active button, .slick-dots li.slick-active button:hover, .slick-dots li.slick-active button:focus { color: var(--white); background-color: var(--color1); border: 1px solid var(--color1); } .slick-dots li.slick-active button:focus .slick-dot-icon { color: var(--color4); opacity: 1; } .slick-dots li.slick-active button .slick-dot-icon { color: var(--white); opacity: 1; } .slick-dots li.slick-active button .slick-dot-icon:before { margin-top: 0; margin-left: 0; font-size: 26px; } /* ============================ MAGNIFIC POPUP * ============================*/ .mfp-bg { top: 0; left: 0; width: 100%; height: 100%; z-index: 99998; overflow: hidden; position: fixed; background: rgba(0,0,0,0.7); } .mfp-wrap { top: 0; left: 0; width: 100%; height: 100%; z-index: 99999; position: fixed; } .mfp-container { text-align: center; position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0 8px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mfp-container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .mfp-align-top .mfp-container:before { display: none; } .mfp-content { position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 1045; } .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { width: 100%; cursor: auto; } .mfp-ajax-cur { cursor: progress; } .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: -moz-zoom-out; cursor: -webkit-zoom-out; cursor: zoom-out; } .mfp-zoom { cursor: pointer; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; } .mfp-auto-cursor .mfp-content { cursor: auto; } .mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter { -webkit-user-select: none; -moz-user-select: none; } .mfp-loading.mfp-figure { display: none; } .mfp-hide { display: none !important; } .mfp-preloader { color: var(--color4); position: absolute; top: 50%; width: auto; text-align: center; margin-top: -0.8em; left: 8px; right: 8px; z-index: 1044; } .mfp-preloader a { color: var(--color4); } .mfp-preloader a:hover { color: var(--white); } .mfp-s-ready .mfp-preloader { display: none; } .mfp-s-error .mfp-content { display: none; } button.mfp-close, .closeButton { overflow: visible; cursor: pointer; border: 1px solid transparent; color: var(--white); background-color: var(--color1); -webkit-appearance: none; display: block; padding: 8px 5px; z-index: 999999; -webkit-box-shadow: none; box-shadow: none; transition: all 0.4s ease-in-out; cursor: pointer; } button.mfp-arrow { position: absolute; bottom: 32px; display: block; width: 35px; height: 35px; padding: 0; cursor: pointer; border: none; z-index: 2; background-color: var(--color1); border: 2px solid var(--color1); transition: all 0.4s ease-in-out; } .mfp-arrow-left .mfp-arrow-right { width: 44px; height: 44px; color: var(--white); } .mfp-arrow-left { right: 72px; background-image: url() ; background-position: center center; background-repeat: no-repeat; } .mfp-arrow-right { right: 38px; background-image: url() ; background-position: center center; background-repeat: no-repeat; } .mfp-arrow-left:hover, .mfp-arrow-right:hover, .mfp-arrow-left:focus, .mfp-arrow-right:focus { background-color: #F96B07; border: 2px solid #F96B07; } button::-moz-focus-inner { padding: 0; border: 0; } .mfp-close, .closeButton, button.mfp-close { width: auto; height: 42px; position: absolute; right: 0; top: 0; color: var(--white); text-indent: -999999px; background-color: var(--color1); font-family: var(--bodyFont); font-size: .8rem; font-weight: 500; text-decoration: none; text-align: right; line-height: 1; color: var(--white); top: -42px; max-width: 86px; width: 100%; transition: all 0.4s ease-in-out; } .mfp-close:before { position: absolute; top: 12px; left: 0; right: 0; display: inline-block; width: 30px; font-size: 1.05rem; font-weight: 600; content: url(../images/close-popup.svg) ; margin: 0; padding: 0 10px 0 0; vertical-align: middle; background-color: var(--color1); transition: all 0.4s ease-in-out; } .mfp-close:hover, .mfp-close:focus { background-color: var(--color1); top: -42px; } .mfp-close:hover:before, .mfp-close:focus:before { background-color: var(--color1); } .mfp-close:active { top: -42px; } .mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { color: var(--white); text-align: right; max-width: 45px; width: 100%; } .mfp-counter { position: absolute; top: 0; right: 0; color: var(--color4); font-size: 12px; line-height: 18px; white-space: nowrap; } .mfp-iframe-holder { padding-top: 40px; padding-bottom: 40px; } .mfp-iframe-holder .mfp-content { line-height: 0; width: 100%; max-width: 900px; } .mfp-iframe-holder .mfp-close { top: -42px; } .mfp-iframe-scaler { width: 100%; height: 0; overflow: hidden; padding-top: 56.25%; } .mfp-iframe-scaler iframe { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; /*box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); */background: rgba(10, 10, 10, .95); } /* Magnific Fade In and Out */ .white-popup-block { animation: magnificOpen .4s; } .mfp-removing { animation: magnificClose .4s; } @keyframes magnificOpen { 0% {opacity: 0;} 100% {opacity: 1;} } @keyframes magnificClose { 0% {opacity: 1;} 100% {opacity: 0;} } @media (prefers-reduced-motion) { .white-popup-block, .mfp-removing { animation-name: dissolve; } } /* Main image in popup */ img.mfp-img { width: auto; max-width: 100%; height: auto; display: block; line-height: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 40px 0 40px; margin: 0 auto; } /* The shadow behind the image */ .mfp-figure { line-height: 0; } .mfp-figure:after { content: ''; position: absolute; left: 0; top: 40px; bottom: 40px; display: block; right: 0; width: auto; height: auto; z-index: -1; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: var(--color4); } .mfp-figure small { color: var(--color4); display: block; font-size: 12px; line-height: 14px; } .mfp-figure figure { margin: 0; } .mfp-bottom-bar { margin-top: -36px; position: absolute; top: 100%; left: 0; width: 100%; cursor: auto; } .mfp-title { text-align: left; line-height: 18px; color: var(--color4); word-wrap: break-word; padding-right: 36px; } .mfp-image-holder .mfp-content { max-width: 100%; } .mfp-gallery .mfp-image-holder .mfp-figure { cursor: pointer; } @media all and (max-width: 800px) and (orientation:landscape), all and (max-height:300px) { .mfp-img-mobile .mfp-image-holder { padding-left: 0; padding-right: 0; } .mfp-img-mobile img.mfp-img { padding: 0; } .mfp-img-mobile .mfp-figure:after { top: 0; bottom: 0; } .mfp-img-mobile .mfp-figure small { display: inline; margin-left: 5px; } .mfp-img-mobile .mfp-bottom-bar { background: rgba(10, 10, 10, .95); bottom: 0; margin: 0; top: auto; padding: 3px 5px; position: fixed; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mfp-img-mobile .mfp-bottom-bar:empty { padding: 0; } .mfp-img-mobile .mfp-counter { right: 5px; top: 3px; } .mfp-img-mobile .mfp-close { top: 0; right: 0; width: 35px; height: 35px; line-height: 35px; background: rgba(10, 10, 10, .95); position: fixed; text-align: center; padding: 0; } } @media all and (max-width: 900px) { .mfp-arrow-left { -webkit-transform-origin: 0; transform-origin: 0; } .mfp-arrow-right { -webkit-transform-origin: 100%; transform-origin: 100%; } .mfp-container { padding-left: 20px; padding-right: 20px; } } .mfp-ie7 .mfp-img { padding: 0; } .mfp-ie7 .mfp-bottom-bar { width: 600px; left: 50%; margin-left: -300px; margin-top: 5px; padding-bottom: 5px; } .mfp-ie7 .mfp-container { padding: 0; } .mfp-ie7 .mfp-content { padding-top: 44px; } .mfp-ie7 .mfp-close { top: 0; right: 0; padding-top: 0; } /* ============================ GOOGLE CUSTOM SEARCH * ============================*/ input.gsc-input { height: 45px !important; } .gsc-search-button.gsc-search-button-v2 { height: 55px !important; } .gsc-search-button { background-color: var(--color1;) } .gsc-search-button-v2 svg { width: 20px; height: 20px; } .gsc-selected-option-container { font-size: 1rem !important; min-width: 150px !important; height: 45px !important; line-height: 45px !important; } .gsc-option { font-size: 1rem !important; } .gsc-control-cse .gsc-option-selector { top: 19px !important; } .gs-webResult.gs-result a.gs-title:visited, .gs-webResult.gs-result a.gs-title:visited b, .gs-imageResult a.gs-title:visited, .gs-imageResult a.gs-title:visited b { font-family: var(--bodyFont) !important; color: var(--color1) !important; word-wrap: break-word; } .gs-webResult.gs-result a.gs-title:link, .gs-webResult.gs-result a.gs-title:link b, .gs-imageResult a.gs-title:link, .gs-imageResult a.gs-title:link b { font-family: var(--bodyFont) !important; color: var(--color1) !important; } .gs-webResult.gs-result a.gs-title:hover, .gs-webResult.gs-result a.gs-title:hover, .gs-imageResult a.gs-title:hover, .gs-imageResult a.gs-title:hover { text-decoration: underline; } .gsc-control-cse { padding: 0 !important; } .gsc-control-cse .gs-spelling { font-size: 1.1rem !important; } .gsc-control-cse .gs-result .gs-title, .gsc-control-cse .gs-result .gs-title * { font-size: 1.25rem !important; } .gsc-results .gsc-cursor-box .gsc-cursor-current-page { border-color: var(--color1) !important; background-color: var(--white); color: var(--color1) !important; } .gsc-results .gsc-cursor-box .gsc-cursor-page { border-color: var(--color1) !important; background-color: var(--white); color: var(--color1) !important; } a.gs-title { border-bottom: none !important; display: inline; } .gsc-table-result, .gsc-thumbnail-inside, .gsc-url-top { padding-left: 0 !important; padding-right: 0 !important; } .gs-promotion .gs-visibleUrl, .gs-webResult .gs-visibleUrl, .gs-webResult .gs-snippet, .gs-fileFormatType, .gcsc-find-more-on-google, .gcsc-find-more-on-google { color: var(--color4) !important; } .gcsc-find-more-on-google-magnifier { fill: var(--color4) !important; } .gsc-search-button-v2 { border: 1px solid var(--color1) !important; border-radius: 0 !important; border-color: var(--color1) !important; background-color: var(--color1) !important; transition: all 0.4s ease-in-out; } .gsc-search-button-v2:hover, .gsc-search-button-v2:focus { border: 1px solid var(--color1) !important; border-radius: 0 !important; border-color: var(--color1) !important; background-color: var(--color1) !important; cursor: pointer; } .gsc-table-cell-thumbnail.gsc-thumbnail + .gsc-table-cell-snippet-close { padding-left: 80px !important; } .gsc-control-cse, .gsc-control-cse .gsc-table-result { font-family: var(--bodyFont) !important; font-size: 1rem !important; } /* ============================ PRINT * ============================*/ @media print { #topLink { display: none !important; } .header { position: relative !important; } .grid { grid-template-columns: repeat(1, 1fr); } .sectionNavColumn { grid-area: 3 / 1 / 3 / 12; width: 100%; min-width: 0; max-width: 100%; padding: 20px 0 16px 0; } .interior .columns.sideBar { grid-area: 8 / 1 / 8 / 12; width: 100%; padding-left: 0; margin-left: 0; } .mainContent { grid-area: 3 / 1 / 8 / 12; } .sectionNavColumn + .interiorContent { grid-area: 5 / 1 / 8 / 12; } }