/* ============================ GLOBAL ELEMENTS * ============================*/ 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.5; font-family: "utopia-std",serif; font-weight: 400; font-size: 1.0em; color: #3a3a3a; background: #fff; padding-top: 93px; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } blockquote, q { quotes: none; } .mobileOnly { display: none !important; } .tabletOnly { display: none!important; } .desktopOnly { display: block!important; } input[type=submit], input[type=text], input[type=email], input[type=url], input[type=password] { -webkit-appearance: none; -moz-appearance: none; border-radius: 0;-moz-border-radius: 0; -webkit-border-radius: 0; } .searchBox {-webkit-appearance: none; -moz-appearance: none; border-radius: 0;-moz-border-radius: 0; -webkit-border-radius: 0; padding: 8px; border: 1px solid #fff; width:65%; } select { padding: 5px; cursor: pointer; border-radius: 0;-moz-border-radius: 0; -webkit-border-radius: 0; border: 1px solid #555; } * { -moz-font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -webkit-font-smoothing: subpixel-antialiased; box-sizing: border-box; -moz-box-sizing: border-box;-webkit-box-sizing: border-box;} sup { vertical-align: super; font-size:.875em;} /* Global Headings */ h1, h2, h3, h4, h5, h6 { width: 100%; display: block; font-family: "utopia-std",serif; margin-bottom:0; } h1 { font-family: "input-sans-compressed", Arial, Helvetica, sans-serif; font-size: 2.63rem; color:#3a3a3a; line-height: 1.1; } h2 { font-size: 1.857em; color:#3a3a3a; line-height: 1.22; margin-bottom: 7px; } h2.newsh2 {font-size: 1.313em; font-family: "input-sans-compressed", Arial, Helvetica, sans-serif; text-transform: uppercase; color: #3a3a3a; line-height: 1.22; } h3 {font-size: 1.313em; font-family: "input-sans-compressed", Arial, Helvetica, sans-serif; text-transform: uppercase; color: #3a3a3a; line-height: 1.22; } h3.newsh3 { font-size: 1.25rem; color: #3a3a3a; line-height: 1.28; } h4 { font-size: 1.25rem; color: #3a3a3a; line-height: 1.28; } h4.newsh4 { font-size: 1.125rem; color: #3a3a3a; line-height: 1.28; } h5 { font-size: 1.125rem; color: #3a3a3a; line-height: 1.28; } /* Global Content */ /* body.home { background-image: url('../images/about-background.png'); background-size: cover; background-attachment: fixed; background-repeat: no-repeat; background-color: #FFF; } */ body.home:after { content:""; position: fixed; top: 0; height: 100vh; left: 0; right: 0; z-index: -1; background-image: url('../images/about-background.png'); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } a { color: #BA0C2F; } a[id]:not(#topLink):not(#alertButton) { display: block; position: relative; top: -150px; visibility: hidden; } .mainContent a:hover, #mainWrapper a:hover { color: #ca3e00; text-decoration: underline; } p { margin-bottom: 15px; line-height: 1.75em; } em {font-style: italic;} img { border: none; height: auto; max-width: 100%; } td img { max-width: 100%; } strong { font-weight: 700; } iframe { max-width: 100%; } input { border-radius: 0;-webkit-border-radius:0px; } .center { text-align: center; } .align-left { float: left; margin: 0 20px 20px 0; } .align-right { float: right; margin: 0 0 20px 20px; } .align-center { text-align: center; margin: 0 20px; } .alignCenter { text-align: center; display: block; } /* Callout Buttons */ a.cta-button, .cta-button { display: inline-block; font-family: "input-sans-compressed", Arial, Helvetica, sans-serif; font-weight: 500; background-color: transparent; color: #111111; margin-top: 10px; margin-right: 55px; padding: 9px 15px; text-transform: uppercase; text-decoration: none; cursor: pointer; border: 2px solid #333333; min-width: 210px; text-align: center; } .columns .content a.cta-button { color: #111111; } .mainContent a.cta-button:hover, #mainWrapper a.cta-button:hover, .cta-button:hover { color: #fff; text-decoration: none; background-color: #000; } .homeBanner.hasBackground a.cta-button, .columns.hasBackground .content a.cta-button { border: 2px solid #FFF; color: #FFFFFF; } a.callout, .callout { display:block; font-size:1.125em; margin-top:15px; color:#3a3a3a; text-decoration: none; } #mainWrapper a.callout:hover, #mainWrapper a.callout:focus, #mainWrapper .callout:hover, #mainWrapper .callout:focus, .mainContent a.callout:hover, .mainContent a.callout:focus, .mainContent .callout:hover, .mainContent .callout:focus{ color: #ca3e00; text-decoration: none; } a.callout:after, .callout:after { content:"\f105"; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-left: 6px; font-size: 1em; } .backToTop { position: fixed; bottom: 30px; right: 30px; opacity: 0.5; background: #f5f5f5; border-radius: 50%;padding: 20px 17px 20px 20px; color: #363636; z-index: 20; font-size: 1.3rem; } #topLink em { box-shadow: 0px 0px 6px #000; } #topLink span.topLinkText { position: absolute; text-indent: -99999px; } .hidden { display: none; } .loadingContent { visibility: hidden; } .calloutText { color: #3a3a3a; font-family: "input-sans-compressed", Arial, Helvetica, sans-serif; font-size: 2.500em; text-transform: uppercase; letter-spacing: 0.12em; } .calloutText:before { font-family: "Font Awesome 5 Free"; content: "\f0da"; font-weight: 900; padding-right: 5px; } .readmore { color: #BA0C2F; font-family: "input-sans-compressed", Arial, Helvetica, sans-serif; font-size: 0.938em; letter-spacing: 0.113em; text-transform: uppercase; } .hasBackground .readmore { color: #FFF; } .readmore:hover { text-decoration: none; } a.all { display: block; position: absolute; right:1em; top:.25em; } /* ============================ One% CSS Grid - 12 Columns Fluid CSS Grid System * ============================*/ .mainContent.wrapper{ margin-top:42px; max-width: 1200px; } .mainContent:after{ content:""; display:block; clear:both; } .container, .wrapper { margin-left: auto; position:relative; margin-right: auto; } .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 { float: left; margin: 0 3% 0 0; } .col3 { float: left; margin: 0 2.5% 0 0; } .col1:last-child, .col2:last-child, .col3:last-child, .col4:last-child, .col5:last-child, .col6:last-child, .col7:last-child, .col8:last-child, .col9:last-child, .col9.last, .col10:last-child, .col11:last-child, .col12 { margin: 0; } .col1 { width: 5.5%; } .col2 { width: 14%; } .col3 { width: 22.5%; } .col4 { width: 31%; } .col5 { width: 39.5%; } .col6 { width: 48%; } .col7 { width: 56.5%; } .col8 { width: 65%; } .col9 { width: 73.5%; } .col10 { width: 82%; } .col11 { width: 90.5%; } .col12 { width: 100%; margin: 0; } @media screen and (max-width: 1023px) { .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11 { width: 100% !important; margin-right: 0; display: inline-block; } } /* ============================ Global Background Colors * ============================*/ /* ============================ Global Text Colors * ============================ */ .red { color: #BA0C2F; } /* ============================ Global Font Colors * ============================*/ /* ============================ Form Styles * ============================*/ fieldset { border: 0; padding: 0; } label { cursor: pointer; } input { border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; font-size: 1rem; color: #3a3a3a; } select, input[type=email], input[type=url], input[type=password], textarea { color:inherit; font-family:inherit; font-size: 1em; border: 1px solid #555; background: #fff; padding: 8px 8px; margin-bottom: 15px; } /* ============================ Screenreader * ============================*/ .screenreader { position: absolute; top: 0; z-index: 9999999; left: auto; } .screenreader a {padding: 10px; position: absolute; left: -100000px; background-color: #111111; color: #fff; } .screenreader a:focus { position: absolute; left: 0; top: 0; } /* ============================ Header * ============================*/ header.header { background-color: #fff; height: 93px; width: 100%; position: fixed; top: 0; z-index: 999999;-webkit-box-shadow: 0px 1px 0px #D9D9D9; -moz-box-shadow: 0px 1px 0px #D9D9D9; box-shadow: 0px 1px 0px #D9D9D9; font-family: input-sans, sans-serif; font-style: normal; font-weight: 500; } .header .container, .header .wrapper { max-width: 1488px; position: static; } /* Logo */ .logo { position: relative; float:left; padding: 0 0 0 9px; margin: 31px 1px 0 0; display: inline-block; } .logo img { width: 100%; } /* ============================ Utility Area * ============================*/ .utilityWrapper { display: inline-block; float: right; } .utilityLink { cursor: pointer; float:left; padding: 25px; font-size: 0.813em; font-family: "input-sans-compressed",sans-serif; text-transform: uppercase; position: relative; } .utilityLink button { font-family: "input-sans-compressed",sans-serif; text-transform: uppercase; background-color: transparent; border: 0; } .utilityLink button:after { font-family: "Font Awesome 5 Free"; content: "\f0d7"; font-weight: 900; padding-left: 5px; color: #BA0C2F; } .utilityLink a { color: #000; text-decoration: none; } .utilityLink a:hover { text-decoration: underline; } .utilityLink .subMenu { display: none; min-width: 200px; position: absolute; right: 0; left: 0; padding: 10px; background-color: #111111; opacity: .95; } .utilityLink .subMenu li { text-align:left; padding: 5px; margin-right: 0; display: block; } .utilityLink .subMenu li a { color: #FFF; } .utilityLink:hover .subMenu, .utilityLink .subMenu.menuOpen { display: block; } .utilityLink span.mobileOnly { display: none; } /* ============================ Search * ============================*/ #searchToggle { position: absolute; top: 20px; right: 9%; } #searchToggle .searchToggleBtn { display: block; float: right; padding: 6px 0; font-family: "input-sans-compressed",sans-serif; text-transform: uppercase; background-color: transparent; border: 0; } #searchToggle.searchNoDisplay .searchToggleBtn:after { content: '\f002'; background: -webkit-linear-gradient(#CD1C2E, #FFB40D); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } #searchToggle .searchToggleBtn:after { background-color: #111; color: #FFF; content: '\f00d'; font-family: "Font Awesome 5 Free"; font-weight: 900; padding: 5px 6px; } #searchToggle .searchToggleBtn span.hidden { position: absolute; left: -99999px; } .searchWrap { position: absolute; top: 20px; right: 11%; width: 100%; max-width: 421px; } #searchBox { border: none; background: #FFF; } .searchBox { position: absolute; left: 15px; } /* Opens Changes Icon */ .hide { visibility: hidden; } #searchBoxLabel + label[for='searchBoxLabel'] span.hide { position: absolute; left: -99999px; } /* Search Content */ .searchMobilecontent { display: none; } .searchMobilecontent.searchOpen { transition-property: all; transition-duration: .5s; transition-timing-function: cubic-bezier(0, 1, 0.5, 1); margin-top: -2px; z-index: 9999999; display: block; } /* Search Input */ .searchMobilecontent input[type=search] { border: 0; padding: 10px 6px; width: 85%; float: left; -webkit-appearance: none; margin: 0; position: absolute; top: 5px; background: #FFF; border: 1px solid gray; } .searchMobilecontent input:focus { outline: none; } .searchMobilecontent button[type=submit] { float: right; position: relative; border: none; font-size: 1.125em; width: 45px; height: 30px; overflow: hidden; cursor: pointer; background: #FFF; } .searchMobilecontent button em:before{ background: -webkit-linear-gradient(#CD1C2E, #FFB40D); -webkit-background-clip: text; -webkit-text-fill-color: transparent; content: '\f002'; font-family: "Font Awesome 5 Free"; font-weight: 900; } @media screen and (max-width: 1875px) { #searchToggle { right: 7%; } .searchWrap { right: 9%; } } @media screen and (max-width: 1775px) { #searchToggle { right: 4%; } .searchWrap { right: 6%; } } @media screen and (max-width: 1675px) { .utilityWrapper { padding-right: 5%; } } @media screen and (max-width: 1536px) { .utilityWrapper { padding-right: 1%; } } @media screen and (max-width: 1450px) { .utilityWrapper { padding-right: 2%; } } @media screen and (max-width: 1350px) { .utilityWrapper { padding-right: 5%; } #searchToggle { right: 2%; } .searchWrap { right: 4%; } } @media screen and (max-width: 1250px) { .utilityWrapper { padding-right: 7%; } #searchToggle { right: 1%; } .searchWrap { right: 3%; } } @media screen and (max-width: 1200px) { .searchMobilecontent button[type=submit] { height: 35px; } .searchWrap { top: 10px; background: #FFF; } #searchToggle { right: 1%; top: 6px; } #searchToggle span.mobileHide { position: absolute; left: -999999px; } #searchToggle .searchToggleBtn:after { font-size: 1.45rem; } } @media screen and (max-width:720px) { .searchWrap { right: 6%; } } /* ============================ Top Navigation * ============================*/ /* Top Nav */ .topNav { display: flex; flex-wrap: wrap; justify-content: flex-end; } .topNav ul { list-style: none; margin: 0; padding: 0;} .topNav ul.nav li { display: inline-block; padding: 15px 24px; } .topNav ul.nav > li > .dropdownToggle { font-size: 1.00rem; text-decoration: none; color: #FFF; letter-spacing: 0.120em; font-family: "input-sans-compressed",sans-serif; background-color: transparent; border: 0; text-transform: uppercase; padding: 0; } .topNav ul.nav > li > a:hover,.topNav ul.nav > li > a:focus { text-decoration: underline; } .topNav input[type="checkbox"] { position: absolute; display: inline; height: 0; width: 0; margin: 0; padding: 0; border: none; opacity: 0; } .topNav label span { position: relative; display: inline-block; font-size: 1rem; } #menu { padding-left: 35px; } #menu input[type="checkbox"] { position: absolute; display: inline; height: 0; width: 0; margin: 0; padding: 0; border: none; opacity: 0; } #menu input[type="checkbox"]:focus { outline: 1px dashed #006448; width: 100%; height: 15px; opacity: 1; background-color: #fff; } #menu li, #menu a { display: block; font-family: "input-sans-compressed",sans-serif; text-transform: uppercase; } #menu input[type="checkbox"]:checked + .subMenu { display: none; } #menu > li { float: left; } #menu > li:hover { z-index: 4000; } #menu .subMenu { opacity: 0; visibility: hidden; min-width:200px; margin: -15px 0 0 0; position: absolute; right: 0; left: 0; z-index: -1; padding: 45px 10px; background-color: #111111; opacity: .95; } #menu .subMenuWrapper { max-width: 1110px; margin: auto; } #menu .subMenu h3 { font-weight: 700; } #menu .subMenu li { text-align:left; padding: 5px; margin-right: 0; display: block; } #menu .subMenu a { color:#FFF; font-size: 0.813em; margin-right: 0; text-decoration: none; } #menu .subMenu a:hover, #menu .subMenu a:focus { text-decoration: underline; } #menu .subMenu .subMenu { top: 0; left: 100%; } #menu li:hover > .dropdownToggle + .subMenu, #menu li .dropdownToggle + .subMenu.menuOpen { opacity: 1; visibility: visible; } #menu li ul { list-style: none; padding: 0; margin: 0 0 12px 0; } #menu li ul li { padding: 0; margin: 0; } .menuBg { background-image: url('../images/gradient/gradient-repeat.jpg'); background-color: #cc1b2d; background-position: right top; background-repeat: repeat-y; -moz-transform: skew(-30deg, 0deg); -webkit-transform: skew(-30deg, 0deg); -o-transform: skew(-30deg, 0deg); -ms-transform: skew(-30deg, 0deg); transform: skew(-30deg, 0deg); position: absolute; z-index: -1; top: 68px; width:100%; max-width: 982px; height: 51px; } /* ============================ Mobile Menu * ============================*/ #mobileHeader { display: none; } /* Toggle Canvas Menu */ .menuContainer.navOpen { margin-right: 0; min-width: 250px; } .menu { z-index: 100; } .toggleBtn { width: 45px; height: 45px; display: block; float: right; padding: 6px 12px; background-color: transparent; border: 0; } .toggleBtn:after { color: #BA0C2F; content: '\f0c9'; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 1.45rem; } .toggleBtn span { position: absolute; overflow: hidden; z-index: -1000; font-size: 1em; height: 1px; } /* Mobile Menu Container */ .menuContainer { float: left; height: 78%; margin-top: 0px; z-index: 102; display: inline-block; right: 0; transition: margin 0.5s ease-in-out; } /* ============================ Sticky Tabs * ============================*/ .stickyTabs { position: fixed; right: 0; top: 26%; z-index: -1; } .stickyTabs ul { list-style: none; } .stickyTabs ul li a { min-width: 195px; display: block; background-image: url('../images/gradient/gradient-repeat.jpg'); background-color: #cc1b2d; background-position: right top; background-repeat: repeat-y; -moz-transform: skew(-30deg, 0deg); -webkit-transform: skew(-30deg, 0deg); -o-transform: skew(-30deg, 0deg); -ms-transform: skew(-30deg, 0deg); transform: skew(-30deg, 0deg); padding: 10px 35px; margin: 15px -20px 15px 0; font-family: "input-sans-compressed",sans-serif; text-transform: uppercase; color: #FFF; text-decoration: none; } .stickyTabs ul li a span { -moz-transform: skew(30deg, 0deg); -webkit-transform: skew(30deg, 0deg); -o-transform: skew(30deg, 0deg); -ms-transform: skew(30deg, 0deg); transform: skew(30deg, 0deg);display: inline-block; } /* ============================ Header Responsiveness * ============================*/ @media screen and (max-width: 1536px) { /* Logo */ .logo { width: auto; margin: 3% 0 0 0; padding: 0 0 8px 18px; } .logo img { max-width: 248px; } } @media all and (max-width: 1536px) and (-ms-high-contrast: none), all and (max-width: 1536px) and (-ms-high-contrast: active) { #mobileHeader { z-index: 10!important; } .searchWrap.searchNoDisplay { max-width: 90px; z-index: 9; } .searchNoDisplay #searchBoxLabel + label[for='searchBoxLabel']::after { background: none; color: #111111; } .utilityWrapper { margin-left: 15%; padding-right: 12% } } @media all and (max-width: 1400px) and (-ms-high-contrast: none), all and (max-width: 1400px) and (-ms-high-contrast: active) { .utilityWrapper { margin-left: 5%; padding-right: 12% } } @media all and (max-width: 1250px) and (-ms-high-contrast: none), all and (max-width: 1250px) and (-ms-high-contrast: active) { .utilityWrapper { margin-left: 0; padding-right: 10% } } @media screen and (max-width: 1250px) { .menuBg { right: -50px; } } @media screen and (max-width: 1200px) { body { padding-top: 49px; } /* Header */ header.header, .headerContent.wrapper { height: 50px; } .menuBg { display: none; } .logo { margin-top: 1em; } /* Mobile Header */ #mobileHeader { display: inline-block; float: right; margin: 0; padding: 0 3px 0 0; position: absolute; right: 6%; z-index: 0;} .topNav ul.nav > li > a { padding: 24px 18px; } /* Utility */ .utilityWrapper { order: 3; margin-left: 35px; display: block; } .utilityLink { float: none; padding: 17px 5px 17px 0; color: #FFF; } .utilityLink span.mobileOnly { display: block;} .utilityLink button { display: none; } .utilityLink span:after { content: none; } .utilityLink .subMenu { display: block; min-width: none; position: relative; padding: 0; background-color: transparent; opacity: 1; } .utilityLink a { color: #FFF; } .utilityLink span { color: #FFD043; } .utilityLink .subMenu li { padding-left: 0; } .topNav .menuContainer .utilityLink ul { margin-left: 0; } .topNav .menuContainer .utilityLink ul li { margin: 15px 0; } /* Mobile Menu Container */ .menuContainer { display: inline-block; position: fixed; top: 51px; height: 100%; width: 100%; max-width: 414px; padding-bottom: 75px; margin: 0 -414px 0 0; right: 0; background-color: rgba(0, 85, 150, 0.3); transition: margin 0.5s ease-in-out; overflow-x: hidden; color: #FFF; } #menu { float: none; width: 100%; padding: 0; text-align: left; margin-top: 4%; order: 2; } #menu li ul { margin: 0; } #menu li ul.col3 { display: inline-block; width: 100%; } #menu > li, #menu > li:hover, #menu > li:focus { margin: 0; width: 100%; float: none; background-color: transparent; padding: 0; } #menu > li > button { padding: 24px 0 0; display: block; } #menu > li > button:before { font-family: "Font Awesome 5 Free"; content: "\f0d7"; font-weight: 900; padding-right: 5px; color: #FFF; } #menu li .infoStudent { display: inline-block !important; } /* Top Nav */ .topNav { height: 0; } .topNav .container { float: left; } .topNavWrapper { padding-bottom: 55px; } .topNav .menuContainer ul { margin: 0 35px 10px 35px;} .topNav ul.nav li { font-family: 'Cabin', sans-serif; } .topNav ul > li { padding-right: 0; } .topNav ul.nav > li > a { font-size: 1.05rem; color: #0054C7; width: 80%; text-decoration: none; } /* Top Nav Sub Menu */ #menu li > input[type="checkbox"] + .subMenu { opacity: 1; visibility: visible; overflow: hidden; } #menu .subMenu { margin: 0; padding: 15px 10px; } #menu .subMenu, #menu .i-am { background-color: transparent; position: relative; width: auto; z-index: 3000; opacity: 1; left: 0; } #menu .subMenu li[class^="col"] { float: none; } #menu .subMenu li, #menu .i-am li { display: block; float: none; margin-right: 0; } #menu .subMenu li:last-child { border-bottom:none; } #menu li a.infoStudent { vertical-align: super; } #menu li a { float: none; font-size: .93rem; margin: 0 5px; padding: 2px 0; display: inline; color: #fff; vertical-align: bottom;} #menu li.sub a { text-transform: uppercase; font-size: 1.2rem; } #menu .subMenu li > a { letter-spacing: .15em; color: #fff; font-size: 0.9rem; line-height: 2.17rem; padding: 6px 0; margin: 3px 0; text-transform: capitalize; text-decoration: none; } #menu .subMenu li > a:hover { color: #E30D43; } #menu .subMenu .megaRow, #menu .subMenu .col2 { margin: 0; position: unset; } #menu input[type="checkbox"] { position: absolute; display: inline; height: 0; width: 0; margin: 0; padding: 0; border: none; opacity: 0; z-index: 9;} #menu input[type="checkbox"]:focus { outline: 1px dashed #006448; width: 100%; height: 15px; opacity: 1; } #menu input[type="checkbox"], #menu input[type="checkbox"]:focus { height: 30px; width: 30px; opacity: 0; z-index: 99; cursor:pointer; } #menu .dropdownToggle + .subMenu { display: none !important; } #menu .dropdownToggle + .subMenu.menuOpen { display: block !important; } #menu input[type="checkbox"]:checked ~ .sub:before { content: '\f068' } #menu > li:hover { cursor: pointer; } #menu #information-nav { background-color: #004EB8; height: 53px; padding: 8px 0 0 0 ; width: 80%; margin: 15px 0 15px 10px; } #menu #information-nav li a { } .main-nav:focus { outline: 1px solid #fff; } .utilityWrapper em { display: inline-block; font-size: 1.2rem; padding-top: 5px;} /* Sticky Tabs */ .stickyTabs { position: relative; order: 1; margin-top: 45px; } .stickyTabs ul li a { width: 335px; } /* Mobile menu Slide out*/ .menuContainer { width: 100%; margin-right: -420px; margin-left: 0; background-color: #111111; overflow-x: hidden; } .menuContainer .mobileWrapper { display: flex; flex-wrap: wrap; } } /* ============================ Site Footer * ============================*/ .footer { display: inline-block; float: left; width: 100%; color:#FFF; background-color: #111111; padding: 73px 0 0; margin-top: 185px; position: relative; } .footer .topWrap { overflow: hidden; } .footer .bottomWrap { overflow: visible; } .footer a { color: #FFF; text-decoration: none; } .footer a:hover, .footer a:focus { text-decoration: underline; } .footer .wrapper{ max-width: 1100px;} .footer .footerLogo { margin: 8px 0 11px 0; max-width: 350px; width: 100%; display: block; } .footer .address { margin: 0 30px 17px 0; line-height: 1.7; display: inline-block; } .footer .address:before { font-family: "Font Awesome 5 Free"; content: "\f3c5"; font-weight: 900; padding-right: 5px; color: #333333; } .footer .address a { text-decoration: underline; } .footer .phoneNum { display: inline-block; } .footer .phoneNum:before { font-family: "Font Awesome 5 Free"; content: "\f879"; font-weight: 900; padding-right: 5px; color: #333333; } .footer .phoneNum a { text-decoration: underline; } .footer .address a:hover, .footer .address a:focus, .footer .phoneNum a:hover, .footer .phoneNum a:focus { text-decoration: none; } .footer .footerlinks { width: 85%; } .footer .footerlinks ul { list-style: none; margin-bottom: 17px; } .footer .footerlinks ul li { display: inline; margin: 0 33px 11px 0px; line-height: 2em; } .footer .footerlinks ul li:first-child { margin-left: 0; } .footer .footerlinks ul li a { font-size: 0.875em; font-family: input-sans-compressed, sans-serif; font-weight: 200; font-style: normal; text-transform: uppercase; } .footer .copyright { color: #FFF; font-size: 0.875em; font-family: input-sans-compressed, sans-serif; font-weight: 200; font-style: normal; text-transform: uppercase; } .footer .socialbar { background-image: url('../images/gradient/gradient-repeat.jpg'); background-color: #cc1b2d; background-position: right top; background-repeat: repeat-y; -moz-transform: skew(-30deg, 0deg); -webkit-transform: skew(-30deg, 0deg); -o-transform: skew(-30deg, 0deg); -ms-transform: skew(-30deg, 0deg); transform: skew(-30deg, 0deg); display: inline-block; margin: 25px 0px 0px 0px; padding: 12px 35px; } .footer .socialbar ul { -moz-transform: skew(30deg, 0deg); -webkit-transform: skew(30deg, 0deg); -o-transform: skew(30deg, 0deg); -ms-transform: skew(30deg, 0deg); transform: skew(30deg, 0deg); } .footer .socialbar li { font-size: 1.286rem; display: inline-block; padding: 0 21px; } .footer .socialbar li:last-child { padding-right: 0; } .footer .socialbar li:first-child { padding-left: 0; } .footer .socialbar a { color:#FFF; } .footer .socialbar a span { display:none; } .footer .footerBadges { margin-bottom: 41px; } .footer .footerBadges a:first-child img { margin-right: 72px; } .footer .cta-button { margin: auto; border-color: #FFF; min-width: 285px; } .footer .cta-button.supportGive span:before { font-family: "Font Awesome 5 Free"; content: "\f06b"; font-weight: 900; padding-right: 5px; } .footer .topBorder { height: 54px; width: 100%; background-image: url('../images/gradient/footer.png'); background-position: top left; background-repeat: no-repeat; position: absolute; top: -1em; } @media screen and (max-width: 1023px) { .footer { text-align: center; } .footer .address { margin-right: 0; } .footer .phoneNum p { margin-bottom: 30px; } .footer .footerLogo { margin: 8px auto 16px; } .footer .footerlinks { width: 100%; } .footer .footerlinks ul li { display: block; margin: 0px; } .footer .footerRight { padding-top: 40px; } .footer .footerBadges a:first-child img { margin: 0 auto 20px; display: block; } } @media screen and (max-width: 540px) { .footer .socialbar li { padding: 0 10px; } } /* ============================ YouTube Magnific Popup * ============================*/ .youtube{max-width:100%; height:auto;position:relative;cursor:pointer} .youtube .popup-youtube > img { width: 100%; } .play{opacity:1;background-size:55%; position: absolute; top : 50%; left : 50%; transform: translate(-50%, -50%); color: #FFF; } .play img { margin: 0 auto 10px; } .play span { font-family: "input-sans-compressed",sans-serif; font-size: 0.938rem; text-transform: uppercase; letter-spacing: 0.113em; } .youtube iframe { max-width:100%!important; } button.mfp-close { border: none; } .mfp-bg{top:0;left:0;width:100%;height:100%;z-index:1042;overflow:hidden;position:fixed;background:#0b0b0b;opacity:0.8;}.mfp-wrap{top:0;left:0;width:100%;height:100%;z-index:1043;position:fixed;outline:none!important;-webkit-backface-visibility:hidden}.mfp-container{text-align:center;position:absolute;width:100%;height:100%;left:0;top:0;padding:0 8px;-webkit-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{cursor:pointer;}.mfp-auto-cursor .mfp-content{cursor:auto} .mfp-close,.mfp-arrow,.mfp-preloader,.mfp-counter{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mfp-loading.mfp-figure{display:none}.mfp-hide{display:none!important}.mfp-preloader{color:#CCC;position:absolute;top:50%;width:auto;text-align:center;margin-top:-0.8em;left:8px;right:8px;z-index:1044}.mfp-preloader a{color:#CCC}.mfp-preloader a:hover{color:#FFF}.mfp-s-ready .mfp-preloader{display:none}.mfp-s-error .mfp-content{display:none} button.mfp-close,button.mfp-arrow{overflow:visible;cursor:pointer;background:transparent;-webkit-appearance:none;display:block;padding:0;z-index:1046;-webkit-box-shadow:none;box-shadow:none}button::-moz-focus-inner{padding:0;border:0}.mfp-close{width:44px;height:44px;line-height:44px;position:absolute;right:0;top:0;text-decoration:none;text-align:center;opacity:0.65;padding:0 0 18px 10px;color:#FFF;font-style:normal;font-size:1.750em;font-family:Arial,Baskerville,monospace} .mfp-close:hover,.mfp-close:focus{opacity:1;}.mfp-close:active{top:1px}.mfp-image-holder .mfp-close,.mfp-iframe-holder .mfp-close{color:#FFF;right:-6px;text-align:right;padding-right:6px;width:100%}.mfp-counter{position:absolute;top:0;right:0;color:#CCC;font-size:.750em;line-height:18px;white-space:nowrap}.mfp-arrow{position:absolute;opacity:0.65;margin:0;top:50%;margin-top:-55px;padding:0;width:90px;height:110px;-webkit-tap-highlight-color:transparent} .mfp-arrow:active{margin-top:-54px}.mfp-arrow:hover,.mfp-arrow:focus{opacity:1;}.mfp-arrow:before,.mfp-arrow:after,.mfp-arrow .mfp-b,.mfp-arrow .mfp-a{content:'';display:block;width:0;height:0;position:absolute;left:0;top:0;margin-top:35px;margin-left:35px;border:medium inset transparent}.mfp-arrow:after,.mfp-arrow .mfp-a{border-top-width:13px;border-bottom-width:13px;top:8px}.mfp-arrow:before,.mfp-arrow .mfp-b{border-top-width:21px;border-bottom-width:21px;opacity:0.7}.mfp-arrow-left{left:0} .mfp-arrow-left:after,.mfp-arrow-left .mfp-a{border-right:17px solid #FFF;margin-left:31px}.mfp-arrow-left:before,.mfp-arrow-left .mfp-b{margin-left:25px;border-right:27px solid #3F3F3F}.mfp-arrow-right{right:0}.mfp-arrow-right:after,.mfp-arrow-right .mfp-a{border-left:17px solid #FFF;margin-left:39px}.mfp-arrow-right:before,.mfp-arrow-right .mfp-b{border-left:27px solid #3F3F3F}.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:-40px}.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%;background:#000}img.mfp-img{width:auto;max-width:100%;height:auto;display:block;line-height:0;-webkit-box-sizing:border-box;box-sizing:border-box;padding:40px 0 40px;margin:0 auto}.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;-webkit-box-shadow:0 0 8px rgba(0,0,0,0.6);box-shadow:0 0 8px rgba(0,0,0,0.6);background:#444}.mfp-figure small{color:#BDBDBD;display:block;font-size:.750em;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:#F3F3F3;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 screen and (max-width:800px) and (orientation:landscape),screen 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(0,0,0,0.6);bottom:0;margin:0;top:auto;padding:3px 5px;position:fixed;-webkit-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(0,0,0,0.6);position:fixed;text-align:center;padding:0}}@media all and (max-width:900px){.mfp-arrow{-webkit-transform:scale(0.75);transform:scale(0.75)} .mfp-arrow-left{-webkit-transform-origin:0;transform-origin:0}.mfp-arrow-right{-webkit-transform-origin:100%;transform-origin:100%}.mfp-container{padding-left:6px;padding-right:6px}}.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} /* ============================ Slick Slider * ============================*/ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; width:100%; } .slick-list.dragging { cursor: pointer; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } .slick-track { position: relative; top: 0; left: 0; display: block } .slick-track:before, .slick-track:after { display: table; content: '' } .slick-track:after { clear: both } .slick-loading .slick-track { visibility: hidden } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; overflow: hidden; } [dir='rtl'] .slick-slide { float: right } .slick-slide img { display: block } .slick-slide.slick-loading img { display: none } .slick-slide.dragging img { pointer-events: none } .slick-initialized .slick-slide { display: block } .slick-loading .slick-slide { visibility: hidden } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent } .slick-arrow.slick-hidden { display: none } .slick-prev:hover,.slick-prev:focus,.slick-next:hover,.slick-next:focus{color:transparent;background:transparent} .slick-prev:hover:before,.slick-prev:focus:before,.slick-next:hover:before,.slick-next:focus:before{opacity:1} .slick-prev.slick-disabled:before,.slick-next.slick-disabled:before{opacity:.25} .slick-prev,.slick-next{font-size:0;line-height:0;z-index:1;position:absolute;top:50%;display:block;width:20px;height:20px;padding:0;-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);cursor:pointer;color:transparent;border:none;outline:none;background:transparent} .slick-prev { left: -30px; background-image: url(../images/arrow-left.png); background-position: center center; background-repeat: no-repeat; } .slick-prev:before { content:""; padding-top: 0px; } [dir='rtl'] .slick-prev{right:-30px;left:auto} .slick-prev:before{content:' ';color:#7BAFD4} [dir='rtl'] .slick-prev:before{content:' ';color:#7BAFD4} .slick-next { right: -30px; background-image: url(../images/arrow-right.png); background-position: center center; background-repeat: no-repeat; } .slick-next:before { content:""; padding-top: 0px; } [dir='rtl'] .slick-next{right:auto;left:0px} .slick-next:before{content:' ';color:#7BAFD4} [dir='rtl'] .slick-next:before{content:' ';color:#7BAFD4} .slick-dotted.slick-slider{margin:0 auto;} ul.slick-dots { position: absolute; display: block; width: 100%; padding: 0; margin: 0; bottom:2em; list-style: none; text-align: center; text-indent: 0; z-index: 999; } ul.slick-dots > li { position: relative; display: inline-block; width: 35px; height: 4px; margin: 0 10px; padding: 0; cursor: pointer; clear: none;} ul.slick-dots li:before { content: ''; } ul.slick-dots > li button { font-size: 0; line-height: 0; display: block; width: 35px; height: 4px; cursor: pointer; color: transparent; border: 0; outline: none; background-color: #D9D9D9; } ul.slick-dots li button:hover, ul.slick-dots li button:focus { outline: none; } ul.slick-dots li button:hover:before, ul.slick-dots li button:focus:before { opacity: 1; } ul.slick-dots > li.slick-active button { background-image: url('../images/gradient/gradient-repeat.jpg'); background-color: #cc1b2d; background-position: right top; background-repeat: repeat-y; -moz-transform: skew(-30deg, 0deg); -webkit-transform: skew(-30deg, 0deg); -o-transform: skew(-30deg, 0deg); -ms-transform: skew(-30deg, 0deg); transform: skew(-30deg, 0deg); } ul.slick-dots li:before{content:''} /* ============================ Homepage Impact * ============================*/ .home-impact { width:100%; margin:0; position: relative;} .home-impact .overlay { opacity:.75; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: -moz-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 100%); background: -webkit-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 100%); background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 100%); z-index: 1; } .home-impact .slick-slide { position: relative; } .home-impact .slide-item { min-height: 565px; } .home-impact .caption { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; max-width: 1280px; margin: 2em auto; z-index: 2;} .home-impact .caption.center-left { top: 40%; } .home-impact .caption.center-right { top: 40%; text-align: right; } .home-impact .caption.center-center{ top: 40%; text-align: center; } .home-impact .caption h1.title, .home-impact .caption h2.title { font-family: "input-sans-compressed",sans-serif; text-transform: uppercase; font-size: 3.438em; color: #ffffff; margin-bottom: 2rem; letter-spacing: 0.08em; } .home-impact .caption h1.title span { display: block; font-size: 0.818em; } .home-impact .caption p { width: 50%; margin: 15px auto; color:#FFFFFF; } .home-impact .caption a.cta-button { color: #FFFFFF; border: 2px solid #FFFFFF; margin-right: 0; } .home-impact .caption a.cta-button:hover, .home-impact .caption a.cta-button:focus { color: #FFFFFF; } .home-impact .video-texture { transform: translate3d(0,0,0); } .home-impact video { display:block; object-fit: cover;overflow: hidden; max-height:717px; min-width:100%; } .slide-item .mobileShow { display: none; } /* Slider Play/Pause Controls */ .playSlide, .pauseSlide { z-index: 1; position: absolute; bottom: 25px; left: 25px; cursor: pointer; background: none; border: none; } .playSlide span, .pauseSlide span { color: #fff; display: block; position: absolute; text-indent: -999999px; } .playSlide:after, .pauseSlide:after { color: #fff; font-family: 'Font Awesome 5 Free'; } .playSlide:after { content: '\f04b'; } .pauseSlide:after { content: '\f04c'; } .home-impact .bottomBorder { height: 35px; width: 100%; background-image: url('../images/gradient/impact.png'); background-position: top left; background-repeat: no-repeat; position: absolute; bottom: -1em; } @media all and (max-width:960px){ .home-impact .caption { margin:0 auto; } .home-impact .caption.center-left { text-align:center; margin-left:auto;margin-right:auto; max-width:80%; top: 40%;} .home-impact .caption.center-right { text-align:center; margin-left:auto;margin-right:auto; padding-left:0; max-width:80%; top: 40%; } .home-impact .caption.center-center{ margin:0 auto; } .home-impact .caption h1.title, .home-impact .caption h2.title { font-size: 2.5em; margin-bottom:0; line-height:1em; transition: all .25s ease; } .home-impact .caption p { width: 85%; } } @media all and (max-width:481px){ .home-impact .slide-item { min-height: auto; } .home-impact .slide-item .desktopShow { display: none; } .home-impact .slide-item .mobileShow { display: block;} } /* ============================ Homepage Intro * ============================*/ .featured-intro { min-height: 566px; position: relative; } .featured-intro .wrapper { width:100%; max-width:1510px; margin: 2em 0 3em auto; padding: 0 1em; } .featured-intro .wrapper:after { content: ""; clear: both; display: block; } .featured-intro .intro { margin-bottom:2em; padding-top:3em; } .featured-intro .heading { margin-bottom:1.5em; } .featured-intro .heading h2 { padding-bottom: .25em; font-family: "utopia-std",serif; } .featured-intro .introImage { position: absolute; right: 0; top: 0; max-height: 566px; } .featured-intro img { float: right;} .featured-intro .triBg {position: absolute; left: 0; top: 0; height: 100%;width: 100%; background-image: url('../images/triangle.png');background-position: left center; background-repeat: no-repeat; background-position-x: 35px; } @media all and (max-width: 1023px){ .featured-intro .wrapper { padding: 0 2em; } .featured-intro .introWrap { position: relative; display: inline-block; } .featured-intro .introImage { position: relative; margin-left: 2em; text-align: right; } .featured-intro .triBg { width: 55%; top: 17%; height: 55%; background-size: contain; } } /* ============================ Homepage Video * ============================*/ .featuredVideoSlider { width: 100%; max-width: 1110px; margin: 2em auto 3em auto; padding: 0 1em; overflow: hidden; } .featuredVideoSlider h2 { font-size: 1.500em; max-width: 715px; margin: 1.25em auto 1.667em; text-align: center; font-family: "utopia-std",serif; } .testimonialSummary .quote { font-family: "input-sans-compressed", Arial, Helvetica, sans-serif; font-size: 0.938em; margin-top: 40px; padding: 2.5em 1.25em; letter-spacing: 0.113em; text-transform: uppercase; border-top: 1px solid #D9D9D9; border-bottom: 1px solid #D9D9D9; position: relative; margin-bottom: 30px; } .testimonialSummary .quoteCredit { font-family: "input-sans-compressed", Arial, Helvetica, sans-serif; font-size: 0.875em; line-height: 1.9; text-transform: uppercase; padding: 0.5em 1.25em; } .testimonialSummary .quoteCredit .readmore { margin-top: 15px; } .testimonialSummary .quote:before { content: '\201C'; position: absolute; top: -25px; left: 0; background: #fff; width: 2rem; height: 2rem; font: 8em/1.08em 'PT Sans', sans-serif; color: #666; text-align: center; padding-right: 10px; } .testimonialSummary .quote:after { content: '\201D'; position: absolute; bottom: -10px; right: 0; background: #fff; width: 2rem; height: 2rem; font: 8em/1.08em 'PT Sans', sans-serif; color: #666; text-align: center; padding-left: 10px; } .featuredVideoSlider ul.slick-dots { bottom: -4em; } .featuredVideoSlider .calloutText { margin: 110px auto 0px; display: block; } @media all and (max-width: 960px){ .featuredVideoSlider { padding: 0 2em; } } /* ============================ Homepage Banner * ============================*/ .homeBanner { position: relative; min-height: 260px; padding: 10em 0; margin:3em 0; background-image: url('../images/red-background.jpg'); background-color: #cc1b2d; background-position: right top; background-repeat: repeat-y; background-size: cover; } .homeBanner .wrapper { position:relative; width:100%; max-width:1110px; margin:0 auto; padding:0 1em; z-index:2; } .homeBanner .wrapper:after { content: ''; display: block; clear: both; } .homeBanner .wrapper h2 { font-family: "utopia-std", serif; color: #FFD043; font-size: 3.438em; } .homeBanner .wrapper h2 span { color: #FFF; font-family: utopia-std, serif; font-weight: 400; font-style: italic; } .homeBanner .wrapper p { color: #FFFFFF; margin-bottom: 28px; } .homeBanner .topBorder { height: 68px; width: 100%; background-image: url('../images/gradient/foundation-banner-top.png'); background-position: top left; background-repeat: no-repeat; position: absolute; top: 0; } .homeBanner .bottomBorder { height: 54px; width: 100%; background-image: url('../images/gradient/foundation-banner-bottom.png'); background-position: top left; background-repeat: no-repeat; position: absolute; bottom: -1em; } @media all and (max-width: 960px){ .homeBanner .wrapper { padding: 0 2em; } } /* ============================ Homepage Tabs * ============================*/ .homeTabs { width: 100%; max-width: 1110px; margin: 50px auto 0;padding: 0 .5em; } .homeTabs .calloutText { margin: 60px auto 80px; } .homeTabs .tabHeading h2 { font-family: "utopia-std", serif; margin: 30px 0; } .homeTabs ul.homeTabsToggle { margin: 71px auto 40px; list-style: none; display: block; text-align: center; } .homeTabs ul.homeTabsToggle li { display: inline-block; } .homeTabs ul.homeTabsToggle li a { font-family: "input-sans-compressed", Arial, Helvetica, sans-serif; text-decoration: none; text-transform: uppercase; font-size: 0.938em; padding-right: 30px; } .homeTabs ul.homeTabsToggle li:last-child a { padding-right: 0; } .homeTabs ul.homeTabsToggle li a:hover, .homeTabs ul.homeTabsToggle li a:focus { color: #BA0C2F; text-decoration: underline; } /* Tab panel */ .homeTabs.featuredTab.r-tabs .r-tabs-panel { display: none; z-index: 1; } /* Accordion anchor */ .homeTabs.featuredTab.r-tabs .r-tabs-accordion-title .r-tabs-anchor { display: none; padding: 10px; text-decoration: none; font-size: 0.875rem; } /* Active accordion anchor */ .homeTabs.featuredTab.r-tabs .r-tabs-accordion-title.r-tabs-state-active .r-tabs-anchor { background: #fff; } .homeTabs p:not(:last-child) { margin-bottom: 30px; } @media all and (max-width: 960px){ .homeTabs { padding: 0 2em; } } /* ============================ Homepage Events * ============================*/ .homeEvents { position: relative; min-height: 260px; padding: 10em 0 12em; margin: 5em 0; background-image: url('../images/events-background.jpg'); background-color: #cc1b2d; background-position: right top; background-repeat: repeat-y; } .homeEvents .wrapper:after { content: ""; clear: both; display: block; } .homeEvents .wrapper { position: relative; width: 100%; max-width: 1110px; margin: 0 auto; padding: 0 1em; z-index: 2; } .homeEvents h2 { font-family: "input-sans-compressed", Arial, Helvetica, sans-serif; text-transform: uppercase; font-size: 1.313em; margin-bottom: 35px; color: #FFF; } .homeEvents .eventWrap { position: relative; background-color: #FFF; min-height: 178px; width: 26.5%; margin: 0 8.75% 2.500em 0; overflow: unset; } .homeEvents .eventWrap:last-child { margin-right: 0; } .homeEvents .date { position: absolute; left: -35px; top: 10px;text-align: center; background-color: #BA0C2F; color: #FFF; min-width: 70px; -moz-transform: skew(-30deg, 0deg); -webkit-transform: skew(-30deg, 0deg); -o-transform: skew(-30deg, 0deg); -ms-transform: skew(-30deg, 0deg); transform: skew(-30deg, 0deg); } .homeEvents .date .dateWrap { -moz-transform: skew(30deg, 0deg); -webkit-transform: skew(30deg, 0deg); -o-transform: skew(30deg, 0deg); -ms-transform: skew(30deg, 0deg); transform: skew(30deg, 0deg); padding: 5px 0 10px; } .homeEvents .date a { text-decoration: none; } .homeEvents .date .month { font-size: 0.688em; text-align: center; font-weight: 500; text-transform: uppercase; display: inline-block; font-family: "input-sans-compressed", Arial, Helvetica, sans-serif; } .homeEvents .date .day { text-align: center; font-size: 1.375em; font-family: "input-sans-compressed", Arial, Helvetica, sans-serif; padding: 0; margin: 0; line-height: .7em; display: block; } .homeEvents .date .year { font-size: 0.688em; text-align: center; font-weight: 500; text-transform: uppercase; display: block; font-family: "input-sans-compressed", Arial, Helvetica, sans-serif; margin-top: 2px; } /* PDH */ .homeEvents .eventDescription { align-self: center; padding: 1.250em 1.250em 1.250em 4em; } .homeEvents .title { margin-bottom: 5px; line-height: 1.3em; } .homeEvents .title a { color: #BA0C2F; } .homeEvents .title a:hover, .homeEvents .title a:focus { text-decoration: none; } .homeEvents .description { font-family: "input-sans-compressed", Arial, Helvetica, sans-serif; } .homeEvents .topBorder { height: 46px; width: 100%; background-image: url('../images/gradient/news-top.png'); background-position: top left; background-repeat: no-repeat; position: absolute; top: -1em; } .homeEvents .bottomBorder { height: 59px; width: 100%; background-image: url('../images/gradient/news-bottom.png'); background-position: top left; background-repeat: no-repeat; position: absolute; bottom: -1em; } @media all and (max-width: 960px){ .homeEvents .wrapper { padding: 0 2em; } .homeEvents .eventWrap { width: 85%!important; margin-left: 2.813em; } } /* ============================ Homepage News * ============================*/ .homeNews .wrapper:after { content: ""; clear: both; display: block;padding-bottom: 35px; } .homeNews .wrapper { position: relative; width: 100%; max-width: 1110px; margin: 0 auto; padding: 0 .5em; z-index: 2; } .homeNews h2 { font-family: "input-sans-compressed", Arial, Helvetica, sans-serif; text-transform: uppercase; font-size: 1.313em; margin-bottom: 35px; } .homeNews .featuredNews { margin-bottom: 35px; } .homeNews .featuredNews .title a { font-size: 1.188em; color: #333333; text-decoration: none; } .homeNews .date { font-family: "input-sans-compressed", Arial, Helvetica, sans-serif; font-size: 0.875em; } .homeNews .title a { color: #BA0C2F; } .homeNews .title a:hover, .homeNews .title a:focus { text-decoration: none; } .homeNews .summary { margin: 20px 0; } .homeNews .readmore { color: #BA0C2F; font-family: "input-sans-compressed", Arial, Helvetica, sans-serif; font-size: 0.938em; text-transform: uppercase; } @media screen and (max-width: 960px) { .homeNews .wrapper { padding: 0 2em; } .homeNews .featuredNews .date { margin-top: 1em; } .homeNews .col6 { margin-bottom: 35px; } .homeNews .col6:last-child { margin-bottom: 0; } .homeNews .col6 .col5 { width: 39.5%!important; margin-right: 2%; } .homeNews .col6 .col7 { width: 56.5%!important; margin-right: 2%; } } .landing { width: 100%; max-width: 1110px; margin: 2em auto; } .landing .col3.sidebar { float: right; padding: 20px 15px; } /* ============================ Sidebar and Right Navigation * ============================*/ .sidebar .rightNav .row > input, .sidebar .rightNav ul li.row > span.icon { display: none; } .sidebar .rightNav .title, .sidebar .addLinks .title { font-family: "input-sans-compressed", Arial, Helvetica, sans-serif; text-transform: uppercase; display: block; letter-spacing: 0.135em; font-size: 1.125em; margin-bottom: 0.5em; } .sidebar .rightNav ul { list-style: none; margin:0; } .sidebar .rightNav .content > ul > li { border-bottom:1px solid #D9D9D9; padding-left: 1.25em; } .sidebar .rightNav ul li:last-child { border-bottom: none; } .sidebar .rightNav .content > ul:not(.subMenu) li a, .sidebar .rightNav input[type="checkbox"] + label { display: inline-block; margin: .75em 0; font-weight:400; font-size:.875rem; color:#333333; letter-spacing:.05rem; text-decoration: none; } .sidebar .rightNav .content ul.subMenu li a { display: inline-block; line-height: 1.75em; font-weight: 400; font-size:.875rem; color:#333333; letter-spacing:.05rem; text-decoration: none; margin: 0; } .sidebar .rightNav .content > ul li a:hover { text-decoration: underline; } .sidebar .addLinks { margin:2em 0; } .sidebar .addLinks ul { list-style: none; margin:0; } .sidebar .addLinks ul li { border-bottom: 1px solid #D9D9D9; padding-left: 1.25em; } .sidebar .addLinks ul li:last-child { border-bottom: none; } .sidebar .addLinks ul li a { display:block; margin:.75rem 0; font-weight:400; font-size:.875rem; color:#333333; letter-spacing:.05rem; text-decoration: none; } .sidebar .contactInfo { margin:2em 0; } .sidebar .contactInfo h2 { font-size: 1.500em; } .sidebar .contactInfo .content h3 { font-family: "utopia-std",serif; text-transform: none; font-size: 1.125em; margin-bottom: 20px; } /*Left Navigation Dropdown */ /* .sidebar .rightNav input[type="checkbox"] { margin-left: -20px; height: 30px; position: absolute; width: 30px; z-index: 3000; opacity: 0; } .sidebar .rightNav li > input[type="checkbox"] { cursor: pointer; } .sidebar .rightNav .plusMinus { margin-left: -20px; display: inline-block; position: relative; width: 15px; height: 17px; z-index: 0; } .sidebar .rightNav .plusMinus { cursor: pointer; } */ .sidebar .rightNav .rightNavToggle { margin: 0.75em 3px 0.75em -20px; display: flex; position: relative; background-color: transparent; border: 0; font-family: "utopia-std",serif; font-size: .875rem; color: #333333; letter-spacing: .05rem; } .sidebar .rightNav .rightNavToggle:before { content: '\f067'; font-family: "Font Awesome 5 Free"; font-weight: 900; background: -webkit-linear-gradient(#CD1C2E, #FFB40D);-webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-right: 7px; display: inline-block; vertical-align: top; } .sidebar .rightNav .rightNavToggle.navOpen:before { content: '\f068'; } /* .sidebar .rightNav input[type="checkbox"] + label span { display: inline-block; } */ /* .sidebar .rightNav input[type="checkbox"]:checked + .plusMinus span:first-child{ opacity: 0; transform: rotate(0deg) scale(0.2, 0.2); } .sidebar .rightNav input[type="checkbox"]:checked + .plusMinus span:nth-child(2) { -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); } */ .sidebar .rightNav #information-nav .plusMinus { margin-left: 10px; } .sidebar .rightNav .content > ul > li > .rightNavToggle ~ ul { display: none !important; } .sidebar .rightNav .content > ul > li > .rightNavToggle.navOpen ~ ul { display: block !important; } .sidebar .rightNav .content > ul > li > ul > li > .rightNavToggle ~ ul { display: none !important; } .sidebar .rightNav .content > ul > li > ul > li > .rightNavToggle.navOpen ~ ul { display: block !important; } .sidebar .rightNav .active { position: relative; } .sidebar .rightNav.active:before { left: -16px; left: -15px; margin: 9px 10px 0 0; height: 2px; content: " "; background-color: #fff; width: 12px; display: inline-block; position: absolute; z-index: 99; } .sidebar .rightNav .content ul li .subMenu { margin: 0 0 15px 15px; } @media all and (max-width: 1023px){ .sidebar nav, .sidebar .addLinks { position: relative; margin:0 1em; } .sidebar .contactInfo { position: relative; margin-left: 1em; margin-right: 1em; } .sidebar .rightNav > ul { margin-left: auto; margin-right: auto; margin-bottom:2em; } /* .sidebar .rightNav ul li.row > input[type=checkbox] { position: absolute; left: 0;top:0; right:0; width:100%; height: 100%; max-height: 55px; z-index: 1; opacity: 0; cursor: pointer; padding: 0; margin: auto; display: inline-block; border: none; opacity: 0; } .sidebar .rightNav ul li.row > input[type=checkbox] ~ span.icon{ color:#333333; transition:all .5s ease; } .sidebar .rightNav ul li.row > input[type=checkbox]:checked ~ div { margin-top: 0; max-height: 0; opacity: 0; display: none; } */ /* .sidebar .rightNav ul li.row > span.icon { position:relative; border:1px solid #F4F4F7; display:block; font-family: open-sans, sans-serif; font-weight:600; font-size:.938em; padding:1em; color:#333333; text-transform: uppercase; padding-left: 3em; } .sidebar .rightNav ul li.row > span.icon:before { content: url('../images/icons/minus.png'); font-family: 'Font Awesome 5 Free'; font-size: 1rem; font-style: normal; padding: 12px 22px; position: absolute; left: 3px; top: 0px; text-indent: 0; } .sidebar .rightNav ul li.row > input[type=checkbox]:checked ~ span.icon{ background:#FFFFFF; color:#40444D; transition:all .5s ease; } .sidebar .rightNav ul li.row > input[type=checkbox]:checked ~ span.icon:before { content: url('../images/icons/plus.png'); font-family: 'Font Awesome 5 Free'; top: 3px; left: 3px;} */ .sidebar .rightNav .content ul li a { color:#26345C; } .sidebar .rightNav ul li .title a { padding: 11px; } .sidebar .rightNav .content > ul { padding-top: 7px; } .sidebar .rightNav div.content { position: relative; overflow: hidden; opacity: 1; z-index: 2; width: 100%; } .sidebar .rightNav div li::-moz-list-bullet { font-size: 0.750em; margin-right: 5px; } } /* ============================ Landing Impact Area * ============================*/ .impact { position: relative; height:439px; width:100%; overflow:hidden; background: #000; } .impact .overlay { opacity:.75; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: -moz-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 100%); background: -webkit-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 100%); background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 100%); z-index: 1; } .impact img { display:block; height:439px; width: 100%; object-fit:cover; } .impact h1.page-title, .impact h2.page-title { font-family: "input-sans-compressed",sans-serif; text-transform: uppercase; font-weight: 400; line-height:1em; color:#FFFFFF; transition: all .25s ease; letter-spacing: 0.1em; } .impact .text-overlay { position:absolute; width:100%; max-width:1110px; margin:0 auto; bottom: 36%; left: 0; right: 0; text-align: center; z-index: 2; } .interior.impact { height:280px; } .impact .slick-slide { position: relative; } .impact .caption { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; max-width: 1280px; margin: 2em auto; z-index: 2;} .impact .caption.center-left { top: 40%; } .impact .caption.center-right { top: 40%; text-align: right; } .impact .caption.center-center{ top: 40%; text-align: center; } .impact .caption p { width: 50%; margin: 15px auto; color:#FFFFFF; } .impact .caption a.cta-button { color: #FFFFFF; border: 2px solid #FFFFFF; margin-right: 0; } .impact .caption a.cta-button:hover, .home-impact .caption a.cta-button:focus { color: #FFFFFF; } .sliderLandingImpact .caption { position:absolute; top:40%; bottom:0; left:0; right:0; width:100%; max-width:1110px; margin:2em auto; } .sliderLandingImpact .caption h1.title, .sliderLandingImpact .caption h2.title { font-family: "input-sans-compressed",sans-serif; text-transform: uppercase; font-size: 3.438em; color: #ffffff; margin-bottom: 2rem; } .sliderLandingImpact .caption h1.title span { display: block; font-size: 0.818em; } /* .home-impact .caption p { font-family: open-sans, sans-serif; font-size: 0.875em; color:#FFFFFF; } */ .sliderLandingImpact .caption a.cta-button { color: #FFFFFF; border: 2px solid #FFFFFF; margin-right: 0; } .sliderLandingImpact .caption a.cta-button:hover, .sliderLandingImpact .caption a.cta-button:focus { color: #FFFFFF; } /*No Impact Image */ .impact.noImpact { position: relative; height:auto; width:100%; overflow:hidden; background: #000; } .impact.noImpact .text-overlay { position: relative; width:100%; max-width:1110px; margin:5em auto; bottom: auto; right: auto; left: auto; } .impact.noImpact h1.page-title { font-family: "input-sans-compressed",sans-serif; text-transform: uppercase; font-weight: 400; font-size: 2.813em; line-height:1em; color:#FFFFFF; transition: all .25s ease; } @media all and (max-width:1280px){ .impact .text-overlay { margin: 0 1em; } } @media all and (max-width:1060px){ .home-impact .caption p { display:none; } } @media all and (max-width: 960px ){ .impact .text-overlay { left: 0; right: 0; top: 35%; text-align: center; } .impact .caption { margin:0 auto; } .impact .caption.center-left { text-align:center; margin-left:auto;margin-right:auto; max-width:80%; top: 40%;} .impact .caption.center-right { text-align:center; margin-left:auto;margin-right:auto; padding-left:0; max-width:80%; top: 40%; } .impact .caption.center-center{ margin:0 auto; } .impact .caption h1.title, .home-impact .caption h2.title { font-size: 2.5em; margin-bottom:0; line-height:1em; transition: all .25s ease; } .impact .caption p { width: 85%; } .impact h1.page-title, .impact.noImpact h1.page-title { font-size: 2.000em; } } @media all and (max-width:720px){ .impact .page-title h1 { font-size: 2.813em; transition: all .25s ease; } } @media all and (max-width:481px){ .impact .slide-item { min-height: auto; } .impact .slide-item .desktopShow { display: none; } .impact .slide-item .mobileShow { display: block;} .impact .text-overlay { width: auto; } } @media all and (min-width: 481px) and (-ms-high-contrast: none), all and (min-width: 481px) and (-ms-high-contrast: active) { .impact .slick-initialized .slick-slide { display: flex; align-items: center; justify-content: center; } .impact img { width: auto; } } /* =============================================== * Left Navigation * ===============================================*/ .topDividerWrapper { padding: 0; } .topDivider {position: relative; float:left; display: flex; flex-wrap: wrap;width: 36.5%; margin:-15px auto 0 -35px; min-width: 720px; } .landing .topDivider { margin: -2% auto 0 0; padding: 11px 0px; } .landing .noImpact ~ .topDividerWrapper > .topDivider { margin: -56px auto 0 0; } .leftContainer { width: 100%; } .leftnav { z-index: 3; width: 100%; } .leftnavInner { display: block; max-width: 1200px; width: 100%; margin: 0 auto; } .leftnav > ul { margin-bottom: 20px; padding-bottom: 12px; } .leftnav .content > ul { padding: 14px 0 14px 55px; letter-spacing: 0.025em; } .leftnav ul { margin: 0; padding: 0; text-indent: 0; list-style: none; } .leftnav ul li.row { position: relative; padding: 0; margin: 0; cursor: pointer; } .leftContainer > .row { position: relative; padding: 0; margin: 0; } .leftnav > .leftnavInner > ul li.row > .content { margin-top: 0; max-height: 0; opacity: 0; display: none; } .leftnav > .leftnavInner > ul li.row.navOpen > .content { max-height: none; opacity: 1; display: block;} /* Left Navigation Icon */ .leftnavInner .leftnavBtn { float: right; margin-top: 9px; } .leftnavBtn span{ display: block; width: 20px; height: 2px; margin-bottom: 5px; position: relative; background: #fff; border-radius: 3px; z-index: 1; transform-origin: 4px 0px; transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease; } .leftnavBtn span:first-child{ transform-origin: 0% 0%; } .leftnavBtn span:nth-last-child(2){ transform-origin: 0% 100%; } .leftnavBtn:hover span:first-child{ transform: translateY(-3px); -webkit-transform: translateY(-3px); -moz-transform: translateY(-3px); } .leftnavBtn:hover span:nth-last-child(1) { transform: translateY(3px); -webkit-transform: translateY(3px); -moz-transform: translateY(3px); } /* Transform all the slices of hamburger into a crossmark. */ .leftnav > .leftnavInner > ul li.row.navOpen > .leftnavBtn span{ opacity: 1; transform: rotate(45deg) translate(-4px, -11px); background: #fff;} .leftnav > .leftnavInner > ul li.row.navOpen > .leftnavBtn span:nth-last-child(3){ opacity: 0; transform: rotate(0deg) scale(0.2, 0.2); } .leftnav > .leftnavInner > ul li.row.navOpen > .leftnavBtn span:nth-last-child(2){ transform: rotate(-45deg) translate(0, 9px); } /*Left Navigation Dropdown */ .leftnav .content .plusMinus span.hide { position: absolute; left: -99999px; } .leftnav .content .plusMinus { margin-left: -20px; display: inline-block; position: relative; width: 15px; height: 17px; z-index: 0; background-color: transparent; border: 0; top: -8px; } .leftnav .content .plusMinus { cursor: pointer; } .leftnav .content .plusMinus span:first-child{ display: block; position: absolute; width: 94%; height: 2px; background: #FFD043; top: calc(50% - -1.5px); -moz-transition: all .25s ease; -webkit-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; right: calc(50% - 9px); } .leftnav .content .plusMinus span:nth-child(2){ top: calc(50% - 4px); display: block; position: absolute; width: 2px; height: 80%; background: #FFD043; left: calc(50% - -0.5px); -moz-transition: all .25s ease; -webkit-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; } .content .plusMinus.navOpen span:first-child{ opacity: 0; transform: rotate(0deg) scale(0.2, 0.2); } .content .plusMinus.navOpen span:nth-child(2) { -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); } .content #information-nav .plusMinus { margin-left: 10px; } .leftnavInner > ul > li > .content > .leftNavWrap > ul > li > ul { display: none !important; } .leftnavInner > ul > li > .content > .leftNavWrap > ul > li > ul.navOpen { display: block !important; } .leftnavInner > ul > li > .content > .leftNavWrap > ul > li > ul > li > ul { display: none !important; } .leftnavInner > ul > li > .content > .leftNavWrap > ul > li > ul > li > ul.navOpen { display: block !important; } .leftnav .content .active { position: relative; } .leftnav .content .active:before { left: -16px; left: -15px; margin: 9px 10px 0 0; height: 2px; content: " "; background-color: #fff; width: 12px; display: inline-block; position: absolute; z-index: 99; } /* Left Navigation Title */ .topDivider button#leftNavDropdown { background-color: transparent; border: 0; float: right; } .topDivider .contentTitle { background-image: url('../images/gradient/speedline.png'); background-position: top right; background-repeat: no-repeat; overflow: hidden; z-index: 3; position: absolute; right: 0; left: 0; min-height: 34px; } .topDivider .title { font-family: "input-sans-compressed", Arial, Helvetica, sans-serif; text-transform: uppercase; display: block; font-size: 0.85rem; font-weight: 300; color: #474747; line-height: 1.2; text-transform: uppercase; letter-spacing: .17em; padding-left: 6px; } .topDivider ul li .title { float: right; width: auto; color: #fff; padding: 9px 34px 9px 15px; } .leftnav div.content { width: 110%; overflow-y: auto; z-index: 2; transition: all 0.5s ease-in-out; background: #111111; position: absolute; top: 0; padding: 45px 0 30px; } .leftnav div.content .leftNavWrap { width: 45.5%; float: right; } .leftnav div li::-moz-list-bullet { font-size: 0.750em; margin-right: 5px; } .leftnav ul li { line-height: 1.3em; margin-bottom: 0; } .leftnav ul li a { font-family: "input-sans-compressed", Arial, Helvetica, sans-serif; text-transform: uppercase; display: block; padding: 10px 3px 10px 0; text-decoration: none; font-size: .9rem;} .leftnav .content ul li a { color: #fff; text-decoration: none; letter-spacing: 0.05em; display: inline-block; margin-left: 6px; } .leftnav .content ul li a:hover, .leftnav .content ul li a:focus { color: #fff !important; text-decoration: underline; } .leftnav ul li:before { content: normal; } .leftnav ul li.active > a { display: inline; color: #fff; font-style: italic; } /* Tier 2 */ .leftnav ul > li { font-size: .84rem; } /* Tier 3 */ .leftnav ul > li > ul > li { font-size: .85rem; padding-left: 20px; } .leftnav ul > li > ul > li a { text-transform: none; padding: 6px 10px; } .leftnav ul > li > ul > li.active > a { color: #474747; } /* Tier 4 */ .leftnav ul > li > ul > li.active ul li { font-size: 0.85rem; } .leftnav ul > li > ul > li.active ul li a { padding: 6px 10px 6px 35px; display: block; } .leftnav ul > li > ul > li.active ul li.active > a { color: #474747; } /* Tier 5 */ .leftnav ul > li > ul > li.active ul > li > ul > li { font-size: 0.85rem; } .leftnav ul > li > ul > li.active ul > li > ul > li a { padding: 6px 10px 6px 50px; display: block; } .leftnav ul > li > ul > li.active ul > li > ul > li.active > a { color: #474747; } @media all and (max-width: 960px){ .topDivider { width: 80%; min-width: 414px; margin-left: 0;} .leftnav div.content { width: 100%; } .topDivider button#leftNavDropdown { float: none; } .leftnav .contentTitle { width: 89%; } .leftnavInner .leftnavBtn { float: left; padding-left: 1em; } .leftnav ul li .title { float: none; display: inline-block; } .leftnav div.content .leftNavWrap { width: 89%; } } @media all and (max-width: 413px) { .topDivider { min-width: 320px; } } .wysiwygContent h3 { margin: 40px 0 20px; } main.landing { width: 100%; margin-top: 3em; display: block; } @media all and (max-width: 1536px){ .landing .mainContent { padding:0 1em; } } @media all and (max-width: 1024px) { main.landing { width: 100%; margin-top: 3em; display: inline-block; } } /* ============================ Columns * ============================*/ .columns { width: 100%; max-width: 1110px; margin: 2em auto; overflow: auto; } .columns .colHeading { margin-bottom: 1.5em; } .columns .colHeading h2 { font-size: 1.500em; } .columns .content img { display: inline-block; width: 100%; max-height: 350px; object-fit: cover; } .columns .content h3 { font-size: 1.125em; margin: 15px 0; font-family: "utopia-std",serif; text-transform: none;} .columns .content a { color: #BA0C2F; } .columns ul.no-bullet li, .columns ol.no-bullet li { list-style: none; } .columns ul { padding-left: 40px; margin-bottom: 20px; } .columns ul ul { margin-bottom: 0; } .columns ol { list-style-type: decimal; display: block; padding-left: 40px; margin-bottom: 20px; } .columns ol ol { margin-bottom: 0; } .columns ol li { padding: 2px 0; } .columns ul li { font-size: .875rem; padding: 2px 0; } /* Table Styles */ .columns table { border: 1px solid #F4F4F7; width: 100%; text-align: left; border-collapse: collapse; margin-bottom: 20px; table-layout: fixed; } .columns table caption { text-align: left; padding-bottom: 10px; } .columns table td, .columns table th { border: 0; padding: 15px 30px; } .columns table thead { background: #111111; } .columns table thead th { font-weight: bold; color: #FFFFFF; font-size: 1.125em; } .columns table tbody tr { border: 1px solid #F4F4F7;} @media all and (max-width:1060px){ .columns .bg { padding:1.5em; } .columns .col4.bg, .columns .col6.bg, .columns .col12.bg { margin-bottom:2em; } /*.columns .bg .content { padding: 1.5em; }*/ } @media all and (max-width: 767px ) { .columns table thead, table tbody, table th, table td, table tr { display: block; } .columns table thead tr { position: absolute; top: -9999px; left: -9999px; } .columns table img { display: block; margin-left: auto; margin-right: auto; } .columns table td { text-align: center; } } @media all and (max-width:720px){ .columns .col4 { margin-bottom:3em; } .columns .content img { width: 100%; } .columns .content img + h3 { margin-top:1rem; } .columns .heading { margin-bottom:0; } } @media all and (max-width:500px){ .columns .intro { margin-bottom:2em; } .columns a.all { display: inline-block; position: relative; right: auto; top: auto; } } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .columns .content img { max-height: none; } } /* ============================ Banner * ============================*/ .banner { position: relative; min-height:260px; width:100%; max-width:1110px; margin: 6.5em auto 4.5em; background-image: url('../images/red-background.jpg'); background-color: #cc1b2d; background-position: right top; background-repeat: repeat-y; background-size: cover; overflow: hidden; } .banner .content { padding: 5em 6em; } .banner h2 { font-family: "utopia-std", serif; } .banner.hasBackground h2 { color: #FFF; } .banner p { color: #FFFFFF; margin-bottom: 28px; } .banner.hasBackground p a { color: #FFF;} .banner .topBorder { height: 69px; width: 100%; background-image: url('../images/gradient/interior-box-top.png'); background-position: top left; background-repeat: no-repeat; position: absolute; top: -1.5em; } .banner .bottomBorder { height: 53px; width: 100%; background-image: url('../images/gradient/interior-box-bottom.png'); background-position: top left; background-repeat: no-repeat; position: absolute; bottom: -1em; } /* ============================ Accordions * ============================*/ .accordion { width: 100%; max-width: 1110px; margin: 2em auto 5em; padding: 0 1em; } .accordion > ul { padding: 0; margin: 0; list-style: none; } .accordion ul .acc-row { border-bottom: 1px solid #F4F4F7; list-style-position: initial !important; padding-left: 0 !important; text-indent: 0 !important;} .accordion ul .acc-row:first-child { border-top: 1px solid #F4F4F7; } .accordion ul li { background: #FFFFFF; padding: 0; position: relative; width: 100%; padding: 1rem; } .accordion ul .acc-row:before { display: none; } .accordion ul li span.toggle { font-family: "input-sans-compressed",sans-serif; font-weight:600; font-size: 1.125em!important; margin: 2em; text-transform: uppercase; letter-spacing: .12em; } .accordion ul li span:not(.toggle) { left: 0; position: absolute; } .accordion ul li span:not(.toggle):before { color: #cc1b2d; content: url('../images/icons/minus.png'); margin-right: 20px; } .accordion .content { z-index: 1; background: #fff; display: block; padding: 1.25em 1.25em 0; width: 100%; font-size: 1em; line-height: 1.5em; overflow: hidden; position: relative; } .accordion .content ul.no-bullet li, .accordion .content ol.no-bullet li { list-style: none; } .accordion .content ul { padding-left: 40px; margin-bottom: 20px; } .accordion .content ul ul { margin-bottom: 0; } .accordion .content ol { list-style-type: decimal; display: block; padding-left: 40px; margin-bottom: 20px; } .accordion .content ol ol { margin-bottom: 0; } .accordion .content ol li { padding: 2px 0; } .accordion .content ul li { font-size: .875rem; padding: 2px 0; } /* Table Styles */ .accordion .content table { border: 1px solid #F4F4F7; width: 100%; text-align: left; border-collapse: collapse; margin-bottom: 20px; table-layout: fixed; } .accordion .content table caption { text-align: left; padding-bottom: 10px; } .accordion .content table td, .accordion .content table th { border: 0; padding: 15px 30px; } .accordion .content table thead { background: #111111; } .accordion .content table thead th { font-weight: bold; color: #FFFFFF; font-size: 1.125em; } .accordion .content table tbody tr { border: 1px solid #F4F4F7;} .accordion ul li input[type=checkbox] ~ div { opacity: 1; position: relative; max-height: 9999px; transition: all .75s ease; } .accordion ul li input[type=checkbox] { cursor: pointer; height: 100%; max-height: 100%; opacity: 0; position: absolute; width: 100%; padding: 0; margin: 0; left: 0; z-index: 1; } .accordion ul li input[type=checkbox]:checked ~ div { opacity:0; position:absolute; margin-top: 0; max-height: 0; transition:all .25s ease; } .accordion ul li input[type=checkbox]:checked ~ span:not(.toggle):before { color: #cc1b2d; content: url('../images/icons/plus.png'); margin-right: 20px; } @media all and (max-width: 767px ) { .accordion table thead, table tbody, table th, table td, table tr { display: block; } .accordion table thead tr { position: absolute; top: -9999px; left: -9999px; } .accordion table img { display: block; margin-left: auto; margin-right: auto; } .accordion table td { text-align: center; } } /* SLIDER */ .featured-slider { width: 100%; max-width: 1110px; margin: 4em auto 3em auto; } .featured-slider .slider .slide { position: relative; overflow: hidden; background: #000; transition: all .3s ease; } .featured-slider .slider .slide * { color:#FFFFFF; } .featured-slider .slider .slide span.title { text-transform: uppercase; font-family: "input-sans-compressed",sans-serif; font-weight:600; font-size: 1.313em; letter-spacing: 0.158em; } .featured-slider .slider .slide .text { position:absolute; right: 0; bottom: 4em; left: 0; padding: 3em; height: 102px; text-align: center; margin: auto auto; transition: all .3s ease; } .featured-slider .slider .slide .overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: .6; background: transparent linear-gradient(180deg, #00000000 0%, #00000066 100%) 0% 0% no-repeat padding-box; } .featured-slider .slider .slide:hover .overlay, .slider .slide:focus .overlay { transition:all .7s ease; opacity:1; } .featured-slider .slider .slide:hover p, .slider .slide:focus p { visibility: visible; max-height:9999px; opacity:1; transition:all .3s ease; } .featured-slider .previous, .featured-slider .next, .featured-slider .dots { float:left; } .featured-slider .previous, .featured-slider .next { color:#767C88; margin:.3em 0.75em; cursor: pointer; } .featured-slider .slider-nav { margin-top:1em; } .featured-slider .col5 { width:35.5%; } .featured-slider .col7 { width:60.5%; } .featured-slider ul.slick-dots { bottom: -2em; } /* IF INTERIOR PAGE */ main.interior .featured-slider .slider .slide img { max-width:210px; } main.interior .featured-slider .slider .slide .text { padding:1em; } main.interior .featured-slider .slider .slide span.title { font-size:.875em; } main.interior .featured-slider .slider .slide p { font-size: .75em; } @media all and (max-width:1060px){ .featured-slider .slider .slide img { width:100%; } .featured-slider .col5 { width:100%; } .featured-slider .col7 { width:100%; } .featured-slider, .featured-slider .slider { margin-top:3em; } } @media all and (max-width:720px){ .featured-slider .slick-list { margin-top:2em; } .featured-slider .slider { padding: 0; } .featured-slider .slider .slide img { padding:0; } } /* ============================ Print Styles * ============================*/ @media print { .search, .menu, .topNav, .utilityWrapper, #searchtoggle ~ label, .alert, .impact, .callout, video, .video, .video-content, .rightnav, .footer .footerLogo, .footer .socialbar, .footer .footerlinks, #top-link, .home-impact, .topDividerWrapper, .introImage.col8, .featured-intro .triBg { display: none !important; } .featured-intro { min-height: unset; } .intro.col4 { float: none; width: 100%; } .featuredVideoSlider .slider div[class^="col"] { float: none; width: 100%; } .featuredVideoSlider .youtube { max-width: 500px; margin: auto; } .columns .col4, .rightCol.col3, .articleListing .wysiwygContent .newsImage { width: 30% !important; } .columns .col4:last-of-type { margin-right: 0 !important; } .columns .col6 { width: 48% !important; } .header { position: relative !important; box-shadow: none !important; } .footer { padding-top: 0; text-align: center; } .footer .col7, .footer .col5 { float: none; width: 100%; } .footer .col7 { margin-bottom: 20px; } .copyright { position: relative !important; color: #000 !important; } body, h1, h2, h3, h4, h5, p, a, span { color: #000 !important; } .content .accordion .accRow > div, .sidebar-widgets .accRow > div { max-height: none; } } /* ================================ PDH: 2015-style image boxes ================================ */ .images-container { overflow: hidden; padding: 1px 0; text-align: center; font-size: 36px; } .images-container .image-box { float: left; width: 49.99%; } .images-container .image-box .title { position: absolute; bottom: 4px; left: 4px; right: 4px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; background: #000; background: rgba(0, 0, 0, .5); padding: 25px 10px 16px; } .images-container a { color: #fff; display: block; } .images-container a:focus, .images-container a:hover { color: #FFD043; text-decoration: none; } .images-container .holder { padding: 4px; position: relative; } .images-container img { display: block; width: 100%; height: auto; } @media only screen and (max-width: 1199px) { .images-container .image-box .title { font-size: 27px; bottom: 3px; left: 3px; right: 3px; padding: 18px 10px 12px; } .images-container .holder { padding: 3px; } } @media only screen and (max-width: 1023px) { .images-container { margin: 0 -2px; } .images-container .image-box .title { font-size: 20px; bottom: 2px; left: 2px; right: 2px; padding: 14px 10px 10px; } .images-container .holder { padding: 2px; } } @media only screen and (max-width: 767px) { .images-container .image-box { float: none; width: auto; } .images-container .image-box .title { font-size: 21px; left: 0; right: 0; padding: 12px 10px 8px; } .images-container .holder { padding: 0 0 2px; } } /* ================================ PDH: Chrome menu fix ================================ */ /* #menu input[type="checkbox"] {margin: 0 0 0 10000px;} */ /* ================================ ELH Home Banner Update 20200929 - New image and changed background-color to #ba0c2f ================================ */ .homeBanner { position: relative; min-height: 260px; padding: 10em 0; margin:3em 0; background-image: url('/_resources20/images/banner-background-20200929-02.jpg'); background-color: #ba0c2f; background-position: right top; background-repeat: repeat-y; background-size: cover; } /* ============================ ELH Interior Banner Update 20200929 - New image, changed background-color to #ba0c2f, added media queries to match .homeBanner, added h3 style ============================ */ .banner { position: relative; min-height:260px; width:100%; max-width:1110px; margin: 6.5em auto 4.5em; background-image: url('/_resources20/images/snippets/snippet-banner-background-20210701-02.png'); background-color: #ba0c2f; background-position: right top; background-repeat: repeat-y; background-size: cover; overflow: hidden; } .banner .content h3 {font-size: 1.313em; font-family: "input-sans-compressed", Arial, Helvetica, sans-serif; text-transform: uppercase; color: #ffffff; line-height: 1.22; } @media only screen and (max-width: 1023px) { .banner .content { padding: 5em 2.5em; } } /* ============================ ELH Sticky Tab Fix 20200929 - z-index changed from -1 to auto ============================ */ .stickyTabs { z-index: auto; } /* ============================ ELH R5 Callout Text Fix - top margin changed to 0 ============================ */ .homeTabs ul.homeTabsToggle { margin: 0 auto 0; } /* ============================ ELH CTA Button Margin - added margin-bottom ============================ */ a.cta-button, .cta-button { margin-bottom: 20px; } /* ============================ ELH Fancy OL 20201016 ============================ */ .columns .fancy-list ol { margin: 2.5em 0 3em 0; padding: 0; list-style-type: none; } .columns .fancy-list ol li { counter-increment: fancy-list-count; font-size: 1.5em; margin-bottom: 0.75em; padding-bottom: 0.5em; font-family: "input-sans-compressed", Arial, Helvetica, sans-serif; text-transform: uppercase; } .columns .fancy-list ol li::before { content: counter(fancy-list-count); font-weight: bold; font-size: 1.5em; margin-right: 1em; font-family: "input-sans-compressed", Arial, Helvetica, sans-serif; line-height: 1; } @media only screen and (max-width: 500px){ .columns .fancy-list ol li { font-size: 1.15em; margin-bottom: 0.75em; padding-bottom: 0.5em; } .columns .fancy-list ol li::before { font-size: 1.15em; margin-right: 1em; } } /* ============================ ELH Important Paragraph 20201016 ============================ */ .important-graph { font-size: 115%; } .important-graph::before { font-family: "Font Awesome 5 Free"; content: "\f0da"; font-weight: 900; padding-right: 5px; } /* ============================ ELH Flexible Image Grid w/ Overlay 20201027 -- Use with Flex Grid component ============================ */ .ferrisFlex { display: flex; flex-direction: row; flex-wrap: wrap; } .ferrisFlex a { text-decoration: none; } .ferrisFlex a:hover { text-decoration: none; } .ferrisFlexObject { width: calc(50% - 1rem); min-height: 175px; margin: 0.5rem 0rem; } .ferrisFlexObject:hover { cursor: pointer; } .ferrisFlexObject:hover h3 { color: #ffd043; } .ferrisFlexObject:hover h3::before { font-family: "Font Awesome 5 Free"; content: "\f0da"; font-weight: 900; padding-right: 5px; } .ferrisFlexObject h3 { background: rgba(17,17,17,0.85); margin-top: 115px; margin-bottom: 0; padding: 0.425rem 0.425rem 0.425rem 0.75rem; font-size: 1.65em; color: #ffffff;} @media only screen and (max-width: 500px) { .ferrisFlexObject { width: 100%; min-height: 90px; } .ferrisFlexObject h3 { margin-top: 90px; } } /* ============================ ELH Flexible Image Grid w/ Overlay 20210303 -- Two Column Edit ============================ */ .ferrisFlex-Two { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } .ferrisFlex-Two a { text-decoration: none; } .ferrisFlex-Two a:hover { text-decoration: none; } .ferrisFlexObject-Two { width: calc(50% - 1rem); height: 225px; margin: 0.5rem 0rem; } .ferrisFlexObject-Two:hover { cursor: pointer; } .ferrisFlexObject-Two h3 { margin-top: 0px; margin-bottom: 0; padding: 112px 15px 15px 15px; font-size: 1.65em; color: #ffffff; } .ferrisFlexObject-Two:hover h3 { text-decoration: underline; text-decoration-color: #ba0c2f; } .ferrisFlexObject-Two-bg { background-color: rgba(17,17,17,0.7); height: 100%; } .ferrisFlexObject-Two-bg:hover { background: linear-gradient(142deg, rgba(186,12,47,0.1) 6%, rgba(186,12,47,0.6) 34%, rgba(186,12,47,0.8) 65%, rgba(255,208,67,1) 100%); } a.ferrisFlexObject-Two:focus { outline: 2px solid #ba0c2f; } .flexLinkText { display: block; width: 100%; font-family: "input-sans-compressed", Arial, Helvetica, sans-serif; text-transform: uppercase; margin-top: 0px; margin-bottom: 0; padding: 112px 15px 15px 15px; font-size: 1.65em; color: #ffffff; line-height: 1.22;} .flexLinkText:hover { text-decoration: none; } .flexLinkDesc { display: block; color: #ffffff; padding: 0px 15px 15px 15px; transition-duration: 0.5s; } .flexLinkDesc:hover { text-decoration: none; } @media only screen and (max-width: 700px) { .ferrisFlexObject-Two { height: 150px; } .ferrisFlexObject-Two h3 { padding-top: 60px; font-size: 1.35em; } .flexLinkText { padding-top: 60px; font-size: 1.35em; } } @media only screen and (max-width: 500px) { .ferrisFlexObject-Two { width: 100%; height: 100px; } .ferrisFlexObject-Two h3 { padding-top: 40px; font-size: 1.2em; } .flexLinkText { padding-top: 40px; font-size: 1.2em; } } /* ============================ ELH Flexible Image Grid w/ Overlay 20210203 -- Three Column Edit ============================ */ .ferrisFlex-Three { display: flex; flex-direction: row; flex-wrap: wrap; } .ferrisFlex-Three a { text-decoration: none; } .ferrisFlex-Three a:hover { text-decoration: none; } .ferrisFlexObject-Three { width: calc(33% - 1rem); height: 225px; margin: 0.5rem 0.5rem; } .ferrisFlexObject-Three:hover { cursor: pointer; } .ferrisFlexObject-Three h3 { margin-top: 0px; margin-bottom: 0; padding: 112px 15px 15px 15px; font-size: 1.35em; color: #ffffff; } .ferrisFlexObject-Three:hover h3 { text-decoration: underline; text-decoration-color: #ba0c2f; } .ferrisFlexObject-Three-bg { background-color: rgba(17,17,17,0.7); height: 100%; } .ferrisFlexObject-Three-bg:hover { background: linear-gradient(142deg, rgba(186,12,47,0.1) 6%, rgba(186,12,47,0.6) 34%, rgba(186,12,47,0.8) 65%, rgba(255,208,67,1) 100%); } @media only screen and (max-width: 700px) { .ferrisFlexObject-Three { width: calc(50% - 1rem); height: 150px; } .ferrisFlexObject-Three h3 { padding-top: 60px; font-size: 1.2em;} } @media only screen and (max-width: 500px) { .ferrisFlexObject-Three { width: 100%; height: 100px; } .ferrisFlexObject-Three h3 { padding-top: 40px; font-size: 1.1em;} } /* ============================ ELH Flexible Grid 20210519 -- Simplified Three Column Edit ============================ */ .ferrisFlex-Three-simple { display: flex; flex-direction: row; flex-wrap: wrap; } .ferrisFlexObject-Three-simple { width: calc(33% - 1rem); margin: 0.5rem 0.5rem; } @media only screen and (max-width: 700px) { .ferrisFlexObject-Three-simple { width: calc(50% - 1rem); } } @media only screen and (max-width: 500px) { .ferrisFlexObject-Three-simple { width: 100%; } } /* ============================ ELH Flexible Image Grid w/ Overlay 20210318 -- News Edit ============================ */ .ferrisFlex-News-leader { display: flex; flex-direction: row; flex-wrap: wrap; } .ferrisFlex-News-leader a { text-decoration: none; } .ferrisFlex-News-leader a:hover { text-decoration: none; } .ferrisFlexObject-News-leader { width: 100%; height: 500px; margin: 0 0 0.5rem 0; } .ferrisFlexObject-News-leader:hover { cursor: pointer; } .ferrisFlexObject-News-leader-container { margin-top: 300px; margin-bottom: 0; padding: 25px 40px 25px 40px; background: rgba(17,17,17,0.85); } .ferrisFlexObject-News-leader-container h2 { font-size: 1.65em; color: #ffffff; margin: 0 0 0 0; padding: 0 0 0 0; font-family: "input-sans-compressed", Arial, Helvetica, sans-serif; text-transform: uppercase; line-height: 1.22;} .ferrisFlexObject-News-leader-container p { font-size: 1em; color: #ffffff; margin: 0.35em 0 0 0; } @media only screen and (max-width: 700px) { .ferrisFlex-News-leader { margin-bottom: 2rem; } .ferrisFlexObject-News-leader-container { margin-top: 250px; padding: 25px 40px 25px 40px; } .ferrisFlexObject-News-leader h2 { font-size: 1.4em; } } @media only screen and (max-width: 500px) { .ferrisFlexObject-News-leader h2 { font-size: 1.35em; } .ferrisFlexObject-News-leader-container { padding: 15px 30px 15px 30px; } } .ferrisFlex-News-two-column { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;} .ferrisFlexObject-News-two-column { width: calc( 50% - 1rem); margin: 0.5rem 0rem; } .ferrisFlexObject-News-two-column h3 { line-height: 1.5; font-family: "utopia-std",serif; font-weight: 400; font-size: 1.25em; margin: 0.35em 0 0 0; padding: 0 0 0 0; text-transform: none; } .ferrisFlexObject-News-two-column a { text-decoration: none; color: #111111; } .ferrisFlexObject-News-two-column a:hover { text-decoration: underline; color: #ba0c2f;} .ferrisFlexObject-News-two-column p { font-size: 1em; color: #111111; margin: 0.35em 0 0 0; } .ferrisFlexObject-News-two-column img { width: 100%; } @media only screen and (max-width: 700px) { .ferrisFlexObject-News-two-column { width: 100%; margin-top: 0.5rem; margin-bottom: 0.5rem; } .ferrisFlexObject-News-two-column h3 { font-size: 1.35em; } .ferrisFlexObject-News-two-column { margin-bottom: 2rem; } } @media only screen and (max-width: 500px) { .ferrisFlexObject-News-two-column h3 { font-size: 1.2em; } } /* ============================ ELH Flexible Image Grid w/ Overlay 20210303 - Two Column Edit - B Variant ============================ */ .ferrisFlex-Two-b { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } .ferrisFlex-Two-b a { text-decoration: none; } .ferrisFlex-Two-b a:hover { text-decoration: none; } .ferrisFlexObject-Two-b { width: calc(50% - 1rem); height: 225px; margin: 0.5rem 0rem; } .ferrisFlexObject-Two-b:hover { cursor: pointer; } .ferrisFlexObject-Two-b h3 { margin-top: 0px; margin-bottom: 0; padding: 112px 15px 15px 15px; font-size: 1.65em; color: #ffffff; } .ferrisFlexObject-Two-b:hover h3 { text-decoration: underline; text-decoration-color: #ba0c2f; } .ferrisFlexObject-Two-bg-b { background-color: rgba(17,17,17,0.75); height: 100%; } .ferrisFlexObject-Two-bg-b:hover { background: linear-gradient(142deg, rgba(186,12,47,0.1) 6%, rgba(186,12,47,0.6) 34%, rgba(186,12,47,0.8) 65%, rgba(255,208,67,1) 100%); } a.ferrisFlexObject-Two-b:focus { outline: 2px solid #ba0c2f; } .flexLinkText-b { display: block; width: 100%; font-family: "input-sans-compressed", Arial, Helvetica, sans-serif; text-transform: uppercase; margin-top: 0px; margin-bottom: 0; padding: 112px 15px 15px 15px; font-size: 1.65em; color: #ffffff; line-height: 1.22;} .flexLinkText-b:hover { text-decoration: none; } .flexLinkDesc-b { display: block; color: #ffffff; padding: 0px 15px 15px 15px; transition-duration: 0.5s; } .flexLinkDesc-b:hover { text-decoration: none; } @media only screen and (max-width: 700px) { .ferrisFlexObject-Two-b { height: 150px; } .flexLinkText-b { padding: 15px 15px 15px 15px; font-size: 1.35em; } .flexLinkDesc-b { font-size: 0.75em; } } @media only screen and (max-width: 500px) { .ferrisFlexObject-Two-b { width: 100%; height: 100px; } .flexLinkText-b { padding: 15px 15px 5px 15px; font-size: 1.2em; } } /* ================================ ELH: Interior events component 20210524 - B Variant ================================ */ .interiorEvents-b { position: relative; } .interiorEvents-b .wrapper-b { position: relative; width: 100%; max-width: 1110px; margin: 0 auto; padding: 0 0; } .interiorEvents-b .eventWrap-b { position: relative; background-color: #FFF; width: calc(75% - 35px); margin: 0px 0px 10px 35px; border: 1px solid #d9d9d9; overflow: unset; } .interiorEvents .eventWrap:last-child { margin-right: 0; } .interiorEvents-b .date-b { position: absolute; left: -25px; top: 10px; text-align: center; background-color: #BA0C2F; color: #ffffff; min-width: 60px; -moz-transform: skew(-30deg, 0deg); -webkit-transform: skew(-30deg, 0deg); -o-transform: skew(-30deg, 0deg); -ms-transform: skew(-30deg, 0deg); transform: skew(-30deg, 0deg); } .interiorEvents-b .date-b .dateWrap-b { -moz-transform: skew(30deg, 0deg); -webkit-transform: skew(30deg, 0deg); -o-transform: skew(30deg, 0deg); -ms-transform: skew(30deg, 0deg); transform: skew(30deg, 0deg); padding: 1px 0 10px; } .interiorEvents-b .date-b a { text-decoration: none; } .interiorEvents-b .date-b .month-b { font-size: 0.75em; text-align: center; font-weight: 500; text-transform: uppercase; display: inline-block; font-family: "input-sans-compressed", Arial, Helvetica, sans-serif; } .interiorEvents-b .date-b .day-b { text-align: center; font-size: 1em; font-family: "input-sans-compressed", Arial, Helvetica, sans-serif; padding: 0; margin: 0; line-height: .7em; display: block; } .interiorEvents-b .eventDescription-b { align-self: center; padding: 0.5em 1em 0.5em 4em; } .interiorEvents-b .title-b { margin-bottom: 5px; line-height: 1.3em; font-size: 1.313em; font-family: "utopia-std",serif; } .interiorEvents-b .description-b p { margin-bottom: 0px; } @media all and (max-width: 724px) { .interiorEvents-b .eventWrap-b { width: calc(100% - 35px); } } /* ============================ ELH Graphic Stat Component 20210520 ============================ */ .graphicStat-container { display: flex; flex-direction: row; flex-wrap: wrap; border-top: 1px solid #d9d9d9; border-bottom: 1px solid #d9d9d9; margin: 50px 0px; padding: 50px 0px;} .graphicStat-object { width: calc(33% - 1rem); margin: 0.5rem 0.5rem; padding: 0px 20px; } .graphicStat-outer { width: 100%; margin: 0px 0px; text-align: center; } .graphicStat-outer h3 { font-size: 2.5em; margin: 0; padding-top: 38px; } .graphicStat-outer p { margin: 0; padding: 0; font-size: 1.25em; } @media only screen and (max-width: 700px) { .graphicStat-object { width: 100%; padding: 20px 20px; } } /* ================================ PDH: Faculty profiles ================================ */ dd { margin-left: 2em; margin-bottom: 2em; } figure.dm-image {float: right; margin: 0 0 2em 2em;} figure.dm-image img { border: 1px solid black; } @media only screen and (max-width: 728px) { figure.dm-image {float: none; margin: 0 0 2em 0;} } /* ================================ PDH: Accordion fixes ================================ */ .columns .accordion .content img { max-height: none; } .accordion ul li div.content span:not(.toggle):before { color: inherit; content: none; margin: 0; display: none; } .accordion ul li div.content span:not(.toggle) { position: relative; } @media all and (max-width: 500px ) { .accordion { padding: 0 1em 0 0; } .accordion ul li span.toggle { font-size: 1em!important; margin: 2em 0em 2em 2em; } } /* ============================ ELH Catalog - Program Head edits 20210118 ============================ */ .program-head { margin-bottom: 27px; } .program-head h2 { margin-bottom: 20px; } .program-head h3 { font-family: "utopia-std",serif; text-transform: none; margin-bottom: 13px; margin-top: 10px; font-size: 1rem; } .program-head h4 { margin-bottom: 13px; margin-top: 10px; font-size: 1rem; } /* ============================ ELH Video control fix 20210121 ============================ */ .home-impact .overlay { z-index: -1; } @media (max-width: 960px){ .home-impact .caption { max-height: 250px; } } /* ================================ PDH: Sidebar submenu separators ================================ */ .sidebar .rightNav ul.subMenu li { border-top: 1px solid #ebebeb; } /* ================================ PDH: Table align top ================================ */ table td { vertical-align: top; } /* ================================ PDH: Page title not printing fix ================================ */ @media print { .impact { display: block !important; visibility: visible !important; color: black !important; } .text-overlay { margin: 1em auto !important; } } /* ================================ PDH: Centered right nav fix ================================ */ .rightNav button.rightNavToggle { text-align: left; } /* ================================ ELH: Font-sizing of uls in accordions ================================ */ .accordion .content ul li { font-size: 1em; } /* ================================ PDH: UL font size fix ================================ */ .columns ul li { font-size: 1em; } /* ================================ PDH: Sidebar Spacing ================================ */ #skipToRightNav, #skipToRightNav2 { margin-bottom: 2rem; } /* ================================ ELH: Simple two column snippet 20210407 ================================ */ .ferrisFlex-Two-simple { display: flex; flex-direction: row; flex-wrap: wrap; margin-bottom: 4em; } .ferrisFlexObject-Two-simple { width: calc(50% - 1rem); margin: 0.5rem 0.5rem; } @media only screen and (max-width: 500px) { .ferrisFlexObject-Two-simple { width: calc(100% - 1rem); } } /* ================================ ELH: Simple two column snippet - big and small columns ================================ */ .ferrisFlex-Two-simple { justify-content: space-between; align-items: center; } .ferrisFlexObject-Two-simple.ferrisFlexSmallColumn { width: 30%; margin: 0 0 0 0; } .ferrisFlexObject-Two-simple.ferrisFlexBigColumn { width: 65%; margin: 0 0 0 0; } @media only screen and (max-width: 900px) { .ferrisFlexObject-Two-simple.ferrisFlexSmallColumn { width: 100%; margin: 0 0 0 0; } .ferrisFlexObject-Two-simple.ferrisFlexBigColumn { width: 100%; margin: 0 0 0 0; } } /* ================================ ELH: Simple two column snippet for homepage 20210722 ================================ */ .ferrisFlex-Two-simpleHome { display: flex; flex-direction: row; flex-wrap: wrap; } .ferrisFlexObject-Two-simpleHome { width: calc(50% - 1rem); margin: 0.5rem 0.5rem; } @media only screen and (max-width: 1024px) { .ferrisFlexObject-Two-simpleHome { width: calc(100% - 1rem); } } /* ================================ ELH: Catalog Alt h2 20210415 ================================ */ .alt-h2 { margin: 40px 0 20px; line-height: 1.22; } /* ================================ ELH: Person Name -- Committee etc Listings ================================ */ .person-name { font-size: 1.10em; font-family: "input-sans-compressed", Arial, Helvetica, sans-serif; text-transform: uppercase; color: #333333; line-height: 1.22; margin-top: 10px; margin-bottom: 0px; } /* ================================ PDH: Mobile menu tab stop fix ================================ */ @media screen and (max-width: 1200px){ .menuContainer { display: none; } } .menuContainer.navOpen { display: block } /* ================================ PDH: Merge left nav plus button ================================ */ .leftnav .content ul li .plusMinus + a { display: none; } .leftnav .content .plusMinus span.hide { display: inline-block; color: white; visibility: visible; position: relative; left: auto; text-align: left; width: 300px; font-family: input-sans-compressed, Arial, Helvetica, sans-serif; padding: 1em 0 0 1.3em; text-transform: uppercase; font-size: 14.4px;} .leftnav .content .plusMinus span.hide:hover { text-decoration: underline; } .leftnav .content .plusMinus span:nth-child(2) {top: 1.15em; left: 7px; height: 14px;} .leftnav .content .plusMinus span:first-child {top: 1.6em; width: 14px; right: calc(100% - 15px);} .leftnav .content .plusMinus { width: auto; height: auto; } /* ================================ PDH: left nav behind right nav fix ================================ */ .leftnav > .leftnavInner > ul li.row > .content { z-index: 20; } .topDivider .contentTitle { z-index: 25; } /* ================================ ELH: interior banner snippet - ul and a color ================================ */ .banner .content ul { color: #fff; } .banner .content a { color: #fff; } /* ================================ ELH: impact overlay top position adjusted to 52% (was 36%) for small screens 20210518 ================================ */ @media all and (max-width: 960px ){ .impact .text-overlay { left: 0; right: 0; top: 52%; text-align: center; } } /* ================================ ELH: slick slider adjustments 20210519 ================================ */ .featured-slider { width: 100%; max-width: 1110px; margin: 2em auto 2em auto; } .featured-slider ul.slick-dots { bottom: -3em; } /* ================================ ELH: Interior events component 20210524 ================================ */ .interiorEvents { position: relative; } .interiorEvents .wrapper { position: relative; width: 100%; max-width: 1110px; margin: 0 auto; padding: 0 1em; } .interiorEvents .eventWrap { position: relative; background-color: #FFF; min-height: 178px; width: calc(100% - 35px); margin: 25px 0px 25px 35px; border: 1px solid #d9d9d9; overflow: unset; } .interiorEvents .eventWrap:last-child { margin-right: 0; } .interiorEvents .date { position: absolute; left: -35px; top: 10px; text-align: center; background-color: #BA0C2F; color: #FFF; min-width: 75px; -moz-transform: skew(-30deg, 0deg); -webkit-transform: skew(-30deg, 0deg); -o-transform: skew(-30deg, 0deg); -ms-transform: skew(-30deg, 0deg); transform: skew(-30deg, 0deg); } .interiorEvents .date .dateWrap { -moz-transform: skew(30deg, 0deg); -webkit-transform: skew(30deg, 0deg); -o-transform: skew(30deg, 0deg); -ms-transform: skew(30deg, 0deg); transform: skew(30deg, 0deg); padding: 5px 0 10px; } .interiorEvents .date a { text-decoration: none; } .interiorEvents .date .month { font-size: 0.75em; text-align: center; font-weight: 500; text-transform: uppercase; display: inline-block; font-family: "input-sans-compressed", Arial, Helvetica, sans-serif; } .interiorEvents .date .day { text-align: center; font-size: 1.375em; font-family: "input-sans-compressed", Arial, Helvetica, sans-serif; padding: 0; margin: 0; line-height: .7em; display: block; } .interiorEvents .eventDescription { align-self: center; padding: 1.250em 1.250em 1.250em 4em; } .interiorEvents .title { margin-bottom: 5px; line-height: 1.3em; font-size: 1.313em; font-family: "utopia-std",serif; } .interiorEvents .description {} @media all and (max-width: 960px) { .interiorEvents .wrapper { padding: 0 2em; } .interiorEvents .eventWrap { width: 85%!important; margin-left: 2.813em; } } /* ================================ ELH: input styled like catalog ================================ */ input#catalogFilter { width: 100%; padding: 9px 15px; margin-top: 1em; margin-bottom: 1em; border: 2px solid #111111; box-sizing: border-box; font-family: "input-sans-compressed", Arial, Helvetica, sans-serif; text-transform: uppercase; font-weight: 500; } input#catalogFilter:focus { outline: 2px solid #d9d9d9; } input.catalogFilter { width: 100%; padding: 9px 15px; margin-top: 1em; margin-bottom: 1em; border: 2px solid #111111; box-sizing: border-box; font-family: "input-sans-compressed", Arial, Helvetica, sans-serif; text-transform: uppercase; font-weight: 500; } input.catalogFilter:focus { outline: 2px solid #d9d9d9; } input.catalogFilterA { width: 100%; padding: 9px 15px; margin-top: 1em; margin-bottom: 1em; border: 2px solid #111111; box-sizing: border-box; font-family: "input-sans-compressed", Arial, Helvetica, sans-serif; text-transform: uppercase; font-weight: 500; } input.catalogFilterA:focus { outline: 2px solid #d9d9d9; } input.catalogFilterB { width: 100%; padding: 9px 15px; margin-top: 1em; margin-bottom: 1em; border: 2px solid #111111; box-sizing: border-box; font-family: "input-sans-compressed", Arial, Helvetica, sans-serif; text-transform: uppercase; font-weight: 500; } input.catalogFilterB:focus { outline: 2px solid #d9d9d9; } /* ================================ ELH: class for hiding input labels ================================ */ .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* ================================ PDH: Event listing styles ================================ */ .noreadmore { font-family: "input-sans-compressed", Arial, Helvetica, sans-serif; font-size: 0.938em; letter-spacing: 0.113em; text-transform: uppercase; } /* ================================ ELH: 10/90 Flex List ================================ */ .flexListContainer { display: flex; margin-bottom: 50px; } .flexListLeft { width: calc(10% - 1em); } .flexListLeft h2 { font-family: "input-sans-compressed", Arial, Helvetica, sans-serif; text-transform: uppercase; font-size: 3em; padding-top: 0px; line-height: 1; margin-top: 0px; margin-bottom: 20px;} .flexListRight { width: calc(90% - 1em); } .flexListRight p:first-child { margin-top: 0px; padding-top: 0px; } .flexListRight h2:first-child { margin-top: 0px; padding-top: 0px; } .flexListRight h3:first-child { margin-top: 0px; padding-top: 0px; } .flexListRight h4:first-child { margin-top: 0px; padding-top: 0px; } @media all and (max-width: 549px) { .flexListLeft { margin-right: 2em; width: calc(20% - 2em); } .flexListRight { width: calc(80% - 1em); } } /* ================================ PDH: Button accordion ================================ */ .button-accordion { margin: 0; padding: 0; border-radius: 0; width: 100%; border-bottom: 1px solid #F4F4F7; margin-bottom: 3em; } button.button-accordion-trigger[aria-expanded='false']{ background: url('/_resources20/images/icons/plus.png') no-repeat; background-position: top 1.4em left 0.4em; } button.button-accordion-trigger[aria-expanded='true']{ background: url('/_resources20/images/icons/minus.png') no-repeat; background-position: top 1.8em left 0.4em; } .button-accordion div.accordion-button-wrapper { margin: 0; padding: 0; border-top: 1px solid #F4F4F7; } .button-accordion-trigger { background: none; color: hsl(0, 0%, 13%); display: block; font-size: 1rem; font-weight: normal; margin: 0; padding: 1em 1.5em 1em .5em; position: relative; text-align: left; width: 100%; outline: none; font-family: input-sans-compressed, sans-serif; font-size: 1.125em; text-transform: uppercase; font-weight: 600; letter-spacing: .12em; } .button-accordion-trigger:focus, .button-accordion-trigger:hover { cursor: pointer; } .button-accordion-trigger:focus { color: #606060; } .button-accordion *:first-child .button-accordion-trigger { border-radius: 5px 5px 0 0; } button.button-accordion-trigger { border-style: none; } .button-accordion button::-moz-focus-inner { border: 0; } .button-accordion-title { display: block; pointer-events: none; border: transparent 2px solid; border-radius: 5px; padding: 0.25em; outline: none; padding-left: 1.5em; } .button-accordion-trigger:focus-visible .button-accordion-title { border-color: hsl(0, 0%, 85%); } .Accordion-panel { margin: 0; padding: 1em 1.5em 1em 2.3em; } /* For Edge bug https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/4806035/ */ .Accordion-panel[hidden] { display: none; } .button-accordion fieldset { border: 0; margin: 0; padding: 0; } .button-accordion input { border: 1px solid hsl(0, 0%, 62%); border-radius: 0.3em; display: block; font-size: inherit; padding: 0.3em 0.5em; } /* ================================ PDH: Local nav button truncation ================================ */ .site-nav-button { width: 100%; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 38px; padding-right: 40px; color: white; text-transform: uppercase; max-width: 670px; border: none; font-size: 0.85rem; cursor: pointer; font-family: "input-sans-compressed", Arial, Helvetica, sans-serif; font-weight: 300; letter-spacing: 2px; } @media screen and (max-width: 960px) { .site-nav-button { text-align: left; padding-right: 20px; } } .site-nav-button img { height: 16px; width: 16px; vertical-align: text-top; } .leftnavInner .leftnavBtn { float: none; margin-top: 0px; display: inline-block; vertical-align: middle; padding-top: 3px; } /* ================================ PDH: Mobile search/top-menu fix ================================ */ @media screen and (max-width: 1200px) { #mobileHeader { right: 0; } #searchToggle { right: 42px; } .searchMobilecontent button[type=submit] { position: absolute; right: 12%; } } @media screen and (max-width: 340px) { .logo { width: 70%; } } .searchBox { width: 73%; margin-left: 20px; } /* ================================ ELH: Responsive iframe snippet ================================ */ .responsiveIframeContainer { position: relative; overflow: hidden; width: 100%; padding-top: 56.25%; /* 16:9 Aspect Ratio */ } .responsiveIframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; } /* ================================ PDH: DirectEdit link fix ================================ */ span#directedit { display: inline-block; } a#de { display: inline-block !important } /* ================================ PDH: backward compatibility ================================ */ .gray-text { background-color: #e2e3e5; } /* ================================ PDH: CTA top mobile bar ================================ */ #top-cta-bar-mobile, #top-cta-bar-mobile-spacer { display: none; } @media screen and (max-width: 1200px) { #top-cta-bar-mobile { display: block; } #top-cta-bar-mobile ul { display: flex; flex-wrap: wrap; justify-content: space-evenly; font-family: "input-sans-compressed", Arial, Helvetica, sans-serif; font-weight: 300; text-transform: uppercase; background: rgb(186,12,47); background: linear-gradient(133deg, rgba(186,12,47,1) 75%, rgba(255,208,67,1) 100%); position: fixed; top: 50px; z-index: 1000000; width: 110%; margin-left: -5%; animation: top-cta-bar-mobile-anim .6s, unskew 1s; font-size: 0.85rem; letter-spacing: 2px;} @keyframes top-cta-bar-mobile-anim { from { margin-left: -100%; width: 110%; } to { margin-left: -5%; width: 110%; } } @keyframes unskew { from { transform: skew(-27deg, 0deg); } to { transform: skew(0deg, 0deg); } } #top-cta-bar-mobile + .impact.noImpact .text-overlay { margin: 6em auto 4em auto; } #top-cta-bar-mobile ul li { padding: 10px; display: block; } #top-cta-bar-mobile ul li a { color: #ffffff; text-decoration: none; } #top-cta-bar-mobile-spacer { display: block; height: 1px; margin: 0; padding: 0; border: none; } .stickyTabs { display: none; } } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* IE Only */ #top-cta-bar-mobile ul li:first-of-type { margin-left: 5%; } } /* ================================ PDH: Change H3 in accordions ================================ */ .wysiwygContent .Accordion-panel h3 { font-family: "utopia-std", serif; text-transform: none; font-style: italic; margin: 0 0 0.5em 0; } /* ================================ ELH: Component - H3 w/ Background Image ================================ */ .h3Background { min-height: 250px; margin: 3.25em 0 1em 0; padding-top: 195px; } .h3BackgroundInner { background: #111111; z-index: 99; background-position: bottom left; height: fit-content; transform: skew(-27deg, 0deg); width: fit-content; max-width: 99%; min-width: 300px; margin-left: -16px; box-shadow: rgb(17 17 17 / 40%) -5px -5px, rgb(17 17 17 / 30%) -10px -10px, rgb(17 17 17 / 20%) -15px -15px, rgb(17 17 17 / 10%) -20px -20px; } .h3Background .h3BackgroundInner h3 { margin: 0 0 0 0; color: #ffffff; transform: skew(27deg, 0); padding: 1em 1em 1em 32px; } /* ================================ ELH: Callout Text w/o Triangle Before ================================ */ .calloutTextNoTriangle { color: #111111; font-family: "input-sans-compressed", Arial, Helvetica, sans-serif; font-size: 2.300em; text-transform: uppercase; letter-spacing: 0.12em; } /* ================================ ELH: Component - Vertical Feature - Three Columns ================================ */ .verticalFeature { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; margin: 0 0 4em 0; background: #000000; padding: 1em; } .verticalFeature a { text-decoration: none; } .verticalFeature a:hover { text-decoration: none; background: rgba(17,17,17,0.75);} .verticalFeatureItem { width: calc( 33% - 1em); margin: 0 0 0 0; box-shadow: 2px -2px 20px rgba(0, 0, 0, 0.05); -webkit-box-shadow: 2px -2px 20px rgba(0, 0, 0, 0.05); -moz-box-shadow: 2px -2px 20px rgba(0, 0, 0, 0.05); min-height: 600px; } .verticalFeatureItem .verticalFeatureItemInner.noVideo { margin: 0 0 0 0; background: rgba(17,17,17,0.85); background: linear-gradient(180deg, rgba(17,17,17,0.75) 0%, rgba(17,17,17,0.85) 45%, rgba(17,17,17,0.90) 55%, rgba(17,17,17,1) 100%); background-size: cover; padding: 250px 1em 1em 1em; width: 100%; height: 100%; } .verticalFeatureItem .verticalFeatureItemInner.noVideo:hover { background: rgba(17,17,17,0.85); background: linear-gradient(180deg, rgba(17,17,17,0.75) 0%, rgba(17,17,17,0.75) 45%, rgba(17,17,17,0.85) 55%, rgba(17,17,17,1) 100%); background-size: cover; padding: 250px 1em 1em 1em; width: 100%; height: 100%; } .verticalFeatureItem .newsDate { color: #ffffff; } .verticalFeatureItem :hover { cursor: pointer; } .verticalFeatureItemInner { margin: 0 0 0 -50px; padding: 0 0 0 0; background: rgba(17,17,17,0.75); width: fit-content; max-width: 100%; } .verticalFeatureItemInnerTextWrap { padding: 1em; } .verticalFeatureItemInner h2 { font-size: 1.5em; color: #ffffff; margin: 0 0 0.65em 0; padding: 0px; font-family: input-sans-compressed, Arial, Helvetica, sans-serif; line-height: 1.6; letter-spacing: 0.25; text-transform: uppercase; } .verticalFeatureItemInner h2:hover { color: #ffffff;} .verticalFeatureItemInner p { color: #ffffff;} .verticalFeatureItemInner p:hover { color: #ffffff;} .verticalFeatureItemInner .readmore { text-decoration: underline; transition-duration: 0.5s; } .verticalFeatureItemInner .readmore:hover { text-decoration: none; color: #ba0c2f; } @media only screen and (max-width: 800px) { .verticalFeatureItem { width: 100%; margin: 0 0 0 0; min-height: 350px; margin-bottom: 1em; } .verticalFeatureItem .verticalFeatureItemInner.noVideo { margin: 0em 0 0 0; padding: 150px 1em 1em 1em; } .verticalFeatureItem .verticalFeatureItemInner.noVideo:hover { padding: 150px 1em 1em 1em; width: 100%; height: 100%; } } /* ================================ ELH: Component - Interior News Four Column ================================ */ .interiorNewsFourColumn { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; padding: 0 0 0 0; margin: 0 0 4em 0; } .interiorNewsFourColumnItem { width: calc( 33% - 2em); border: 1px solid #d9d9d9; margin-bottom: 2em; box-shadow: 2px -2px 20px rgba(0, 0, 0, 0.05); -webkit-box-shadow: 2px -2px 20px rgba(0, 0, 0, 0.05); -moz-box-shadow: 2px -2px 20px rgba(0, 0, 0, 0.05); } a.interiorNewsFourColumnItem { color: #111111; text-decoration: none; } a.interiorNewsFourColumnItem:hover { color: #ba0c2f; text-decoration: none; transition-duration: 0.25s; box-shadow: 2px -2px 20px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 2px -2px 20px rgba(0, 0, 0, 0.1); -moz-box-shadow: 2px -2px 20px rgba(0, 0, 0, 0.1); } .interiorNewsFourColumnItem img { width: 100%; } .interiorNewsFourColumnItem h3 { padding: 0 0.5em 1em 0.5em; margin: 1em 0 0 0; font-family: utopia-std,serif; line-height: 1.5; text-transform: none; } .interiorNewsFourColumnItem p { font-size: 0.95em; color: #111111; margin: 0; padding: 0.5em; font-family: input-sans-compressed, Arial, Helvetica, sans-serif; text-transform: uppercase; padding: 0; } @media only screen and (max-width: 720px) { .interiorNewsFourColumnItem { width: calc( 50% - 0.5em); } .interiorNewsFourColumnItem h3 { font-size: 1.1rem; } } /* ================================ ELH: Component - Interior News Feature ================================ */ .interiorNewsDate { font-size: 0.85em; margin: 0; padding: 0; color: #ffffff; font-family: input-sans-compressed, Arial, Helvetica, sans-serif; text-transform: uppercase; padding: 0; } .interiorNewsFeatureWrap { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; margin: 0 0 4em 0; } .interiorNewsFeatureWrap a { text-decoration: none; } .interiorNewsFeatureWrap p > a { color: #ba0c2f; text-decoration: underline; } .interiorNewsFeatureWrap p > a:hover { color: #ca3e00; background: transparent; text-decoration: underline; } .interiorNewsFeatureWrap a:hover { text-decoration: none; background: rgba(17,17,17,0.75);} .interiorNewsFeatureItem { width: calc( 50% - 1em); margin: 0 0 2em 0; box-shadow: 2px -2px 20px rgba(0, 0, 0, 0.05); -webkit-box-shadow: 2px -2px 20px rgba(0, 0, 0, 0.05); -moz-box-shadow: 2px -2px 20px rgba(0, 0, 0, 0.05); } .interiorNewsFeatureItem .interiorNewsFeatureItemInner.noVideo { margin: 0 0 0 0; background: rgba(17,17,17,0.85); background: linear-gradient(180deg, rgba(17,17,17,0.25) 0%, rgba(17,17,17,0.75) 60%, rgba(17,17,17,0.90) 70%, rgba(17,17,17,1) 90%, rgba(17,17,17,1) 100%); background-size: cover; padding: 350px 1em 1em 1em; width: 100%; height: 100%; } .interiorNewsFeatureItem .interiorNewsDate { color: #ffffff; } .interiorNewsFeatureItem:hover { cursor: pointer; } .interiorNewsFeatureItemInner { margin: 0 0 0 -50px; padding: 0 0 0 0; background: rgba(17,17,17,0.75); width: fit-content; max-width: 100%; } .interiorNewsFeatureItemInnerTextWrap { padding: 1em; } .interiorNewsFeatureItemInner h2 { font-size: 1.5em; color: #ffffff; margin: 0; padding: 0px; font-family: utopia-std,serif; } .interiorNewsFeatureItemInner h2:hover { color: #ba0c2f;} @media only screen and (max-width: 800px) { .interiorNewsFeatureItem { width: 100%; margin: 0 0 1em 0; } } /* ================================ ELH: Component - Flex Layout Boxes ================================ */ .newsDate { font-size: 0.85em; margin: 0; padding: 0; color: #ffffff; font-family: input-sans-compressed, Arial, Helvetica, sans-serif; text-transform: uppercase; padding: 0; } .flexLayoutComponentWrap { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; margin: 0 0 4em 0; } .flexLayoutComponentWrap a { text-decoration: none; } .flexLayoutComponentWrap p > a { color: #ba0c2f; text-decoration: underline; margin-top: 2em; display: block; } .flexLayoutComponentWrap p > a:hover { color: #ca3e00; background: transparent; text-decoration: underline; } .flexLayoutComponentWrap a:hover { text-decoration: none; background: rgba(17,17,17,0.75); } .flexLayoutComponentItem { box-shadow: 2px -2px 20px rgba(0, 0, 0, 0.05); -webkit-box-shadow: 2px -2px 20px rgba(0, 0, 0, 0.05); -moz-box-shadow: 2px -2px 20px rgba(0, 0, 0, 0.05); } .flexLayoutComponentItem.flexLayoutComponentItemFullWidth { width: 100%; margin: 0 0 0.5em 0; } .flexLayoutComponentItem.flexLayoutComponentItemTwoThirdsWidth { width: calc( 66% - 0.25em ); margin: 0 0 0.5em 0; } .flexLayoutComponentItem.flexLayoutComponentItemHalfWidth { width: calc( 50% - 0.25em ); margin: 0 0 0.5em 0; } .flexLayoutComponentItem.flexLayoutComponentItemThirdWidth { width: calc( 33% - 0.25em ); margin: 0 0 0.5em 0; } .flexLayoutComponentItem.flexLayoutComponentItemQuarterWidth { width: calc( 25% - 0.25em ); margin: 0 0 0.5em 0; } .flexLayoutComponentItem .flexLayoutComponentItemInner { margin: 0 0 0 0; background: rgba(17,17,17,0.85); background: linear-gradient(180deg, rgba(17,17,17,0.25) 0%, rgba(17,17,17,0.75) 60%, rgba(17,17,17,0.90) 70%, rgba(17,17,17,1) 90%, rgba(17,17,17,1) 100%); background-size: cover; width: 100%; height: 100%; } .flexLayoutComponentItem.flexLayoutComponentItemFullWidth .flexLayoutComponentItemInner { padding: 350px 1em 1em 1em; } .flexLayoutComponentItem.flexLayoutComponentItemTwoThirdsWidth .flexLayoutComponentItemInner, .flexLayoutComponentItem.flexLayoutComponentItemHalfWidth .flexLayoutComponentItemInner, .flexLayoutComponentItem.flexLayoutComponentItemThirdWidth .flexLayoutComponentItemInner, .flexLayoutComponentItem.flexLayoutComponentItemQuarterWidth .flexLayoutComponentItemInner { padding: 185px 1em 1em 1em; } .flexLayoutComponentItem .newsDate { color: #ffffff; } .flexLayoutComponentItem:hover { cursor: pointer; } .flexLayoutComponentItemInner { margin: 0 0 0 -50px; padding: 0 0 0 0; background: rgba(17,17,17,0.75); width: fit-content; max-width: 100%; } .flexLayoutComponentItemInnerTextWrap { padding: 1em; } .flexLayoutComponentItemInner h2 { font-size: 1.5em; color: #ffffff; margin: 0; padding: 0px; font-family: utopia-std,serif; } .flexLayoutComponentItemInner h2:hover { color: #ba0c2f;} @media only screen and (max-width: 800px) { .flexLayoutComponentItem.flexLayoutComponentItemFullWidth { width: 100%; margin: 0 0 0.5em 0; } .flexLayoutComponentItem.flexLayoutComponentItemTwoThirdsWidth { width: 100%; margin: 0 0 0.5em 0; } .flexLayoutComponentItem.flexLayoutComponentItemHalfWidth { width: 100%; margin: 0 0 0.5em 0; } .flexLayoutComponentItem.flexLayoutComponentItemThirdWidth { width: 100%; margin: 0 0 0.5em 0; } .flexLayoutComponentItem.flexLayoutComponentItemQuarterWidth { width: 50%; margin: 0 0 0.5em 0; } } /* ================================ PDH: OneTrust Cookie Compliance ================================ */ button#ot-sdk-btn.ot-sdk-show-settings, button#ot-sdk-btn.optanon-show-settings { background-color: #111111; border: none; color: white; font-family: input-sans-compressed, sans-serif; font-size: 0.875em; display: inline-block; font-weight: 300; text-transform: uppercase; padding: 0; -webkit-transition: none; transition: none; } button#ot-sdk-btn.ot-sdk-show-settings:hover, button#ot-sdk-btn.optanon-show-settings:hover { background-color: #111111; text-decoration: underline; } div#onetrust-banner-sdk #onetrust-policy-text, div#onetrust-banner-sdk .ot-b-addl-desc, div#onetrust-banner-sdk .ot-gv-list-handler, div#onetrust-banner-sdk #onetrust-accept-btn-handler, div#onetrust-banner-sdk #onetrust-reject-all-handler, div#onetrust-banner-sdk #onetrust-pc-btn-handler, div#onetrust-pc-sdk #ot-pc-desc, div#onetrust-pc-sdk .ot-accordion-layout .ot-acc-grpdesc, div#onetrust-pc-sdk .category-vendors-list-handler, div#onetrust-pc-sdk .category-vendors-list-handler+a, div#onetrust-pc-sdk .category-host-list-handler, div#onetrust-pc-sdk .ot-host-name, div#onetrust-pc-sdk .ot-host-name a, div#onetrust-pc-sdk .ot-cat-header, div#onetrust-pc-sdk .ot-btn-container button, div#onetrust-pc-sdk .ot-host-opt li>div div, div#onetrust-pc-sdk #vendor-search-handler, div#onetrust-pc-sdk .ot-accordion-layout.ot-cat-item .ot-acc-grpdesc, div#onetrust-pc-sdk #ot-host-lst .ot-host-name, div#onetrust-pc-sdk #ot-host-lst .ot-host-expand, div#onetrust-pc-sdk .ot-accordion-layout .ot-cat-header { font-size: 1rem; } div#onetrust-banner-sdk .ot-sdk-button, div#onetrust-banner-sdk button, div#onetrust-pc-sdk .ot-sdk-button, div#onetrust-pc-sdk button, div#ot-sdk-cookie-policy .ot-sdk-button, div#ot-sdk-cookie-policy button { font-size: 1.1rem; } div#onetrust-pc-sdk .ot-host-expand { font-size: 0.9rem; } div#onetrust-pc-sdk .ot-pc-logo { width: 300px; } div#ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy td { word-break: break-all; } /* ================================ PDH: H2 Spacing ================================ */ div#skipToContent h2, div#skipToContent h2.alt-h2, div#skipToContent h2.alt-h2:first-of-type { margin: 40px 0 20px 0; } div#skipToContent div h2:first-child { margin: 0 0 20px 0; } /* ================================ PDH: Event font change ================================ */ .homeEvents .title { font-family: input-sans-compressed,Arial,Helvetica,sans-serif; text-transform: uppercase; } .homeEvents .description { font-family: utopia-std, serif; } .homeEvents .eventWrap { /* fix display in IE */ overflow: visible; overflow: unset; } /* ================================ ELH: Flexbox Tiles with Filters ================================ */ .ferrisFlex-FilterTiles { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } .ferrisFlex-FilterTiles a { text-decoration: none; } .ferrisFlex-FilterTiles a:hover { text-decoration: none; } .ferrisFlexObject-FilterTiles { width: calc(50% - 1rem); height: 225px; margin: 0.5rem 0rem; } .ferrisFlexObject-FilterTiles:hover { cursor: pointer; } .ferrisFlexObject-FilterTiles h3 { margin-top: 0px; margin-bottom: 0; padding: 112px 15px 15px 15px; font-size: 1.65em; color: #ffffff; } .ferrisFlexObject-FilterTiles:hover h3 { text-decoration: underline; text-decoration-color: #ba0c2f; } .ferrisFlexObject-FilterTilesBG { background-color: rgba(17,17,17,.75); height: 100%; } .ferrisFlexObject-FilterTilesBG:hover { background: linear-gradient(142deg, rgba(186,12,47,0.1) 6%, rgba(186,12,47,0.6) 34%, rgba(186,12,47,0.8) 65%, rgba(255,208,67,1) 100%); } a.ferrisFlexObject-FilterTiles:focus { outline: 2px solid #ba0c2f; } .ferrisFlex-FilterTiles-LinkText { display: block; width: 100%; font-family: input-sans-compressed, Arial, Helvetica, sans-serif; text-transform: uppercase; margin-top: 0px; margin-bottom: 0; padding: 40px 15px 15px 15px; font-size: 1.65em; color: #ffffff; line-height: 1.22;} .ferrisFlex-FilterTiles-LinkText:hover { text-decoration: none; } .ferrisFlex-FilterTiles-LinkDesc { font-family: utopia-std, serif; text-transform: none; display: block; color: #ffffff; padding: 0px 15px 15px 15px; transition-duration: 0.5s; } .ferrisFlex-FilterTiles-LinkDesc:hover { text-decoration: none; } .ferrisFlex-FilterTiles-ButtonsContainer { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; margin-bottom: 2em; margin-top: 1.5em; } .ferrisFlex-FilterTiles-Buttons { width: calc( 25% - 2em); display: inline-block; font-family: input-sans-compressed, Arial, Helvetica, sans-serif; font-weight: 500; background-color: transparent; color: #111; padding: 0.5em 0.75em; text-transform: uppercase; text-decoration: none; cursor: pointer; border: 2px solid #333; text-align: center; transition-duration: 0.5s; } .ferrisFlex-FilterTiles-Buttons:hover { background-color: #111111; color: #ffffff; } .ferrisFlex-FilterTiles-Buttons:active { background-color: #111111; color: #ffffff; } @media only screen and (max-width: 800px) { .ferrisFlex-FilterTiles-Buttons { width: calc(50% - 1rem); margin-bottom: 1em; } } @media only screen and (max-width: 700px) { .ferrisFlexObject-FilterTiles { height: 165px; } .ferrisFlex-FilterTiles-LinkText { padding: 30px 15px 15px 15px; font-size: 1.35em; } .ferrisFlex-FilterTiles-LinkDesc { font-size: 0.85em; } } @media only screen and (max-width: 500px) { .ferrisFlexObject-FilterTiles { width: 100%; height: 165px; } .ferrisFlex-FilterTiles-LinkText { padding: 35px 15px 5px 15px; font-size: 1.75em; } } /* ================================ ELH: Slick Slider Edits ================================ */ .featured-slider { width: 80%; max-width: 1100px; margin: 2em auto; } .featured-slider .slider .slide * { color: inherit; } .featured-slider .slider .slide { background: transparent; color: #ffffff; } .featured-slider .slider .slide .ferrisFlex-Two-simple { margin-bottom: 0.5em; color: #333333; } .featured-slider .ferrisFlex-Two-simple .person-name { margin-bottom: 0.25em; } .slick-arrow.slick-hidden { display: inline; } .slick-prev:hover,.slick-prev:focus { background-position: center center; background-repeat: no-repeat;} .slick-next:hover,.slick-next:focus { background-position: center center; background-repeat: no-repeat;} .slick-prev,.slick-next {font-size:50px; line-height:50px; z-index:1; position:absolute; top:40%; display:block; width:50px; height:50px ;padding:0; -webkit-transform:translate(0,-50%); -ms-transform:translate(0,-50%); transform:translate(0,-50%); cursor:pointer; color: transparent; border:none; outline:none; background:transparent; overflow: hidden; } .slick-prev { left: -12%; background-position: center center; background-repeat: no-repeat; } .slick-next { right: -12%; background-position: center center; background-repeat: no-repeat; } .slick-next:before { content: url('/_resources20/images/Icons/button-slick-slider-set-05-01.png'); opacity: 0.25; } .slick-prev:before { content: url('/_resources20/images/Icons/button-slick-slider-set-05-02.png'); opacity: 0.25; } @media only screen and (max-width: 500px) { .featured-slider { width: 75%; } .slick-prev { left: -19%; background-position: center center; background-repeat: no-repeat; } .slick-next { right: -19%; background-position: center center; background-repeat: no-repeat; } } /* ================================ ELH: Academic Program Header ================================ */ .programHeaderInfo { padding-bottom: 1em; border-bottom: 2px solid #333333; width: fit-content; } .programHeaderInfo p { line-height: 1.6; font-size: 0.9em; margin: 0px 0px; font-family: input-sans-compressed,Arial,Helvetica,sans-serif; text-transform: uppercase; letter-spacing: 0.12em; } /* ================================ ELH: UL With Icons ================================ */ .ulWithIcons .fa-li { left: -2.5em; } .ulWithIcons .fa-ul li { margin-bottom: 2em; } .columns .ulWithIcons ul.fa-ul { margin-left: 0; margin-bottom: 0; } /* ================================ PDH: Make room in header ================================ */ @media screen and (min-width: 1201px) { .utilityLink { padding: 25px 20px; } } /* ================================ ELH: h2 Callout Text w/ Correct Font-Family in Content w/ Background Snippet ================================ */ .banner h2.calloutTextNoTriangle { font-family: input-sans-compressed,sans-serif; } /* ================================ ELH: Interior Content Cards - Image Heading ================================ */ .interiorContentCardHeading { background-size: cover; background-repeat: none; background-position: top center; width: 100%; height: fit-content; min-height: 250px; } .interiorContentCardHeadingOverlay { width: 100%; min-height: 250px; background: rgba(0,0,0,0.65); padding: 0.25em; display: flex; justify-content: center; align-content: center; flex-direction: column; text-align: center; } .interiorContentCardHeadingOverlay span.h2Underline, .interiorContentCardHeadingOverlay h2 { color: #ffffff; } /* ================================ ELH: Interior Content Cards - Three Column ================================ */ .interiorContentCardContainer-threeColumn { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; padding: 0 0 0 0; margin: 0 0 4em 0; } .interiorContentCardItem-threeColumn { width: calc( 33% - 2em); border: 1px solid #d9d9d9; margin-bottom: 2em; box-shadow: 2px -2px 20px rgba(0, 0, 0, 0.05); -webkit-box-shadow: 2px -2px 20px rgba(0, 0, 0, 0.05); -moz-box-shadow: 2px -2px 20px rgba(0, 0, 0, 0.05); } div.interiorContentCardItem-threeColumn { color: #111111; text-decoration: none; } .interiorContentCardItem-threeColumn img { width: 100%; } .columns .interiorContentCardContainer-threeColumn ul.fa-ul { padding-left: 0px; } .interiorContentCardText { padding: 2em; } .interiorContentCardText > :first-child { margin-top: 0; } .interiorContentCardText > :last-child { margin-bottom: 0; } @media only screen and (max-width: 1000px) { .interiorContentCardItem-threeColumn { width: calc( 50% - 2em); } } @media only screen and (max-width: 650px) { .interiorContentCardItem-threeColumn { width: 100%; } } /* ================================ ELH: Interior Content Cards - Two Column ================================ */ .interiorContentCardContainer-twoColumn { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; padding: 0 0 0 0; margin: 0 0 4em 0; } .interiorContentCardItem-twoColumn { width: calc( 50% - 2em); border: 1px solid #d9d9d9; margin-bottom: 2em; box-shadow: 2px -2px 20px rgba(0, 0, 0, 0.05); -webkit-box-shadow: 2px -2px 20px rgba(0, 0, 0, 0.05); -moz-box-shadow: 2px -2px 20px rgba(0, 0, 0, 0.05); } div.interiorContentCardItem-twoColumn { color: #111111; text-decoration: none; } .interiorContentCardItem-twoColumn img { width: 100%; } .columns .interiorContentCardContainer-twoColumn ul.fa-ul { padding-left: 0px; } @media only screen and (max-width: 650px) { .interiorContentCardItem-twoColumn { width: 100%; } } /* ================================ ELH: Interior Content Cards - Two Column - CLICKABLE ================================ */ .interiorContentCardContainer-twoColumn.clickableCardContainer { column-gap: 3em; justify-content: flex-start; } .interiorContentCardItem-twoColumn.clickableCardItem:hover { transform: scale(0.97); transition-duration: 850ms; background-color: #f7f7f7 } .clickableCardAnchor { display: contents; text-decoration: none; color: inherit; } /* ================================ ELH: Interior Content Cards - Three Column - CLICKABLE ================================ */ .interiorContentCardContainer-threeColumn.clickableCardContainer { column-gap: 3em; justify-content: flex-start; } .interiorContentCardItem-threeColumn.clickableCardItem:hover { transform: scale(0.97); transition-duration: 850ms; background-color: #f7f7f7 } /* ================================ ELH: Interior Content Cards - Degree Type Styling ================================ */ h2.degreeTitle,h3.degreeTitle { margin: 0 0 0 0; padding: 0 0 0 0; } .degreeSubInfo { color: #ba0c2f; margin: 0 0 1em 0; font-style: italic; } /* ================================ PDH: Video hero ================================ */ #hero-video { width: 100%; height: auto; min-height: 432px; object-fit: cover; display: block;} .impact.noImpact #hero-video ~ .text-overlay { margin: 0 auto; pointer-events: none; } .impact.noImpact #hero-video ~ .text-overlay h1.page-title { margin-top: -250px; margin-bottom: 107px; height: 136px; text-align: center; -webkit-transform: translate3d(0,0,0); z-index: 5; pointer-events: none; } .video-controls { margin-top: -65px; padding-bottom: 40px; padding-left: 20px; z-index: 6; } .video-controls button{ -webkit-transform: translate3d(0,0,0); height: 30px; pointer-events: none; color: black; border-radius: 15px; border: none; background-color: white; } .fa.fa-play, .fa.fa-pause { font-size: 20px; } #hero-video + .video-controls button { opacity: 0; transition: all .3s ease-in-out; } #hero-video + .video-controls button:focus { opacity: 1; } #hero-video:hover + .video-controls button { opacity: 1; } @media screen and (max-width: 1023px) { #hero-video { width: 100%; height: 432px; } } #hero-video-mobile-image { display: none; } @media screen and (max-width: 639px) { #hero-video-mobile-image { display: block; } #hero-video-mobile-image + #hero-video, #hero-video-mobile-image ~ .video-controls { display: none; } } /* ================================================================ PDH: Mobile menu spacing with sticky tabs/bar present ================================================================ */ @media screen and (max-width: 1200px) { #menu.sticky-nav-present { margin-top: 2em; } } /* ================================================================ ELH: Image floats and captions ================================================================ */ .noCaption.img100Right, .noCaption.img100Left { margin-bottom: 1em; width: 100%; } .noCaption.img70Right { float: right; margin-bottom: 1em; margin-left: 1.5em; width: 70%; clear: none; } .noCaption.img70Left { float: left; margin-bottom: 1em; margin-left: 1.5em; width: 70%; clear: none; } .noCaption.img50Right { float: right; margin-bottom: 1em; margin-left: 1.5em; width: 50%; clear: none; } .noCaption.img50Left { float: left; margin-bottom: 1em; margin-right: 1.5em; width: 50%; clear: none; } .noCaption.img33Right { float: right; margin-bottom: 1em; margin-left: 1.5em; width: 33%; clear: none; } .noCaption.img33Left { float: left; margin-bottom: 1em; margin-right: 1.5em; width: 33%; clear: none; } .noCaption.img25Right { float: right; margin-bottom: 1em; margin-left: 1.5em; width: 25%; clear: none; } .noCaption.img25Left { float: left; margin-bottom: 1em; margin-right: 1.5em; width: 25%; clear: none; } .noCaption.img15Right { float: right; margin-bottom: 1em; margin-right: 1.5em; width: 15%; clear: none; } .noCaption.img15Left { float: left; margin-bottom: 1em; margin-right: 1.5em; width: 15%; clear: none; } .noCaption img { width: 100%; } .imageCaption.img100Right, .imageCaption.img100Left { margin-bottom: 1em; width: 100%; border: 1px solid #d9d9d9; } .imageCaption.img70Right { float: right; margin-bottom: 1em; margin-left: 1.5em; width: 70%; border: 1px solid #d9d9d9; clear: none; } .imageCaption.img70Left { float: left; margin-bottom: 1em; margin-right: 1.5em; width: 70%; border: 1px solid #d9d9d9; clear: none; } .imageCaption.img50Right { float: right; margin-bottom: 1em; margin-left: 1.5em; width: 50%; border: 1px solid #d9d9d9; clear: none; } .imageCaption.img50Left { float: left; margin-bottom: 1em; margin-right: 1.5em; width: 50%; border: 1px solid #d9d9d9; clear: none; } .imageCaption.img33Right { float: right; margin-bottom: 1em; margin-left: 1.5em; width: 33%; border: 1px solid #d9d9d9; clear: none; } .imageCaption.img33Left { float: left; margin-bottom: 1em; margin-right: 1.5em; width: 33%; border: 1px solid #d9d9d9; clear: none; } .imageCaption.img25Right { float: right; margin-bottom: 1em; margin-left: 1.5em; width: 25%; border: 1px solid #d9d9d9; clear: none; } .imageCaption.img25Left { float: left; margin-bottom: 1em; margin-right: 1.5em; width: 25%; border: 1px solid #d9d9d9; clear: none; } .imageCaption.img15Right { float: right; margin-bottom: 1em; margin-right: 1.5em; width: 15%; border: 1px solid #d9d9d9; clear: none; } .imageCaption.img15Left { float: left; margin-bottom: 1em; margin-right: 1.5em; width: 15%; border: 1px solid #d9d9d9; clear: none; } .imageCaption.img20Left.noFloat { float: left; margin-right: 1.5em; width: 20%; border: none; margin-bottom: 1.5em; } .imageCaption img { width: 100%; } .imageCaption p { padding: 1em 1em 0em 1em; } @media only screen and (max-width: 800px) { .noCaption.img70Right { float: right; margin-bottom: 1em; margin-left: 1.5em; width: 50%; } .noCaption.img70Left { float: left; margin-bottom: 1em; margin-right: 1.5em; width: 50%; } .noCaption.img50Right { float: right; margin-bottom: 1em; margin-left: 1.5em; width: 50%; } .noCaption.img50Left { float: left; margin-bottom: 1em; margin-right: 1.5em; width: 50%; } .noCaption.img33Right { float: right; margin-bottom: 1em; margin-left: 1.5em; width: 50%; } .noCaption.img33Left { float: left; margin-bottom: 1em; margin-right: 1.5em; width: 50%; } .noCaption.img25Right { float: right; margin-bottom: 1em; margin-left: 1.5em; width: 50%; } .noCaption.img25Left { float: left; margin-bottom: 1em; margin-right: 1.5em; width: 50%; } .noCaption.img15Right { float: right; margin-bottom: 1em; margin-left: 1.5em; width: 50%; } .noCaption.img15Left { float: left; margin-bottom: 1em; margin-right: 1.5em; width: 50%; } .imageCaption.img70Right { float: right; margin-bottom: 1em; margin-left: 1.5em; width: 50%; } .imageCaption.img70Left { float: left; margin-bottom: 1em; margin-right: 1.5em; width: 50%; } .imageCaption.img50Right { float: right; margin-bottom: 1em; margin-left: 1.5em; width: 50%; } .imageCaption.img50Left { float: left; margin-bottom: 1em; margin-right: 1.5em; width: 50%; } .imageCaption.img33Right { float: right; margin-bottom: 1em; margin-left: 1.5em; width: 50%; } .imageCaption.img33Left { float: left; margin-bottom: 1em; margin-right: 1.5em; width: 50%; } .imageCaption.img25Right { float: right; margin-bottom: 1em; margin-left: 1.5em; width: 50%; } .imageCaption.img25Left { float: left; margin-bottom: 1em; margin-right: 1.5em; width: 50%; } .imageCaption.img15Right { float: right; margin-bottom: 1em; margin-left: 1.5em; width: 50%; } .imageCaption.img15Left { float: left; margin-bottom: 1em; margin-right: 1.5em; width: 50%; } } @media only screen and (max-width: 500px) { .noCaption.img100Right, .noCaption.img100Left, .imageCaption.img100Right, .imageCaption.img100Left { margin-bottom: 1.5em; } .noCaption.img70Right { float: none; margin-bottom: 1.5em; margin-left: 0em; width: 100%; } .noCaption.img70Left { float: none; margin-bottom: 1.5em; margin-right: 0em; width: 100%; } .noCaption.img50Right { float: none; margin-bottom: 1.5em; margin-left: 0em; width: 100%; } .noCaption.img50Left { float: none; margin-bottom: 1.5em; margin-right: 0em; width: 100%; } .noCaption.img33Right { float: none; margin-bottom: 1.5em; margin-left: 0em; width: 100%; } .noCaption.img33Left { float: none; margin-bottom: 1.5em; margin-right: 0em; width: 100%; } .noCaption.img25Right { float: none; margin-bottom: 1.5em; margin-left: 0em; width: 100%; } .noCaption.img25Left { float: none; margin-bottom: 1.5em; margin-right: 0em; width: 100%; } .noCaption.img15Right { float: none; margin-bottom: 1.5em; margin-left: 0em; width: 100%; } .noCaption.img15Left { float: none; margin-bottom: 1.5em; margin-right: 0em; width: 100%; } .imageCaption.img70Right { float: none; margin-bottom: 1.5em; margin-left: 0em; width: 100%; } .imageCaption.img70Left { float: none; margin-bottom: 1.5em; margin-right: 0em; width: 100%; } .imageCaption.img50Right { float: none; margin-bottom: 1.5em; margin-left: 0em; width: 100%; } .imageCaption.img50Left { float: none; margin-bottom: 1.5em; margin-right: 0em; width: 100%; } .imageCaption.img33Right { float: none; margin-bottom: 1.5em; margin-left: 0em; width: 100%; } .imageCaption.img33Left { float: none; margin-bottom: 1.5em; margin-right: 0em; width: 100%; } .imageCaption.img25Right { float: none; margin-bottom: 1.5em; margin-left: 0em; width: 100%; } .imageCaption.img25Left { float: none; margin-bottom: 1.5em; margin-right: 0em; width: 100%; } .imageCaption.img15Right { float: none; margin-bottom: 1.5em; margin-left: 0em; width: 100%; } .imageCaption.img15Left { float: none; margin-bottom: 1.5em; margin-right: 0em; width: 100%; } .imageCaption.img20Left.noFloat { float: none; margin-bottom: 1.5em; margin-right: 0em; width: 100%; } } /* ================================ ELH: h2 Underline Style ================================ */ .h2Underline { background-image: -webkit-gradient(linear,left top,left bottom,from(#d9d9d9),to(#d9d9d9)); background-image: -o-linear-gradient(#d9d9d9,#d9d9d9); background-image: linear-gradient(#d9d9d9,#d9d9d9); background-size: 1px 0.3em; background-repeat: repeat-x; background-position: 0 90%; } /* ================================ ELH: Anchor Scroll ================================ */ a.scrollToAnchor { scroll-margin-top: 250px; } /* ================================================================ PDH: Sticky local nav bar ================================================================ */ .topDividerWrapper { z-index: 9999; } .topDividerWrapper.sticky { position: fixed; top: 134px; /* desktop */ width: 100%; } #top-cta-bar-mobile ul { border-bottom: 1px solid white; } @media screen and (max-width: 1200px) { .topDividerWrapper.sticky { top: 66px; /* mobile */ } #top-cta-bar-mobile ~ .topDividerWrapper.sticky { top: 106px; /* mobile with sticky tabs */ } } #shield { display: none; position: fixed; top: 94px; background-color: white; z-index: 52; width: 50%; height: 25px; } /* ================================================================ PDH: Handshake Listing component ================================================================ */ .three-column-cards { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; padding: 0; margin: 0 0 4em; } .three-column-cards .card { display: block; width: calc(33% - 2em); border: 1px solid #d9d9d9; margin-bottom: 2em; box-shadow: 2px 2px 20px rgb(0 0 0 / 5%); padding: 1em; overflow: hidden; text-decoration: none; } .three-column-cards .card:hover { text-decoration: none; border: 1px solid black; } .three-column-cards .card h2 { font-size: 1.2em; color: #ba0c2f; text-decoration: underline; } div#skipToContent .three-column-cards .card h2 { margin-top: 0.75em; } .three-column-cards .card .pub-date { color: #111; font-family: input-sans-compressed,Arial,Helvetica,sans-serif; text-transform: uppercase; font-size: 0.75em; } .three-column-cards .card .description { color: #111; } input#card-filter { width: 100%; padding: 9px 15px; margin-top: 1em; margin-bottom: 2em; border: 2px solid #111; font-family: input-sans-compressed,Arial,Helvetica,sans-serif; text-transform: uppercase; } @media screen and (max-width: 490px) { .three-column-cards .card { width: calc(50% - 2em); } } @media screen and (max-width: 375px) { .three-column-cards .card { width: 100%; } } /* ================================================================ ELH: Profile Card for Testimonials ================================================================ */ .profileCardContainer { display: flex; flex-wrap: wrap; width: 100%; justify-content: space-between; } .profileCard { width: 48%; padding: 380px 0 0 0; color: #ffffff; min-height: 600px; } .profileCard h3 { color: #ffffff; margin-top: 0px; } .profileCardInner { background: rgba(17,17,17,0.85); background: linear-gradient(180deg, rgba(17,17,17,0.75) 0%, rgba(17,17,17,0.85) 50%, rgba(17,17,17,1) 100%);; background-size: cover; padding: 1em; min-height: 240px; height: 100%; } @media only screen and (max-width: 767px) { .profileCard { width: 100%; min-height: 550px; margin-bottom: 2em; padding: 450px 0 0 0; } .profileCardInner { min-height: 225px; } } @media only screen and (max-width: 600px) { .profileCard { padding: 325px 0 0 0; } } /* ================================================================ ELH: In-Page Navigation ================================================================ */ .inPageNavBackground { width: 100%; padding: 0 0 0 0; margin: 0 0 4em 0; background-image: url('/images/_hero-images/hero-buildings-m_1.jpg'); background-position: center center; background-size: cover; background-repeat: no-repeat; } .inPageNavOverlay { width: 100%; background: rgba(17,17,17,0.9); padding: 3em 0 0 2em; } .inPageNavContainer { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; margin: 0 0 0 0; width: 100%; background: rgba(17,17,17,0.9); padding: 2em 5.5em; } .inPageNavContainer h2 { color: #ffffff; } .inPageNavContainer .inPageNavItem { border-bottom: 1px solid #d9d9d9; margin-bottom: 1.25em; width: calc( 30% - 2em); padding-bottom: 0.5em; } .inPageNavItem a { color: #ffffff; text-decoration: none; } .inPageNavItem a:hover { color: #ba0c2f; text-decoration: none; cursor: pointer; } @media screen and (max-width: 850px) { .inPageNavContainer .inPageNavItem { width: calc( 50% - 2em); } } @media screen and (max-width: 450px) { .inPageNavContainer { padding: 2em 2em; } } @media screen and (max-width: 450px) { .inPageNavContainer { padding: 2em 2em; } .inPageNavOverlay { padding: 2em 0.5em 0 0.5em; } } /* ================================================================ ELH: Text with Speedline Background ================================================================ */ .h2SpeedlineBackground { text-align: center; background-color: #ba0c2f; color: #FFF; width: fit-content; -moz-transform: skew(-30deg, 0deg); -webkit-transform: skew(-30deg, 0deg); -o-transform: skew(-30deg, 0deg); -ms-transform: skew(-30deg, 0deg); transform: skew(-30deg, 0deg); margin: 0 0 0 7px; } .h2SpeedlineBackground .h2SpeedlineBackgroundWrap { -moz-transform: skew(30deg, 0deg); -webkit-transform: skew(30deg, 0deg); -o-transform: skew(30deg, 0deg); -ms-transform: skew(30deg, 0deg); transform: skew(30deg, 0deg); padding: 0.2em 2em 0em 2em; } .h2SpeedlineBackground .h2SpeedlineBackgroundText { text-align: center; font-size: 2em; font-family: "input-sans-compressed", Arial, Helvetica, sans-serif; padding: 0.2em 0.5em; margin: 0; line-height: 1; display: block; text-transform: uppercase; } @media screen and (max-width: 450px) { .h2SpeedlineBackground .h2SpeedlineBackgroundText { font-size: 1.875em; } .h2SpeedlineBackground { margin: 0 auto; } .h2SpeedlineBackground { text-align: center; background-color: #ba0c2f; color: #FFF; width: fit-content; -moz-transform: skew(-30deg, 0deg); -webkit-transform: skew(-30deg, 0deg); -o-transform: skew(-30deg, 0deg); -ms-transform: skew(-30deg, 0deg); transform: skew(-30deg, 0deg); margin: 0 0 0 7px; } .h2SpeedlineBackground .h2SpeedlineBackgroundWrap { -moz-transform: skew(30deg, 0deg); -webkit-transform: skew(30deg, 0deg); -o-transform: skew(30deg, 0deg); -ms-transform: skew(30deg, 0deg); transform: skew(30deg, 0deg); padding: 0.2em 2em 0em 2em; } .h2SpeedlineBackground .h2SpeedlineBackgroundText { text-align: center; font-size: 2em; font-family: "input-sans-compressed", Arial, Helvetica, sans-serif; padding: 0.2em 0.5em; margin: 0; line-height: 1; display: block; text-transform: uppercase; } .h2SpeedlineBackground .h2SpeedlineBackgroundWrap { padding: 0.2em 1em 0.2em 1em; } .h2SpeedlineBackground .h2SpeedlineBackgroundText { font-size: 1.875em; } .h2SpeedlineBackground { margin: 0 auto; } } /* ================================================================ ELH: Responsive Tabs ================================================================ */ .tabButton { background-color: transparent; border-width: 0; font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; line-height: inherit; padding: 0; text-transform: uppercase; text-align: left; } .tabButton:hover { cursor: pointer; } ul.tabs { float: left; list-style: none; width: 100%; padding: 0; margin: 0; } ul.tabs li { float: left; cursor: pointer; width: 20%; margin-right: 5%; border-bottom: 1px solid #111111; font-size: 1.1em; letter-spacing: .12em; font-family: input-sans-compressed,sans-serif; text-transform: uppercase; transition-duration: 0.3s; } ul.tabs li.tab_last { margin-right: 0; } ul.tabs li:hover { border-bottom: 1px solid #ba0c2f; curso: pointer; } ul.tabs li.active { display: block; border-bottom: 4px solid #ba0c2f; color: #ba0c2f; } .tab_container { clear: both; width: 100%; background: #fff; overflow: auto; margin-bottom: 6em; } .tab_content { padding: 0; display: none; } .tab_drawer_heading { display: none; } @media screen and (max-width: 720px) { .tabs { display: none; } .tab_drawer_heading { background-color: transparent; color: #111111; border-top: none; margin: 0; padding: 5px 20px; display: block; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } } @media screen and (min-width: 721px) { ul.tabs { display: flex; align-items: flex-end; } } .tabContentContainerOuter { width: 100%; max-width: 1110px; padding: 2em 0 0 0; } .tabContentContainerInner { width: 100%; display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: flex-start; align-items: flex-end; } .tabContentImage { width: 100%; height: 600px; background-position: center top; background-size: cover; background-repeat: no-repeat; } .tabContentText { width: 50%; height: fit-content; margin: 0 -50% 0 0; background-color: rgba(255,255,255,0.90); padding: 2em 3.5em; z-index: 50; border-right: 6px solid #ba0c2f; } .tabContentText a.cta-button, .cta-button { margin-bottom: 0; } @media screen and (max-width: 721px) { .tabContentContainerOuter { padding: 0 25px; } .tabContentContainerInner { flex-wrap: wrap-reverse; } .tabContentText { width: 100%; height: fit-content; margin: 0; background-color: rgba(255,255,255,1); -webkit-clip-path: unset; clip-path: unset; padding: 1.5em; z-index: 50; border-right: none; } .tabContentImage { height: 400px; } } /* ================================ ELH: Component - Progress Bar ================================ */ .progressBarContainer { position: relative; width: 99%; margin: 20px 0; text-align: left; } .progressBar { position: relative; height: 3.85em; background-color: #ffffff; border: 2px solid #111111; -webkit-box-shadow: 2px 7px 10px 0px rgba(0,0,0,0.16); -moz-box-shadow: 2px 7px 10px 0px rgba(0,0,0,0.16); box-shadow: 2px 7px 10px 0px rgba(0,0,0,0.16); } .progressBarFill { position: absolute; top: 0; left: 0; height: 100%; background: rgb(186,12,47); background: linear-gradient(90deg, rgba(186,12,47,1) 50%, rgba(255,208,67,1) 100%); width: 0; transition: width 0.75s; } .progressBarText { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 3em; margin: 0 0 0.75em 0; } .progressBarCounterCard { width: 15%; text-align: center; } .progressBarCounterNumber { font-size: 1.857em; font-family: utopia-std,serif; } .progressBarCounterLabel { font-size: 1em; font-family: input-sans-compressed,sans-serif; text-transform: uppercase; } @media screen and (max-width: 600px) { .progressBarText { justify-content: space-between; padding-left: 0; } .progressBarCounterCard { width: 25%; } } @media screen and (max-width: 425px) { .progressBarText { justify-content: space-between; padding-left: 0; } .progressBarCounterCard { width: 22%; } .progressBarCounterLabel { font-size: 0.75em; } } /* ================================================================ ELH: Interior Callout Section ================================================================ */ .interiorCalloutSection { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-betwen; background-color: #d9d9d9; align-items: center; padding: 2em; margin: 1.5em 0 2.5em 0; } .interiorCalloutSectionLeft { width: 30%; } .interiorCalloutSectionRight { width: 65%; padding: 0.75em;; } @media screen and (max-width: 900px) { .interiorCalloutSectionLeft { width: 100%; } .interiorCalloutSectionRight { width: 100%; padding: 0em; } } /* ================================================================ PDH: Hide from search ================================================================ */ .hide-from-search { /* A class used to remove the contents from Omni CMS search and search descriptions. Implemented in the search engine itself. */ } /* ================================================================ PDH: Bulldog Logo ================================================================ */ #ferris-bulldog { width: 200px; height: auto; transition: all 0.5s ease-in-out; float: left; margin-top: 16px; clear: both; pointer-events: auto; } #ferris-wordmark { width: 200px; height: auto; float: left; margin-top: 16px; pointer-events: auto; } #ferris-bulldog.overlapped { width: 58px; margin-right: 12px; } #logo-spacer { width: 482px; height: 1px; float: left; } @media screen and (max-width: 1536px) { #ferris-bulldog, #ferris-bulldog.overlapped { width: 58px; margin-right: 12px; margin-left: 8px; } #ferris-wordmark { width: 186px; } #logo-spacer { width: 266px; } } @media screen and (max-width: 1200px) { #ferris-bulldog, #ferris-bulldog.overlapped { width: 36px; margin-top: 8px; } #ferris-wordmark { width: 116px; margin-top: 8px; } } /* ================================================================ PDH: News page ================================================================ */ p.news-dateline { font-style: italic; } h1.news-page-title { font-family: utopia-std, serif; text-transform: none; font-size: 1.8rem; margin: 0 0 1rem 0; } figure.news-hero-figure { border: 1px solid #d9d9d9; padding: 0; margin-bottom: 15px; } img.news-hero-image { display: block; width: 100%; height: auto; } figcaption.news-hero-caption { width: 100%; padding: 0.7em; border-top: 1px solid #d9d9d9; } div.news-location { font-weight: bold; float: left; line-height: 1.75em; } p.news-byline { margin-top: 15px; font-style: italic; } .impact.noImpact.news-impact { display: none; } .news-share a:link, .news-share a:visited { color: #3a3a3a; } p.news-share { font-size: 32px; margin-bottom: 0; } /* ================================================================ PDH: News three column goes to one column when max-width: 425px. ================================================================ */ @media only screen and (max-width: 425px) { .interiorNewsFourColumnItem { width: 100%; } } /* ================================================================ PDH: Crimson on black is not legible ================================================================ */ div.inPageNavItem a:hover { color: #FFD043; } /* ================================================================ ELH: Accreditation Info snippet ================================================================ */ .accredInfoBackground { width: 100%; padding: 0 0 0 0; margin: 0 0 4em 0; background-image: url('/images/background-flite-20250812-01.webp'); background-position: center center; background-size: cover; background-repeat: no-repeat; } .accredInfoOverlay { width: 100%; background: rgba(17,17,17,0.8); padding: 2em 0 0 2em; } .accredInfoContainer { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; margin: 0 0 0 0; width: 100%; background: rgba(17,17,17,0.8); padding: 1em 5.5em; align-items: center; } .accredInfoContainer h2, accredInfoContainer p { color: #ffffff; } .accredInfoContainer .accredInfoItem { margin-bottom: 1.25em; width: calc( 50% - 2em); padding-bottom: 0.5em; } .accredInfoContainer .accredInfoItem p { color: #ffffff; } .accredInfoItem a { color: #ffd043; } .accredInfoItem a:hover { color: #ffd050; text-decoration: none; cursor: pointer; } @media screen and (max-width: 850px) { .accredInfoContainer .accredInfoItem { width: 100%; } } @media screen and (max-width: 450px) { .accredInfoContainer { padding: 2em 2em; } } @media screen and (max-width: 450px) { .accredInfoContainer { padding: 2em 2em; } .accredInfoOverlay { padding: 2em 0.5em 0 0.5em; } } /* ================================================================ ELH: Fancy static table ================================================================ */ table.fancyStaticTable { width: 100%; border: none !important; } table.fancyStaticTable th { width: 45%; border: none !important; padding: 1em 0 0.25em 0; font-family: input-sans-compressed,Arial,Helvetica,sans-serif; text-transform: uppercase; font-weight: normal; } table.fancyStaticTable td { border: none !important; padding: 1em 0 0.25em 0; } table.fancyStaticTable tr { border: none !important; border-bottom: 1px solid #d9d9d9 !important; } table.fancyStaticTable tr:last-of-type { border-bottom: none !important; } @media all and (max-width:767px) { table.fancyStaticTable th { font-family: input-sans-compressed,Arial,Helvetica,sans-serif; text-transform: uppercase; width: 100%; padding: 1em 0 0 0; } table.fancyStaticTable td { width: 100%; text-align: left; padding: 0 0 0 0; } table.fancyStaticTable tr { width: 100%; padding: 0 0 0.5em 0; } } body header.header { /* z-index: 999999 !important; */ } /* new footer styling */ .footer #address-block .address, .footer #address-block .phoneNum, .footer #address-block p { margin-bottom: 4px; font-family: input-sans-compressed, sans-serif; font-weight: 200; display: revert; } .footer #address-block .campus { margin-top: 17px; } .footer #address-block a { text-decoration: none; } .footer #address-block a:hover { text-decoration: underline; } #address-block { margin-bottom: 17px; text-transform: uppercase; font-size: 0.875rem; } .footer #address-block .address-layout { display: flex; align-items: flex-start; gap: 24px; } .footer #address-block .address-layout .location { flex: 1 1 auto; } .footer #address-block .address-layout .location .address-new-line { padding-left: 21px; } .footer #address-block .address:before { padding-right: 10px; } @media (max-width: 1023px) { .footer #address-block .address-layout { flex-direction: column; align-items: center; } .footer #address-block .address-layout .location .address-new-line { padding-left: 0; } .footer #address-block .address-layout { gap: 0; } .footer #address-block .location:first-of-type .campus { margin-top: 9px; } }