.homepage-container {
  margin: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.tree-control-container {
  position: absolute;
  top: 100px;
  z-index: 10000;
  transition: 0.5s cubic-bezier(0.7, 0.03, 0.17, 1);
  margin-top: 8px
}

.tree-control-item {
  display: flex;
  flex-direction: row;
  /* margin-top: -1px; */
  padding: 8px 0px;
  position: relative;
}

.tree-control-item::before,
.tree-control-item::after,
.tree-control-container::before,
.tree-control-container::after {
  content: '';
  position: absolute;
  left: 0;
  height: 1px;
  width: 100%;
  display: none
}

.tree-control-item::before,
.tree-control-container::before { background: #00000040; mix-blend-mode: multiply; }
.tree-control-item::after,
.tree-control-container::after { background: #ffffff40; mix-blend-mode: screen;
}

.tree-control-item::before { top: 0px; }
.tree-control-item::after { top: 1px }
.tree-control-container::before {  bottom: 0px; }
.tree-control-container::after { bottom: 1px }



.tree-control-container h1 {
  font-size: 45px;
  font-family: 'Archivo', Arial, sans-serif;
  font-weight: 200;
  color: #292929;
}

.tree-control-container svg {
  width: 53px;
  margin-right: 9px
}

@media (min-width: 768px) {
  .tree-control-item {
    margin-top: -1px;
    padding: 16px 0px;
  }

  .tree-control-container h1 {
    font-size: 45px;
  }

  .tree-control-container svg {
    width: 53px;
    margin-right: 9px
  }
}

.tree-control-container { left: 20px }
@media (min-width: 700px) { .tree-control-container { left: 50px } }
@media (min-width: 1500px) { .tree-control-container { left: calc((100vw - 1300px) / 2) } }


@media (min-width: 900px) {
  .tree-control-container {
    display: flex;
    bottom: 0px;
    top: unset;
    transform: scale(0.7);
    transform-origin: left;
  }

  .tree-control-item {
    padding: 16px 30px 16px 0px;
    bottom: 20px;
    top: unset;
  }

}


.tree-asset-container {
  width: 100vw;
  height: 100vh;
  position: relative;
}

#___ {
  background: grey;
  z-index: 2;
  opacity: 1
}

/* #d__ {background: blue}
#dm_ {background: #aeaeae}
#dmc {background: yellow}
#_m_ {background: red}
#_mc {background: purple}
#__c {background: orange}
#d_c {background: pink} */

#d__,
#dm_,
#dmc,
#_m_,
#_mc,
#__c,
#d_c {
  z-index: 1;
  opacity: 0
}

.tree-asset-item h1 {
  font-size: 70px;
  text-align: center;
  padding-top:40vh;
}

.tree-asset-item {
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0;
  transition: 0.8s cubic-bezier(0.7, 0.03, 0.17, 1)

}

.tree-asset-item > * {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  transform-origin: 72% 100%;
  transform: scale(1);
  overflow: visible;
  right: 30vw;
}

@media (min-width: 450px) {
    .tree-asset-item > * {
      right: 0vw;
  }
}

@media (min-width: 600px) {
    .tree-asset-item > * {
      right: -0vw;
      transform: scale(1.3);

  }
}

@media (min-width: 768px) {
    .tree-asset-item > * {
    transform-origin: 72% 100%;
    transform: scale(1.3);
  }
}

@media (min-width: 1400px) {
    .tree-asset-item > * {
    transform-origin: 72% 100%;
    transform: scale(1.25) translate(0px, -13%);
  }
}

@media (min-width: 1700px) {
    .tree-asset-item > * {
    transform-origin: 72% 100%;
    transform: scale(1.2) translate(0px, -17%);
  }
}



/* Active states */

.design #d__,
.design.motion #dm_,
.design.motion.code #dmc,
.motion #_m_,
.motion.code #_mc,
.code #__c,
.design.code #d_c {
  opacity: 1;
  z-index: 5;
}

.tree-asset-container,
.tree-asset-container.design.code.motion
 {
  background: black
}

.tree-asset-container.code.motion {
  background: white
}


/* Force inactive */

.design #___,
.design #dm_,
.design #dmc,
.design #_m_,
.design #_mc,
.design #__c,
.design #d_c {
  opacity: 0
}

.motion #___,
.motion #d__,
.motion #dm_,
.motion #dmc,
.motion #_mc,
.motion #__c,
.motion #d_c {
  opacity: 0
}

.code #___,
.code #d__,
.code #dm_,
.code #dmc,
.code #_m_,
.code #_mc,
.code #d_c {
  opacity: 0
}

.design.motion #___,
.design.motion #d__,
.design.motion #dmc,
.design.motion #_m_,
.design.motion #_mc,
.design.motion #__c,
.design.motion #d_c {
  opacity: 0
}

.design.code #___,
.design.code #d__,
.design.code #dm_,
.design.code #dmc,
.design.code #_m_,
.design.code #_mc,
.design.code #__c,
  {
  opacity: 0
}

.motion.code #___,
.motion.code #d__,
.motion.code #dm_,
.motion.code #dmc,
.motion.code #_m_,
.motion.code #__c,
.motion.code #d_c {
  opacity: 0
}

.design.motion.code #___,
.design.motion.code #d__,
.design.motion.code #dm_,
.design.motion.code #_m_,
.design.motion.code #_mc,
.design.motion.code #__c,
.design.motion.code #d_c {
  opacity: 0
}

/* end force inactive */


/* control */

#designToggle.active,
#motionToggle.active,
#codeToggle.active {
  color: #41ff41
}

.tree-control-item h1 {
  cursor: default;
}

/* buttons */
.tree-circle, .tree-button-shape, .tree-control-container h1 {
  transition: 0.2s ease
}

#designToggle.active .tree-circle, #designToggle.active .tree-button-shape,
#motionToggle.active .tree-circle, #motionToggle.active .tree-button-shape,
#codeToggle.active .tree-circle, #codeToggle.active .tree-button-shape,
 .tree-control-container h1 {
    transition: 0.4s ease;
}

#designToggle.active .tree-circle,
#motionToggle.active .tree-circle,
#codeToggle.active .tree-circle {
  transform: translate(40%, 0%);
}


/* All off */
.tree-circle { fill: #fff;}
.tree-button-shape {fill: #242528}

.tree-control-container #designToggle h1 { color: #242528;}
.tree-control-container #motionToggle h1 { color: #242528}
.tree-control-container #codeToggle h1 { color: #242528;}

/* Design */
.tree-control-container.design #designToggle .tree-circle { fill: #fff !important;}
.tree-control-container.design #designToggle .tree-button-shape {fill: #FF4B9F !important}
.tree-control-container.design #motionToggle .tree-circle { fill: black;}
.tree-control-container.design #motionToggle .tree-button-shape { fill: white;}
.tree-control-container.design #codeToggle .tree-circle {fill: black}
.tree-control-container.design #codeToggle .tree-button-shape {fill: white}

.tree-control-container.design #designToggle h1 { color: white;}
.tree-control-container.design #motionToggle h1 { color: white}
.tree-control-container.design #codeToggle h1 { color: white;}


/* Motion */
.tree-control-container.motion #motionToggle .tree-circle { fill: #fff !important;}
.tree-control-container.motion #motionToggle .tree-button-shape {fill: #0B47FB !important}

.tree-control-container.motion #designToggle h1 { color: black;}
.tree-control-container.motion #motionToggle h1 { color: black}
.tree-control-container.motion #codeToggle h1 { color: black;}


/* Code */
.tree-control-container.code #codeToggle .tree-circle { fill: #fff !important;}
.tree-control-container.code #codeToggle .tree-button-shape {fill: #11CA3C !important}

.tree-control-container.code #designToggle h1 { color: black;}
.tree-control-container.code #motionToggle h1 { color: black}
.tree-control-container.code #codeToggle h1 { color: black;}


/* Design + Code */
/* .tree-control-container.design.code #designToggle .tree-circle { fill: #fff;} */
/* .tree-control-container.design.code #designToggle .tree-button-shape {fill: #FF4B9F} */
.tree-control-container.design.code #motionToggle .tree-circle { fill: black;}
.tree-control-container.design.code #motionToggle .tree-button-shape { fill: white;}
.tree-control-container.design.code #codeToggle .tree-circle {fill: white}
.tree-control-container.design.code #codeToggle .tree-button-shape {fill: #11CA3C}

.tree-control-container.design.code #designToggle h1 { color: white;}
.tree-control-container.design.code #motionToggle h1 { color: white}
.tree-control-container.design.code #codeToggle h1 { color: white;}

/* Design + Code + Motion */
/* .tree-control-container.design.code.motion #designToggle .tree-circle { fill: #fff;}
.tree-control-container.design.code.motion #designToggle .tree-button-shape {fill: #FF4B9F}
.tree-control-container.design.code.motion #motionToggle .tree-circle { fill: white;}
.tree-control-container.design.code.motion #motionToggle .tree-button-shape { fill: #0B47FB;}
.tree-control-container.design.code.motion #codeToggle .tree-circle {fill: white}
.tree-control-container.design.code.motion #codeToggle .tree-button-shape {fill: #11CA3C} */

.tree-control-container.design.code.motion #designToggle h1 { color: white;}
.tree-control-container.design.code.motion #motionToggle h1 { color: white}
.tree-control-container.design.code.motion #codeToggle h1 { color: white;}

/* Design + Motion */
.tree-control-container.design.motion #motionToggle .tree-circle { fill: black;}
.tree-control-container.design.motion #motionToggle .tree-button-shape { fill: white;}

.tree-control-container.design.motion #designToggle h1 { color: white;}
.tree-control-container.design.motion #motionToggle h1 { color: white}
.tree-control-container.design.motion #codeToggle h1 { color: white;}

/* Motion + Code */
.tree-control-container.motion.code #motionToggle .tree-circle { fill: white;}
.tree-control-container.motion.code #motionToggle .tree-button-shape { fill: #1640FD;}
.tree-control-container.motion.code #codeToggle .tree-circle { fill: white;}
.tree-control-container.motion.code #codeToggle .tree-button-shape { fill: #11CA3C;}


.tree-control-container.motion.code #designToggle h1 { color: black;}
.tree-control-container.motion.code #motionToggle h1 { color: black}
.tree-control-container.motion.code #codeToggle h1 { color: black;}

/* Black nav */
 .homepage #site-header a {color: black}
.homepage li.menu-item-11376 a::before {background-image: url('data:image/svg+xml,<svg width="19" height="14" viewBox="0 0 19 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.24 2.62825V13.5227C18.24 13.7307 18.0681 13.8971 17.8612 13.8971H0.378831C0.168369 13.8971 0 13.7272 0 13.5227V0.374474C0 0.166433 0.171877 0 0.378831 0H6.07883C6.22265 0 6.35243 0.0797491 6.41557 0.208041L7.45385 2.25378H17.8577C18.0681 2.25378 18.2365 2.42368 18.2365 2.62825H18.24Z" fill="%23000000"/></svg>')}

.design#site-header a,
.design.motion#site-header a,
.design.code.motion#site-header a
{color: white}

.design li.menu-item-11376 a::before,
.design.motion li.menu-item-11376 a::before,
.design.code.motion li.menu-item-11376 a::before
{background-image: url('data:image/svg+xml,<svg width="19" height="14" viewBox="0 0 19 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.24 2.62825V13.5227C18.24 13.7307 18.0681 13.8971 17.8612 13.8971H0.378831C0.168369 13.8971 0 13.7272 0 13.5227V0.374474C0 0.166433 0.171877 0 0.378831 0H6.07883C6.22265 0 6.35243 0.0797491 6.41557 0.208041L7.45385 2.25378H17.8577C18.0681 2.25378 18.2365 2.42368 18.2365 2.62825H18.24Z" fill="%23ffffff"/></svg>')}

/* .tree-control-container.motion.code {filter: drop-shadow(0px 0px 100px white) }
.tree-control-container.motion.code .tree-control-item  {filter: drop-shadow(0px 0px 40px white) }
.tree-control-container.motion.code h1 {filter: drop-shadow(0px 0px 1px white) } */

/* */