:root {
   --color-ic-yellow: hsl(50,100%,50%);
   --color-ic-yellow-light: hsl(50,100%,70%);
   --color-ic-yellow-dark: hsl(50,100%,30%);
}

body {
   font-family: Barlow, sans-serif;
   background: var(--header-color);
}

p {
   margin: 0px;
}

#main-content {
   margin-left: 0;
   margin-right: 0;
   padding-top: var(--header-height-calc);
   padding-left: 0;
   padding-right: 0;
   padding-bottom: 0;
}

.collage {
   --collage-load-safety-time: 12;
}

#collage-main {
   position: fixed;
   display: flex;
   flex-direction: column;
   width: 100%;
   height: min(100vw, var(--true-view-height));
   --collage-cycle-duration: 30;
   --collage-speed-scale: 1;
   --collage-start-offset: 0.5;
   --collage-load-image-offset: 2;
   --collage-item-schedule-fade: 1;
}
.collage-main-background {
   --final-transform: translate(2.2%,1.35%) scale(110%);
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0%;
   left: 0%;
   object-position: 78% 36.5%;
   transform: scale(-1,1);
   --collage-item-schedule-fade-out: 0;
   --collage-item-cycle-only: 0;
}
#collage-main-background {
   --collage-item-schedule-duration: 30;
   --collage-item-transform-final: var(--final-transform);
   --collage-item-transform-function: ease-out;
   --collage-item-schedule-fade: 0;
}
/* #collage-main-background-static {
   transform: scale(-1,1);
   --collage-item-transform-neutral: translate(2.2%,1.35%) scale(310%);
   --collage-item-hold-at-neutral: true;
   --collage-item-schedule-start: 10;
   --collage-item-cycle-only: 0;
} */
#collage-main-background-static {
   --collage-item-transform-neutral: var(--final-transform);
   --collage-item-hold-at-neutral: true;
   --collage-item-schedule-start: 10;
}
/* .collage-main-background {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0%;
   left: 0%;
   --collage-item-transform-final: scale(110%);
   --collage-item-schedule-fade-out: 0;
}
#collage-main-background-1 {
   transform: scale(-1,1);
   --collage-item-schedule-start: -2;
   --collage-item-schedule-duration: 10;
   --collage-item-schedule-fade-in: 0;
}
#collage-main-background-2 {
   transform: scale(-1,1);
   --collage-item-schedule-start: 6.5;
   --collage-item-schedule-duration: 10;
}
#collage-main-background-3 {
   --collage-item-schedule-start: 14;
   --collage-item-schedule-duration: 10;
}
#collage-main-background-4 {
   --collage-item-schedule-start: 21.5;
   --collage-item-schedule-duration: 8.5;
   --collage-item-schedule-fade-out: 1;
} */
#collage-main-title{
   position: relative;
   height: 20%;
   width: 100%;
   --collage-item-hold-at-neutral: true;
   --collage-item-cycle-only: 0;
}
#collage-main-title>*{
   position: absolute;
   width: 100%;
}
#collage-main-title-shadow {
   top: 15%;
   height: 70%;
   background: linear-gradient(90deg, rgba(0,0,0,0) 5%, rgba(0,0,0,0.5) 35%, rgba(0,0,0,0.5) 65%, rgba(0,0,0,0) 95%);
   --collage-item-schedule-start: 1;
   --collage-item-schedule-fade: 1;
}
#collage-main-title-image {
   top: 22%;
   left: 50%;
   height: 56%;
   width: unset;
   filter: drop-shadow(0px 0px 5px black);
   --collage-item-schedule-start: 1.5;
   --collage-item-schedule-fade: 0.5;
   --collage-item-transform-initial: scale(10);
   transform: translate(-50%,0);
}
.collage-main-title-border {
   height: 5%;
   background: linear-gradient(0deg, var(--color-ic-yellow-dark) 0%, var(--color-ic-yellow) 50%, var(--color-ic-yellow-light) 100%);
   border:solid black 0.5px;
   filter: drop-shadow(1px 3px 3px hsla(0,0%,0%,40%));
   --collage-item-schedule-start: 1;
   --collage-item-schedule-fade: 0.5;
}
#collage-main-title-border-top {
   top: 10%;
   transform: translate(-3%,0) skew(45deg);
   --collage-item-transform-initial: translate(-100%,0);
}
#collage-main-title-border-bottom {
   top: 85%;
   transform: translate(3%,0) skew(45deg);
   --collage-item-transform-initial: translate(100%,0);
}

#collage-main-content {
   position: relative;
   width: 100%;
   height: -webkit-fill-available;
   --collage-item-cycle-only: 0;
   --collage-item-hold-at-neutral: true;
}
#collage-main-content-text-area {
   position: absolute;
   top: 15%;
   left: 50%;
   height: 60%;
   width: 40%;
   right: 10%;
}
.collage-main-content-text {
   position: relative;
   width: fit-content;
   color: white;
   text-align: left;
   filter: drop-shadow(0px 0px 3px black) drop-shadow(0px 0px 6px black);
   font-weight: 600;
   font-size: 200%;
   line-height: 100%;
   background: hsla(0, 0%, 0%, 20%);
}
#collage-main-content-text-1 {
   font-size: 21pt;
   font-weight: 600;
   padding: 0.2em;
   border-radius: 0.2em;
   --collage-item-schedule-start: 3;
   --collage-item-transform-initial: translate(-100%,-20%) scale(0.5);
}
#collage-main-content-text-1>span {
   font-size: 18px;
}
.collage-main-content-text-small {
   margin-top: 0.3em;
   font-size: 14pt;
   font-weight: 100;
   padding: 0.4em;
   border-radius: 0.4em;
   --collage-item-schedule-start: 3;
   --collage-item-transform-initial: translate(-100%,-200%) scale(0.5);
}
#collage-main-content-text-2 {
   --collage-item-schedule-start: 3.3;
}
#collage-main-content-text-3 {
   --collage-item-schedule-start: 3.6;
}
#quiz-box {
   margin-top: 1.2em;
   position: absolute;
   --collage-item-schedule-start: 4.5;
}
#quiz-box>p {
   width: fit-content;
   font-size: 20pt;
   color: white;
   text-align: center;
   filter: drop-shadow(0px 0px 5px black);
   text-shadow: 0px 0px 5px white;
   transition: text-shadow 0.5s;
   padding: 0.2em;
   background: linear-gradient(0deg, var(--color-ic-yellow-dark) 0%, var(--color-ic-yellow) 100%);
   border-radius: 0.2em;
   line-height: 100%;
   white-space: nowrap;
}
#quiz-box:hover>p {
   text-shadow: 0px 0px 5px white, 0px 0px 10px white, 0px 0px 15px white;
}

.robbie-cutout {
   position: absolute;
   bottom: 0;
   left: 15%;
   height: 95%;
   filter: drop-shadow(0px 0px 3px black);
   transform: translate(-50%, 0%);
   --collage-item-schedule-duration: 5.3;
   --collage-item-hold-at-neutral: true;
   --collage-item-cycle-only: none;
}
#robbie-cutout-1 {
   --collage-item-schedule-start: 2;
   --collage-item-transform-initial: translate(0%,50%);
}
#robbie-cutout-2 {
   --collage-item-schedule-start: 6.5;
}
#robbie-cutout-3 {
   --collage-item-schedule-start: 11;
}
#robbie-cutout-4 {
   --collage-item-schedule-start: 15.5;
}
#robbie-cutout-5 {
   --collage-item-schedule-start: 20;
}
#robbie-cutout-6 {
   --collage-item-schedule-start: 24.5;
   --collage-item-transform-final: translate(0%,50%);
}
#robbie-movie {
   position: absolute;
   top: 55%;
   left: 28%;
   fill: white;
   transform: translate(-50%, -50%);
   --collage-item-schedule-start: 3;
   /* --collage-item-schedule-duration: 26.5; */
   --collage-item-cycle-only: 0;
}
#robbie-movie-button {
   width: 80px;
   height: 80px;
   background: hsla(200,100%,50%);
   border-radius: 50%;
   cursor: pointer;
}
@keyframes movie-play-pulse {
   from {
      transform: scale(1);
      opacity: 100%;
   }
   60%, to {
      transform: scale(1.5);
      opacity: 0%;
   }
}
#robbie-movie-button-pulse {
   position: absolute;
   width: 80px;
   height: 80px;
   background: hsla(200,100%,50%);
   border-radius: 50%;
   animation: movie-play-pulse 3s ease-out infinite;
}
#robbie-movie-button svg {
   position: relative;
   top: 50%;
   left: 50%;
   width: 50px;
   height: 50px;
   transform: translate(-45%, -50%);
}
.wistia_popover_embed {
   margin-top: calc(var(--header-height-calc)/2);
}
.wistia_placebo_close_button {
   transform: translate(0px, calc(var(--header-height-calc)/2));
}

.auto-text-size>p {
   position: absolute;
   line-height: 100%;
}

#collage-1-spacer {
   z-index: -200;
   height: min(100vw, var(--true-view-height));
   width: 100%;
}

#scroll-area {
   position: relative;
   min-height: 100vh;
   width: 100%;
   background: var(--main-content-color);
   /* padding-bottom: 150px; */
}
#scroll-area-top {
   width: calc(100% + 20px);
   margin-left: -10px;
   filter: drop-shadow(0px 0px 6px black);
   clip-path: inset(0 0 -10px 0);
}
#scroll-area-top>div {
   width: 100%;
   height: 50px;
   background: var(--header-color);
}
#scroll-area-top>svg {
   width: 100%;
   height: 50px;
   fill: var(--header-color);
}

.title-generic {
   margin-top: 50px;
   margin-bottom: 25px;
   padding-left: var(--main-content-padding-left);
   padding-right: var(--main-content-padding-right);
   text-align: center;
   font-size: min(55px, 8vw);
   font-weight: 700;
   line-height: 100%;
   color: var(--header-color);
   filter: drop-shadow(1px 2px 3px gray);
}


#logos-content {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   filter: grayscale(1);
}
#logos-content>img {
   max-height: min(100px,15vw);
   max-width: min(200px,30vw);
   padding: min(20px,3vw) min(30px,4.5vw);
}


#testimonial-album {
   --album-is-wrapping: true;
   --album-auto-width: false;
   --album-slot-gap: 50px;
   --album-slot-width: auto;
   --album-slot-width-max: 100%;
   --album-clip-padding-side: calc(15px - var(--main-content-padding-side-base));
   --album-clip-padding-vert: 15px;
   --album-edge-fade-width: calc(var(--main-content-padding-side-base) - 5px);
   --album-transition-deceleration: 10;
   height: 650px;
}
.album-item {
   width: 500px;
   max-width: 100%;
}

.testimonial {
   height: fit-content;
   background: var(--main-content-color);
   padding: 10px;
   border-radius: 10px;
   filter: drop-shadow(2px 4px 5px hsla(0,0%,0%,50%));
}
.testimonial-image>div {
   max-height: min(var(--true-view-height) - 100px, 70vw, 320px);
   overflow-y: auto;
   overflow-y: overlay;
   /* pointer-events: auto; */
}
.testimonial-image>div>img {
   width: 100%;
}
.testimonial>img {
   width: 100%;
}
.testimonial>p {
   margin-top: -10px;
   font-size: 20pt;
   text-align: center;
   padding: 10px 0;
}

#collage-about-fader-top {
   margin-top: 100px;
   height: 3vw;
   background: linear-gradient(0deg, black, transparent);
}
#collage-about-fader-bottom {
   height: 3vw;
   background: linear-gradient(180deg, black, transparent);
}
#collage-about {
   position: relative;
   height: var(--true-view-height);
   min-height: 50vw;
   max-height: 75vw;
   width: 100%;
   background: black;
   --collage-cycle-duration: 52;
   --collage-start-offset: 38;
   /* --collage-start-offset: 50; */
   --collage-item-schedule-fade: 1;
   --collage-scroll-start-viewable: 0.5;
}
.content-text2 {
   position: absolute;
   color: white;
   filter: drop-shadow(0px 0px 3px black) drop-shadow(0px 0px 6px black);
   font-weight: 600;
   font-size: 200%;
   line-height: 100%;
}
.content-text2>p {
   line-height: 100%;
   text-align: center;
}
#collage-about>video,
#collage-about>img,
#collage-about>a {
   position: absolute;
   --collage-item-transform-final: translate(0%,50%);
   --collage-item-hold-at-neutral: true;
   --collage-item-hold-at-neutral-functions: linear, ease-in;
}
#collage-about-1-text,
#collage-about-2-text,
#collage-about-3-text {
   height: 12%;
   width: 70%;
   top: 5%;
   left: 5%;
   --collage-item-schedule-start: 4;
   --collage-item-schedule-duration: 10;
   --collage-item-transform-initial: translate(25%,0%);
}
#collage-about-1-media-daygame {
   height: 50%;
   width: 40%;
   top: 17%;
   left: 8%;
   transform: rotate(-3deg);
   --collage-item-schedule-start: 5;
   --collage-item-schedule-duration: 9;
   --collage-item-transform-initial: translate(50%,30%) rotate(-10deg) scale(150%);
}
#collage-about-1-media-club {
   height: 40%;
   width: 40%;
   top: 52%;
   left: 15%;
   transform: rotate(-6deg);
   --collage-item-schedule-start: 5.5;
   --collage-item-schedule-duration: 9;
   --collage-item-transform-initial: translate(50%,-30%) rotate(30deg) scale(150%);
}
#collage-about-1-media-party {
   height: 70%;
   width: 30%;
   top: 21%;
   left: 60%;
   transform: rotate(3deg);
   --collage-item-schedule-start: 6;
   --collage-item-schedule-duration: 9;
   --collage-item-transform-initial: translate(-50%,0%) rotate(-20deg) scale(150%);
}
#collage-about-2-text {
   --collage-item-schedule-start: 15;
}
#collage-about-2-media-beach {
   width: 50%;
   height: 50%;
   top: 17%;
   left: 5%;
   transform: rotate(-4deg);
   --collage-item-schedule-start: 16;
   --collage-item-schedule-duration: 9;
   --collage-item-transform-initial: translate(50%,50%) rotate(-20deg) scale(150%);
}
#collage-about-2-media-boat {
   width: 40%;
   height: 40%;
   top: 55%;
   left: 55%;
   transform: rotate(3deg);
   --collage-item-schedule-start: 16.5;
   --collage-item-schedule-duration: 9;
   --collage-item-transform-initial: translate(-50%,-50%) rotate(30deg) scale(150%);
}
#collage-about-2-media-pillows {
   width: 45%;
   height: 45%;
   top: 15%;
   left: 50%;
   transform: rotate(-7deg);
   --collage-item-schedule-start: 17;
   --collage-item-schedule-duration: 9;
   --collage-item-transform-initial: translate(-50%,50%) rotate(50deg) scale(150%);
}
#collage-about-2-media-goofy {
   width: 40%;
   height: 40%;
   top: 55%;
   left: 10%;
   transform: rotate(5deg);
   --collage-item-schedule-start: 17.5;
   --collage-item-schedule-duration: 9;
   --collage-item-transform-initial: translate(50%,-50%) rotate(-40deg) scale(150%);
}
#collage-about-3-text {
   --collage-item-schedule-start: 26;
}
#collage-about-3-media-beauty {
   width: 50%;
   height: 70%;
   top: 18%;
   left: 25%;
   --collage-item-schedule-start: 27;
   --collage-item-schedule-duration: 10.7;
}
#collage-about-3-media-wiley {
   width: 20%;
   height: 40%;
   top: 16%;
   left: 10%;
   transform: rotate(5deg);
   --collage-item-schedule-start: 27.5;
   --collage-item-schedule-duration: 9;
   --collage-item-transform-initial: translate(40%,15%) rotate(-40deg) scale(150%);
}
#collage-about-3-media-strong {
   width: 30%;
   height: 35%;
   top: 18%;
   left: 65%;
   transform: rotate(7deg);
   --collage-item-schedule-start: 28;
   --collage-item-schedule-duration: 9;
   --collage-item-transform-initial: translate(-30%,30%) rotate(-30deg) scale(150%);
   --collage-item-transform-final: ;
}
#collage-about-3-media-dogs {
   width: 31%;
   height: 35%;
   top: 57%;
   left: 5%;
   transform: rotate(2deg);
   --collage-item-schedule-start: 28.5;
   --collage-item-schedule-duration: 9;
   --collage-item-transform-initial: translate(30%,-30%) rotate(-35deg) scale(150%);
}
#collage-about-3-media-colorless {
   width: 25%;
   height: 45%;
   top: 50%;
   left: 67%;
   transform: rotate(-4deg);
   --collage-item-schedule-start: 29;
   --collage-item-schedule-duration: 9;
   --collage-item-transform-initial: translate(-35%,-20%) rotate(25deg) scale(150%);
}
#collage-about-3-text,
#collage-about-3-media-beauty,
#collage-about-3-media-wiley,
#collage-about-3-media-strong,
#collage-about-3-media-dogs,
#collage-about-3-media-colorless {
   --collage-item-cycle-first: 1;
}

#collage-about-4-text-1 {
   width: 90%;
   height: 15%;
   top: 45%;
   left: 50%;
   transform: translate(-50%,-50%);
   --collage-item-schedule-start: 38;
   --collage-item-schedule-duration: 17;
   --collage-item-schedule-fade-in: 2;
   --collage-item-transform-initial: scale(200%);
   --collage-item-hold-at-neutral: true;
}
#collage-about-4-text-2 {
   width: 90%;
   height: 12%;
   top: 59%;
   left: 50%;
   transform: translate(-50%,-50%);
   --collage-item-schedule-start: 40;
   --collage-item-schedule-duration: 14;
   --collage-item-transform-initial: translate(0%,200%);
   --collage-item-hold-at-neutral: true;
}
#collage-about-4-media-pizdetz,
#collage-about-4-media-lunch,
#collage-about-4-media-castle,
#collage-about-4-media-couch,
#collage-about-4-media-posing,
#collage-about-4-media-21pres {
   --collage-item-schedule-duration: 12;
}

#collage-about-4-media-pizdetz {
   height: 40%;
   width: 25%;
   top: 7%;
   left: 5%;
   transform: rotate(-3deg);
   --collage-item-schedule-start: 41.5;
   --collage-item-transform-initial: translate(40%,20%) rotate(20deg) scale(150%);
}
#collage-about-4-media-castle {
   height: 35%;
   width: 35%;
   top: 5%;
   left: 29%;
   transform: rotate(2deg);
   --collage-item-schedule-start: 42.5;
   --collage-item-transform-initial: translate(0%,20%) rotate(-25deg) scale(150%);
}
#collage-about-4-media-21pres {
   /* Don't define height so the 21 convention logo will always show */
   width: 34%;
   top: 24%;
   left: 62%;
   transform: translate(0%,-50%) rotate(-2deg);
   --collage-item-schedule-start: 43.5;
   --collage-item-transform-initial: translate(-30%,-20%) rotate(-25deg) scale(150%);
}
#collage-about-4-media-21pres>img {
   width: 100%;
}
#collage-about-4-media-21pres>span {
   position: absolute;
   left: 50%;
   top: 50%;
   width: fit-content;
   line-height: 100%;
   transform: translate(-50%, -50%) rotate(2deg);
   font-size: 4vw;
   animation: link-21pres-pulse 3s ease-in-out infinite;
   --collage-item-schedule-start: 44.5;
   --collage-item-schedule-duration: 10;
   --collage-item-transform-initial: ;
   --collage-item-transform-final: ;
}
@keyframes link-21pres-pulse {
   from, to {
      color: white;
   }
   50% {
      color: hsla(0, 0%, 100%, 10%);
   }
}
#collage-about-4-media-couch {
   height: 35%;
   width: 35%;
   top: 58%;
   left: 5%;
   transform: rotate(5deg);
   --collage-item-schedule-start: 42;
   --collage-item-transform-initial: translate(40%,-20%) rotate(-25deg) scale(150%);
}
#collage-about-4-media-posing {
   height: 40%;
   width: 20%;
   top: 57%;
   left: 40%;
   transform: rotate(-2deg);
   --collage-item-schedule-start: 43;
   --collage-item-transform-initial: translate(0%,20%) rotate(-25deg) scale(150%);
}
#collage-about-4-media-lunch {
   height: 35%;
   width: 35%;
   top: 60%;
   left: 60%;
   transform: rotate(-5deg);
   --collage-item-schedule-start: 41;
   --collage-item-transform-initial: translate(-30%,-20%) rotate(20deg) scale(150%);
}



#podcast-area {
   margin-top: 100px;
   background: hsl(0,0%,20%);
   color: white;
}
#podcast-group {
   display: flex;
   max-width: 1400px;
   margin-left: auto;
   margin-right: auto;
   padding-top: var(--main-content-padding-side-base);
   padding-bottom: var(--main-content-padding-side-base);
}
#podcast-group>img {
   width: 50%;
   margin: auto;
   filter: drop-shadow(0px 0px 7px white);
}
#podcast-text {
   width: 100%;
   margin: auto;
}
#podcast-text>div:nth-child(1) {
   padding-right: 20px;
   font-size: min(3.5vw, 49px);
   font-weight: 600;
   line-height: 120%;
   text-transform: capitalize;
}
#podcast-text>div:nth-child(1) span {
   white-space: nowrap;
}
#podcast-text-name {
   color: var(--color-ic-yellow);
}
#podcast-text-stats {
   color: hsl(0, 0%, 60%);
}
#podcast-listen {
   margin-top: 50px;
   margin-bottom: 20px;
   width: min-content;
   text-transform: uppercase;
   font-size: min(max(3vw, 24px), 42px);
   line-height: 100%;
   white-space: nowrap;
}
#podcast-listen>a>svg {
   stroke: white;
   stroke-width: 25;
   height: min(max(3vw, 24px), 42px);
   transform: rotate(90deg);
   vertical-align: text-top;
}
#podcast-listen>a {
   color: white;
}
#podcast-logos {
   display: flex;
   flex-wrap: wrap;
   gap: 10px 20px;
   filter: drop-shadow(0px 0px 7px white);
   align-items: center;
}
#podcast-logos>a {
   width: 125px;
}
#podcast-logos #logo-youtube {
   width: 150px;
}
#podcast-logos #logo-itunes {
   filter: brightness(0.5);
}
#podcast-logos>a>img {
   width: 100%;
}
@media only screen and (max-width: 700px) {
   #podcast-group {
      flex-direction: column;
   }
   #podcast-group>img {
      margin-top: 5%;
      width: 100%;
   }
   #podcast-text>div:nth-child(1) {
      font-size: 6vw;
   }
   #podcast-listen {
      margin-top: 20px;
      margin-bottom: 10px;
      font-size: max(5vw, 15px);
   }
   #podcast-listen>a>svg {
      height: max(5vw, 15px);
   }
   #podcast-logos {
      justify-content: space-between;
      gap: unset;
   }
   #podcast-logos>a {
      width: 20%;
   }
   #podcast-logos>#logo-youtube {
      width: 24%;
   }
}


#products-area {
   --product-area-max-width: 1500px;
   --product-gap: min(3vw, 45px);
   --product-count: 3;
   --product-img-width: calc((min(100vw, var(--product-area-max-width)) - 2*var(--main-content-padding-side-base) - (var(--product-count) - 1)*var(--product-gap)) / var(--product-count));
   --product-img-height: calc(0.69 * var(--product-img-width));
   position: relative;
   display: flex;
   max-width: 1500px;
   margin: auto;
   justify-content: space-between;
   align-items: center;
}
.product-container {
   position: relative;
   border-radius: min(1vw, 15px);
   overflow: hidden;
   filter: drop-shadow(2px 4px 6px black);
   transition: transform 0.3s ease-out;
   /* Z-index added so that dumbass Safari renders overflow-hidden with drop-shadow properly */
   z-index:100;
}
.product-container:hover {
   transform: translate(0,-10px);
}
.product-container img {
   transform: scale(1.05) translate(0, 2.5%);
   /* object-fit: cover; */
   width: var(--product-img-width);
   height: var(--product-img-height);
   min-width: var(--product-img-width);
   min-height: var(--product-img-height);
}
.product-container>div {
   position: absolute;
   display: flex;
   bottom: 0;
   width: 100%;
   height: 35%;
   overflow: hidden;
   color: white;
   text-align: center;
}
.product-container>div>img {
   filter: blur(5px) brightness(0.85);
   position: absolute;
   bottom: 0;
}
.product-container>div>span {
   position: relative;
   padding: 0 5%;
   margin: auto;
   font-size: calc(var(--product-img-width) / 13);
   font-weight: 700;
   line-height: 110%;
   filter: drop-shadow(0 0 6px black);
}
@media only screen and (max-width: 900px) {
   #products-area {
      --product-area-max-width: 400px;
      --product-count: 1;
      flex-direction: column;
      justify-content: space-evenly;
      gap: 20px;
   }
   .product-container {
      border-radius: min(3vw, 12px);
   }
   .product-container:hover {
      transform: scale(1.03);
   }
}



#leverage-area {
   --true-vw: calc(1vw - var(--main-content-padding-side-total)/100);
   position: relative;
   overflow: hidden;
   margin-top: 100px;
}
#leverage-background {
   width: 100%;
}
#leverage-area>div {
   position: absolute;
   display: flex;
   top: 0;
   gap: 3%;
   height: 100%;
   align-items: center;
}
#leverage-spacer {
   width: 27%;
   opacity: 0%;
}
#leverage-spacer>img {
   display: block;
   margin: auto;
   width: 90%;
}
#leverage-logo-area {
   width: 27%;
}
#leverage-logo-area>img {
   display: block;
   margin: auto;
   width: 100%;
}
#leverage-text-area {
   width: 40%;
   color: white;
}
#leverage-text-title {
   line-height: 100%;
   font-size: calc(2.4*var(--true-vw));
   text-transform: capitalize;
   text-align: center;
}
#leverage-label-area {
   display: flex;
   flex-wrap: wrap;
   margin-top: calc(1.5*var(--true-vw));
   margin-bottom: calc(0.5*var(--true-vw));
}
.leverage-label {
   width: 33.3%;
}
.leverage-label>div {
   margin: 3%;
   padding: 3% 10%;
   line-height: 100%;
   text-align: center;
   border: solid 1px gray;
   border-radius: calc(1*var(--true-vw));;
   font-size: calc(1.4*var(--true-vw));;
   font-weight: 600;
   cursor: pointer;
   transition: background 0.5s, color 0.5s;
}
.leverage-label.selected>div {
   background: var(--color-ic-yellow);
   color: black;
}
#leverage-verbose-area {
   position: relative;
   height: calc(12*var(--true-vw));
   background: hsla(0,0%,0%,50%);
   border-radius: calc(1*var(--true-vw));
   white-space: break-spaces;
}
.leverage-verbose {
   position: absolute;
   inset: 0;
   padding: calc(1*var(--true-vw));
   font-size: calc(1.8*var(--true-vw));
   line-height: 110%;
   opacity: 0%;
   text-align: center;
   transition: opacity 0.5s;
}
.leverage-verbose.selected {
   opacity: 100%;
}
.leverage-learn-button {
   display: block;
   width: 75%;
   margin: auto;
   margin-top: calc(2*var(--true-vw));
   padding: calc(1*var(--true-vw));
   color: var(--color-ic-yellow);
   background: black;
   border: solid 1px black;
   border-radius: calc(0.5*var(--true-vw));
   font-size: calc(2*var(--true-vw));
   text-transform: uppercase;
   text-align: center;
   line-height: 100%;
   animation: leverage-learn-pulse 4s ease-in-out infinite;
}
@keyframes leverage-learn-pulse {
   from, to {
      box-shadow: inset 0px 0px 1vw var(--color-ic-yellow);
      color: var(--color-ic-yellow);
   }
   50% {
      box-shadow: inset 0px 0px 5vw var(--color-ic-yellow);
      color: white;
   }
}
#leverage-text-area .leverage-learn-button {
   margin-top: calc(2*var(--true-vw));;
   padding: calc(1.5*var(--true-vw));
   border-radius: calc(1*var(--true-vw));
   font-size: calc(4*var(--true-vw));
   display: none;
}

@media only screen and (max-width: 900px) {
   #leverage-area {
      height: calc(100*var(--true-vw));
   }
   #leverage-background {
      width: unset;
      height: 100%;
      margin-left: calc(-15*var(--true-vw));
   }
   #leverage-spacer {
      margin-top: auto;
      width: 32%;
      opacity: 100%;
   }
   #leverage-spacer>img {
      margin-bottom: 10%;
   }
   #leverage-text-area {
      width: 65%;
   }
   #leverage-text-title {
      font-size: calc(5.8*var(--true-vw));
   }
   #leverage-label-area {
      display: flex;
      flex-wrap: wrap;
      margin-top: calc(4.5*var(--true-vw));
      margin-bottom: calc(1.5*var(--true-vw));
   }
   .leverage-label>div {
      border-radius: calc(1.5*var(--true-vw));
      font-size: calc(2.2*var(--true-vw));
   }
   #leverage-verbose-area {
      height: calc(28*var(--true-vw));
      border-radius: calc(2*var(--true-vw));
   }
   .leverage-verbose {
      padding: calc(2*var(--true-vw));
      font-size: calc(3.8*var(--true-vw));
   }
   #leverage-text-area .leverage-learn-button {
      display: block;
   }
   #leverage-logo-area {
      width: 5%;
      opacity: 0%;
      display: none;
   }
}


#team-area {
   --team-width: min(100vw, min(1500px, 80vh));
   position: relative;
   line-height: 100%;
   margin-top: calc(0.06 * var(--team-width));
   margin-bottom: calc(0.25 * var(--team-width));
}
#team-area-inner {
   position: relative;
   width: var(--team-width);
   margin: auto;
}
#team-background {
   position: relative;
   left: 50%;
   transform: translate(-50%, 0);
   width: 120%;
   filter: drop-shadow(calc(0.004 * var(--team-width)) calc(0.006 * var(--team-width)) calc(0.008 * var(--team-width)) black)
}
.team-name {
   position: absolute;
   transform: translate(-50%, -50%);
   font-size: calc(0.04 * var(--team-width));
   font-weight: bold;
   color: gray;
}
.team-button-ig,
.team-button-tiktok {
   position: absolute;
   transform: translate(-50%, 50%);
   display: flex;
   align-items: center;
   gap: calc(0.005 * var(--team-width));
   width: min-content;
   font-size: calc(0.025 * var(--team-width));
   font-weight: 600;
   color: black;
}
.team-button-ig>img,
.team-button-tiktok>img {
   width: calc(0.03 * var(--team-width));
   height: calc(0.03 * var(--team-width));
}
.team-button-ig>span,
.team-button-tiktok>span {
   width: max-content;
}
#team-name-maria {
   top: 2%;
   left: 16%;
}
#team-name-robbie {
   top: -3%;
   left: 48.5%;
}
#team-name-nick {
   top: -2%;
   left: 83%;
}
#team-button-maria-ig {
   bottom: -5%;
   left: 19%;
}
#team-button-maria-tiktok {
   bottom: -10%;
   left: 19%;
}
#team-button-robbie-ig {
   bottom: -5%;
   left: 50%;
}
#team-button-robbie-tiktok {
   bottom: -10%;
   left: 50%;
}
#team-button-nick-ig {
   bottom: -5%;
   left: 82%;
}
@media only screen and (max-width: 900px) {
   .team-button-ig,
   .team-button-tiktok {
      width: calc(0.1 * var(--team-width));
      height: calc(0.1 * var(--team-width));
   }
   .team-button-ig>img,
   .team-button-tiktok>img {
      width: 100%;
      height: 100%;
   }
   .team-button-ig>span,
   .team-button-tiktok>span {
      display: none;
   }
   #team-button-nick-ig {
      bottom: -6%;
      left: 82%;
   }
   #team-button-maria-ig {
      bottom: -6%;
      left: 13%;
   }
   #team-button-maria-tiktok {
      bottom: -6%;
      left: 27%;
   }
   #team-button-robbie-ig {
      bottom: -8%;
      left: 43%;
   }
   #team-button-robbie-tiktok {
      bottom: -8%;
      left: 57%;
   }
}



p.text-pretty,
.text-pretty p {
   padding-bottom: 1em;
   line-height: 130%;
}
.text-column-2 {
   padding-bottom: 1em;
   column-count: 2;
   column-gap: min(3vw, 60px);
}
p.text-super {
   font-size: 1.3em;
   line-height: 110%;
   font-weight: 700;
   text-transform: capitalize;
   text-align: center;
}
p.image-wrapper {
   text-align: center;
   max-width: 100%;
}
p.image-wrapper>img {
   width: 80%;
   box-shadow: 0 0 12px grey;
   border-radius: 8px;
}



#about-area {
   padding-bottom: 100px;
   background: linear-gradient(180deg, transparent 0%, hsla(0,0%,0%,20%) 100%);
}
#about-text {
   margin-left: auto;
   margin-right: auto;
   max-width: 1000px;
   gap: var(--main-content-padding-side-base);
   font-size: min(2vw, 20px);
   text-align: justify;
}
#about-text>div {
   width: 100%;
}
#about-robbie-fat {
   width: 60%;
}
#about-happy-ending {
   display: flex;
   justify-content: space-evenly;
}
#about-happy-ending>.image-wrapper {
   width: 40%;
}
#about-happy-ending img {
   width: 100%;
}
#about-get-coached {
   color: var(--color-ic-yellow);
   filter: drop-shadow(0px 0px 6px black);
   cursor: pointer;
}
#about-get-coached:hover {
   color: var(--color-ic-yellow-light);
}
@media only screen and (max-width: 600px) {
   #about-text {
      font-size: min(3.6vw, 36px);
   }
   .text-column-2 {
      column-count: 1;
   }
}



#quiz-area {
   padding-top: var(--main-content-padding-side-base);
}
#quiz-internal {
   margin: auto;
   width: 100%;
   max-width: 1200px;
}
#quiz-iframe {
   width: 100%;
   height: 700px;
}
