.marqueepage {
  --color-background: #e5e5e5;
  --color-text: #000;
  --color-chill: #FFD833;
  --marquee-font-size: min(max(12px, 2vw), 22px);
  --headline-font-size: min(max(40px, 6vw), 70px);
  --paragraph-font-size: min(max(16px, 4vw), 22px);
  --section-heading-font-size: min(max(30px, 4vw), 50px);
  --duration: 300ms;
  --ease: cubic-bezier(0.33, 1, 0.68, 1);
}

.marqueepage {
  /* background-color: var(--color-background); */
  font-family: "Inter", sans-serif;
  color: var(--color-text);
  width: 100%;
  transition: background-color var(--duration) var(--ease);
  box-sizing: border-box;
}

.page-content {
  max-width: 100%;
  /* padding: 4rem;
  margin: 8rem auto; */
}
/* .page-content * + * {
  margin-top: 2.5rem;
} */
.page-content .marqueea {
  color: var(--color-chill);
}
.page-content .marqueeh1 {
  font-size: var(--headline-font-size);
  font-weight: 700;
  line-height: 1.2;
    color: var(--color-text);
}
.page-content .marqueeh2 {
  margin-top: 6rem;
  font-size: var(--section-heading-font-size);
  font-weight: 700;
  line-height: 1.2;
    color: var(--color-text);
        position: relative;
}
.page-content .marqueeem {
  font-style: italic;
    color: var(--color-text);
}
.page-content .marqueep {
  font-size: var(--paragraph-font-size);
  line-height: 1.75;
  letter-spacing: 0.0125rem;
    color: var(--color-text);
        position: relative;
}

.page-content__section {
  transition: opacity var(--duration) var(--ease);
  
}
.page-content__section .marqueeh2 {
  transform-origin: 50% 100%;
    color: var(--color-text);
}

.page-content__section.active {
  opacity: 1;
}
.page-content__section.active .marqueeh2 {
  -webkit-animation: activate calc(var(--duration) * 2) var(--ease) forwards;
          animation: activate calc(var(--duration) * 2) var(--ease) forwards;
    color: var(--color-text);
}
@-webkit-keyframes activate {
  25% {
    color: var(--color-chill);
    transform: translateY(-12px);
  }
  40% {
    transform: translateY(2px);
  }
  50% {
    transform: translateY(-4px);
  }
  60% {
    color: var(--color-text);
    transform: translateY(1px);
  }
  65%, 100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes activate {
  25% {
    color: var(--color-chill);
    transform: translateY(-12px);
  }
  40% {
    transform: translateY(2px);
  }
  50% {
    transform: translateY(-4px);
  }
  60% {
    color: var(--color-text);
    transform: translateY(1px);
  }
  65%, 100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .page-content__section.active h2 {
    -webkit-animation: none;
            animation: none;
    color: var(--color-text);
  }
}

.marquee-container {
  position: fixed;
  pointer-events: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-weight: 700;
  font-family: "Karla", sans-serif;
  text-transform: uppercase;
  z-index: 1;
  transition: opacity 0.5s;
}

.textmarquee {
  position: absolute;
  font-size: var(--marquee-font-size);
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0.25rem;
  overflow: hidden;
  padding: 2vmin 0;
  min-width: 100%;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-color: var(--color-background);
  box-shadow: var(--color-background) 0 2vmin 2vmin 1vmin;
  transition: background-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
  /* display: none; */
}
.marquee--top {
  top: -1px;
}
.marquee--left {
  left: -1px;
  bottom: -6vmin;
  transform: rotate(-0.25turn);
  transform-origin: 0 0;
}
.marquee--right {
  left: calc(100% + 1px);
  top: 0;
  transform: rotate(0.25turn);
  transform-origin: 0 0;
}
.marquee--bottom {
  bottom: -1px;
  right: 0;
  transform: rotate(0.5turn);
}
.textmarquee div {
  opacity: 1;
  transition: opacity var(--duration) var(--ease);
}
.textmarquee div.active {
  opacity: 0;
}

 .marketingiframe {
    position: absolute;
    float: left;
    clear: both;
    width: 100%;
    height: 80vh;
    z-index: 1;
 }

 @media(max-width: 800px) {
    .marquee--top {
    top: -1px;
    }
    .marquee--left {
    left: -1px;
    bottom: -6vmin;
    transform: rotate(-0.25turn);
    transform-origin: 0 0;
    }
    .marquee--bottom {
    bottom: 1px;
    right: 0;
    transform: rotate(0.5turn);
    }

    .marketingiframe{
        display: none;
    float: none;
    clear: none;
    width: 100%;
    height: 80vh;
    }
 }