/* ============================ VARIABLE DECLARATIONS * ============================*/ :root { /*FONT VARIABLES*/ --brandFont1: industry,sans-serif; /* Medium: 500; Demi: 600 */ --brandFont2: roboto, sans-serif; /* Regular: 400; Medium: 500 */ --brandFont3: oswald, sans-serif; /*COLOR VARIABLES*/ --brandColor1: #D71921; --brandColor2: #1C1C1C; --brandColor3: #898989; --brandColor4: #ffffff; --brandColor5: #F2F2F2; /* OTHER VARIABLES */ --transition: all 4s ease; } /* Colors */ .white { background-color: var(--brandColor4); } .brandColor1 { background-color: var(--brandColor1); color: var(--brandColor4); } .brandColor2 { background-color: var(--brandColor2); color: var(--brandColor4); } /* ============================ GLOBAL ELEMENTS * ============================*/ html { -webkit-text-size-adjust: 100%; overflow-y: scroll; } 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; } a, button { font-family: inherit; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, .header, hgroup, menu, nav, section { display: block; } body { line-height: 2; font-family: var(--brandFont1); font-weight: 400; font-size: 1em; color: #1D1D1D; background-color: var(--pageBackground); } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; } .mobileOnly { display: none !important; } .desktopOnly { display: block !important; } .hidden { display: none; } .visuallyhidden, .slick-sr-only { position: absolute; left: -99999px; } .loadingContent { visibility: hidden; } input[type=submit], input[type=text], input[type=email], input[type=url], input[type=password] { -webkit-appearance: none; -moz-appearance: none; border-radius: 0;-moz-border-radius: 0; -webkit-border-radius: 0; } * { -moz-font-smoothing: antialiased; -webkit-font-smoothing: antialiased; box-sizing: border-box; -moz-box-sizing: border-box;-webkit-box-sizing: border-box;} .screenreader { position: fixed; top: 0; z-index: 99999; } .screenreader a { position: absolute; width: 260px; padding: 10px; left: -100000px; background-color: #CB4700; color: #fff; font-weight: bold; text-decoration: none; line-height: 1.4; text-align: center; } .screenreader a:hover { text-decoration: underline; } .screenreader a:focus { left: 0; top: 0; } sup { vertical-align: super; font-size:.875em;} ol li { padding-left: 5px; } .hide {display: none;} @media screen and (max-width: 960px) { .mobileOnly { display: block!important; } .desktopOnly { display: none!important; } input { font-size: 1rem; } } /* Global Content */ h1 { font-size: 3.5rem; font-family: var(--brandFont1); font-weight: 600; line-height: 1.3; text-transform: uppercase; color: var(--brandColor2);} h2 { font-size: 2rem; font-family: var(--brandFont1); font-weight: 600; letter-spacing: .05em; line-height: 1.7; text-transform: uppercase; color: var(--brandColor2); margin-bottom: 25px; } h3 { font-size: 1.75rem; font-family: var(--brandFont1); font-weight: 600; letter-spacing: .04em; line-height: 1.96; color: var(--brandColor2); margin-bottom: 25px; } h3.arrow { font-size: 1.3125rem; font-family: var(--brandFont1); font-weight: 600; letter-spacing: 0; line-height: 1.5; color: var(--brandColor2); display: flex; align-items: center; justify-content: flex-start; margin-bottom: 25px; } h3.arrow ion-icon { transition: all 0.4s ease-in-out; padding-left: 10px; color: var(--brandColor1); height: 23px; width: 23px; margin-bottom: 5px;} h3.arrow:hover { color: var(--brandColor1); } h3.arrow:hover ion-icon { padding-left: 25px; } p { font-size: 1rem; font-family: var(--brandFont2); font-weight: 400; line-height: 2; letter-spacing: .025em; color: var(--brandColor2); } ul { margin-bottom: 30px; } ul li {font-family: var(--brandFont2); color: var(--brandColor2); margin-left: 45px;} .preHeading { font-size: 1.125rem; font-family: var(--brandFont1); font-weight: 600; line-height: 1.2; letter-spacing: .05em; text-transform: uppercase; color: var(--brandColor4);} @media screen and (max-width: 780px) { h1 { font-size: 2.5rem; } h2 { line-height: 1.25; } } /* Global Wrappers */ .columns .wrapper, .component .wrapper { max-width: 1540px; width: 100%; margin: 0 auto; padding: 0 20px; } .feature .wrapper { position: absolute; } .columns .wrapper.large { max-width: 1720px; width: 100%; margin: 0 auto; } .landing .columns .wrapper { max-width: 1310px; width: 100%; margin: 0 auto; padding: 0 20px; } .landing .columns .wrapper.large { max-width: 1570px; width: 100%; margin: 0 auto; } @media screen and (max-width: 960px) { .columns .wrapper, .columns .wrapper.large, .landing .columns .wrapper, .landing .columns .wrapper.large { padding: 0 20px; } } /* Global Links */ a { color: var(--brandColor1); text-decoration: underline; cursor: pointer; text-decoration: underline;} /* Global Buttons */ .wrapper a { margin: 40px 0; cursor: pointer; } .wrapper a.center, a.center { margin: 25px auto; } .wrapper a.right, a.right { position: absolute; right: 0; } .wrapper a.redButton, a.redButton { width: fit-content; text-decoration: none; background-color: var(--brandColor1); border: none; padding: 7px 25px; color: var(--brandColor4); display: flex; align-items: center; justify-content: center; font-size: 1rem; font-family: var(--brandFont1); font-weight: 400; letter-spacing: .12em; cursor: pointer;} .wrapper a.redButton::after, a.redButton::after { content: url(../../../../_redesign/_images/arrow-forward-outline.svg); margin-left: 25px; padding-top: 5px; } .wrapper a.arrowRedButton, a.arrowRedButton { margin: 0; padding: 10px 0; } .wrapper a.arrowRedButton::after, a.arrowRedButton::after { content: url(../../../../_redesign/_images/arrow-forward-outline.svg); margin-left: 0; padding-top: 5px; } .ctaButton .wrapper a.redButton { width:auto; } @media screen and (max-width: 580px) { .landing .wrapper a.redButton, .interior .wrapper a.redButton { width: 100%;} } /* Global spacing between sections */ .component { margin-bottom: 60px; } .component + .component { margin-bottom: 60px; } .columns.bgGray + .columns.bgGray { margin-top: 0;} .component .wrapper p:last-child, .landing .component .wrapper p:last-child, .interior .component .wrapper p:last-child { margin-bottom: 0;} /* WYSIWYG Items */ p { margin-bottom: 50px; } .content ul { padding: 0 0 0 14px; } em {font-style: italic;} img { height: auto; max-width: 100%; } td img { max-width: none; } strong { font-weight: 600; } iframe { max-width: 100%; } input { border-radius: 0;-webkit-border-radius:0px; } a .link, a.link { color: var(--brandColor1); text-decoration: underline; } .ctaLink { font-family: var(--brandFont1); font-weight: 400; font-size: 1rem; color: var(--brandColor4); letter-spacing: .1em; line-height: 1.25; display: flex; align-items: center;} .ctaLink span.circleIcon { height: 25px; width: 25px; background-color: #fff; margin-left: 15px; display: flex; align-items: center; justify-content: center; border-radius: 50%; } .ctaLink span.circleIcon ion-icon { font-size: 1rem; color: var(--brandColor1); font-weight: 500;} /* Figure Image */ figure { position: relative; } figure.align-right { float: right; } figure.align-left { float: left; } figure > figcaption { position: relative; clear: both; } figure.align-left, figure.align-right { max-width: 275px; } /* WYSIWYG Image Positioning */ .center { text-align: center; } .align-left { float: left; margin: 0 30px 15px 0; } p > .align-left, span > .align-left { margin: 20px 30px 20px 0; } .align-right { float: right; margin: 0 0 20px 20px; } p > .align-right, span > .align-right { margin: 20px 0 20px 20px; } .alignCenter { text-align: center; display: block; } .wysiwyg img:hover {transform: none!important; } .redText { color: var(--brandColor1); } @media screen and (max-width:580px) { /* WYSIWYG Items */ p.subhead, .subhead { font-size: 1.25rem; letter-spacing: .05em; line-height: 1.6; } /* WYSIWYG Image Positioning */ .align-left, .align-right { float: left; margin-left: 0; margin-right: 0; width: 100%; } img.align-left, img.align-right { width: 100%; } } /* ============================ GRID LAYOUT * ============================*/ .impact { margin-top:0; } .mainBody .impact .wrapper {padding: 0 20px;} .mainContent.full { padding: 0 20px; } .interior .mainContent { display: grid; grid-area: 1 / 1 / 8 / 2; max-width: 1312px; } .interiorContent { display: grid; grid-area: 1 / 2 / 8 / 2; grid-template-rows: max-content; margin-top: 25px; } .sectionNavColumn { display: grid; grid-area: 1 / 1 / 6 / 2; grid-template-columns: 265px; padding: 0 75px 0 0; } /*Columns*/ .columns { display: grid; } .columns.bgGray { background-color: var(--brandColor5); padding: 0; } .columns .cell > img, .columns .cell > a > img, .columns .cell > div > a > img { display: inherit; max-width: 100%; width: 100%; } .columns .one { display: grid; grid-template-columns: 1fr; } .columns .two { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .columns .three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .columns .four { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .columns .oneTwo { display: grid; grid-template-columns: 32% 1fr; gap: 1rem 1rem; margin-bottom: 2rem; } @media screen and (max-width: 960px){ .columns { padding: 0 25px;} .columns.bg, .columns.bgGray { padding: 0; } .columns .two, .columns .three, .columns .oneTwo, .columns .four { grid-template-columns: 1fr; grid-column: auto; grid-row: auto; gap: 1em; } .interior .mainContent { grid-template-columns: 1fr; } .sectionNavColumn { grid-area: 1 / 1 / 3 / 2; grid-template-columns: 100%; padding: 0; } .interiorContent { display: grid; grid-area: 3 / 1 / 8 / 2; } } /* ============================ HEADER * ============================*/ .header { position: fixed; width: 100%; background-color: var(--brandColor4); padding: 0; z-index: 999; } .header .wrapper { display: -ms-flex; display: -moz-flex; display: -webkit-flex; display: flex; max-width: 1740px; width: 100%; padding: 13px 0 0 0; margin: 0 auto; height: 86px; } /* Header CTA Buttons */ .iconButtons { display: inline-block; text-align: center; } .iconButtons.tablet { display: none; } .iconButtons a { display: inline-block; font-family: var(--brandFont1); font-size: .875rem; color: var(--brandColor4); letter-spacing: .09em; background-color: var(--brandColor2); line-height: 1; text-decoration: none; padding: 13px 24px; font-weight: 400; transition: all 0.4s ease-in-out; } .iconButtons a:first-child { padding: 13px 9px 13px 16px; } .iconButtons a:last-child { background-color: var(--brandColor2hover); } .iconButtons a em { padding: 0 13px 0 0; } .iconButtons a:hover, .iconButtons a:focus { color: var(--pageBackground); } .iconButtons a:last-child:hover, .iconButtons a:last-child:focus { color: var(--brandColor4); } #topNavMenu .iconButtons { width: 100%; } #topNavMenu .iconButtons a { padding: 50px 20px; } /* Logo */ .logo { position: relative; display: inline-block; padding: 0; margin: 0 43px 0 20px; } .logo img { width: 148px; height: 94px; } /* menu list */ .navMenu { margin-top: 18px; display: block; font-family: var(--brandFont1); font-weight: 500; list-style: none; z-index: 15; } /* a top level navigation item in the mega menu */ .navItem { list-style: none; display: inline-block; padding: 0; margin: 0; line-height: 1.2; } /* first descendant link within a top level navigation item */ .navItem > a { font-family: var(--brandFont1); position: relative; display: inline-block; color: var(--brandColor2); font-size: 1.125rem; letter-spacing: .028em; font-weight: 500; text-decoration: none; padding: 0 18px 0 18px; margin: 0 0 -1px 0; transition: all 0.4s ease-in-out; } /* focus/open states of first descendant link within a top level navigation item */ .navItem > a:hover, .navItem > a:focus, .nav-item > a.open { color: var(--brandColor2); } /* open state of first descendant link within a top level navigation item */ .navItem > a.open { color: var(--brandColor2); } .navItem > a:after { position: absolute; bottom: -20px; left: 18px; right: 18px; visibility: hidden; content: ""; width: auto; height: 4px; background-color: var(--brandColor1); z-index: 9999; } .navItem > a.open:after { visibility: visible; } .navMenu .subMenuWrapper { position: relative; max-width: 1280px; padding: 28px 20px; margin: 0 auto; } /* list of items within sub-navigation panel */ .navMenu .subMenu ul { display: inline-block; color: var(--brandColor4); vertical-align: top; padding: 0; } .navMenu .subMenu .intro { display: inline-block; width: 41%; height: 100%; line-height: 1.85; border-right: 1px solid var(--brandColor2hover); margin: 0 11% 0 0; padding: 0 5% 0 4%; } .navMenu .subMenu .intro > li { padding: 0; } .navMenu .subMenu .intro > li p { color: var(--brandColor2); } .navMenu .subMenu .subMenuGroup { display: inline-block; margin: 0; } /* list item within sub-navigation panel */ .navMenu .subMenuGroup li { display: block; list-style-type: none; margin: 0; padding: 6px 0; } .navMenu .subMenu li, .navMenu .subMenu li a { color: var(--brandColor2); list-style-type: none; margin: 0; padding: 6px 0; } .navMenu .subMenuGroup li { display: block; font-family: var(--brandFont2); font-weight: 400; font-size: 1rem; color: var(--brandColor2); list-style-type: none; margin: 0; padding: 10px 0; } .navMenu .subMenuGroup li a { color: #1c1c1c; text-decoration: none; padding: 5px 0; transition: all 0.4s ease-in-out; font-family: var(--brandFont2); font-size: 1rem; font-weight: 400; } .navMenu .subMenuGroup li a:hover, .navMenu .subMenuGroup .subMenu li a:focus { color: var(--brandColor2hover); text-decoration: underline;} #menu .visuallyhidden { position: absolute; text-indent: -99999px; } .toggleBtn { display: none; } /* Right Naviation */ .rightNavigation {position: absolute; right: 0; display: flex; align-items: center; justify-content: flex-end;} .rightNavigation.mobile {display: none;} /* Contact */ .contactUs, .contactUs a { text-decoration: none; z-index: 108; display: flex; align-items: center; justify-content: center; background-color: var(--brandColor1); color: var(--brandColor4); height: 83px; width: 183px; margin-top: -13px; padding-top: 7px; border: none; font-family: var(--brandFont1); font-weight: 400; letter-spacing: .05em; font-size: 1rem;} .contactUs a {padding-bottom: 13px;} .wrapper .contactUs a { margin: 0; } .contactUs a:hover, .contactUs a:active { text-decoration: underline;} .phoneNumber {padding: 0 50px 0 30px; font-family: var(--brandFont1); font-weight: 500; z-index: 108; font-size: 1rem; letter-spacing: .025em;} .contactUs a > span { padding-right: 10px; font-family: var(--brandFont1); font-weight: 500; padding-top: 10px; } .contactUs a ion-icon { font-size: 1.4rem; margin-top: 8px; } .searchMenu button ion-icon { color: var(--brandColor2); font-size: 1.8rem; padding-right: 5px; } .searchMenu.open button ion-icon { content: url(../../../_redesign/_images/close.svg); transform: scale(.65); } /* Search Bar and Input */ .searchButton { background: transparent; border: 1px solid #000; } /* Toggle Search Menu */ .searchMenu { min-width: 60px; text-align: right; align-self: center; font-family: var(--brandFont1); font-weight: 500; font-size: 1.125rem; letter-spacing: .028em; display: flex; align-items: center;} .searchMenu:after { display: inline-block; content: ""; width: 1px; height: 23px; background-color: #70707039; margin: 0 0 0 30px; padding: 0; } #toggleSearch { position: relative; color: var(--brandColor2); font-size: 1rem; font-weight: 600; line-height: 1; height: 30px; background-color: transparent; border: 1px solid transparent; padding: 0; cursor: pointer; z-index: 1; display: flex; align-items: center; margin: auto 0; } /* Desktop Search Open Button */ #toggleSearch .openSearch { display: inline-block; color: var(--brandColor2); font-family: var(--brandFont1); font-weight: 500; font-size: 1.125rem; letter-spacing: .028em;} #toggleSearch:hover .openSearch, #toggleSearch:focus .openSearch { color: var(--brandColor2); } .searchMenu.open #toggleSearch .openSearch { display: none; } /* Desktop Search Close Button */ #toggleSearch .closeSearch { display: inline-block; font-size: .9rem; color: var(--brandColor2); } #toggleSearch:hover .closeSearch, #toggleSearch:focus .closeSearch { color: var(--brandColor2); } .searchMenu #toggleSearch .closeSearch { display: none; } .searchMenu.open #toggleSearch .closeSearch { display: inline-block; } .searchMenu #searchSubMenu { visibility: hidden; opacity: 0; width: 400px; position: absolute; top: 15px; bottom: auto; left: -355px; right: 0; font-family: var(--brandFont1); font-weight: 400; font-size: 1.025rem; letter-spacing: .09em; background-color: var(--brandColor4); } .searchMenu.open #searchSubMenu { visibility: visible; opacity: 1; } #searchBox { display: flex; background-color: transparent; margin-top: -3px; padding: 0 0 7px 0; } #searchBox label .visuallyhidden { color: var(--brandColor4); } .searchBox, .searchBox:active, .searchBox:focus, .searchBox:focus-within { font-family: var(--brandFont1); display: inline; height: 45px; font-size: .95rem; letter-spacing: .09em; color: var(--brandColor2); background-color: transparent; -webkit-appearance: none; -moz-appearance: none; border-radius: 0;-moz-border-radius: 0; -webkit-border-radius: 0; padding: 15px 10px; margin-bottom: 0; width: 400px; border: 2px solid #1C1C1C4D; font-size: 1rem; } .searchBox::placeholder{ font-family: var(--brandFont1); font-weight: 400; font-size: .94rem; color: #1c1c1c; letter-spacing: 0.04em; } .searchBox::-webkit-input-placeholder { font-family: var(--brandFont1); font-weight: 400; font-size: .94rem; color: #1c1c1c; letter-spacing: 0.04em;} .searchBox::-moz-placeholder { font-family: var(--brandFont1); font-weight: 400; font-size: .94rem; color: #1c1c1c; letter-spacing: 0.04em; } .searchBox:-ms-input-placeholder { font-family: var(--brandFont1); font-weight: 400; font-size: .94rem; color: #1c1c1c; letter-spacing: 0.04em; } .searchBox:-moz-placeholder { font-family: var(--brandFont1); font-weight: 400; font-size: .94rem; color: #1c1c1c; letter-spacing: 0.04em; } .searchContainer.tablet { display: none; } .searchContainer input[type=search] { border: 0; padding: 5px 6px; width: 85%; font-size: 1rem; -webkit-appearance: none; margin: 0; font-style: normal; } .searchContainer button[type=submit] { position: relative; border: none; font-size: 1.125em; width: 30px; height: 30px; padding: 0; margin: 0; cursor: pointer; background-color: transparent; display: none; } @media screen and (max-width: 1600px) { .searchActive { display: none; } } @media screen and (min-width: 1201px){ .mainBody { padding-top: 160px; } /* Menu Container */ #menu button { position: relative; float: right; margin-top: 8px; margin-left: -11px; margin-right: -11px; display: none; color: #3a3a3a; height: 20px; width: 20px; background: none; border: 0; cursor: pointer; transform: translateY(0) rotate(0deg); transition: all 0.4s ease-in-out; background-repeat: no-repeat; background-position: center center; } #menu .focus + button, #menu button:focus, #menu button:focus-within { background-image: url(/_images/quicklinks-arrow.svg); } #menu .navItem.open > button { transform: translateY(0) rotate(-180deg); } /* sub-navigation panel */ .navMenu .subMenu { position: absolute; max-width: 218px; width: 100%; background-color: var(--brandColor4); transition: top 0.4s ease-in-out; margin-left: 18px; visibility: hidden; top: -9999em; max-height: 0px; overflow: hidden; opacity: 0; transition: opacity 250ms ease 250ms, max-height 500ms ease, visibility 0s linear 500ms, top 0s linear 500ms; } /* sub-navigation panel open state */ .navMenu .subMenu.open, #menu button[aria-expanded="true"] + .subMenu { display: block !important; visibility: visible; top: 90%; box-shadow: 0px 4px 5px #000000BD; max-height: 800px; opacity: 1; transition: opacity 250ms ease, max-height 1500ms ease, visibility 0s linear 0s, top 0s linear 0s; } .navMenu .subMenuWrapper { position: relative; width: 100%; max-width: 1280px; padding: 15px 20px 15px 20px; margin: 0 auto; } .nav-item:hover > .subNav { display: block; } } @media (min-width:1200px) and (max-width:1400px) { .logo { margin-right: 35px;} .navItem > a { padding: 0 10px 0 10px; font-size: 1rem; } } @media screen and (max-width: 1200px){ .header { position: absolute;} .header .wrapper { height: 55px; } .mainBody { padding-top: 72px; } .header > .wrapper { padding: 0 18px; } .logo { margin: 12px 40px 0 0; } .logo img { width: 90px; height: 55px; max-width: none; position: absolute; z-index: 103;} /* Right Navigation */ .rightNavigation { display: none;} .rightNavigation.mobile {display: block; left: 0; right: 0; margin-top: 120px; } /* Contact Us */ .wrapper .contactUs, .contactUs a { padding: 0; text-decoration: none; z-index: 108; display: flex; align-items: center; justify-content: center; background-color: var(--brandColor1); color: var(--brandColor4); height: 60px; width: 100%; margin-top: 0; padding-top: 0; border: none; font-family: var(--brandFont1); font-weight: 400; letter-spacing: .05em; font-size: 1rem;} .wrapper .contactUs a > span { padding-top: 0; } .wrapper .contactUs a ion-icon { margin-top: 0; padding-left: 5px; } .phoneNumber {height: 60px; background-color: #B10D14; display: flex; align-items: center; justify-content: center; padding: 0 15px; } .phoneNumber a { color: white; text-decoration: none;} .phonenumber a:hover, .phoneNumber a:focus {text-decoration: underline;} /* Toggle Canvas Menu */ .dim { visibility: hidden; opacity: 0; position: fixed; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background-color: rgba(34,30,31,0.95); transition: all 0.8s ease-in-out; z-index: 2; } .dim.on { visibility: visible; opacity: 1; z-index: 998; } .menu { z-index: 100; position: relative; } #toggleButton { position: relative; display: flex; justify-content: flex-end; width: auto; max-width: 1260px; min-width: 90px; width: 100%; height: 26px; margin: 20px 0 0 0; background-color:transparent; border:none; cursor: pointer; transform:scale(1); } .toggleBtn.open .hamburgerContainer { content: url(../../../_redesign/_images/close.svg); } .hamburgerContainer { display: flex; justify-content: flex-end; } .hamburgerContainer span.mobileMenu {font-family: var(--brandFont1); font-weight: 500; font-size: 1.125rem; letter-spacing: .028em; padding-left: 5px; color: var(--brandColor2); } .toggleBtn.open > .hamburgerContainer { padding: 1px 0; } .toggleBtn .iconBar { position:relative; display:block; background:var(--brandColor2); width: 24px; height: 2px; margin: 3px auto; border-radius: 5px; transition: all 250ms ease-in-out; } .iconBar.bar1Active { width: 24px; transform:translateY(6px) translateX(0) rotate(45deg); } .iconBar.bar2Active { width: 24px; opacity: 0; transform:scale(0); } .iconBar.bar3Active { width: 24px; transform:translateY(-4px) translateX(0) rotate(-45deg); } .toggleBtn .menuText { display: inline-block; color: var(--brandColor2); padding: 4px 0 0 4px; } .toggleBtn .menuText.close { display: none; } .toggleBtn.open .menuText.open { display: none; } .toggleBtn.open .menuText.close { display: inline-block; } /* Menu Container */ .menuContainer { display: inline-block; width: 100%; max-width: 375px; height: 100%; position: fixed; left: auto; right: 0; color: var(--brandColor4); background-color: var(--brandColor4); margin-top: 55px; padding-bottom: 64px; margin-right: -375px; overflow-x: hidden; z-index: 102; transition: margin 0.5s ease-in-out; } .rightNavigation { position: relative;} .toggleBtn.open + .menuContainer { width: 100%; height: max-content; max-width: 1375px; position: absolute; left: 0; right: 0; bottom: 0; top: 0; color: var(--brandColor4); background-color: var(--brandColor4);} #menu button { display: block; float: right; color: var(--brandColor2); height: 38px; width: 58px; cursor: pointer; margin: 11px 0 0 0; background: none; border: 0; } #menu button:after { content: url(../../../_redesign/_images/chevron-down-outline.svg); transform: translateY(0) rotate(0deg); transition: all 0.4s ease-in-out; } #menu .navItem.open > button:after { transform: translateY(0) rotate(-180deg); } #menu li { width: 100%; } /* Main Menu Toggle Menu */ #skipToTopNav { margin: 0; padding: 0; } #skipToTopNav ~ .topNav, #toggleButtonClose.close ~ .topNav { max-width: 394px; } #skipToTopNav > .img { font-size: .9rem; line-height: 1.7; padding: 0 0 0 25px; background-size: 25%; } /* Main Menu Container */ .topNavWrapper { max-width: 375px; padding: 0; } .navMenu { background-color: var(--brandColor4); padding: 0 15px; } .navItem { position: relative; display: block; border-bottom: 1px solid #d9d9d92c; } .navItem:last-child { border-bottom: none; } .navItem > a { position: relative; width: auto; letter-spacing: .05em; padding: 15px 28px 15px 0; z-index: 1; } .navItem > a:after { display: none; } /* Top Nav Sub Menu Wrapper */ .navMenu .subMenuWrapper { padding: 0; background-color: var(--brandColor4); } /* Top Nav Sub Menu Intro */ .navMenu .subMenu .intro { display: block; width: 100%; height: auto; font-size: .9rem; border-right: none; border-bottom: 1px solid var(--brandColor2hover); margin: 0; padding: 0 0 20px 0; } .navMenu .subMenu .intro li a { padding: 0; } .navMenu .subMenu .intro li a.callout { font-size: .95rem; } /* Top Nav Sub Menu */ .navMenu .subMenu .subMenuGroup { display: block; width: 100%; columns: 1; -webkit-columns: 1; -moz-columns: 1; column-gap: 0; margin: 0; padding-bottom: 10px; } .navMenu .subMenu { position: relative; width: auto; z-index: 3000; padding: 0; margin: 0; } .navMenu .subMenu li a { font-size: 1em; font-family: var(--brandFont2); font-weight: 400; } #menu .subMenu, #menu .subMenu.open { display: none; position: relative; } #menu button[aria-expanded="true"] + .subMenu, #menu .sub.open > .subMenu { display: block; position: relative; top: 0; height: 100%; } /* Info For and Quick Links */ .menuMoreName { width: 100%; text-transform: uppercase; font-weight: 600; text-align: left; margin: 0; } .menuMoreName span { font-size: .95rem; padding: 0; } .menuMoreInfo { float: left; width: 100%; padding: 35px 15px; } .menuMoreInfo.desktop { display: none; } .menuMoreInfo.tablet { display: block; } .menuMoreInfo > .wrapper { display: -ms-flex; display: -moz-flex; display: -webkit-flex; display: flex; justify-content: space-between; max-width: 1460px; width: 100%; padding: 0 20px; margin: 0 auto; } .menuMoreInfo .infoMenu ul { display: block; list-style-type: none; padding: 0; margin: 0; } .menuMoreInfo .infoMenu ul li { float: none; display: block; line-height: 1.65; } .menuMoreInfo .infoMenu a { display: inline-block; font-size: .875rem; font-family: var(--brandFont2); color: var(--brandColor4); padding: 5px 15px 5px 0; } /* Quick Links */ .menuMoreInfo .infoMenu ul { columns: 2; -webkit-columns: 2; -moz-columns: 2; column-gap: 2px; } /* Info For */ .menuMoreInfo.infoFor { background-color: var(--brandColor2); padding: 40px 15px 0 15px; } .menuMoreInfo.infoFor ul { border-bottom: 1px solid var(--brandColor2hover); padding: 0 0 13px 0; } .menuMoreInfo { background-color: var(--brandColor2); padding: 15px 15px 40px 15px; } .menuMoreInfo.infoFor .infoMenu ul { columns: 1; -webkit-columns: 1; -moz-columns: 1; column-gap: 0; } /* Header CTA Buttons */ .iconButtons { display: block; clear: both; width: 100%; background: var(--brandColor2); padding: 10px 0; } .iconButtons.tablet { display: flex; -moz-justify-content: space-evenly; -webkit-justify-content: space-evenly; justify-content: space-evenly; margin-bottom: 10px; } .iconButtons a, .iconButtons a:first-child, .iconButtons a:last-child { display: inline-flex; font-size: .875rem; font-family: var(--brandFont1); text-transform: uppercase; background-color: transparent; border-right: 1px solid var(--brandColor2hover); padding: 3px 32px; } .iconButtons a:last-child { border-right: none; } .iconButtons a em { padding: 0 13px 0 0; } .iconButtons a:hover, .iconButtons a:focus { color: #ccd3e1; } .iconButtons a:last-child:hover, .iconButtons a:last-child:focus { color: #ccd3e1; } #topNavMenu .iconButtons { width: 100%; } #topNavMenu .iconButtons a { padding: 50px 20px; } /* Search Menu */ #searchBoxMobile { position: relative; } .searchContainer.tablet { display: block; } .searchContainer { padding: 15px 18px 20px 18px; background-color: var(--brandColor4); } .searchMenu { display: none; } .searchMenu #searchSubMenuMobile { width: 100%; margin: 0; } .searchBox { width: 100%; margin: 30px auto 0 auto; } .searchBox:focus {width: 100%; overflow: hidden;} .searchContainer input[type=search] { width: 85%; } .searchContainer button[type=submit] { position: absolute; top: 56px; bottom: auto; left: auto; right: 25px; background-repeat: no-repeat; background-image: url(../../../_redesign/_images/search-outline.svg); transition: none; display: block; } .searchContainer button[type=submit]:focus { outline-offset: 4px; } .searchContainer button[type=submit]:hover:before, .searchContainer button[type=submit]:focus:before { content: ""; } } /* ============================ FOOTER * ============================*/ /* Footer Red Box */ .redBox { position: relative; margin: 0; width: 100%; height: auto; } .redBox::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: transparent linear-gradient(90deg, #D71921DB 0%, #D71921 100%) 0% 0% no-repeat padding-box; } .footer .redBox .wrapper { position: relative; display: block; display: flex; flex-flow: row nowrap; max-width: 1270px; width: 100%; padding: 25px 20px; } .footerHeader { font-size: 2rem; font-family: var(--brandFont1); font-weight: 500; color: white; margin-bottom: -10px; } .footerHeadings {display: flex; flex-flow: column wrap; width: 70%; } .footersubHeader { font-size: 1.2rem; font-family: var(--brandFont1); font-weight: 400; color: white; letter-spacing: .08em; } .footersubHeader a { color: white; } .footerContactBtn { width: 30%; display: flex; justify-content: flex-end; align-items: center;} .footerContactBtn a { margin: 0; text-decoration: none; display: flex; align-items: center; justify-content: center; width: 270px; height: 51px; background-color: transparent; border: 2px solid #fff; color: #fff; font-family: var(--brandFont1); font-size: 1rem; font-weight: 400; letter-spacing: .08em;} .footerContactBtn a span.circleIcon { height: 25px; width: 25px; border-radius: 50%; background-color: #fff; margin-left: 12px; display: flex; align-items: center; justify-content: center;} .footerContactBtn a span.circleIcon ion-icon { font-size: 1.2rem; color: var(--brandColor1); } /* Footer */ .footer { font-family: var(--brandFont1); padding: 0; position: relative; width: 100%; color:#fff; background-color: #1C1C1C; z-index: 0; } .footer .wrapper { display: flex; padding-top: 70px; max-width: 1540px; padding: 0 20px; width: 100%; margin: 70px auto 0 auto; } .footer .redBox .wrapper { margin-top: 0; } .footer .footerLeft { width: 58%; } .blackFooter {background-image: url(../../../_redesign/_images/footer-black-angle.svg); background-repeat: no-repeat; margin-top: 0; background-size:cover; padding-top: 70px; background-position: center; } .blackFooter .wrapper {margin-top: 0;} /* Footer Address */ .footer .footerLogo { max-width: 200px; width: 100%; } .footer .address { font-family: var(--brandFont2); font-size: 1rem; font-weight: 300; line-height: 1.7; letter-spacing: .05em; } .footer .street { margin: 35px 0 2px 0; font-family: var(--brandFont2); font-size: 1rem; font-weight: 300; line-height: 1.7; letter-spacing: .05em;} .footer .contactInfo a { color: #fff; margin: 0 16px 0 0; } .footer .contactInfo a:hover { color: #fff; text-decoration: underline; } /* Footer Social */ .footer .socialbar a { display: inline-block; width: 41px; height: 41px; margin-right: 18px; font-size: 1rem; color: #fff; text-align: center; border: 1px solid #646464; transition: all 0.5s ease-in-out; } .footer .socialbar a:hover, .footer .socialbar a:focus { background-color: var(--brandColor1); } .footer .socialbar a span { position: absolute; left: -999999px; } .footer .socialbar a em { width: 100%; text-align: center; font-size: 1.4rem; padding-top: 9px;} /* Footer Columns */ .footer .footerlinks { width: 28%; margin-top: 15px; } .footer .footerlinks:last-child { width: 55%; } .footer .footerlinks ul { list-style: none; columns: 2; -webkit-columns: 2; -moz-columns: 2; column-gap: 25px; padding: 0; margin: 0; } .footer .footerlinks.oneColumn ul { list-style: none; columns: 1; -webkit-columns: 1; -moz-columns: 1; column-gap: 0; padding: 0; margin: 0; } .footer .footerlinks ul li { display: block; font-weight: 300; line-height: 1.5; margin: 0 0 9px 0; padding: 0; } .footer .footerlinks a { font-family: var(--brandFont1); font-weight: 300; font-size: 1rem; text-decoration: none; color: #fff; letter-spacing: .05em; } .footer .footerlinks a:hover, .footer .footerRight a:focus { text-decoration: underline; } .footer .subtitle { display: block; font-family: var(--brandFont1); font-weight: 500; font-style: italic; font-size: 1.3rem; color: #fff; letter-spacing: 0.03em; margin: 6px 0 30px 0; } .footer .footerlinks a.linkUnderline {text-decoration: underline;} /* Footer Subfooter */ .footer .subFooter { width: 100%; font-size: .85rem; font-weight: 400; padding-bottom: 40px; } .footer .subFooter .wrapper { margin-top: 0;} .footer .subFooter a { color: #fff; font-weight: 400; } .footer .subFooter p { margin-bottom: 0; font-family: var(--brandFont2); font-size: .75rem; font-weight: 300; font-style: italic; color: var(--brandColor4);} @media all and (max-width: 1500px) { /* Footer */ .blackFooter { background-position-x: 35%;} } @media all and (max-width: 1200px) { /* Footer */ .footer { background-image: none; background-color: #1C1C1C;} .footer .wrapper { flex-direction: column; } .footer .redBox .wrapper {flex-flow: row nowrap; } .footer .footerLeft { width: 100%; margin: 0 0 22px 0; } .blackFooter { background-image: none;} /* Footer Columns */ .footer .footerlinks { width: 100%; padding-left: 0; } .footer .footerlinks:last-child { width: 100%; margin: 0; } .footer .subtitle { color: #fff; margin-top: 20px; } .footer .footerlinks ul { columns: 1; -webkit-columns: 1; -moz-columns: 1; column-gap: 0px; } .footer .footerlinks ul li { margin: 0 0 12px 0; } /* Footer Subfooter */ .footer .subFooter .wrapper { margin-top: 28px; } } @media screen and (max-width: 960px) { /* Footer Red Box */ .footer .redBox .wrapper {padding: 30px 25px; display: flex; flex-flow: column wrap; width: 100%;} .footerHeadings {flex-flow: column wrap; width: 100%; } .footerHeader { line-height: 1.3; margin-bottom: -5px; } .footersubHeader { width: 100%; margin-top: 10px; } .footerContactBtn { width: 100%; justify-content: flex-start; } .footerContactBtn a { width: 100%; max-width: 960px; } .footerContactBtn a { max-width: 960px; width: 100%; margin: 40px 0 10px 0; } } /* Slider Defualts */ .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; } .slick-list:focus { outline: none; } .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; margin-left: auto; margin-right: auto; } .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; width: 500px;} [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: flex; justify-content: center; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } /* Services Slider */ .ourServices .slide { max-width: 553px; width: 100%; position: relative; padding: 0 7px;} .ourServices .slide .serviceInfo { display: flex; flex-flow: row nowrap; width: 100%; } .ourServices .slide .serviceInfo .title { display: flex; justify-content: flex-start; align-items: center;} .ourServices .slide .serviceInfo a { bottom: -20px; right: 14px; height: 50px; width: 50px;} .ourServices .slide::before { content: ""; position: absolute; top: 0; left: 7px; right: 7px; bottom: 0; background: transparent linear-gradient(180deg, #1C1C1C00 0%, #1C1C1CCC 100%) 0% 0% no-repeat padding-box;} .ourServices .serviceInfo { position: absolute; bottom: 20px; padding: 0 0 0 30px; color: white; font-family: var(--brandFont1); font-weight: 600; font-size: 1.3rem; display: flex; align-items: center; letter-spacing: .03em;} .ourServices ion-icon { font-size: 1.5rem; padding-right: 15px; } /* Arrows */ .slick-slider:hover .slick-prev, .slick-slider:hover .slick-next { opacity: 1; transition: all 0.4s ease-in-out;} .slick-prev, .slick-next { display: block; opacity: 0; border-radius: 50%; position: absolute; top: 35%; width: 65px; height: 65px; cursor: pointer; border: none; z-index: 2; background-color: rgba(0, 0, 0, 0.8); transition: all 0.4s ease-in-out; } .slick-prev { left: -25px; } .slick-prev:before { content: url(../../_images/arrow-backwards-outline.svg);} .slick-next { right: -25px; } .slick-next:before { content: url(../../_images/arrow-forward-outline.svg); } @media screen and (max-width: 1800px) { .slick-prev { left: -15px; } .slick-next { right: -15px; } } /* Dots */ .slick-slider ul {display: flex; justify-content: center; margin: 50px 0 0 0;} .slick-dots li { position: relative; display: inline-block; margin: 0 5px; padding: 0; cursor: pointer; } .slick-dots li button { display: block; height: 10px; width: 10px; border: 0; background-color: #40404220 ; cursor: pointer; font-family: var(--brandFont1); padding: 0; } .slick-dots li button:hover, .slick-dots li button:active, .slick-dots li button:focus, .slick-dots li.slick-active { background-color: #40404250;} @media screen and (max-width: 1560px) { .home .component.services .wrapper.large { padding: 0 15px;} } @media screen and (max-width: 960px) { .component.services { margin-bottom: 15px;} } @media screen and (max-width: 800px) { .services img { height: auto; width: 100%;} .ourServices .slide { max-width: 100%;} .slick-initialized .slick-slide { display: block; } .slick-slider ul { margin: 15px 0 0 0;} .home .component.services .wrapper p { font-size: 1.125rem; letter-spacing: .028em; font-family: var(--brandFont1); font-weight: 500; margin-top: 5px; margin-bottom: 50px; } } .slick-autoplay-toggle-button { position: absolute; bottom: 30px; right: 20px; width: 44px; height: 44px; background: transparent; border: none; margin: 0; padding: 0; z-index: 1; display: flex; justify-content: center; align-items: center; opacity: .7; transition: opacity .3s ease-in; cursor: pointer; } .slick-autoplay-toggle-button:hover, .slick-autoplay-toggle-button:focus { opacity: 1; } .slick-autoplay-toggle-button .slick-pause-icon, .slick-autoplay-toggle-button .slick-play-icon { display: block; height: 100%; width: 100%; background-repeat: no-repeat; background-position: center; background-size: contain; } .slick-autoplay-toggle-button .slick-pause-icon { background-image: url(../../_images/pause-circle-outline.svg); } .slick-autoplay-toggle-button .slick-play-icon { background-image: url(../../_images/play-circle-outline.svg); } /* ============================ HOMEPAGE * ============================*/ /* Impact Area */ .home .impact { position: relative; width: 100%; margin: 0 auto; } .home .impact .sliderHomeImpacts { height: 979px; } .impactSlider .slick-next::before { content: url(../../../_redesign/_images/impact-slider-arrow-forward.svg);} .impactSlider .slick-prev::before { content: url(../../../_redesign/_images/impact-slider-arrow-prev.svg);} .impactSlider .slick-next { right: 20px; opacity: 1; background-color: transparent; top:45%;} .impactSlider .slick-prev { left: 0; opacity: 1; background-color: transparent; top:45%;} .impactSlider img { height: auto; object-position: 50% 50%;} .impactSlider .slick-slide > div { width: 100%;} .impactSlider ul.slick-dots { position: absolute; left: 0; right: 0; bottom: 50px; z-index: 6;} .impactSlider .slick-dots li button { background-color: rgba(255, 255, 255, 0.651) ; } .impactSlider .slick-dots li button:hover, .impactSlider .slick-dots li button:active, .impactSlider .slick-dots li button:focus, .impactSlider .slick-dots li.slick-active { background-color: var(--brandColor4);} .home .impact img, .impact video { position: relative; width: 100%; height: 900px; display: block; z-index: 0; padding: 0; margin: 0; object-fit: cover; object-position: top; } .home .impact video { position: absolute; top: 0; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, 0%); -ms-transform: translate(-50%, 0%); transform: translate(-50%, 0%); } .impact video::-webkit-media-controls { opacity: 0; } .impact .sliderMain .caption { display: none; } .impact .slick-initialized .caption, .impact .videoTexture + .caption { display: block; position: absolute; width: 100%; max-width: 1720px; margin: 0 auto; top: 0; bottom: 0; right: 0; left: 0; z-index: 1; height: 900px; } .impact .caption .wrapper { max-width: 1540px; margin: 0 auto; width: 100%; padding: 0 20px; } .impact .caption.left .wrapper .captionContent { position: absolute; z-index: 5; top: 32%; width: 55%; display: -ms-flexbox; display: flex; align-items: flex-start; justify-content: center; flex-direction: column; } .impact .caption .wrapper h1, .impact .caption .wrapper h2 { color: #fff; letter-spacing: 0; line-height: 1.15; margin-bottom: 15px; } .impact .caption .smallText { display: block; font-family: var(--brandFont1); font-size: 1.5rem; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; } .impact .caption .largeText { display: block; font-size: 3.875rem; font-weight: 600; text-transform: none; line-height: 1.2;} .impact .impactGradient { position: absolute; top: 0; bottom: 0; right: 0; left: 0; width: 100%; height: 900px; background: -moz-linear-gradient(top, rgba(28,28,28,0.1) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.6) 100%); background: -webkit-linear-gradient(top, rgba(28,28,28,0.1) 0%,rgba(0,0,0,0.35) 50%,rgba(0,0,0,0.6) 100%); background: linear-gradient(to bottom, rgba(28,28,28,0.1) 0%,rgba(0,0,0,0.35) 50%,rgba(0,0,0,0.6) 100%); z-index: 0; } .impact .component { background: var(--brandColor4); margin: 25px auto; } @media screen and (max-width: 1700px){ .impact .caption.left .wrapper .captionContent { padding-left: 60px } } @media screen and (max-width:1530px){ .impactSlider ul.slick-dots { bottom: 65px; } } @media screen and (max-width:1440px) { .impact .slick-initialized .caption, .impact .videoTexture + .caption { height: 610px; } } @media screen and (max-width:1440px){ .home .impact .sliderHomeImpacts { height: 710px; } .impact img, .impact video, .impact .impactGradient, .home .impact video, .home .impact img { height: 610px; } .impactSlider img { height: auto;} .impact .caption.left .wrapper .captionContent { width: 55%; } .impact .caption .smallText { font-size: 1rem; } .impact .caption .largeText { font-size: 2.5rem; } } @media screen and (max-width: 1200px) { .impact .caption.left .wrapper .captionContent { top: 22%; } } @media screen and (max-width:960px){ .impact video { display: none; } .impact .caption .wrapper { margin: auto; } .impact .caption.left .wrapper .captionContent { width: 70%; top: 17%; } .impact .caption .wrapper h1, .impact .caption .wrapper h2 { width: 100%; margin-bottom: 20px; } .impact .videoTexture + .impactGradient { background: -moz-linear-gradient(top, rgba(28,28,28,0.24) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.6) 100%); background: -webkit-linear-gradient(90deg, #000000CC 0%, #20202087 100%) 0% 0% no-repeat padding-box;; background: transparent linear-gradient(90deg, #141414cc 100%, #20202087 100%) 0% 0% no-repeat padding-box;; } } @media screen and (max-width: 750px) { .impact .caption.left .wrapper .captionContent { width: 80%; } } @media screen and (max-width: 550px) { .impact .caption.left .wrapper .captionContent { width: 60%; } .impact .caption .largeText { font-size: 1.8rem; } } /* Video Play/Pause Controls */ #playButton { z-index: 2; position: absolute; top: 815px; left: -5px; width: 75px; height: 48px; cursor: pointer; background: none; border: none; -webkit-appearance: none; -moz-appearance: none; padding-left: 25px;} #playButton span { color: #fff; display: block; position: absolute; text-indent: -999999px; } #playButton:after { content: url(../../../_redesign/_images/pause.svg); color: #fff; } #playButton.on.initial:after { content: url(../../../_redesign/_images/pause.svg); } #playButton.on:after,#playButton.initial:after { content: url(../../../_redesign/_images/play.png); } .home .impact .impactSlider + .caption .wrapper #playButton { display: none;} @media screen and (max-width: 1530px) { #playButton { top: 775px; } } @media screen and (max-width: 1440px) { #playButton { top: 500px; } } @media screen and (max-width: 960px) { #playButton { display: none; } } /* Red Box Call Out */ .introCallout { max-width: 555px; width: 100%; position: absolute; padding: 0; background-color: var(--brandColor1); margin: 0; bottom: -60px; right: 0; z-index: 4; } .introCallout:after { content:""; position:absolute; bottom:-39px; width: 0; height: 0; border-left: 0 solid transparent; border-right: solid transparent; border-top: 40px solid #D71921; border-right-width: 555px; } .introCTA { margin: 30px 50px 30px 50px; } .home .introCTA h2 { color: #fff; text-transform: none; } .home .introCTA p { color: #fff; margin-bottom: 30px;} .introCTA a { color: #fff; } .introCTA a.redButton { border: 2px solid #fff; padding: 10px 25px; position: relative; } .introCTA a.redButton::after { content: url(../../../../_redesign/_images/arrow-forward-with-circle.svg); padding-top: 9px; } @media screen and (max-width: 1530px) { .home .impactExtras { display: block; padding: 0 20px; } .home .impactExtras .component .wrapper { padding: 0; } .home .introCallout { width: 100%; margin: 0 0 25px auto; } .home .introCTA a.redButton { font-size: .9rem;} .home .impact .component { margin: 25px 0 25px 0; width: 53%; } .home .impact .component p.intro {width: 100%; } } @media screen and (max-width: 1200px) { .home .impact .component { width: 100%; display: flex; flex-flow: column wrap } .home .introCallout { position: relative; top: -40px; } .home .impactExtras { display: flex; flex-flow: column wrap; margin-top: -40px; } } @media screen and (max-width: 600px) { .home .introCallout { max-width: 335px; } .home .introCallout:after { border-right-width: 335px; } .home .introCTA h2 { color: #fff; text-transform: none; font-size: 1.5rem; letter-spacing: .075em; } .home .introCTA p { color: #fff; margin-bottom: 30px; font-size: 1rem;} .home .introCTA { margin: 30px 20px; } } /* Intro Slider Bar */ .introSlider button.slick-prev.slick-arrow { display: none!important; } .introSlider button.slick-next.slick-arrow { display: none!important; } .home .columns.introSlider { display: flex;} .home .impact .component.introSlider .wrapper .introSlides { width: 62%; } .home .slick-autoplay-toggle-button { display: none;} .home .introSlides.slick-initialized .slick-slide { justify-content: flex-start;} @media screen and (max-width: 1530px) { .home .impact .component.introSlider .wrapper .introSlides { width: 100%; } } @media screen and (max-width: 960px) { .home .columns .wrapper .introSlides { margin-bottom: 0;} } /* Homepage Columns */ .home h2 { font-size: 1.75rem; color: var(--brandColor1); line-height: 1.96; margin-bottom: -5px; letter-spacing: .04em; } .home span.subhead { font-size: 1.31rem; font-family: var(--brandFont2); font-weight: 400; line-height: 2.25; letter-spacing: .03em;} .home .columns.services { display: block;} .home .component.bgGray h2 { padding-top: 70px; } .home .component .wrapper p { font-family: var(--brandFont1); font-size: 1.18rem; font-weight: 400; letter-spacing: .03em; line-height: 1.6;} @media screen and (max-width: 960px) { .columns .wrapper p.logoIntro { font-size: 1rem;} } /* Services */ .home .component.services .wrapper p { font-size: 1.3rem; line-height: 1.74; letter-spacing: .03em; font-family: var(--brandFont2); font-weight: 400; margin-bottom: 30px; } .columns.services .wrapper.large { max-width: 1750px; } .services img { height: 340px; object-fit: cover;} /* Infographic Callouts */ .home .component .wrapper.infographics { display: flex; flex-flow: row nowrap; justify-content: center; padding-bottom: 60px; max-width: 1400px; } .home .component .wrapper .infographic { text-align: center; display: flex; flex-flow: column wrap; margin: 0 auto; margin-top: 50px; padding: 0 85px; border-right: 1px solid #70707041; width: 443px; } .home .component .wrapper .infographic:last-child { border-right: none; border-bottom: none;} .home .component .wrapper .infographic .infographicNumber { color: var(--brandColor1); font-size: 4.3rem; font-weight: 500; font-family: var(--brandFont3); line-height: 5.3rem;} .home .component .wrapper .infographic .infographicText { font-family: var(--brandFont1); font-weight: 500; font-size: 1.125rem; letter-spacing: .03em;} @media screen and (max-width: 1150px) { .home .component .wrapper.infographics { flex-flow: column wrap; padding-bottom: 20px; } .home .component .wrapper .infographic { border: none; width: auto; padding: 0; } .home .component .wrapper .infographic::after { content: ""; width: 102px; background: #70707041; height: 1px; margin: 40px auto 0 auto; justify-content: center;} .home .component .wrapper .infographic:last-child::after { background: var(--brandColor5);} } /* Client Logo Bar */ .clients button.slick-prev.slick-arrow { display: none!important; } .clients button.slick-next.slick-arrow { display: none!important; } .home .columns.clients { display: flex; } .home .columns .wrapper p.clientIntro { font-family: var(--brandFont2); font-size: 1.125rem; font-weight: 400; letter-spacing: .028em; line-height: 2.25 ; text-align: center; } .home .slick-autoplay-toggle-button { display: none;} .home .clients .slick-track { display: flex; align-items: center; } @media screen and (max-width: 960px) { .home .columns .wrapper p.clientIntro { margin-top: 50px;} .home .columns .wrapper .clientBar { margin-bottom: 0;} } /* Feature */ .home .columns.bg.component.feature { max-width: 1920px; width: 95%; margin-bottom: 0; } .home .columns.bgGray.feature { background-color: white; margin: 0;} .home .blackBox .wrapper .content span.introText { display: none; color: #fff; font-family: var(--brandFont1); font-weight: 600; text-transform: uppercase; font-size: 1.5rem; letter-spacing: .0375em; line-height: 2.3; } .home .component.bgGray.feature h2 { padding-top: 10px; } .feature .blackBox { position: relative; margin: 0; width: 95%; height: 784px; } .feature .blackBox::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: #1C1C1C 0% 0% no-repeat padding-box; opacity: .95; } .feature .blackBox::after { content: url("../../../_redesign/_images/gray-triangle.svg"); position: absolute; bottom: -13px; } .feature .blackBox .wrapper { position: relative; display: flex; flex-flow: row nowrap; } .feature .content { width: fit-content; max-width: 655px; margin-top: 168px; padding-left: 45px; position: relative; z-index: 3; } .feature h2 { color: var(--brandColor4); font-size: 3rem; font-family: var(--brandFont1); font-weight: 600; text-transform:none; margin-bottom: 25px; line-height: 1.125;} .home .component.feature .wrapper p { color: var(--brandColor4); font-weight: 400; letter-spacing: .025em; font-size: 1em; line-height: 2;} .feature .featuredVideo { position: absolute; margin-top: 15px; right:0; height: 750px; max-height: 750px; width: 100%; } .feature .featuredVideo .wrapper { width: 56%; float: right; position: initial; padding: 0; } .feature .featuredVideo img { height: 750px; object-fit: cover; float: right; max-width: 100%; } @media screen and (min-width: 1921px) { .feature .featuredVideo img { width: 100%; } .feature .blackBox::after { transform: scale(2);} .feature .content { max-width: 625px;} } @media screen and (max-width: 1600px) { .feature .content { max-width: 585px; margin-top: 145px; } } @media screen and (max-width: 1400px) { .feature .content { max-width: 485px;} } @media screen and (max-width: 1200px) { .home .columns.bgGray.feature { background-color: var(--brandColor5); } .home .columns.bg.component.feature { width: 100%;} .feature { display: flex; flex-flow: column wrap;} .feature .blackBox { height: auto; padding-bottom: 68px; width: 100%; } .feature .blackBox::after { display: none; } .feature .content {margin-top: 80px; max-width: 100%; width: 100%;} .feature .featuredVideo { position: initial; margin-top: -50px; right:0; height: 100%; max-height: 750px; max-width: 100%; width: 100%; padding: 0 20px; z-index: 99;} .feature .featuredVideo img { height: 600px; width: 100%; object-fit: cover; } .feature .content { padding-left: 0;} .feature .featuredVideo .wrapper { width: 100%; margin-top: -30px; } .home .blackBox .wrapper .content span.introText { display: block } } @media screen and (max-width: 900px) { .feature .featuredVideo img { height: 450px; } } @media screen and (max-width: 580px) { .feature .featuredVideo img { height: 350px; } .feature h2 { margin-bottom: 50px; } } @media screen and (max-width: 400px) { .feature .featuredVideo img { height: 233px; } } /* Responsive Tabs */ .responsiveTabs.component { margin-bottom: 0; } .responsiveTabs h2 { line-height: 1.5;} .responsiveTabs .columns.bgGray { padding-top: 80px; } .responsiveTabs .ghost { position: absolute; top: auto; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .responsiveTabs .standardTabs { display: flex; flex-flow: wrap; justify-content: flex-end; width: 100%; margin: -30px auto 0 auto; text-align: center; margin-bottom: 30px; max-width: 1720px; padding-right: 20px; } .responsiveTabs .standardTabs li { position: relative; display: inline-block; font-family: var(--brandFont1); padding-right: 30px; letter-spacing: .025em; font-size: 1rem; font-weight: 600; vertical-align: middle; cursor: pointer; margin: 0; } .responsiveTabs .standardTabs li:last-child { padding-right: 0; } .responsiveTabs .standardTabs li a { color: var(--brandColor2); opacity: .7; display: block; text-decoration: none; transition: all 0.4s ease-in-out; line-height: 1.2; } .responsiveTabs .standardTabs li a:hover, .responsiveTabs .standardTabs li a:focus { color: var(--brandColor2); } .responsiveTabs .standardTabs .active { display: inline-block; } .responsiveTabs .standardTabs .active a, .responsiveTabs .standardTabs .active a:hover { color: var(--brandColor2); opacity: 1; border-bottom: 2px solid var(--brandColor1); max-width: fit-content; margin-bottom: -5px; } .responsiveTabs .tabContainer { clear: both; position: relative; } .responsiveTabs .tabContent { display: none; } .responsiveTabs .tabContent .cell .wrapper .columns + button { margin: 40px auto 0 auto;} .responsiveTabs .tabContent.active { position: relative; display: block; z-index: 0; } .responsiveTabs .tabContent.active .cell a { position: relative; overflow: hidden; display: block; margin: 0; } .responsiveTabs .tabContent.active .cell a.redButton { display: flex; margin: 40px auto 0 auto;} .responsiveTabs .tabContent.active .cell a:hover img, .responsiveTabs .tabContent.active .cell a:focus img { transition: all 0.2s ease-in-out; transform-origin: center; transform: scale(1.2);} .responsiveTabs .tabContent.active .cell a .imageOverlay{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0; transition: all 0.4s ease-in-out; background-color: var(--brandColor1); opacity: 0; padding: 60px 50px 0 60px; } .responsiveTabs .tabContent.active .cell a:hover .imageOverlay, .responsiveTabs .tabContent.active .cell a:focus .imageOverlay { opacity: .9; } .responsiveTabs .tabContent.active .cell a .imageOverlay span.circleIcon { height: 25px; width: 25px; background-color: #fff; margin-left: 15px; display: flex; align-items: center; justify-content: center; border-radius: 50%; } .responsiveTabs .tabContent.active .cell a .imageOverlay span.circleIcon ion-icon { font-size: 1rem; color: var(--brandColor1); font-weight: 500;} .responsiveTabs .tabContent .columns .three { gap: 1rem;} .responsiveTabs .tabContent .cell .wrapper .columns .three > .cell a img { height: 412px; object-fit: cover;} .responsiveTabs .accordionHeading { display: none; font-size: 1rem; font-weight: 500; } .imageOverlay .hoverTitle { font-family: var(--brandFont1); font-weight: 600; font-size: 1.875rem; color: var(--brandColor4); letter-spacing: .046em; line-height: 1.2; margin-bottom: 25px;} .imageOverlay .hoverContent { font-family: var(--brandFont2); font-weight: 400; font-size: 1rem; color: var(--brandColor4); letter-spacing: .025em; line-height: 1.875; margin-bottom: 30px; overflow: hidden; max-height: 150px; -webkit-box-orient: vertical; -webkit-line-clamp: 5; text-overflow: ellipsis; display: -webkit-box; } .imageOverlay .hoverLink { font-family: var(--brandFont1); font-weight: 400; font-size: 1rem; color: var(--brandColor4); letter-spacing: .12em; line-height: 1.25; display: flex; align-items: center;} .wrapper .breakLine { border-bottom: 1px solid #BBBBBB96; margin: 50px auto 50px auto; width: 80%; } @media screen and (max-width: 1645px) { .responsiveTabs .tabContent.active .cell a .imageOverlay{ padding: 25px; } } @media screen and (max-width: 1050px) { .responsiveTabs .tabContent .columns .three { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } } @media screen and (max-width: 1200px) { .responsiveTabs .columns.bgGray { padding-top: 65px; } } @media screen and (max-width: 960px) { .responsiveTabs .tabContainer .wrapper.large .columns { padding: 0; } .responsiveTabs .tabNav { max-width: 1540px; width: 100%; padding: 0 20px; margin: 0 auto; } .standardTabs.dropdownMenu { display: flex; flex-direction: column; justify-content: space-between; margin: 30px auto 40px auto; padding: 0; height: 50px; overflow: hidden; background-color: #fff; border: 1px solid #dcdcdc; list-style: none; text-align: left; } .standardTabs.dropdownMenu li { width: 100%; flex: 0 0 auto; margin: 0; } .standardTabs.dropdownMenu li a { background-color: #fff; border-bottom: none; line-height: 1.15; padding: 16px 50px 16px 10px; } .standardTabs.dropdownMenu .active a, .standardTabs.dropdownMenu .active a:hover { border-bottom: none; } .standardTabs.dropdownMenu li.active { order: -1; } .standardTabs.dropdownMenu li.active > a:after { display: inline-block; position: absolute; right: 20px; top: 23px; content: url(../../../_redesign/_images/carrot-down.svg); font-size: 1.2rem; font-weight: 900; transform: translate(-50%, -50%) rotate(0deg); transition: 0.4s cubic-bezier(0.2, 0.6, 0.3, 1.1); } .standardTabs.dropdownMenu.isOpen { height: auto; border: 1px solid #dcdcdc; } .standardTabs.dropdownMenu.isOpen li { height: auto; } .standardTabs.dropdownMenu.isOpen li.active > a:after { content: url(../../../_redesign/_images/carrot-down.svg); transform: translate(-50%, -50%) rotate(0deg); transition: 0.4s cubic-bezier(0.2, 0.6, 0.3, 1.1); } } @media screen and (max-width: 750px) { .responsiveTabs .tabContent .columns .three { display: grid; grid-template-columns: 1fr; gap: 1rem; } .wrapper .breakLine { width: 100%; } } @media screen and (max-width: 580px) { .imageOverlay .hoverTitle { font-size: 1.4rem; line-height: 2; margin-bottom: 15px; } .imageOverlay .hoverContent { font-size: .85rem; line-height: 1.4; margin-bottom: 15px; } .imageOverlay .hoverLink { font-size: .85rem; line-height: 1;} .responsiveTabs .tabContent.active .cell a .imageOverlay { padding: 15px;} .responsiveTabs .tabContent .cell .wrapper .columns .three > .cell a img { height: 350px; } } /* Logo Bar */ .home .columns .wrapper p.logoIntro { font-family: var(--brandFont1); font-size: 1.1rem; font-weight: 500; font-style: italic; letter-spacing: .028em; line-height: 2.25; text-align: center; margin-bottom: 60px;} .home .columns .wrapper.logoBar { display: flex; justify-content: center; align-items: center; flex-flow: row wrap; margin: 0 auto 100px auto; max-width: 1630px; width: 100%;} .home .columns .wrapper.logoBar img { padding: 10px 30px; filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); opacity: .4; -webkit-transform: translateZ(0); -webkit-perspective: 1000; -webkit-backface-visibility: hidden;} @media screen and (max-width:960px){ .home .columns .wrapper p.logoIntro { margin-bottom: 50px; font-size: 1rem; line-height: 1.875;} .home .columns .wrapper.logoBar img { padding: 20px 20px; } } /* ============================ VIDEO CONTENT OPTIONS * ============================*/ /* Video Options */ .videoContent { margin-bottom: 0; position: relative; } .videoContent a.popupVideo { display: block; } .videoContent .videoWrapper { position: relative; padding-bottom: 56.25%; padding-top: 20px; height: 0; } .videoContent .videoWrapper iframe { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 999; } .videoContent .videoButton { position: absolute; background-color: var(--brandColor1); top: 650px; left: 0; margin: auto; width: 100px; height: 100px; background-image: url(../../../_redesign/_images/play-circle-outline.svg); background-repeat: no-repeat; background-position: 30px; transition: all 0.4s ease-in-out; display: flex; } .videoContent .videoButton span.watchText { opacity: 0; display: flex; max-width: 250px; min-width: 250px; width: 100%; align-items: center; margin-left: 60px; color: white; font-family: var(--brandFont1); font-weight: 300; font-size: 1rem; padding: 0 25px; letter-spacing: .1em; } .videoContent .videoButton:hover, .videoContent a:focus .videoButton { width: 300px; transition: all 0.4s ease-in-out; } .videoContent a:focus .videoButton{ outline: 1px solid white; outline-offset: 2px; } .videoContent .videoButton:hover span.watchText, .videoContent a:focus .videoButton span.watchText { opacity: 1; } @media screen and (max-width: 1200px) { .videoContent .videoButton { top: 503px; left: -3px; } } @media screen and (max-width: 900px) { .videoContent .videoButton { top: 353px; } } @media screen and (max-width: 580px) { .videoContent .videoButton { top: 303px; width: 50px; height: 50px; background-size: 25px; background-position: 10px; } .videoContent .videoButton span.watchText { margin-left: 20px; } } @media screen and (max-width: 400px) { .videoContent .videoButton { top: 186px; } } /* ============================ SECTION NAVIGATION * ============================*/ .interiorNav { margin: 17px auto; } .interior .interiorNav { margin: 25px auto; } .interiorNavIntro { font-family: var(--brandFont1); font-weight: 500; font-size: 1.1875rem; letter-spacing: .029em; margin: 0 30px 0 0; text-transform: capitalize; } .interiorNav .wrapper { display: flex;} .sectionNav {width: 362px; margin-bottom: 0; display: flex; flex-direction: column; position: relative; background-color: #fff; z-index: 3; } .sectionNav:before { display: block; width: 100%; width: 100%; height: 5px; content:""; padding: 0; margin: 0; } .sectionNav ul { margin: 0; padding: 0; text-indent: 0; list-style: none; } .sectionNav > ul { width: 100%; margin-bottom: 0; padding-bottom: 0; border-bottom: 1px solid #7070702a; } .sectionNav .sectionTitle { display: none; } .sectionNav .sectionTitle .menuText { font-family: var(--brandFont2); font-weight: 500; font-size: 1rem; letter-spacing: .025em; color: #1c1c1cc0;} .sectionNav ul li.row { border-top: 1px solid transparent; border-bottom: 1px solid transparent; padding: 0; max-width: 100%;} .sectionNav .title { display: block; font-size: 1.4rem; font-weight: 600; color: var(--brandColor1); line-height: 1.4; } .sectionNav ul li .title a { color: var(--brandColor1); padding: 24px 0 0 0; letter-spacing: 0; } .sectionNav ul li .title a:hover, #mainWrapper .sectionNav ul li .title a:focus { color: var(--brandColor1); text-decoration: none; } .sectionNav ul li { position: relative; margin-bottom: 0; } .sectionNav ul li a { display: inline-block; color: #221E1F; text-decoration: none; } .sectionNav ul > li > a { font-weight: 400; font-family: var(--brandFont2); font-size: 1rem; letter-spacing: .025em; color: #1c1c1cc0 } .sectionNav ul > li > a span { font-weight: 400; font-family: var(--brandFont2); font-size: .85rem; letter-spacing: .025em; color: #1c1c1cc0 } .sectionNav ul li::before { content: normal; } .sectionNav ul li.active ul { padding: 2px 0 20px 0; } .sectionNav ul li.active > a { color: var(--brandColor1); font-style: italic; } .sectionNav ul li.active.sub > a { padding-bottom: 10px; } .sectionNav .content { display: none; width: 100%; padding: 0 16px 0 8px; } .sectionNav .content > ul { padding: 0; } .sectionNav .content ul li a { text-decoration: none; transition: all 0.4s ease-in-out; margin: 5px 0; } .sectionNav .content ul li.active a { font-weight: 400; } .sectionNav .content ul li a:hover, .sectionNav .content ul li a:focus { color: var(--brandColor1); } .sectionNav .content ul > li > ul > li > a:before { float: left; content: '\f105'; font-family: "Font Awesome 5 Free"; font-weight: 700; color: #F96B07; font-style: normal; } .sectionNav .content li a:before { position: absolute; top: 10px; left: 22px; } .sectionNav .sectionTitle { display:inline-block; background: #fff; border: 1px solid transparent; cursor: pointer; padding: 0 0 7px 0; } .sectionNav .sectionTitle:before { position: absolute; top: 10px; right: 16px; width: 20px; height: 16px; content: url(../../../_redesign/_images/carrot-down.svg); transform-origin: 50% 50%; transform: rotate(0deg); transition: all 0.4s ease-in-out; } .sectionNav.open .sectionTitle:before { transform: rotate(-180deg); } .sectionNav.open .sectionTitle { border-bottom: 1px solid transparent; } @media screen and (max-width: 960px) { .responsiveTabs .tabContainer .wrapper .columns, .interiorNav .columns { padding: 0; } } @media screen and (max-width: 650px) { .interiorNav { margin: 17.5px auto 22px auto; } .interiorNav .wrapper{ flex-flow: column wrap;} .sectionNav { width: 100%;} .sectionNav .sectionTitle { padding: 0 0 7px 0; } } /* =============================== INTERIOR PAGE SECTION NAVIGATION * ===============================*/ /* Section Navigation */ .interior:not(.interior.projects) .sectionNav { position: relative; margin-bottom: 20px; z-index: 3; width: auto;} .interior:not(.interior.projects) .sectionNav ul { margin: 0; padding: 0; text-indent: 0; list-style: none; } .interior:not(.interior.projects) .sectionNav > ul { width: 100%; margin-bottom: 0; padding-bottom: 0; border: none; } .interior:not(.interior.projects) .sectionNav .sectionTitle { display: none; } .interior:not(.interior.projects) .sectionNav ul li.row { padding: 0; border: none; } .interior:not(.interior.projects) .sectionNav .title { display: block; } .interior:not(.interior.projects) .sectionNav ul li .title a { padding: 25px 0 20px 0; } .interior:not(.interior.projects) .sectionNav ul li .title a:hover, .interior #mainWrapper .sectionNav ul li .title a:focus { text-decoration: none; } .interior:not(.interior.projects) .sectionNav ul li { position: relative; padding: 12px 0; margin-bottom: 0; margin-left: 0;} .interior:not(.interior.projects) .sectionNav ul li a { display: inline-block; text-decoration: none; } .interior:not(.interior.projects) .sectionNav ul li::before { content: normal; } .interior:not(.interior.projects) .sectionNav ul li.active ul { padding: 2px 0 20px 0; } .interior:not(.interior.projects) .sectionNav ul li.active a span { color: #D71920; } .interior:not(.interior.projects) .sectionNav ul li.active.sub a span { color: #1c1c1cc0; } .interior:not(.interior.projects) .sectionNav ul li.active.sub > a { padding-bottom: 10px; font-style: normal;} .interior:not(.interior.projects) .sectionNav ul li.active.sub > ul li.active a span { color: #D71920;} .interior:not(.interior.projects) .sectionNav .content { padding: 0 32px 14px 32px; } .interior:not(.interior.projects) .sectionNav .content > ul { padding: 9px 0 0 0; } .interior:not(.interior.projects) .sectionNav .content ul li a { text-decoration: none; text-align: left; width: 100%;} .interior:not(.interior.projects) .sectionNav .content ul li a:hover, .interior .sectionNav .content ul li a:focus { text-decoration: underline; transition: none; } .interior:not(.interior.projects) .sectionNav .content ul li a:hover span, .interior .sectionNav .content ul li a:focus span { color: #D71920; } .interior:not(.interior.projects) .sectionNav .content ul > li > ul > li > a { font-style: italic;} .interior:not(.interior.projects) .sectionNav .content ul > li > ul > li > a:before { content: none; } .interior:not(.interior.projects) .sectionNav .content li a:before { position: absolute; top: 10px; left: 22px; } .interior:not(.interior.projects) .leftNav ul:not(.sub-menu) > li:not(.active) { border: none;} .interior:not(.interior.projects) .leftNav ul li a span { padding-right: 0;} /* Tier 2 */ .interior:not(.interior.projects) .sectionNav .content ul > li > a span { padding-left: 0; } /* Tier 3 */ .interior:not(.interior.projects) .sectionNav ul > li > ul > li { padding: 10px 5px 10px 14px; } .interior:not(.interior.projects) .sectionNav ul > li > ul > li a { text-transform: none; } .interior:not(.interior.projects) .sectionNav .content ul > li > ul > li a span { display: block; } /* Tier 4 */ .interior:not(.interior.projects) .sectionNav ul > li > ul > li.active ul { padding: 0 5px 0 24px; } .interior:not(.interior.projects) .sectionNav ul > li > ul > li.active ul li a { display: block; } /* Tier 5 */ .interior:not(.interior.projects) .sectionNav ul > li > ul > li.active ul > li > ul > li a { display: block; } @media screen and (max-width: 1250px) { .interior:not(.interior.projects) .leftcol.col3 { width: 25%; } .interior:not(.interior.projects) .leftcol.col3 ~ .interior-content.col9 { width: 72%; } } @media screen and (max-width: 1200px) { .landing .interior .impact { margin-bottom: 0;} } @media screen and (min-width: 961px) { .interior:not(.interior.projects) .sectionNav .content { display: block !important; } } @media screen and (max-width: 960px) { .interior:not(.interior.projects) .leftcol.col3 { width: 100%; } .interior:not(.interior.projects) .leftcol.col3 ~ .interior-content.col9 { width: 100%; } .interior:not(.interior.projects) .leftNavLogo { display: none;} .interior:not(.interior.projects) .sectionNav { width: 100%; } .interior:not(.interior.projects) .sectionNav > ul { margin-left: auto; margin-right: auto; margin-bottom: 0; padding: 0; } .interior:not(.interior.projects) .sectionNav .sectionTitle { display:inline-block; width: 100%; text-align: left; padding: 20px; cursor: pointer; background-color: var(--brandColor5); } .interior:not(.interior.projects) .sectionNav .sectionTitle:before { position: absolute; top: 20px; right: 16px; width: 20px; height: 16px; transform-origin: 50% 50%; transform: rotate(0deg); transition: all .4s ease-in-out; } .interior:not(.interior.projects) .sectionNav.open .sectionTitle:before { top: 22px; right: 25px; transform: rotate(-180deg); } .interior:not(.interior.projects) .sectionNav ul li.row { max-width: 100%; } .interior:not(.interior.projects) .sectionNav .content { display: none; width: 100%; padding: 0 20px 14px 20px; background-color: var(--brandColor5); } .interior:not(.interior.projects) .leftNav ul:not(.sub-menu) > li:not(.active):hover a:hover, .interior .leftNav ul:not(.sub-menu) > li:not(.active):hover button:hover { text-decoration: none;} .interior:not(.interior.projects) .leftNav ul li.active, .interior .leftNav ul li.active a { background-color: var(--brandColor5);} } @media screen and (max-width: 767px) { .interior:not(.interior.projects) .sectionNav { width: 100% !important; margin: 0; } } /* ============================ LANDING * ============================*/ .noImpact { height:450px; } .landing .impact {height: auto;position: relative;} .landing .impact img { height:720px; width: 100%; object-fit: cover; } .landing .impact .noImpact .impactContent { height:100%; position:relative; } .landing .impact .impactContent { background-color: var(--brandColor2); } .landing .impact .impactGradient { height: 720px;} .landing .impact .noImpact .impactGradient { height:450px; background: #000000; position:absolute; z-index:0; } .landing .impact .videoTexture #playButton { top: 650px; max-width: 1540px;} .landing .impact .videoTexture ~ .impactText, .projects .impact .videoTexture ~ .impactText { top: -40px; } .landing .impact .impactText {position:relative; max-width: 1540px; width: 100%; margin: -150px auto 0 auto; } .landing .impact .noImpact .impactText { position:absolute; margin-top:0; bottom:1rem; } .landing .impact h1, .landing .impact .introText, .projects .impact .introText {color: var(--brandColor4); text-transform: none; padding: 0 20px; } .landing .impact .introText, .projects .impact .introText { margin-top: -100px; text-transform: uppercase; color: #fff; font-family: var(--brandFont1); font-weight: 500; font-size: 1.125rem; letter-spacing: .056em;} .landing .impact .interiorNav { margin: 70px auto 0 auto; } .landing .impact video { height: 720px; } .landing .impact picture, .interior .impact picture { display: none;} .landing .impact + .component { margin-top: 50px;} .landing .impactSlider ul.slick-dots { bottom: 40px; } .landing .introCallout { height: 253px; background-position: 0% 100%; width: 455px; top: 525px; right: 100px; } .landing .introCallout::after { border-right-width: 455px;} .landing .introCTA h2 { color: #fff; text-transform: none; font-size: 1.5rem; letter-spacing: .075em; margin-bottom: 0;} .landing .introCTA p { color: #fff; margin-bottom: 30px;} .landing .sectionNav:before { height: 0; } .landing .interiorNav .wrapper { max-width: 1540px;} /* Landing Feature*/ .landing .feature .featuredVideo { height: auto; width: 715px;} .landing .feature .featuredVideo img { height: 100%; max-height: 650px; width:100%; object-fit:cover; } .landing .feature .featuredVideo .wrapper { width: 100%; position: relative;} .landing .feature .blackBox { height: fit-content; } .landing .feature .blackBox::after { content: none;} .landing .feature .content { margin: 60px 0 40px 0; } .landing .feature h2 { font-size: 2.5rem;} .landing .feature p { color: #fff; } .landing .feature .videoContent { position: unset;} .landing .feature .videoButton { bottom: 0; left: 0; top: auto;} .landing .feature .blackBox .introText { color: #fff; text-transform: uppercase; font-size: 1.125rem; letter-spacing: .028em;} /* Landing columns */ .landing .columns { padding: 0; } .landing .columns .wrapper h2 { margin-bottom: 5px;} .landing .columns .wrapper p { margin-bottom: 30px; } .landing .columns.three { padding-top: 60px; padding-bottom: 60px;} .landing .columns.three .wrapper { max-width: 1540px; width: 100%; padding: 0 20px; margin: 0 auto; } .landing .columns.three .wrapper a { margin: 0; } .landing .columns.three h3 { margin-bottom: 0; margin-top: 25px; } .landing .columns.three h2 { text-transform: none;} .landing .columns.three + .accordion { margin-top: 0;} .landing .columns.three h2 { font-size: 1.875rem;} .landing .columns.three a { text-decoration: none;} .landing .columns .three { gap: 2rem;} .landing .columns .three .videoContent .videoButton { height: 50px; width: 50px; top:auto; bottom: 0; background-size: 30px; background-position: 10px; } .landing .columns .three .videoContent .videoButton:hover, .landing .columns .three .videoContent a:focus .videoButton { width: 275px; } .landing .columns .three .videoContent .videoButton span.watchText { padding: 0;} .landing .columns .three .cell > .videoContent a { margin: 0 auto;} .landing .columns.twoColumn .wrapper { max-width: 1760px;} .landing .columns.twoColumn .cell .content { padding-left: 74px; } .landing .columns.twoColumn .videoContent { position: relative;} .landing .columns.twoColumn .videoContent a { margin-top: 0;} .landing .columns.twoColumn .videoContent .videoButton { bottom: 0; top: auto; } .landing .columns.twoColumn h3 { margin-top: 69px; margin-bottom: 0; } .landing .columns.feature + .columns.three { padding-top: 140px; margin-top: -80px;} .landing .columns.three + footer { margin-top: -60px; } @media screen and (max-width: 1200px) { .landing .impact { height: auto; margin-bottom: 60px;} .landing .impact img, .landing .impact .impactGradient, .landing .impact video {height: 330px;} .landing .impactSlider .slick-next { top:33%; transform: scale(.75);} .landing .impactSlider .slick-prev { top:33%; transform: scale(.75);} .landing .impact .impactExtras { max-width: 90% } .landing .impact .impactExtras + .interiorNav { margin-top: 105px; } .landing .impact .impactExtras .introCallout { position: relative; top: 30px; left: 0; right: 0; max-width: 455px; width: 100%; margin: 0 20px; background-size: cover; padding: 40px 40px 30px 50px; height: fit-content;} .landing .impact .impactExtras .introCallout:after { left: 0; } .landing .impact .impactText { margin: -160px auto 0 auto; } .landing .impact .videoTexture #playButton { top: 245px; } .landing .introCTA { margin: 0;} .landing .introCTA h2 { margin-bottom: 10px; } .landing .feature .featuredVideo { width: 100%;} .landing .feature h2 { line-height: 1.2;} .landing .feature .content { margin: 60px 0 90px 0; } .landing .feature .featuredVideo{ margin-top: -155px; } .landing .columns.twoColumn .cell .content { padding-left: 0; } .landing .columns.twoColumn h3 { margin-top: 0; } .landing .columns.component.feature { padding-bottom: 60px; margin-bottom: 0;} .landing .columns .wrapper h2 { margin-bottom: 15px;} .landing .columns.three .wrapper p { margin-bottom: 0;} .landing .columns.feature + .columns.three { padding-top: 0; margin-top: 0;} .landing .columns.feature { background-color: var(--brandColor5);} } @media screen and (max-width: 960px) { .landing .impact picture, .interior .impact picture { display: block;} .landing .impact .videoTexture #playButton, .interior .impact .videoTexture #playButton { display: none; } .landing .columns.columns.twoColumn + .columns.twoColumn { margin-top: -40px;} .landing .impact .videoTexture ~ .impactText, .projects .impact .videoTexture ~ .impactText { top: 0; } } @media screen and (max-width: 790px) { .landing .impactSlider ul.slick-dots { bottom: 55px; } } @media screen and (max-width: 505px) { .landing .impact .impactExtras .introCallout { max-width: 335px; } .landing .impact .impactExtras .introCallout:after { border-right-width: 335px; } } /* ============================ INTERIOR * ============================*/ .interior .impact {height: 450px; position: relative;} .interior .impact img { height: 450px; width: 100%; object-fit: cover; } .interior .impact .impactGradient, .interior .impact video { height: 450px;} .interior .impact h1 { position:relative; color: var(--brandColor4); max-width: 1540px; width: 100%; margin: 0 auto 0 auto; text-transform: none; padding: 0 20px; } .interior .impact .videoTexture ~ h1 { margin-top: -155px; } .interior .impactSlider ul.slick-dots { bottom: 40px; } .interior .sectionNav:before { height: 0; } .interior .impact .videoTexture #playButton { top: 380px; max-width: 1540px;} .interior .videoContent:last-child { margin-bottom: 50px; } @media screen and (max-width: 960px) { .interior .impact .videoTexture ~ h1 { margin-top: -90px; } } @media screen and (max-width: 780px) { .interior .impact, .interior .impact img, .interior .impact .impactGradient { height: 300px; } .interior .impactSlider ul.slick-dots { bottom: 25px; } } /* ============================ PROJECTS * ============================*/ .projects .responsiveTabs .columns.bgGray { padding-top: 40px; } .projects .responsiveTabs .tabContent .columns .three { gap: 2rem;} .projects .responsiveTabs .tabContainer { padding-bottom: 90px;} .projects .responsiveTabs .tabContent p { margin-bottom: 0; margin-top: 5px; font-size: 1.125rem;} .projects .responsiveTabs .cell .wrapper .cell:hover, .projects .responsiveTabs .cell .wrapper .cell:focus { cursor: pointer; text-decoration: underline; } .projects .responsiveTabs .standardTabs { margin-top: 10px; max-width: 1540px;} .projects h2 { text-transform: none; margin-bottom: 10px;} .projects .responsiveTabs .columns .wrapper { margin-bottom: 50px; } .projects .impact .impactText {position:relative; max-width: 1540px; width: 100%; margin: -150px auto 0 auto; } @media screen and (max-width: 1645px) { .projects .responsiveTabs .tabContent.active .cell a .imageOverlay{ padding: 25px; } } @media screen and (max-width: 1400px) { .projects .responsiveTabs .tabContent .columns .three { gap: 2rem; } } @media screen and (max-width: 900px) { .projects .responsiveTabs .tabContent .columns .three { gap: 2rem; } .projects .responsiveTabs .columns.bgGray { padding-top: 60px; } } /* ============================ IMAGE GALLERY SLIDER * ============================*/ .gallery { position: relative; background: transparent; overflow: hidden; width: 100%;} .gallery.component { margin: 0 auto 50px auto; } .gallery.cell.component + .columns.twoColumn { margin-top: 60px; } .gallery .slick-dotted.slick-slider { display: flex; flex: auto; margin-bottom: 0; overflow: hidden; } .gallery .slick-track { display: flex; transform: none; } .gallery .slick-list { display: flex; margin-bottom: 0; } .gallery .slick-dotted.slick-slider button { display: none; } .gallery .slick-slide { height: 100%; } .gallery .slick-slide > div, .gallery .slick-slide > div > div { height: 100%; position: relative; width: 100%;} .gallery img { width: 100%; height: auto; max-height: 600px; object-fit: cover; margin: 0 auto; } .gallery .caption { display: none; } .gallery .slick-initialized .slick-slide { justify-content: unset; background-color: transparent; } .gallery .slick-initialized .caption { display: flex; position: absolute; width: 100%; max-width: 1360px; padding: 42px 40px; z-index: 6; align-items: center; top: 0; bottom: 0; left: 150px; right: auto; } .gallery .slick-initialized .caption .wrapper { margin: 0; } .gallery .slick-initialized .slick-slide .caption.left { justify-content: flex-start;} .gallery .slick-initialized .slick-slide .caption.right { justify-content: flex-end; right: 150px; left: auto;} .gallery .slick-initialized .caption .wrapper { position: relative; max-width: 626px; width: 100%; height: fit-content; padding: 40px 50px; background-color: var(--brandColor1); display: -ms-flexbox; display: flex; align-items: start; flex-direction: column;} .gallery .slick-initialized .caption .wrapper h2 { font-size: 1.95rem; font-weight: 700; color: #fff; text-transform: none; line-height: 1.3; margin-bottom: 10px; } .gallery .slick-initialized .caption .wrapper p { font-size: 1rem; font-weight: 400; color: #fff; line-height: 1.875; margin-bottom: 30px; } .gallery .slick-initialized .caption .wrapper p:last-of-type, .gallery .subtext p:last-child { margin-bottom: 0; } .gallery .slick-prev, .gallery .slick-next { color: #fff; top: 45%; bottom: auto; background-color: rgba(26, 26, 26, 0.75); width: 65px; height: 65px; opacity: 1; } .gallery ul.slick-dots { display: none!important; } .gallery .slick-prev { left: 20px; right: auto; } .gallery .slick-next { left: auto; right: 20px; } .gallery .slick-prev:hover, .gallery .slick-next:hover { background-color: rgba(26, 26, 26, 1); } .gallery .slick-prev:before, .gallery .slick-next:before { font-size: 1.4rem; } .slick-sr-only { position: absolute; left: -99999px; } @media screen and (max-width:1540px){ .gallery { background: var(--brandColor5); } .gallery .slick-initialized .slick-slide { background-color: var(--brandColor5);} .gallery .slick-initialized .caption .wrapper { max-width: 100%;} .gallery .slick-initialized .slick-slide .caption { padding: 0; position: relative; max-width: 100%; } .gallery .slick-slide > div, .gallery .slick-slide > div > div { height: auto;} .gallery .slick-initialized .slick-slide .caption.right, .gallery .slick-initialized .slick-slide .caption.left { justify-content: center; right: 0; left: 0;} .gallery .slick-prev, .gallery .slick-next { top: 20%; } .gallery ul.slick-dots { display: flex!important; width: 100%; bottom: 0; left: 0; right: 0; padding: 30px 0; margin: 0 auto; text-align: center; background-color: var(--brandColor5);} .gallery ul.slick-dots > li { position: relative; display: flex; } .gallery ul.slick-dots > li button { text-indent: -99999px; display: inline-block; padding: 0; margin: 0 5px 10px 0; width: 10px; height: 10px; color: #fff; background-color: #4040423d; border: none; transition: all 0.4s ease-in-out; } .gallery ul.slick-dots > li:hover button, .gallery ul.slick-dots > li button:focus { background-color: #40404288;; } .gallery ul.slick-dots > li.slick-active button { background-color: #40404288;; } .gallery ul.slick-dots > li:last-child { margin-right: 0; } .gallery .slick-dots li button { background-color: var(--brandColor5) ; } .gallery .slick-dots li button:hover, .gallery .slick-dots li button:active, .gallery .slick-dots li button:focus, .gallery .slick-dots li.slick-active { background-color: var(--brandColor5);} .gallery .slick-dotted.slick-slider { flex-direction: column;} .gallery .slick-dotted.slick-slider button { display: flex;} } @media screen and (max-width:1440px){ .gallery .slick-initialized .caption .wrapper h2 { font-size: 1.8rem; } } @media screen and (max-width:960px){ .gallery { height: auto; min-height: 409px; background-color: transparent; } .landing .component:last-child{ margin-bottom: 0; } .interior .gallery { margin-bottom: 0; } .gallery img { max-height: 500px; } .gallery .slick-initialized .caption, .interior .gallery .slick-initialized .caption { padding: 245px 10px 20px 10px; } .gallery .slick-initialized .caption .wrapper { padding: 20px 30px; margin: auto; justify-content: center; } .gallery .slick-initialized .caption .wrapper .right { max-width: 100%; padding: 35px 30px; } .gallery .slick-initialized .caption .wrapper h2 { width: 100%; } } @media screen and (max-width:580px){ .gallery .slick-initialized .caption .wrapper .right { width: 100%; } .gallery a.ctaButton { width: 100%; } } @media screen and (max-width:360px){ .gallery .slick-initialized .caption .wrapper h2 { font-size: 2rem; } } /* ============================ ACCORDIONS * ============================*/ /* Accordion */ .accordion.components { width: 100%; margin: 20px auto 0 auto; padding: 60px 20px;} .accordion.components.bgGray { background-color: var(--brandColor5);} .accordion > .wrapper { width: 100%; max-width: 1310px; padding: 0 20px; margin: 0 auto; } .accordion > h2 { margin-top: 20px; padding: 0 20px; } .accordion .wrapper h3 { margin-bottom: 0;} .accordion .wrapper p { margin-bottom: 30px;} .accordion > .wrapper > h2, .accordion > .wrapper > h3 { margin: 0; padding: 0; } .accordionTrigger { border: 1px solid #7070704D; background-color: #fff; font-weight: 600; color: var(--brandColor2); display: block; font-family: var(--brandFont1); font-size: 1.3rem; letter-spacing: 0; margin: 0; padding: 12px 0; position: relative; text-align: left; width: 100%; cursor: pointer; margin-bottom: 20px; } .accordionTrigger[aria-expanded="true"] { border-bottom: none; } .accordionTrigger[aria-expanded="true"], .accordionTrigger:hover { color: var(--brandColor1); } .accordion button::-moz-focus-inner { border: 0; } .accordionTitle { position: relative; display: block; pointer-events: none; border: transparent 2px solid; padding: 5px 65px 5px 20px; } .accordionTrigger:focus .accordionTitle { border-color: transparent; } .accordionPanel { margin: -20px 0 25px 0; padding: 0 20px 20px 20px; background-color: #fff; border: 1px solid #7070704D; border-top: none;} .accordionPanel[hidden] { display: none; } /* Accordion Expander Icon */ .accordion .accordionIcon { position: absolute; width: 22px; height: 30px; background-color: #fff; top: 0; bottom: auto; left: auto; right: 0; padding: 0; margin: 8px 0 8px 10px; cursor: pointer; z-index: 100; border: 1px solid transparent; } .accordion .accordionIcon:after { content: url(../../../_redesign/_images/accordion-down-arrow.svg); position: absolute; top: 40%; left: -15px; transform: translate(-50%, -50%) rotate(0deg); transition: 0.4s cubic-bezier(0.2, 0.6, 0.3, 1.1); } .accordion .accordionIcon:before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(0deg); transition: 0.4s cubic-bezier(0.2, 0.6, 0.3, 1.1); } .accordion .accordionTrigger[aria-expanded="true"] .accordionIcon:before { transform: translate(-50%, -50%) rotate(180deg); width: 0; } .accordion .accordionTrigger[aria-expanded="true"] .accordionIcon:after { transform: translate(-50%, -50%) rotate(180deg); } @media screen and (max-width: 1310px) { .accordion > .wrapper { padding: 0; } } @media screen and (max-width: 960px) { .accordion { margin: 0px auto 20px auto; } .accordionTrigger { font-size: 1.1rem; padding: 10px 0; } .accordion .accordionIcon:after { left: 0;} } /* ============================ OUR TEAM ACCORDION * ============================*/ .ourTeam .teamAccordionTitle .memberName { font-size: 1.5rem; } .ourTeam .teamAccordionTitle .memberTitle { font-size: 1.125rem; color: #5E5E5E; flex-grow: 1; } .ourTeam .teamAccordionTitle > span { display: block; } .ourTeam .teamAccordionTitle .memberMarket { font-size: 1.125rem; color: #D71921; } .ourTeam .teamPanelRow .bioImg img { display: block; } .ourTeam .teamBio > a.redButton { margin-bottom: 30px; } @media screen and (max-width: 500px) { .ourTeam .teamAccordionTitle .memberName { margin-bottom: 10px; } .ourTeam .teamAccordionTitle { padding: 5px 45px 5px 20px; } } @media screen and (min-width: 501px) { .ourTeam .teamAccordionTitle { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; column-gap: 30px; } } @media screen and (max-width: 960px) { .ourTeam .teamPanelRow .bioImg { margin-bottom: 40px; } } @media screen and (min-width: 961px) { .ourTeam .teamPanelRow { display: flex; gap: 50px; } .ourTeam .teamPanelRow .bioImg { min-width: 0; flex-shrink: 0; max-width: 50%; } .ourTeam .teamPanelRow .teamBio { min-width: 0; } } /* CONTACT FORM */ form:after { clear: both; } form.contact input[type=radio] { margin: 10px 10px 10px 20px; } form.contact input[type=radio]:first-of-type { margin: 10px 10px 10px 0px; } form.contact input[type=text], form.contact input[type=email], form.contact input[type=tel] { height: 40px; padding: 10px; width: 100%; margin: 5px 0 25px 0; } form.contact input:focus { outline: none; } form.contact select { height: 40px; padding: 10px; width: 100%; margin: 5px 0 25px 0; } form.contact textarea { font-family: 'Oswald', sans-serif; width: 100%; min-height: 100px; margin: 5px 0 25px 0; padding: 10px; } /*form.contact button:hover{ background:none; }*/ form.contact input[type=submit] { float: left;padding: 5px 50px; font-size: 1.25rem; cursor: pointer; text-decoration: none; border-radius: 5px; display: block; text-align: center;border-radius: 500px;border:0;outline:0;border-radius:0; } /*form button.button.two{ margin-left:30px; }*/ .ghost { opacity: 0; position: absolute; top: 0; left: 0; height: 0; width: 0; z-index: -1;} /* ============================ MAGNIFIC POPUP * ============================*/ .mfp-bg { top: 0; left: 0; width: 100%; height: 100%; z-index: 99998; overflow: hidden; position: fixed; background: rgba(10, 10, 10, .95); } .mfp-wrap { top: 0; left: 0; width: 100%; height: 100%; z-index: 99999; position: fixed; } .mfp-container { text-align: center; position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0 8px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mfp-container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .mfp-align-top .mfp-container:before { display: none; } .mfp-content { position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 1045; } .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { width: 100%; cursor: auto; } .mfp-ajax-cur { cursor: progress; } .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: -moz-zoom-out; cursor: -webkit-zoom-out; cursor: zoom-out; } .mfp-zoom { cursor: pointer; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; } .mfp-auto-cursor .mfp-content { cursor: auto; } .mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter { -webkit-user-select: none; -moz-user-select: none; } .mfp-loading.mfp-figure { display: none; } .mfp-hide { display: none !important; } .mfp-preloader { color: #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, .closeButton { overflow: visible; cursor: pointer; border: 1px solid transparent; color: #fff; background-color: var(--brandColor1); -webkit-appearance: none; display: block; padding: 8px 5px; z-index: 999999; -webkit-box-shadow: none; box-shadow: none; transition: all 0.4s ease-in-out; cursor: pointer; } button.mfp-arrow { position: absolute; bottom: 32px; display: block; width: 35px; height: 35px; padding: 0; cursor: pointer; border: none; z-index: 2; background-color: var(--brandColor1); border: 2px solid var(--brandColor1); transition: all 0.4s ease-in-out; } .mfp-arrow-left .mfp-arrow-right { width: 44px; height: 44px; color: #fff; } .mfp-arrow-left { right: 72px; background-image: url(../images/arrow-left-white.svg); background-position: center center; background-repeat: no-repeat; } .mfp-arrow-right { right: 38px; background-image: url(../images/arrow-right-white.svg); background-position: center center; background-repeat: no-repeat; } .mfp-arrow-left:hover, .mfp-arrow-right:hover, .mfp-arrow-left:focus, .mfp-arrow-right:focus { background-color: var(--brandColor1); border: 2px solid var(--brandColor1); } button::-moz-focus-inner { padding: 0; border: 0; } .mfp-close, .closeButton, button.mfp-close { width: auto; height: 42px; position: absolute; right: 0; top: 0; color: #fff; text-indent: -999999px; background-color: var(--brandColor1); font-family: 'Montserrat', Helvetica, Arial, san-serif; font-size: .8rem; font-weight: 500; text-decoration: none; text-align: right; line-height: 1; color: #fff; top: -42px; max-width: 86px; width: 100%; transition: all 0.4s ease-in-out; } .mfp-close:before { position: absolute; top: 10px; right: 0; display: inline-block; width: 30px; font-size: 1rem; font-weight: 500; content: url(../../../_redesign/_images/white-close.svg); margin: 0; padding: 0 10px 0 0; vertical-align: middle; background-color: var(--brandColor1); transition: all 0.4s ease-in-out; } .mfp-close:hover, .mfp-close:focus { background-color: var(--brandColor1); top: -42px; } .mfp-close:hover:before, .mfp-close:focus:before { background-color: var(--brandColor1); } .mfp-close:active { top: -42px; } .mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { color: #fff; text-align: right; max-width: 45px; width: 100%; } .mfp-counter { position: absolute; top: 0; right: 0; color: #CCC; font-size: 12px; line-height: 1.125; white-space: nowrap; } .mfp-iframe-holder { padding-top: 40px; padding-bottom: 40px; } .mfp-iframe-holder .mfp-content { line-height: 0; width: 100%; max-width: 900px; } .mfp-iframe-holder .mfp-close { top: -42px; } .mfp-iframe-scaler { width: 100%; height: 0; overflow: hidden; padding-top: 56.25%; } .mfp-iframe-scaler iframe { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; /*box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); */background: rgba(10, 10, 10, .95); } /* Magnific Fade In and Out */ .white-popup-block { animation: magnificOpen .4s; } .mfp-removing { animation: magnificClose .4s; } @keyframes magnificOpen { 0% {opacity: 0;} 100% {opacity: 1;} } @keyframes magnificClose { 0% {opacity: 1;} 100% {opacity: 0;} } @media (prefers-reduced-motion) { .white-popup-block, .mfp-removing { animation-name: dissolve; } } /* Main image in popup */ img.mfp-img { width: auto; max-width: 100%; height: auto; display: block; line-height: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 40px 0 40px; margin: 0 auto; } /* The shadow behind the image */ .mfp-figure { line-height: 0; } .mfp-figure:after { content: ''; position: absolute; left: 0; top: 40px; bottom: 40px; display: block; right: 0; width: auto; height: auto; z-index: -1; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #202020; } .mfp-figure small { color: #BDBDBD; display: block; font-size: 12px; line-height: 1; } .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: 1.125; 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(10, 10, 10, .95); bottom: 0; margin: 0; top: auto; padding: 3px 5px; position: fixed; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mfp-img-mobile .mfp-bottom-bar:empty { padding: 0; } .mfp-img-mobile .mfp-counter { right: 5px; top: 3px; } .mfp-img-mobile .mfp-close { top: 0; right: 0; width: 35px; height: 35px; line-height: 2.18; background: rgba(10, 10, 10, .95); position: fixed; text-align: center; padding: 0; } } @media screen and (max-width:900px) { .mfp-arrow-left { -webkit-transform-origin: 0; transform-origin: 0; } .mfp-arrow-right { -webkit-transform-origin: 100%; transform-origin: 100%; } .mfp-container { padding-left: 25px; padding-right: 25px; } } /*ADDITIONAL TEMPLATES*/ .interior-content ul.topicDrop li:before {content:""; display:none; color: transparent; width: 0; margin-left: 0;font-size: 0; } .interior-content ul.topicDrop li { margin-left: 0; } .interior-content ul.topicDrop li a { margin:0; } /* added for project listing */ .projectsListingComponent { background-color: var(--brandColor5); margin-bottom: 0; padding-bottom: 60px; } .projectListingsIntro { padding-top: 24px; margin-bottom: 34px; } .projectListingsLogo img { width: 225px; } .projectListingFilters { margin-bottom: 30px; } .projectListingFilters .filtersLabel { display: block; font-family: var(--brandFont1); font-weight: 600; font-size: 1rem; line-height: 1; margin-bottom: 10px; } .projectsDropdownWrap { border: 1px solid rgba(112, 112, 112, 0.30); background: var(--brandColor4); padding: 0; position: relative; z-index: 3; } button.projectFiltersToggle { color: var(--brandColor2); font-size: 18px; font-weight: 600; line-height: 1.25; text-align: left; background: transparent; border: none; cursor: pointer; margin: 0; padding: 14px 24px; width: 100%; } .projectsDropdownWrap .projectFiltersToggle:before { position: absolute; top: 15px; right: 30px; width: 20px; height: 16px; content: url(https://www.dhgriffin.com/_redesign/_images/carrot-down.svg); transform-origin: 50% 50%; transform: rotate(0deg); transition: all 0.4s ease-in-out; } .projectsDropdownWrap.open .projectFiltersToggle:before { transform: rotate(-180deg); } #projectFiltersDropdown { padding: 7px 24px 24px 24px; position: absolute; left: -1px; background-color: var(--brandColor4); width: calc(100% + 2px); display: none; border: 1px solid rgba(112, 112, 112, 0.30); border-top-color: transparent; } ul.projectFiltersList { margin-bottom: 0; padding:0; list-style: none; height: auto; max-height: 340px; overflow-y: auto; width: 100%; display: block; } ul.projectFiltersList::-webkit-scrollbar { width: 10px; } ul.projectFiltersList::-webkit-scrollbar-thumb { background: #5E5E5E; } ul.projectFiltersList::-webkit-scrollbar-track { background: #D9D9D9; } ul.projectFiltersList li { margin-left: 0; } ul.projectFiltersList li a { display: block; line-height: 1.25; width: 100%; margin: 0; padding: 10px 0; color: #5E5E5E; font-family: var(--brandFont2); font-weight: 600; text-decoration: none; transition: all 0.4s ease-in-out; } ul.projectFiltersList li a:hover, ul.projectFiltersList li a:focus { color: var(--brandColor2); } ul.projectFiltersList li a.mixitup-control-active { color: var(--brandColor1); } .projectListings .projectListingRow { background-color: var(--brandColor4); margin-bottom: 40px; } .projectListings .projectImageHoverLink { display: block; overflow: hidden; width: 100%; height: 100%; margin: 0; } .projectListings .projectImageHoverLink img { display: block; min-width: 100%; min-height: 100%; object-fit: cover; transition: all .3s ease-in; } .projectListings .projectImageHoverLink:hover img, .projectListings .projectImageHoverLink:focus img { transform: scale(1.1); } .projectListings .projectListingText { padding: 20px 24px 30px 24px; } .projectListings .projectCompanies { color: var(--brandColor1); font-weight: 600; font-size: 1rem; margin-bottom: 10px; line-height: 1.25;} .projectListings h3.projectTitle { font-size: 1.5rem; line-height: 1.17; margin-bottom: 25px; } .projectListings .projectSummary { font-size: 1.125rem; line-height: 1.66; margin-bottom: 23px; } .projectListings a.viewProjectButton { margin: 0; transition: all .3s ease-in; } .projectListings a.viewProjectButton:hover, .projectListings a.viewProjectButton:focus { background: #c1161d; } @media (max-width: 580px) { .projectListingsLogo { width: 160px; } .projectListingFilters { width: 100%; } .projectListings .projectSummary { display: none; } .projects .projectListings a.viewProjectButton { width: fit-content; } } @media (max-width: 960px) { .projectListingsLogo { margin-bottom: 20px; } } @media (min-width: 581px) { .projectListingFilters { margin-left: auto; width: 316px; } } @media (min-width: 961px) { .projectListingsIntro { display: flex; padding-top: 50px; margin-bottom: 70px; column-gap: 100px; } .projectListingsLogo { flex-shrink: 0; } .projectListings .projectListingRow { display: grid; grid-template-columns: 35% 65%; min-height: 330px; } .projectListings .projectListingText { padding: 20px 45px 20px 50px; } .projectListings .projectCompanies { font-size: 1.313rem; } .projectListings h3.projectTitle { font-size: 1.75rem; line-height: 1.3; margin-bottom: 15px; } .projectListings .projectSummary { margin-bottom: 30px; } }