:root {
  --circleS: max(21vw, 21vw);
  --circleM: max(28vw, 28vh);
  --circleL: max(35vw, 35vh);
  --circleXL: max(42vw, 42vh);
  /* --circleCover is handled by javascript */
  --circleCover: 0;
  --circleCoverDouble: calc(max(100vw, 100vh) * 2.5);
  --darkGreen: #007758;
  --midGreen: #2da050;
  --lightGreen: #efffe6;
  --backgroundColor: #faf6f2;
  --pagePadding: 80px;
}

/*

    Video Scene

*/

#video-scene {
  margin-top: 50vh;
}

.hc-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hc-video video {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

#background-videos-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--backgroundColor);
  mix-blend-mode: lighten;
}

#background-videos-cover-circle {
  width: var(--circleCover);
  height: var(--circleCover);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: black;
  border-radius: 50%;
}

/*


    About Carousel


*/

#front-elements {
  pointer-events: none;
}

#about-carousel-main-circle {
  width: 200px;
}

#about-carousel-main-circle > div {
  position: absolute;
}

.circle {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  overflow: hidden;
  transform: translate(-50%, -50%);
}

.inner-circle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-repeat: no-repeat;
  background-size: cover;
}

/* NOTE: inner-circle div children are generated with javascript */

.circle-s,
.circle-s .inner-circle {
  width: var(--circleS);
  height: var(--circleS);
}

.circle-m,
.circle-m .inner-circle {
  width: var(--circleM);
  height: var(--circleM);
}

.circle-l,
.circle-l .inner-circle {
  width: var(--circleL);
  height: var(--circleL);
}

.circle-xl,
.circle-xl .inner-circle {
  width: var(--circleXL);
  height: var(--circleXL);
}

.circle-cover,
.circle-cover .inner-circle {
  width: var(--circleCover);
  height: var(--circleCover);
}

.circle-cover-double,
.circle-cover-double .inner-circle {
  width: var(--circleCoverDouble);
  height: var(--circleCoverDouble);
}

#about-carousel-anim-container {
  overflow: hidden;
}

#about-carousel-pic-0-0 {
  top: 50%;
  left: 50%;
}

#about-carousel-pic-0-1 {
  top: 31%;
  left: 23%;
}

#about-carousel-pic-0-2 {
  top: 75%;
  left: 70%;
}

#about-carousel-pic-1-0 {
  left: 67%;
  top: 50%;
  z-index: 1;
}

#about-carousel-pic-1-1 {
  top: 34%;
  left: 40%;
  z-index: 1;
}

#about-carousel-pic-1-2 {
  top: 67%;
  left: 29%;
  z-index: 1;
}

#about-carousel-pic-2-0 {
  top: 50%;
  left: 50%;
}

#about-carousel-pic-2-1 {
  top: 50%;
  left: 50%;
}

#about-carousel-pic-2-2 {
  top: 50%;
  left: 50%;
}

#page-top {
  position: absolute;
  top: 0;
}

.intro-video-title {
  position: absolute;
  color: var(--backgroundColor);
  top: 50%;
  left: 12%;
  transform: translateY(-50%);
  pointer-events: none;
}

.hc-title {
  font-size: 2.3em;
  line-height: 1.22;
}

.hc-text {
  font-size: 14px;
  line-height: 1.22;
}

.hc-bold {
  font-weight: 600;
}

#background-circle-content-1 {
  top: 50%;
  left: 50%;
}

.hc-flex-container {
  display: flex;
  width: 100%;
}

.hc-flex-container-left {
  flex: 0.5;
}

.hc-flex-container-right {
  flex: 0.5;
  display: flex;
  flex-direction: column;
  gap: 40px;
  min-height: 100%;
  justify-content: center;
  padding-right: var(--pagePadding);
}

#about-content-1 {
  margin-top: -30vh;
  padding-bottom: 50vh;
}

#about-content-1-logo-0 {
  width: 306px;
  height: 306px;
  left: calc(36vw - 145px);
  top: 44vh;
}

#about-content-1-logo-0 .inner-circle {
  width: 105px;
}

#about-content-1-logo-1,
#about-content-1-logo-1-cover {
  width: 196px;
  height: 196px;
  left: 36vw;
  top: 57vh;
}

#about-content-1-logo-1-cover {
  width: 0;
  height: 0;
}

#about-content-1-logo-1 .inner-circle {
  width: 109px;
}

#about-content-logo-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 150vh;
  overflow: hidden;
}

#about-content-text-container {
  height: 100vh;
}