:root {
  --Coal: hsla(60, 1%, 24%, 1);
  --LightGrey: hsla(0, 0%, 93%, 1);
  --Green: hsla(177, 99%, 33%, 1);
}

body {
  overflow: visible;
}

.Pagination-Wrapper {
  width: 100%;
  position: relative;
  margin-top: 8px;
  height: 8px;
}
.Pagination-Wrapper .swiper-pagination {
  position: relative;
}
.Pagination-Wrapper .swiper-pagination-bullet {
  background-color: #fff;
}
.Pagination-Wrapper .swiper-pagination-bullet-active {
  background-color: #fff;
}

.h1 {
  font-size: 40px;
  line-height: 100%;
  font-weight: bold;
}
.h1.White {
  color: #fff;
}
.h1.Green {
  color: var(--Green);
}
.h1.Uppercase {
  text-transform: uppercase;
}

.h3 {
  font-size: 20px;
  line-height: 140%;
}

.h2 {
  font-size: 40px;
  line-height: 100%;
  font-weight: bold;
}
.h2.White {
  color: #fff;
}
.h2.Green {
  color: var(--Green);
}
.h2.Uppercase {
  text-transform: uppercase;
}

.h3 {
  font-size: 20px;
  line-height: 140%;
}

.h3 {
  font-size: 40px;
  line-height: 100%;
  font-weight: bold;
}
.h3.White {
  color: #fff;
}
.h3.Green {
  color: var(--Green);
}
.h3.Uppercase {
  text-transform: uppercase;
}

.h3 {
  font-size: 20px;
  line-height: 140%;
}

.h4 {
  font-size: 40px;
  line-height: 100%;
  font-weight: bold;
}
.h4.White {
  color: #fff;
}
.h4.Green {
  color: var(--Green);
}
.h4.Uppercase {
  text-transform: uppercase;
}

.h3 {
  font-size: 20px;
  line-height: 140%;
}

.h5 {
  font-size: 40px;
  line-height: 100%;
  font-weight: bold;
}
.h5.White {
  color: #fff;
}
.h5.Green {
  color: var(--Green);
}
.h5.Uppercase {
  text-transform: uppercase;
}

.h3 {
  font-size: 20px;
  line-height: 140%;
}

.h6 {
  font-size: 40px;
  line-height: 100%;
  font-weight: bold;
}
.h6.White {
  color: #fff;
}
.h6.Green {
  color: var(--Green);
}
.h6.Uppercase {
  text-transform: uppercase;
}

.h3 {
  font-size: 20px;
  line-height: 140%;
}

* {
  box-sizing: border-box;
}

.Header {
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;
  align-items: center;
  z-index: 1000;
  background: #01a8a1;
  padding: 40px 20px;
  transition: ease 0.5s;
}
@media (width < 640px) {
  .Header {
    padding: 25px 20px;
  }
}
.Header--Scrolled {
  padding: 15px 20px;
}
.Header__Logo {
  position: fixed;
  z-index: 1000;
  top: 0 !important;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 375px;
  height: auto;
  opacity: 1 !important;
}
@media (width < 1200px) {
  .Header__Logo {
    max-width: 275px;
  }
}
@media (width < 640px) {
  .Header__Logo {
    max-width: 200px;
  }
}
.Header__Logo img {
  width: 100%;
  height: auto;
  opacity: 1 !important;
}
.Header__Logo.scrolled {
  max-width: 190px;
}
.Header__Left, .Header__Right {
  width: 50%;
  display: flex;
  align-items: center;
  gap: 30px;
}
.Header__Right {
  justify-content: flex-end;
}
.Header__Text {
  margin: 0;
}
@media (width < 1200px) {
  .Header__Text {
    display: none;
  }
}
.Header__Text p,
.Header__Text h3,
.Header__Text h4 {
  margin: 0;
  color: #fff;
  padding: 0;
  font-size: 25px;
  text-transform: uppercase;
  font-weight: 200;
}
.Header__Text h3 {
  font-size: 35px;
  text-transform: uppercase;
  font-weight: 200;
}
.Header__Hamburger {
  width: 50px;
  height: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1000;
  background-color: #fff;
  transition: ease 0.5s;
  border: none;
}
.Header__Hamburger .bars {
  height: 20px;
  width: 30px;
  position: relative;
}
.Header__Hamburger .bars:hover {
  cursor: pointer;
}
.Header__Hamburger .bar {
  background: #01a8a1;
  transform: translateY(-50%) rotate(0deg);
  position: absolute;
  width: 100%;
  height: 2px;
  transition: top 0.1s ease 0.3s, transform 0.3s ease, background 0.1s ease 0.3s;
  left: 0;
}
.Header__Hamburger .bar:nth-child(1) {
  top: 0;
}
.Header__Hamburger .bar:nth-child(2) {
  top: 50%;
}
.Header__Hamburger .bar:nth-child(3) {
  top: 100%;
}
.Header__Hamburger--active {
  transition: ease 0.5s;
}
.Header__Hamburger--active .bars .bar {
  transition: top 0.1s ease, transform 0.3s ease 0.1s, background 0.1s ease;
}
.Header__Hamburger--active .bars .bar:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(315deg);
}
.Header__Hamburger--active .bars .bar:nth-child(2) {
  transform: translateY(-50%) rotate(405deg);
}
.Header__Hamburger--active .bars .bar:nth-child(3) {
  top: 50%;
  transform: translateY(-50%) rotate(405deg);
}
.Header__Hamburger--active > span:not(.bars) {
  color: #fff;
}

html.mobile-menu-open {
  overflow: hidden;
}
html.mobile-menu-open body {
  overflow: hidden;
}
html.mobile-menu-open .Mobile {
  transform: translate3d(0, 0, 0);
}

.Mobile {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100vh;
  background-color: #01a8a1;
  transform: translate3d(-100%, 0, 0);
  transition: transform 0.3s ease;
}
@media (width < 640px) {
  .Mobile {
    width: 100%;
  }
}

.Button {
  color: rgb(255, 255, 255);
  font-size: 1.6em;
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  padding: 10px;
  display: inline-block;
  border: 1px solid rgb(255, 255, 255);
  transition: all 0.3s;
}

.Timeline {
  padding-top: 168px;
  display: flex;
  --blockSpacing: 60px;
  background-color: var(--Coal);
}
@media (width < 1200px) {
  .Timeline {
    padding-top: 250px;
    --blockSpacing: 30px;
    flex-direction: column;
  }
}
.Timeline h2 {
  border-bottom: 1px solid #fff;
  padding-bottom: 30px;
  margin-bottom: 30px;
  text-align: center;
}
.Timeline__Left, .Timeline__Right {
  width: 50%;
  padding: var(--blockSpacing);
}
@media (width < 1200px) {
  .Timeline__Left, .Timeline__Right {
    width: 100%;
  }
}
.Timeline__Left {
  padding-bottom: 0;
  padding-inline: 0;
  background-color: var(--Coal);
}
.Timeline__Left .Top {
  padding-inline: var(--blockSpacing);
}
.Timeline__Right {
  background-color: var(--LightGrey);
}
.Timeline__Right h2 {
  border-bottom: 1px solid var(--Green);
}
.Timeline__Right .Inner {
  position: sticky;
  top: 120px;
}
.Timeline__Items {
  display: flex;
  flex-direction: column;
  position: relative;
}
.Timeline__Item {
  gap: 24px;
  padding: 40px var(--blockSpacing);
  display: flex;
  align-items: center;
  position: relative;
  z-index: 2;
  gap: 28px;
}
.Timeline__Item:hover {
  background-color: var(--Green) !important;
}
.Timeline__Item:hover .Date {
  background-color: #fff;
  color: var(--Coal);
}
.Timeline__Item:before {
  content: "";
  position: absolute;
  top: 0;
  left: 90px;
  width: 1px;
  height: 100%;
  z-index: 1;
  background-color: var(--LightGrey);
}
@media (width < 1024px) {
  .Timeline__Item:before {
    left: 60px;
  }
}
.Timeline__Item:nth-child(even) {
  background: hsl(60, 1%, 20%);
}
.Timeline__Item .Date {
  width: 60px;
  height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--Coal);
  color: #fff;
  font-size: 16px;
  line-height: 100%;
  text-transform: uppercase;
  font-weight: 700;
  border: 0.1rem solid #fff;
  border-radius: 50%;
  z-index: 2;
}
.Timeline__Item .Content {
  display: flex;
  gap: 15px;
  flex: 1 0 0;
  overflow: hidden;
}
@media (width < 1024px) {
  .Timeline__Item .Content {
    flex-direction: column;
  }
}
.Timeline__Item .Content .Image {
  overflow: hidden;
  width: 180px;
}
.Timeline__Item .Content .Image .Slider {
  width: 100%;
  overflow: hidden;
}
.Timeline__Item .Content .Image .Slider img {
  width: 100%;
  height: 150px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
@media (width < 1024px) {
  .Timeline__Item .Content .Image .Slider img {
    max-height: none;
  }
}
.Timeline__Item .Content .Text {
  flex: 1 0 0;
}
.Timeline__Item p {
  color: #fff;
  font-size: 16px;
  line-height: 140%;
}
.Timeline__Text .Item {
  padding: 20px 0;
  display: flex;
  border-bottom: 1px solid var(--Green);
}
.Timeline__Text .Item p {
  font-family: "QuickSand";
  margin: 0;
  font-size: 35px;
  line-height: 140%;
  font-weight: 700;
  color: var(--Green);
}
@media (width < 1024px) {
  .Timeline__Text .Item p {
    font-size: 30px;
    line-height: 130%;
  }
}
@media (width < 640px) {
  .Timeline__Text .Item p {
    font-size: 25px;
    line-height: 120%;
  }
}

.Arrows {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  position: relative;
  z-index: 5;
}
.Arrows .Arrow {
  width: 30px;
  height: 30px;
  border: 1px solid #fff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: transparent;
}/*# sourceMappingURL=website-styles.css.map */