:root
{
  --navColor_0: #d89d59; /* Navigation icon Backdrop */
  --navColor_1: #FFF; /* Navigation icon Front */
  --navColor_2: #d89d59; /* Navigation butn Backdrop */
  --navColor_3: #FFF; /* Navigation butn Front */

  --light: #fcf9f2; /*Backdrop*/
  --theme: #e84e65;
  --accent: #eeece6;
  --theme_Sky: #add8e6;
  --theme_Sun: #f8eb6d;
  --theme_Sunset: #ed8e51;

  --storryDelta: 1;
}

main
{
  overflow-x: unset;
}

main > :last-child
{
  margin-bottom: var(--margin_MediumLarge);
}

/* main::before
{
  content: '';
  width: 100%;
  height: 100%;
  background: url('../Resources/Grain(1024).jpg');
  mix-blend-mode: overlay;
} */

video
{
  object-fit: cover;
}

img
{
  width: 100%;
  height: 100%;
}

h2
{
  color: var(--theme_Sky); /*Experimental*/
}

/* main > section:not(:first-child)
{
  margin-top: var(--margin_Large);
} */

#Intro
{
  display: grid;
  --cardHeight: max(min(43.2vw, 32vh), 220px); /*min(45vw, 35vh)*/
  --cardWidth: min(85vw, 62vh);
  --storryHeight: 50vh;
  --cardOffset: 23.5vh; /* calc(var(--storryHeight) - (var(--cardHeight) / 2));*/
  --generalOffset: calc(var(--storryHeight));
}

#Intro > div > *
{
  will-change: transform;
  /* transition: transform 0.04s; */
}

#storry
{
  display: grid;
  justify-items: center;
  grid-template-rows: repeat(9, 50vh);
  grid-row: 1;
  grid-column: 1;
}

#storry-reference
{
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: 100%;
}

.storry-card
{
  display: grid;
  perspective: 120vh;
  height: 100vh;
  grid-column: 1;
  grid-row: var(--Nr);
  z-index: calc(10 - var(--Nr));
  position: sticky;
  bottom: calc(var(--ClientHeight) - 100vh);
  /* will-change: transform; */
  /* transition: transform 0.04s; */
}

.storry-card > div
{
  transform: scale(calc(1 - (var(--Nr) * 0.002)));
  width: var(--cardWidth);
  height: var(--cardHeight);
  background-color: var(--light);
  display: grid;
  align-self: center;
  text-align: center;
  transform: rotateX(0);
  border-radius: var(--radius);
  will-change: transform;
  transition: transform 0.04s;
  /* box-shadow: var(--shadow);

  transition: box-shadow var(--animationSlow) var(--animationStyle);
  -webkit-transition: box-shadow var(--animationSlow) var(--animationStyle);
  -moz-transition: box-shadow var(--animationSlow) var(--animationStyle);
  -o-transition: box-shadow var(--animationSlow) var(--animationStyle);
  -ms-transition: box-shadow var(--animationSlow) var(--animationStyle); */
}

.storry-card > div::before
{
  grid-column: 1;
  grid-row: 1;
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
  box-shadow: inset 0em 0em 0 0.35em var(--light), inset 0em 0em 0 0.5em #4eace8;
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.storry-card > div::before
{
  grid-column: 1;
  grid-row: 1;
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  box-shadow: inset 0em 0em 0 0.35em var(--light), inset 0em 0em 0 0.5em #4eace8;
  border-radius: var(--radius);
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.storry-card p
{
  font-family: Fuzzy Bubbles, bradley hand;
  font-size: min(4vw, 12pt);
  text-align: left;
  margin: auto;
  display: inline;
  /* width: 80%; */
}

.storry-card#lastCard p
{
  color: var(--theme);
}

.storry-card span
{
  margin: auto;
  max-width: 80%;
  text-align: left;
}

.cardTextCol
{
  color: white !important;
  border-radius: 0.5em;
  padding-left: 1ch;
  padding-right: 1ch;
  font-weight: bold;
}


.active
{
  z-index: calc(15 - var(--Nr));
  will-change: transform;
}

.active.storry-card + div
{
  will-change: transform;
  /* transform: scale(calc(1 - ((var(--Nr) * var(--storryDelta)) * 0.002))); */
}

.active.storry-card ~ div > div /*The rest*/
{
  will-change: transform;
  transform: translateY(var(--cardOffset)) rotateX(45deg);
  filter: brightness(0.8);
}

.active.storry-card + div + div > div  /*The third*/
{
  will-change: auto;
  filter: brightness(calc(0.9 - (var(--storryDelta) * 0.1)));
}

.active.storry-card + div > div /*The second*/
{
  will-change: auto;
  transform: translateY(calc(var(--cardOffset) * var(--storryDelta))) rotateX(calc(45deg * var(--storryDelta)));
  filter: brightness(calc(1 - (var(--storryDelta) * 0.1)));
}

.storry-final
{
  width: 100%;
  display: grid;
  grid-column: 1;
  grid-row: 4 / span 4;
  grid-auto-rows: 1fr;
}

.storry-final > div
{
  width: 100%;
  height: 100%;
  transform: unset !important;
  filter: unset !important;
  will-change: unset !important;
  grid-column: 1;
}

.storry-card#lastCard
{
  top: 0;
  --LastCardTransform: calc((-40vh * var(--viewIn)) + (36vh * var(--viewOut)));
  --LastCardRotate: calc((70deg * var(--viewIn2)) + (20deg * var(--viewIn3)));
  --LastCardScale: calc(1 - (0.1 * var(--viewIn2)));
  transform: translateY(var(--LastCardTransform)); /*rotateZ(calc(90deg * (var(--viewIn) - (var(--viewOut) / 2)))) */
  /* top: -33.333333%;
  transform: translateY(calc((0% * var(--viewIn)) + (66.66% * var(--viewOut)))); */
  /* scale: calc(100% - (5% * var(--viewIn))); */
}

.storry-card#lastCard > div
{
  overflow: hidden;
  display: grid;
  transform-origin: center calc(50% - ((50% - 33%)*var(--viewIn)));
  rotate: var(--LastCardRotate);
  translate: calc(8% * var(--viewOut));
  scale: var(--LastCardScale);
}

.storry-card > div > *
{
  grid-row: 1;
  grid-column: 1;
}

.viewOut2_inView #lastCard_Filter
{
  opacity: 1;
}

.viewOut2_inView .storry-card#lastCard > div
{
  /* background: unset; */
  box-shadow: 5px 5px 15px 0 rgb(0 0 0 / calc(24% * var(--viewOut2))), 8px 0em 8px 0 rgb(0 0 0 / calc(13% * var(--viewOut2)));
  filter: blur(calc(0.5px * var(--viewOut2)));
}

#lastCard_Filter
{
  opacity: 0;
  width: var(--cardWidth);
  height: var(--cardHeight);
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#lastCard_Filter > div
{
  width: var(--cardWidth);
  height: var(--cardHeight);
  mix-blend-mode: darken;
  transform-origin: center calc(50% - ((50% - 33%)*var(--viewIn)));
  transform: scale(calc(1 / var(--LastCardScale))) translateX(calc(-8% * var(--viewOut)));
  rotate: calc(0deg - var(--LastCardRotate));
  display: flex;
  justify-content: center;
}

#lastCard_Filter > div > img
{
  max-width: var(--ClientWidth);
  height: 200vh;
  transform: translateY(calc(0px - var(--LastCardTransform) )) translateY(calc(-100vh * var(--viewOut2))) translateY(calc(-50vh + (var(--cardHeight)/2)));
}

#storry-box,
#storry-front
{
  display: grid;
  max-width: var(--ClientWidth);
  height: 100vh;
  grid-row: 1;
  grid-column: 1;
  overflow: hidden;
  position: sticky;
  top: 0;
  justify-items: center;
}

#storry-front
{
  z-index: 20;
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#storry-front > div
{
  width: var(--ClientWidth);
  margin-top: auto;
  grid-row: 1;
  grid-column: 1;
  transform: translateY(calc(-100vh * var(--viewOut2)));
  position: relative;
  overflow: hidden;
}

#storry-front > div:first-of-type
{
  height: 39.9vh;
  bottom: -27.8vh;
}

#storry-front > div:last-of-type
{
  height: 31.5vh;
  bottom: -100vh;
}

.viewOut2_inView #storry-front > div:first-of-type
{
  height: 47.475vh;
}

#storry-front > div > img
{
  height: 200vh;
  position: absolute;
}

#storry-front > div:first-of-type > img
{
  bottom: calc(0px - (100vh - 27.8vh));
}

#storry-front > div:last-of-type > img
{
  bottom: 0px;
}

#storry-box img
{
  grid-row: 1;
  grid-column: 1;
  height: 200vh;
  transform: translateY(calc(-100vh * var(--viewOut2)));
}

#storry-shadow
{
  display: flex;
  width: 100%;
  height: 10vh;
  margin-bottom: 12.25vh;
  justify-content: center;
}

#storry-shadow::before
{
  content: '';
  margin-top: 10vh;
  width: 86vh;
  height: 10vh;
  box-shadow: 0em 1vh 6vh 0vh rgb(0 0 0 / 25%);
}


/* --- Data --- */

@media (max-width: 850px) {
  #Info
  {
    grid-template-columns: unset !important;
    width: calc(100% - 2em) !important;
    margin: auto !important;
    margin-top: var(--margin_MediumLarge) !important;
  }

  #Info > *
  {
    grid-column: 1 !important;
    grid-row: unset !important;
  }

  #Info #Club,
  #Tiktok video
  {
    height: calc((100vw - 2em) * 10/16) !important;
    width: calc(100vw - 2em) !important;
    max-width: unset !important;
    object-fit: cover !important;
  }
}

#Info
{
  margin-top: var(--margin_MediumLarge);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-row-gap: var(--margin_MediumLarge);
  grid-column-gap: var(--margin_Medium);
}

#Tiktok
{
  display: grid;
  height: 100%;
  width: 100%;
  grid-column: 1;
  grid-row: 1 / span 2;
}

#Tiktok video
{
  background-color: var(--light);
  width: max(min(calc(100% - 2em), calc((100vh - 2em) / (16/9))), 200px);
  object-fit: contain;
  justify-self: end;
  position: sticky;
  top: 1em;
  bottom: 0;
  grid-column: 1;
  /* transform: translateY(calc(-100vh * var(--ProudView))); */
  border-radius: var(--radius);
}

#Club
{
  --height: 100%;
  display: block;
  object-fit: contain;
  justify-self: end;
  width: 50ch;
  height: var(--height);
  max-width: calc(100% - 2em);
  grid-column: 1;
  /* transform: translateY(calc(100vh - (100vh * var(--ProudView)))); */
  top: calc(var(--headerBottom) + 1em);
  grid-row: 3;
}

#Club > img
{
  border-radius: var(--radius);
}

#Info span
{
  height: max-content;
  max-width: 40ch;
  grid-column: 2;
  grid-row: var(--nr);
  display: grid;
  align-self: center;
}

#Info span h1
{
  text-align: left;
  margin-top: 0;
}

#Info #split
{
  margin-top: auto;
  height: 100vh;
  grid-column: 1;
  grid-row: var(--nr);
}

#Info #split > div
{
  height: 100%;
}

/* --- Workshops --- */

#Workshops > h1
{
  margin-bottom: var(--margin_Medium);
}

.Opstart
{
  display: grid;
  width: 100%;
  max-width: 100vw;
  grid-template-columns: 50% 50%;
  grid-template-rows: 18% 19% 20% 16% 20% auto;
  overflow: hidden;
}

.Opstart > *:not(.Opstart_Process)
{
  grid-column: 1 / span 2;
}

.Opstart_Process
{
  height: 50vmin;
  grid-row: var(--nr);
  display: grid;
  align-self: center;
  justify-content: center;
  grid-column: 1 / span 2;
  grid-template-rows: min-content;
  grid-gap: 1em;
  perspective: var(--perspective);
  --imageWidth:min(300px,40vmin);
  --textWidth:min(300px, max(30vmin, 180px));
  --depth:0;
  --tX: 0%;
  --tY: 0%;
}

.Opstart_Process.L
{
  grid-column: 1;
  /* position: sticky;
  left: 1em; */
}

.Opstart_Process.R
{
  grid-column: 2;
  /* position: sticky;
  right: 1em; */
}

.Opstart_Process img
{
  grid-column: 1;
  grid-row: 1;
  height: var(--imageWidth);
  width: auto;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  align-self: center;
  justify-self: center;
  transform: translateX(var(--tX)) translateY(var(--tY)) translate3d(0px, calc((-0.5 + var(--view)) * var(--depth) * -25%), calc(var(--perspective) * (var(--depth) / 10)));
  z-index: calc(1 + var(--depth));
}

.Opstart_Process span
{
  display: block;
  width: min(calc(100% - 2em), max(20em, calc(var(--imageWidth) * 1.2)));
  height: fit-content;
  grid-column: 1;
  /* grid-row: 1; */
  align-self: center;
  justify-self: center;
  padding: 1em;
  border-radius: var(--radius);
  background: var(--light);
  z-index: 1;
}

.Opstart_Process span > h3
{
  margin-top: 0;
}

#Timeline
{
  display: grid;
  justify-self: center;
  width: max(75vmin, 550px);
  margin: auto;
  grid-row: 1 / span 5;
}

.WorkshopIdeer
{
  height: var(--childHeight);
  max-width: 1500px;
  margin: auto;
  width: 100%;
}

.WorkshopIdeer > div
{
  display: grid;
  gap: var(--margin_Medium);
  grid-template-areas: "People1 Place1" "People2 Place2";
  width: 100%;
  --childWidth: min(40vmax, 600px);
  --childHeight: calc(var(--childWidth) / 2);
  --ratio: calc(((100vh + 40vw) / 20vw) * 1);
  margin: auto;
  padding-top: var(--margin_Medium);
  justify-content: center;
  will-change: transform;
  transform-origin: top;
  transform: translateX(calc(-6vmin * (1 - var(--view)))) translateY(calc(-33vh - (var(--view) * -33vh))) scale(var(--view));
  opacity: var(--view);
}

.WorkshopIdeer > div > section
{
  width: var(--childWidth);
  height: var(--childHeight);
  display: grid;
  grid-template-columns: var(--childHeight) 1fr;
  border-radius: var(--radius);
  overflow: hidden;
  will-change: auto;
  box-shadow: var(--shadowClose);
}

.WorkshopIdeer > div > section > img
{
  grid-row: 1;
  grid-column: 1;
  height: var(--childHeight);
  width: var(--childHeight);
}

.WorkshopIdeer > div > section > div
{
  grid-row: 1;
  grid-column: 2;
  background: var(--accent);
  padding: 1em;
  display: grid;
  grid-template-rows: min-content auto auto;
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  height: calc(var(--childHeight) - 2em);
}

.WorkshopIdeer > div > section > div > h2
{
  font-size: min(1.5vw, 16pt);
  margin-bottom: var(--margin_Small);
}

.WorkshopIdeer > div > section > div > h2,
.WorkshopIdeer > div > section > div > h4
{
  grid-row: 1;
  grid-column: 1;
  color: var(--dark);
  margin-top: unset;
  user-select: none;
  -webkit-user-select: none;
}

.WorkshopIdeer > div > section > div > h4
{
  grid-row: 2 / span 2;
  -webkit-mask-image: linear-gradient(white, 66%, rgba(0,0,0,0));
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: left top, left bottom;
  opacity: 0.9;
  overflow: hidden;

  transition: all var(--animationFast) var(--animationStyle);
  -webkit-transition: all var(--animationFast) var(--animationStyle);
  -moz-transition: all var(--animationFast) var(--animationStyle);
  -o-transition: all var(--animationFast) var(--animationStyle);
  -ms-transition: all var(--animationFast) var(--animationStyle);
}

.WorkshopIdeer > div > .expanded > div > h2,
.WorkshopIdeer > div > .expanded > div > h4
{
  -webkit-user-select: unset;
  user-select: unset;
}

.WorkshopIdeer > div > .expanded .ExpandText
{
  grid-row: 3;
  width: 1em;
}

.WorkshopIdeer > div > .expanded > div > h4
{
  overflow: scroll;
  padding-top: 1em;
  padding-bottom: 3em;
  -webkit-mask-image: linear-gradient(0, transparent, 1em, white, calc(100% - 1em), transparent);
  opacity: 1;
}

.WorkshopIdeer .ExpandText
{
  font-size: 12pt;
  overflow: hidden;
  display: grid;
  grid-row: 2 / span 2;
  grid-column: 1;
  background: var(--light);
  padding: 0.4em;
  padding-left: 0.8em;
  padding-right: 0.8em;
  border-radius: var(--radius);
  cursor: pointer;
  width: calc(8ch + 2.5em);
  height: fit-content;
  transform: translateX(calc( -2.5em * ((1 - var(--state)) * var(--x)))) scale(calc(((1 - var(--state)) * 0.125) + 1));

  margin: auto;
  margin-bottom: 0.5em;
  z-index: 2;
  box-shadow: var(--shadow);
  grid-gap: 0.5em;

  transition: width var(--animationFast) var(--animationStyle);
  -webkit-transition: width var(--animationFast) var(--animationStyle);
  -moz-transition: width var(--animationFast) var(--animationStyle);
  -o-transition: width var(--animationFast) var(--animationStyle);
  -ms-transition: width var(--animationFast) var(--animationStyle);

}

.WorkshopIdeer .ExpandText p
{
  font-size: 12pt;
  grid-row: 1;
  margin-top: 0;
  user-select: none;
  -webkit-user-select: none;
  width: 8ch;
  transition: opacity var(--animationFast) var(--animationStyle);
  -webkit-transition: opacity var(--animationFast) var(--animationStyle);
  -moz-transition: opacity var(--animationFast) var(--animationStyle);
  -o-transition: opacity var(--animationFast) var(--animationStyle);
  -ms-transition: opacity var(--animationFast) var(--animationStyle);
}

.WorkshopIdeer .ExpandText svg
{
  font-size: 12pt;
  overflow: unset;
  grid-row: 1;
  width: 1em;
  margin: auto;
  transform: translateY(12.5%) scale(1);
  transition: transform var(--animationFast) var(--animationStyle);
  -webkit-transition: transform var(--animationFast) var(--animationStyle);
  -moz-transition: transform var(--animationFast) var(--animationStyle);
  -o-transition: transform var(--animationFast) var(--animationStyle);
  -ms-transition: transform var(--animationFast) var(--animationStyle);
}

.WorkshopIdeer .ExpandText svg polyline
{
  fill: none;
  stroke-width: 2.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: var(--dark);

  transition: transform var(--animationFast) var(--animationStyle);
  -webkit-transition: transform var(--animationFast) var(--animationStyle);
  -moz-transition: transform var(--animationFast) var(--animationStyle);
  -o-transition: transform var(--animationFast) var(--animationStyle);
  -ms-transition: transform var(--animationFast) var(--animationStyle);
}

.WorkshopIdeer .ExpandText svg + svg
{
  width: 1.25pt;
  height: 13pt;
  transform: unset;
  transition: opacity var(--animationFast) var(--animationStyle);
  -webkit-transition: opacity var(--animationFast) var(--animationStyle);
  -moz-transition: opacity var(--animationFast) var(--animationStyle);
  -o-transition: opacity var(--animationFast) var(--animationStyle);
  -ms-transition: opacity var(--animationFast) var(--animationStyle);
}

.WorkshopIdeer .ExpandText svg + svg polyline
{
  stroke-width: 1px;
  stroke: var(--dark);
  opacity: 0.125;
}

.WorkshopIdeer .expanded .ExpandText p
{
  opacity: 0;
}

.WorkshopIdeer .expanded .ExpandText svg
{
  transform: translateY(5%) scale(1.25);
}

.WorkshopIdeer .expanded .ExpandText svg + svg
{
  opacity: 0;
}

.WorkshopIdeer .expanded .ExpandText svg:first-of-type polyline:first-of-type
{
  transform: translateX(25%);
}

.WorkshopIdeer .expanded .ExpandText svg:first-of-type polyline
{
  transform: translateX(-25%);
}

@media (max-width: 1000px)
{
  .WorkshopIdeer > div
  {
    display: grid;
    grid-gap: 2em;
    justify-content: center;
    --childWidth: calc(100vw - 6em);
    grid-template-areas: "People1" "People2" "Place1" "Place2";
  }

  .WorkshopIdeer > div > section > div > h2
  {
    font-size: min(3vw, 16pt);
  }
}

@media (orientation: portrait)
{
  .Opstart_Process
  {
    grid-column: 1 / span 2 !important;
  }

  .Opstart_Process :only-child
  {
    --tX: 0% !important;
  }
}

@media (max-width: 550px)
{
  #Timeline
  {
    width: calc(100vw + 2em);
    transform: translateX(-1em);
  }

  .Opstart_Process span
  {
    background: unset;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
  }

  .WorkshopIdeer > div
  {
    display: grid;
    grid-gap: 2em;
    justify-content: center;
    --childWidth: calc(100vw - 2em);
  }

  .WorkshopIdeer > div > section
  {
    grid-row: unset;
    z-index: calc(0 - var(--nr));
  }

  .WorkshopIdeer > div > section > div > h2
  {
    font-size: min(6vw, 16pt);
  }
}


/* --- DataBehandling --- */

#DataBehandling
{
  display: grid;
  margin-top: var(--margin_Medium);
}

#DataBehandling > *
{
  grid-column: 1;
}

#DataBehandling > h1 {
    margin-top: 0;
    margin-bottom: var(--margin_Medium);
    grid-row: 1;
}

#DataBehandling_ProcessBilleder
{
  width: min(calc(100vw - 2em), 70ch);
  aspect-ratio: 16 / 10;
  display: flex;
  justify-self: center;
  border-radius: var(--radius);
  overflow: hidden;
  z-index: 1;
  grid-row: 1;
}

#HMW
{
  position: sticky;
  top: calc(50vh);
  grid-row: 1 / span 2;
  opacity: var(--view);
  transform-origin: top;
  transform: translateY(calc(-20% + (20% * var(--view)))) scale(calc(0.8 + (0.2 * var(--view))));
}

.HMW_Text
{
  display: block;
  margin: auto;
  max-width: calc(100vw - 4em);
  width: 70ch;
  text-align: center;
  margin-top: var(--margin_MediumLarge);
  opacity: 0;
  grid-row: 2;
}

.HMW_Text section
{
  margin-top: var(--margin_Small);
}

.HMW_Text h1
{
  margin-top: 0;
  margin-bottom: var(--margin_Small);
}

.HMW_Text *:not(h1)
{
  display: inline;
  font-size: 16pt;
}

.HMW_Text p
{
  font-weight: bold;
  color: var(--theme);
}


/* --- Iterering --- */

#Ideation h1
{
  margin-bottom: var(--margin_Small);
}

#Ideation .imageCluster .Controls {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  align-items: center;
  margin: auto;
  margin-bottom: calc(var(--margin_Medium) + 1em);
  justify-content: center;
  width: 100%;
}

.imageCluster .Controls p,
.imageCluster .Controls rect
{
  color: var(--light);
}

.imageCluster .Controls svg
{
  stroke: var(--light) !important;
}

#Discovery
{
  margin-right: auto;
  overflow: hidden;
  margin-bottom: var(--margin_Medium);
  display: grid;
}

#Discovery video
{
  grid-row: 1;
  width: 33.33vw;
  transform: translateX(-0.5%);
  z-index: -2;
  position: relative;
  mix-blend-mode: darken;
}

#Discovery > div
{
  grid-row: 1;
  width: auto;
  margin: auto;
  margin-right: var(--margin_Medium);
}

#Discovery > div > span
{
  display: block;
  grid-row: 1;
  width: 50%;
  margin: auto;
}

#Discovery > div > span > h1
{
  margin-top: 0;
  text-align: left;
}

@media (max-width: 800px)
{
  #Discovery
  {
    margin-bottom: var(--margin_MediumLarge);
  }

  #Discovery video
  {
    width: 88vw;
  }

  #Discovery > div
  {
    grid-row: unset;
    width: 100%;
    margin-right: auto;
  }

  #Discovery > div > span {
    width: calc(100vw - 4em);
  }

  #Discovery > div h1
  {
    margin-top: var(--margin_Small);
  }
}



/* --- Sold --- */

#Sold
{
  --NoteSize: min(110vw, 80vh);
  margin-top: var(--margin_Medium);
  display: grid;
  grid-template-rows: var(--NoteSize), auto, auto;
}

#Sold > *
{
  grid-column: 1;
}

.GoldNote
{
  justify-self: center;
  grid-row: 1;
  display: grid;
  height: var(--NoteSize);
  top: calc(100vh - var(--NoteSize));
  position: sticky;
  transform-origin: bottom center;
  opacity: calc(1 - var(--NoteView));
  transform: scale(calc(1 - (var(--NoteView) * 0.25)));
  will-change: transform;
  z-index: -1;
}

.GoldNote img
{
  grid-column: 1;
  grid-row: 1;
  max-width: 100%;
  width: 80vh;
  display: block;
  margin: auto;
}

.GoldNote #Sold_Shadow
{
  z-index: -1;
  opacity: 0.5;
  transform: translateX(calc(-16% * var(--NoteView)));
}

#Sold > .imageSequence
{
  margin-top: var(--margin_MediumLarge);
}

#Implimentation
{
  display: block;
  width: min(1200px, calc(var(--ClientWidth) - (var(--margin_MediumLarge)*2)));
  height: auto;
  border-radius: var(--radius);
  justify-self: center;
  margin-top: var(--margin_MediumLarge);
}

@media (max-width: 800px) {
  #Implimentation
  {
    width: calc(var(--ClientWidth) - 2em);
  }
}