@font-face {
  font-family: "demibold";
  src: url('./fonts/TT\ Hoves\ Pro\ Trial\ DemiBold.ttf');
}

@font-face {
  font-family: "regular";
  src: url('./fonts/TT\ Hoves\ Pro\ Trial\ Regular.ttf');
}

@font-face {
  font-family: "medium";
  src: url('./fonts/TT\ Hoves\ Pro\ Trial\ Medium.ttf');
}

@font-face {
  font-family: "light";
  src: url('./fonts/TT\ Hoves\ Pro\ Trial\ Light.ttf');
}

@font-face {
  font-family: "extralight";
  src: url('./fonts/TT\ Hoves\ Pro\ Trial\ ExtraLight.ttf');
}

body {
  margin: 0 auto;
}

iframe {
  border: none;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

img {
  width: -webkit-fill-available;
}

.step {
  /*overflow: scroll;*/
  position: sticky;
  padding: 0 50px;
}

.content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 40px;
  grid-row-gap: 0px;
}

.step.one {
  background-color: #ffffff;
  padding-top: 350px;
  padding-bottom: 120px;
}

.step.two {
  background-color: #d4e4fa;
  padding-bottom: 120px;
}

.step.three {
  background-color: #ffffff;
  padding-bottom: 110px;
}

.step.four {
  background-color: #adccf7;
  padding-bottom: 120px;
}

.stepi.five {
  /*overflow: scroll;*/
  position: sticky;
  padding: 0 50px;
  background-color: #c7d9f7;
  padding-bottom: 0px;
}

.stepi.six {
  /*overflow: scroll;*/
  position: sticky;
  padding: 0 50px;
  background-color: #d6e5fb;
}

.step.seven {
  background-color: #e8f0fc;
  padding-bottom: 120px;
}

.step.eight {
  background-color: #ffffff;
}

.step.nine {
  background-color: #85AFFA;
}

.step.ten {
  background-color: #A4C4FB;
}

.step.eleven {
  background-color: #C2D7FC;
}

.step.twelve {
  background-color: #E0EBFE;
}

.stepi.thirteen {
  position: sticky;
  padding: 0 50px;
  background-color: #FFF;
}
.stepo.thirteen {
  position: sticky;
  background-color: #FFF;
  padding-bottom: 45px;
}
.step.thirteen {
  background-color: #FFF;
  padding-bottom: 150px;
}

.stepi.fourteen {
  position: sticky;
  padding: 0 50px;
  background-color: #f7f7f7;
}
.stepo.fourteen {
  position: sticky;
  background-color: #f7f7f7;
  padding-bottom: 45px;
}
.step.fourteen {
  background-color: #f7f7f7;
}



.title {
  /*font-size: clamp(7.25rem, 12.9vw + 1rem, 13.5rem);*/
  font-size: clamp(7.25rem, 14vw + 1rem, 14.563rem);
  /*font-size: clamp(6.875rem, 14vw + 1rem, 13.5rem);*/
  font-family: 'demibold';
  letter-spacing: -0.05em;
  /*line-height:185px;*/
  line-height: clamp(6.188rem, 11.87vw + 1rem, 12.5rem);

  padding-top: 65px;
  margin-bottom: 65px;
}

.subtitle {
  /*font-size: 3.7rem;*/
  font-size: clamp(3.438rem, 3vw + 1rem, 3.938rem);
  font-family: 'medium';
  /*line-height: 65px;*/
  line-height: clamp(3.625rem, 3.42vw + 1rem, 4.375rem);
}

.subsubtitle {
  font-size: max(1.5rem, 14px);
  font-family: 'demibold';
}

.text {
  font-size: clamp(1.313rem, 0.49vw + 1rem, 1.594rem);
  font-family: 'light';
}

.large-text {
  font-size: clamp(4.938rem, 5vw + 1rem, 5.938rem);
  line-height: clamp(5.063rem, 5vw + 1rem, 6.063rem);
  font-family: 'extralight';
}



.column-1 {
  grid-column-start: 1;
  grid-column-end: 2;
  /* height: 300px; */
}

.column-2 {
  grid-column-start: 2;
  grid-column-end: 3;
  /* height: 300px; */
}

.column-3 {
  grid-column-start: 3;
  grid-column-end: 4;
  /* height: 300px; */
}

.column-4 {
  grid-column-start: 1;
  grid-column-end: 3;
}

.column-5 {
  grid-column-start: 2;
  grid-column-end: 4;
}

.row {
  grid-column-start: 1;
  grid-column-end: 4;
}

.wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  margin: 0 auto;
  max-width: 1450px;
}

.underline {
  display: inline-block;
  position: relative;
  padding-bottom: 4px;
  margin-bottom: 10px;
  animation-duration: 2s;
}
.underline:after {
  position: absolute;
  content: '';
  bottom: -20px;
  left: 0px;
  height: 20px;
  width: 0%;
  background-color: black;
  transition: width 2s ease-in-out
}


.underline-val {
  display: inline-block;
  position: relative;
  padding-bottom: 4px;
  margin-bottom: 10px;
  animation-duration: 1s;
}
.underline-val:after {
  position: absolute;
  content: '';
  bottom: -4px;
  left: 0px;
  height: 5px;
  width: 0%;
  background-color: black;
  transition: width 0.8s ease-in-out
}

.animate:after {
  width: 100%;
}

.blue-circle {
  background-color: #006dfe;
  min-width: 45px;
  height: 45px;
  border-radius: 100%;
  color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 21px;
}

.flex-text-container {
  margin-left: 10px;
  margin-top: 6px;
}

#tn-animate {
  width: 100%;
  color: #7399C6;
  /*font-size: clamp(485px, -23.6px + 43.2vw, 591px);*/
  font-size: clamp(480px, -14px + 38vw, 575px);
  letter-spacing: 10px;
  line-height: 1;
  display: flex;
  flex-direction: row-reverse;
  margin-left: -30px;
}

.carousel {
  max-width: 1550px;
  margin: 0 auto;
}

.carousel.marcus-logo {
  height: 785px;
}

.carousel.people {
  height: 785px;
}

.people-cell > img {
  height: 785px;
  width: auto;
}

.carousel-cell {
  width: 100%;
  color: #FFF;
  height: 785px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-cell > img {
  height: 350px;
}

.economy-cell {
  height: 785px;
  max-width: 1100px;
  min-width: 800px;
}

.economy-cell > img {
  height: -webkit-fill-available;
  width: unset;
}

.workers-cell {
  height: 785px;
}

.workers-cell > img {
  height: 785px;
}

.people-cell {
  max-width: 855px;
}

.border {
  position: absolute;
  width: -webkit-fill-available;
  height: calc(100% - 65px);
}

#built {
  border: 5px solid #ff4c38;
}

#community {
  border: 5px solid #976c41;
  display: none;
}

#creative {
  border: 5px solid #0a5433;
  display: none;
}

#cultural {
  border: 5px solid #6e263e;
  display: none;
}

#financial {
  border: 5px solid #f88aeb;
  display: none;
}

#health {
  border: 5px solid #d9c806;
  display: none;
}

#intellectual {
  border: 5px solid #06bdbb;
  display: none;
}

#natural {
  border: 5px solid #665dee;
  display: none;
}

.static-banner {
  position: absolute;
  z-index: 1;
}

.left {
  width: 50%;
  height: 100%;
}

.left:hover {
  cursor: url(img/arrow-left-solid.svg), auto;
}

.right {
  width: 50%;
  height: 100%;
  right: 0px;
  bottom: 0px;
}

.right:hover {
  cursor: url(img/arrow-right-solid.svg), auto;
}

#to {
  background-color: #006efe;
}

#from {
  background-color: #22263f;
}

.lines {
  position: absolute;
  width: 100%;
  height: 0.5px;
  background-color: #000;
  left: 0;
}

.lines.bottom {
  top: calc(clamp(670px, -58px + 56vw, 810px) + 1px);
  margin-bottom: 60px;
}