/*
 * The main about section.
 *
 * Edit this file. It is served as it is — nothing compiles it, and the
 * order it loads in is set in resources/css/order.php.
 */

.main-about__heading-video {
  -webkit-touch-callout:none;
  height:calc(var(--mobile-vh)*100);
  left:0;
  object-fit:cover;
  pointer-events:none;
  position:-webkit-sticky;
  position:sticky;
  top:0;
  -webkit-user-select:none;
  user-select:none;
  width:100%;
}

.main-about__heading-outer-wrapper {
  left:0;
  position:absolute;
  top:0;
  width:100%;
}

.main-about__heading-wrapper {
  height:calc(var(--mobile-vh)*100);
  position:relative;
  width:calc(100vw - var(--scrollbar-width, 0px));
}

.main-about__heading-wrapper video {
  object-fit:cover;
}

.main-about__heading-wrapper:before {
  background:linear-gradient(0deg,#1818189e 0,#18181838 24%,#18181800 50%),linear-gradient(180deg,#1818186b 0,#18181800 30%);
  content:"";
  inset:0;
  pointer-events:none;
  position:absolute;
  z-index:1;
}

.main-about__heading-play {
  color:#fff;
  position:relative;
  transition:color .6s cubic-bezier(.25,.25,0,1);
  z-index:4;
}

.main-about__heading-play svg {
  --size:142px;
  color:#fff0;
  height:var(--size);
  transition:color .6s cubic-bezier(.25,.25,0,1);
  width:var(--size);
}

@media screen and (max-width:1440px) {

  .main-about__heading-play svg {
    --size:102px;
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .main-about__heading-play svg {
    --size:64px;
  }
}

@media(any-hover:hover),(hover:hover)and (pointer:fine) {

  .main-about__heading-play:not(:disabled):hover svg {
    color:#fff;
  }
}

.main-about__heading-play-time {
  position:absolute;
  right:14px;
  top:8px;
  z-index:1;
}

@media screen and (max-width:1440px) {

  .main-about__heading-play-time {
    font-size:10px;
    right:8px;
    top:2px;
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .main-about__heading-play-time {
    right:-10px;
    top:-8px;
  }
}

.main-about__heading-container {
  height:100%;
  position:relative;
  width:100%;
  z-index:6;
}

.main-about__heading-controls {
  left:50%;
  position:absolute;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:4;
}

.main-about__heading-overlay {
  align-items:flex-end;
  bottom:8px;
  display:flex;
  justify-content:space-between;
  left:0;
  padding-inline:var(--offset-x);
  pointer-events:none;
  position:absolute;
  right:0;
  width:100%;
  z-index:6;
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .main-about__heading-overlay {
    bottom:12px;
    flex-direction:column;
    justify-content:space-between;
    top:calc(var(--header-height) + 24px);
  }
}

.main-about__heading-overlay-title {
  color:#fff;
  pointer-events:auto;
  text-shadow:0 2px 20px #18181873,0 1px 4px #18181873;
  width:calc(var(--grid-column-width)*11 + var(--grid-gap)*10);
}

@media screen and (max-width:1440px) {

  .main-about__heading-overlay-title {
    width:calc(var(--grid-column-width)*7 + var(--grid-gap)*6);
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .main-about__heading-overlay .main-about__heading-overlay-title {
    width:100%;
  }
}

.main-about__hero-event {
  flex-shrink:0;
  max-width:calc(var(--grid-column-width)*4 + var(--grid-gap)*3);
  pointer-events:auto;
  width:100%;
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .main-about__hero-event {
    max-width:100%;
  }
}

.main-about__wrapper {
  position:relative;
  width:100%;
}

.main-about {
  background-color:#3f7086;
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .main-about {
    background-color:#f1ede4;
  }
}

.main-about__top-container {
  height:933px;
  position:relative;
  width:100%;
}

@media screen and (max-width:1440px) {

  .main-about__top-container {
    height:624px;
  }
}

@media screen and (max-width:1199px) {

  .main-about__top-container {
    height:864px;
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .main-about__top-container {
    background-color:#f1ede4;
    height:auto;
    padding:40px var(--offset-x) 0;
  }
}

.main-about__top-container-inner {
  align-items:flex-start;
  display:flex;
  left:var(--grid-column-width);
  position:absolute;
  top:428px;
}

@media screen and (max-width:1440px) {

  .main-about__top-container-inner {
    top:284px;
  }
}

@media screen and (max-width:1199px) {

  .main-about__top-container-inner {
    flex-direction:column;
    left:var(--offset-x);
    right:var(--offset-x);
    top:128px;
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .main-about__top-container-inner {
    flex-flow:row wrap;
    gap:40px 12px;
    left:auto;
    position:static;
    top:auto;
    width:100%;
  }
}

.main-about__bottom-container {
  align-items:flex-start;
  background-color:#f1ede4;
  display:flex;
  padding:96px var(--grid-column-width) 264px;
  position:relative;
}

@media screen and (max-width:1440px) {

  .main-about__bottom-container {
    padding:60px var(--grid-column-width) 128px;
  }
}

@media screen and (max-width:1199px) {

  .main-about__bottom-container {
    padding:184px var(--offset-x) 112px;
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .main-about__bottom-container {
    flex-direction:column;
    padding:48px var(--offset-x) 80px;
  }
}

.main-about__bottom-container-inner {
  align-items:flex-start;
  display:flex;
  margin-top:240px;
}

@media screen and (max-width:1440px) {

  .main-about__bottom-container-inner {
    margin-top:160px;
  }
}

@media screen and (max-width:1199px) {

  .main-about__bottom-container-inner {
    flex-direction:column;
    gap:260px;
    margin-top:0;
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .main-about__bottom-container-inner {
    flex-direction:row;
    gap:12px;
    width:100%;
  }
}

.main-about__bottom-container-image-container {
  align-items:center;
  display:flex;
  flex-direction:column;
  gap:143px;
}

.main-about__bottom-container-image-container picture {
  width:100%;
}

.main-about__bottom-container-image-container {
  width:calc(var(--grid-column-width)*8 + var(--grid-gap)*7);
}

@media screen and (max-width:1440px) {

  .main-about__bottom-container-image-container {
    gap:80px;
  }
}

@media screen and (max-width:1199px) {

  .main-about__bottom-container-image-container {
    gap:71px;
    margin-top:160px;
    width:calc(var(--grid-column-width)*6.5 + var(--grid-gap)*5.5);
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .main-about__bottom-container-image-container {
    gap:51px;
    margin-top:16px;
    width:100%;
  }
}

.main-about__bottom-container-image {
  height:480px;
  width:100%;
}

@media screen and (max-width:1440px) {

  .main-about__bottom-container-image {
    height:320px;
  }
}

@media screen and (max-width:1199px) {

  .main-about__bottom-container-image {
    height:260px;
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .main-about__bottom-container-image {
    height:128px;
  }
}

.main-about__map {
  position:relative;
  width:100%;
}

.main-about__map-title {
  color:#181818;
  font-size:44px;
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.05;
  margin:0 0 28px;
}

@media screen and (max-width:1440px) {

  .main-about__map-title {
    font-size:32px;
    margin-bottom:20px;
  }
}

@media screen and (max-width:1199px) {

  .main-about__map-title {
    font-size:30px;
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .main-about__map-title {
    font-size:24px;
    margin-bottom:16px;
  }
}

.main-about__map-title-accent {
  color:#e1251b;
}

.main-about__map-svg {
  display:block;
  height:auto;
  width:100%;
}

@media screen and (max-width:1199px) {

  .main-about__map-svg text {
    display:none;
  }
}

.main-about__map-svg text {
  pointer-events:none;
}

.main-about__map-svg .js-map-pin {
  cursor:pointer;
}

.main-about__map-svg .pin-dot {
  transition:r .15s ease;
}

.main-about__map-svg .js-map-pin:hover .pin-dot {
  r:4.2;
}

.main-about__map-tip {
  align-items:baseline;
  background-color:#181818;
  color:#fff;
  display:flex;
  font-size:12px;
  gap:5px;
  left:0;
  letter-spacing:.01em;
  opacity:0;
  padding:6px 10px;
  pointer-events:none;
  position:absolute;
  top:0;
  transform:translate(-50%,calc(-100% - 8px));
  transition:opacity .15s ease;
  white-space:nowrap;
  z-index:5;
}

.main-about__map-tip.is-visible {
  opacity:1;
}

.main-about__map-tip b {
  font-weight:700;
}

.main-about__map-tip span {
  font-size:10px;
  letter-spacing:.04em;
  opacity:.55;
  text-transform:uppercase;
}

.main-about__map-legend {
  display:flex;
  flex-wrap:wrap;
  gap:8px 28px;
  list-style:none;
  margin:22px 0 0;
  padding:0;
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .main-about__map-legend {
    gap:6px 18px;
    margin-top:14px;
  }
}

.main-about__map-legend-item {
  align-items:center;
  display:flex;
  gap:8px;
}

.main-about__map-legend-dot {
  border-radius:50%;
  flex-shrink:0;
  height:9px;
  width:9px;
}

.main-about__map-legend-dot--hosted {
  background-color:#e1251b;
}

.main-about__map-legend-dot--upcoming {
  background-color:#16a34a;
}

.main-about__map-legend-text {
  color:#1818188c;
  font-size:12px;
  letter-spacing:.02em;
  text-transform:uppercase;
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .main-about__map-legend-text {
    font-size:11px;
  }
}

.main-about__bottom-container-description {
  line-height:140%;
  width:calc(var(--grid-column-width)*6 + var(--grid-gap)*5);
}

@media screen and (max-width:1199px) {

  .main-about__bottom-container-description {
    width:calc(var(--grid-column-width)*5 + var(--grid-gap)*4);
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .main-about__bottom-container-description {
    font-size:14px;
    position:static;
    width:100%;
  }
}

.main-about__eyebrow-line {
  background-color:#e1251b;
  display:block;
  height:3px;
  margin-bottom:18px;
  width:40px;
}

@media screen and (max-width:1440px) {

  .main-about__eyebrow-line {
    margin-bottom:14px;
    width:32px;
  }
}

.main-about__item {
  padding:18px 24px;
}

@media screen and (max-width:1440px) {

  .main-about__item {
    padding:8px 16px;
  }
}

@media screen and (max-width:1199px) {

  .main-about__item {
    padding:12px 16px;
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .main-about__item {
    padding:10px 12px;
  }
}

.main-about__item-text-wrapper {
  align-items:flex-start;
  display:flex;
  flex-direction:column;
  height:100%;
  justify-content:space-between;
}

.main-about__top-container-item:first-of-type {
  background-color:#f1ede4;
  height:757px;
  padding:91px var(--grid-column-width) 82px;
  width:calc(var(--grid-column-width)*9 + var(--grid-gap)*8);
  z-index:2;
}

@media screen and (max-width:1440px) {

  .main-about__top-container-item:first-of-type {
    height:494px;
    padding:62px var(--grid-column-width) 54px;
  }
}

@media screen and (max-width:1199px) {

  .main-about__top-container-item:first-of-type {
    align-self:flex-start;
    height:480px;
    order:3;
    padding:45px calc(var(--grid-column-width)*.75) 39px;
    width:calc(var(--grid-column-width)*7.5 + var(--grid-gap)*6.5);
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .main-about__top-container-item:first-of-type {
    -webkit-clip-path:none;
    clip-path:none;
    flex:1 1 100%;
    height:auto;
    order:3;
    padding:24px 12px 8px;
    width:100%;
  }
}

.main-about__top-container-item:nth-of-type(2) {
  background-color:#181818;
  color:#fff;
  height:240px;
  transform:translateY(-100%);
  width:calc(var(--grid-column-width)*4 + var(--grid-gap)*3);
}

@media screen and (max-width:1440px) {

  .main-about__top-container-item:nth-of-type(2) {
    height:160px;
  }
}

@media screen and (max-width:1199px) {

  .main-about__top-container-item:nth-of-type(2) {
    align-self:center;
    order:1;
    transform:translateX(calc(var(--grid-column-width)*.25*-1));
    width:calc(var(--grid-column-width)*4 + var(--grid-gap)*3);
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .main-about__top-container-item:nth-of-type(2) {
    flex-basis:calc(50% - 6px);
    flex-grow:1;
    flex-shrink:1;
    height:110px;
    order:1;
    transform:none;
  }
}

.main-about__top-container-item:nth-of-type(3) {
  background-color:#e1251b;
  color:#fff;
  height:360px;
  width:calc(var(--grid-column-width)*4 + var(--grid-gap)*3);
}

@media screen and (max-width:1440px) {

  .main-about__top-container-item:nth-of-type(3) {
    height:240px;
  }
}

@media screen and (max-width:1199px) {

  .main-about__top-container-item:nth-of-type(3) {
    align-self:flex-end;
    order:2;
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .main-about__top-container-item:nth-of-type(3) {
    flex-basis:calc(50% - 6px);
    flex-grow:1;
    flex-shrink:1;
    height:110px;
    order:2;
  }
}

.main-about__bottom-container-item {
  width:calc(var(--grid-column-width)*5 + var(--grid-gap)*4);
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .main-about__bottom-container-item {
    flex:1 1;
    min-width:0;
  }
}

.main-about__bottom-container-item:first-of-type {
  background-color:#181818;
  color:#fff;
  height:240px;
}

@media screen and (max-width:1440px) {

  .main-about__bottom-container-item:first-of-type {
    height:160px;
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .main-about__bottom-container-item:first-of-type {
    height:112px;
  }
}

.main-about__bottom-container-item:nth-of-type(2) {
  background-color:#e1251b;
  color:#fff;
  height:340px;
  transform:translateY(50%);
}

@media screen and (max-width:1440px) {

  .main-about__bottom-container-item:nth-of-type(2) {
    height:230px;
  }
}

@media screen and (max-width:1199px) {

  .main-about__bottom-container-item:nth-of-type(2) {
    transform:translateY(0);
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .main-about__bottom-container-item:nth-of-type(2) {
    height:112px;
  }
}