.combobox-list { width: 100%; display: flex; align-items: center; } .combobox .group { display: inline-flex; cursor: pointer; height: 50px; width: 100%; } @media (max-width: 1024px) { .combobox .group { height: 35px; } } .combobox input, .combobox button { background-color: white; color: black; box-sizing: border-box; height: 100%; padding: 0; margin: 0; vertical-align: bottom; border: none; position: relative; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0px; } .combobox input { width: 100%; border-right: none; font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 16px; line-height: 1.75; color: #656565; padding: 8px 16px 10px; border-radius: 0px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } @media (max-width: 1024px) { .combobox input { font-size: 14px; padding: 6px 13px 7px; } } .combobox input::-moz-placeholder { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 16px; line-height: 1.75; color: #656565; } .combobox input::placeholder { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 16px; line-height: 1.75; color: #656565; } @media (max-width: 1024px) { .combobox input::-moz-placeholder { font-size: 14px; } .combobox input::placeholder { font-size: 14px; } } .combobox button { width: 44px; border-left: none; color: #005a9c; } .combobox button svg { transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } .combobox button[aria-expanded="true"] svg { transform: rotate(180deg) translate(0, -3px); } ul[role="listbox"] { margin: 0; position: absolute; z-index: 2; left: 0; top: 50px; list-style: none; background-color: white; display: none; box-sizing: border-box; max-height: 250px; width: 100%; overflow: scroll; padding: 0px; overflow-x: hidden; cursor: pointer; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } @media (max-width: 1024px) { ul[role="listbox"] { top: 35px; } } ul[role="listbox"] li[role="option"] { position: relative; margin: 0; padding: 10px 16px; font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 16px; line-height: 1.2; color: #656565; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); background-color: #ebebeb; display: flex; } @media (max-width: 1024px) { ul[role="listbox"] li[role="option"] { font-size: 14px; padding: 6px 13px 7px; } } ul[role="listbox"] li[role="option"].era-dropdown { padding: 0; } ul[role="listbox"] li[role="option"] .era-color { width: 20px; height: 20px; background-color: #6DC7FF; position: absolute; left: 16px; top: 15px; pointer-events: none; } ul[role="listbox"] li[role="option"] .era-info { width: 100%; height: 100%; } ul[role="listbox"] li[role="option"] .era-info h4 { display: block; font-family: alegreya, Helvetica, Arial, sans-serif; font-style: italic; font-weight: 400; font-size: 18px; line-height: 1.2; color: #2c2c2c; margin: 0; pointer-events: none; position: absolute; top: 8px; left: 50px; } ul[role="listbox"] li[role="option"] .era-info h3 { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 14px; line-height: 1.2; text-transform: none; color: #8e8e8e; margin: 0; padding: 30px 16px 10px 50px; } /* focus and hover styling */ /*.combobox .group.focus, .combobox .group:hover { padding: 2px; border: 2px solid currentcolor; border-radius: 4px; } .combobox .group.focus polygon, .combobox .group:hover polygon { fill-opacity: 1; } .combobox .group.focus input, .combobox .group.focus button, .combobox .group input:hover, .combobox .group button:hover { background-color: #def; }*/ [role="listbox"].focus [role="option"][aria-selected="true"], [role="listbox"] [role="option"]:hover { background-color: #D8D8D8; /*padding-top: 0; padding-bottom: 0; border-top: 2px solid currentcolor; border-bottom: 2px solid currentcolor;*/ } .site-header { position: absolute; width: 100%; z-index: 1000; } .site-header .header-right .era-banner { display: block; position: fixed; bottom: 0px; left: 0px; width: 100%; align-items: center; background-color: #6DC7FF; padding: 4px 36px; } @media (max-width: 1250px) { .site-header .header-right .era-banner { padding: 4px 24px; } } .site-header .header-right .era-banner strong { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 12px; line-height: 1.166; color: #fff; text-transform: uppercase; letter-spacing: 0.08em; } .site-header .header-desktop { display: block; } @media (max-width: 1024px) { .site-header .header-desktop { display: none; } } .site-header .header-desktop .header-top { padding: 18px 24px; position: relative; width: 100%; display: flex; justify-content: center; } .site-header .header-desktop .header-top .top-line { width: 100%; display: flex; align-items: center; } .site-header .header-desktop .header-top .top-line .line { width: 100%; height: 10px; background-color: #6DC7FF; } .site-header .header-desktop .header-top .top-line .arrow-link { padding-left: 12px; position: relative; padding-right: 18px; font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 900; font-size: 15px; line-height: 1.2; color: #1F1F1F; white-space: nowrap; letter-spacing: 0.03em; text-transform: uppercase; text-decoration-color: transparent; -webkit-text-decoration-color: transparent; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } .site-header .header-desktop .header-top .top-line .arrow-link:hover, .site-header .header-desktop .header-top .top-line .arrow-link:focus { text-decoration-color: #1F1F1F; -webkit-text-decoration-color: #1F1F1F; } .site-header .header-desktop .header-top .top-line .arrow-link:hover svg path, .site-header .header-desktop .header-top .top-line .arrow-link:focus svg path { fill: #1F1F1F; } .site-header .header-desktop .header-top .top-line .arrow-link svg { width: 13px; position: absolute; top: 2px; right: 0; } .site-header .header-desktop .header-top .top-line .arrow-link svg path { transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } .site-header .header-desktop .header-top .top-logo { position: absolute; top: 12px; } .site-header .header-desktop .header-top .top-logo .era-flag { display: none; position: absolute; top: 33px; left: 0; right: 0; margin: 0 auto; width: 53px; height: 85px; align-items: flex-end; justify-content: center; padding: 18px 5px; } .site-header .header-desktop .header-top .top-logo .era-flag svg { width: 21px; } .site-header .header-desktop .header-top .top-logo img { position: relative; width: 67px; } .site-header .header-desktop .era-banner { display: block; position: fixed; bottom: 59px; width: 100%; align-items: center; background-color: #6DC7FF; padding: 4px 36px; } @media (max-width: 1250px) { .site-header .header-desktop .era-banner { padding: 4px 24px; } } .site-header .header-desktop .era-banner strong { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 12px; line-height: 1.166; color: #fff; text-transform: uppercase; letter-spacing: 0.08em; } .site-header .header-desktop .header-bottom { position: fixed; bottom: 0; width: 100%; display: flex; justify-content: flex-end; background-color: #3B3B3B; } .site-header .header-desktop .header-bottom .bottom-logo { display: flex; align-items: center; padding: 0 24px; position: absolute; z-index: 2; left: 0; top: 0; bottom: 0; background-color: #3B3B3B; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } @media (max-width: 1250px) { .site-header .header-desktop .header-bottom .bottom-logo { width: 400px; } } .site-header .header-desktop .header-bottom .bottom-logo .logo { position: relative; padding: 0 24px 0 12px; } @media (max-width: 1250px) { .site-header .header-desktop .header-bottom .bottom-logo .logo { padding-right: 19px; padding-left: 0; } } .site-header .header-desktop .header-bottom .bottom-logo .logo:after { content: ''; width: 11px; height: 23px; position: absolute; right: 0; top: -3px; background-image: url("../images/svg/slash-blue.svg"); background-size: contain; background-position: center; background-repeat: no-repeat; } @media (max-width: 1250px) { .site-header .header-desktop .header-bottom .bottom-logo .logo:after { width: 8px; height: 20px; top: -1px; } } .site-header .header-desktop .header-bottom .bottom-logo strong { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 17px; line-height: 1.2; color: #fff; letter-spacing: 0.06em; text-transform: uppercase; padding-left: 11px; } @media (max-width: 1250px) { .site-header .header-desktop .header-bottom .bottom-logo strong { letter-spacing: 0.03em; font-size: 15px; padding-left: 8px; } } .site-header .header-desktop .header-bottom .main-nav { display: flex; align-items: center; padding-right: 20px; } @media (max-width: 1250px) { .site-header .header-desktop .header-bottom .main-nav { padding-right: 10px; } } .site-header .header-desktop .header-bottom .main-nav.search-open .header-search-wrapper { width: 290px; } .site-header .header-desktop .header-bottom .main-nav.search-open .header-search-wrapper .header-search-form .searchform-wrapper .searchform-input { width: 255px; margin-right: 8px; border-bottom: 1px #747474 solid; } .site-header .header-desktop .header-bottom .main-nav.search-open .header-search-wrapper .header-search-form .searchform-wrapper .searchform-submit { pointer-events: all; } .site-header .header-desktop .header-bottom .main-nav .header-search-wrapper { width: 80px; margin: 0 15px; padding: 20px 0; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } @media (max-width: 1250px) { .site-header .header-desktop .header-bottom .main-nav .header-search-wrapper { width: 77px; margin-left: 10px; } } .site-header .header-desktop .header-bottom .main-nav .header-search-wrapper .header-search-form .searchform-wrapper { display: flex; justify-content: space-between; position: relative; top: 1px; } .site-header .header-desktop .header-bottom .main-nav .header-search-wrapper .header-search-form .searchform-wrapper .searchform-input { cursor: pointer; padding: 0; margin: 0; width: 65px; background: none; border: none; font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 15px; line-height: 1.2; color: #fff; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); border-bottom: 1px transparent solid; } @media (max-width: 1250px) { .site-header .header-desktop .header-bottom .main-nav .header-search-wrapper .header-search-form .searchform-wrapper .searchform-input { width: 62px; } } .site-header .header-desktop .header-bottom .main-nav .header-search-wrapper .header-search-form .searchform-wrapper .searchform-input::-moz-placeholder { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 15px; line-height: 1.2; color: #fff; letter-spacing: 0.03em; text-transform: uppercase; } .site-header .header-desktop .header-bottom .main-nav .header-search-wrapper .header-search-form .searchform-wrapper .searchform-input::placeholder { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 15px; line-height: 1.2; color: #fff; letter-spacing: 0.03em; text-transform: uppercase; } .site-header .header-desktop .header-bottom .main-nav .header-search-wrapper .header-search-form .searchform-wrapper .searchform-submit { cursor: pointer; font-size: 0; line-height: 0; border: none; background: none; pointer-events: none; } .site-header .header-desktop .header-bottom .main-nav .main-menu { list-style: none; display: flex; padding: 0; margin: 0; } .site-header .header-desktop .header-bottom .main-nav .main-menu .top-level-link { position: relative; list-style: none; padding: 0; margin: 0 15px; display: flex; justify-content: center; /*.sub-menu { opacity: 0; pointer-events: none; list-style: none; position: absolute; top: 100%; bottom: auto; margin: 0 auto; background-color: $text-gray; padding: 27px 27px 15px; width: 250px; @include transition(); .menu-item { margin: 0 0 15px; text-align: center; a { @include fonts("Niveau Grotesk", 15px, 1.2); @include link-colors($white, $white); @include text-decoration(transparent); &:hover, &:focus { @include text-decoration($white); } } } } */ } @media (max-width: 1250px) { .site-header .header-desktop .header-bottom .main-nav .main-menu .top-level-link { margin: 0 10px; } } .site-header .header-desktop .header-bottom .main-nav .main-menu .top-level-link:hover > a:before, .site-header .header-desktop .header-bottom .main-nav .main-menu .top-level-link:focus > a:before { background-color: #6DC7FF; } .site-header .header-desktop .header-bottom .main-nav .main-menu .top-level-link:hover .sub-menu, .site-header .header-desktop .header-bottom .main-nav .main-menu .top-level-link:hover .downloads-menu, .site-header .header-desktop .header-bottom .main-nav .main-menu .top-level-link:focus .sub-menu, .site-header .header-desktop .header-bottom .main-nav .main-menu .top-level-link:focus .downloads-menu { top: auto; bottom: 100%; opacity: 1; pointer-events: all; } .site-header .header-desktop .header-bottom .main-nav .main-menu .top-level-link.active > a:before { background-color: #6DC7FF; } .site-header .header-desktop .header-bottom .main-nav .main-menu .top-level-link.active .sub-menu, .site-header .header-desktop .header-bottom .main-nav .main-menu .top-level-link.active .downloads-menu { top: auto; bottom: 100%; pointer-events: all; opacity: 1; } .site-header .header-desktop .header-bottom .main-nav .main-menu .top-level-link > a { cursor: default; display: block; position: relative; padding: 20px 0; font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 15px; line-height: 1.2; color: #fff; letter-spacing: 0.03em; text-transform: uppercase; color: #fff; text-decoration-color: transparent; -webkit-text-decoration-color: transparent; } .site-header .header-desktop .header-bottom .main-nav .main-menu .top-level-link > a:visited { color: #fff; } .site-header .header-desktop .header-bottom .main-nav .main-menu .top-level-link > a:focus { color: #fff; } .site-header .header-desktop .header-bottom .main-nav .main-menu .top-level-link > a:hover { color: #fff; } .site-header .header-desktop .header-bottom .main-nav .main-menu .top-level-link > a:active { color: #fff; } .site-header .header-desktop .header-bottom .main-nav .main-menu .top-level-link > a:before { content: ''; width: 1px; height: 10px; position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; background-color: #747474; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } .site-header .header-desktop .header-bottom .main-nav .main-menu .top-level-link .downloads-menu { opacity: 0; pointer-events: none; position: absolute; top: 100%; bottom: auto; right: -70px; margin: 0 auto; background-color: #1F1F1F; padding: 27px 15px 15px; width: 545px; display: flex; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } .site-header .header-desktop .header-bottom .main-nav .main-menu .top-level-link .downloads-menu > div { width: 50%; } .site-header .header-desktop .header-bottom .main-nav .main-menu .top-level-link .downloads-menu strong { display: block; font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 15px; line-height: 1.2; color: #fff; letter-spacing: 0.03em; text-transform: uppercase; margin-bottom: 15px; padding: 0 12px; } .site-header .header-desktop .header-bottom .main-nav .main-menu .top-level-link .downloads-menu .most-downloaded, .site-header .header-desktop .header-bottom .main-nav .main-menu .top-level-link .downloads-menu .period-overviews { list-style: none; margin: 0; padding: 0 12px; } .site-header .header-desktop .header-bottom .main-nav .main-menu .top-level-link .downloads-menu .most-downloaded .menu-item, .site-header .header-desktop .header-bottom .main-nav .main-menu .top-level-link .downloads-menu .period-overviews .menu-item { margin: 0 0 15px; } .site-header .header-desktop .header-bottom .main-nav .main-menu .top-level-link .downloads-menu .most-downloaded .menu-item a, .site-header .header-desktop .header-bottom .main-nav .main-menu .top-level-link .downloads-menu .period-overviews .menu-item a { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 15px; line-height: 1.2; color: #fff; text-decoration-color: transparent; -webkit-text-decoration-color: transparent; } .site-header .header-desktop .header-bottom .main-nav .main-menu .top-level-link .downloads-menu .most-downloaded .menu-item a:visited, .site-header .header-desktop .header-bottom .main-nav .main-menu .top-level-link .downloads-menu .period-overviews .menu-item a:visited { color: #fff; } .site-header .header-desktop .header-bottom .main-nav .main-menu .top-level-link .downloads-menu .most-downloaded .menu-item a:focus, .site-header .header-desktop .header-bottom .main-nav .main-menu .top-level-link .downloads-menu .period-overviews .menu-item a:focus { color: #fff; } .site-header .header-desktop .header-bottom .main-nav .main-menu .top-level-link .downloads-menu .most-downloaded .menu-item a:hover, .site-header .header-desktop .header-bottom .main-nav .main-menu .top-level-link .downloads-menu .period-overviews .menu-item a:hover { color: #fff; } .site-header .header-desktop .header-bottom .main-nav .main-menu .top-level-link .downloads-menu .most-downloaded .menu-item a:active, .site-header .header-desktop .header-bottom .main-nav .main-menu .top-level-link .downloads-menu .period-overviews .menu-item a:active { color: #fff; } .site-header .header-desktop .header-bottom .main-nav .main-menu .top-level-link .downloads-menu .most-downloaded .menu-item a:hover, .site-header .header-desktop .header-bottom .main-nav .main-menu .top-level-link .downloads-menu .most-downloaded .menu-item a:focus, .site-header .header-desktop .header-bottom .main-nav .main-menu .top-level-link .downloads-menu .period-overviews .menu-item a:hover, .site-header .header-desktop .header-bottom .main-nav .main-menu .top-level-link .downloads-menu .period-overviews .menu-item a:focus { text-decoration-color: #fff; -webkit-text-decoration-color: #fff; } .site-header .header-desktop .header-bottom .main-nav .main-menu .downloads-item { justify-content: flex-end; } .site-header .header-mobile { display: none; position: fixed; top: 0; left: 0; right: 0; background-color: #1E1E1E; } @media (max-width: 1024px) { .site-header .header-mobile { display: block; } } .site-header .header-mobile .header-top { padding: 19px 20px 11px; position: relative; z-index: 2; background-color: #1E1E1E; min-height: 110px; } .site-header .header-mobile .header-top .top-logo { position: relative; margin-bottom: 12px; display: flex; justify-content: center; } .site-header .header-mobile .header-top .top-logo .logo { position: relative; padding: 0 24px 0 12px; } @media (max-width: 1250px) { .site-header .header-mobile .header-top .top-logo .logo { padding-right: 19px; padding-left: 0; } } .site-header .header-mobile .header-top .top-logo .logo:after { content: ''; width: 8px; height: 18px; position: absolute; right: 0; top: -1px; background-image: url("../images/svg/slash-blue.svg"); background-size: contain; background-position: center; background-repeat: no-repeat; } .site-header .header-mobile .header-top .top-logo .logo img { max-width: 280px; } .site-header .header-mobile .header-top .top-logo strong { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 13px; line-height: 1.47; color: #fff; letter-spacing: 0.06em; text-transform: uppercase; padding-left: 8px; } .site-header .header-mobile .header-top .bottom-logo { position: relative; text-align: center; } .site-header .header-mobile .header-top .bottom-logo .logo-line { position: absolute; left: 0; right: 0; top: 7px; width: 100%; height: 6px; background-color: #6DC7FF; } .site-header .header-mobile .header-top .bottom-logo a { display: inline-block; } .site-header .header-mobile .header-top .bottom-logo a img { position: relative; display: block; width: 45px; } .site-header .header-mobile .header-top .open-menu { position: absolute; bottom: 18px; right: 20px; display: flex; align-items: center; text-decoration-color: transparent; -webkit-text-decoration-color: transparent; } .site-header .header-mobile .header-top .open-menu strong { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 15px; line-height: 1.1; color: #fff; letter-spacing: 0.08em; text-transform: uppercase; padding-right: 7px; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } .site-header .header-mobile .header-top .open-menu strong.closed { opacity: 1; } .site-header .header-mobile .header-top .open-menu strong.opened { position: absolute; top: 0; left: 0; opacity: 0; } .site-header .header-mobile .header-top .open-menu .hamburger { position: relative; top: -1px; width: 12px; height: 10px; display: flex; align-items: center; } .site-header .header-mobile .header-top .open-menu .hamburger div { position: absolute; left: 0; right: 0; width: 12px; height: 2px; background-color: #FA5C58; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } .site-header .header-mobile .header-top .open-menu .hamburger div:first-of-type { top: 0; } .site-header .header-mobile .header-top .open-menu .hamburger div:last-of-type { bottom: 0; } .site-header .header-mobile .era-banner { display: block; position: fixed; top: 111px; width: 100%; align-items: center; background-color: #6DC7FF; padding: 4px 36px; } @media (max-width: 1250px) { .site-header .header-mobile .era-banner { padding: 4px 24px; } } .site-header .header-mobile .era-banner strong { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 12px; line-height: 1.166; color: #fff; text-transform: uppercase; letter-spacing: 0.08em; } .site-header .header-mobile .mobile-nav { position: fixed; top: -100%; width: 100%; height: 100%; padding: 110px 35px 50px; background-color: #1E1E1E; overflow-y: scroll; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .site-header .header-mobile .mobile-nav::-webkit-scrollbar { display: none; } .site-header .header-mobile .mobile-nav .mobile-menu { list-style: none; padding-top: 45px; margin: 0; padding-left: 0px; } .site-header .header-mobile .mobile-nav .mobile-menu .updates-link { list-style: none; margin: 0 0 35px; padding: 0; } .site-header .header-mobile .mobile-nav .mobile-menu .updates-link > a { position: relative; font-family: alegreya, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 30px; line-height: 1.2; color: #fff; text-decoration-color: transparent; -webkit-text-decoration-color: transparent; display: flex; align-items: center; } .site-header .header-mobile .mobile-nav .mobile-menu .updates-link > a:visited { color: #fff; } .site-header .header-mobile .mobile-nav .mobile-menu .updates-link > a:focus { color: #fff; } .site-header .header-mobile .mobile-nav .mobile-menu .updates-link > a:hover { color: #fff; } .site-header .header-mobile .mobile-nav .mobile-menu .updates-link > a:active { color: #fff; } @media (max-width: 400px) { .site-header .header-mobile .mobile-nav .mobile-menu .updates-link > a { font-size: 24px; } } .site-header .header-mobile .mobile-nav .mobile-menu .updates-link > a:after { content: ''; position: absolute; right: 0; width: 18px; height: 17px; background-image: url("../images/svg/arrow-cta.svg"); background-size: contain; background-position: center; background-repeat: no-repeat; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } .site-header .header-mobile .mobile-nav .mobile-menu .updates-link > a:hover, .site-header .header-mobile .mobile-nav .mobile-menu .updates-link > a:focus { text-decoration-color: #6DC7FF; -webkit-text-decoration-color: #6DC7FF; } .site-header .header-mobile .mobile-nav .mobile-menu .updates-link > a:hover:after, .site-header .header-mobile .mobile-nav .mobile-menu .updates-link > a:focus:after { right: -5px; } .site-header .header-mobile .mobile-nav .mobile-menu .menu-item { margin: 0 0 35px; } .site-header .header-mobile .mobile-nav .mobile-menu .menu-item a { font-family: alegreya, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 30px; line-height: 1.2; font-style: normal; font-weight: 700; font-size: 30px; line-height: 1.2; color: #fff; text-decoration-color: transparent; -webkit-text-decoration-color: transparent; } .site-header .header-mobile .mobile-nav .mobile-menu .menu-item a:hover { text-decoration-color: #6dc7ff; } .site-header .header-mobile .mobile-nav .mobile-menu .top-level-link, .site-header .header-mobile .mobile-nav .mobile-menu .menu-item-has-children { list-style: none; margin: 0 0 35px; padding: 0; position: relative; } .site-header .header-mobile .mobile-nav .mobile-menu .top-level-link:before, .site-header .header-mobile .mobile-nav .mobile-menu .menu-item-has-children:before { content: ''; position: absolute; right: 0; width: 20px; height: 2px; background-color: #FA5C58; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); top: 18px; } .site-header .header-mobile .mobile-nav .mobile-menu .top-level-link:after, .site-header .header-mobile .mobile-nav .mobile-menu .menu-item-has-children:after { content: ''; position: absolute; right: 0; width: 20px; height: 2px; background-color: #FA5C58; transform: rotate(90deg); transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); top: 18px; } .site-header .header-mobile .mobile-nav .mobile-menu .top-level-link.active:after, .site-header .header-mobile .mobile-nav .mobile-menu .menu-item-has-children.active:after { transform: rotate(0deg); } .site-header .header-mobile .mobile-nav .mobile-menu .top-level-link.active .sub-menu, .site-header .header-mobile .mobile-nav .mobile-menu .top-level-link.active .downloads-menu, .site-header .header-mobile .mobile-nav .mobile-menu .menu-item-has-children.active .sub-menu, .site-header .header-mobile .mobile-nav .mobile-menu .menu-item-has-children.active .downloads-menu { pointer-events: all; max-height: 1000px; opacity: 1; padding: 25px 0 0; } .site-header .header-mobile .mobile-nav .mobile-menu .top-level-link > a, .site-header .header-mobile .mobile-nav .mobile-menu .menu-item-has-children > a { max-width: 90%; font-family: alegreya, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 30px; line-height: 1.2; color: #fff; text-decoration-color: transparent; -webkit-text-decoration-color: transparent; display: flex; align-items: center; } .site-header .header-mobile .mobile-nav .mobile-menu .top-level-link > a:visited, .site-header .header-mobile .mobile-nav .mobile-menu .menu-item-has-children > a:visited { color: #fff; } .site-header .header-mobile .mobile-nav .mobile-menu .top-level-link > a:focus, .site-header .header-mobile .mobile-nav .mobile-menu .menu-item-has-children > a:focus { color: #fff; } .site-header .header-mobile .mobile-nav .mobile-menu .top-level-link > a:hover, .site-header .header-mobile .mobile-nav .mobile-menu .menu-item-has-children > a:hover { color: #fff; } .site-header .header-mobile .mobile-nav .mobile-menu .top-level-link > a:active, .site-header .header-mobile .mobile-nav .mobile-menu .menu-item-has-children > a:active { color: #fff; } @media (max-width: 400px) { .site-header .header-mobile .mobile-nav .mobile-menu .top-level-link > a, .site-header .header-mobile .mobile-nav .mobile-menu .menu-item-has-children > a { font-size: 24px; } } .site-header .header-mobile .mobile-nav .mobile-menu .top-level-link > a:hover, .site-header .header-mobile .mobile-nav .mobile-menu .top-level-link > a:focus, .site-header .header-mobile .mobile-nav .mobile-menu .menu-item-has-children > a:hover, .site-header .header-mobile .mobile-nav .mobile-menu .menu-item-has-children > a:focus { text-decoration-color: #6DC7FF; -webkit-text-decoration-color: #6DC7FF; } .site-header .header-mobile .mobile-nav .mobile-menu .top-level-link > a:hover:before, .site-header .header-mobile .mobile-nav .mobile-menu .top-level-link > a:hover:after, .site-header .header-mobile .mobile-nav .mobile-menu .top-level-link > a:focus:before, .site-header .header-mobile .mobile-nav .mobile-menu .top-level-link > a:focus:after, .site-header .header-mobile .mobile-nav .mobile-menu .menu-item-has-children > a:hover:before, .site-header .header-mobile .mobile-nav .mobile-menu .menu-item-has-children > a:hover:after, .site-header .header-mobile .mobile-nav .mobile-menu .menu-item-has-children > a:focus:before, .site-header .header-mobile .mobile-nav .mobile-menu .menu-item-has-children > a:focus:after { background-color: #6DC7FF; } .site-header .header-mobile .mobile-nav .mobile-menu .top-level-link .sub-menu, .site-header .header-mobile .mobile-nav .mobile-menu .menu-item-has-children .sub-menu { pointer-events: none; max-height: 0; opacity: 0; list-style: none; margin: 0; padding: 0; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } .site-header .header-mobile .mobile-nav .mobile-menu .top-level-link .sub-menu .menu-item, .site-header .header-mobile .mobile-nav .mobile-menu .menu-item-has-children .sub-menu .menu-item { margin: 0 0 15px; } .site-header .header-mobile .mobile-nav .mobile-menu .top-level-link .sub-menu .menu-item a, .site-header .header-mobile .mobile-nav .mobile-menu .menu-item-has-children .sub-menu .menu-item a { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 15px; line-height: 1.2; color: #fff; text-decoration-color: transparent; -webkit-text-decoration-color: transparent; } .site-header .header-mobile .mobile-nav .mobile-menu .top-level-link .sub-menu .menu-item a:visited, .site-header .header-mobile .mobile-nav .mobile-menu .menu-item-has-children .sub-menu .menu-item a:visited { color: #fff; } .site-header .header-mobile .mobile-nav .mobile-menu .top-level-link .sub-menu .menu-item a:focus, .site-header .header-mobile .mobile-nav .mobile-menu .menu-item-has-children .sub-menu .menu-item a:focus { color: #fff; } .site-header .header-mobile .mobile-nav .mobile-menu .top-level-link .sub-menu .menu-item a:hover, .site-header .header-mobile .mobile-nav .mobile-menu .menu-item-has-children .sub-menu .menu-item a:hover { color: #fff; } .site-header .header-mobile .mobile-nav .mobile-menu .top-level-link .sub-menu .menu-item a:active, .site-header .header-mobile .mobile-nav .mobile-menu .menu-item-has-children .sub-menu .menu-item a:active { color: #fff; } .site-header .header-mobile .mobile-nav .mobile-menu .top-level-link .sub-menu .menu-item a:hover, .site-header .header-mobile .mobile-nav .mobile-menu .top-level-link .sub-menu .menu-item a:focus, .site-header .header-mobile .mobile-nav .mobile-menu .menu-item-has-children .sub-menu .menu-item a:hover, .site-header .header-mobile .mobile-nav .mobile-menu .menu-item-has-children .sub-menu .menu-item a:focus { text-decoration-color: #fff; -webkit-text-decoration-color: #fff; } .site-header .header-mobile .mobile-nav .mobile-menu .top-level-link .downloads-menu, .site-header .header-mobile .mobile-nav .mobile-menu .menu-item-has-children .downloads-menu { pointer-events: none; opacity: 0; max-height: 0; padding: 0; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } .site-header .header-mobile .mobile-nav .mobile-menu .top-level-link .downloads-menu strong, .site-header .header-mobile .mobile-nav .mobile-menu .menu-item-has-children .downloads-menu strong { display: block; font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 15px; line-height: 1.2; color: #fff; letter-spacing: 0.03em; text-transform: uppercase; margin-bottom: 15px; } .site-header .header-mobile .mobile-nav .mobile-menu .top-level-link .downloads-menu .most-downloaded, .site-header .header-mobile .mobile-nav .mobile-menu .top-level-link .downloads-menu .period-overviews, .site-header .header-mobile .mobile-nav .mobile-menu .menu-item-has-children .downloads-menu .most-downloaded, .site-header .header-mobile .mobile-nav .mobile-menu .menu-item-has-children .downloads-menu .period-overviews { list-style: none; margin: 0; padding: 0 15px 15px; } .site-header .header-mobile .mobile-nav .mobile-menu .top-level-link .downloads-menu .most-downloaded .menu-item, .site-header .header-mobile .mobile-nav .mobile-menu .top-level-link .downloads-menu .period-overviews .menu-item, .site-header .header-mobile .mobile-nav .mobile-menu .menu-item-has-children .downloads-menu .most-downloaded .menu-item, .site-header .header-mobile .mobile-nav .mobile-menu .menu-item-has-children .downloads-menu .period-overviews .menu-item { margin: 0 0 15px; } .site-header .header-mobile .mobile-nav .mobile-menu .top-level-link .downloads-menu .most-downloaded .menu-item a, .site-header .header-mobile .mobile-nav .mobile-menu .top-level-link .downloads-menu .period-overviews .menu-item a, .site-header .header-mobile .mobile-nav .mobile-menu .menu-item-has-children .downloads-menu .most-downloaded .menu-item a, .site-header .header-mobile .mobile-nav .mobile-menu .menu-item-has-children .downloads-menu .period-overviews .menu-item a { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 15px; line-height: 1.2; color: #fff; text-decoration-color: transparent; -webkit-text-decoration-color: transparent; } .site-header .header-mobile .mobile-nav .mobile-menu .top-level-link .downloads-menu .most-downloaded .menu-item a:visited, .site-header .header-mobile .mobile-nav .mobile-menu .top-level-link .downloads-menu .period-overviews .menu-item a:visited, .site-header .header-mobile .mobile-nav .mobile-menu .menu-item-has-children .downloads-menu .most-downloaded .menu-item a:visited, .site-header .header-mobile .mobile-nav .mobile-menu .menu-item-has-children .downloads-menu .period-overviews .menu-item a:visited { color: #fff; } .site-header .header-mobile .mobile-nav .mobile-menu .top-level-link .downloads-menu .most-downloaded .menu-item a:focus, .site-header .header-mobile .mobile-nav .mobile-menu .top-level-link .downloads-menu .period-overviews .menu-item a:focus, .site-header .header-mobile .mobile-nav .mobile-menu .menu-item-has-children .downloads-menu .most-downloaded .menu-item a:focus, .site-header .header-mobile .mobile-nav .mobile-menu .menu-item-has-children .downloads-menu .period-overviews .menu-item a:focus { color: #fff; } .site-header .header-mobile .mobile-nav .mobile-menu .top-level-link .downloads-menu .most-downloaded .menu-item a:hover, .site-header .header-mobile .mobile-nav .mobile-menu .top-level-link .downloads-menu .period-overviews .menu-item a:hover, .site-header .header-mobile .mobile-nav .mobile-menu .menu-item-has-children .downloads-menu .most-downloaded .menu-item a:hover, .site-header .header-mobile .mobile-nav .mobile-menu .menu-item-has-children .downloads-menu .period-overviews .menu-item a:hover { color: #fff; } .site-header .header-mobile .mobile-nav .mobile-menu .top-level-link .downloads-menu .most-downloaded .menu-item a:active, .site-header .header-mobile .mobile-nav .mobile-menu .top-level-link .downloads-menu .period-overviews .menu-item a:active, .site-header .header-mobile .mobile-nav .mobile-menu .menu-item-has-children .downloads-menu .most-downloaded .menu-item a:active, .site-header .header-mobile .mobile-nav .mobile-menu .menu-item-has-children .downloads-menu .period-overviews .menu-item a:active { color: #fff; } .site-header .header-mobile .mobile-nav .mobile-menu .top-level-link .downloads-menu .most-downloaded .menu-item a:hover, .site-header .header-mobile .mobile-nav .mobile-menu .top-level-link .downloads-menu .most-downloaded .menu-item a:focus, .site-header .header-mobile .mobile-nav .mobile-menu .top-level-link .downloads-menu .period-overviews .menu-item a:hover, .site-header .header-mobile .mobile-nav .mobile-menu .top-level-link .downloads-menu .period-overviews .menu-item a:focus, .site-header .header-mobile .mobile-nav .mobile-menu .menu-item-has-children .downloads-menu .most-downloaded .menu-item a:hover, .site-header .header-mobile .mobile-nav .mobile-menu .menu-item-has-children .downloads-menu .most-downloaded .menu-item a:focus, .site-header .header-mobile .mobile-nav .mobile-menu .menu-item-has-children .downloads-menu .period-overviews .menu-item a:hover, .site-header .header-mobile .mobile-nav .mobile-menu .menu-item-has-children .downloads-menu .period-overviews .menu-item a:focus { text-decoration-color: #fff; -webkit-text-decoration-color: #fff; } .site-header .header-mobile .mobile-nav .mobile-menu .top-level-link .downloads-menu .period-overviews, .site-header .header-mobile .mobile-nav .mobile-menu .menu-item-has-children .downloads-menu .period-overviews { padding-bottom: 0; } .site-header .header-mobile .mobile-nav .mobile-search-wrapper { width: 100%; padding-top: 10px; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } .site-header .header-mobile .mobile-nav .mobile-search-wrapper .mobile-search-form .searchform-wrapper { display: flex; justify-content: space-between; position: relative; } .site-header .header-mobile .mobile-nav .mobile-search-wrapper .mobile-search-form .searchform-wrapper.search-open .searchform-submit { pointer-events: all; } .site-header .header-mobile .mobile-nav .mobile-search-wrapper .mobile-search-form .searchform-wrapper .searchform-input { margin: 0; width: 100%; background: none; border: 1px #fff solid; font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 14px; line-height: 1.2; color: #fff; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); padding: 10px 18px; } .site-header .header-mobile .mobile-nav .mobile-search-wrapper .mobile-search-form .searchform-wrapper .searchform-input::-moz-placeholder { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 14px; line-height: 1.2; color: #fff; } .site-header .header-mobile .mobile-nav .mobile-search-wrapper .mobile-search-form .searchform-wrapper .searchform-input::placeholder { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 14px; line-height: 1.2; color: #fff; } .site-header .header-mobile .mobile-nav .mobile-search-wrapper .mobile-search-form .searchform-wrapper .searchform-submit { cursor: pointer; font-size: 0; line-height: 0; border: none; pointer-events: none; flex: 0 0 40px; margin-left: 16px; width: 40px; height: 40px; border-radius: 50%; background-color: #FA5C58; background-image: url("../images/svg/arrow-cta.svg"); background-size: 18px; background-position: center; background-repeat: no-repeat; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } .site-header .header-mobile .mobile-nav .mobile-search-wrapper .mobile-search-form .searchform-wrapper .searchform-submit:hover, .site-header .header-mobile .mobile-nav .mobile-search-wrapper .mobile-search-form .searchform-wrapper .searchform-submit:focus { background-color: #6DC7FF; } .site-header .header-mobile.menu-open .open-menu strong.closed { opacity: 0; } .site-header .header-mobile.menu-open .open-menu strong.opened { opacity: 1; } .site-header .header-mobile.menu-open .open-menu .hamburger div:first-of-type, .site-header .header-mobile.menu-open .open-menu .hamburger div:last-of-type { opacity: 0; } .site-header .header-mobile.menu-open .open-menu .hamburger div:nth-of-type(2) { transform: rotate(-45deg); } .site-header .header-mobile.menu-open .open-menu .hamburger div:nth-of-type(3) { transform: rotate(45deg); } .site-header .header-mobile.menu-open .mobile-nav { top: 0; } .page-template-listing-page .site-header .header-desktop .header-top .top-line .line, .home .site-header .header-desktop .header-top .top-line .line, .search .site-header .header-desktop .header-top .top-line .line, .error404 .site-header .header-desktop .header-top .top-line .line, .page-template-glossary-page .site-header .header-desktop .header-top .top-line .line { background-color: #6DC7FF; } .page-template-listing-page .site-header .header-desktop .header-top .top-line .arrow-link, .home .site-header .header-desktop .header-top .top-line .arrow-link, .search .site-header .header-desktop .header-top .top-line .arrow-link, .error404 .site-header .header-desktop .header-top .top-line .arrow-link, .page-template-glossary-page .site-header .header-desktop .header-top .top-line .arrow-link { color: #fff; } .page-template-listing-page .site-header .header-desktop .header-top .top-line .arrow-link:visited, .home .site-header .header-desktop .header-top .top-line .arrow-link:visited, .search .site-header .header-desktop .header-top .top-line .arrow-link:visited, .error404 .site-header .header-desktop .header-top .top-line .arrow-link:visited, .page-template-glossary-page .site-header .header-desktop .header-top .top-line .arrow-link:visited { color: #fff; } .page-template-listing-page .site-header .header-desktop .header-top .top-line .arrow-link:focus, .home .site-header .header-desktop .header-top .top-line .arrow-link:focus, .search .site-header .header-desktop .header-top .top-line .arrow-link:focus, .error404 .site-header .header-desktop .header-top .top-line .arrow-link:focus, .page-template-glossary-page .site-header .header-desktop .header-top .top-line .arrow-link:focus { color: #fff; } .page-template-listing-page .site-header .header-desktop .header-top .top-line .arrow-link:hover, .home .site-header .header-desktop .header-top .top-line .arrow-link:hover, .search .site-header .header-desktop .header-top .top-line .arrow-link:hover, .error404 .site-header .header-desktop .header-top .top-line .arrow-link:hover, .page-template-glossary-page .site-header .header-desktop .header-top .top-line .arrow-link:hover { color: #fff; } .page-template-listing-page .site-header .header-desktop .header-top .top-line .arrow-link:active, .home .site-header .header-desktop .header-top .top-line .arrow-link:active, .search .site-header .header-desktop .header-top .top-line .arrow-link:active, .error404 .site-header .header-desktop .header-top .top-line .arrow-link:active, .page-template-glossary-page .site-header .header-desktop .header-top .top-line .arrow-link:active { color: #fff; } .page-template-listing-page .site-header .header-desktop .header-top .top-line .arrow-link:hover, .page-template-listing-page .site-header .header-desktop .header-top .top-line .arrow-link:focus, .home .site-header .header-desktop .header-top .top-line .arrow-link:hover, .home .site-header .header-desktop .header-top .top-line .arrow-link:focus, .search .site-header .header-desktop .header-top .top-line .arrow-link:hover, .search .site-header .header-desktop .header-top .top-line .arrow-link:focus, .error404 .site-header .header-desktop .header-top .top-line .arrow-link:hover, .error404 .site-header .header-desktop .header-top .top-line .arrow-link:focus, .page-template-glossary-page .site-header .header-desktop .header-top .top-line .arrow-link:hover, .page-template-glossary-page .site-header .header-desktop .header-top .top-line .arrow-link:focus { text-decoration-color: #6DC7FF; -webkit-text-decoration-color: #6DC7FF; } .page-template-listing-page .site-header .header-desktop .header-top .top-line .arrow-link:hover svg path, .page-template-listing-page .site-header .header-desktop .header-top .top-line .arrow-link:focus svg path, .home .site-header .header-desktop .header-top .top-line .arrow-link:hover svg path, .home .site-header .header-desktop .header-top .top-line .arrow-link:focus svg path, .search .site-header .header-desktop .header-top .top-line .arrow-link:hover svg path, .search .site-header .header-desktop .header-top .top-line .arrow-link:focus svg path, .error404 .site-header .header-desktop .header-top .top-line .arrow-link:hover svg path, .error404 .site-header .header-desktop .header-top .top-line .arrow-link:focus svg path, .page-template-glossary-page .site-header .header-desktop .header-top .top-line .arrow-link:hover svg path, .page-template-glossary-page .site-header .header-desktop .header-top .top-line .arrow-link:focus svg path { fill: #6DC7FF; } .page-template-article-detail .site-header .header-desktop .header-top .top-line .line, .single-article .site-header .header-desktop .header-top .top-line .line { background-color: #6DC7FF; } .page-template-article-detail .site-header .header-desktop .header-top .top-line .arrow-link, .single-article .site-header .header-desktop .header-top .top-line .arrow-link { background-color: #fff; } .single-eras, .single-article { padding-bottom: 45px; } .page-template-era-detail .site-header .header-desktop .header-top .top-logo .era-flag, .single-eras .site-header .header-desktop .header-top .top-logo .era-flag { display: flex; background-color: #6DC7FF; } .page-template-era-detail .site-header .header-desktop .header-top .top-line .line, .page-template-era-detail .site-header .header-mobile .header-top .bottom-logo .logo-line, .single-eras .site-header .header-desktop .header-top .top-line .line, .single-eras .site-header .header-mobile .header-top .bottom-logo .logo-line { background-color: #6DC7FF; } .page-template-era-detail .site-header .header-desktop .header-top .top-line .arrow-link, .single-eras .site-header .header-desktop .header-top .top-line .arrow-link { color: #fff; } .page-template-era-detail .site-header .header-desktop .header-top .top-line .arrow-link:visited, .single-eras .site-header .header-desktop .header-top .top-line .arrow-link:visited { color: #fff; } .page-template-era-detail .site-header .header-desktop .header-top .top-line .arrow-link:focus, .single-eras .site-header .header-desktop .header-top .top-line .arrow-link:focus { color: #fff; } .page-template-era-detail .site-header .header-desktop .header-top .top-line .arrow-link:hover, .single-eras .site-header .header-desktop .header-top .top-line .arrow-link:hover { color: #fff; } .page-template-era-detail .site-header .header-desktop .header-top .top-line .arrow-link:active, .single-eras .site-header .header-desktop .header-top .top-line .arrow-link:active { color: #fff; } .page-template-era-detail .site-header .header-desktop .header-top .top-line .arrow-link:hover, .page-template-era-detail .site-header .header-desktop .header-top .top-line .arrow-link:focus, .single-eras .site-header .header-desktop .header-top .top-line .arrow-link:hover, .single-eras .site-header .header-desktop .header-top .top-line .arrow-link:focus { text-decoration-color: #6DC7FF; -webkit-text-decoration-color: #6DC7FF; } .page-template-era-detail .site-header .header-desktop .header-top .top-line .arrow-link:hover svg path, .page-template-era-detail .site-header .header-desktop .header-top .top-line .arrow-link:focus svg path, .single-eras .site-header .header-desktop .header-top .top-line .arrow-link:hover svg path, .single-eras .site-header .header-desktop .header-top .top-line .arrow-link:focus svg path { fill: #6DC7FF; } .page-template-era-detail .site-header .header-desktop .era-banner, .page-template-era-detail .site-header .header-mobile .era-banner, .single-eras .site-header .header-desktop .era-banner, .single-eras .site-header .header-mobile .era-banner { display: block; } /* 2025 Civics Education Header Styles */ .header-home { background: transparent; } .header-home a, .header-home a:visited, .header-home a:hover, .header-home a:focus { color: white; } .header-home .sub-menu a, .header-home .sub-menu a:visited, .header-home .sub-menu a:hover, .header-home .sub-menu a:focus { color: #000; } .header-inner { background: white; color: #1F1F1F; } .header-inner .sub-menu { background-color: white; } @media (max-width: 1130px) { .header-inner .sub-menu { background-color: #1F1F1F; max-width: 100%; width: 100%; } } .header-inner .social svg path { fill: black; } .header-home, .header-inner { width: 100%; position: absolute; top: 0; left: 0; z-index: 1000; } .header-home .header-nav, .header-inner .header-nav { display: flex; justify-content: space-between; align-items: center; padding: 30px 45px 16px 30px; } .header-home .header-left, .header-inner .header-left { padding-bottom: 5px; display: flex; align-items: center; gap: 25px; flex-shrink: 0; text-decoration-color: transparent; } .header-home .header-logo, .header-inner .header-logo { height: 51px; width: 277px; } .header-home .header-divider, .header-inner .header-divider { width: 2px; height: 40px; background: #6dc7ff; } .header-home .header-title, .header-inner .header-title { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 23px; text-transform: uppercase; line-height: 1; text-decoration-color: transparent; } .header-home .header-right, .header-inner .header-right { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 10px; } .header-home .header-right .nav_flex, .header-inner .header-right .nav_flex { display: flex; gap: 25px; } .header-home .header-right .nav_flex .header-search-wrapper, .header-inner .header-right .nav_flex .header-search-wrapper { padding-top: 3px; } .header-home .header-right .nav_flex .searchform-input, .header-inner .header-right .nav_flex .searchform-input { padding: 0; margin: 0; width: 20px; background: none; border: none; font-family: "niveau-grotesk", Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 15px; line-height: 1.2; color: #fff; transition: all 0.3s ease-out; border-bottom: 1px transparent solid; background-image: url("../images/svg/search.svg"); background-size: contain; background-position: center; background-repeat: no-repeat; } .header-home .header-right .nav_flex .searchform-input::-moz-placeholder, .header-inner .header-right .nav_flex .searchform-input::-moz-placeholder { color: transparent; } .header-home .header-right .nav_flex .searchform-input::placeholder, .header-inner .header-right .nav_flex .searchform-input::placeholder { color: transparent; } .header-home .header-right .nav_flex .searchform-input:focus, .header-inner .header-right .nav_flex .searchform-input:focus { width: 150px; background-position-x: right; } .header-home .header-right .nav_flex .searchform-input:focus::-moz-placeholder, .header-inner .header-right .nav_flex .searchform-input:focus::-moz-placeholder { color: #fff; opacity: 0.5; } .header-home .header-right .nav_flex .searchform-input:focus::placeholder, .header-inner .header-right .nav_flex .searchform-input:focus::placeholder { color: #fff; opacity: 0.5; } .header-home .header-utility, .header-inner .header-utility { display: flex; gap: 25px; align-items: center; list-style: none; margin: 0; padding: 0; } .header-home .header-utility a, .header-inner .header-utility a { text-decoration-color: transparent; font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: 0.28px; text-transform: capitalize; } .header-home .header-utility a:hover, .header-home .header-utility a:focus, .header-inner .header-utility a:hover, .header-inner .header-utility a:focus { text-decoration-color: inherit; } .header-home .header-link, .header-inner .header-link { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 14px; text-transform: capitalize; letter-spacing: 0.28px; text-decoration-color: transparent; transition: text-decoration-color 300ms cubic-bezier(0.755, 0.116, 0.25, 0.757); } .header-home .header-link:hover, .header-home .header-link:focus, .header-inner .header-link:hover, .header-inner .header-link:focus { text-decoration-color: #FA5C58; } .header-home .header-social, .header-inner .header-social { height: 15px; width: 60px; } .header-home .header-mainnav, .header-inner .header-mainnav { display: flex; gap: 25px; align-items: flex-start; margin: 0px; padding: 0px; } .header-home .header-mainnav ul, .header-inner .header-mainnav ul { list-style: none; margin: 0; padding: 0; } .header-home .menu-item-has-children, .header-inner .menu-item-has-children { background-image: url("../images/svg/dropdown.svg"); padding-bottom: 20px; background-position: center 70%; background-repeat: no-repeat; } .header-home .header-mainnav-item, .header-home .header-mainnav li, .header-inner .header-mainnav-item, .header-inner .header-mainnav li { display: flex; flex-direction: column; gap: 9px; align-items: center; position: relative; } .header-home .header-mainnav-item a, .header-home .header-mainnav a, .header-inner .header-mainnav-item a, .header-inner .header-mainnav a { font-family: 'Alegreya', serif; font-size: 20px; text-transform: capitalize; font-weight: bold; letter-spacing: 0.4px; text-decoration-color: transparent; transition: text-decoration-color 300ms cubic-bezier(0.755, 0.116, 0.25, 0.757); } .header-home .header-mainnav a:hover, .header-home .header-mainnav a:focus, .header-inner .header-mainnav a:hover, .header-inner .header-mainnav a:focus { text-decoration-color: #FA5C58; } .header-home .header-arrow, .header-inner .header-arrow { height: 14px; width: 8.5px; transform: rotate(90deg); margin-top: 2px; } .header-home .header-mainnav-icon, .header-inner .header-mainnav-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; } .header-inner #searchform input { color: #1E1E1E; } .burger-menu { display: none; } .menu-item-has-children:hover .sub-menu, .menu-item-has-children:focus-within .sub-menu { max-height: 50vh; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); } .header-mainnav ul.sub-menu { padding-top: 10px; position: absolute; top: 100%; left: 50%; max-height: 0vh; transition: all 300ms cubic-bezier(0.755, 0.116, 0.25, 0.757); overflow: hidden; width: 226px; max-width: 25vw; color: #000; background-color: #F1F1F1; box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.35); display: flex; text-align: left; padding: 0; margin: 0; flex-direction: column; transform: translate(-50%); gap: 15px; } .header-mainnav ul.sub-menu li:first-child a { padding-top: 20px; } .header-mainnav ul.sub-menu li:last-child a { padding-bottom: 20px; } .header-mainnav ul.sub-menu a { padding-left: 20px; padding-right: 20px; width: 100%; color: #000; font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 15px; font-style: normal; font-weight: 700; line-height: 120%; /* 18px */ } .mobile-menu .menu-item { background-image: url("../images/svg/arrow-cta.svg"); background-size: 18px; background-position-x: right; background-position-y: center; background-repeat: no-repeat; } .site-header .header-mobile .mobile-nav .mobile-menu .menu-item a { font-size: 24px; } .mobile-menu .menu-item-has-children { background-image: none; } .mobile-menu .sub-menu { position: relative; max-height: 0vh; } .mobile-menu .sub-menu .menu-item { background: transparent; } .active .sub-menu { max-height: 100vh; } @media (max-width: 1130px) { .site-header .header-mobile { display: block; } .header-home .header-utility, .header-home .header-mainnav, .header-home .header-left, .header-home .header-right, .header-inner .header-left, .header-inner .header-right { display: none; } .burger-menu { display: flex; flex-direction: column; gap: 5px; cursor: pointer; } .header-home .burger-bar { width: 25px; height: 3px; background: #fff; } .header-mainnav .burger-bar { width: 25px; height: 3px; background: #000; } } .social-flex { display: flex; justify-content: center; gap: 8px; align-items: center; } .social-flex a { line-height: 0px; } .logged-in.admin-bar .header-home, .logged-in.admin-bar .header-inner { top: 32px; } .breadcrumb-item a { text-decoration-color: #1F1F1F; } .breadcrumb-item a:hover { text-decoration-color: #FA5C58; } .footer { padding: 13px 30px; background: #1F1F1F; color: #fff; position: relative; z-index: 1; } .footer .footer-container { display: flex; width: 100%; justify-content: space-between; align-items: center; } .footer .footer-container .footer-navigation { display: flex; gap: 20px; } .footer .footer-container a { color: #FFF; font-family: "Alegreya", serif; font-size: 14px; font-style: normal; font-weight: 400; line-height: 24px; transition: all 250ms cubic-bezier(0.755, 0.116, 0.25, 0.757); color: #fff; text-decoration-color: transparent; } .footer .footer-container a:hover { text-decoration-color: white; } @media (max-width: 1000px) { .footer .footer-navigation { flex-direction: column; text-align: center; } } @media (max-width: 640px) { .footer .footer-container { flex-direction: column; gap: 10px; } .footer .footer-navigation { gap: 0px !important; } .footer .footer-navigation a:first-child { margin-bottom: 15px; } } @media (max-width: 640px) { .footer { padding-top: 25px; padding-bottom: 25px; } } .listing-template { position: relative; display: grid; grid-template-columns: repeat(14, 1fr); padding: 115px 0; background-color: #1E1E1E; } @media (max-width: 1024px) { .listing-template { padding: 80px 0; } } @media (max-width: 768px) { .listing-template { padding: 60px 0; } } .listing-template .glossaryLink { background-color: rgba(255, 255, 255, 0.15); } .listing-template span.glossaryLink { border-bottom: dotted 1px #ffffff; color: #ffffff !important; } .listing-template .marble-background { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("../images/2x/marble_blue-black_full.jpg"); } .listing-template .listing-container { position: relative; grid-column-start: 4; grid-column-end: 15; display: grid; grid-template-columns: repeat(11, 1fr); } @media (max-width: 1250px) { .listing-template .listing-container { grid-column-start: 3; grid-template-columns: repeat(12, 1fr); } } @media (max-width: 768px) { .listing-template .listing-container { grid-column-start: 2; grid-template-columns: repeat(13, 1fr); } } .listing-template .listing-container .title-area { grid-column-start: 1; grid-column-end: 9; margin-top: 80px; margin-bottom: 50px; display: flex; align-items: flex-end; } @media (max-width: 1250px) { .listing-template .listing-container .title-area { grid-column-end: 10; } } @media (max-width: 1024px) { .listing-template .listing-container .title-area { margin-top: 0; margin-bottom: 40px; } } @media (max-width: 768px) { .listing-template .listing-container .title-area { grid-column-end: 11; margin-bottom: 30px; display: block; } } .listing-template .listing-container .title-area h1 { display: inline-block; margin: 0 0 15px; color: #fff; padding-right: 18px; } .listing-template .listing-container .title-area em { display: inline-block; font-family: alegreya, Helvetica, Arial, sans-serif; font-style: italic; font-weight: 500; font-size: 26px; line-height: 1.154; color: #BEBEBE; margin: 0 0 15px; } @media (max-width: 1024px) { .listing-template .listing-container .title-area em { font-size: 22px; } } @media (max-width: 768px) { .listing-template .listing-container .title-area em { font-size: 18px; margin: 0 0 18px; display: block; } } .listing-template .listing-container .listing { list-style: none; margin: 0; grid-column-start: 1; grid-column-end: 12; } @media (max-width: 1250px) { .listing-template .listing-container .listing { grid-column-end: 13; } } @media (max-width: 768px) { .listing-template .listing-container .listing { grid-column-end: 14; } } .listing-template .listing-container .listing .listing-item { border-top: 1px rgba(163, 163, 163, 0.26) solid; display: grid; grid-template-columns: repeat(11, 1fr); padding: 20px 0 40px; } .listing-template .listing-container .listing .listing-item .item-container { position: relative; display: block; text-decoration: none; grid-column-start: 1; grid-column-end: 9; } @media (max-width: 1250px) { .listing-template .listing-container .listing .listing-item .item-container { grid-column-end: 10; } } @media (max-width: 768px) { .listing-template .listing-container .listing .listing-item .item-container { grid-column-end: 11; } } .listing-template .listing-container .listing .listing-item .item-container.download:before { content: ''; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: #FA5C58; background-image: url("../images/svg/arrow-listing-download.svg"); background-size: 14px; background-position: center; background-repeat: no-repeat; position: absolute; top: 2px; left: -46px; } @media (max-width: 768px) { .listing-template .listing-container .listing .listing-item .item-container.download:before { position: relative; top: auto; left: auto; width: 25px; height: 25px; background-size: 10px; margin-bottom: 10px; } } .listing-template .listing-container .listing .listing-item .item-container.video:before { content: ''; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: #FA5C58; background-image: url("../images/svg/play-button.svg"); background-size: 9px; background-position: center; background-repeat: no-repeat; position: absolute; top: 2px; left: -46px; } @media (max-width: 768px) { .listing-template .listing-container .listing .listing-item .item-container.video:before { position: relative; top: auto; left: auto; width: 25px; height: 25px; background-size: 7px; margin-bottom: 10px; } } .listing-template .listing-container .listing .listing-item .item-container:hover h2, .listing-template .listing-container .listing .listing-item .item-container:focus h2 { color: #FA5C58; } .listing-template .listing-container .listing .listing-item .item-container h2 { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 30px; line-height: 1.133; color: #fff; margin: 0 0 5px; text-decoration: underline; text-decoration-color: #FA5C58; -webkit-text-decoration-color: #FA5C58; text-decoration-thickness: from-font; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } @media (max-width: 1024px) { .listing-template .listing-container .listing .listing-item .item-container h2 { font-size: 26px; } } @media (max-width: 768px) { .listing-template .listing-container .listing .listing-item .item-container h2 { font-size: 22px; } } .listing-template .listing-container .listing .listing-item .item-container em { display: block; font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 14px; line-height: 1.2; color: #797979; margin: 0 0 25px; } .listing-template .listing-container .listing .listing-item .item-container p { color: #fff; } .listing-template .listing-container .pagination { margin-top: 20px; grid-column-start: 1; grid-column-end: 9; display: flex; align-items: center; justify-content: center; } @media (max-width: 1250px) { .listing-template .listing-container .pagination { grid-column-end: 11; } } @media (max-width: 768px) { .listing-template .listing-container .pagination { grid-column-end: 13; } } .listing-template .listing-container .pagination .page-numbers { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 18px; line-height: 1.333; color: #FA5C58; margin: 0 12px; } .listing-template .listing-container .pagination .page-numbers:visited { color: #FA5C58; } .listing-template .listing-container .pagination .page-numbers:focus { color: #FA5C58; } .listing-template .listing-container .pagination .page-numbers:hover { color: #A3A3A3; } .listing-template .listing-container .pagination .page-numbers:active { color: #FA5C58; } .listing-template .listing-container .pagination .page-numbers:hover svg path, .listing-template .listing-container .pagination .page-numbers:focus svg path { fill: #A3A3A3; } .listing-template .listing-container .pagination .page-numbers.disabled { pointer-events: none; } .listing-template .listing-container .pagination .page-numbers.disabled svg path { fill: #A3A3A3; } .listing-template .listing-container .pagination .page-numbers svg { margin: 0 12px; width: 23px; } .listing-template .listing-container .pagination .page-numbers svg path { fill: #FA5C58; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } .listing-template .listing-container .pagination span.page-numbers { color: #A3A3A3; } .page-template-glossary-page .listing-template .listing-container .listing .listing-item .item-container:hover h2, .page-template-glossary-page .listing-template .listing-container .listing .listing-item .item-container:focus h2 { color: #fff; } .page-template-glossary-page .listing-template .listing-container .listing .listing-item .item-container h2 { text-decoration: none; text-decoration-color: transparent; -webkit-text-decoration-color: transparent; text-decoration-thickness: auto; } .page-template-glossary-page .listing-template .listing-container .listing .listing-item .item-container a { color: #fff; } .page-template-glossary-page .listing-template .listing-container .listing .listing-item .item-container a:visited { color: #fff; } .page-template-glossary-page .listing-template .listing-container .listing .listing-item .item-container a:focus { color: #fff; } .page-template-glossary-page .listing-template .listing-container .listing .listing-item .item-container a:hover { color: #fff; } .page-template-glossary-page .listing-template .listing-container .listing .listing-item .item-container a:active { color: #fff; } .article-feature { padding-left: 92px; padding-right: 92px; padding-top: 153px; padding-bottom: 70px; background: #fff; position: relative; } .article-feature .header_bar { position: absolute; /*background:#6DC7FF;*/ background: var(--era-color); width: 100%; height: 14px; left: 0px; top: 124px; z-index: 1; } @media (max-width: 1130px) { .article-feature .header_bar { top: 0px; } } .article-feature.blue_header { position: relative; padding-top: 150px; margin-bottom: 55px; } .article-feature.blue_header .marble-background { background: white; } .article-feature.blue_header::before { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-size: cover; background: linear-gradient(rgba(109, 199, 255, 0.2), rgba(109, 199, 255, 0.2)), url("../images/2x/rosette2-25.png"); z-index: 0; background-size: auto; background-size: 120px; background-position: center top; } .article-feature.blue_header::after { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: transparent; z-index: -1; background: rgba(211, 211, 211, 0.5); } @media (max-width: 1130px) { .article-feature.blue_header { padding-top: 30px; padding-bottom: 30px; } } .article-feature.blue_header .feature-image .seal_list { z-index: 1; } .article-feature.blue_header .feature-image::after { content: ""; background-image: url("../images/2x/Strokes_1_blue 1.png"); position: absolute; position: absolute; right: -80px; bottom: -150px; width: 232px; height: 246px; aspect-ratio: 116/123; } @media (max-width: 1024px) { .article-feature { padding-top: 24px; } } @media (max-width: 768px) { .article-feature { padding-bottom: 50px; padding-left: 5%; padding-right: 5%; } .article-feature h1 { font-size: 50px; line-height: 52px; } } .article-feature .marble-background { position: fixed; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("../images/2x/marble_blue-black_full.jpg"); } .article-feature .feature-container { position: relative; display: grid; grid-template-columns: repeat(14, 1fr); max-width: 2000px; margin: 0 auto; padding-top: 60px; } .article-feature .feature-container.flex-feature { display: flex; width: -moz-fit-content; width: fit-content; } .article-feature .feature-container.flex-feature .feature-content { display: block; width: 984px; margin: auto; max-width: 100%; } .article-feature .feature-container.flex-feature .feature-content .paragraph-area, .article-feature .feature-container.flex-feature .feature-content .paragraph-area h4 { max-width: 100%; width: 100%; } .article-feature .feature-container.no-image .breadcrumb-item { left: -99px; } @media (max-width: 1130px) { .article-feature .feature-container.no-image { padding-top: 0px; max-width: 90%; margin: auto; } } @media (max-width: 1130px) { .article-feature .feature-container { padding-top: 0px; } } .article-feature .feature-content { grid-column-start: 1; grid-column-end: 8; display: grid; grid-template-columns: repeat(7, 1fr); } @media (max-width: 768px) { .article-feature .feature-content { grid-column-start: 2; grid-column-end: 14; margin-bottom: 40px; } } .article-feature .feature-content .content-container { grid-column-start: 2; grid-column-end: 7; align-self: center; } @media (max-width: 768px) { .article-feature .feature-content .content-container { grid-column-start: 1; grid-column-end: 8; } } .article-feature .feature-content .content-container .title-area { display: flex; flex-flow: column-reverse; width: 100%; max-width: 100%; } .article-feature .feature-content .content-container .title-area.shortened { width: 476px; } .article-feature .feature-content .content-container .title-area .btn { width: -moz-fit-content; width: fit-content; margin-top: 26px; } .article-feature .feature-content .content-container .title-area h1 { margin: 0; color: #1F1F1F; font-family: "niveau-grotesk", sans-serif; font-size: 60px; font-style: normal; font-weight: 900; line-height: 61px; text-transform: none; } @media (max-width: 640px) { .article-feature .feature-content .content-container .title-area h1 { font-size: 50px; line-height: 52px; } } .article-feature .feature-content .content-container .title-area h2 { font-family: alegreya, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 18px; line-height: 1.222; margin-bottom: 30px; margin-top: 30px; } @media (max-width: 1250px) { .article-feature .feature-content .content-container .title-area h2 { margin-top: 15px; } } .article-feature .feature-content .content-container .paragraph-area { margin-bottom: 30px; } .article-feature .feature-content .content-container .paragraph-area h3 { font-family: alegreya, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 16px; line-height: 1.5; margin: 0; } .article-feature .feature-content .content-container .paragraph-area p { margin-top: 30px; } @media (max-width: 1250px) { .article-feature .feature-content .content-container .paragraph-area p { font-size: 1.125em; } } @media (max-width: 1024px) { .article-feature .feature-content .content-container .paragraph-area p { font-size: 1em; } } .article-feature .feature-content .content-container .paragraph-area p, .article-feature .feature-content .content-container .paragraph-area .like-h4 { margin: 0px; } .article-feature .feature-image { position: relative; grid-column-start: 8; grid-column-end: 15; padding-right: 24px; } @media (max-width: 768px) { .article-feature .feature-image { grid-column-start: 2; grid-column-end: 14; padding-right: 0; } } .article-feature .feature-image .download-image { width: 100%; height: 45vw; max-height: 900px; } @media (max-width: 768px) { .article-feature .feature-image .download-image { height: 80vw; } } .article-feature .feature-image.alternate { max-width: 680px; height: 350px; } @media (max-width: 1300px) { .article-feature .feature-image.alternate { max-width: 500px; height: auto; } } @media (max-width: 1080px) { .article-feature .feature-image.alternate { aspect-ratio: 2/1; max-width: 100%; } } @media (max-width: 1080px) { .article-feature .feature-container { flex-direction: column; justify-content: center; align-items: center; } } .article-feature .breadcrumb-item { position: absolute; top: 0px; color: #1F1F1F; font-size: 13px; font-style: normal; font-weight: 400; line-height: normal; left: 0; } .article-feature .breadcrumb-item a { text-decoration-line: underline; text-decoration-style: solid; -webkit-text-decoration-skip-ink: none; text-decoration-skip-ink: none; text-decoration-thickness: 3.5%; text-underline-offset: 20%; } @media (max-width: 1300px) { .article-feature .breadcrumb-item { position: static; } } .single-article .article-feature { padding-top: 163px; } @media (max-width: 1080px) { .single-article .article-feature { padding-top: 55px; } } @media (max-width: 1080px) { .single-article .article-feature .feature-content { width: 100%; margin-bottom: 35px; } } .single-resource .breadcrumb-item { position: static; } .seal_list { position: absolute; right: 25px; top: calc(100% - 40px); transform: translateY(-50%); display: flex; gap: 15px; } .seal_list img { width: 140px; height: auto; } @media (max-width: 1080px) { .seal_list { width: 100%; justify-content: center; right: 0px; } } @media (max-width: 700px) { .seal_list { top: calc(100% - 10px); } .seal_list img { width: 90px; } } :root { --era-color: #6DC7FF; } .article-overview { padding-top: 35px; } .page-template-educator-resources .article-overview { padding-top: 0px; } .page-template-educator-resources .article-feature { padding-bottom: 50px; } .era-overview, .article-post { position: relative; display: grid; grid-template-columns: repeat(14, 1fr); } @media (max-width: 640px) { .era-overview#overview, .article-post#overview { padding-bottom: 45px; } } .article-overview, .era-overview { padding-bottom: 85px; background-color: #fff; } @media (max-width: 1024px) { .article-overview, .era-overview { padding-bottom: 65px; } } @media (max-width: 768px) { .article-overview, .era-overview { padding-bottom: 45px; } } @media (max-width: 1250px) { .article-overview.no-anchors .overview-content, .era-overview.no-anchors .overview-content { grid-column-start: 2; } } .article-overview .overview-links, .era-overview .overview-links { grid-column-start: 2; grid-column-end: 4; padding-right: 30px; margin-bottom: 40px; width: -moz-fit-content; width: fit-content; } @media (max-width: 1250px) { .article-overview .overview-links, .era-overview .overview-links { grid-column-end: 5; } } @media (max-width: 768px) { .article-overview .overview-links, .era-overview .overview-links { margin-top: 40px; padding-right: 0; grid-column-end: 14; border: 2px #FA5C58 solid; width: 100%; } } .article-overview .overview-links.active .jump-to, .era-overview .overview-links.active .jump-to { background-color: #FA5C58; } .article-overview .overview-links.active .jump-to:before, .era-overview .overview-links.active .jump-to:before { background-color: #1F1F1F; } .article-overview .overview-links.active .jump-to:after, .era-overview .overview-links.active .jump-to:after { transform: rotate(0deg); background-color: #1F1F1F; } .article-overview .overview-links.active .link-list, .era-overview .overview-links.active .link-list { max-height: 1000px; opacity: 1; pointer-events: all; padding: 20px; } @media (max-width: 768px) { .article-overview .overview-links.active .link-list li, .era-overview .overview-links.active .link-list li { margin: 0 0 10px; } } .article-overview .overview-links .jump-to, .era-overview .overview-links .jump-to { display: none; position: relative; padding: 20px; font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 20px; line-height: 1.074; color: #1F1F1F; align-items: center; text-decoration-color: transparent; -webkit-text-decoration-color: transparent; } @media (max-width: 768px) { .article-overview .overview-links .jump-to, .era-overview .overview-links .jump-to { display: flex; } } .article-overview .overview-links .jump-to:hover, .article-overview .overview-links .jump-to:focus, .era-overview .overview-links .jump-to:hover, .era-overview .overview-links .jump-to:focus { background-color: #FA5C58; } .article-overview .overview-links .jump-to:hover:before, .article-overview .overview-links .jump-to:hover:after, .article-overview .overview-links .jump-to:focus:before, .article-overview .overview-links .jump-to:focus:after, .era-overview .overview-links .jump-to:hover:before, .era-overview .overview-links .jump-to:hover:after, .era-overview .overview-links .jump-to:focus:before, .era-overview .overview-links .jump-to:focus:after { background-color: #1F1F1F; } .article-overview .overview-links .jump-to:before, .era-overview .overview-links .jump-to:before { content: ''; position: absolute; right: 20px; width: 20px; height: 2px; background-color: #FA5C58; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } .article-overview .overview-links .jump-to:after, .era-overview .overview-links .jump-to:after { content: ''; position: absolute; right: 20px; width: 20px; height: 2px; background-color: #FA5C58; transform: rotate(90deg); transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } .article-overview .overview-links .link-list, .era-overview .overview-links .link-list { margin: 0; padding: 0; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } @media (max-width: 768px) { .article-overview .overview-links .link-list, .era-overview .overview-links .link-list { max-height: 0; opacity: 0; pointer-events: none; padding: 0 20px; } } .article-overview .overview-links .link-list li, .era-overview .overview-links .link-list li { list-style: none; margin: 0 0 10px; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } @media (max-width: 768px) { .article-overview .overview-links .link-list li, .era-overview .overview-links .link-list li { margin: 0; } } .article-overview .overview-links .link-list li a, .era-overview .overview-links .link-list li a { display: inline-block; position: relative; padding-left: 13px; text-decoration-color: transparent; -webkit-text-decoration-color: transparent; font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 14px; line-height: 1.2; color: #1F1F1F; } .article-overview .overview-links .link-list li a:visited, .era-overview .overview-links .link-list li a:visited { color: #1F1F1F; } .article-overview .overview-links .link-list li a:focus, .era-overview .overview-links .link-list li a:focus { color: #1F1F1F; } .article-overview .overview-links .link-list li a:hover, .era-overview .overview-links .link-list li a:hover { color: #1F1F1F; } .article-overview .overview-links .link-list li a:active, .era-overview .overview-links .link-list li a:active { color: #1F1F1F; } .article-overview .overview-links .link-list li a:hover, .article-overview .overview-links .link-list li a:focus, .era-overview .overview-links .link-list li a:hover, .era-overview .overview-links .link-list li a:focus { text-decoration-color: var(--era-color); -webkit-text-decoration-color: var(--era-color); } .article-overview .overview-links .link-list li a:before, .era-overview .overview-links .link-list li a:before { content: ''; width: 6px; height: 10px; position: absolute; top: 3px; left: 0; background: var(--era-color); -webkit-mask: url("../images/svg/chevron.svg") no-repeat center; mask: url("../images/svg/chevron.svg") no-repeat center; -webkit-mask-size: cover; mask-size: cover; } .article-overview .overview-content, .era-overview .overview-content { grid-column-start: 4; grid-column-end: 12; } @media (max-width: 1250px) { .article-overview .overview-content, .era-overview .overview-content { grid-column-start: 5; grid-column-end: 14; } } @media (max-width: 768px) { .article-overview .overview-content, .era-overview .overview-content { grid-column-start: 2; width: 100% !important; } } .article-overview .overview-content .content-container, .era-overview .overview-content .content-container { position: relative; margin-bottom: 40px; padding-top: 45px; /*&:before { content: ''; width: 40px; height: 10px; position: absolute; top: 0; left: 0; background-color: $teal; }*/ } @media (max-width: 768px) { .article-overview .overview-content .content-container, .era-overview .overview-content .content-container { margin-bottom: 60px; } } .article-overview .overview-content .content-container:after, .era-overview .overview-content .content-container:after { content: ""; clear: both; display: table; } @media (max-width: 768px) { .article-overview .overview-content .content-container:after, .era-overview .overview-content .content-container:after { display: none; } } .article-overview .overview-content .content-container:first-of-type, .era-overview .overview-content .content-container:first-of-type { padding-top: 0; } .article-overview .overview-content .content-container:first-of-type:before, .article-overview .overview-content .content-container:first-of-type .divider, .era-overview .overview-content .content-container:first-of-type:before, .era-overview .overview-content .content-container:first-of-type .divider { display: none; } .article-overview .overview-content .content-container .divider, .era-overview .overview-content .content-container .divider { width: 40px; height: 10px; background-color: var(--era-color); position: absolute; top: 0; left: 0; } .article-overview .overview-content .content-container p, .era-overview .overview-content .content-container p { margin: 0 0 18px; } .article-overview .overview-content .content-container ul li, .era-overview .overview-content .content-container ul li { position: relative; margin-bottom: 20px; padding: 0; font-family: alegreya, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 16px; line-height: 1.2; color: #1F1F1F; } .article-overview .overview-content .content-container ul li:before, .era-overview .overview-content .content-container ul li:before { width: 23px; height: 1px; position: absolute; left: -65px; top: 9px; background-color: #747474; } @media (max-width: 640px) { .article-overview .overview-content .content-container ul li:before, .era-overview .overview-content .content-container ul li:before { left: -35px; } } .article-overview .overview-content .content-tags, .era-overview .overview-content .content-tags { border-top: 1px #D8D8D8 solid; padding-top: 25px; margin-top: 30px; } @media (max-width: 1024px) { .article-overview .overview-content .content-tags, .era-overview .overview-content .content-tags { margin-top: 75px; } } @media (max-width: 768px) { .article-overview .overview-content .content-tags, .era-overview .overview-content .content-tags { margin-top: 60px; } } .article-overview .overview-content .content-tags .tag-line, .era-overview .overview-content .content-tags .tag-line { display: flex; margin-bottom: 18px; } .article-overview .overview-content .content-tags .tag-line .tag-title, .era-overview .overview-content .content-tags .tag-line .tag-title { flex: 0 0 56px; } .article-overview .overview-content .content-tags .tag-line .tag-title em, .era-overview .overview-content .content-tags .tag-line .tag-title em { font-family: alegreya, Helvetica, Arial, sans-serif; font-style: italic; font-weight: 400; font-size: 14px; line-height: 1; color: #747474; margin-right: 15px; } .article-overview .overview-content .content-tags .tag-line ul, .era-overview .overview-content .content-tags .tag-line ul { display: flex; flex-wrap: wrap; padding: 0; margin: 0; } .article-overview .overview-content .content-tags .tag-line ul li, .era-overview .overview-content .content-tags .tag-line ul li { list-style: none; margin-right: 15px; } .article-overview .overview-content .content-tags .tag-line ul li a, .era-overview .overview-content .content-tags .tag-line ul li a { font-size: 13px; line-height: 1; color: #1F1F1F; text-decoration-color: #1F1F1F; -webkit-text-decoration-color: #1F1F1F; } .article-overview .overview-content .content-tags .tag-line ul li a:visited, .era-overview .overview-content .content-tags .tag-line ul li a:visited { color: #1F1F1F; } .article-overview .overview-content .content-tags .tag-line ul li a:focus, .era-overview .overview-content .content-tags .tag-line ul li a:focus { color: #1F1F1F; } .article-overview .overview-content .content-tags .tag-line ul li a:hover, .era-overview .overview-content .content-tags .tag-line ul li a:hover { color: #1F1F1F; } .article-overview .overview-content .content-tags .tag-line ul li a:active, .era-overview .overview-content .content-tags .tag-line ul li a:active { color: #1F1F1F; } .article-overview .overview-content .content-tags .tag-line ul li a:hover, .article-overview .overview-content .content-tags .tag-line ul li a:focus, .era-overview .overview-content .content-tags .tag-line ul li a:hover, .era-overview .overview-content .content-tags .tag-line ul li a:focus { text-decoration-color: #FA5C58; -webkit-text-decoration-color: #FA5C58; } .court-opinions { position: relative; display: grid; grid-template-columns: repeat(14, 1fr); background-color: #fff; background-image: url("../images/2x/marble_white-purple.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; border-top: 1px #F4F4F4 solid; padding: 115px 0; } @media (max-width: 1024px) { .court-opinions { padding: 80px 0; } } @media (max-width: 768px) { .court-opinions { padding: 60px 0; } } .court-opinions .opinions-container { grid-column-start: 3; grid-column-end: 13; } @media (max-width: 1250px) { .court-opinions .opinions-container { grid-column-start: 2; grid-column-end: 14; } } .court-opinions .opinions-container .title-area { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 40px; } @media (max-width: 1024px) { .court-opinions .opinions-container .title-area { flex-flow: column; } } .court-opinions .opinions-container .title-area h2 { width: 100%; font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 40px; line-height: 1; text-transform: uppercase; color: #1F1F1F; } @media (max-width: 1024px) { .court-opinions .opinions-container .title-area h2 { font-size: 34px; } } @media (max-width: 768px) { .court-opinions .opinions-container .title-area h2 { font-size: 28px; } } .court-opinions .opinions-container .title-area .opinions { display: flex; margin: 10px 0 0; list-style: none; } .court-opinions .opinions-container .title-area .opinions li { position: relative; list-style: none; margin-left: 25px; padding-left: 25px; font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 500; font-size: 13px; line-height: 1.2; } .court-opinions .opinions-container .title-area .opinions li:first-of-type { margin-left: 0; } .court-opinions .opinions-container .title-area .opinions li:before { content: ''; width: 20px; height: 20px; position: absolute; left: 0; top: 50%; transform: translateY(-50%); background-position: center; background-repeat: no-repeat; } .court-opinions .opinions-container .title-area .opinions li.majority:before { background-color: #6205FD; background-image: url("../images/svg/majority.svg"); } .court-opinions .opinions-container .title-area .opinions li.concurring:before { background-color: #6D84FF; background-image: url("../images/svg/concurring.svg"); } .court-opinions .opinions-container .title-area .opinions li.dissenting:before { background-color: #FF8300; background-image: url("../images/svg/dissenting.svg"); } .court-opinions .opinions-container .title-area .opinions li.recusal:before { background-color: #747474; background-image: url("../images/svg/recusal.svg"); } .court-opinions .opinions-container .title-area .opinions li.nothing:before { content: unset; } @media (max-width: 500px) { .court-opinions .opinions-container .title-area .opinions { flex-wrap: wrap; } .court-opinions .opinions-container .title-area .opinions li { width: 45%; margin-left: 0px; margin-bottom: 10px; margin-top: 10px; } } .court-opinions .opinions-container .justice-opinions { list-style: none; display: grid; grid-template-columns: repeat(9, 1fr); grid-gap: 2.65%; margin: 0; } @media (max-width: 900px) { .court-opinions .opinions-container .justice-opinions { grid-template-columns: repeat(5, 1fr); } } @media (max-width: 500px) { .court-opinions .opinions-container .justice-opinions { grid-template-columns: repeat(3, 1fr); } } .court-opinions .opinions-container .justice-opinions li { list-style: none; text-align: center; margin: 0 0 10px; } .court-opinions .opinions-container .justice-opinions li.majority .justice-headshot:after { background-image: url("../images/svg/majority.svg"); background-color: #6205FD; } .court-opinions .opinions-container .justice-opinions li.concurring .justice-headshot:after { background-image: url("../images/svg/concurring.svg"); background-color: #6D84FF; } .court-opinions .opinions-container .justice-opinions li.dissenting .justice-headshot:before { opacity: 0; } .court-opinions .opinions-container .justice-opinions li.dissenting .justice-headshot:after { background-image: url("../images/svg/dissenting.svg"); background-color: #FF8300; } .court-opinions .opinions-container .justice-opinions li.dissenting .justice-headshot img { opacity: 0.3; } .court-opinions .opinions-container .justice-opinions li.recusal .justice-headshot:before { opacity: 0; } .court-opinions .opinions-container .justice-opinions li.recusal .justice-headshot:after { background-image: url("../images/svg/recusal.svg"); background-color: #747474; } .court-opinions .opinions-container .justice-opinions li.recusal .justice-headshot img { opacity: 0.3; } .court-opinions .opinions-container .justice-opinions li .justice-headshot { position: relative; } .court-opinions .opinions-container .justice-opinions li .justice-headshot:before { content: ''; width: 100%; height: 80.5%; position: absolute; bottom: 0; left: 0; background-color: #F4F4F4; } .court-opinions .opinions-container .justice-opinions li .justice-headshot:after { content: ''; width: 14px; height: 14px; position: absolute; top: 12.2%; left: 0; background-size: 6px; background-position: center; background-repeat: no-repeat; } .court-opinions .opinions-container .justice-opinions li .justice-headshot img { position: relative; display: block; } .court-opinions .opinions-container .justice-opinions li em { font-family: alegreya, Helvetica, Arial, sans-serif; font-style: italic; font-weight: 400; font-size: 14px; line-height: 1.2; color: #747474; } .court-opinions .opinions-container .opinion-descriptions { margin: 30px 0 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 4.78%; border-top: 10px #EFEFEF solid; } @media (max-width: 768px) { .court-opinions .opinions-container .opinion-descriptions { display: block; } } .court-opinions .opinions-container .opinion-descriptions .opinion { margin: 0; padding-top: 10px; grid-column-end: span 1; } .court-opinions .opinions-container .opinion-descriptions .opinion.majority .opinion-container h3:before { background-color: #6205FD; } .court-opinions .opinions-container .opinion-descriptions .opinion.concurring .opinion-container h3:before { background-color: #6D84FF; } .court-opinions .opinions-container .opinion-descriptions .opinion.dissenting .opinion-container h3:before { background-color: #FF8300; } .court-opinions .opinions-container .opinion-descriptions .opinion .opinion-container.opened .full-opinion .closed-text { opacity: 0; } .court-opinions .opinions-container .opinion-descriptions .opinion .opinion-container.opened .full-opinion .open-text { opacity: 1; } .court-opinions .opinions-container .opinion-descriptions .opinion .opinion-container.truncate-text.opened .opinion-text { max-height: 1000px; } .court-opinions .opinions-container .opinion-descriptions .opinion .opinion-container.truncate-text.opened .full-opinion { /*opacity: 0; margin-top: 0; pointer-events: none;*/ margin-top: 10px; } .court-opinions .opinions-container .opinion-descriptions .opinion .opinion-container.truncate-text.opened .full-opinion:before { background-color: transparent; background-image: url("../images/svg/minus-sign.svg"); } .court-opinions .opinions-container .opinion-descriptions .opinion .opinion-container.truncate-text .opinion-text { max-height: 170px; overflow: hidden; } @media (max-width: 768px) { .court-opinions .opinions-container .opinion-descriptions .opinion .opinion-container.truncate-text .opinion-text { max-height: 75px; } } .court-opinions .opinions-container .opinion-descriptions .opinion .opinion-container.truncate-text .full-opinion { display: inline-block; } .court-opinions .opinions-container .opinion-descriptions .opinion .opinion-container .opinion-title { margin-bottom: 20px; } @media (max-width: 1024px) { .court-opinions .opinions-container .opinion-descriptions .opinion .opinion-container .opinion-title { margin-bottom: 15px; } } .court-opinions .opinions-container .opinion-descriptions .opinion .opinion-container .opinion-title h3 { position: relative; padding-left: 19px; margin-bottom: 0; font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 16px; line-height: 1.375; color: #1F1F1F; text-transform: uppercase; } .court-opinions .opinions-container .opinion-descriptions .opinion .opinion-container .opinion-title h3:before { content: ''; width: 12px; height: 12px; position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .court-opinions .opinions-container .opinion-descriptions .opinion .opinion-container .opinion-title em { padding-left: 19px; font-family: alegreya, Helvetica, Arial, sans-serif; font-style: italic; font-weight: 400; font-size: 16px; line-height: 1.375; color: #747474; } .court-opinions .opinions-container .opinion-descriptions .opinion .opinion-container .opinion-text { transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } .court-opinions .opinions-container .opinion-descriptions .opinion .opinion-container .opinion-text p { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 16px; line-height: 1.714; color: #1F1F1F; } @media (max-width: 1024px) { .court-opinions .opinions-container .opinion-descriptions .opinion .opinion-container .opinion-text p { font-size: 14px; } } .court-opinions .opinions-container .opinion-descriptions .opinion .opinion-container .full-opinion { display: none; position: relative; padding-left: 23px; margin-top: 15px; font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 14px; line-height: 1.2; color: #1F1F1F; text-transform: uppercase; text-decoration-color: transparent; -webkit-text-decoration-color: transparent; } .court-opinions .opinions-container .opinion-descriptions .opinion .opinion-container .full-opinion:hover:before, .court-opinions .opinions-container .opinion-descriptions .opinion .opinion-container .full-opinion:focus:before { background-color: #6DC7FF; border-color: #6DC7FF; } .court-opinions .opinions-container .opinion-descriptions .opinion .opinion-container .full-opinion:before { content: ''; width: 16px; height: 16px; position: absolute; left: 0; top: 50%; transform: translateY(-50%); border: 1px #FA5C58 solid; background-color: #FA5C58; border-radius: 50%; background-image: url("../images/svg/plus-sign.svg"); background-position: center; background-repeat: no-repeat; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } .court-opinions .opinions-container .opinion-descriptions .opinion .opinion-container .full-opinion .closed-text { opacity: 1; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } .court-opinions .opinions-container .opinion-descriptions .opinion .opinion-container .full-opinion .open-text { position: absolute; top: 0; left: 23px; opacity: 0; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } .significant-quotes { position: relative; display: grid; grid-template-columns: repeat(14, 1fr); background-color: #1E1E1E; margin-top: 45px; margin-bottom: 55px; display: block; } .significant-quotes .quote-container { position: relative; padding-left: 5%; padding-right: 5%; width: 982px; max-width: 100%; margin: auto; } @media (max-width: 1250px) { .significant-quotes .quote-container { grid-column-start: 1; grid-column-end: 15; } } .significant-quotes .quote-container .glossaryLink { background-color: rgba(255, 255, 255, 0.15); } .significant-quotes .quote-container span.glossaryLink { border-bottom: dotted 1px #ffffff; color: #ffffff !important; } .significant-quotes .quote-container .quote-slider { padding: 120px 0; overflow: hidden; } .significant-quotes .quote-container .quote-slider .slick-track { display: flex; align-items: flex-start; } .significant-quotes .quote-container .quote-slider .slide { width: 100%; position: relative; padding: 55px 90px 60px; border: 10px #6DC7FF solid; margin: 10px; } @media (max-width: 1024px) { .significant-quotes .quote-container .quote-slider .slide { padding: 35px 70px 40px; } } @media (max-width: 768px) { .significant-quotes .quote-container .quote-slider .slide { padding: 30px; } } @media (max-width: 475px) { .significant-quotes .quote-container .quote-slider .slide { padding: 20px; } } .significant-quotes .quote-container .quote-slider .slide:before { content: ''; width: 100px; height: 28px; position: absolute; top: -65px; left: -10px; background-image: url("../images/svg/quotes.svg"); background-repeat: no-repeat; background-position: center; background-size: contain; } .significant-quotes .quote-container .quote-slider .slide:after { content: ''; width: 62px; height: 69px; position: absolute; bottom: -69px; left: -10px; background-image: url("../images/2x/quote-corner.png"); background-repeat: no-repeat; background-position: left top; } .significant-quotes .quote-container .quote-slider .slide blockquote { font-family: alegreya, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 32px; line-height: 1.25; color: #fff; } @media (max-width: 1024px) { .significant-quotes .quote-container .quote-slider .slide blockquote { font-size: 26px; } } @media (max-width: 768px) { .significant-quotes .quote-container .quote-slider .slide blockquote { font-size: 20px; } } .significant-quotes .quote-container .quote-slider .slide cite { position: absolute; left: 90px; bottom: -65px; font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 18px; line-height: 1.2; color: #fff; text-transform: uppercase; padding-right: 120px; } @media (max-width: 1024px) { .significant-quotes .quote-container .quote-slider .slide cite { font-size: 16px; left: 70px; } } @media (max-width: 768px) { .significant-quotes .quote-container .quote-slider .slide cite { font-size: 14px; left: 50px; } } .significant-quotes .slider-controls { position: absolute; right: 5%; bottom: 55px; } .significant-quotes .slider-controls .slide-change { display: flex; } .significant-quotes .slider-controls .slide-change button { border: none; background: none; margin: 0 15px; cursor: pointer; } .significant-quotes .slider-controls .slide-change button:hover svg path, .significant-quotes .slider-controls .slide-change button:focus svg path { fill: #6DC7FF; } .significant-quotes .slider-controls .slide-change button svg path { transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } .discussion-questions { position: relative; display: grid; grid-template-columns: repeat(14, 1fr); padding-bottom: 85px; background-color: #fff; } @media (max-width: 1024px) { .discussion-questions { padding-bottom: 65px; } } @media (max-width: 768px) { .discussion-questions { padding-bottom: 45px; } } .discussion-questions.padding-around { padding: 115px 0; } @media (max-width: 1024px) { .discussion-questions.padding-around { padding: 80px 0; } } @media (max-width: 768px) { .discussion-questions.padding-around { padding: 60px 0; } } .discussion-questions .discussion-container { grid-column-start: 2; grid-column-end: 14; } .discussion-questions .discussion-container h2 { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 40px; line-height: 1; text-transform: uppercase; color: #1F1F1F; margin-bottom: 30px; } @media (max-width: 1024px) { .discussion-questions .discussion-container h2 { font-size: 34px; } } @media (max-width: 768px) { .discussion-questions .discussion-container h2 { font-size: 28px; } } @media (max-width: 768px) { .discussion-questions .discussion-container h2 { margin-bottom: 25px; } } .discussion-questions .discussion-container .question-container { border: 1px #D8D8D8 solid; padding: 50px 0 40px; display: grid; grid-template-columns: 1fr 9fr 2fr; } @media (max-width: 1024px) { .discussion-questions .discussion-container .question-container { grid-template-columns: 1fr 10fr 1fr; } } @media (max-width: 768px) { .discussion-questions .discussion-container .question-container { padding: 40px 0 30px; } } .discussion-questions .discussion-container .question-container .content-container { grid-column-start: 2; grid-column-end: 3; } .discussion-questions .discussion-container .question-container .content-container p { font-family: alegreya, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 1.25em; line-height: 1.8; color: #1F1F1F; } @media (max-width: 1024px) { .discussion-questions .discussion-container .question-container .content-container p { font-size: 1.125em; } } @media (max-width: 768px) { .discussion-questions .discussion-container .question-container .content-container p { font-size: 1em; } } .discussion-questions .discussion-container .question-container .content-container .question-list { list-style: none; margin: 0; padding-top: 10px; } .discussion-questions .discussion-container .question-container .content-container .question-list li { position: relative; list-style: none; margin-bottom: 25px; padding-left: 36px; font-family: alegreya, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 26px; line-height: 1.156; color: #1F1F1F; } @media (max-width: 1024px) { .discussion-questions .discussion-container .question-container .content-container .question-list li { font-size: 22px; } } @media (max-width: 768px) { .discussion-questions .discussion-container .question-container .content-container .question-list li { font-size: 18px; } } .discussion-questions .discussion-container .question-container .content-container .question-list li:before { content: ''; width: 23px; height: 2px; position: absolute; left: 0; top: 15px; background-color: #6DC7FF; filter: url(#unotone); } @media (max-width: 1024px) { .discussion-questions .discussion-container .question-container .content-container .question-list li:before { top: 13px; } } @media (max-width: 768px) { .discussion-questions .discussion-container .question-container .content-container .question-list li:before { top: 10px; } } .did-you-know { position: relative; display: grid; grid-template-columns: repeat(14, 1fr); padding-bottom: 115px; background-color: #fff; } @media (max-width: 1024px) { .did-you-know { padding-bottom: 80px; } } @media (max-width: 768px) { .did-you-know { padding-bottom: 60px; } } .did-you-know .section-container { grid-column-start: 2; grid-column-end: 14; background-color: #1E1E1E; background-image: url("../images/2x/marble_blue-black.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; padding: 7.5vw 0; } .did-you-know .section-container-inner { display: flex; align-items: center; justify-content: space-between; gap: 8.33%; padding: 0 16.66% 0 8.33%; } .did-you-know .section-container-inner .content-container, .did-you-know .section-container-inner .download-image { width: 44.44%; } .did-you-know .section-container-inner:nth-child(even) { flex-direction: row-reverse; } .did-you-know .section-container-inner + .section-container-inner { margin-top: 80px; } @media (max-width: 1024px) { .did-you-know .section-container-inner { padding-right: 8.33%; } } @media (max-width: 640px) { .did-you-know .section-container-inner { display: block; } .did-you-know .section-container-inner .content-container, .did-you-know .section-container-inner .download-image { width: 100%; } } .did-you-know .section-container .glossaryLink { background-color: rgba(255, 255, 255, 0.15); } .did-you-know .section-container span.glossaryLink { border-bottom: dotted 1px #ffffff; color: #ffffff !important; } .did-you-know .section-container .download-image { height: 27vw; max-height: 365px; } @media (max-width: 640px) { .did-you-know .section-container .download-image { height: 60vw; margin-bottom: 40px; } } .did-you-know .section-container .download-image:before { content: ''; width: 81%; height: 52%; position: absolute; z-index: 2; left: -15.5%; bottom: -23%; background-image: url("../images/svg/scribbles-blue.svg"); background-size: contain; background-position: center; background-repeat: no-repeat; pointer-events: none; filter: url(#unotone); } .did-you-know .section-container .content-container h2 { font-family: alegreya, Helvetica, Arial, sans-serif; font-style: italic; font-weight: 500; font-size: 20px; line-height: 1.2; color: #6DC7FF; letter-spacing: 0.03em; } .did-you-know .section-container .content-container p { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 2.125em; line-height: 1.412; color: #fff; } @media (max-width: 1024px) { .did-you-know .section-container .content-container p { font-size: 1.75em; } } @media (max-width: 768px) { .did-you-know .section-container .content-container p { font-size: 1.375em; } } .page-template-era-detail .did-you-know .section-container, .single-eras .did-you-know .section-container { background-image: url("../images/2x/marble_black-white-2.jpg"); } .page-template-era-detail .did-you-know .section-container .content-container h2, .single-eras .did-you-know .section-container .content-container h2 { color: #fff; } .extension-activities { position: relative; display: grid; grid-template-columns: repeat(14, 1fr); padding-bottom: 115px; background-color: #fff; display: flex; justify-content: center; } @media (max-width: 1024px) { .extension-activities { padding-bottom: 80px; } } @media (max-width: 768px) { .extension-activities { padding-bottom: 60px; } } .extension-activities .extension-container { display: grid; grid-column-start: 3; grid-column-end: 13; grid-template-columns: 1fr 8fr 1fr; border: 10px #484848 solid; background-color: #1E1E1E; background-image: url("../images/2x/marble_black-white.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; padding: 6vw 0; width: 984px; } @media (max-width: 1024px) { .extension-activities .extension-container { grid-column-start: 2; grid-column-end: 14; grid-template-columns: 1fr 10fr 1fr; } } .extension-activities .extension-container .glossaryLink { background-color: rgba(255, 255, 255, 0.15); } .extension-activities .extension-container span.glossaryLink { border-bottom: dotted 1px #ffffff; color: #ffffff !important; } .extension-activities .extension-container .content-container { grid-column-start: 2; grid-column-end: 3; } .extension-activities .extension-container .content-container a { color: inherit; } .extension-activities .extension-container .content-container a:visited { color: inherit; } .extension-activities .extension-container .content-container a:focus { color: inherit; } .extension-activities .extension-container .content-container a:hover { color: inherit; } .extension-activities .extension-container .content-container a:active { color: inherit; } .extension-activities .extension-container .content-container p { font-family: alegreya, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 16px; line-height: 1.75; color: #fff; } @media (max-width: 1024px) { .extension-activities .extension-container .content-container p { font-size: 0.9375em; } } @media (max-width: 768px) { .extension-activities .extension-container .content-container p { font-size: 0.875em; } } .extension-activities .extension-container .content-container .title-area { margin-bottom: 25px; } .extension-activities .extension-container .content-container .title-area h2 { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 40px; line-height: 1; text-transform: uppercase; color: #fff; } @media (max-width: 1024px) { .extension-activities .extension-container .content-container .title-area h2 { font-size: 34px; } } @media (max-width: 768px) { .extension-activities .extension-container .content-container .title-area h2 { font-size: 28px; } } .extension-activities .extension-container .content-container .activity-list { margin-left: 30px; margin-bottom: 0; } @media (max-width: 640px) { .extension-activities .extension-container .content-container .activity-list { margin-left: 25px; } } .extension-activities .extension-container .content-container .activity-list li { position: relative; padding-left: 30px; margin-bottom: 25px; } @media (max-width: 640px) { .extension-activities .extension-container .content-container .activity-list li { padding-left: 25px; } } .extension-activities .extension-container .content-container .activity-list li:before { content: ''; width: 60px; height: 58px; background-image: url("../images/svg/list-circle.svg"); background-size: contain; background-position: center; background-repeat: no-repeat; position: absolute; left: -50px; top: -10px; filter: url(#unotone); } @media (max-width: 640px) { .extension-activities .extension-container .content-container .activity-list li:before { width: 50px; height: 50px; left: -40px; top: -12px; } } .extension-activities .extension-container .content-container .activity-list li::marker { font-family: alegreya, Helvetica, Arial, sans-serif; font-style: italic; font-weight: 500; font-size: 32px; line-height: 1; color: #fff; } @media (max-width: 640px) { .extension-activities .extension-container .content-container .activity-list li::marker { font-size: 24px; line-height: 0.9; } } .extension-activities .extension-container .content-container .activity-list li h3 { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 24px; line-height: 1.166; color: #fff; margin-top: 0; margin-bottom: 5px; } @media (max-width: 1024px) { .extension-activities .extension-container .content-container .activity-list li h3 { font-size: 22px; } } @media (max-width: 768px) { .extension-activities .extension-container .content-container .activity-list li h3 { font-size: 20px; } } .quick-downloads { /*@include grid-container();*/ background: url("../images/2x/marble-background.jpg") lightgray 50%/cover no-repeat; margin-top: 90px; } .quick-downloads .downloads-container { grid-column-start: 3; grid-column-end: 13; padding: 180px 0 110px; } @media (max-width: 1024px) { .quick-downloads .downloads-container { grid-column-start: 2; grid-column-end: 14; padding: 18vw 0 10vw; } } .quick-downloads .downloads-container .glossaryLink { background-color: rgba(255, 255, 255, 0.15); } .quick-downloads .downloads-container span.glossaryLink { border-bottom: dotted 1px #ffffff; color: #ffffff !important; } .quick-downloads .downloads-container .top-lines { position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; width: 29px; display: flex; justify-content: space-between; } .quick-downloads .downloads-container .top-lines div { width: 5px; height: 100px; background-color: var(--era-color); } @media (max-width: 1024px) { .quick-downloads .downloads-container .top-lines div { height: 10vw; } } .quick-downloads .downloads-container .top-lines div:first-of-type { height: 140px; } @media (max-width: 1024px) { .quick-downloads .downloads-container .top-lines div:first-of-type { height: 14vw; } } .quick-downloads .downloads-container .top-lines div:nth-of-type(2) { height: 120px; } @media (max-width: 1024px) { .quick-downloads .downloads-container .top-lines div:nth-of-type(2) { height: 12vw; } } .quick-downloads .downloads-container .title-area { text-align: center; margin-bottom: 30px; } .quick-downloads .downloads-container .title-area h2 { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 40px; line-height: 1; text-transform: uppercase; color: #fff; } @media (max-width: 1024px) { .quick-downloads .downloads-container .title-area h2 { font-size: 34px; } } @media (max-width: 768px) { .quick-downloads .downloads-container .title-area h2 { font-size: 28px; } } .quick-downloads .downloads-container .title-area p { color: white; font-size: 24px; } .quick-downloads .downloads-container .downloads-list { margin: 0; list-style: none; max-width: 984px; margin: auto; } .quick-downloads .downloads-container .downloads-list li { margin: 0 0 10px; } .quick-downloads .downloads-container .downloads-list li a { display: flex; align-items: center; justify-content: space-between; padding: 15px 50px 15px 35px; border: 1px #FA5C58 solid; background-color: transparent; text-decoration-color: transparent; -webkit-text-decoration-color: transparent; min-height: 98px; } @media (max-width: 1024px) { .quick-downloads .downloads-container .downloads-list li a { min-height: 80px; padding: 12px 40px 12px 30px; } } .quick-downloads .downloads-container .downloads-list li a:hover, .quick-downloads .downloads-container .downloads-list li a:focus { background-color: #FA5C58; } .quick-downloads .downloads-container .downloads-list li a:hover svg path, .quick-downloads .downloads-container .downloads-list li a:hover svg rect, .quick-downloads .downloads-container .downloads-list li a:focus svg path, .quick-downloads .downloads-container .downloads-list li a:focus svg rect { fill: #1F1F1F; } .quick-downloads .downloads-container .downloads-list li a:hover h3, .quick-downloads .downloads-container .downloads-list li a:focus h3 { color: #1F1F1F; } .quick-downloads .downloads-container .downloads-list li a:hover em, .quick-downloads .downloads-container .downloads-list li a:focus em { color: #1F1F1F; } .quick-downloads .downloads-container .downloads-list li a svg { flex: 0 0 18px; } @media (max-width: 1024px) { .quick-downloads .downloads-container .downloads-list li a svg { flex: 0 0 15px; } } .quick-downloads .downloads-container .downloads-list li a svg path, .quick-downloads .downloads-container .downloads-list li a svg rect { transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } .quick-downloads .downloads-container .downloads-list li a h3 { width: 100%; font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 27px; line-height: 1.074; color: #fff; margin: 0; padding: 0 30px; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } @media (max-width: 1024px) { .quick-downloads .downloads-container .downloads-list li a h3 { font-size: 23px; padding: 0 25px; } } @media (max-width: 768px) { .quick-downloads .downloads-container .downloads-list li a h3 { font-size: 19px; } } .quick-downloads .downloads-container .downloads-list li a em { font-family: alegreya, Helvetica, Arial, sans-serif; font-style: italic; font-weight: 400; font-size: 18px; line-height: 1.111; color: #A3A3A3; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } @media (max-width: 1024px) { .quick-downloads .downloads-container .downloads-list li a em { font-size: 16px; } } @media (max-width: 1050px) { .quick-downloads .downloads-container .downloads-list { padding-left: 5%; padding-right: 5%; } } /*.page-template-era-detail { .quick-downloads { @include grid-container(); .downloads-container { padding: 110px 0 110px; @include breakpoint('tablet'){ padding: 10vw 0 10vw; } .top-lines { display: none; } } } }*/ .article-sources { position: relative; display: grid; grid-template-columns: repeat(14, 1fr); padding: 115px 0; background-image: url("../images/2x/marble_white-purple.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; background-color: #fff; border-top: 1px #F4F4F4 solid; } @media (max-width: 1024px) { .article-sources { padding: 80px 0; } } @media (max-width: 768px) { .article-sources { padding: 60px 0; } } .article-sources .sources-container { grid-column-start: 4; grid-column-end: 12; } @media (max-width: 1024px) { .article-sources .sources-container { grid-column-start: 2; grid-column-end: 14; } } .article-sources .sources-container .title-area { margin-bottom: 20px; } .article-sources .sources-container .title-area h2 { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 18px; line-height: 1.2; color: #1F1F1F; text-transform: uppercase; } .article-sources .sources-container .sources-list { margin: 0; list-style: none; padding: 0px; } .article-sources .sources-container .sources-list li { margin: 0 0 20px; } .article-sources .sources-container .sources-list li a { text-decoration-color: #FA5C58; } .article-sources .sources-container .sources-list li a:hover { text-decoration-color: inherit; } .article-sources .sources-container .sources-list li p { font-family: alegreya, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 0.875em; line-height: 1.286; } .continue-exploring { position: relative; display: grid; grid-template-columns: repeat(14, 1fr); padding: 115px 0; background-color: #1E1E1E; } @media (max-width: 1024px) { .continue-exploring { padding: 80px 0; } } @media (max-width: 768px) { .continue-exploring { padding: 60px 0; } } .continue-exploring .exploring-container { grid-column-start: 3; grid-column-end: 13; } @media (max-width: 1024px) { .continue-exploring .exploring-container { grid-column-start: 2; grid-column-end: 14; } } .continue-exploring .exploring-container .glossaryLink { background-color: rgba(255, 255, 255, 0.15); } .continue-exploring .exploring-container span.glossaryLink { border-bottom: dotted 1px #ffffff; color: #ffffff !important; } .continue-exploring .exploring-container .title-area { margin-bottom: 30px; text-align: center; } .continue-exploring .exploring-container .title-area h2 { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 40px; line-height: 1; text-transform: uppercase; color: #fff; } @media (max-width: 1024px) { .continue-exploring .exploring-container .title-area h2 { font-size: 34px; } } @media (max-width: 768px) { .continue-exploring .exploring-container .title-area h2 { font-size: 28px; } } .continue-exploring .exploring-container .exploring-list { position: relative; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 4.27%; list-style: none; } @media (max-width: 640px) { .continue-exploring .exploring-container .exploring-list { grid-template-columns: repeat(2, 1fr); grid-gap: 5%; } } .continue-exploring .exploring-container .exploring-list:before { content: ''; pointer-events: none; position: absolute; top: -14.28%; left: -6.3%; width: 20.63%; height: 61.14%; background-image: url("../images/svg/strokes_1_blue.svg"); background-size: contain; background-position: center; background-repeat: no-repeat; filter: url(#unotone); } @media (max-width: 640px) { .continue-exploring .exploring-container .exploring-list:before { top: -13%; width: 33%; height: 70%; } } .continue-exploring .exploring-container .exploring-list:after { content: ''; pointer-events: none; position: absolute; top: 22.86%; right: -6.7%; width: 20.63%; height: 61.14%; background-image: url("../images/svg/strokes_2_blue.svg"); background-size: contain; background-position: center; background-repeat: no-repeat; filter: url(#unotone); } @media (max-width: 640px) { .continue-exploring .exploring-container .exploring-list:after { top: 20%; width: 33%; height: 70%; } } .continue-exploring .exploring-container .exploring-list li { margin: 0; } @media (max-width: 640px) { .continue-exploring .exploring-container .exploring-list li:nth-of-type(3) { display: none; } } .continue-exploring .exploring-container .exploring-list li a { color: #fff; transition: all 300ms ease-out; text-decoration-color: #FA5C58; } .continue-exploring .exploring-container .exploring-list li a:visited { color: #fff; } .continue-exploring .exploring-container .exploring-list li a:focus { color: #fff; } .continue-exploring .exploring-container .exploring-list li a:hover { color: #FA5C58; } .continue-exploring .exploring-container .exploring-list li a:active { color: #fff; } .continue-exploring .exploring-container .exploring-list li a:hover, .continue-exploring .exploring-container .exploring-list li a:focus { text-decoration-color: black; } .continue-exploring .exploring-container .exploring-list li a:hover .cover-image, .continue-exploring .exploring-container .exploring-list li a:focus .cover-image { transform: scale(1.1); } .continue-exploring .exploring-container .exploring-list li a .image-container { position: relative; height: 22vw; width: 100%; overflow: hidden; } @media (max-width: 1024px) { .continue-exploring .exploring-container .exploring-list li a .image-container { height: 25vw; } } @media (max-width: 640px) { .continue-exploring .exploring-container .exploring-list li a .image-container { height: 40vw; } } .continue-exploring .exploring-container .exploring-list li a h3 { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 25px; line-height: 1.2; color: #fff; margin: 15px 0 0; } @media (max-width: 1024px) { .continue-exploring .exploring-container .exploring-list li a h3 { font-size: 21px; } } @media (max-width: 768px) { .continue-exploring .exploring-container .exploring-list li a h3 { font-size: 17px; } } .page-template-listing-page .continue-exploring { background-color: #2B2B2B; } .image_text_repeater { display: flex; flex-direction: column; gap: 80px; padding-bottom: 45px; padding-top: 45px; } .image_text_repeater ul { margin: 0; padding-left: 12px; } .image_text_repeater .row { width: 90%; display: flex; justify-content: center; gap: 50px; max-width: 90%; margin: auto; align-items: center; } .image_text_repeater .row.reverse { flex-direction: row-reverse; } @media (max-width: 700px) { .image_text_repeater .row.reverse { flex-direction: column-reverse; gap: 25px; } .image_text_repeater .row.reverse .image-container { width: 100%; max-width: 100%; } .image_text_repeater .row.reverse .text-container { width: 100%; max-width: 100%; } } @media (max-width: 850px) { .image_text_repeater .row .image-container { width: 50%; } .image_text_repeater .row .text-container { width: 50%; } } @media (max-width: 700px) { .image_text_repeater .row { flex-direction: column-reverse; gap: 10px; } .image_text_repeater .row .image-container { width: 100%; max-width: 100%; height: -moz-fit-content; height: fit-content; } .image_text_repeater .row .text-container { width: 100%; max-width: 100%; } } .image_text_repeater .image-container { position: relative; width: 70%; max-width: 551px; height: auto; } .image_text_repeater .text-container { width: 30%; max-width: 381px; } .image_text_repeater .text-container h3 { margin-top: 0px; margin-bottom: 6px; } .image_text_repeater.image_text_repeater_2 { gap: 0px; padding-top: 45px; padding-bottom: 45px; } .image_text_repeater.image_text_repeater_2 .row { width: 90%; max-width: 780px; border-top: 1px solid #F1F1F1; padding-top: 25px; padding-bottom: 25px; } .image_text_repeater.image_text_repeater_2 .row .text-container { width: 573px; max-width: 75%; } @media (max-width: 700px) { .image_text_repeater.image_text_repeater_2 .row .text-container { max-width: 100%; } } .image_text_repeater.image_text_repeater_2 .row .image-container { width: 167px; height: auto; max-width: 25%; } @media (max-width: 600px) { .image_text_repeater.image_text_repeater_2 .row .image-container { max-width: 100%; } } .image_text_repeater.image_text_repeater_2 .row.noImage .text-container { width: 100%; max-width: 100%; } .map-section { margin-top: 55px; margin-bottom: 55px; } .map-section .container { max-width: 1182px; width: 85%; margin: auto; display: flex; gap: 40px; align-items: center; } @media (max-width: 1000px) { .map-section .container { flex-direction: column-reverse; } } .map-section .years { max-width: 392px; width: 100%; } @media (max-width: 1000px) { .map-section .years { max-width: 100%; } } .map-section .years .map-pin-container { display: flex; gap: 10px; } .map-section .years .map-pin-container svg { position: relative; top: 2.5px; } .map-section .years .map-pin-container .map-text-container { width: 100%; margin-bottom: 23px; } .map-section .years .map-pin-container .map-text-container .map-year { color: #1E1E1E; font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 18px; font-style: normal; font-weight: 700; line-height: 150%; } .map-section .years .map-pin-container .map-text-container .map-locations { display: flex; flex-wrap: wrap; -moz-column-gap: 25px; column-gap: 25px; } .map-section .years .map-pin-container .map-text-container .map-locations p { width: calc(50% - 12.5px); margin: 0px; color: #1E1E1E; font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; } @media (max-width: 1000px) { .map-section .years .map-pin-container .map-text-container .map-locations p { width: calc(32% - 25px); } } @media (max-width: 700px) { .map-section .years .map-pin-container .map-text-container .map-locations p { width: calc(50% - 12.5px); } } @media (max-width: 400px) { .map-section .years .map-pin-container .map-text-container .map-locations p { width: 100%; } } .map-section .map { max-width: 750px; width: 100%; } .era-feature { height: calc(100vh - 59px); padding: 32px 24px 48px; background-color: white; position: relative; min-height: 637px; } @media (max-width: 1024px) { .era-feature { padding: 0 20px 26px; height: calc(100vh - 100px); } } .era-feature .fixed-background { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #1E1E1E; max-width: 200vw; width: 100%; height: 100%; } .era-feature .fixed-background .background-image { background-position: center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; filter: url(#duotone); width: 100%; height: 100%; background-size: cover; } @media (max-width: 600px) { .era-feature .fixed-background .background-image { background-attachment: unset; } } .era-feature .feature-container { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 140px 40px 100px; } .era-feature .feature-container .glossaryLink { background-color: rgba(255, 255, 255, 0.15); } .era-feature .feature-container span.glossaryLink { border-bottom: dotted 1px #ffffff; color: #ffffff !important; } .era-feature .feature-container .border-left, .era-feature .feature-container .border-bottom, .era-feature .feature-container .border-right { background-color: var(--era-color); } .era-feature .feature-container .border-left { width: 10px; height: 100%; position: absolute; top: 0; left: 0; } @media (max-width: 1024px) { .era-feature .feature-container .border-left { display: none; } } .era-feature .feature-container .border-bottom { height: 10px; width: 100%; position: absolute; bottom: 0; left: 0; right: 0; } @media (max-width: 1024px) { .era-feature .feature-container .border-bottom { display: none; } } .era-feature .feature-container .border-right { width: 10px; height: calc(100% - 14px); position: absolute; bottom: 0; right: 0; } @media (max-width: 1024px) { .era-feature .feature-container .border-right { display: none; } } .era-feature .feature-container .content-container { width: 100%; max-width: 670px; text-align: center; } @media (max-width: 1130px) { .era-feature .feature-container .content-container .era-banner { display: none; } } .era-feature .feature-container .content-container .dates { font-family: alegreya, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 24px; line-height: 1.333; color: #fff; margin: 0 0 5px; display: block; } .era-feature .feature-container .content-container h1 { color: #fff; margin: 0 0 15px; } .era-feature .feature-container .content-container p { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 1em; line-height: 1.75; width: 100%; color: #fff; max-width: 590px; margin: 0 auto 12px; } .era-feature .feature-container .content-container .content-cta { margin-top: 38px; } .era-feature .feature-container .content-container .content-cta .btn { margin: 0 12px 20px; } .single-era { background-color: white; padding-top: 124px; } .single-era .era-feature { border: 14px solid var(--era-color); } .single-era .era-feature .era-banner { position: absolute; background-color: var(--era-color); width: 53px; height: 70px; top: 0px; left: 50%; transform: translateX(-50%); display: flex; justify-content: center; align-items: flex-end; padding-bottom: 14px; } @media (max-width: 1130px) { .single-era { padding-top: 0px; } } .single-era > * { max-width: 982px; width: 80%; margin-left: auto; margin-right: auto; } .single-era .alignfull, .single-era .alignwide, .era-feature, .era-overview, .quick-downloads, .article-sources, .next-era { width: 100%; max-width: 100%; } .era-banner.head { position: absolute; background-color: var(--era-color); width: 53px; height: 70px; z-index: 1; top: -42px; left: 50%; transform: translateX(-50%); display: flex; justify-content: center; align-items: flex-end; padding-bottom: 14px; } @media (max-width: 1130px) { .era-banner.head { display: none; } } .era-overview { padding-bottom: 165px; } .era-overview .overview-links { padding-top: 75px; } @media (max-width: 768px) { .era-overview .overview-links { padding-top: 0; margin-top: 40px; margin-bottom: 20px; } } .era-overview .overview-content .content-container:first-of-type { margin-top: -150px; } @media (max-width: 1250px) { .era-overview .overview-content .content-container:first-of-type { margin-top: 75px; } } @media (max-width: 768px) { .era-overview .overview-content .content-container:first-of-type { margin-top: 0; } } .hidden_container { display: none; } .media-callout { position: relative; display: grid; grid-template-columns: repeat(14, 1fr); padding-bottom: 85px; background-color: #fff; } @media (max-width: 1024px) { .media-callout { padding-bottom: 65px; } } @media (max-width: 768px) { .media-callout { padding-bottom: 45px; } } .media-callout.padding-around { padding: 115px 0; } @media (max-width: 1024px) { .media-callout.padding-around { padding: 80px 0; } } @media (max-width: 768px) { .media-callout.padding-around { padding: 60px 0; } } .media-callout .callout-container { grid-column-start: 2; grid-column-end: 14; display: grid; grid-template-columns: 4fr 1fr 9fr; } @media (max-width: 640px) { .media-callout .callout-container { display: block; } } .media-callout .callout-container .callout-content { grid-column-start: 1; grid-column-end: 2; display: flex; align-items: center; padding-bottom: 60px; } @media (max-width: 640px) { .media-callout .callout-container .callout-content { padding-bottom: 20px; } } .media-callout .callout-container .callout-content h2 { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 44px; line-height: 1.091; color: #1F1F1F; } @media (max-width: 1024px) { .media-callout .callout-container .callout-content h2 { font-size: 34px; } } @media (max-width: 768px) { .media-callout .callout-container .callout-content h2 { font-size: 24px; } } .media-callout .callout-container .callout-media { position: relative; grid-column-start: 3; grid-column-end: 4; margin-bottom: 20px; } @media (max-width: 640px) { .media-callout .callout-container .callout-media { margin-left: 20px; } } .media-callout .callout-container .callout-media .media-container { position: relative; height: 31vw; display: flex; align-items: center; justify-content: center; } @media (max-width: 1024px) { .media-callout .callout-container .callout-media .media-container { height: 34vw; } } @media (max-width: 640px) { .media-callout .callout-container .callout-media .media-container { height: 50vw; } } .media-callout .callout-container .callout-media .media-container:hover .play-btn, .media-callout .callout-container .callout-media .media-container:focus .play-btn { background-color: #6DC7FF; } .media-callout .callout-container .callout-media .media-container:after { content: ''; position: absolute; z-index: 2; width: 100%; height: 100%; left: -20px; bottom: -20px; border: 10px #D8D8D8 solid; pointer-events: none; } .media-callout .callout-container .callout-media .media-container .play-btn { position: relative; width: 76px; height: 76px; border-radius: 50%; background-color: #FA5C58; display: flex; align-items: center; justify-content: center; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } @media (max-width: 768px) { .media-callout .callout-container .callout-media .media-container .play-btn { width: 56px; height: 56px; } } .media-callout .callout-container .callout-media .media-container .play-btn svg { pointer-events: all; position: relative; bottom: auto; left: 2px; } @media (max-width: 768px) { .media-callout .callout-container .callout-media .media-container .play-btn svg { width: 15px; } } @media (max-width: 640px) { .media-callout .callout-container .callout-media .media-container .play-btn svg { display: block; } } .media-callout .callout-container .callout-media:after { content: ''; pointer-events: none; position: absolute; bottom: -100px; left: -280px; width: 491px; height: 304px; background-image: url("../images/2x/scribbles-video.png"); background-size: contain; background-position: center; background-repeat: no-repeat; filter: url(#unotone); } @media (max-width: 1024px) { .media-callout .callout-container .callout-media:after { width: 390px; left: -200px; bottom: -120px; } } @media (max-width: 1024px) { .media-callout .callout-container .callout-media:after { width: 290px; left: -140px; bottom: -140px; } } @media (max-width: 640px) { .media-callout .callout-container .callout-media:after { display: none; } } .media-callout .callout-container .callout-media svg { pointer-events: none; position: absolute; bottom: -100px; left: -280px; } @media (max-width: 1024px) { .media-callout .callout-container .callout-media svg { width: 390px; left: -200px; bottom: -120px; } } @media (max-width: 1024px) { .media-callout .callout-container .callout-media svg { width: 290px; left: -140px; bottom: -140px; } } @media (max-width: 640px) { .media-callout .callout-container .callout-media svg { display: none; } } .image-gallery { position: relative; display: grid; grid-template-columns: repeat(14, 1fr); background-color: #fff; background-image: url("../images/2x/marble_white-purple-2.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; border-top: 1px solid #DDD; border-bottom: 1px solid #DDD; margin-bottom: 55px; margin-top: 55px; } .image-gallery.white_bg { background: white; border: 0px; } .image-gallery .border { width: 100%; height: 1px; background-color: #D8D8D8; } .image-gallery .border.top { grid-column-start: 1; grid-column-end: 14; } .image-gallery .border.bottom { grid-column-start: 2; grid-column-end: 15; } .image-gallery .gallery-container { /*@include padding-around();*/ padding-top: 10px; padding-bottom: 10px; grid-column-start: 2; grid-column-end: 14; display: grid; grid-template-columns: repeat(12, 1fr); } .image-gallery .gallery-container iframe { max-height: 100%; } @media (max-width: 1024px) { .image-gallery .gallery-container { display: flex; flex-flow: column-reverse; } } .image-gallery .gallery-container .caption-container { grid-column-start: 1; grid-column-end: 4; overflow: hidden; margin-top: 6.2vw; display: flex; justify-content: center; flex-direction: column; z-index: 1; } @media (max-width: 1024px) { .image-gallery .gallery-container .caption-container { display: grid; grid-template-columns: repeat(12, 1fr); margin-top: 20px; text-align: center; } } @media (max-width: 1024px) { .image-gallery .gallery-container .caption-container .caption-slider { grid-column-start: 3; grid-column-end: 11; grid-row-start: 1; } } @media (max-width: 768px) { .image-gallery .gallery-container .caption-container .caption-slider { grid-column-start: 2; grid-column-end: 12; } } .image-gallery .gallery-container .caption-container .caption-slider .slick-track { display: flex; } .image-gallery .gallery-container .caption-container .caption-slider .slide { padding-top: 20px; padding-right: 40px; } @media (max-width: 1024px) { .image-gallery .gallery-container .caption-container .caption-slider .slide { padding: 0; } } .image-gallery .gallery-container .caption-container .caption-slider .slide p { font-family: alegreya, Helvetica, Arial, sans-serif; font-style: italic; font-weight: 400; font-size: 1em; line-height: 1.562; color: #1F1F1F; } .image-gallery .gallery-container .slider-container { grid-column-start: 4; grid-column-end: 13; overflow: hidden; } .image-gallery .gallery-container .gallery-slider { position: relative; left: -5.8vw; height: 37.5vw; } @media (max-width: 1024px) { .image-gallery .gallery-container .gallery-slider { left: auto; height: 50vw; } } @media (max-width: 768px) { .image-gallery .gallery-container .gallery-slider { height: 65vw; } } @media (max-width: 640px) { .image-gallery .gallery-container .gallery-slider { height: 80vw; } } .image-gallery .gallery-container .gallery-slider .slick-list { position: relative; top: 50%; transform: translateY(-50%); } .image-gallery .gallery-container .gallery-slider .slick-track { display: flex; } .image-gallery .gallery-container .gallery-slider .slide { width: 17.8vw; height: 11.2vw; position: relative; z-index: 1; display: flex; align-items: center; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } .image-gallery .gallery-container .gallery-slider .slide.doc { width: 200px; max-width: unset; max-height: unset; aspect-ratio: 200/261; box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important; cursor: pointer; width: -moz-fit-content; width: fit-content; } .image-gallery .gallery-container .gallery-slider .slide.doc .slide-image::before { content: ""; border-radius: 100px; width: 16.5px; height: 16.5px; position: absolute; top: 45%; left: 50%; transform: translate(-50%); pointer-events: none; transition: all 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955); background-color: #FA5C58; opacity: 1; } .image-gallery .gallery-container .gallery-slider .slide.doc .slide-image::after { content: ""; position: absolute; top: 45%; left: 50%; transform: translate(-50%, 0%); width: 16.5px; height: 16.5px; pointer-events: none; background-image: url("../images/svg/slide-plus.svg"); background-size: 8px; background-position: center; background-repeat: no-repeat; opacity: 1; background-size: 9px; transition: unset; } .image-gallery .gallery-container .gallery-slider .slide.doc .slide-image:hover::before { background-color: #000; /* circle becomes black and is not affected by icon styling */ } .image-gallery .gallery-container .gallery-slider .slide.doc .slide-image:hover::after { filter: invert(34%) sepia(75%) saturate(3300%) hue-rotate(338deg) brightness(95%) contrast(100%); } .image-gallery .gallery-container .gallery-slider .slide.doc img { box-shadow: 0 0 19px rgba(0, 0, 0, 0.2) !important; max-height: 100%; } .image-gallery .gallery-container .gallery-slider .slide.video .slide-image, .image-gallery .gallery-container .gallery-slider .slide.youtube .slide-image { cursor: pointer; } .image-gallery .gallery-container .gallery-slider .slide.video .slide-image::before, .image-gallery .gallery-container .gallery-slider .slide.youtube .slide-image::before { content: ""; border-radius: 100px; width: 22px; height: 22px; position: absolute; top: 45%; left: 50%; transform: translate(-50%); pointer-events: none; transition: all 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955); background-color: #FA5C58; opacity: 1; } .image-gallery .gallery-container .gallery-slider .slide.video .slide-image::after, .image-gallery .gallery-container .gallery-slider .slide.youtube .slide-image::after { content: ""; position: absolute; top: 45%; left: 50%; transform: translate(-45%, 0%); width: 22px; height: 22px; pointer-events: none; background-image: url("../images/svg/slide-play.svg"); background-size: 12px; background-position: center; background-repeat: no-repeat; opacity: 1; transition: unset; } @media (max-width: 1050px) { .image-gallery .gallery-container .gallery-slider .slide.video .slide-image::before, .image-gallery .gallery-container .gallery-slider .slide.video .slide-image::after, .image-gallery .gallery-container .gallery-slider .slide.youtube .slide-image::before, .image-gallery .gallery-container .gallery-slider .slide.youtube .slide-image::after { top: 35%; } } .image-gallery .gallery-container .gallery-slider .slide.video .slide-image:hover::before, .image-gallery .gallery-container .gallery-slider .slide.youtube .slide-image:hover::before { background-color: #000; /* circle becomes black and is not affected by icon styling */ } .image-gallery .gallery-container .gallery-slider .slide.video .slide-image:hover::after, .image-gallery .gallery-container .gallery-slider .slide.youtube .slide-image:hover::after { filter: invert(34%) sepia(75%) saturate(3300%) hue-rotate(338deg) brightness(95%) contrast(100%); } .image-gallery .gallery-container .gallery-slider .slide.video video, .image-gallery .gallery-container .gallery-slider .slide.video iframe, .image-gallery .gallery-container .gallery-slider .slide.youtube video, .image-gallery .gallery-container .gallery-slider .slide.youtube iframe { max-width: 100%; position: absolute; top: 0px; left: 0px; width: 100%; height: auto; opacity: 0; pointer-events: none; transition: all 300ms cubic-bezier(0.075, 0.82, 0.165, 1); } .image-gallery .gallery-container .gallery-slider .slide.video.active-video video, .image-gallery .gallery-container .gallery-slider .slide.video.active-video iframe, .image-gallery .gallery-container .gallery-slider .slide.youtube.active-video video, .image-gallery .gallery-container .gallery-slider .slide.youtube.active-video iframe { opacity: 1; pointer-events: all; z-index: 1; } .image-gallery .gallery-container .gallery-slider .slide.video.active-video img, .image-gallery .gallery-container .gallery-slider .slide.youtube.active-video img { opacity: 0; pointer-events: none; } @media (max-width: 1024px) { .image-gallery .gallery-container .gallery-slider .slide { width: 20vw; height: 14vw; } } @media (max-width: 768px) { .image-gallery .gallery-container .gallery-slider .slide { width: 26vw; height: 20vw; } } .image-gallery .gallery-container .gallery-slider .slide .backdrop-filter { position: absolute; top: 0; left: 0; bottom: 0; right: 0; -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } .image-gallery .gallery-container .gallery-slider .slide.slick-active { z-index: 3; transform: scale(1.63); } .image-gallery .gallery-container .gallery-slider .slide.slick-cloned-active { transform: scale(1.63); z-index: 2; } .image-gallery .gallery-container .gallery-slider .slide.slick-current { z-index: 4; transform: scale(2.72); box-shadow: 0 0 20px #ffffff; } .image-gallery .gallery-container .gallery-slider .slide.slick-current .backdrop-filter { -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); } .image-gallery .gallery-container .gallery-slider .slide.slick-current .slide-image { /*filter: grayscale(0%);*/ } .image-gallery .gallery-container .gallery-slider .slide.slick-current .slide-image::after { opacity: 1; } .image-gallery .gallery-container .gallery-slider .slide .slide-content { position: absolute; } .image-gallery .gallery-container .gallery-slider .slide .slide-image { position: relative; width: 100%; height: 100%; /*filter: grayscale(100%);*/ transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } .image-gallery .gallery-container .gallery-slider .slide .slide-image::after { content: ''; position: absolute; bottom: 0px; left: 0px; width: 110px; height: 125px; background-image: url("../images/2x/white_lines.png"); background-size: contain; background-repeat: no-repeat; max-height: 40px; opacity: 0; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } .image-gallery .gallery-container .gallery-slider .slide .slide-image .video-controls { position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; z-index: 6; background: rgba(0, 0, 0, 0.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); width: 100%; justify-content: center; opacity: 0; } .image-gallery .gallery-container .gallery-slider .slide .slide-image .video-controls .controls-flex { display: flex; gap: 15px; } .image-gallery .gallery-container .gallery-slider .slide .slide-image .video-controls .vc-play, .image-gallery .gallery-container .gallery-slider .slide .slide-image .video-controls .vc-mute { width: 14px; height: 14px; border-radius: 50%; background: transparent; color: #fff; border: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); position: relative; } .image-gallery .gallery-container .gallery-slider .slide .slide-image .video-controls .vc-play .play, .image-gallery .gallery-container .gallery-slider .slide .slide-image .video-controls .vc-play .pause, .image-gallery .gallery-container .gallery-slider .slide .slide-image .video-controls .vc-play .mute, .image-gallery .gallery-container .gallery-slider .slide .slide-image .video-controls .vc-play .unmute, .image-gallery .gallery-container .gallery-slider .slide .slide-image .video-controls .vc-mute .play, .image-gallery .gallery-container .gallery-slider .slide .slide-image .video-controls .vc-mute .pause, .image-gallery .gallery-container .gallery-slider .slide .slide-image .video-controls .vc-mute .mute, .image-gallery .gallery-container .gallery-slider .slide .slide-image .video-controls .vc-mute .unmute { opacity: 0; position: absolute; width: 14px; height: 14px; } .image-gallery .gallery-container .gallery-slider .slide .slide-image .video-controls .vc-play .mute, .image-gallery .gallery-container .gallery-slider .slide .slide-image .video-controls .vc-play .unmute, .image-gallery .gallery-container .gallery-slider .slide .slide-image .video-controls .vc-mute .mute, .image-gallery .gallery-container .gallery-slider .slide .slide-image .video-controls .vc-mute .unmute { width: 16px; height: 16px; } .image-gallery .gallery-container .gallery-slider .slide .slide-image .video-controls .vc-play .pause, .image-gallery .gallery-container .gallery-slider .slide .slide-image .video-controls .vc-mute .pause { opacity: 0; position: absolute; } .image-gallery .gallery-container .gallery-slider .slide .slide-image .video-controls .vc-play .play.active, .image-gallery .gallery-container .gallery-slider .slide .slide-image .video-controls .vc-play .pause.active, .image-gallery .gallery-container .gallery-slider .slide .slide-image .video-controls .vc-play .mute.active, .image-gallery .gallery-container .gallery-slider .slide .slide-image .video-controls .vc-play .unmute.active, .image-gallery .gallery-container .gallery-slider .slide .slide-image .video-controls .vc-mute .play.active, .image-gallery .gallery-container .gallery-slider .slide .slide-image .video-controls .vc-mute .pause.active, .image-gallery .gallery-container .gallery-slider .slide .slide-image .video-controls .vc-mute .mute.active, .image-gallery .gallery-container .gallery-slider .slide .slide-image .video-controls .vc-mute .unmute.active { opacity: 1; } .image-gallery .gallery-container .gallery-slider .slide .slide-image .video-controls .vc-progress { width: 120px; height: 6px; background: rgba(255, 255, 255, 0.18); border-radius: 4px; overflow: hidden; } .image-gallery .gallery-container .gallery-slider .slide .slide-image .video-controls .vc-progress .vc-progress-bar { width: 0%; height: 100%; background: var(--era-color); transition: all 100ms linear; } .image-gallery .gallery-container .gallery-slider .slide .slide-image .cover-image { transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } .image-gallery .gallery-container .gallery-slider .slide.slick-current .slide-image .video-controls .controls-flex { transform: scale(0.5); } @media (max-width: 750px) { .image-gallery .gallery-container .gallery-slider .slide.slick-current:not(.video, .doc, .youtube) .slide-image::after { opacity: 0; } } .image-gallery .gallery-container .gallery-slider .active-video .video-controls { opacity: 1 !important; } .image-gallery .gallery-container .gallery-slider .ytp-button { transform: scale(0.6); } @media (max-width: 1024px) { .image-gallery .gallery-container .slider-controls { grid-column-start: 3; grid-column-end: 11; grid-row-start: 2; } } @media (max-width: 768px) { .image-gallery .gallery-container .slider-controls { grid-column-start: 2; grid-column-end: 12; } } .image-gallery .gallery-container .slider-controls button { border: none; background: none; cursor: pointer; margin-right: 20px; } .image-gallery .gallery-container .slider-controls button:last-of-type { margin-right: 0; } .image-gallery .gallery-container .slider-controls button:hover svg path, .image-gallery .gallery-container .slider-controls button:focus svg path { fill: #1e1e1e; } .image-gallery .gallery-container .slider-controls button svg path { transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); fill: #FA5C58; } .image-gallery .lightbox { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715); } .image-gallery .lightbox.lightbox-active { opacity: 1; pointer-events: all; z-index: 10; } .image-gallery .lightbox .lightbox-closer { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; cursor: pointer; } .image-gallery .lightbox .lightbox-closer::before { content: ""; background: url("../images/svg/slide-plus.svg"); transform: rotate(-45deg); filter: invert(1); width: 22px; height: 22px; background-size: contain; background-repeat: no-repeat; color: white; position: absolute; right: 5%; top: 5%; font-family: 'alegreya', Helvetica, Arial, sans-serif; font-size: 22px; } @media (max-width: 1130px) { .image-gallery .lightbox .lightbox-closer::before { top: 15%; } } .image-gallery .lightbox .lightbox-container { width: 90%; max-width: 1170px; position: relative; z-index: 1; } .image-gallery .lightbox .lightbox-container iframe, .image-gallery .lightbox .lightbox-container video { width: 100%; height: auto; aspect-ratio: 16/9; } .significant-cases { position: relative; display: grid; grid-template-columns: repeat(14, 1fr); padding-bottom: 85px; padding-top: 55px; background-color: #fff; } @media (max-width: 1024px) { .significant-cases { padding-bottom: 65px; } } @media (max-width: 768px) { .significant-cases { padding-bottom: 45px; } } .significant-cases.padding-around { padding: 115px 0; } @media (max-width: 1024px) { .significant-cases.padding-around { padding: 80px 0; } } @media (max-width: 768px) { .significant-cases.padding-around { padding: 60px 0; } } .significant-cases .cases-container { grid-column-start: 2; grid-column-end: 14; } .significant-cases .cases-container .title-area { text-align: center; margin-bottom: 30px; } .significant-cases .cases-container .title-area h2 { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 40px; line-height: 1; text-transform: uppercase; color: #1F1F1F; } @media (max-width: 1024px) { .significant-cases .cases-container .title-area h2 { font-size: 34px; } } @media (max-width: 768px) { .significant-cases .cases-container .title-area h2 { font-size: 28px; } } .significant-cases .cases-container .cases { list-style: none; margin: 0; padding: 0; display: grid; -moz-column-gap: 16px; column-gap: 16px; grid-template-columns: repeat(4, 3.5fr); } @media (max-width: 1024px) { .significant-cases .cases-container .cases { grid-template-columns: repeat(3, 4.33fr); } } @media (max-width: 640px) { .significant-cases .cases-container .cases { grid-template-columns: repeat(2, 6fr); } } @media (max-width: 400px) { .significant-cases .cases-container .cases { grid-template-columns: 12fr; } } .significant-cases .cases-container .cases .case { grid-column-end: span 1; margin: 10px 0; /*&.internal { .case-surround { &:hover, &:focus { .case-container { h3 { @include text-decoration($red); } } } .case-container { h3 { @include text-decoration(); } } } }*/ } .significant-cases .cases-container .cases .case.external .case-surround .case-container h3 span { font-size: 0; white-space: nowrap; text-decoration-color: #fff; -webkit-text-decoration-color: #fff; } .significant-cases .cases-container .cases .case.external .case-surround .case-container h3 span img { display: inline; width: 9px; position: relative; bottom: 12px; left: 4px; } @media (max-width: 1024px) { .significant-cases .cases-container .cases .case.external .case-surround .case-container h3 span img { bottom: 9px; left: 3px; } } @media (max-width: 768px) { .significant-cases .cases-container .cases .case.external .case-surround .case-container h3 span img { bottom: 6px; left: 2px; } } .significant-cases .cases-container .cases .case a.case-surround .case-container h3 { text-decoration: underline; text-decoration-color: #FA5C58; -webkit-text-decoration-color: #FA5C58; text-decoration-thickness: from-font; } .significant-cases .cases-container .cases .case a.case-surround:hover .case-container h3, .significant-cases .cases-container .cases .case a.case-surround:focus .case-container h3 { color: #FA5C58; } .significant-cases .cases-container .cases .case .case-surround { display: block; position: relative; text-decoration-color: transparent; -webkit-text-decoration-color: transparent; } .significant-cases .cases-container .cases .case .case-surround:hover .description-container, .significant-cases .cases-container .cases .case .case-surround:focus .description-container { pointer-events: all; opacity: 1; bottom: 100%; } .significant-cases .cases-container .cases .case .case-surround .case-container { position: relative; text-align: center; padding: 15px 15px 30px; } .significant-cases .cases-container .cases .case .case-surround .case-container:after { content: ''; width: 30px; height: 1px; position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto; background-color: #D8D8D8; } .significant-cases .cases-container .cases .case .case-surround .case-container em { font-family: alegreya, Helvetica, Arial, sans-serif; font-style: italic; font-weight: 400; font-size: 18px; line-height: 1.2; color: #747474; display: block; } .significant-cases .cases-container .cases .case .case-surround .case-container h3 { display: inline-block; position: relative; font-family: alegreya, Helvetica, Arial, sans-serif; font-style: italic; font-weight: 500; font-size: 30px; line-height: 1.133; color: #1F1F1F; margin: 0; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } @media (max-width: 1250px) { .significant-cases .cases-container .cases .case .case-surround .case-container h3 { font-size: 26px; } } @media (max-width: 1024px) { .significant-cases .cases-container .cases .case .case-surround .case-container h3 { font-size: 22px; } } @media (max-width: 768px) { .significant-cases .cases-container .cases .case .case-surround .case-container h3 { font-size: 20px; } } .significant-cases .cases-container .cases .case .case-surround .description-container { pointer-events: none; position: absolute; bottom: 0; padding: 22px 22px 10px; border: 4px #E2E2E2 solid; opacity: 0; background-color: #fff; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } .significant-cases .cases-container .cases .case .case-surround .description-container:after { content: ''; width: 22px; height: 12px; position: absolute; bottom: -12px; left: 0; right: 0; margin: 0 auto; background-image: url("../images/svg/arrow-bubble.svg"); background-size: contain; background-position: top center; background-repeat: no-repeat; } .significant-cases .cases-container .cases .case .case-surround .description-container p { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 0.875em; line-height: 1.286; color: #1F1F1F; } .significant-events { position: relative; display: grid; grid-template-columns: repeat(14, 1fr); padding-bottom: 85px; background-color: #fff; overflow: hidden; } @media (max-width: 1024px) { .significant-events { padding-bottom: 65px; } } @media (max-width: 768px) { .significant-events { padding-bottom: 45px; } } .significant-events .significant-container { min-height: 614px; grid-column-start: 2; grid-column-end: 15; display: grid; grid-template-columns: 1fr 12fr; background-color: #1E1E1E; border-top: 10px #484848 solid; border-left: 10px #484848 solid; border-bottom: 10px #484848 solid; } @media (max-width: 1024px) { .significant-events .significant-container { min-height: 520px; } } @media (max-width: 768px) { .significant-events .significant-container { grid-column-start: 1; grid-template-columns: 1fr 13fr; border-left: none; min-height: 420px; } } .significant-events .significant-container .glossaryLink { background-color: rgba(255, 255, 255, 0.15); } .significant-events .significant-container span.glossaryLink { border-bottom: dotted 1px #ffffff; color: #ffffff !important; } .significant-events .significant-container .inner-container { position: relative; grid-column-start: 2; grid-column-end: 3; padding: 70px 0 120px; } @media (max-width: 1024px) { .significant-events .significant-container .inner-container { padding: 60px 0 100px; } } @media (max-width: 768px) { .significant-events .significant-container .inner-container { padding: 50px 0 80px; } } @media (max-width: 640px) { .significant-events .significant-container .inner-container { padding: 40px 0 60px; } } .significant-events .significant-container .inner-container .significant-content { width: 290px; } @media (max-width: 1024px) { .significant-events .significant-container .inner-container .significant-content { width: 260px; } } @media (max-width: 768px) { .significant-events .significant-container .inner-container .significant-content { width: 230px; } } @media (max-width: 640px) { .significant-events .significant-container .inner-container .significant-content { width: 100%; padding-right: 40px; } } .significant-events .significant-container .inner-container .significant-content img { width: 56px; } @media (max-width: 1024px) { .significant-events .significant-container .inner-container .significant-content img { width: 50px; } } @media (max-width: 768px) { .significant-events .significant-container .inner-container .significant-content img { width: 44px; } } .significant-events .significant-container .inner-container .significant-content .lines { position: absolute; top: 180px; left: 0; height: 29px; width: 100%; } @media (max-width: 1024px) { .significant-events .significant-container .inner-container .significant-content .lines { top: 150px; } } @media (max-width: 768px) { .significant-events .significant-container .inner-container .significant-content .lines { top: 120px; height: 27px; } } @media (max-width: 640px) { .significant-events .significant-container .inner-container .significant-content .lines { top: auto; bottom: 190px; } } .significant-events .significant-container .inner-container .significant-content .lines div { position: absolute; height: 5px; right: 0; background-color: var(--era-color); } @media (max-width: 768px) { .significant-events .significant-container .inner-container .significant-content .lines div { height: 4px; } } .significant-events .significant-container .inner-container .significant-content .lines div:first-of-type { top: 0; width: 100%; } .significant-events .significant-container .inner-container .significant-content .lines div:nth-of-type(2) { top: 50%; transform: translateY(-50%); width: calc(100% - 20px); } .significant-events .significant-container .inner-container .significant-content .lines div:last-of-type { bottom: 0; width: calc(100% - 40px); } .significant-events .significant-container .inner-container .significant-content .content { padding-top: 140px; } @media (max-width: 1024px) { .significant-events .significant-container .inner-container .significant-content .content { padding-top: 100px; } } @media (max-width: 768px) { .significant-events .significant-container .inner-container .significant-content .content { padding-top: 80px; } } @media (max-width: 640px) { .significant-events .significant-container .inner-container .significant-content .content { padding-top: 20px; padding-bottom: 40px; } } .significant-events .significant-container .inner-container .significant-content .content h2 { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 40px; line-height: 1; text-transform: uppercase; color: #1F1F1F; color: #fff; margin: 0 0 15px; } @media (max-width: 1024px) { .significant-events .significant-container .inner-container .significant-content .content h2 { font-size: 34px; } } @media (max-width: 768px) { .significant-events .significant-container .inner-container .significant-content .content h2 { font-size: 28px; } } .significant-events .significant-container .inner-container .significant-content .content h3 { font-family: alegreya, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 16px; line-height: 1.75; color: #fff; margin: 0; } @media (max-width: 1024px) { .significant-events .significant-container .inner-container .significant-content .content h3 { font-size: 15px; } } @media (max-width: 768px) { .significant-events .significant-container .inner-container .significant-content .content h3 { font-size: 14px; } } .significant-events .significant-container .inner-container .events-slider { width: 340px; position: absolute; top: 70px; left: 380px; } @media (max-width: 1024px) { .significant-events .significant-container .inner-container .events-slider { width: 300px; top: 60px; left: 350px; } } @media (max-width: 768px) { .significant-events .significant-container .inner-container .events-slider { width: 260px; top: 50px; left: 300px; } } @media (max-width: 640px) { .significant-events .significant-container .inner-container .events-slider { position: relative; left: 40px; top: auto; } } .significant-events .significant-container .inner-container .events-slider .slick-track { display: flex; } .significant-events .significant-container .inner-container .events-slider .slide { position: relative; width: 340px; padding: 0 20px; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } @media (max-width: 1024px) { .significant-events .significant-container .inner-container .events-slider .slide { width: 300px; } } @media (max-width: 768px) { .significant-events .significant-container .inner-container .events-slider .slide { width: 260px; } } .significant-events .significant-container .inner-container .events-slider .slide.previous { pointer-events: none; opacity: 0; } .significant-events .significant-container .inner-container .events-slider .slide.slick-active { pointer-events: all; opacity: 1; } .significant-events .significant-container .inner-container .events-slider .slide:nth-of-type(even) { top: 40px; } @media (max-width: 1024px) { .significant-events .significant-container .inner-container .events-slider .slide:nth-of-type(even) { top: 30px; } } @media (max-width: 768px) { .significant-events .significant-container .inner-container .events-slider .slide:nth-of-type(even) { top: 20px; } } @media (max-width: 640px) { .significant-events .significant-container .inner-container .events-slider .slide:nth-of-type(even) { top: 0; } } .significant-events .significant-container .inner-container .events-slider .slide a:hover h4, .significant-events .significant-container .inner-container .events-slider .slide a:focus h4 { color: #FA5C58; } .significant-events .significant-container .inner-container .events-slider .slide a.external h4 span { font-size: 0; white-space: nowrap; text-decoration-color: #fff; -webkit-text-decoration-color: #fff; } .significant-events .significant-container .inner-container .events-slider .slide a.external h4 span img { display: inline; width: 9px; position: relative; bottom: 12px; left: 4px; } @media (max-width: 1024px) { .significant-events .significant-container .inner-container .events-slider .slide a.external h4 span img { bottom: 9px; left: 3px; } } @media (max-width: 768px) { .significant-events .significant-container .inner-container .events-slider .slide a.external h4 span img { bottom: 6px; left: 2px; } } .significant-events .significant-container .inner-container .events-slider .slide a h4 { text-decoration: underline; text-decoration-color: #FA5C58; -webkit-text-decoration-color: #FA5C58; } .significant-events .significant-container .inner-container .events-slider .slide > div.slide-container .slide-image:hover .cover-image, .significant-events .significant-container .inner-container .events-slider .slide > div.slide-container .slide-image:focus .cover-image { transform: scale(1); } .significant-events .significant-container .inner-container .events-slider .slide .slide-container { text-decoration: none; } .significant-events .significant-container .inner-container .events-slider .slide .slide-container em { display: block; font-family: alegreya, Helvetica, Arial, sans-serif; font-style: italic; font-weight: 400; font-size: 26px; line-height: 1.192; color: #fff; margin: 0 0 15px; } @media (max-width: 1024px) { .significant-events .significant-container .inner-container .events-slider .slide .slide-container em { font-size: 22px; } } @media (max-width: 768px) { .significant-events .significant-container .inner-container .events-slider .slide .slide-container em { margin: 0 0 10px; font-size: 18px; } } .significant-events .significant-container .inner-container .events-slider .slide .slide-container .slide-image { position: relative; height: 300px; overflow: hidden; } @media (max-width: 1024px) { .significant-events .significant-container .inner-container .events-slider .slide .slide-container .slide-image { height: 260px; } } @media (max-width: 768px) { .significant-events .significant-container .inner-container .events-slider .slide .slide-container .slide-image { height: 220px; } } .significant-events .significant-container .inner-container .events-slider .slide .slide-container .slide-image:hover .cover-image, .significant-events .significant-container .inner-container .events-slider .slide .slide-container .slide-image:focus .cover-image { transform: scale(1.1); } .significant-events .significant-container .inner-container .events-slider .slide .slide-container h4 { display: inline-block; position: relative; font-size: 25px; line-height: 1.2; color: #fff; margin: 10px 0 0; text-transform: none; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } @media (max-width: 1024px) { .significant-events .significant-container .inner-container .events-slider .slide .slide-container h4 { font-size: 21px; } } @media (max-width: 768px) { .significant-events .significant-container .inner-container .events-slider .slide .slide-container h4 { font-size: 17px; } } .significant-events .significant-container .inner-container .slider-controls { position: absolute; top: 275px; left: 330px; } @media (max-width: 1024px) { .significant-events .significant-container .inner-container .slider-controls { top: 225px; left: 300px; } } @media (max-width: 768px) { .significant-events .significant-container .inner-container .slider-controls { top: 175px; left: 260px; } } @media (max-width: 640px) { .significant-events .significant-container .inner-container .slider-controls { top: auto; bottom: 240px; left: 0; } } .significant-events .significant-container .inner-container .slider-controls.left-disabled .slider-prev { pointer-events: none; opacity: 0.25; } .significant-events .significant-container .inner-container .slider-controls.right-disabled .slider-next { pointer-events: none; opacity: 0.25; } .significant-events .significant-container .inner-container .slider-controls .slide-change { display: flex; flex-flow: column; } .significant-events .significant-container .inner-container .slider-controls button { background: none; border: none; cursor: pointer; margin: 10px 0; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } @media (max-width: 768px) { .significant-events .significant-container .inner-container .slider-controls button { margin: 8px 0; } } @media (max-width: 640px) { .significant-events .significant-container .inner-container .slider-controls button { margin: 6px 0; } } .significant-events .significant-container .inner-container .slider-controls button:hover svg path, .significant-events .significant-container .inner-container .slider-controls button:focus svg path { fill: #FA5C58; } .significant-events .significant-container .inner-container .slider-controls button svg { width: 30px; } @media (max-width: 768px) { .significant-events .significant-container .inner-container .slider-controls button svg { width: 26px; } } .significant-events .significant-container .inner-container .slider-controls button svg path { transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } .court-justices { position: relative; display: grid; grid-template-columns: repeat(14, 1fr); padding: 115px 0; background-color: #F4F4F4; z-index: 2; } @media (max-width: 1024px) { .court-justices { padding: 80px 0; } } @media (max-width: 768px) { .court-justices { padding: 60px 0; } } .court-justices .court-container { grid-column-start: 2; grid-column-end: 14; } .court-justices .court-container .title-area { position: relative; text-align: center; margin-bottom: 35px; } @media (max-width: 640px) { .court-justices .court-container .title-area { margin-bottom: 60px; } } .court-justices .court-container .title-area h2 { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 40px; line-height: 1; text-transform: uppercase; color: #1F1F1F; } @media (max-width: 1024px) { .court-justices .court-container .title-area h2 { font-size: 34px; } } @media (max-width: 768px) { .court-justices .court-container .title-area h2 { font-size: 28px; } } .court-justices .court-container .title-area em { font-family: alegreya, Helvetica, Arial, sans-serif; font-style: italic; font-weight: 400; font-size: 18px; line-height: 1.2; color: #1F1F1F; position: absolute; right: 0; bottom: 0; padding-right: 23px; } @media (max-width: 640px) { .court-justices .court-container .title-area em { bottom: -40px; text-align: center; width: 100%; } } .court-justices .court-container .title-area em:after { content: ''; width: 16px; height: 15px; position: absolute; right: 0; bottom: 2px; background-image: url("../images/svg/star-black.svg"); background-size: contain; background-position: center; background-repeat: no-repeat; } @media (max-width: 640px) { .court-justices .court-container .title-area em:after { right: calc(50% - 55px); bottom: 5px; } } .court-justices .court-container .justices { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); grid-column-gap: 5.6%; list-style: none; } @media (max-width: 1024px) { .court-justices .court-container .justices { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { .court-justices .court-container .justices { grid-template-columns: repeat(2, 1fr); } } .court-justices .court-container .justices li { position: relative; margin: 0 0 45px; padding: 0; grid-column-end: span 1; } .court-justices .court-container .justices li:nth-of-type(2), .court-justices .court-container .justices li:nth-of-type(4), .court-justices .court-container .justices li:nth-of-type(7), .court-justices .court-container .justices li:nth-of-type(9), .court-justices .court-container .justices li:nth-of-type(12), .court-justices .court-container .justices li:nth-of-type(14) { top: 35px; } @media (max-width: 1024px) { .court-justices .court-container .justices li:nth-of-type(2), .court-justices .court-container .justices li:nth-of-type(4), .court-justices .court-container .justices li:nth-of-type(7), .court-justices .court-container .justices li:nth-of-type(9), .court-justices .court-container .justices li:nth-of-type(12), .court-justices .court-container .justices li:nth-of-type(14) { top: auto; } } @media (max-width: 1024px) { .court-justices .court-container .justices li:nth-of-type(2), .court-justices .court-container .justices li:nth-of-type(5), .court-justices .court-container .justices li:nth-of-type(8), .court-justices .court-container .justices li:nth-of-type(11), .court-justices .court-container .justices li:nth-of-type(14) { top: 25px; } } @media (max-width: 640px) { .court-justices .court-container .justices li:nth-of-type(2), .court-justices .court-container .justices li:nth-of-type(5), .court-justices .court-container .justices li:nth-of-type(8), .court-justices .court-container .justices li:nth-of-type(11), .court-justices .court-container .justices li:nth-of-type(14) { top: auto; } } .court-justices .court-container .justices li .justice-container { position: relative; margin-top: 28px; } .court-justices .court-container .justices li .justice-container em { display: flex; justify-content: space-between; position: absolute; width: 100%; top: -28px; left: 0; padding-bottom: 6px; font-family: alegreya, Helvetica, Arial, sans-serif; font-style: italic; font-weight: 400; font-size: 18px; line-height: 1.2; color: #706F6F; } .court-justices .court-container .justices li .justice-container em:before { content: ''; width: 100%; height: 1px; position: absolute; right: 0; top: 12px; background-color: #D8D8D8; } .court-justices .court-container .justices li .justice-container em span { position: relative; display: inline-block; background-color: #F4F4F4; } .court-justices .court-container .justices li .justice-container em span:first-of-type { padding-right: 4px; } .court-justices .court-container .justices li .justice-container em span:nth-of-type(2) { padding-left: 4px; } .court-justices .court-container .justices li .justice-container .justice-headshot { position: relative; } .court-justices .court-container .justices li .justice-container .justice-headshot img { display: block; width: 100%; } .court-justices .court-container .justices li .justice-container .justice-background { position: absolute; width: 100%; height: 100%; bottom: 0; left: 0; right: 0; background-color: #DEDEDE; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } .court-justices .court-container .justices li h3 { font-family: alegreya, Helvetica, Arial, sans-serif; font-style: italic; font-weight: 500; font-size: 22px; line-height: 1.272; color: #1F1F1F; margin: 5px 0 0; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } @media (max-width: 1250px) { .court-justices .court-container .justices li h3 { font-size: 20px; } } @media (max-width: 768px) { .court-justices .court-container .justices li h3 { font-size: 18px; } } .court-justices .court-container .justices li > a { text-decoration: none; } .court-justices .court-container .justices li > a:hover .justice-container .justice-background, .court-justices .court-container .justices li > a:focus .justice-container .justice-background { background-color: #fff; } .court-justices .court-container .justices li > a:hover h3, .court-justices .court-container .justices li > a:focus h3 { text-decoration-color: #1F1F1F; -webkit-text-decoration-color: #1F1F1F; } .court-justices .court-container .justices li > a h3 { position: relative; display: inline-block; text-decoration: underline; text-decoration-color: #FA5C58; -webkit-text-decoration-color: #FA5C58; } .court-justices .court-container .justices li > a h3 span { display: none; } .court-justices .court-container .justices li .justice.chief .justice-container:after { content: ''; width: 28px; height: 27px; position: absolute; top: 0; left: 0; background-image: url("../images/svg/chief-tag-white.svg"); background-size: contain; background-position: top left; background-repeat: no-repeat; } .court-justices .court-container .justices li .justice.external h3 span { font-size: 0; white-space: nowrap; text-decoration-color: #fff; -webkit-text-decoration-color: #fff; } .court-justices .court-container .justices li .justice.external h3 span img { display: inline; width: 9px; position: relative; bottom: 12px; left: 4px; } @media (max-width: 1024px) { .court-justices .court-container .justices li .justice.external h3 span img { bottom: 9px; left: 3px; } } @media (max-width: 768px) { .court-justices .court-container .justices li .justice.external h3 span img { bottom: 6px; left: 2px; } } .court-justices .court-container .justices li .justice.external h3 span { display: inline-block; } .court-justices svg { position: absolute; bottom: -62px; right: -204px; filter: url(#unotone); } .life-stories { position: relative; display: grid; grid-template-columns: repeat(14, 1fr); padding-bottom: 85px; background-color: #fff; } @media (max-width: 1024px) { .life-stories { padding-bottom: 65px; } } @media (max-width: 768px) { .life-stories { padding-bottom: 45px; } } .life-stories.padding-around { padding: 115px 0; } @media (max-width: 1024px) { .life-stories.padding-around { padding: 80px 0; } } @media (max-width: 768px) { .life-stories.padding-around { padding: 60px 0; } } .life-stories .life-container { grid-column-start: 3; grid-column-end: 12; } @media (max-width: 1250px) { .life-stories .life-container { grid-column-end: 13; } } @media (max-width: 1024px) { .life-stories .life-container { grid-column-start: 2; grid-column-end: 14; } } .life-stories .life-container .title-area h2 { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 40px; line-height: 1; text-transform: uppercase; color: #1F1F1F; margin-bottom: 30px; } @media (max-width: 1024px) { .life-stories .life-container .title-area h2 { font-size: 34px; } } @media (max-width: 768px) { .life-stories .life-container .title-area h2 { font-size: 28px; } } .life-stories .life-container .stories { margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 5.26%; list-style: none; } @media (max-width: 768px) { .life-stories .life-container .stories { grid-template-columns: 1fr 1fr 1fr; } } @media (max-width: 640px) { .life-stories .life-container .stories { display: block; } } .life-stories .life-container .stories .story { margin-bottom: 35px; } @media (max-width: 768px) { .life-stories .life-container .stories .story { margin-bottom: 0; } } @media (max-width: 640px) { .life-stories .life-container .stories .story { margin-bottom: 35px; } } .life-stories .life-container .stories .story:nth-of-type(odd) .story-container .story-image { position: relative; flex: 0 0 45.73%; /*height: 21.5vw; max-height: 180px;*/ height: 13vw; aspect-ratio: 1/1; } .life-stories .life-container .stories .story:nth-of-type(odd) .story-container .story-image:before { content: ''; position: absolute; z-index: 2; left: 0; bottom: 0; width: 60px; height: 47px; background-image: url("../images/svg/scribble-story-1.svg"); background-size: contain; background-position: bottom left; background-repeat: no-repeat; } @media (max-width: 600px) { .life-stories .life-container .stories .story:nth-of-type(odd) .story-container .story-image { height: unset; } } .life-stories .life-container .stories .story:nth-of-type(even) .story-container .story-image:before { content: ''; position: absolute; z-index: 2; top: 0; right: 0; width: 66px; height: 41px; background-image: url("../images/svg/scribble-story-2.svg"); background-size: contain; background-position: top right; background-repeat: no-repeat; } .life-stories .life-container .stories .story .story-container { display: flex; align-items: center; text-decoration: none; } @media (max-width: 768px) { .life-stories .life-container .stories .story .story-container { flex-flow: column; } } @media (max-width: 640px) { .life-stories .life-container .stories .story .story-container { flex-flow: row; } } .life-stories .life-container .stories .story .story-container:hover .story-image:after, .life-stories .life-container .stories .story .story-container:focus .story-image:after { top: 0; right: 0; } .life-stories .life-container .stories .story .story-container:hover .story-content h3, .life-stories .life-container .stories .story .story-container:focus .story-content h3 { text-decoration-color: #1F1F1F; -webkit-text-decoration-color: #1F1F1F; } .life-stories .life-container .stories .story .story-container .story-image { position: relative; flex: 0 0 43.555%; height: 13vw; } @media (max-width: 1250px) { .life-stories .life-container .stories .story .story-container .story-image { height: 15vw; } } @media (max-width: 1024px) { .life-stories .life-container .stories .story .story-container .story-image { height: 18vw; } } @media (max-width: 768px) { .life-stories .life-container .stories .story .story-container .story-image { height: 24vw; width: 100%; flex: auto; } } @media (max-width: 640px) { .life-stories .life-container .stories .story .story-container .story-image { flex: 0 0 40%; width: auto; max-height: none; height: 34vw; } } .life-stories .life-container .stories .story .story-container .story-image:after { content: ''; position: absolute; z-index: 2; top: 8px; right: 8px; width: 100%; height: 100%; border: 5px #D8D8D8 solid; pointer-events: none; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } .life-stories .life-container .stories .story .story-container .story-content { padding-left: 30px; } @media (max-width: 768px) { .life-stories .life-container .stories .story .story-container .story-content { padding-left: 0; } } @media (max-width: 640px) { .life-stories .life-container .stories .story .story-container .story-content { padding-left: 30px; } } @media (max-width: 500px) { .life-stories .life-container .stories .story .story-container .story-content { padding-left: 20px; } } .life-stories .life-container .stories .story .story-container .story-content h3 { text-decoration: underline; text-decoration-color: #FA5C58; -webkit-text-decoration-color: #FA5C58; font-family: alegreya, Helvetica, Arial, sans-serif; font-style: italic; font-weight: 500; font-size: 22px; line-height: 1.272; margin: 0 0 5px; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); color: #1E1E1E; font-size: 24px; font-style: normal; font-weight: 700; line-height: 110%; /* 26.4px */ text-decoration-line: underline; text-decoration-style: solid; -webkit-text-decoration-skip: ink; text-decoration-skip-ink: auto; text-decoration-color: #FA5C58; text-decoration-thickness: 8%; /* 1.92px */ text-underline-offset: 9.5%; /* 2.28px */ } @media (max-width: 1024px) { .life-stories .life-container .stories .story .story-container .story-content h3 { font-size: 20px; } } @media (max-width: 768px) { .life-stories .life-container .stories .story .story-container .story-content h3 { margin: 15px 0 5px; } } .life-stories .life-container .stories .story .story-container .story-content h4 { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 14px; line-height: 1.2; color: #747474; text-transform: none; margin: 0 0 15px; } .life-stories .life-container .stories .story .story-container .story-content h4 p { margin: 0px; font-style: italic; } .life-stories .life-container .stories .story .story-container .story-content p { font-family: alegreya, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 1em; line-height: 1.375; margin: 0px; font-style: italic; } .story-subtitle { margin-top: 18px; } .story-subtitle p { margin: 0px !important; font-style: italic !important; } .teaching-notes { position: relative; display: grid; grid-template-columns: repeat(14, 1fr); padding-bottom: 85px; background-color: #fff; } @media (max-width: 1024px) { .teaching-notes { padding-bottom: 65px; } } @media (max-width: 768px) { .teaching-notes { padding-bottom: 45px; } } .teaching-notes.padding-around { padding: 115px 0; } @media (max-width: 1024px) { .teaching-notes.padding-around { padding: 80px 0; } } @media (max-width: 768px) { .teaching-notes.padding-around { padding: 60px 0; } } .teaching-notes .teaching-container { grid-column-start: 2; grid-column-end: 14; } .teaching-notes .teaching-container .title-area { margin-bottom: 30px; } .teaching-notes .teaching-container .title-area h2 { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 40px; line-height: 1; text-transform: uppercase; color: #1F1F1F; } @media (max-width: 1024px) { .teaching-notes .teaching-container .title-area h2 { font-size: 34px; } } @media (max-width: 768px) { .teaching-notes .teaching-container .title-area h2 { font-size: 28px; } } .teaching-notes .teaching-container .notes { list-style: none; margin: 0; padding: 0px; } .teaching-notes .teaching-container .notes .note { position: relative; margin: 0 0 40px; border: 1px #D8D8D8 solid; padding: 70px 0; display: grid; grid-template-columns: 1fr 6.5fr 1fr 2.5fr 1fr; } @media (max-width: 1250px) { .teaching-notes .teaching-container .notes .note { grid-template-columns: 1fr 6.66fr 0.66fr 2.66fr 1fr; } } @media (max-width: 1024px) { .teaching-notes .teaching-container .notes .note { padding: 60px 0; } } @media (max-width: 768px) { .teaching-notes .teaching-container .notes .note { grid-template-columns: 1fr 10fr 1fr; margin: 0 0 30px; } } @media (max-width: 640px) { .teaching-notes .teaching-container .notes .note { padding: 50px 0; } } @media (max-width: 500px) { .teaching-notes .teaching-container .notes .note { padding: 40px 0; } } .teaching-notes .teaching-container .notes .note:nth-of-type(even) { grid-template-columns: 1fr 2.5fr 1fr 6.5fr 1fr; } @media (max-width: 1250px) { .teaching-notes .teaching-container .notes .note:nth-of-type(even) { grid-template-columns: 1fr 2.66fr 0.66fr 6.66fr 1fr; } } @media (max-width: 768px) { .teaching-notes .teaching-container .notes .note:nth-of-type(even) { grid-template-columns: 1fr 10fr 1fr; } } .teaching-notes .teaching-container .notes .note:nth-of-type(even) .note-content { grid-column-start: 4; grid-column-end: 5; } @media (max-width: 768px) { .teaching-notes .teaching-container .notes .note:nth-of-type(even) .note-content { grid-column-start: 2; grid-column-end: 3; } } .teaching-notes .teaching-container .notes .note:nth-of-type(even) .note-image { grid-column-start: 2; grid-column-end: 3; grid-row-start: 1; } .teaching-notes .teaching-container .notes .note:last-of-type { margin: 0; } .teaching-notes .teaching-container .notes .note .note-content { grid-column-start: 2; grid-column-end: 3; } .teaching-notes .teaching-container .notes .note .note-content h3 { font-family: alegreya, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 26px; line-height: 1.154; color: #1F1F1F; margin: 0 0 15px; } @media (max-width: 1024px) { .teaching-notes .teaching-container .notes .note .note-content h3 { font-size: 22px; } } @media (max-width: 640px) { .teaching-notes .teaching-container .notes .note .note-content h3 { font-size: 18px; } } .teaching-notes .teaching-container .notes .note .note-content h4 { margin: 5px 0 15px; font-size: 18px; } @media (max-width: 1024px) { .teaching-notes .teaching-container .notes .note .note-content h4 { font-size: 16px; } } @media (max-width: 640px) { .teaching-notes .teaching-container .notes .note .note-content h4 { font-size: 14px; } } .teaching-notes .teaching-container .notes .note .note-content .text-link { margin-top: 10px; text-decoration-color: transparent; -webkit-text-decoration-color: transparent; } .teaching-notes .teaching-container .notes .note .note-image { grid-column-start: 4; grid-column-end: 5; position: relative; height: 18vw; max-height: 270px; } @media (max-width: 1250px) { .teaching-notes .teaching-container .notes .note .note-image { height: 19vw; } } @media (max-width: 768px) { .teaching-notes .teaching-container .notes .note .note-image { grid-column-start: 2; grid-column-end: 3; grid-row-start: 1; width: 214px; height: 214px; margin-bottom: 20px; } } .teaching-notes .teaching-container .notes .note .download-note { position: absolute; top: -10px; right: 24px; width: 25px; height: 25px; border-radius: 50%; background-color: #FA5C58; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); display: flex; align-items: center; justify-content: center; } .teaching-notes .teaching-container .notes .note .download-note svg * { transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } .teaching-notes .teaching-container .notes .note .download-note:hover, .teaching-notes .teaching-container .notes .note .download-note:focus { background-color: #000; } .teaching-notes .teaching-container .notes .note .download-note:hover svg *, .teaching-notes .teaching-container .notes .note .download-note:focus svg * { fill: white; } .next-era { position: relative; background-color: #1E1E1E; margin-bottom: 0px; } @media (max-width: 1024px) { .next-era { margin-bottom: 0; } } .next-era .era-container { position: relative; display: block; padding: 0; text-decoration: none; } @media (max-width: 768px) { .next-era .era-container { padding: 0; } } .next-era .era-container .glossaryLink { background-color: rgba(255, 255, 255, 0.15); } .next-era .era-container span.glossaryLink { border-bottom: dotted 1px #ffffff; color: #ffffff !important; } .next-era .era-container:hover .era-background, .next-era .era-container:focus .era-background { opacity: 0.75; } .next-era .era-container:hover .inner-container .content-container .next-btn, .next-era .era-container:focus .inner-container .content-container .next-btn { background-color: #fff; filter: invert(1); } .next-era .era-container .era-background { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-position: center; background-repeat: no-repeat; background-size: cover; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); filter: url(#duotone); } .next-era .era-container .inner-container { position: relative; display: flex; align-items: center; justify-content: center; flex-flow: column; padding: 0 60px; border-width: 10px; border-style: solid; border-color: var(--era-color); } @media (max-width: 1024px) { .next-era .era-container .inner-container { padding: 0 50px; } } @media (max-width: 768px) { .next-era .era-container .inner-container { padding: 0 40px; border-width: 6px; } } .next-era .era-container .inner-container .flag { height: 74px; width: 53px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 15px; background-color: var(--era-color); } @media (max-width: 768px) { .next-era .era-container .inner-container .flag { height: 54px; width: 40px; padding-bottom: 10px; } .next-era .era-container .inner-container .flag svg { width: 15px; } } .next-era .era-container .inner-container .content-container { width: 100%; max-width: 760px; text-align: center; padding: 35px 0 60px; } @media (max-width: 1024px) { .next-era .era-container .inner-container .content-container { padding: 30px 0 50px; } } @media (max-width: 768px) { .next-era .era-container .inner-container .content-container { padding: 25px 0 40px; } } .next-era .era-container .inner-container .content-container em { font-family: alegreya, Helvetica, Arial, sans-serif; font-style: italic; font-weight: 400; font-size: 24px; line-height: 1.333; color: #fff; margin: 0 0 5px; display: block; } @media (max-width: 768px) { .next-era .era-container .inner-container .content-container em { font-size: 20px; } } .next-era .era-container .inner-container .content-container h2 { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 900; font-size: 60px; line-height: 1; color: #fff; text-transform: uppercase; margin: 0 0 20px; } @media (max-width: 1024px) { .next-era .era-container .inner-container .content-container h2 { font-size: 50px; } } @media (max-width: 768px) { .next-era .era-container .inner-container .content-container h2 { font-size: 40px; line-height: 1.1; } } .next-era .era-container .inner-container .content-container .next-btn { width: 50px; height: 50px; background-color: #FA5C58; display: flex; align-items: center; justify-content: center; border-radius: 50%; margin: 0 auto; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } @media (max-width: 768px) { .next-era .era-container .inner-container .content-container .next-btn { width: 40px; height: 40px; } } @media (max-width: 768px) { .next-era .era-container .inner-container .content-container .next-btn svg { width: 16px; } } .era-fixed { height: 48px; display: flex; width: 100%; max-width: 100%; padding: 12px 34px; align-items: center; gap: 9px; background-color: var(--era-color); position: fixed; bottom: 0; left: 0; z-index: 5; } .era-fixed p { color: white; margin: 0; font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 15px; font-style: normal; font-weight: 700; line-height: 1.3; line-height: normal; text-transform: uppercase; } .era-fixed .beyond { color: #FFF; font-family: alegreya, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 18px; font-style: italic; font-weight: 400; line-height: normal; letter-spacing: 0.18px; line-height: 17.5px; } @media (max-width: 600px) { .era-fixed { bottom: unset; top: 111px; padding-left: 20px; } .era-fixed .beyond { display: none; } } .home-feature { position: relative; min-height: calc(100vh - 120px); padding: 120px 40px; display: flex; align-items: center; justify-content: center; /*.marble-background { position: fixed; z-index: 0; top: 0; left: 0; right: 0; bottom: 0; background-color: $black; @include background-cover(); background-image: url("../images/2x/marble_blue-black_full.jpg"); }*/ } @media (max-width: 1175px) { .home-feature { min-height: unset; } } @media (max-width: 1024px) { .home-feature { height: auto; } } .home-feature .feature-background { position: fixed; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background-color: #000; display: flex; align-items: center; justify-content: center; filter: url(#duotone); } .home-feature .feature-background .video-background { position: absolute; height: 120%; } .home-feature .feature-background .overlay { background-color: #1F1F1F; position: absolute; top: 0; left: 0; bottom: 0; right: 0; opacity: 0.8; display: none; } .home-feature .feature-content { position: relative; width: 100%; max-width: 1198px; display: flex; justify-content: center; align-items: center; gap: 150px; text-align: left; } .home-feature .feature-content h1 { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 24px; line-height: 1.166; letter-spacing: 0.08em; color: #6DC7FF; margin: 0; } @media (max-width: 1024px) { .home-feature .feature-content h1 { font-size: 22px; } } @media (max-width: 768px) { .home-feature .feature-content h1 { font-size: 20px; } } .home-feature .feature-content h2 { font-family: alegreya, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 77px; line-height: 1; color: #fff; margin: 0 0 30px; } @media (max-width: 1175px) { .home-feature .feature-content h2 { font-size: 60px; } } @media (max-width: 1024px) { .home-feature .feature-content h2 { font-size: 60px; line-height: 1.1; } } @media (max-width: 768px) { .home-feature .feature-content h2 { font-size: 50px; line-height: 1.2; } } .home-feature .feature-content p { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 18px; line-height: 140%; color: #fff; width: 100%; max-width: 100%; margin: 0; } @media (max-width: 1024px) { .home-feature .feature-content p { font-size: 0.9375em; } } @media (max-width: 768px) { .home-feature .feature-content p { font-size: 0.875em; } } .home-feature .feature-content .feature-title-area { max-width: 100%; width: 579px; } .home-feature .bottom-fade { position: absolute; width: 100%; height: 166px; left: 0; right: 0; bottom: 0; background-image: linear-gradient(rgba(31, 31, 31, 0), #161616); } .home-feature .video-controls { position: absolute; bottom: 40px; right: 40px; z-index: 2; } .home-feature .video-controls .video-background-controls.playing button.video-pause { opacity: 1; pointer-events: all; } .home-feature .video-controls .video-background-controls.playing button.video-play { opacity: 0; pointer-events: none; } .home-feature .video-controls .video-background-controls button { cursor: pointer; background: none; border: none; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } .home-feature .video-controls .video-background-controls button:hover svg, .home-feature .video-controls .video-background-controls button:focus svg { opacity: 0.7; } .home-feature .video-controls .video-background-controls button.video-pause { opacity: 0; pointer-events: none; } .home-feature .video-controls .video-background-controls button.video-play { opacity: 1; position: absolute; left: 0; pointer-events: all; } .home-feature .video-controls .video-background-controls button svg { width: 12px; height: 13px; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } .home-feature .video-controls .video-background-controls button svg path { fill: #fff; } .home-feature .video-controls .video-background-controls button svg line { stroke: #fff; } .home-feature .bottom-lines { position: absolute; bottom: 0; width: 29px; height: 66px; } .home-feature .bottom-lines div { width: 5px; height: 100%; background-color: #6DC7FF; position: absolute; top: 0; } .home-feature .bottom-lines div:first-of-type { left: 0; } .home-feature .bottom-lines div:nth-of-type(2) { left: 0; right: 0; margin: 0 auto; } .home-feature .bottom-lines div:last-of-type { right: 0; } .home-body { position: relative; background-size: 100%; background-position: top center; background-repeat: repeat-y; /*background-color: $black; background-image: url("../images/2x/marble-home-full.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat;*/ } .home-body .marble-background { width: 100%; height: 100vh; position: -webkit-sticky; position: sticky; z-index: 0; top: 0; left: 0; right: 0; background-color: #000; background-image: url("../images/2x/marble_blue-black_full.jpg"); background-size: 100%; background-position: top center; background-repeat: repeat-y; background-size: cover; } .home-body .top-fade { position: absolute; width: 100%; height: 366px; left: 0; right: 0; top: 0; background-image: linear-gradient(#161616, rgba(31, 31, 31, 0)); } .home-body .home-sections { position: relative; margin-top: -100vh; } .home-body .bottom-lines { position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto; width: 29px; height: 115px; } @media (max-width: 1024px) { .home-body .bottom-lines { height: 80px; } } @media (max-width: 768px) { .home-body .bottom-lines { height: 60px; } } @media (max-width: 640px) { .home-body .bottom-lines { display: none; } } .home-body .bottom-lines div { width: 5px; height: 100%; background-color: #6DC7FF; position: absolute; top: 0; } .home-body .bottom-lines div:first-of-type { left: 0; } .home-body .bottom-lines div:nth-of-type(2) { left: 0; right: 0; margin: 0 auto; } .home-body .bottom-lines div:last-of-type { right: 0; } .home-feature-slider { position: relative; margin: 40px auto 0; max-width: 400px; width: 350px; min-height: 320px; max-height: 400px; display: flex; flex-direction: row-reverse; align-items: center; gap: 27px; margin-right: 0px; } @media (max-width: 600px) { .home-feature-slider { max-height: unset; flex-direction: column; margin-left: 0px; } .home-feature-slider .slider-navigation { flex-direction: row; } } @media (max-width: 450px) { .home-feature-slider { max-width: 100%; } } .home-feature-slider .slick-slider { display: flex; align-items: flex-start; overflow: hidden; position: relative; margin: 40px auto 0; max-width: 400px; min-height: 320px; max-height: 400px; width: 400px; flex-shrink: 0; /* Style the THIRD card (the slide two places after the active one) */ } .home-feature-slider .slick-slider .slick-list .slick-track { display: flex; position: relative; min-height: 400px; } .home-feature-slider .slick-slider .slider-item { background: #fff; box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.35); display: flex; width: 328px; padding: 30px; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 378px; max-width: 100%; width: 378px; max-height: 340px; min-height: 320px; /*display: flex;*/ position: absolute; flex-direction: column; align-items: flex-start; justify-content: flex-start; z-index: 1; transform: translateY(28px) translateX(28px) scale(0.9); top: 0; left: 0; opacity: 0; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } .home-feature-slider .slick-slider .slider-item .slider-image { width: 100%; aspect-ratio: 16/9; background: #d9d9d9; background-size: cover; background-position: center; border-radius: 0px; margin-bottom: 10px; overflow: hidden; } .home-feature-slider .slick-slider .slider-item .slider-title { font-family: alegreya, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 22px; color: #1e1e1e; text-decoration: underline; text-underline-offset: 13%; text-decoration-color: #fa5c58; font-weight: bold; margin: 0; width: 100%; } @media (max-width: 450px) { .home-feature-slider .slick-slider .slider-item { min-width: 275px; } } .home-feature-slider .slick-slider .slick-current { z-index: 3; transform: translateY(0) scale(1); } .home-feature-slider .slick-slider .slick-current, .home-feature-slider .slick-slider .slick-current + .slick-slide, .home-feature-slider .slick-slider .slick-current + .slick-slide + .slick-slide { opacity: 1; } .home-feature-slider .slick-slider .slick-current + .slick-slide { z-index: 2; transform: translateY(14px) translateX(14px) scale(0.95); } .home-feature-slider .slick-slider .slick-current + .slick-slide + .slick-slide { z-index: 1; transform: translateY(28px) translateX(28px) scale(0.9); } @media (max-width: 450px) { .home-feature-slider .slick-slider { max-width: 100%; } } .home-feature-slider .slider-arrow { background: none; border: none; cursor: pointer; } .home-feature-slider .slider-arrow svg { display: block; width: 26px; } .home-feature-slider .play-pause { position: relative; height: 15px; width: 100%; } .home-feature-slider .play-pause svg { position: absolute; top: 0; opacity: 0; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } .home-feature-slider .play-pause svg.active { opacity: 1; } .home-feature-slider .slider-label { position: absolute; top: -30px; left: -50px; background: none; padding: 0; } @media (max-width: 600px) { .home-feature-slider .slider-label { left: 0px; } } .home-feature-slider .slider-label p { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 16px; color: #fff; letter-spacing: 0.08em; text-transform: uppercase; position: relative; top: 15px; } .home-feature-slider .slider-label p::after { content: ""; display: block; position: absolute; width: 150px; height: 75px; background-image: url("../images/2x/hero_circle.png"); background-size: 100%; background-repeat: no-repeat; top: 50%; left: -30%; transform: translateY(-50%); } @media (max-width: 1000px) { .home-feature-slider { margin: auto; } } @media (max-width: 600px) { .home-feature-slider { margin-left: 0px; width: 100%; } } .slider-navigation { position: relative; display: flex; flex-direction: column; gap: 18px; } @media (max-width: 1000px) { .home-feature .feature-content { z-index: 1; flex-wrap: wrap; gap: 90px; } } @media (max-width: 500px) { .home-feature .feature-content h2 { font-size: 40px; line-height: 50px; } } .home-filters { position: relative; display: grid; grid-template-columns: repeat(14, 1fr); padding-bottom: 155px; } @media (max-width: 1024px) { .home-filters { padding-bottom: 120px; } } @media (max-width: 768px) { .home-filters { padding-bottom: 80px; } } @media (max-width: 640px) { .home-filters { padding-bottom: 0; } } .home-filters .filters-container { grid-column-start: 3; grid-column-end: 13; border: 10px #6DC7FF solid; padding: 70px 25px 55px; max-width: 1198px; margin: auto; } @media (max-width: 1250px) { .home-filters .filters-container { grid-column-start: 2; grid-column-end: 14; } } @media (max-width: 1024px) { .home-filters .filters-container { padding: 55px 20px; border-width: 6px; } } @media (max-width: 768px) { .home-filters .filters-container { padding: 50px 20px 40px; } } .home-filters .filters-container .title-area { text-align: center; margin-bottom: 30px; } .home-filters .filters-container .title-area h2 { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 28px; line-height: 1.2; color: #fff; } @media (max-width: 1024px) { .home-filters .filters-container .title-area h2 { font-size: 24px; } } @media (max-width: 768px) { .home-filters .filters-container .title-area h2 { font-size: 20px; } } .home-filters .filters-container .filters { display: flex; } @media (max-width: 768px) { .home-filters .filters-container .filters { flex-flow: column; } } .home-filters .filters-container .filters .or { padding: 16px 4px; } @media (max-width: 1250px) { .home-filters .filters-container .filters .or { padding: 16px 0; } } @media (max-width: 1024px) { .home-filters .filters-container .filters .or { display: none; } } .home-filters .filters-container .filters .or span { display: block; font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 500; font-size: 16px; line-height: 1.1; color: #A3A3A3; letter-spacing: 0.04em; text-transform: uppercase; } .home-filters .filters-container .filters .filter { width: 100%; padding: 0 20px; } @media (max-width: 1024px) { .home-filters .filters-container .filters .filter { padding: 0 15px; } } @media (max-width: 768px) { .home-filters .filters-container .filters .filter { padding: 0 20px 15px; } } .home-filters .filters-container .filters .filter .filter-container { position: relative; display: flex; } @media (max-width: 768px) { .home-filters .filters-container .filters .filter .filter-container { justify-content: center; } } .home-filters .filters-container .filters .filter .filter-container .submit-filter { position: relative; font-size: 0; cursor: pointer; display: block; width: 50px; height: 50px; flex: 0 0 50px; border-radius: 50%; border: 2px #FA5C58 solid; margin-left: 10px; display: flex; align-items: center; justify-content: center; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); background: transparent; } @media (max-width: 1024px) { .home-filters .filters-container .filters .filter .filter-container .submit-filter { width: 35px; height: 35px; flex: 0 0 35px; } } @media (max-width: 768px) { .home-filters .filters-container .filters .filter .filter-container .submit-filter { background-color: #FA5C58; } } .home-filters .filters-container .filters .filter .filter-container .submit-filter.deactivated { pointer-events: none; } .home-filters .filters-container .filters .filter .filter-container .submit-filter:hover, .home-filters .filters-container .filters .filter .filter-container .submit-filter:focus { background-color: #FA5C58; } @media (max-width: 768px) { .home-filters .filters-container .filters .filter .filter-container .submit-filter:hover, .home-filters .filters-container .filters .filter .filter-container .submit-filter:focus { background-color: transparent; } } .home-filters .filters-container .filters .filter .filter-container .submit-filter:hover svg path, .home-filters .filters-container .filters .filter .filter-container .submit-filter:focus svg path { fill: #1F1F1F; } @media (max-width: 768px) { .home-filters .filters-container .filters .filter .filter-container .submit-filter:hover svg path, .home-filters .filters-container .filters .filter .filter-container .submit-filter:focus svg path { fill: #fff; } } .home-filters .filters-container .filters .filter .filter-container .submit-filter svg { width: 22px; } @media (max-width: 1024px) { .home-filters .filters-container .filters .filter .filter-container .submit-filter svg { width: 16px; } } .home-filters .filters-container .filters .filter .filter-container .submit-filter svg path { transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } @media (max-width: 768px) { .home-filters .filters-container .filters .filter .filter-container .submit-filter svg path { fill: #1F1F1F; } } .home-filters .filters-container .filters .filter .filter-container .submit-arrow { pointer-events: none; position: absolute; width: 50px; height: 50px; right: 0; top: 0; display: flex; align-items: center; justify-content: center; } @media (max-width: 1024px) { .home-filters .filters-container .filters .filter .filter-container .submit-arrow { width: 35px; height: 35px; } } .home-filters .filters-container .filters .filter .filter-container .submit-arrow svg { width: 22px; } @media (max-width: 1024px) { .home-filters .filters-container .filters .filter .filter-container .submit-arrow svg { width: 16px; } } .home-filters .filters-container .filters .filter em { padding-top: 5px; display: block; font-family: alegreya, Helvetica, Arial, sans-serif; font-style: italic; font-weight: 400; font-size: 14px; line-height: 1; color: #A3A3A3; padding-right: 60px; } @media (max-width: 1024px) { .home-filters .filters-container .filters .filter em { padding-right: 45px; } } @media (max-width: 768px) { .home-filters .filters-container .filters .filter em { display: none; } } .home-filters .bottom-lines { position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto; width: 29px; height: 155px; } @media (max-width: 1024px) { .home-filters .bottom-lines { height: 120px; } } @media (max-width: 768px) { .home-filters .bottom-lines { height: 80px; } } @media (max-width: 640px) { .home-filters .bottom-lines { display: none; } } .home-filters .bottom-lines div { width: 5px; height: 100%; background-color: #6DC7FF; position: absolute; top: 0; } .home-filters .bottom-lines div:first-of-type { left: 0; } .home-filters .bottom-lines div:nth-of-type(2) { left: 0; right: 0; margin: 0 auto; } .home-filters .bottom-lines div:last-of-type { right: 0; } .home-filters .bottom-bottom-lines { position: absolute; bottom: -230px; left: 0; right: 0; margin: 0 auto; width: 29px; height: 230px; } @media (max-width: 1024px) { .home-filters .bottom-bottom-lines { height: 100px; bottom: -100px; } } .home-filters .bottom-bottom-lines div { width: 5px; height: 100%; background-color: #6DC7FF; position: absolute; top: 0; } .home-filters .bottom-bottom-lines div:first-of-type { left: 0; } .home-filters .bottom-bottom-lines div:nth-of-type(2) { left: 0; right: 0; margin: 0 auto; height: calc(100% - 30px); } @media (max-width: 640px) { .home-filters .bottom-bottom-lines div:nth-of-type(2) { height: calc(100% - 15px); } } .home-filters .bottom-bottom-lines div:last-of-type { right: 0; height: calc(100% - 60px); } @media (max-width: 640px) { .home-filters .bottom-bottom-lines div:last-of-type { height: calc(100% - 30px); } } .home-history { position: relative; display: grid; grid-template-columns: repeat(14, 1fr); padding: 115px 0; } @media (max-width: 1024px) { .home-history { padding: 80px 0; } } @media (max-width: 768px) { .home-history { padding: 60px 0; } } @media (max-width: 640px) { .home-history { padding-bottom: 40px; } } .home-history .history-container { position: relative; grid-column-start: 2; grid-column-end: 14; display: grid; grid-template-columns: 1fr 10fr 1fr; padding: 90px 0; border: 10px #6DC7FF solid; } @media (max-width: 1024px) { .home-history .history-container { padding: 8vw 0; } } @media (max-width: 1024px) { .home-history .history-container { border-width: 6px; } } .home-history .history-container .rosette { position: absolute; top: -40px; justify-self: center; } @media (max-width: 640px) { .home-history .history-container .rosette { display: none; } } .home-history .history-container .inner-container { grid-column-start: 2; grid-column-end: 3; display: flex; } @media (max-width: 768px) { .home-history .history-container .inner-container { flex-flow: column-reverse; } } .home-history .history-container .inner-container .history-content { width: 100%; padding-right: 50px; } @media (max-width: 1024px) { .home-history .history-container .inner-container .history-content { padding-right: 40px; } } @media (max-width: 768px) { .home-history .history-container .inner-container .history-content { padding-top: 10px; } } .home-history .history-container .inner-container .history-content h2 { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 16px; line-height: 1.1875; color: #6DC7FF; margin: 0; text-transform: uppercase; letter-spacing: 0.05em; } @media (max-width: 1024px) { .home-history .history-container .inner-container .history-content h2 { font-size: 15px; } } @media (max-width: 768px) { .home-history .history-container .inner-container .history-content h2 { font-size: 14px; position: absolute; top: -35px; left: -5px; } } .home-history .history-container .inner-container .history-content h3 { font-family: alegreya, Helvetica, Arial, sans-serif; font-style: italic; font-weight: 400; font-size: 58px; line-height: 1.12; color: #fff; margin: 0 0 10px; } @media (max-width: 1250px) { .home-history .history-container .inner-container .history-content h3 { font-size: 50px; } } @media (max-width: 1024px) { .home-history .history-container .inner-container .history-content h3 { font-size: 40px; } } @media (max-width: 768px) { .home-history .history-container .inner-container .history-content h3 { font-size: 30px; } } .home-history .history-container .inner-container .history-content p { font-family: alegreya, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 1.5625em; line-height: 1.36; color: #fff; margin: 0; } @media (max-width: 1250px) { .home-history .history-container .inner-container .history-content p { font-size: 1.375em; } } @media (max-width: 1024px) { .home-history .history-container .inner-container .history-content p { font-size: 1.125em; } } @media (max-width: 768px) { .home-history .history-container .inner-container .history-content p { font-size: 1em; } } .home-history .history-container .inner-container .history-image { position: relative; flex: 0 0 45.73%; height: 21.5vw; max-height: 300px; } @media (max-width: 768px) { .home-history .history-container .inner-container .history-image { flex: auto; height: 50vw; margin-top: 0; } } .home-history .history-container .inner-container .history-image:before { content: ''; width: 464px; height: 275px; position: absolute; top: -100px; right: -122px; background-image: url("../images/svg/scribbles-history.svg"); background-size: contain; background-position: top right; background-repeat: no-repeat; } @media (max-width: 768px) { .home-history .history-container .inner-container .history-image:before { display: none; } } .home-signup { position: relative; padding: 185px 60px; /*.signup-background { @include absolute-options(null, true); @include background-cover(); @include duotone(); }*/ } @media (max-width: 1024px) { .home-signup { padding: 18vw 40px; } } @media (max-width: 640px) { .home-signup { padding: 100px 0 60px; text-align: center; } .home-signup .btn.on-dark { background-color: #FA5C58; color: #1F1F1F; } .home-signup .btn.on-dark:hover, .home-signup .btn.on-dark:focus { background-color: transparent; color: #fff; } .home-signup .btn.on-dark:hover svg path, .home-signup .btn.on-dark:focus svg path { fill: #fff; } .home-signup .btn.on-dark svg path { fill: #1F1F1F; } } .home-signup .top-lines { position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; width: 29px; height: 185px; } @media (max-width: 1024px) { .home-signup .top-lines { height: 18vw; } } @media (max-width: 640px) { .home-signup .top-lines { height: 140px; top: -40px; } } .home-signup .top-lines div { width: 5px; height: 100%; background-color: #6DC7FF; position: absolute; top: 0; } .home-signup .top-lines div:first-of-type { left: 0; } .home-signup .top-lines div:nth-of-type(2) { left: 0; right: 0; margin: 0 auto; height: calc(100% - 30px); } @media (max-width: 640px) { .home-signup .top-lines div:nth-of-type(2) { height: calc(100% - 15px); } } .home-signup .top-lines div:last-of-type { right: 0; height: calc(100% - 60px); } @media (max-width: 640px) { .home-signup .top-lines div:last-of-type { height: calc(100% - 30px); } } .home-signup .signup-container { position: relative; width: 100%; max-width: 600px; margin: auto; text-align: center; padding: 40px; } @media (max-width: 640px) { .home-signup .signup-container { padding: 40px 30px; } } .home-signup .signup-container h2 { font-family: alegreya, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 50px; line-height: 1.12; color: #fff; margin: 0 0 25px; } @media (max-width: 1024px) { .home-signup .signup-container h2 { font-size: 42px; } } @media (max-width: 768px) { .home-signup .signup-container h2 { font-size: 34px; } } .home-timeline { position: relative; } @media (max-width: 1024px) { .home-timeline { height: auto !important; } } .home-timeline .timeline-container { overflow: hidden; display: flex; position: -webkit-sticky; position: sticky; top: 0; height: 100vh; } @media (max-width: 1024px) { .home-timeline .timeline-container { height: auto; position: relative; top: auto; flex-flow: column; } } .home-timeline .timeline-container::-webkit-scrollbar { display: none; } @media (max-width: 1024px) { .home-timeline .timeline-container::-webkit-scrollbar { display: block; } } .home-timeline .timeline-container .timeline-entrance { min-width: 100vw; min-height: calc(100vh - 55px); display: flex; justify-content: center; align-items: center; padding: 130px 75px; } @media (max-width: 1024px) { .home-timeline .timeline-container .timeline-entrance { height: auto; min-height: auto; min-width: auto; padding: 160px 35px 80px; } } .home-timeline .timeline-container .timeline-entrance .top-lines { position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; width: 29px; height: 230px; } @media (max-width: 1024px) { .home-timeline .timeline-container .timeline-entrance .top-lines { height: 100px; } } .home-timeline .timeline-container .timeline-entrance .top-lines div { width: 5px; height: 100%; background-color: #6DC7FF; position: absolute; top: 0; } .home-timeline .timeline-container .timeline-entrance .top-lines div:first-of-type { left: 0; } .home-timeline .timeline-container .timeline-entrance .top-lines div:nth-of-type(2) { left: 0; right: 0; margin: 0 auto; height: calc(100% - 30px); } @media (max-width: 1024px) { .home-timeline .timeline-container .timeline-entrance .top-lines div:nth-of-type(2) { height: calc(100% - 15px); } } .home-timeline .timeline-container .timeline-entrance .top-lines div:last-of-type { right: 0; height: calc(100% - 60px); } @media (max-width: 1024px) { .home-timeline .timeline-container .timeline-entrance .top-lines div:last-of-type { height: calc(100% - 30px); } } .home-timeline .timeline-container .timeline-entrance .content-container { width: 100%; max-width: 600px; margin: 0 auto; text-align: center; } @media (max-width: 1024px) { .home-timeline .timeline-container .timeline-entrance .content-container { max-width: 550px; } } .home-timeline .timeline-container .timeline-entrance .content-container h2 { font-family: alegreya, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 50px; line-height: 1.12; color: #fff; margin: 0 0 10px; } @media (max-width: 1024px) { .home-timeline .timeline-container .timeline-entrance .content-container h2 { font-size: 45px; } } @media (max-width: 768px) { .home-timeline .timeline-container .timeline-entrance .content-container h2 { font-size: 40px; } } @media (max-width: 640px) { .home-timeline .timeline-container .timeline-entrance .content-container h2 { font-size: 30px; } } .home-timeline .timeline-container .timeline-entrance .content-container p { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 1.125em; line-height: 1.555; color: #fff; width: 100%; max-width: 375px; margin: 0 auto; } @media (max-width: 1024px) { .home-timeline .timeline-container .timeline-entrance .content-container p { font-size: 1em; } } @media (max-width: 640px) { .home-timeline .timeline-container .timeline-entrance .content-container p { font-size: 0.875em; } } .home-timeline .timeline-container .timeline-era { position: relative; padding: 130px 200px 130px 75px; min-height: calc(100vh - 55px); display: flex; justify-content: center; align-items: center; background-color: #1F1F1F; background-image: url("../images/2x/marble_black-g.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; } @media (max-width: 1024px) { .home-timeline .timeline-container .timeline-era { flex-flow: column; height: auto; min-height: auto; padding: 0 0 55px; background-image: none; overflow: hidden; } } .home-timeline .timeline-container .timeline-era .inner-container { display: flex; min-height: 480px; } @media (max-width: 1024px) { .home-timeline .timeline-container .timeline-era .inner-container { flex-flow: column; } } .home-timeline .timeline-container .timeline-era .era-year { font-family: alegreya, Helvetica, Arial, sans-serif; font-style: italic; font-weight: 400; font-size: 76px; line-height: 1; color: #fff; display: block; position: absolute; z-index: 2; bottom: 70px; left: -200px; } @media (max-width: 1024px) { .home-timeline .timeline-container .timeline-era .era-year { display: none; } } .home-timeline .timeline-container .timeline-era .era-year:after { content: ''; width: 151px; height: 27px; position: absolute; right: -151px; top: 38px; transform: translateY(-50%); background-image: url("../images/svg/year-accent.svg"); background-size: contain; background-position: center; background-repeat: no-repeat; } @media (max-width: 768px) { .home-timeline .timeline-container .timeline-era .era-year:after { top: 32px; } } .home-timeline .timeline-container .timeline-era .era-top { position: absolute; z-index: 2; top: 0; left: 0; right: 0; display: flex; justify-content: space-around; } .home-timeline .timeline-container .timeline-era .era-top .flag { position: absolute; top: 0; left: 100px; width: 39px; height: 71px; display: flex; align-items: flex-end; justify-content: center; padding: 11px; } @media (max-width: 1024px) { .home-timeline .timeline-container .timeline-era .era-top .flag { left: 0; right: 0; margin: 0 auto; } } .home-timeline .timeline-container .timeline-era .background-image { background-color: #1F1F1F; height: 100%; position: absolute; top: 0; left: 0; } @media (max-width: 1024px) { .home-timeline .timeline-container .timeline-era .background-image { position: relative; width: 100%; height: 65vw; } } .home-timeline .timeline-container .timeline-era .background-image img { height: 100%; width: auto; } @media (min-width: 1025px) { .home-timeline .timeline-container .timeline-era .background-image img { filter: url(#duotone); } } @media (max-width: 1024px) { .home-timeline .timeline-container .timeline-era .background-image img { display: none; } } .home-timeline .timeline-container .timeline-era .background-image .cover-image { display: none; } @media (max-width: 1024px) { .home-timeline .timeline-container .timeline-era .background-image .cover-image { display: block; } } .home-timeline .timeline-container .timeline-era .background-image .gradient-overlay { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-image: linear-gradient(to right, rgba(30, 30, 30, 0), #1e1e1e); } @media (max-width: 1024px) { .home-timeline .timeline-container .timeline-era .background-image .gradient-overlay { display: none; } } .home-timeline .timeline-container .timeline-era .era-primary { position: relative; display: flex; padding: 0 25px; } @media (max-width: 1024px) { .home-timeline .timeline-container .timeline-era .era-primary { flex-flow: column; padding: 0 35px; } } .home-timeline .timeline-container .timeline-era .era-primary .primary-content { padding-right: 25px; } @media (max-width: 1024px) { .home-timeline .timeline-container .timeline-era .era-primary .primary-content { padding-right: 0; padding: 40px 0 60px; text-align: center; } .home-timeline .timeline-container .timeline-era .era-primary .primary-content .btn.on-dark { background-color: #FA5C58; color: #1F1F1F; } .home-timeline .timeline-container .timeline-era .era-primary .primary-content .btn.on-dark:hover, .home-timeline .timeline-container .timeline-era .era-primary .primary-content .btn.on-dark:focus { background-color: transparent; color: #fff; } .home-timeline .timeline-container .timeline-era .era-primary .primary-content .btn.on-dark:hover svg path, .home-timeline .timeline-container .timeline-era .era-primary .primary-content .btn.on-dark:focus svg path { fill: #fff; } .home-timeline .timeline-container .timeline-era .era-primary .primary-content .btn.on-dark svg path { fill: #1F1F1F; } } .home-timeline .timeline-container .timeline-era .era-primary .primary-content em { font-family: alegreya, Helvetica, Arial, sans-serif; font-style: italic; font-weight: 400; font-size: 24px; line-height: 1.333; color: #fff; } @media (max-width: 1024px) { .home-timeline .timeline-container .timeline-era .era-primary .primary-content em { font-size: 22px; } } @media (max-width: 768px) { .home-timeline .timeline-container .timeline-era .era-primary .primary-content em { font-size: 20px; } } .home-timeline .timeline-container .timeline-era .era-primary .primary-content h2 { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 900; font-size: 60px; line-height: 1; color: #fff; text-transform: uppercase; margin: 0 0 30px; } @media (max-width: 1024px) { .home-timeline .timeline-container .timeline-era .era-primary .primary-content h2 { font-size: 50px; margin: 0 0 25px; } } @media (max-width: 768px) { .home-timeline .timeline-container .timeline-era .era-primary .primary-content h2 { font-size: 40px; } } .home-timeline .timeline-container .timeline-era .era-primary .primary-image { padding: 0 25px; width: 517px; flex: 0 0 517px; } @media (max-width: 1024px) { .home-timeline .timeline-container .timeline-era .era-primary .primary-image { display: none; padding: 0; width: 100%; margin-bottom: 50px; flex: auto; } } .home-timeline .timeline-container .timeline-era .era-primary .primary-image .image-container { position: relative; height: 306px; } @media (max-width: 1024px) { .home-timeline .timeline-container .timeline-era .era-primary .primary-image .image-container { height: 60vw; } } .home-timeline .timeline-container .timeline-era .era-primary .primary-image p { font-family: alegreya, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 1.125em; line-height: 1.555; color: #fff; margin: 20px 0 0; } @media (max-width: 1024px) { .home-timeline .timeline-container .timeline-era .era-primary .primary-image p { font-size: 1em; margin: 15px 0 0; } } @media (max-width: 640px) { .home-timeline .timeline-container .timeline-era .era-primary .primary-image p { font-size: 0.9375em; } } .home-timeline .timeline-container .timeline-era .era-cases { position: relative; display: flex; align-items: flex-end; padding: 0 25px; } @media (max-width: 1024px) { .home-timeline .timeline-container .timeline-era .era-cases { padding: 0 35px; flex-flow: column; margin-bottom: 30px; } } .home-timeline .timeline-container .timeline-era .era-cases .case-container { position: relative; padding: 0 25px; } @media (max-width: 1024px) { .home-timeline .timeline-container .timeline-era .era-cases .case-container { padding: 0; margin-bottom: 40px; } } .home-timeline .timeline-container .timeline-era .era-cases .case-container:nth-of-type(even) { padding-bottom: 110px; } @media (max-width: 1024px) { .home-timeline .timeline-container .timeline-era .era-cases .case-container:nth-of-type(even) { padding-bottom: 0; } } .home-timeline .timeline-container .timeline-era .era-cases .case-container em { position: relative; display: block; font-family: alegreya, Helvetica, Arial, sans-serif; font-style: italic; font-weight: 400; font-size: 34px; line-height: 1.2; color: #fff; margin: 0 0 10px; } @media (max-width: 1024px) { .home-timeline .timeline-container .timeline-era .era-cases .case-container em { font-size: 30px; color: #1F1F1F; position: absolute; top: 25px; left: 35px; z-index: 2; } } @media (max-width: 768px) { .home-timeline .timeline-container .timeline-era .era-cases .case-container em { font-size: 26px; } } @media (max-width: 640px) { .home-timeline .timeline-container .timeline-era .era-cases .case-container em { font-size: 22px; } } .home-timeline .timeline-container .timeline-era .era-cases .case-container em:before { content: ''; pointer-events: none; width: 132px; height: 124px; position: absolute; z-index: 2; left: -40px; top: -38px; background-size: contain; background-position: center; background-repeat: no-repeat; background-image: url("../images/svg/circle-timeline.svg"); } @media (max-width: 1024px) { .home-timeline .timeline-container .timeline-era .era-cases .case-container em:before { display: none; } } .home-timeline .timeline-container .timeline-era .era-cases .case-container .text-link { position: absolute; top: 15px; right: 25px; } @media (max-width: 1024px) { .home-timeline .timeline-container .timeline-era .era-cases .case-container .text-link { top: auto; bottom: -30px; right: 0; color: #FA5C58; } .home-timeline .timeline-container .timeline-era .era-cases .case-container .text-link:visited { color: #FA5C58; } .home-timeline .timeline-container .timeline-era .era-cases .case-container .text-link:focus { color: #FA5C58; } .home-timeline .timeline-container .timeline-era .era-cases .case-container .text-link:hover { color: #fff; } .home-timeline .timeline-container .timeline-era .era-cases .case-container .text-link:active { color: #FA5C58; } } .home-timeline .timeline-container .timeline-era .era-cases .case-container .case { width: 330px; position: relative; display: block; text-decoration: none; padding: 50px 45px 35px; background-color: #fff; } @media (max-width: 1024px) { .home-timeline .timeline-container .timeline-era .era-cases .case-container .case { width: 100%; padding: 60px 35px 25px; } } .home-timeline .timeline-container .timeline-era .era-cases .case-container .case:hover h3, .home-timeline .timeline-container .timeline-era .era-cases .case-container .case:focus h3 { text-decoration-color: #1F1F1F; -webkit-text-decoration-color: #1F1F1F; } .home-timeline .timeline-container .timeline-era .era-cases .case-container .case:hover svg path, .home-timeline .timeline-container .timeline-era .era-cases .case-container .case:focus svg path { fill: #1F1F1F; } .home-timeline .timeline-container .timeline-era .era-cases .case-container .case h3 { font-family: alegreya, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 38px; line-height: 1.05; color: #1F1F1F; margin: 0 0 20px; text-decoration: underline; text-decoration-color: #FA5C58; -webkit-text-decoration-color: #FA5C58; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } @media (max-width: 1024px) { .home-timeline .timeline-container .timeline-era .era-cases .case-container .case h3 { font-size: 34px; } } @media (max-width: 768px) { .home-timeline .timeline-container .timeline-era .era-cases .case-container .case h3 { font-size: 30px; } } @media (max-width: 640px) { .home-timeline .timeline-container .timeline-era .era-cases .case-container .case h3 { font-size: 24px; } } .home-timeline .timeline-container .timeline-era .era-cases .case-container .case p { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 0.875em; line-height: 1.571; color: #1F1F1F; } .home-timeline .timeline-container .timeline-era .era-cases .case-container .case svg { position: absolute; top: 30px; right: 32px; width: 25px; height: auto; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } @media (max-width: 1024px) { .home-timeline .timeline-container .timeline-era .era-cases .case-container .case svg { display: none; } } .home-timeline .timeline-container .timeline-era .era-cases .case-container .case svg path { transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } .home-timeline .timeline-container .timeline-era .era-media { position: relative; display: flex; padding: 10px 50px 0; } @media (max-width: 1024px) { .home-timeline .timeline-container .timeline-era .era-media { flex-flow: column; padding: 10px 35px 40px; } } .home-timeline .timeline-container .timeline-era .era-media .key-art { position: relative; width: 223px; flex: 0 0 223px; } @media (max-width: 1024px) { .home-timeline .timeline-container .timeline-era .era-media .key-art { width: 100%; flex: auto; } } .home-timeline .timeline-container .timeline-era .era-media .key-art img { width: 100%; } .home-timeline .timeline-container .timeline-era .era-media .key-art .cover-image { width: 100%; height: 317px; } .home-timeline .timeline-container .timeline-era .era-media .image-text { width: 240px; padding-left: 22px; } @media (max-width: 1024px) { .home-timeline .timeline-container .timeline-era .era-media .image-text { width: 100%; padding-left: 0; padding-top: 10px; } } .home-timeline .timeline-container .timeline-era .era-media .image-text p { position: relative; font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 0.9375em; line-height: 1.466; color: #fff; } .home-timeline .timeline-container .timeline-era .era-media .image-text p:after { content: ''; width: 32px; height: 5px; background-color: #fff; position: absolute; bottom: -30px; left: 0; } .home-timeline .timeline-container .timeline-era .era-subjects { position: relative; display: flex; padding: 0 25px; } @media (max-width: 1024px) { .home-timeline .timeline-container .timeline-era .era-subjects { padding: 0 35px; flex-flow: column; } } .home-timeline .timeline-container .timeline-era .era-subjects .subject { position: relative; display: block; margin: 20px 25px 0; text-decoration: none; } @media (max-width: 1024px) { .home-timeline .timeline-container .timeline-era .era-subjects .subject { display: flex; margin: 0; padding: 40px 0 30px; border-bottom: 1px #4E4E4E solid; } .home-timeline .timeline-container .timeline-era .era-subjects .subject:last-of-type { border-bottom: none; } } .home-timeline .timeline-container .timeline-era .era-subjects .subject:hover .subject-image .cover-image, .home-timeline .timeline-container .timeline-era .era-subjects .subject:focus .subject-image .cover-image { transform: scale(1.1); } .home-timeline .timeline-container .timeline-era .era-subjects .subject:hover h3, .home-timeline .timeline-container .timeline-era .era-subjects .subject:focus h3 { text-decoration-color: #fff; -webkit-text-decoration-color: #fff; } @media (max-width: 1024px) { .home-timeline .timeline-container .timeline-era .era-subjects .subject:hover h3, .home-timeline .timeline-container .timeline-era .era-subjects .subject:focus h3 { color: #fff; } } .home-timeline .timeline-container .timeline-era .era-subjects .subject:nth-of-type(odd) { margin-top: 130px; } @media (max-width: 1024px) { .home-timeline .timeline-container .timeline-era .era-subjects .subject:nth-of-type(odd) { margin: 0; } } .home-timeline .timeline-container .timeline-era .era-subjects .subject:first-of-type:after { content: ''; pointer-events: none; position: absolute; width: 237px; height: 55px; top: -16px; right: -125px; background-image: url("../images/svg/scribbles-timeline.svg"); background-size: contain; background-position: center; background-repeat: no-repeat; } @media (max-width: 1024px) { .home-timeline .timeline-container .timeline-era .era-subjects .subject:first-of-type:after { background-image: url("../images/svg/strokes_2_blue.svg"); transform: rotateX(180deg); width: 80px; height: 86px; right: auto; top: 20px; left: -45px; z-index: 1; } } .home-timeline .timeline-container .timeline-era .era-subjects .subject .subject-image { position: relative; width: 223px; height: 223px; overflow: hidden; } @media (max-width: 1024px) { .home-timeline .timeline-container .timeline-era .era-subjects .subject .subject-image { flex: 0 0 120px; height: 120px; z-index: 2; } } .home-timeline .timeline-container .timeline-era .era-subjects .subject .subject-image .cover-image { transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } @media (max-width: 1024px) { .home-timeline .timeline-container .timeline-era .era-subjects .subject .subject-content { padding-left: 30px; } } @media (max-width: 500px) { .home-timeline .timeline-container .timeline-era .era-subjects .subject .subject-content { padding-left: 20px; } } .home-timeline .timeline-container .timeline-era .era-subjects .subject h3 { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 20px; line-height: 1.2; margin: 10px 0 0; color: #fff; text-transform: none; text-decoration: underline; text-decoration-color: #FA5C58; -webkit-text-decoration-color: #FA5C58; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } @media (max-width: 1024px) { .home-timeline .timeline-container .timeline-era .era-subjects .subject h3 { margin: 0; color: #FA5C58; } } @media (max-width: 768px) { .home-timeline .timeline-container .timeline-era .era-subjects .subject h3 { font-size: 18px; } } .home-timeline .timeline-container .timeline-era .era-subjects .subject em { display: block; font-family: alegreya, Helvetica, Arial, sans-serif; font-style: italic; font-weight: 400; font-size: 16px; line-height: 1.625; color: #A3A3A3; margin: 0 0 15px; } @media (max-width: 1024px) { .home-timeline .timeline-container .timeline-era .era-subjects .subject em { margin: 0 0 12px; } } .home-timeline .timeline-container .timeline-era .era-subjects .subject p { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 0.9375em; line-height: 1.466; color: #fff; } @media (max-width: 640px) { .home-timeline .timeline-container .timeline-era .era-subjects .subject p { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 0.875em; line-height: 1.466; } } .home-timeline .timeline-container .timeline-era .era-events { position: absolute; z-index: 2; top: 0; left: 0; right: 0; display: flex; justify-content: flex-start; padding: 0 50px 0 700px; } @media (max-width: 1024px) { .home-timeline .timeline-container .timeline-era .era-events { position: relative; flex-flow: column; justify-content: center; width: 100%; padding: 0 35px; margin-top: 40px; } .home-timeline .timeline-container .timeline-era .era-events .significant-year { transform: none !important; } .home-timeline .timeline-container .timeline-era .era-events:after { content: ''; pointer-events: none; position: absolute; width: 237px; height: 55px; top: 20px; right: -100px; background-image: url("../images/svg/scribbles-timeline.svg"); background-size: contain; background-position: center; background-repeat: no-repeat; transform: rotate(15deg); } } @media (max-width: 1024px) and (max-width: 400px) { .home-timeline .timeline-container .timeline-era .era-events:after { display: none; } } .home-timeline .timeline-container .timeline-era .era-events h3 { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 15px; line-height: 1.2; color: #fff; text-transform: uppercase; margin: 0 0 15px; } .home-timeline .timeline-container .timeline-era .era-events .significant-year { display: flex; align-items: center; position: relative; top: 5px; transform: translateX(-100%); } @media (max-width: 1024px) { .home-timeline .timeline-container .timeline-era .era-events .significant-year { display: block; top: 0; } .home-timeline .timeline-container .timeline-era .era-events .significant-year:last-of-type .description { padding-bottom: 25px; } } .home-timeline .timeline-container .timeline-era .era-events .significant-year em { font-family: alegreya, Helvetica, Arial, sans-serif; font-style: italic; font-weight: 400; font-size: 22px; line-height: 1.41; color: #fff; padding-right: 26px; padding-bottom: 6px; } @media (max-width: 1024px) { .home-timeline .timeline-container .timeline-era .era-events .significant-year em { position: absolute; z-index: 2; display: block; width: 100%; padding: 0; top: 17px; left: 20px; line-height: 1; font-size: 20px; } .home-timeline .timeline-container .timeline-era .era-events .significant-year em:after { content: ''; display: block; position: absolute; width: calc(100% - 40px); height: 1px; background-color: #4E4E4E; top: 11px; right: 40px; } .home-timeline .timeline-container .timeline-era .era-events .significant-year em span { position: relative; z-index: 2; display: inline-block; background-color: #3E3E3E; padding-right: 10px; } } @media (max-width: 768px) { .home-timeline .timeline-container .timeline-era .era-events .significant-year em { font-size: 18px; } } .home-timeline .timeline-container .timeline-era .era-events .significant-year .description { position: relative; background-color: #3E3E3E; padding: 10px 22px 12px; min-height: 44px; display: flex; align-items: center; max-width: 286px; } @media (max-width: 1024px) { .home-timeline .timeline-container .timeline-era .era-events .significant-year .description { padding: 42px 20px 0; max-width: none; } } .home-timeline .timeline-container .timeline-era .era-events .significant-year .description:before { content: ''; width: 1px; height: 58px; position: absolute; top: 0; left: 0; background-color: #656565; } @media (max-width: 1024px) { .home-timeline .timeline-container .timeline-era .era-events .significant-year .description:before { display: none; } } .home-timeline .timeline-container .timeline-era .era-events .significant-year .description span { font-family: alegreya, Helvetica, Arial, sans-serif; font-style: italic; font-weight: 400; font-size: 14px; line-height: 1.291; color: #fff; } .hometowns_flex { display: flex; gap: 20px; align-items: center; } @media (max-width: 640px) { .hometowns_flex { flex-direction: column; align-items: flex-start; } } .hometowns_flex p { margin-bottom: 0; color: #1F1F1F; font-size: 16px; font-style: italic; font-weight: 500; line-height: normal; } @media (max-width: 1080px) { .hometowns_flex { margin-bottom: 30px; } } .single-hometowns .feature-container, .single-hometowns .feature-content, .page-template-educator-resources .feature-container, .page-template-educator-resources .feature-content { display: flex; justify-content: space-between; max-width: 1182px; } .single-hometowns .content-container.head, .page-template-educator-resources .content-container.head { display: flex; flex-direction: column; gap: 30px; } .single-hometowns .content-container.head .title-area h5, .page-template-educator-resources .content-container.head .title-area h5 { margin: 0; } .single-hometowns .content-container.head .paragraph-area, .page-template-educator-resources .content-container.head .paragraph-area { margin-bottom: 0; max-width: 250px; } .single-hometowns .content-container.head .paragraph-area h3, .page-template-educator-resources .content-container.head .paragraph-area h3 { color: #1F1F1F; font-size: 26px; font-style: normal; font-weight: 700; line-height: normal; margin-bottom: 6px; } .single-hometowns .content-container.head .paragraph-area h4, .page-template-educator-resources .content-container.head .paragraph-area h4 { margin: 0; max-width: 300px; text-transform: none; } .single-hometowns .feature-image, .page-template-educator-resources .feature-image { width: 100%; } @media (max-width: 1200px) { .single-hometowns .feature-content, .single-hometowns .content-container.head, .page-template-educator-resources .feature-content, .page-template-educator-resources .content-container.head { width: 100%; } } @media (max-width: 1200px) { .article-feature .feature-container { display: flex; } .article-feature .feature-image { width: 100%; } .article-feature .feature-content .content-container, .article-feature .feature-content .content-container .title-area.shortened { width: 100%; grid-column-start: 1; grid-column-end: 8; } .article-feature .feature-content .content-container .title-area.shortened { margin-bottom: 20px; } } .hometowns-wrapper { background: white; padding-top: 0px; } .hometowns-wrapper .alignwide, .hometowns-wrapper .alignfull { max-width: 100%; } .hometowns-wrapper .quick-downloads { background: url("../images/2x/marble-background.jpg") lightgray 50%/cover no-repeat; } .significant-quotes { background: url("../images/2x/blue-marble.jpg") lightgray 50%/cover no-repeat; } .hometowns-container > *, .art_container > *:not(.article-feature, .content_wrapper) { max-width: 100%; margin-left: auto; margin-right: auto; } @media (max-width: 1300px) { .hometowns-container > *, .art_container > *:not(.article-feature, .content_wrapper) { max-width: 90%; } .hometowns-container > * .overview-content .wp-block-heading, .art_container > *:not(.article-feature, .content_wrapper) .overview-content .wp-block-heading { width: 100%; } } #main-content .cta-box, .cta-box { margin-top: 55px; margin-bottom: 55px; width: 80%; max-width: 984px; } #main-content .cta-box .cta-container, .cta-box .cta-container { padding: 55px 116px; display: flex; padding: 55px 116px; flex-direction: column; align-items: center; gap: 10px; align-self: stretch; border: 7px solid #6DC7FF; text-align: center; } @media (max-width: 760px) { #main-content .cta-box .cta-container, .cta-box .cta-container { padding: 30px; } } #main-content .hometowns-application { display: flex; padding: 25px 116px; flex-direction: column; align-items: flex-start; gap: 29px; margin-top: 30px; margin-bottom: 55px; align-self: stretch; background: #F4F4F4; font-family: "niveau-grotesk", sans-serif; width: 80%; max-width: 984px; } @media (max-width: 700px) { #main-content .hometowns-application { padding-left: 5%; padding-right: 5%; width: 90%; } } #main-content .hometowns-application h3 { color: #1F1F1F; text-align: center; font-family: "niveau-grotesk", sans-serif; font-size: 30px; font-style: normal; font-weight: 700; line-height: normal; margin-top: 0; padding-top: 0; word-break: normal; overflow-wrap: normal; -webkit-hyphens: none; hyphens: none; } #main-content .wpforms-confirmation-container-full { background: transparent; border: 1px solid #1F1F1F; } #main-content .wpforms-field-file-upload .wpforms-field-label { color: #656565; font-family: "niveau-grotesk", sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; } #main-content .wpforms-field-file-upload input[type="file"]::-webkit-file-upload-button { -webkit-transition: all 300ms cubic-bezier(0.755, 0.116, 0.25, 0.757); transition: all 300ms cubic-bezier(0.755, 0.116, 0.25, 0.757); } #main-content .wpforms-field-file-upload input[type="file"]::file-selector-button { transition: all 300ms cubic-bezier(0.755, 0.116, 0.25, 0.757); } #main-content .wpforms-field-file-upload input[type="file"]:hover::-webkit-file-upload-button { background-color: #1f1f1f; color: #fff; } #main-content .wpforms-field-file-upload input[type="file"]:hover::file-selector-button { background-color: #1f1f1f; color: #fff; } #main-content .wpforms-submit, #main-content button[type="submit"] { display: flex; padding: 15px 25px; justify-content: center; align-items: center; gap: 10px; border-radius: 80px; border: 2px solid #FA5C58; color: #1F1F1F; font-family: "niveau-grotesk", sans-serif; font-size: 15px; font-style: normal; font-weight: 700; line-height: normal; background-color: transparent; transition: all 300ms cubic-bezier(0.755, 0.116, 0.25, 0.757); } #main-content .wpforms-submit:hover, #main-content button[type="submit"]:hover { background-color: #1f1f1f; border-color: #1f1f1f; color: #fff; } .content_container:not(.head) > *:not(.alignfull, .alignwide), .hometowns-container:not(.head) > *:not(.alignfull, .alignwide) { max-width: 982px; margin-left: auto !important; margin-right: auto !important; width: 80%; } .content-container .alignfull, .content-container .alignwide, .hometowns-container .alignfull, .hometowns-container .alignwide, .era-feature, #main-content .era-overview, #main-content .quick-downloads, #main-content .article-sources, #main-content .next-era { width: 100%; max-width: 100%; } .image-list { text-align: center; margin-top: 45px; margin-bottom: 45px; } .image-list h2 { color: #1F1F1F; text-align: center; font-family: "niveau-grotesk", sans-serif; font-size: 40px; font-style: normal; font-weight: 700; line-height: normal; margin-bottom: 20px; max-width: 90%; margin-left: auto; margin-right: auto; } .image_grid_container { max-width: 984px; margin: auto; width: 90%; display: flex; gap: 19px; flex-wrap: wrap; } .image_grid_container img { width: 181px; } @media (max-width: 980px) { .image_grid_container { justify-content: center; align-items: center; } } @media (max-width: 700px) { .image_grid_container img { width: 90px; } } .hometowns-page { padding-top: 149px; background: white; } .hometowns-header, .article-feature.hometowns-header { position: relative; } .hometowns-header .header_bar, .article-feature.hometowns-header .header_bar { background-color: transparent; } .hometowns-header .feature-container, .article-feature.hometowns-header .feature-container { display: flex; justify-content: space-between; padding-top: 0px; max-width: 1276px; margin: auto; position: relative; } @media (max-width: 1375px) { .hometowns-header .feature-container, .article-feature.hometowns-header .feature-container { padding-left: 25px; } } @media (max-width: 1000px) { .hometowns-header .feature-container, .article-feature.hometowns-header .feature-container { padding-left: 0px; } } .hometowns-header .feature-container .hometowns-title, .article-feature.hometowns-header .feature-container .hometowns-title { color: #1F1F1F; font-size: 60px; font-style: normal; font-weight: 900; line-height: 61px; /* 101.667% */ text-transform: none; margin: 0; } .hometowns-header .feature-container::after, .article-feature.hometowns-header .feature-container::after { content: ""; position: absolute; top: -23px; right: 13px; bottom: 13px; left: -23px; border: 14px solid var(--era-color); pointer-events: none; } @media (max-width: 1000px) { .hometowns-header .feature-container::after, .article-feature.hometowns-header .feature-container::after { border-width: 10px; } } .hometowns-header .feature-container::before, .article-feature.hometowns-header .feature-container::before { content: ""; width: 337px; height: 130px; aspect-ratio: 337/130; position: absolute; left: -10px; bottom: -22px; background-image: url("../images/2x/hometowns-header-lines.png"); background-size: contain; background-position: center; background-repeat: no-repeat; pointer-events: none; } .hometowns-header .feature-container .feature-image, .article-feature.hometowns-header .feature-container .feature-image { max-width: 778px; height: 507px; width: 100%; } .hometowns-header .feature-container .breadcrumb-item, .article-feature.hometowns-header .feature-container .breadcrumb-item { position: absolute; top: 0; left: 15px; color: #1F1F1F; font-size: 13px; font-style: normal; font-weight: 400; line-height: normal; } @media (max-width: 1375px) { .hometowns-header .feature-container .breadcrumb-item, .article-feature.hometowns-header .feature-container .breadcrumb-item { left: 25px; } } .hometowns-header .feature-container .feature-content, .article-feature.hometowns-header .feature-container .feature-content { justify-content: center; align-items: center; } .hometowns-header .feature-container .title-area.shortened, .hometowns-header .feature-container .feature-content, .article-feature.hometowns-header .feature-container .title-area.shortened, .article-feature.hometowns-header .feature-container .feature-content { width: 432px; display: flex; flex-direction: column; padding-left: 55px; } @media (max-width: 1375px) { .hometowns-header .feature-container .title-area.shortened, .hometowns-header .feature-container .feature-content, .article-feature.hometowns-header .feature-container .title-area.shortened, .article-feature.hometowns-header .feature-container .feature-content { padding-left: 0px; } } @media (max-width: 1330px) { .hometowns-header .feature-container, .article-feature.hometowns-header .feature-container { width: 95%; } } @media (max-width: 1130px) { .hometowns-header .feature-container .feature-content, .article-feature.hometowns-header .feature-container .feature-content { width: 100%; } .hometowns-header .feature-container .feature-content .title-area.shortened, .article-feature.hometowns-header .feature-container .feature-content .title-area.shortened { width: 100%; } } @media (max-width: 1380px) { .hometowns-header .feature-container, .article-feature.hometowns-header .feature-container { flex-wrap: wrap; } .hometowns-header .feature-container .feature-content, .article-feature.hometowns-header .feature-container .feature-content { width: 45%; max-width: 432px; } .hometowns-header .feature-container .header_image, .article-feature.hometowns-header .feature-container .header_image { width: 55%; } } @media (max-width: 1200px) { .hometowns-header .feature-container .feature-content, .article-feature.hometowns-header .feature-container .feature-content { width: 35%; } .hometowns-header .feature-container .header_image, .article-feature.hometowns-header .feature-container .header_image { width: 60%; } .hometowns-header .feature-container .hometowns-title, .article-feature.hometowns-header .feature-container .hometowns-title { font-size: 45px; line-height: 48px; } .hometowns-header .feature-container .breadcrumb-item, .article-feature.hometowns-header .feature-container .breadcrumb-item { margin-bottom: 5px; } .hometowns-header .feature-container::before, .article-feature.hometowns-header .feature-container::before { content: unset; } } @media (max-width: 1000px) { .hometowns-header .feature-container, .article-feature.hometowns-header .feature-container { flex-direction: column; gap: 25px; } .hometowns-header .feature-container .feature-content, .hometowns-header .feature-container .header_image, .article-feature.hometowns-header .feature-container .feature-content, .article-feature.hometowns-header .feature-container .header_image { width: 100%; max-width: 100%; } .hometowns-header .feature-container .breadcrumb-item, .article-feature.hometowns-header .feature-container .breadcrumb-item { position: static; } .hometowns-header .feature-container .feature-content, .article-feature.hometowns-header .feature-container .feature-content { padding-right: 25px; align-items: flex-start; } } .hometowns-header .header_image, .article-feature.hometowns-header .header_image { width: 778px; } .hometowns-header .boxed_border_container, .article-feature.hometowns-header .boxed_border_container { width: 90%; max-width: 1276px; height: calc(100% - 140px); position: absolute; top: 124px; left: 50%; transform: translateX(-49%); border: 0px solid var(--era-color); z-index: 1; pointer-events: none; /*transform:translateX(-16px);*/ margin: auto; } @media (max-width: 1130px) { .hometowns-header .boxed_border_container, .article-feature.hometowns-header .boxed_border_container { width: 97%; top: 15px; } } @media (max-width: 1330px) { .hometowns-header, .article-feature.hometowns-header { padding-left: 5%; padding-right: 5%; } } @media (max-width: 1130px) { .hometowns-header, .article-feature.hometowns-header { padding-top: 50px; } } .styled-list-section { display: flex; justify-content: center; padding-top: 45px; padding-bottom: 45px; } .styled_list { margin: 0px 0; padding: 40px 55px 25px; border: 10px #f4f4f4 solid; width: 982px; position: relative; } .styled_list .deco { width: 238.412px; transform: rotate(12.271deg); position: absolute; right: -83.397px; top: -30.222px; } @media (max-width: 640px) { .styled_list { padding: 40px 25px 25px; } } .styled_list li, .styled_list .list_inner { position: relative; list-style: none; margin-bottom: 20px; padding: 0; font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 18px; font-style: normal; font-weight: 700; line-height: normal; color: #1F1F1F; } .styled_list li:before, .styled_list .list_inner:before { content: ""; width: 23px; height: 1px; position: absolute; left: -65px; top: 9px; background-color: #747474; } @media (max-width: 640px) { .styled_list li:before, .styled_list .list_inner:before { left: -35px; } } .upcoming-programs, .previous-programs { padding-bottom: 85px; background-color: #fff; display: flex; justify-content: center; align-items: center; } @media (max-width: 1024px) { .upcoming-programs, .previous-programs { padding-bottom: 65px; } } @media (max-width: 768px) { .upcoming-programs, .previous-programs { padding-bottom: 45px; } } .upcoming-programs.padding-around, .previous-programs.padding-around { padding: 115px 0; } @media (max-width: 1024px) { .upcoming-programs.padding-around, .previous-programs.padding-around { padding: 80px 0; } } @media (max-width: 768px) { .upcoming-programs.padding-around, .previous-programs.padding-around { padding: 60px 0; } } .upcoming-programs .life-container, .previous-programs .life-container { width: 1172px; max-width: 90%; } @media (max-width: 1250px) { .upcoming-programs .life-container, .previous-programs .life-container { grid-column-end: 13; } } @media (max-width: 1024px) { .upcoming-programs .life-container, .previous-programs .life-container { grid-column-start: 2; grid-column-end: 14; } } .upcoming-programs .life-container .title-area h2, .previous-programs .life-container .title-area h2 { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 40px; line-height: 1; text-transform: uppercase; color: #1F1F1F; margin-bottom: 30px; } @media (max-width: 1024px) { .upcoming-programs .life-container .title-area h2, .previous-programs .life-container .title-area h2 { font-size: 34px; } } @media (max-width: 768px) { .upcoming-programs .life-container .title-area h2, .previous-programs .life-container .title-area h2 { font-size: 28px; } } @media (max-width: 600px) { .upcoming-programs .life-container .title-area h2, .previous-programs .life-container .title-area h2 { text-align: center; } } .upcoming-programs .life-container .stories, .previous-programs .life-container .stories { margin: 0; padding: 0; display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 43px; list-style: none; } @media (max-width: 768px) { .upcoming-programs .life-container .stories, .previous-programs .life-container .stories { grid-template-columns: 1fr 1fr 1fr; } } @media (max-width: 640px) { .upcoming-programs .life-container .stories, .previous-programs .life-container .stories { display: block; } } .upcoming-programs .life-container .stories .story, .previous-programs .life-container .stories .story { margin-bottom: 35px; width: 200px; } @media (max-width: 768px) { .upcoming-programs .life-container .stories .story, .previous-programs .life-container .stories .story { margin-bottom: 0; } } @media (max-width: 640px) { .upcoming-programs .life-container .stories .story, .previous-programs .life-container .stories .story { margin-bottom: 35px; } } .upcoming-programs .life-container .stories .story:nth-of-type(odd), .previous-programs .life-container .stories .story:nth-of-type(odd) { padding-bottom: 50px; } .upcoming-programs .life-container .stories .story:nth-of-type(odd) .story-container .story-image, .previous-programs .life-container .stories .story:nth-of-type(odd) .story-container .story-image { position: relative; height: 200px; max-height: 300px; } @media (max-width: 875px) { .upcoming-programs .life-container .stories .story:nth-of-type(odd) .story-container .story-image, .previous-programs .life-container .stories .story:nth-of-type(odd) .story-container .story-image { width: 168px; height: 168px; } } .upcoming-programs .life-container .stories .story:nth-of-type(odd) .story-container .story-image:before, .previous-programs .life-container .stories .story:nth-of-type(odd) .story-container .story-image:before { content: ''; position: absolute; z-index: 2; left: 0; bottom: 0; width: 60px; height: 47px; background-image: url("../images/svg/scribble-story-1.svg"); background-size: contain; background-position: bottom left; background-repeat: no-repeat; } .upcoming-programs .life-container .stories .story:nth-of-type(even), .previous-programs .life-container .stories .story:nth-of-type(even) { padding-top: 50px; } .upcoming-programs .life-container .stories .story:nth-of-type(even) .story-container .story-image, .previous-programs .life-container .stories .story:nth-of-type(even) .story-container .story-image { width: 200px; height: 200px; } @media (max-width: 875px) { .upcoming-programs .life-container .stories .story:nth-of-type(even) .story-container .story-image, .previous-programs .life-container .stories .story:nth-of-type(even) .story-container .story-image { width: 168px; height: 168px; } } .upcoming-programs .life-container .stories .story:nth-of-type(even) .story-container .story-image:before, .previous-programs .life-container .stories .story:nth-of-type(even) .story-container .story-image:before { content: ''; position: absolute; z-index: 2; top: 0; right: 0; width: 66px; height: 41px; background-image: url("../images/svg/scribble-story-2.svg"); background-size: contain; background-position: top right; background-repeat: no-repeat; } .upcoming-programs .life-container .stories .story .story-container, .previous-programs .life-container .stories .story .story-container { display: flex; align-items: flex-start; text-decoration: none; flex-direction: column; } @media (max-width: 768px) { .upcoming-programs .life-container .stories .story .story-container, .previous-programs .life-container .stories .story .story-container { flex-flow: column; } } @media (max-width: 640px) { .upcoming-programs .life-container .stories .story .story-container, .previous-programs .life-container .stories .story .story-container { flex-flow: row; } } .upcoming-programs .life-container .stories .story .story-container:hover .story-image:after, .upcoming-programs .life-container .stories .story .story-container:focus .story-image:after, .previous-programs .life-container .stories .story .story-container:hover .story-image:after, .previous-programs .life-container .stories .story .story-container:focus .story-image:after { top: 0; right: 0; } .upcoming-programs .life-container .stories .story .story-container:hover .story-content h3, .upcoming-programs .life-container .stories .story .story-container:focus .story-content h3, .previous-programs .life-container .stories .story .story-container:hover .story-content h3, .previous-programs .life-container .stories .story .story-container:focus .story-content h3 { text-decoration-color: #1F1F1F; -webkit-text-decoration-color: #1F1F1F; } .upcoming-programs .life-container .stories .story .story-container .story-image, .previous-programs .life-container .stories .story .story-container .story-image { position: relative; width: 200px; height: 300px; } @media (max-width: 1250px) { .upcoming-programs .life-container .stories .story .story-container .story-image, .previous-programs .life-container .stories .story .story-container .story-image { height: 15vw; } } @media (max-width: 1024px) { .upcoming-programs .life-container .stories .story .story-container .story-image, .previous-programs .life-container .stories .story .story-container .story-image { height: 18vw; } } @media (max-width: 768px) { .upcoming-programs .life-container .stories .story .story-container .story-image, .previous-programs .life-container .stories .story .story-container .story-image { height: 24vw; width: 100%; flex: auto; } } @media (max-width: 640px) { .upcoming-programs .life-container .stories .story .story-container .story-image, .previous-programs .life-container .stories .story .story-container .story-image { flex: 0 0 40%; width: auto; max-height: none; height: 34vw; } } .upcoming-programs .life-container .stories .story .story-container .story-image:after, .previous-programs .life-container .stories .story .story-container .story-image:after { content: ''; position: absolute; z-index: 2; top: 8px; right: 8px; width: 100%; height: 100%; border: 5px #D8D8D8 solid; pointer-events: none; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } .upcoming-programs .life-container .stories .story .story-container .story-content, .previous-programs .life-container .stories .story .story-container .story-content { padding-left: 0px; padding-right: 0px; } @media (max-width: 768px) { .upcoming-programs .life-container .stories .story .story-container .story-content, .previous-programs .life-container .stories .story .story-container .story-content { padding-left: 0; } } @media (max-width: 640px) { .upcoming-programs .life-container .stories .story .story-container .story-content, .previous-programs .life-container .stories .story .story-container .story-content { padding-left: 30px; } } @media (max-width: 500px) { .upcoming-programs .life-container .stories .story .story-container .story-content, .previous-programs .life-container .stories .story .story-container .story-content { padding-left: 20px; } } .upcoming-programs .life-container .stories .story .story-container .story-content h3, .previous-programs .life-container .stories .story .story-container .story-content h3 { text-decoration: underline; text-decoration-color: #FA5C58; -webkit-text-decoration-color: #FA5C58; font-family: alegreya, Helvetica, Arial, sans-serif; font-style: italic; font-weight: 500; font-size: 22px; line-height: 1.272; margin: 0 0 5px; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } @media (max-width: 1024px) { .upcoming-programs .life-container .stories .story .story-container .story-content h3, .previous-programs .life-container .stories .story .story-container .story-content h3 { font-size: 20px; } } @media (max-width: 768px) { .upcoming-programs .life-container .stories .story .story-container .story-content h3, .previous-programs .life-container .stories .story .story-container .story-content h3 { margin: 15px 0 5px; } } .upcoming-programs .life-container .stories .story .story-container .story-content h4, .previous-programs .life-container .stories .story .story-container .story-content h4 { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 14px; line-height: 1.2; color: #747474; text-transform: none; margin: 0 0 15px; } .upcoming-programs .life-container .stories .story .story-container .story-content h5, .previous-programs .life-container .stories .story .story-container .story-content h5 { font-family: alegreya, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; color: #1E1E1E; font-size: 18px; font-style: normal; font-weight: 700; line-height: 28px; text-decoration-line: underline; text-decoration-style: solid; -webkit-text-decoration-skip: ink; text-decoration-skip-ink: auto; text-decoration-color: #FA5C58; text-decoration-thickness: auto; text-underline-offset: 12%; /* 2.16px */ margin-bottom: 0px; margin-top: 18px; } .upcoming-programs .life-container .stories .story .story-container .story-content p, .previous-programs .life-container .stories .story .story-container .story-content p { font-family: alegreya, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 1em; line-height: 1.375; } .upcoming-programs .life-container .stories .story .story-container .story-content .timeframe, .previous-programs .life-container .stories .story .story-container .story-content .timeframe { margin-bottom: 10px; } .title-area.center { text-align: center; margin-left: auto; margin-right: auto; margin-bottom: 30px; max-width: 800px; } #main-content .upcoming-programs.three-wide { padding-top: 80px; padding-left: 5%; padding-right: 5%; } #main-content .upcoming-programs.three-wide .title-area.center { text-align: center; margin-left: auto; margin-right: auto; margin-bottom: 30px; max-width: 800px; } #main-content .upcoming-programs.three-wide h3 { color: #1E1E1E; font-size: 24px; font-style: normal; font-weight: 700; line-height: 110%; /* 26.4px */ text-decoration-line: underline; text-decoration-style: solid; -webkit-text-decoration-skip: ink; text-decoration-skip-ink: auto; text-decoration-color: #FA5C58; text-decoration-thickness: 8%; /* 1.92px */ text-underline-position: from-font; } #main-content .upcoming-programs .stories { gap: 16px; justify-content: flex-start; } #main-content .upcoming-programs .story { width: 380px; padding: 0px; margin-bottom: 47px; max-width: calc(33% - 25px); } @media (max-width: 875px) { #main-content .upcoming-programs .story { width: 168px; } } #main-content .upcoming-programs .story .story-container { flex-direction: row; gap: 20px; align-items: center; } #main-content .upcoming-programs .story .story-container .story-image { flex-shrink: 0; width: 158px; height: 158px; } #main-content .upcoming-programs .story .story-container h3 { color: #1E1E1E; font-size: 24px; font-style: normal; font-weight: 700; line-height: 110%; /* 26.4px */ text-decoration-line: underline; text-decoration-style: solid; -webkit-text-decoration-skip: ink; text-decoration-skip-ink: auto; text-decoration-color: #FA5C58; text-decoration-thickness: 8%; /* 1.92px */ text-underline-position: from-font; } #main-content .upcoming-programs .story .story-container .timeframe { color: #747474; font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; } #main-content .upcoming-programs .story .story-container h4 { color: #1F1F1F; font-family: alegreya, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 16px; font-style: italic; font-weight: 400; line-height: normal; } @media (max-width: 1250px) { #main-content .upcoming-programs .story .story-container { flex-direction: column; } } @media (max-width: 440px) { #main-content .upcoming-programs .life-container { width: 90%; max-width: 100%; } #main-content .upcoming-programs .life-container .stories { justify-content: center; } } @media (max-width: 400) { #main-content .upcoming-programs .stories { justify-content: center; } } .previous-programs { background-color: #F4F4F4; padding-top: 90px; padding-bottom: 90px; position: relative; overflow: hidden; } .previous-programs.five-wide { padding-bottom: 65px; margin-bottom: 50px; overflow: visible; } .previous-programs.five-wide::after { bottom: -85px; z-index: 1; } .previous-programs.five-wide .title-area.center { text-align: center; margin-left: auto; margin-right: auto; margin-bottom: 40px; max-width: 800px; } .previous-programs::after { content: ""; position: absolute; bottom: 0px; right: 0px; width: 435px; height: 168px; right: -150px; bottom: -44.056px; background-image: url("../images/2x/green_lines.png"); background-size: contain; background-repeat: no-repeat; filter: url(#unotone); } @media (max-width: 875px) { #main-content .upcoming-programs .stories, #main-content .previous-programs .stories { display: flex; justify-content: center; gap: 20px; } } #main-content .upcoming-programs .story .timeframe, #main-content .previous-programs .story .timeframe { color: #747474; font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; } #main-content .upcoming-programs .story h4, #main-content .previous-programs .story h4 { color: #1F1F1F; font-family: alegreya, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 16px; font-style: italic; font-weight: 400; line-height: normal; } @media (max-width: 875px) { #main-content .upcoming-programs .story, #main-content .previous-programs .story { min-width: 164px; padding: 0px; margin: 0; max-width: calc(33% - 20px); } #main-content .upcoming-programs .story .story-container, #main-content .previous-programs .story .story-container { flex-direction: column; align-items: flex-start; } #main-content .upcoming-programs .story .story-container .story-image, #main-content .previous-programs .story .story-container .story-image { min-width: 158px; min-height: 158px; } #main-content .upcoming-programs .story .story-container .story-content, #main-content .previous-programs .story .story-container .story-content { padding: 0px; } } html { box-sizing: border-box; scroll-behavior: smooth; } body { overflow-x: hidden; background-color: #000; scroll-behavior: smooth; } body.home { overflow: auto; } body.home .main-content { overflow: visible; } .home-body .marble-background { background-size: cover; } *, *:before, *:after { box-sizing: inherit; margin: 0; padding: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } img { border: none; max-width: 100%; height: auto; } embed, iframe, object { max-width: 100%; } input, select, option, textarea { font-family: inherit; } hr { background-color: #ccc; border: 0; height: 1px; margin-bottom: 1.5em; } ul, ol { margin: 0 0 1.5em 3em; font-family: "Alegreya", sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; padding-left: 26px; } ul { list-style: disc; } ol { list-style: decimal; } ol li { font-family: alegreya, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 1em; line-height: 1.75; color: #1F1F1F; } @media (max-width: 1024px) { ol li { font-size: 0.9375em; } } @media (max-width: 768px) { ol li { font-size: 0.875em; } } li > ul, li > ol { margin-bottom: 0; margin-left: 1.5em; } .main-content { overflow-x: hidden; padding-bottom: 0px; } @media (max-width: 1024px) { .main-content { padding-top: 80px; padding-bottom: 0; } } @media (max-width: 1130px) { .main-content { padding-top: 111px; } } @media (max-width: 1024px) { .main-content.article-era { padding-top: 136px; } } @media (max-width: 1130px) { .logged-in #main-content { padding-top: 80px; } } h1, .like-h1 { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 900; font-size: 60px; line-height: 1; color: #1F1F1F; text-transform: uppercase; margin: 30px 0 10px; } @media (max-width: 1024px) { h1, .like-h1 { font-size: 45px; } } @media (max-width: 768px) { h1, .like-h1 { font-size: 32px; line-height: 1.1; } } h2, .like-h2 { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 30px; line-height: 1.133; color: #1F1F1F; margin: 0 0 10px; } @media (max-width: 1024px) { h2, .like-h2 { font-size: 24px; } } @media (max-width: 768px) { h2, .like-h2 { font-size: 18px; } } h3, .like-h3 { font-family: alegreya, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 26px; line-height: 1.154; color: #1F1F1F; margin: 30px 0 10px; } @media (max-width: 1024px) { h3, .like-h3 { font-size: 20px; } } @media (max-width: 768px) { h3, .like-h3 { font-size: 16px; } } h4, .like-h4 { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 18px; line-height: 1.1; color: #1F1F1F; margin: 30px 0 10px; } @media (max-width: 1024px) { h4, .like-h4 { font-size: 16px; } } @media (max-width: 768px) { h4, .like-h4 { font-size: 15px; } } h4 p, .like-h4 p { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 18px; line-height: 1.1; color: #1F1F1F; margin: 30px 0 10px; } @media (max-width: 1024px) { h4 p, .like-h4 p { font-size: 16px; } } @media (max-width: 768px) { h4 p, .like-h4 p { font-size: 15px; } } h5, .like-h5 { font-family: alegreya, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 18px; line-height: 1.222; color: #1F1F1F; margin: 30px 0 10px; line-height: 28px; } @media (max-width: 1024px) { h5, .like-h5 { font-size: 16px; } } @media (max-width: 768px) { h5, .like-h5 { font-size: 15px; } } h6, .like-h6 { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 16px; line-height: 1.222; color: #1F1F1F; margin: 30px 0 10px; } @media (max-width: 1024px) { h6, .like-h6 { font-size: 15px; } } @media (max-width: 768px) { h6, .like-h6 { font-size: 14px; } } p, .like-p { font-family: alegreya, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 1em; line-height: 1.75; margin: 0 0 12px; } @media (max-width: 1024px) { p, .like-p { font-size: 0.9375em; } } @media (max-width: 768px) { p, .like-p { font-size: 0.875em; } } p.intro, .like-p.intro { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 500; font-size: 1.375em; line-height: 1.545; } @media (max-width: 1024px) { p.intro, .like-p.intro { font-size: 1.25em; } } @media (max-width: 1024px) { p.intro, .like-p.intro { font-size: 1.125em; } } @media (max-width: 768px) { li { font-size: 0.875em; } } a { color: #1F1F1F; text-decoration-color: #FA5C58; -webkit-text-decoration-color: #FA5C58; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } a:visited { color: #1F1F1F; } a:focus { color: #1F1F1F; } a:hover { color: #1F1F1F; } a:active { color: #1F1F1F; } a:hover, a:focus { text-decoration-color: inherit; } h1 .glossaryLink, h2 .glossaryLink, h3 .glossaryLink, h4 .glossaryLink, h5 .glossaryLink, h6 .glossaryLink { line-height: 1.5; } .glossaryLink { background-color: rgba(250, 92, 88, 0.15); } .btn { font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 15px; line-height: 1.2; background-color: transparent; color: #1F1F1F; border: 2px #FA5C58 solid; box-shadow: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 15px 25px; text-align: center; min-height: 58px; border-radius: 29px; text-decoration-color: transparent; -webkit-text-decoration-color: transparent; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); overflow-wrap: break-word; text-transform: uppercase; } .btn:visited { color: #1F1F1F; } .btn:focus { color: #1F1F1F; } .btn:hover { color: #1F1F1F; } .btn:active { color: #1F1F1F; } @media (max-width: 1024px) { .btn { padding: 10px 20px; min-height: 44px; } } .btn.on-dark { color: #fff; } .btn.on-dark:visited { color: #fff; } .btn.on-dark:focus { color: #fff; } .btn.on-dark:hover { color: #1F1F1F; } .btn.on-dark:active { color: #fff; } .btn.on-dark svg { margin-left: 6px; } .btn.filled { background-color: #FA5C58; color: #1F1F1F; } .btn.filled:visited { color: #1F1F1F; } .btn.filled:focus { color: #1F1F1F; } .btn.filled:hover { color: #1F1F1F; } .btn.filled:active { color: #1F1F1F; } .btn.filled:hover, .btn.filled:focus { background-color: transparent; } .btn:hover, .btn:focus { background-color: #FA5C58; text-decoration-color: transparent; -webkit-text-decoration-color: transparent; } .btn:hover svg path, .btn:hover svg rect, .btn:focus svg path, .btn:focus svg rect { fill: #1F1F1F; } .btn:active, .btn:visited { color: #1F1F1F; } .btn .download-link { padding-right: 8px; } .btn svg path, .btn svg rect { transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } .text-link { overflow-x: hidden; position: relative; font-family: niveau-grotesk, Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 13px; line-height: 1.154; text-transform: uppercase; display: inline-block; padding-bottom: 2px; color: #1F1F1F; text-decoration-color: transparent; -webkit-text-decoration-color: transparent; } .text-link:visited { color: #1F1F1F; } .text-link:focus { color: #1F1F1F; } .text-link:hover { color: #1F1F1F; } .text-link:active { color: #1F1F1F; } .text-link.overflow-item { overflow: visible; } .text-link.overflow-item:before { right: 0; } .text-link.overflow-item:hover:before, .text-link.overflow-item:focus:before { right: 0; } .text-link:before { content: ''; width: 100%; height: 2px; background-color: #FA5C58; position: absolute; right: 0; bottom: 0; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); } .text-link:hover:before, .text-link:focus:before { right: -100%; background-color: #6DC7FF; } .text-link.on-dark { color: #fff; } .text-link.on-dark:visited { color: #fff; } .text-link.on-dark:focus { color: #fff; } .text-link.on-dark:hover { color: #fff; } .text-link.on-dark:active { color: #fff; } strong { font-weight: bold; } em { font-style: italic; } .white { background-color: white; } .white.article-feature { padding-left: 0px; padding-right: 0px; } input[type="search"], input[type="submit"], input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { -webkit-appearance: none; } .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; } .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; -webkit-clip-path: none; clip-path: none; color: #21759b; display: block; font-size: 0.875rem; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar. */ } .cover-image { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-position: center; background-repeat: no-repeat; background-size: cover; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); margin: 0; } .cover-image img { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .cover-image .mobile-overlay { display: none; position: absolute; left: 0; right: 0; margin: 0 auto; bottom: 0; height: 45px; background-color: #fff; opacity: 0.45; } @media (max-width: 768px) { .cover-image .mobile-overlay { display: block; } } @media (max-width: 400px) { .cover-image .mobile-overlay { height: 30px; } } .accessible-image { border: 0; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; } .download-image, figure.alignfull > a, figure.aligncenter > a, figure.alignnone > a, figure.alignright > a, figure.alignleft > a { display: block; position: relative; } .download-image:after, figure.alignfull > a:after, figure.aligncenter > a:after, figure.alignnone > a:after, figure.alignright > a:after, figure.alignleft > a:after { content: ''; width: 25px; height: 25px; border-radius: 50%; position: absolute; right: 11px; top: -7px; background-color: #FA5C58; transition: all 0.3s cubic-bezier(0.755, 0.116, 0.25, 0.757); background-image: url("../images/svg/arrow-download.svg"); background-position: center; background-repeat: no-repeat; } .download-image:hover:after, .download-image:focus:after, figure.alignfull > a:hover:after, figure.alignfull > a:focus:after, figure.aligncenter > a:hover:after, figure.aligncenter > a:focus:after, figure.alignnone > a:hover:after, figure.alignnone > a:focus:after, figure.alignright > a:hover:after, figure.alignright > a:focus:after, figure.alignleft > a:hover:after, figure.alignleft > a:focus:after { background-color: #fff; filter: invert(1); } .wp-block-image { position: relative; margin-top: 20px; margin-bottom: 20px; } .wp-block-image.alignfull, figure.alignfull, figure.aligncenter, figure.alignnone { width: 100% !important; position: relative; margin-top: 20px; margin-bottom: 20px; } .wp-block-image.alignfull:before, figure.alignfull:before, figure.aligncenter:before, figure.alignnone:before { content: ''; width: 170px; height: 180px; position: absolute; top: 17px; right: -123px; background-image: url("../images/svg/scribbles_1_white.svg"); background-size: contain; background-position: top right; background-repeat: no-repeat; } .wp-block-image.alignfull img, figure.alignfull img, figure.aligncenter img, figure.alignnone img { display: block; width: 100%; height: auto; } .wp-block-image.alignright, figure.alignright { clear: both; position: relative; margin-top: 20px; margin-bottom: 20px; width: auto !important; float: right; margin-left: 30px; margin-right: -25%; } @media (max-width: 1250px) { .wp-block-image.alignright, figure.alignright { margin-right: 0; } } @media (max-width: 768px) { .wp-block-image.alignright, figure.alignright { float: none; margin-left: 0; } } .wp-block-image.alignright img, figure.alignright img { display: block; width: 100%; height: auto; } .wp-block-image.alignright .wp-caption-text, figure.alignright .wp-caption-text { max-width: 300px; } @media (max-width: 768px) { .wp-block-image.alignright .wp-caption-text, figure.alignright .wp-caption-text { max-width: none; } } .wp-block-image.alignleft, figure.alignleft { clear: both; position: relative; margin-top: 20px; margin-bottom: 20px; width: auto !important; float: left; margin-right: 30px; } @media (max-width: 768px) { .wp-block-image.alignleft, figure.alignleft { float: none; margin-right: 0; } } .wp-block-image.alignleft img, figure.alignleft img { display: block; width: 100%; height: auto; } .wp-block-image.alignleft .wp-caption-text, figure.alignleft .wp-caption-text { max-width: 300px; } @media (max-width: 768px) { .wp-block-image.alignleft .wp-caption-text, figure.alignleft .wp-caption-text { max-width: none; } } .wp-block-image img { display: block; width: 100%; height: auto; } .wp-block-image.alignleft img, .wp-block-image.alignright img, figure.alignleft img, figure.alignright img { max-width: 500px; } @media (max-width: 1250px) { .wp-block-image.alignleft img, .wp-block-image.alignright img, figure.alignleft img, figure.alignright img { max-width: 400px; } } @media (max-width: 1024px) { .wp-block-image.alignleft img, .wp-block-image.alignright img, figure.alignleft img, figure.alignright img { max-width: 300px; } } @media (max-width: 768px) { .wp-block-image.alignleft img, .wp-block-image.alignright img, figure.alignleft img, figure.alignright img { max-width: none; } } .wp-block-image em, .wp-caption-text { display: block; font-family: alegreya, Helvetica, Arial, sans-serif; font-style: italic; font-weight: 400; font-size: 14px; line-height: 1.286; color: #747474; margin-top: 10px; } .no-scroll { overflow: hidden; } @media (min-width: 1025px) { .no-scroll { overflow: auto; } } #html5-watermark { display: none !important; } .glossary-item { padding-top: 150px; } @media (max-width: 1024px) { .glossary-item { padding-top: 15vw; } } @media (max-width: 1250px) { .glossary-item .article-overview .overview-content { grid-column-start: 2; } } .general-page { background: white; } .general-page .article-overview .overview-content li { margin-top: 5px; margin-bottom: 5px; } @media (max-width: 1250px) { .general-page .article-overview .overview-content { grid-column-start: 2; } } .label-hidden, .input-hidden { position: absolute; left: -10000px; opacity: 0; } .error404 .home-feature { height: 100vh; } .white_bg { background: white; } .white_bg .content_wrapper > *:not(.alignfull, .alignwide) { max-width: 982px; margin-left: auto; margin-right: auto; width: 90%; } /*.single-article .article-overview { display:flex; justify-content: center; .overview-content { width:57.142%; } @media(max-width:900px) { flex-wrap:wrap; .overview-content { max-width:780px; width:90% !important; } } } */ .single-hometowns .article-overview.alignwide .overview-content, .era-overview .overview-content { margin: auto; } #ttcont { padding: 8px !important; padding-left: 15px !important; padding-right: 15px !important; } div.wpforms-container-full .wpforms-form .wpforms-field-layout:not(:first-child) > .wpforms-field-label:not(.wpforms-label-hide)::before { content: unset !important; } #main-content div.wpforms-container-full { width: 100%; } #main-content .wpforms-submit, #main-content button[type="submit"] { width: -moz-fit-content; width: fit-content; } .error-404 .feature-content { flex-direction: column; } .no-programs { text-align: center; }