@charset "UTF-8";
/* Slider */
.slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }

.slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; }

.slick-list:focus { outline: none; }

.slick-list.dragging { cursor: pointer; cursor: hand; }

.slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

.slick-track { position: relative; left: 0; top: 0; display: block; margin-left: auto; margin-right: auto; }

.slick-track:before, .slick-track:after { content: ""; display: table; }

.slick-track:after { clear: both; }

.slick-loading .slick-track { visibility: hidden; }

.slick-slide { float: left; height: 100%; min-height: 1px; display: none; }

[dir="rtl"] .slick-slide { float: right; }

.slick-slide img { display: block; }

.slick-slide.slick-loading img { display: none; }

.slick-slide.dragging img { pointer-events: none; }

.slick-initialized .slick-slide { display: block; }

.slick-loading .slick-slide { visibility: hidden; }

.slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; }

.slick-arrow.slick-hidden { display: none; }

/* Icons */
@font-face { font-family: "slick"; src: url("../fonts/slick.eot"); src: url("../fonts/slick.eot?#iefix") format("embedded-opentype"), url("../fonts/slick.woff") format("woff"), url("../fonts/slick.ttf") format("truetype"), url("../fonts/slick.svg#slick") format("svg"); font-weight: normal; font-style: normal; }

/** Slider */
.slick-loading .slick-list { background: #fff url("../img/ajax-loader.gif") center center no-repeat; }

/*================================= Previous and Next icon buttons ==================================*/
.slick-prev, .slick-next { position: absolute; top: 50%; display: block; padding: 0; height: 20px; width: 20px; line-height: 0; font-size: 0; cursor: pointer; background: transparent; color: transparent; border: none; transform: translate(0, -50%); }

.slick-prev:hover .slick-prev-icon, .slick-prev:hover .slick-next-icon, .slick-prev:focus .slick-prev-icon, .slick-prev:focus .slick-next-icon, .slick-next:hover .slick-prev-icon, .slick-next:hover .slick-next-icon, .slick-next:focus .slick-prev-icon, .slick-next:focus .slick-next-icon { opacity: 1; }

.slick-prev:focus, .slick-next:focus { top: calc(50% - 1px); }

.slick-prev:focus .slick-prev-icon, .slick-prev:focus .slick-next-icon, .slick-next:focus .slick-prev-icon, .slick-next:focus .slick-next-icon { color: orange; font-size: 28px; margin-left: -2px; }

.slick-prev.slick-disabled, .slick-next.slick-disabled { cursor: default; }

.slick-prev.slick-disabled .slick-prev-icon, .slick-prev.slick-disabled .slick-next-icon, .slick-next.slick-disabled .slick-prev-icon, .slick-next.slick-disabled .slick-next-icon { opacity: 0.25; }

.slick-prev .slick-prev-icon, .slick-prev .slick-next-icon, .slick-next .slick-prev-icon, .slick-next .slick-next-icon { display: block; color: black; opacity: 0.75; font-family: "slick"; font-size: 24px; line-height: 1; }

.slick-prev { left: -25px; }

[dir="rtl"] .slick-prev { left: auto; right: -25px; }

.slick-prev .slick-prev-icon:before { content: "←"; }

[dir="rtl"] .slick-prev .slick-prev-icon:before { content: "→"; }

.slick-next { right: -25px; }

[dir="rtl"] .slick-next { left: -25px; right: auto; }

.slick-next .slick-next-icon:before { content: "→"; }

[dir="rtl"] .slick-next .slick-next-icon:before { content: "←"; }

/*========================== Slide navigation dots ===========================*/
.slick-slider { margin-bottom: 30px; }

.slick-slider.slick-dotted { margin-bottom: 60px; }

.slick-dots { position: absolute; bottom: -30px; display: block; padding: 0; margin: 0; width: 100%; list-style: none; text-align: center; }

.slick-dots li { position: relative; display: inline-block; margin: 0 5px; padding: 0; }

.slick-dots li button { display: block; height: 20px; width: 20px; margin-top: -4px; margin-left: -4px; line-height: 0px; font-size: 0px; color: transparent; border: 0; background: transparent; cursor: pointer; }

.slick-dots li button:hover .slick-dot-icon, .slick-dots li button:focus .slick-dot-icon { opacity: 1; }

.slick-dots li button:focus .slick-dot-icon:before { color: orange; }

.slick-dots li button .slick-dot-icon { color: black; opacity: 0.25; }

.slick-dots li button .slick-dot-icon:before { position: absolute; top: 0; left: 0; content: "•"; font-family: "slick"; font-size: 12px; line-height: 1; text-align: center; transition: all .05s linear; }

.slick-dots li.slick-active button:focus .slick-dot-icon { color: orange; opacity: 1; }

.slick-dots li.slick-active button .slick-dot-icon { color: black; opacity: 1; }

.slick-dots li.slick-active button .slick-dot-icon:before { margin-top: -3px; margin-left: -2px; font-size: 18px; }

/** Improved .sr-only class by ffoodd: https://gist.github.com/ffoodd/000b59f431e3e64e4ce1a24d5bb36034 */
.slick-sr-only { border: 0 !important; clip: rect(1px, 1px, 1px, 1px) !important; -webkit-clip-path: inset(50%) !important; clip-path: inset(50%) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; white-space: nowrap !important; }

/*=========================== Pause/play icon button ============================*/
.slick-autoplay-toggle-button { position: absolute; left: 5px; bottom: -32px; z-index: 10; opacity: 0.75; background: none; border: 0; cursor: pointer; color: black; }

.slick-autoplay-toggle-button:hover, .slick-autoplay-toggle-button:focus { opacity: 1; }

.slick-autoplay-toggle-button:focus { color: orange; }

.slick-autoplay-toggle-button .slick-pause-icon:before { content: "⏸"; width: 20px; height: 20px; font-family: "slick"; font-size: 18px; font-weight: normal; line-height: 20px; text-align: center; }

.slick-autoplay-toggle-button .slick-play-icon:before { content: "▶"; width: 20px; height: 20px; font-family: "slick"; font-size: 18px; font-weight: normal; line-height: 20px; text-align: center; }

@font-face { font-family: 'Tungsten'; src: url("../fonts/tungsten/Tungsten-Black_Web.woff") format("woff"), url("../fonts/tungsten/Tungsten-Black_Web.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }

@font-face { font-family: 'Tungsten'; src: url("../fonts/tungsten/Tungsten-Bold_Web.woff") format("woff"), url("../fonts/tungsten/Tungsten-Bold_Web.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

@font-face { font-family: 'Tungsten'; src: url("../fonts/tungsten/Tungsten-Semibold_Web.woff") format("woff"), url("../fonts/tungsten/Tungsten-Semibold_Web.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

@font-face { font-family: 'Tungsten'; src: url("../fonts/tungsten/Tungsten-Medium_Web.woff") format("woff"), url("../fonts/tungsten/Tungsten-Medium_Web.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

@font-face { font-family: 'Founders Grotesk'; src: url("../fonts/founders_grotesk/founders-grotesk-web-bold.woff") format("woff"), url("../fonts/founders_grotesk/founders-grotesk-web-bold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

@font-face { font-family: 'Founders Grotesk'; src: url("../fonts/founders_grotesk/founders-grotesk-web-semibold.woff") format("woff"), url("../fonts/founders_grotesk/founders-grotesk-web-semibold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

@font-face { font-family: 'Founders Grotesk'; src: url("../fonts/founders_grotesk/founders-grotesk-web-medium.woff") format("woff"), url("../fonts/founders_grotesk/founders-grotesk-web-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

@font-face { font-family: 'Founders Grotesk'; src: url("../fonts/founders_grotesk/founders-grotesk-web-regular.woff") format("woff"), url("../fonts/founders_grotesk/founders-grotesk-web-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

@font-face { font-family: 'Founders Grotesk'; src: url("../fonts/founders_grotesk/founders-grotesk-web-regular-italic.woff") format("woff"), url("../fonts/founders_grotesk/founders-grotesk-web-regular-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: optional; }

@font-face { font-family: 'Founders Grotesk'; src: url("../fonts/founders_grotesk/founders-grotesk-web-light.woff") format("woff"), url("../fonts/founders_grotesk/founders-grotesk-web-light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }

:host, :root { --chakra-fonts-heading: Tungsten, "HelveticaNeue-CondensedBold", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; --chakra-fonts-body: "Founders Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; --chakra-colors-red: #CC092F; --chakra-colors-darkRed: #AA0021; --chakra-colors-black: #231F20; --chakra-colors-slate: #6A6B6D; --chakra-colors-concrete: #BCBEC0; --chakra-colors-khaki: #F2E6D4; --chakra-colors-gray: #EFEFF0; --chakra-colors-silver: #9899AB; --chakra-colors-teal: #6DBDB1; --chakra-colors-transparent: transparent; --chakra-sizes-container-sm: 648px; --chakra-sizes-container-md: 768px; --chakra-sizes-container-lg: 1024px; --chakra-sizes-container-xl: 1224px; --chakra-space-1: 0.25rem; --chakra-space-2: 0.5rem; --chakra-space-3: 0.75rem; --chakra-space-4: 1rem; --chakra-space-5: 1.25rem; --chakra-space-6: 1.5rem; --chakra-space-7: 1.75rem; --chakra-space-8: 2rem; }

html { scroll-behavior: smooth; }

* { box-sizing: border-box; }

body { margin: 0; overflow-x: hidden; color: var(--chakra-colors-slate); background: var(--chakra-colors-khaki); font-size: 24; font-family: var(--chakra-fonts-body); position: relative; padding: 105px 0 0; }

@media screen and (min-width: 768px) { body { font-size: 27.6; } }

@media screen and (min-width: 1280px) { body { font-size: 31.74; } }

@media screen and (min-width: 768px) { body { padding-top: 0; } }

h1, h2, h3 { font-family: var(--chakra-fonts-heading); text-transform: uppercase; }

a { color: var(--chakra-colors-red); text-decoration: none; }

a:active, a:focus, a:hover { color: var(--chakra-colors-darkRed); }

.page { padding: 2rem 0 0; }

.page__footer { padding: 0 1rem; border-top: 3px solid var(slate); color: var(--chakra-colors-black); margin: 2rem 0; }

@media screen and (min-width: 768px) { .page__footer { padding: 0 2rem; } }

.header__wrapper { color: var(--chakra-colors-black); text-align: center; }

.header__wrapper .header__copy { padding: 0 1rem; }

@media screen and (min-width: 768px) { .header__wrapper .header__copy { padding: 0 2rem; } }

.header__wrapper h1 { font-size: 56px; margin: 0 0 1rem; }

@media screen and (min-width: 768px) { .header__wrapper h1 { font-size: 64px; } }

@media screen and (min-width: 1280px) { .header__wrapper h1 { font-size: 72px; } }

.header__wrapper p { max-width: 800px; margin: 0 auto; font-weight: bold; font-size: 22px; }

@media screen and (min-width: 768px) { .header__wrapper p { font-size: 28px; } }

@media screen and (min-width: 1280px) { .header__wrapper p { font-size: 36px; } }

.header__wrapper .header__image { width: 100%; margin: 2rem 0; background-size: cover; background-repeat: no-repeat; }

.header__wrapper .header__image img { visibility: hidden; width: 100%; }

.nav__wrapper { height: 64px; }

nav ul { width: 100%; margin: 0 auto; list-style-type: none; padding: 0; display: flex; justify-content: space-between; align-items: center; }

nav ul li a { color: var(--chakra-colors-slate); font-weight: bold; text-decoration: none; text-transform: uppercase; font-family: var(--chakra-fonts-heading); font-size: 20px; }

@media screen and (min-width: 768px) { nav ul li a { font-size: 23px; } }

@media screen and (min-width: 1280px) { nav ul li a { font-size: 26.45px; } }

nav ul li a:active, nav ul li a:focus, nav ul li a:hover { color: var(--chakra-colors-darkRed); }

.era__footer { margin-top: 4rem; }

.era-nav { background: var(--chakra-colors-khaki); top: 0; left: 0; width: 100%; height: 64px; }

.era-nav ul { max-width: 500px; height: 100%; }

.era-nav ul li { margin: 0 0.5rem; text-align: center; }

.era-nav ul li a { font-size: 20px; }

@media screen and (min-width: 768px) { .era-nav ul li a { font-size: 23px; } }

@media screen and (min-width: 1280px) { .era-nav ul li a { font-size: 26.45px; } }

.era-nav ul li a span { display: block; }

.era-nav ul li a.active { color: var(--chakra-colors-red); }

.era-nav.is-sticky { z-index: 1; position: fixed; top: 80px; left: 0; animation: header-slide-in 200ms; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }

@keyframes header-slide-in { 0% { top: -20px; }
  100% { top: 0px; } }

@media screen and (min-width: 768px) { .era-nav ul li { margin: 0 0.5rem; } .era-nav.is-sticky { top: 0; } }

.timelines__wrapper { position: relative; }

.timelines__target { position: absolute; top: -125px; left: 0; width: 100%; height: 200px; z-index: -1; pointer-events: none; }

@media screen and (min-width: 768px) { .timelines__target { top: -60px; } }

.timelines { padding: 0 1rem; width: 100%; }

@media screen and (min-width: 768px) { .timelines { padding: 0 2rem; } }

.era { max-width: 100%; min-height: 300px; }

.era .era__title { margin: 2rem 0 1rem; color: var(--chakra-colors-red); text-align: center; font-size: 32px; }

@media screen and (min-width: 768px) { .era .era__title { font-size: 36.8px; } }

@media screen and (min-width: 1280px) { .era .era__title { font-size: 42.32px; } }

.event { padding: 2rem 0 0; border-top: 3px solid var(--chakra-colors-red); }

@media screen and (min-width: 768px) { .event { padding-bottom: 2rem; } .event:not(:first-child) { border-top: none; } }

.event .event__year { font-size: 48px; color: var(--chakra-colors-teal); margin: 0 0 0.5rem; padding-top: 1rem; }

@media screen and (min-width: 1280px) { .event .event__year { font-size: 56px; } }

.event .event__image-wrap { width: 100%; }

.event .event__image-wrap img { display: inline-block; width: 100%; border: 2px solid var(--chakra-colors-concrete); }

.event .event__descr { font-size: 24px; color: var(--chakra-colors-slate); margin-bottom: 2rem; }

@media screen and (min-width: 768px) { .event .event__descr { font-size: 28px; } }

@media screen and (min-width: 1280px) { .event .event__descr { font-size: 32px; } }

.event .event__descr p { margin: 1rem 0 1rem; }

.event .event__descr p:last-child { margin-bottom: 0; }

@media screen and (min-width: 768px) { .event__wrap { padding: 0 0 1rem 0; display: flex; flex-direction: row; align-items: center; } .event:nth-child(even) .event__wrap { flex-direction: row-reverse; } .event__wrap .event__image-wrap { width: 45%; } .event__wrap .event__image-wrap img { max-height: 500px; width: auto; max-width: 100%; } .event:nth-child(odd) .event__wrap .event__image-wrap img { float: right; } .event__wrap .event__descr { padding-left: 2rem; max-width: 40%; } .event:nth-child(even) .event__wrap .event__descr { padding-left: 0; padding-right: 2rem; } }

/*# sourceMappingURL=styles.css.map */