@import url("https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,300;0,400;0,700;0,800;0,900;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond&family=Fredoka+One&&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@200;300;400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Mate+SC&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Questrial&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Raleway+Dots&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Iceland&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Baloo+Tammudu+2&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Emblema+One&display=swap");
@import url("https://fonts.googleapis.com/css2?family=NTR&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DM+Sans&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Syne&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bungee&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Mina&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,300;0,400;0,700;0,800;0,900;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond&family=Fredoka+One&&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@200;300;400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Mate+SC&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Questrial&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Raleway+Dots&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Iceland&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Baloo+Tammudu+2&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Emblema+One&display=swap");
@import url("https://fonts.googleapis.com/css2?family=NTR&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DM+Sans&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Syne&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bungee&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,300;0,400;0,700;0,800;0,900;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond&family=Fredoka+One&&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@200;300;400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Mate+SC&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Questrial&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Raleway+Dots&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Iceland&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Baloo+Tammudu+2&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Emblema+One&display=swap");
@import url("https://fonts.googleapis.com/css2?family=NTR&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DM+Sans&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Syne&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bungee&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat+Subrayada:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Fugaz+One&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bellota+Text:wght@300&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,300;0,400;0,700;0,800;0,900;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond&family=Fredoka+One&&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@200;300;400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Mate+SC&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Questrial&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Raleway+Dots&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Iceland&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Baloo+Tammudu+2&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Emblema+One&display=swap");
@import url("https://fonts.googleapis.com/css2?family=NTR&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DM+Sans&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Syne&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bungee&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,300;0,400;0,700;0,800;0,900;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond&family=Fredoka+One&&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@200;300;400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Mate+SC&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Questrial&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Raleway+Dots&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Iceland&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Baloo+Tammudu+2&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Emblema+One&display=swap");
@import url("https://fonts.googleapis.com/css2?family=NTR&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DM+Sans&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Syne&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bungee&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,300;0,400;0,700;0,800;0,900;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond&family=Fredoka+One&&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@200;300;400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Mate+SC&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Questrial&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Raleway+Dots&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Iceland&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Baloo+Tammudu+2&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Emblema+One&display=swap");
@import url("https://fonts.googleapis.com/css2?family=NTR&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DM+Sans&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Syne&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bungee&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,300;0,400;0,700;0,800;0,900;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond&family=Fredoka+One&&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@200;300;400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Mate+SC&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Questrial&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Raleway+Dots&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Iceland&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Baloo+Tammudu+2&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Emblema+One&display=swap");
@import url("https://fonts.googleapis.com/css2?family=NTR&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DM+Sans&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Syne&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bungee&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,300;0,400;0,700;0,800;0,900;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond&family=Fredoka+One&&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@200;300;400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Mate+SC&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Questrial&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Raleway+Dots&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Iceland&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Baloo+Tammudu+2&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Emblema+One&display=swap");
@import url("https://fonts.googleapis.com/css2?family=NTR&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DM+Sans&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Syne&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bungee&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,300;0,400;0,700;0,800;0,900;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond&family=Fredoka+One&&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@200;300;400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Mate+SC&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Questrial&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Raleway+Dots&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Iceland&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Baloo+Tammudu+2&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Emblema+One&display=swap");
@import url("https://fonts.googleapis.com/css2?family=NTR&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DM+Sans&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Syne&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bungee&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,300;0,400;0,700;0,800;0,900;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond&family=Fredoka+One&&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@200;300;400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Mate+SC&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Questrial&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Raleway+Dots&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Iceland&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Baloo+Tammudu+2&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Emblema+One&display=swap");
@import url("https://fonts.googleapis.com/css2?family=NTR&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DM+Sans&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Syne&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bungee&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,300;0,400;0,700;0,800;0,900;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond&family=Fredoka+One&&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@200;300;400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Mate+SC&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Questrial&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Raleway+Dots&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Iceland&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Baloo+Tammudu+2&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Emblema+One&display=swap");
@import url("https://fonts.googleapis.com/css2?family=NTR&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DM+Sans&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Syne&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bungee&display=swap");
@keyframes intro-header-letter-down {
  0% {
    opacity: 0;
    margin-top: -20px;
  }
  100% {
    opacity: 1;
    margin-top: 0px;
  }
}
@keyframes intro-model-up {
  0% {
    opacity: 0;
    margin-top: 60vh;
  }
  10% {
    opacity: 0;
  }
  100% {
    opacity: 0.5;
    margin-top: 0px;
  }
}
@keyframes intro-model-toscroll {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 0.25;
  }
}
@keyframes intro-model-outscroll {
  0% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.7;
  }
}
@keyframes intro-header-letter-up {
  0% {
    opacity: 0;
    margin-top: 20px;
  }
  100% {
    opacity: 1;
    margin-top: 0px;
  }
}
@keyframes intro-separator-expand {
  0% {
    width: 0px;
  }
  100% {
    width: 120px;
  }
}
@keyframes intro-sub-header-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.8;
  }
}
@keyframes intro-center-separator {
  0% {
    width: 0px;
  }
  60% {
    width: 120%;
    border-radius: 1px;
  }
  80% {
    width: 120%;
    border-radius: 1px;
  }
  100% {
    width: 120%;
    border-radius: 25%;
  }
}
@keyframes intro-center-separator-portrait {
  0% {
    width: 0px;
  }
  60% {
    width: 60%;
    border-radius: 1px;
  }
  80% {
    width: 60%;
    border-radius: 1px;
  }
  100% {
    width: 60%;
    border-radius: 25%;
  }
}
@keyframes popout-up {
  0% {
    opacity: 0;
    margin-top: 10px;
  }
  100% {
    opacity: 0.5;
    margin-top: 0px;
  }
}
@keyframes popout-expand {
  0% {
    width: 0px;
  }
  100% {
    width: 100%;
  }
}
@keyframes popout-fade-out {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
@keyframes showcaser-active-border-top {
  0% {
    outline: 0px solid #121212;
  }
  100% {
    outline: 15px solid #121212;
  }
}
@keyframes dropper-cell-in-left {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes showcaser-cell-highlight {
  0% {
    height: 0px;
  }
  100% {
    height: 6px;
  }
}
@keyframes showcaser-caption-highlight {
  0% {
    padding-bottom: 0px;
  }
  100% {
    padding-bottom: 8px;
  }
}
@keyframes showcaser-clicker-shine {
  0% {
    right: -50%;
  }
  100% {
    right: 150%;
  }
}
#projects-page {
  position: relative;
}
#projects-page #projects-page-header {
  position: absolute;
  font-size: 60px;
  left: 50%;
  transform: translateX(-50%);
}
#projects-page #projects-page-header h3 {
  font-family: "Cormorant Garamond", serif;
}
#projects-page #projects-page-header .popout {
  font-family: "Mina", sans-serif;
  font-size: 24px;
  position: fixed;
  right: 70px;
  bottom: 10px;
  width: 100px;
  transform: translateY(-100%);
  text-align: right;
  opacity: 0;
  transition: 0.5s;
  animation: popout-up 0.25s 3s forwards;
}
#projects-page #projects-page-header .popout::after {
  content: "";
  position: absolute;
  width: 0px;
  height: 2px;
  right: 0px;
  bottom: -10px;
  background-color: white;
  opacity: 0.5;
  animation: popout-expand 0.25s 3.25s forwards cubic-bezier(0.07, 0.75, 0.32, 0.96);
}
#projects-page #projects-page-header .popout.hidden {
  opacity: 0.5;
  animation: popout-fade-out 0.5s 0.2s forwards;
}
#projects-page .projects-grid {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100vw;
  padding-top: 150px;
  overflow-x: hidden;
}
#projects-page .projects-grid .project-cell {
  position: relative;
  height: 300px;
  width: 100vw;
  max-width: 100vw;
  padding: 0px 10%;
  margin: 60px 70px;
}
#projects-page .projects-grid .project-cell:hover {
  cursor: pointer !important;
}
#projects-page .projects-grid .project-cell:hover * {
  cursor: pointer !important;
}
#projects-page .projects-grid .project-cell:hover::before {
  transition-timing-function: cubic-bezier(0.07, 0.75, 0.32, 0.96);
  opacity: 0.5;
}
#projects-page .projects-grid .project-cell:hover .project-header {
  position: absolute;
  opacity: 1;
  transition: opacity 0.2s;
}
#projects-page .projects-grid .project-cell:hover .project-header h1::after {
  margin-left: 10px;
  width: 250px;
}
#projects-page .projects-grid .project-cell:hover .project-header h1::before {
  margin-left: 70px;
  width: var(--dipper-width);
  transition-delay: 0.25s;
}
#projects-page .projects-grid .project-cell:hover .project-header h5 {
  color: #ff7c0a;
  transition-delay: opacity 0.5s;
  opacity: 0.8;
}
#projects-page .projects-grid .project-cell:hover .project-header h3 {
  transition-delay: 0.75s;
  opacity: 0.5;
}
#projects-page .projects-grid .project-cell:hover .project-image img {
  opacity: 0.4;
  transition-timing-function: cubic-bezier(0.36, 0, 0.43, 1);
  transition: transform 20s, opacity 3s;
  transition-delay: 0.5s;
  transform: translateY(calc(100% - 300px));
}
#projects-page .projects-grid .project-cell .project-header {
  position: absolute;
  left: 8%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9;
  opacity: 0.5;
  transition: opacity 0.75s;
  transition-timing-function: cubic-bezier(0.07, 0.75, 0.32, 0.96);
}
#projects-page .projects-grid .project-cell .project-header h1 {
  position: relative;
  font-family: "Manrope", sans-serif;
  font-size: 40px;
  margin-bottom: 40px;
}
#projects-page .projects-grid .project-cell .project-header h1::after {
  left: 0px;
  transition: 0.75s;
  width: 200px;
}
#projects-page .projects-grid .project-cell .project-header h1::after, #projects-page .projects-grid .project-cell .project-header h1::before {
  content: "";
  position: absolute;
  bottom: -20px;
  background-color: white;
  height: 4px;
  transition: 0.5s;
  transition-timing-function: cubic-bezier(0.37, 0, 0.11, 1.09);
}
#projects-page .projects-grid .project-cell .project-header h1::before {
  left: calc(200px + 20px);
  width: 0px;
  transition-delay: 0.1s;
}
#projects-page .projects-grid .project-cell .project-header h5 {
  text-transform: uppercase;
  font-family: "Manrope", sans-serif;
  font-size: 18px;
  opacity: 0.4;
}
#projects-page .projects-grid .project-cell .project-header h3 {
  opacity: 0.3;
  margin-top: 10px;
  font-family: "Inconsolata", sans-serif;
  font-size: 18px;
}
#projects-page .projects-grid .project-cell .project-image {
  position: relative;
  top: 50%;
  right: 0px;
  width: 100%;
  min-height: 100%;
  overflow: hidden;
  transform: translateY(-50%);
  filter: brightness(0.6);
  transition: filter 2s;
  transition-timing-function: cubic-bezier(1, 0.02, 0.65, 1.06);
}
#projects-page .projects-grid .project-cell .project-image img {
  transition-delay: 2s;
  transition-timing-function: cubic-bezier(0.37, 0.56, 0.44, 0.93);
  position: absolute;
  left: 50px;
  bottom: 0px;
  width: 100%;
  min-height: 100%;
  transition: 10s;
  transition-timing-function: cubic-bezier(0.07, 0.75, 0.32, 0.96);
  border-radius: inherit;
  opacity: 0.1;
}
#projects-page .projects-grid .project-cell.right {
  margin-left: auto;
}

:root {
  --toolbox-height: 100%;
  --toolbox-selected: 0;
}

@keyframes fade-in-icon {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.25;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-out {
  0% {
    opacity: inherit;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-in-paragraph {
  0% {
    transform: translateX(-10%);
    opacity: 0;
  }
  12% {
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}
@keyframes bounce-out-with-that {
  0% {
    width: 0px;
  }
  100% {
    width: 50%;
  }
}
.toolbox {
  pointer-events: all;
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
}
@media (orientation: portrait) {
  .toolbox {
    flex-direction: column;
  }
}
.toolbox .toolbox-nav-list {
  position: relative;
  list-style: none;
  opacity: 0.4;
  transition: 0.75s;
  transition-delay: 0.5s;
  pointer-events: all;
}
.toolbox .toolbox-nav-list:hover {
  transition: 0.25s;
  transition-delay: 0s;
  opacity: 0.8;
}
.toolbox .toolbox-nav-list .toolbox-nav-item {
  font-family: "Questrial", sans-serif;
  pointer-events: all;
  text-transform: uppercase;
  position: relative;
  margin: 5px 0px;
  padding: 10px 10px 10px 40px;
  font-size: 24px;
  text-align: right;
  opacity: 0.3;
  transition: 0.25s;
}
@media (orientation: portrait) {
  .toolbox .toolbox-nav-list .toolbox-nav-item {
    text-align: left;
  }
}
.toolbox .toolbox-nav-list .toolbox-nav-item.active {
  opacity: 1;
}
.toolbox .toolbox-nav-list .toolbox-nav-item:hover:not(.active) {
  cursor: pointer;
  opacity: 0.65;
}
.toolbox .toolbox-nav-list::after {
  content: "";
  position: absolute;
  right: -20px;
  top: calc(var(--toolbox-height) * var(--toolbox-selected));
  height: var(--toolbox-height);
  width: 5px;
  background-color: #ff7c0a;
  transition: 0.5s;
  transition: 0.25s;
  transition-timing-function: cubic-bezier(0.07, 0.75, 0.32, 0.96);
  transform: translateX(50%);
}
.toolbox .toolbox-nav-list::before {
  content: "";
  position: absolute;
  transform: translateX(50%);
  height: 100%;
  width: 2px;
  right: -20px;
  opacity: 0.1;
  background-color: white;
}
.toolbox .toolbox-content {
  position: relative;
  width: calc(100% - 20%);
  margin-left: 20px;
}
.toolbox .toolbox-content .toolbox-internal.go-away img {
  opacity: 0 !important;
}
.toolbox .toolbox-content .toolbox-internal.go-away .toolbox-internal-paragraph {
  opacity: 0;
}
.toolbox .toolbox-content .toolbox-internal {
  display: none;
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 0px 40px;
  transition: 0s opacity 2s;
}
.toolbox .toolbox-content .toolbox-internal.active {
  display: flex;
  opacity: 1;
}
.toolbox .toolbox-content .toolbox-internal.active .toolbox-internal-paragraph {
  animation: fade-in-paragraph 1s forwards cubic-bezier(0.07, 0.75, 0.32, 0.96);
  animation-delay: 0.25s;
}
.toolbox .toolbox-content .toolbox-internal.active .toolbox-internal-paragraph p {
  transition: opacity 0.5s;
  opacity: 0.9;
}
.toolbox .toolbox-content .toolbox-internal.active .toolbox-internal-paragraph p:hover {
  opacity: 1;
}
.toolbox .toolbox-content .toolbox-internal.active .toolbox-internal-paragraph h2::after {
  animation: bounce-out-with-that 0.25s 0.5s forwards cubic-bezier(0.07, 0.75, 0.32, 0.96);
}
.toolbox .toolbox-content .toolbox-internal.active .toolbox-internal-paragraph .toolbox-see-more {
  font-size: 24px;
  position: relative;
  font-family: "Inconsolata", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  opacity: 0.5;
  transition: 0.5s;
  transition-timing-function: cubic-bezier(0.07, 0.45, 0.37, 0.96) !important;
  pointer-events: all;
}
.toolbox .toolbox-content .toolbox-internal.active .toolbox-internal-paragraph .toolbox-see-more::after {
  content: "";
  position: absolute;
  width: 90%;
  height: 1px;
  left: 0px;
  bottom: -2px;
  background-color: white;
  transition: 0.5s;
  opacity: 0;
}
.toolbox .toolbox-content .toolbox-internal.active .toolbox-internal-paragraph .toolbox-see-more:hover {
  cursor: pointer;
  transition: 0.5s;
  opacity: 0.75;
}
.toolbox .toolbox-content .toolbox-internal.active .toolbox-internal-paragraph .toolbox-see-more:hover::after {
  transition: 0.2s;
  opacity: 1;
}
.toolbox .toolbox-content .toolbox-internal.active .toolbox-internal-icons {
  animation: fade-in-paragraph 1s forwards;
}
.toolbox .toolbox-content .toolbox-internal.active .toolbox-internal-icons img {
  opacity: 0.25;
}
.toolbox .toolbox-content .toolbox-internal .toolbox-internal-icons {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  flex-direction: column;
  justify-content: center;
}
.toolbox .toolbox-content .toolbox-internal .toolbox-internal-icons img {
  transition: 0.5s;
  transition-delay: 0.125s;
  height: 50%;
  width: auto;
  opacity: 0;
  object-fit: contain;
}
.toolbox .toolbox-content .toolbox-internal .toolbox-internal-icons img:nth-child(1) {
  animation-delay: 0.25s;
  transition-delay: 0.25s;
}
.toolbox .toolbox-content .toolbox-internal .toolbox-internal-paragraph {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 30px;
  width: 90%;
  transition: 0.5s;
  transition-delay: 0s;
  opacity: 0;
}
.toolbox .toolbox-content .toolbox-internal .toolbox-internal-paragraph h2 {
  font-family: "Raleway Dots", sans-serif;
  text-transform: uppercase;
  margin-bottom: 20px;
  position: relative;
  opacity: 0.7;
}
.toolbox .toolbox-content .toolbox-internal .toolbox-internal-paragraph h2::after {
  content: "";
  position: absolute;
  bottom: -15px;
  transform: translateY(-50%);
  left: 0px;
  width: 0px;
  background-color: white;
  height: 2px;
  opacity: 0.3;
}
.toolbox .toolbox-content .toolbox-internal .toolbox-internal-paragraph p {
  font-family: "Manrope", sans-serif;
  font-size: 22px;
  opacity: 0;
}

@media (max-width: 1520px) {
  .toolbox .toolbox-content .toolbox-internal .toolbox-internal-paragraph {
    width: 100%;
  }
}
@media (orientation: portrait) {
  .toolbox .toolbox-nav-list {
    opacity: 0.7;
  }
  .toolbox .toolbox-nav-list .toolbox-nav-item {
    padding-left: 20px;
    margin-left: 0px;
    opacity: 0.7;
  }
  .toolbox .toolbox-content {
    width: 95%;
    height: 420px;
    margin-left: 0px;
  }
  .toolbox .toolbox-content .toolbox-internal {
    padding: 20px;
    width: 100%;
  }
  .toolbox .toolbox-content .toolbox-internal .toolbox-internal-icons {
    height: 50%;
    position: absolute;
    top: -50%;
    right: 25%;
    transform: translateY(-50%);
    width: 120px;
  }
  .toolbox .toolbox-content .toolbox-internal .toolbox-internal-icons img {
    margin-right: 42px;
    width: auto;
    height: 75%;
  }
  .toolbox .toolbox-content .toolbox-internal .toolbox-internal-paragraph {
    width: 100%;
    margin-left: 0px;
    text-align: right;
    right: 0px;
  }
  .toolbox .toolbox-content .toolbox-internal .toolbox-internal-paragraph p {
    font-size: 16px;
    line-height: 32px;
  }
  .toolbox .toolbox-content .toolbox-internal .toolbox-internal-paragraph h2 {
    text-align: left;
    margin-bottom: 32px;
  }
}
@media (max-width: 480px) {
  .toolbox .toolbox-content .toolbox-internal .toolbox-internal-icons {
    right: 5%;
  }
}
.skillset-toolbox-header {
  margin-top: 84px;
  position: relative;
  display: flex;
  flex-direction: row;
  transition: 0.25s;
  transition-timing-function: cubic-bezier(0.07, 0.75, 0.32, 0.96);
  transform: translateX(42px);
  transition-delay: 0.25s !important;
}
.skillset-toolbox-header .skillset-header-icon {
  margin-left: 84px;
  font-size: 42px;
  color: white;
  align-self: flex-end;
  opacity: 0;
  transition-delay: 1.5s !important;
  transition: 0.25s;
  transition-timing-function: cubic-bezier(0.07, 0.75, 0.32, 0.96);
  transform: translateX(-42px);
}
.skillset-toolbox-header h2 {
  font-family: "Raleway Dots", sans-serif;
  font-size: 42px;
  text-transform: uppercase;
}
.skillset-toolbox-header h3 {
  display: none;
  font-family: "Inconsolata", sans-serif;
  position: absolute;
  top: 0px;
  left: 0px;
  opacity: 0;
  transition-delay: 2s !important;
  transition: 0.5s;
  transform: translateY(-100%);
}
.skillset-toolbox-header::after {
  content: "";
  position: absolute;
  width: 0px;
  height: 2px;
  left: 0px;
  bottom: -24px;
  background-color: white;
  opacity: 0.25;
  transition-timing-function: cubic-bezier(0.07, 0.75, 0.32, 0.96);
  transition-delay: 1s !important;
  transition: 1s;
}
.skillset-toolbox-header.animated {
  opacity: 1;
  transform: translateX(0px);
}
.skillset-toolbox-header.animated .skillset-header-icon {
  opacity: 0.7;
  transform: translateX(0px);
}
.skillset-toolbox-header.animated::after {
  width: 96px;
}
.skillset-toolbox-header.animated::before {
  transform: translate(-50%, -50%);
  opacity: 1;
}
.skillset-toolbox-header.animated h3 {
  display: block;
  opacity: 0.25;
}

.skillset-toolbox {
  position: relative;
  margin-top: 84px;
  width: 100%;
  height: 240px;
  overflow-y: visible;
  mask-image: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(10%, black), color-stop(50%, black), color-stop(90%, black), color-stop(100%, rgba(0, 0, 0, 0)));
  -webkit-mask-image: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(10%, black), color-stop(50%, black), color-stop(90%, black), color-stop(100%, rgba(0, 0, 0, 0)));
  z-index: -1;
}
.skillset-toolbox::before {
  content: "";
  position: absolute;
  width: 100vw;
  height: 75%;
  background-color: #121212;
  left: 50%;
  bottom: 0px;
  opacity: 1;
  transform: translateX(-50%);
  transition: opacity 2s, transform 0.5s;
  transition-timing-function: cubic-bezier(0.07, 0.75, 0.32, 0.96);
  transition-delay: 2s !important;
  z-index: -2;
}
.skillset-toolbox .skillset-toolbox-content {
  position: relative;
  width: 100%;
  height: 100%;
}
.skillset-toolbox .skillset-toolbox-content .skillset-toolbox-scroll-container {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: 2s;
  transition-timing-function: cubic-bezier(0.07, 0.75, 0.32, 0.96);
}
.skillset-toolbox .skillset-toolbox-content .skillset-toolbox-scroll-container .skillset-toolbox-row {
  position: absolute;
  left: 50%;
  bottom: 42px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-grow: 1;
  transform: translateX(-50%);
}
.skillset-toolbox .skillset-toolbox-content .skillset-toolbox-scroll-container .skillset-toolbox-row .skillset-toolbox-cell {
  pointer-events: all;
  position: relative;
  min-width: 150px;
  width: 150px;
  height: 150px;
  opacity: 0.5;
}
.skillset-toolbox .skillset-toolbox-content .skillset-toolbox-scroll-container .skillset-toolbox-row .skillset-toolbox-cell img {
  pointer-events: none !important;
  position: absolute;
  width: 100px;
  height: auto;
  bottom: 0px;
  left: 50%;
  opacity: 0.25;
  transform: translateX(-50%);
  z-index: 10;
  transition: 0.75s;
  transition-timing-function: cubic-bezier(0.07, 0.75, 0.32, 0.96);
}
.skillset-toolbox .skillset-toolbox-content .skillset-toolbox-scroll-container .skillset-toolbox-row .skillset-toolbox-cell .skillset-tooltip {
  pointer-events: none !important;
  font-family: "Bellota Text", sans-serif;
  text-transform: uppercase;
  font-size: 24px;
  position: absolute;
  left: 50%;
  bottom: -24px;
  opacity: 0;
  transition: 1s;
  transition-timing-function: cubic-bezier(0.07, 0.75, 0.32, 0.96);
  transform: translate(-50%, -12px);
  z-index: 9;
  filter: blur(10px);
}
.skillset-toolbox .skillset-toolbox-content .skillset-toolbox-scroll-container .skillset-toolbox-row .skillset-toolbox-cell:hover {
  cursor: pointer;
  opacity: 0.75;
}
.skillset-toolbox .skillset-toolbox-content .skillset-toolbox-scroll-container .skillset-toolbox-row .skillset-toolbox-cell:hover .skillset-tooltip {
  transition: 0.25s;
  transform: translate(-50%, 0px);
  opacity: 0.5;
  filter: blur(0px);
}
.skillset-toolbox .skillset-toolbox-content .skillset-toolbox-scroll-container .skillset-toolbox-row .skillset-toolbox-cell:hover img {
  transition: 0.125s;
  width: 110px;
  margin-bottom: 6px;
  opacity: 0.5;
}
.skillset-toolbox .skillset-toolbox-bottom {
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 140px;
  left: 0px;
  bottom: 0px;
  overflow-y: hidden;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.4);
}
.skillset-toolbox .skillset-toolbox-bottom::after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  border-top-left-radius: 100%;
  border-top-right-radius: 100%;
  background: linear-gradient(to top, rgba(235, 233, 249, 0.1) 0%, rgba(216, 208, 239, 0.06) 65%, rgba(206, 199, 236, 0.03) 66%, rgba(193, 191, 234, 0.01) 100%);
  transform: translateY(50%);
}
.skillset-toolbox .skillset-toolbox-bottom-border {
  mask-image: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(10%, black), color-stop(50%, black), color-stop(90%, black), color-stop(100%, rgba(0, 0, 0, 0)));
  -webkit-mask-image: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(10%, black), color-stop(50%, black), color-stop(90%, black), color-stop(100%, rgba(0, 0, 0, 0)));
  position: absolute;
  bottom: 0px;
  left: 50%;
  width: 80%;
  border: 2px solid white;
  border-radius: 50%;
  opacity: 0.45;
  transform: translate(-50%, 50%);
}

@media (orientation: portrait) {
  .skillset-toolbox {
    height: auto;
    padding-top: 32px;
  }
  .skillset-toolbox::before {
    height: 120%;
  }
  .skillset-toolbox .skillset-toolbox-content .skillset-toolbox-scroll-container {
    position: relative;
  }
  .skillset-toolbox .skillset-toolbox-content .skillset-toolbox-scroll-container .skillset-toolbox-row {
    position: relative;
    flex-wrap: wrap;
  }
  .skillset-toolbox .skillset-toolbox-content .skillset-toolbox-scroll-container .skillset-toolbox-row .skillset-toolbox-cell {
    max-width: 33%;
    height: 128px;
  }
  .skillset-toolbox .skillset-toolbox-content .skillset-toolbox-scroll-container .skillset-toolbox-row .skillset-toolbox-cell img {
    width: 50%;
    height: auto;
  }
}
@media (max-width: 680px) {
  .skillset-toolbox .skillset-toolbox-content .skillset-toolbox-scroll-container .skillset-toolbox-row .skillset-toolbox-cell {
    pointer-events: none;
  }
}
#work-executed {
  margin-top: 84px;
}

.executed-header {
  position: relative;
  text-align: right;
}
.executed-header h1 {
  opacity: 0.5;
  font-family: "Manrope", sans-serif;
  font-size: 42px;
  text-transform: uppercase;
}
.executed-header h3 {
  font-family: "Inconsolata", sans-serif;
  position: absolute;
  top: 0px;
  right: 0px;
  opacity: 0.25;
  transition-delay: 2s !important;
  transition: 0.5s;
  transform: translateY(-100%);
}

.executed-cell-holder {
  position: relative;
  overflow: visible;
}
.executed-cell-holder::after {
  content: "";
  position: absolute;
  background-color: white;
  right: 0px;
  opacity: 0.5;
  top: 50%;
  width: 2px;
  height: 50%;
  transform: translate(50%, -50%);
  z-index: 2;
}
.executed-cell-holder::before {
  content: "";
  position: absolute;
  background-color: #121212;
  top: 20%;
  left: 50%;
  width: 200vw;
  height: 80%;
  transform: translate(-50%, -25%) rotate(3.75deg);
  z-index: -2;
}

.executed-cells {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-end;
  overflow-x: auto;
  overflow-y: hidden;
  pointer-events: all;
  mask-image: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(5%, black), color-stop(100%, black));
  -webkit-mask-image: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(5%, black), color-stop(100%, black));
}
.executed-cells .executed-cell {
  position: relative;
  min-width: 400px;
  width: 400px;
  height: 100%;
  padding: calc(40px / 2);
  margin: 12px;
  align-self: flex-start;
}
.executed-cells .executed-cell:nth-child(1) {
  margin-left: 42px;
}
@media (orientation: portrait) {
  .executed-cells .executed-cell:nth-child(1) {
    margin-left: 8px;
  }
}
.executed-cells .executed-cell .executed-cell-header {
  position: relative;
}
.executed-cells .executed-cell .executed-cell-header h2 {
  opacity: 0.8;
  font-family: "Inconsolata", sans-serif;
}
.executed-cells .executed-cell .executed-cell-header .executed-cell-header-border-bottom {
  position: absolute;
  left: 0px;
  bottom: -24px;
  width: 100%;
  height: 100%;
  opacity: 0.5;
}
.executed-cells .executed-cell .executed-cell-header .executed-cell-header-border-bottom::after {
  content: "";
  position: absolute;
  width: 45%;
  height: 2px;
  bottom: 0px;
  transform: translateY(-50%);
  left: 0px;
  background-color: white;
  mask-image: -webkit-gradient(linear, left top, right top, color-stop(0%, black), color-stop(40%, black), color-stop(100%, rgba(0, 0, 0, 0)));
  -webkit-mask-image: -webkit-gradient(linear, left top, right top, color-stop(0%, black), color-stop(40%, black), color-stop(100%, rgba(0, 0, 0, 0)));
}
.executed-cells .executed-cell .executed-cell-header .executed-cell-header-border-bottom::before {
  opacity: 0.7;
  content: "";
  position: absolute;
  width: 50%;
  height: 0px;
  bottom: 0px;
  left: -4px;
  border-top: 2px dotted white;
  transform: translateY(-50%);
  mask-image: -webkit-gradient(linear, left top, right top, color-stop(0%, black), color-stop(40%, black), color-stop(100%, rgba(0, 0, 0, 0)));
  -webkit-mask-image: -webkit-gradient(linear, left top, right top, color-stop(0%, black), color-stop(40%, black), color-stop(100%, rgba(0, 0, 0, 0)));
}
.executed-cells .executed-cell .executed-cell-content {
  pointer-events: all;
  position: relative;
  margin-top: 42px;
  height: 81%;
  opacity: 0.75;
  transition: opacity 2s;
}
.executed-cells .executed-cell .executed-cell-content:hover {
  opacity: 1;
}
.executed-cells .executed-cell .executed-cell-content .executed-cell-list {
  list-style: none;
  opacity: 0.7;
  transition: 0.25s !important;
  transition-delay: 0.125s !important;
  transition-timing-function: cubic-bezier(0.07, 0.75, 0.32, 0.96) !important;
  z-index: 99;
}
.executed-cells .executed-cell .executed-cell-content .executed-cell-list.hidden {
  pointer-events: none !important;
  transition: 0.5s !important;
  transition-delay: 0s !important;
  opacity: 0 !important;
  transform: translateX(calc(-15% - 40px));
}
.executed-cells .executed-cell .executed-cell-content .executed-cell-list.hidden * {
  pointer-events: none !important;
}
.executed-cells .executed-cell .executed-cell-content .executed-cell-list .executed-cell-list-item {
  height: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px 0px;
  pointer-events: all;
}
.executed-cells .executed-cell .executed-cell-content .executed-cell-list .executed-cell-list-item p {
  pointer-events: none;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 17px;
  transition: 0.25s;
  transition-timing-function: cubic-bezier(0.07, 0.75, 0.32, 0.96);
  opacity: 0.7;
}
.executed-cells .executed-cell .executed-cell-content .executed-cell-list .executed-cell-list-item:hover {
  cursor: pointer;
}
.executed-cells .executed-cell .executed-cell-content .executed-cell-list .executed-cell-list-item:hover p {
  opacity: 1;
  transform: translateX(12px);
}
.executed-cells .executed-cell .executed-cell-content .executed-cell-list .executed-cell-list-item:active p {
  opacity: 1;
  transform: translateX(6px);
}
.executed-cells .executed-cell .executed-cell-content .executed-cell-more-info {
  pointer-events: none;
  position: absolute;
  top: 0px;
  right: 0px;
  width: 100%;
  height: 100%;
}
.executed-cells .executed-cell .executed-cell-content .executed-cell-more-info .executed-cell-more-info-paragraph {
  pointer-events: none;
  transform: translateX(calc(40px + 15%));
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  opacity: 0;
  transition: 0.25s;
  transition-timing-function: cubic-bezier(0.07, 0.75, 0.32, 0.96);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.executed-cells .executed-cell .executed-cell-content .executed-cell-more-info .executed-cell-more-info-paragraph p {
  pointer-events: none;
  font-family: "Inconsolata", sans-serif;
  font-size: 20px;
  line-height: 1.5;
}
.executed-cells .executed-cell .executed-cell-content .executed-cell-more-info .executed-cell-more-info-paragraph.active {
  pointer-events: all;
  transition-delay: 0.125s !important;
  transition: opacity 1s, all 0.5s;
  opacity: 0.5;
  transform: translateX(0px);
}
.executed-cells .executed-cell .executed-cell-content .executed-cell-more-info .executed-cell-more-info-paragraph.active:hover {
  cursor: pointer !important;
}
.executed-cells .executed-cell .executed-cell-content .executed-cell-more-info .executed-cell-more-info-paragraph::after {
  content: "";
  position: absolute;
  left: -42px;
  top: 50%;
  transform: translateY(-50%);
  height: 60%;
  background-color: white;
  width: 2px;
  border-radius: 50%;
  opacity: 0.5 !important;
  transition: 0.25s;
  transition-timing-function: cubic-bezier(0.07, 0.75, 0.32, 0.96);
}
.executed-cells .executed-cell .executed-cell-content .executed-cell-more-info .executed-cell-more-info-paragraph::before {
  content: "back";
  font-family: "Bellota Text", sans-serif;
  text-transform: uppercase;
  position: absolute;
  left: -64px;
  opacity: 0;
  font-size: 18px !important;
  transition: 0.25s;
  transition-timing-function: cubic-bezier(0.07, 0.75, 0.32, 0.96);
  transform: rotate(-90deg);
}
.executed-cells .executed-cell .executed-cell-content .executed-cell-more-info .executed-cell-more-info-paragraph:hover::before {
  transition-delay: 0.25s;
  opacity: 0.5;
  left: -56px;
}
.executed-cells .executed-cell .executed-cell-content .executed-cell-more-info .executed-cell-more-info-paragraph:hover::after {
  transition-delay: 0.125s;
  left: -50px;
}

@media (orientation: portrait) {
  .executed-cells .executed-cell {
    min-width: 92%;
  }
  .executed-cells .executed-cell .executed-cell-content {
    opacity: 1;
  }
  .executed-cells .executed-cell .executed-cell-content .executed-cell-list {
    opacity: 1;
  }
  .executed-cells .executed-cell .executed-cell-content .executed-cell-more-info {
    top: 42px;
  }
}
.back-to-home {
  pointer-events: all;
  position: fixed;
  left: 0px;
  bottom: 0px;
  padding: calc(40px / 2);
  z-index: 99;
  opacity: 0.125;
  transition: 1s;
  transition-timing-function: cubic-bezier(0.07, 0.75, 0.32, 0.96);
  width: 56px;
}
.back-to-home .indicator {
  position: absolute;
  left: calc(40px / 2);
  top: 50%;
  height: 30%;
  opacity: 0;
  transform: translate(100%, -50%);
  transition: 0.25s;
}
.back-to-home .indicator img {
  height: 100%;
  width: auto;
}
.back-to-home h1 {
  font-family: "Syne", sans-serif;
  font-size: 18px;
  text-transform: uppercase;
  text-align: right;
  transition: 0.5s;
}
.back-to-home:hover {
  cursor: pointer;
  opacity: 0.6;
  padding-left: 40px;
  transition: 0.25s;
}
.back-to-home:hover .indicator {
  opacity: 0.5;
  transform: translate(0px, -50%);
}

.project-showcaser {
  pointer-events: none;
  position: relative;
  width: 100%;
  margin-bottom: 42px;
  opacity: 1;
  transition: 0.15s;
}
.project-showcaser .project-showcaser-header {
  pointer-events: none;
  position: relative;
  display: flex;
  flex-direction: row;
  transform: translate(42px, 50%);
  z-index: 990;
  opacity: 0;
}
.project-showcaser .project-showcaser-header .header-pet {
  position: absolute;
  width: auto;
  height: 120px;
  left: 10%;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.125;
  z-index: -1;
  transition: 0.5s;
}
.project-showcaser .project-showcaser-header .header-pet:hover {
  transition: 2s;
  opacity: 0.3;
}
.project-showcaser .project-showcaser-header h2 {
  pointer-events: none;
  position: relative;
  font-family: "Questrial", sans-serif;
  font-size: 42px;
  opacity: 1;
  z-index: 2;
}
.project-showcaser .project-showcaser-header h2.subtext {
  font-family: "Raleway Dots", sans-serif;
  opacity: 1;
  align-self: flex-end;
  font-size: 18px;
  transform: translateY(-4.5px);
  color: #707070;
}
.project-showcaser .project-showcaser-content-background {
  pointer-events: none;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  overflow-y: hidden !important;
}
.project-showcaser .project-showcaser-content-background::after, .project-showcaser .project-showcaser-content-background::before {
  content: "";
  pointer-events: all;
  position: absolute;
  height: 4000px;
  width: 6000px;
  background-color: #121212;
  transition: 1s;
}
.project-showcaser .project-showcaser-content-background::after {
  top: 0px;
  right: 40px;
  transform: translate(0%, -50%) rotate(-45deg);
  z-index: -10;
  height: 200px;
  transition-timing-function: cubic-bezier(0.69, 0.01, 0.65, 0.76);
  transition: 0.85s;
}
.project-showcaser .project-showcaser-content-background::before {
  top: 0px;
  right: calc(-1200px + 40px);
  transform: translateX(50%) rotate(-45deg);
  z-index: 10;
}
.project-showcaser .project-showcaser-content-wrapper {
  pointer-events: none;
  position: relative;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
.project-showcaser .project-showcaser-content-wrapper::after, .project-showcaser .project-showcaser-content-wrapper::before {
  content: "";
  pointer-events: none;
  position: absolute;
  background-color: white;
  width: 40%;
  height: 2px;
}
.project-showcaser .project-showcaser-content-wrapper::after {
  transform: translateY(-100%);
  left: 0px;
  top: 0px;
  z-index: -99;
  background-color: #646464;
  mask-image: -webkit-gradient(linear, left top, right top, color-stop(0%, black), color-stop(30%, black), color-stop(100%, rgba(0, 0, 0, 0)));
  -webkit-mask-image: -webkit-gradient(linear, left top, right top, color-stop(0%, black), color-stop(30%, black), color-stop(100%, rgba(0, 0, 0, 0)));
}
.project-showcaser .project-showcaser-content-wrapper::before {
  transform: translateY(100%);
  right: 0px;
  bottom: 0px;
  mask-image: -webkit-gradient(linear, right top, left top, color-stop(0%, black), color-stop(30%, black), color-stop(100%, rgba(0, 0, 0, 0)));
  -webkit-mask-image: -webkit-gradient(linear, right top, left top, color-stop(0%, black), color-stop(30%, black), color-stop(100%, rgba(0, 0, 0, 0)));
}
.project-showcaser .informational-mask {
  mask-image: -webkit-gradient(linear, left 10%, left bottom, from(black), to(rgba(0, 0, 0, 0.5)));
  -webkit-mask-image: -webkit-gradient(linear, left 10%, left bottom, from(black), to(rgba(0, 0, 0, 0.5)));
}
.project-showcaser .project-showcaser-content {
  pointer-events: none;
  position: relative;
  width: 100%;
  height: 50vh;
  overflow-x: visible !important;
}
.project-showcaser .project-showcaser-content #project-showcaser-close-button {
  position: absolute;
  right: 1170px;
  top: 10%;
  width: 64px;
  height: 64px;
  opacity: 0;
  transition: 0.25s;
  transition-delay: 0s;
  filter: brightness(50%);
}
.project-showcaser .project-showcaser-content #project-showcaser-close-button img {
  width: 100%;
  height: auto;
}
.project-showcaser .project-showcaser-content #project-showcaser-close-button.active {
  pointer-events: all;
  transition-delay: 1.5s;
  opacity: 1;
}
.project-showcaser .project-showcaser-content #project-showcaser-close-button.active:hover {
  cursor: pointer;
  transition-delay: 0s;
  filter: brightness(100%);
}
.project-showcaser .project-showcaser-content .project-showcaser-row {
  pointer-events: none;
  position: relative;
  display: flex;
  flex-direction: row;
  height: 100%;
  max-height: 100%;
  overflow-x: visible !important;
}
.project-showcaser .project-showcaser-content .project-showcaser-row::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 0px;
  transform: translateY(-100%);
  border-top: 2px dashed rgba(255, 255, 255, 0.025);
}
.project-showcaser .project-showcaser-content .project-showcaser-row::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0px;
  width: 100%;
  height: 0px;
  border-bottom: 2px dashed rgba(255, 255, 255, 0.025);
}
.project-showcaser .project-showcaser-content .project-showcaser-mainsectional {
  position: relative;
  width: 100%;
  overflow-y: hidden !important;
  overflow-x: visible !important;
  height: 50vh;
  z-index: -8;
  border-color: #08080C;
}
.project-showcaser .project-showcaser-content .project-showcaser-mainsectional .project-showcaser-mainsectional-row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  margin-top: 96px;
}
.project-showcaser .project-showcaser-content .project-showcaser-mainsectional::after {
  content: "";
  pointer-events: all;
  position: absolute;
  top: 0px;
  right: 5000px;
  height: 4000px;
  width: 3200px;
  background-color: #121212;
  transform-origin: 50% 50%;
  transform: translate(0, -50%) rotate(45deg);
  z-index: 99;
  transition: 0.25s;
  transition-timing-function: cubic-bezier(0.07, 0.75, 0.32, 0.96);
}
.project-showcaser .project-showcaser-content .project-showcaser-mainsectional .project-showcaser-informational {
  position: relative;
  width: 17%;
  height: 75%;
  margin-left: 200px;
  z-index: 999;
  text-align: right;
}
@media (orientation: portrait) {
  .project-showcaser .project-showcaser-content .project-showcaser-mainsectional .project-showcaser-informational {
    margin-left: 20px;
  }
}
@media (max-width: 1654px) {
  .project-showcaser .project-showcaser-content .project-showcaser-mainsectional .project-showcaser-informational {
    width: 35%;
    text-align: left;
  }
  .project-showcaser .project-showcaser-content .project-showcaser-mainsectional .project-showcaser-informational .pjsc-informational-content h2::after {
    right: auto;
    left: 0px;
    border-top-left-radius: 0%;
    border-bottom-left-radius: 0%;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
  }
}
.project-showcaser .project-showcaser-content .project-showcaser-mainsectional .project-showcaser-informational .pjsc-informational-content {
  transition-timing-function: cubic-bezier(0.07, 0.75, 0.32, 0.96);
}
.project-showcaser .project-showcaser-content .project-showcaser-mainsectional .project-showcaser-informational .pjsc-informational-content h2, .project-showcaser .project-showcaser-content .project-showcaser-mainsectional .project-showcaser-informational .pjsc-informational-content .title {
  position: relative;
  text-transform: uppercase;
  font-family: "Emblema One", sans-serif;
  margin-bottom: 12px;
  opacity: 0;
  transition-timing-function: cubic-bezier(0.07, 0.75, 0.32, 0.96);
  transform: translateX(42px);
}
.project-showcaser .project-showcaser-content .project-showcaser-mainsectional .project-showcaser-informational .pjsc-informational-content h2::after, .project-showcaser .project-showcaser-content .project-showcaser-mainsectional .project-showcaser-informational .pjsc-informational-content .title::after {
  content: "";
  position: absolute;
  bottom: -6px;
  right: 0px;
  background-color: white;
  width: 15%;
  height: 2px;
  opacity: 0.5;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
}
.project-showcaser .project-showcaser-content .project-showcaser-mainsectional .project-showcaser-informational .pjsc-informational-content p {
  font-family: "NTR", sans-serif;
  margin-bottom: 42px;
  font-size: 24px;
  line-height: 32px;
  opacity: 0;
  transform: translateX(42px);
}
.project-showcaser .project-showcaser-content .project-showcaser-mainsectional .project-showcaser-paragraph {
  width: 40vw;
  height: 40vh;
  z-index: 999;
  margin-left: 96px;
  transition: 0.25s;
  transition-timing-function: cubic-bezier(0.07, 0.75, 0.32, 0.96);
  mask-image: -webkit-gradient(linear, right top, left top, color-stop(0%, black), color-stop(100%, black));
  -webkit-mask-image: -webkit-gradient(linear, right top, left top, color-stop(0%, black), color-stop(100%, black));
}
@media (max-width: 1654px) {
  .project-showcaser .project-showcaser-content .project-showcaser-mainsectional .project-showcaser-paragraph {
    display: none;
    opacity: 0;
  }
}
.project-showcaser .project-showcaser-content .project-showcaser-mainsectional .project-showcaser-paragraph .showcaser-p {
  margin-top: -6px;
  font-family: "Raleway", sans-serif;
  font-weight: 500;
  font-size: 1.25vw;
  line-height: calc(2vw * .75);
  opacity: 0;
  transition-timing-function: cubic-bezier(0.07, 0.75, 0.32, 0.96);
  transform: translateX(42px);
  mask-image: -webkit-gradient(linear, left 50%, left bottom, from(black), to(rgba(0, 0, 0, 0.5)));
  -webkit-mask-image: -webkit-gradient(linear, left 50%, left bottom, from(black), to(rgba(0, 0, 0, 0.5)));
}
.project-showcaser .project-showcaser-content .project-showcaser-mainsectional .project-showcaser-paragraph .push {
  width: 800px;
  height: 400px;
  float: right;
  -webkit-shape-outside: polygon(50% 100%, 100% 0, 100% 100%);
  shape-outside: polygon(50% 100%, 100% 0, 100% 100%);
  -webkit-clip-path: polygon(0 100%, 100% 0, 100% 100%);
  clip-path: polygon(50% 100%, 100% 0, 100% 100%);
  right: 50px;
}
.project-showcaser .project-showcaser-content .project-showcaser-mainsectional .project-showcaser-links {
  position: absolute;
  bottom: 42px;
  left: 200px;
  z-index: 999;
  opacity: 0;
}
.project-showcaser .project-showcaser-content .project-showcaser-mainsectional .project-showcaser-links .project-showcaser-link-row {
  display: flex;
  flex-direction: row;
}
.project-showcaser .project-showcaser-content .project-showcaser-mainsectional .project-showcaser-links .project-showcaser-link-row .project-showcaser-link {
  pointer-events: all;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 96px;
  height: 96px;
  margin: 0px 12px;
  transform: translateY(96px);
  transition: 0.5s;
  transition-timing-function: cubic-bezier(0.07, 0.75, 0.32, 0.96);
  opacity: 0;
}
.project-showcaser .project-showcaser-content .project-showcaser-mainsectional .project-showcaser-links .project-showcaser-link-row .project-showcaser-link .tooltip {
  font-family: "Manrope", sans-serif;
  text-transform: uppercase;
  position: absolute;
  left: 50%;
  bottom: 0px;
  width: 200%;
  transform: translateX(-50%);
  transition: 0.25s;
  transition-timing-function: cubic-bezier(0.07, 0.75, 0.32, 0.96);
  opacity: 0;
  filter: blur(10px);
  text-align: center;
}
.project-showcaser .project-showcaser-content .project-showcaser-mainsectional .project-showcaser-links .project-showcaser-link-row .project-showcaser-link img {
  transition: 0.5s;
  transition-timing-function: cubic-bezier(0.07, 0.75, 0.32, 0.96);
  width: 100%;
  height: auto;
  opacity: 0.25;
}
.project-showcaser .project-showcaser-content .project-showcaser-mainsectional .project-showcaser-links .project-showcaser-link-row .project-showcaser-link:hover {
  cursor: pointer;
}
.project-showcaser .project-showcaser-content .project-showcaser-mainsectional .project-showcaser-links .project-showcaser-link-row .project-showcaser-link:hover .tooltip {
  bottom: -24px;
  opacity: 0.125;
  filter: blur(0px);
  word-break: keep-all;
}
.project-showcaser .project-showcaser-content .project-showcaser-mainsectional .project-showcaser-links .project-showcaser-link-row .project-showcaser-link:hover img {
  opacity: 0.5;
  transform: translateY(-6px);
}
.project-showcaser .project-showcaser-content .project-showcaser-col-img {
  pointer-events: all;
  position: absolute;
  max-height: 100%;
  height: 100%;
  width: auto;
  right: calc(42px + 40px - 96px);
  bottom: 42px;
  z-index: 3;
  padding-right: 64px;
  transition: 0.75s;
  transition-timing-function: cubic-bezier(0.07, 0.75, 0.32, 0.96);
}
.project-showcaser .project-showcaser-content .project-showcaser-col-img img {
  height: 100%;
  width: auto;
  transition: 0.5s;
  filter: grayscale(60%);
}
.project-showcaser .project-showcaser-content .project-showcaser-col-img::after {
  content: "2020 VIZIO Voice Remote";
  pointer-events: none;
  text-align: left;
  width: 300px;
  font-family: "Inconsolata", sans-serif;
  font-size: 24px;
  position: absolute;
  left: 0px;
  bottom: 0px;
  transition: 0.75s;
  transition-delay: 1s !important;
  transition-timing-function: cubic-bezier(0.74, 0, 0.48, 1.01);
  transform-origin: 0% 0%;
  transform: rotate(-90deg);
  opacity: 0;
  z-index: -2;
  filter: blur(10px);
}
.project-showcaser .project-showcaser-content .project-showcaser-col-img:hover {
  transform: translateX(-24px);
}
.project-showcaser .project-showcaser-content .project-showcaser-col-img:hover img {
  filter: grayscale(0%);
}
.project-showcaser .project-showcaser-content .project-showcaser-col-img:hover::after {
  opacity: 0.125;
  transition: 0.25s;
  transition-delay: 0.25s !important;
  transition-timing-function: cubic-bezier(0.07, 0.75, 0.32, 0.96);
  left: -32px;
  filter: blur(0px);
}
.project-showcaser .project-showcaser-background-clicker {
  position: absolute;
  right: 100px;
  width: 1200px;
  min-height: 90%;
  height: 90%;
  top: 50%;
  transform: translateY(-50%);
  z-index: -10;
}
.project-showcaser .project-showcaser-background-clicker .showcaser-bg-clicker-col {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
.project-showcaser .project-showcaser-background-clicker .showcaser-bg-clicker-col.active .showcaser-bg-clicker-cell {
  flex: 1;
}
.project-showcaser .project-showcaser-background-clicker .showcaser-bg-clicker-col.active .showcaser-bg-clicker-cell .clicker-cell-caption {
  display: flex;
}
.project-showcaser .project-showcaser-background-clicker .showcaser-bg-clicker-col .showcaser-bg-clicker-cell {
  position: relative;
  pointer-events: all;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden !important;
  height: 0px;
  transition: 0.5s;
  transition-timing-function: cubic-bezier(0.42, 0.17, 0.37, 1.01);
  transform: translateX(-96px);
  opacity: 0 !important;
}
.project-showcaser .project-showcaser-background-clicker .showcaser-bg-clicker-col .showcaser-bg-clicker-cell .clicker-cell-caption {
  display: flex;
  padding-bottom: 0px;
  opacity: 0;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: 32px;
  background-color: rgba(0, 0, 0, 0.7);
  bottom: 0px;
  left: 0px;
  transition: 0.75s;
}
.project-showcaser .project-showcaser-background-clicker .showcaser-bg-clicker-col .showcaser-bg-clicker-cell .clicker-cell-caption p {
  font-family: "Questrial", sans-serif;
  font-size: 18px;
  text-transform: uppercase;
  text-align: right;
  padding-right: 112px;
}
.project-showcaser .project-showcaser-background-clicker .showcaser-bg-clicker-col .showcaser-bg-clicker-cell .clicker-cell-caption p span {
  pointer-events: all;
  font-family: "Raleway Dots", sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-transform: none;
  margin-left: 12px;
  transition: 0.25s;
  transition-timing-function: cubic-bezier(0.07, 0.75, 0.32, 0.96);
  color: #8D99AE;
}
.project-showcaser .project-showcaser-background-clicker .showcaser-bg-clicker-col .showcaser-bg-clicker-cell .clicker-cell-caption p span:hover {
  cursor: pointer;
  color: white;
  margin-right: 12px;
}
.project-showcaser .project-showcaser-background-clicker .showcaser-bg-clicker-col .showcaser-bg-clicker-cell img {
  object-fit: contain;
  width: 100%;
  min-width: 100%;
  height: auto;
  filter: blur(3px) brightness(0.5);
  transition: 0.5s;
  transition-timing-function: cubic-bezier(0.07, 0.75, 0.32, 0.96);
  opacity: 0;
}
.project-showcaser .project-showcaser-background-clicker .showcaser-bg-clicker-col .showcaser-bg-clicker-cell:hover:not(.active) {
  cursor: pointer !important;
  opacity: 0.95 !important;
  transition-delay: 0s !important;
}
.project-showcaser .project-showcaser-background-clicker .showcaser-bg-clicker-col .showcaser-bg-clicker-cell:hover:not(.active) img {
  filter: blur(0px) brightness(0.4);
  transform: scale(1.01);
}
.project-showcaser .project-showcaser-background-clicker .showcaser-bg-clicker-col .showcaser-bg-clicker-cell:hover:not(.active)::before {
  height: 6px;
}
.project-showcaser .project-showcaser-background-clicker .showcaser-bg-clicker-col .showcaser-bg-clicker-cell.active {
  height: 50vh !important;
  flex: 10;
  align-items: stretch;
  flex-direction: column;
  animation: showcaser-active-border-top 0.5s cubic-bezier(0.74, 0, 0.48, 1.01) 0.5s forwards;
  overflow-y: visible;
}
.project-showcaser .project-showcaser-background-clicker .showcaser-bg-clicker-col .showcaser-bg-clicker-cell.active .clicker-cell-caption {
  transition: 0.25s;
  opacity: 1;
}
.project-showcaser .project-showcaser-background-clicker .showcaser-bg-clicker-col .showcaser-bg-clicker-cell.active img {
  opacity: 1 !important;
  filter: blur(0px) brightness(1) !important;
}
.project-showcaser .project-showcaser-background-clicker .showcaser-bg-clicker-col .showcaser-bg-clicker-cell.active::after {
  height: 8px;
  transition-delay: 1.25s !important;
  transition: 0.5s;
}
.project-showcaser .project-showcaser-background-clicker .showcaser-bg-clicker-col .showcaser-bg-clicker-cell.active::before {
  height: 0px;
}
.project-showcaser .project-showcaser-background-clicker .showcaser-bg-clicker-col .showcaser-bg-clicker-cell::before {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 2px;
  background-color: #8D99AE;
  z-index: 999;
  transition: 0.125s;
  transition-timing-function: cubic-bezier(0.07, 0.75, 0.32, 0.96);
}
.project-showcaser .project-showcaser-background-clicker .showcaser-bg-clicker-col .showcaser-bg-clicker-cell::after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 0px;
  background-color: #ff7c0a;
  filter: brightness(70%);
  transition-timing-function: cubic-bezier(0.07, 0.75, 0.32, 0.96);
  transition: 0.25s;
  transition-delay: 0s;
}
.project-showcaser .project-showcaser-background-clicker .showcaser-bg-clicker-col::after {
  content: "";
  pointer-events: all;
  position: absolute;
  width: 300px;
  height: 200%;
  background-color: #151515;
  right: -175px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  transition: 1s;
}
.project-showcaser .project-showcaser-background-clicker {
  overflow-y: hidden;
}
.project-showcaser .project-showcaser-background-clicker .showcaser-bg-clicker-col {
  outline-width: 0px;
  outline-color: rgba(8, 8, 12, 0.75);
  transition: 0.5s;
  transition-timing-function: cubic-bezier(0.07, 0.75, 0.32, 0.96);
}
.project-showcaser .project-showcaser-background-clicker::after {
  content: "";
  position: absolute;
  right: -50%;
  top: 50%;
  width: 164px;
  height: 960px;
  transform: translate(-50%, -50%) rotate(10deg);
  z-index: 99;
  background-color: white;
  opacity: 0.25;
}
.project-showcaser.video-shown .project-showcaser-row .project-showcaser-mainsectional .project-showcaser-links {
  transition: 0.5s !important;
  transition-delay: 0s !important;
  opacity: 0 !important;
}
.project-showcaser.video-shown .project-showcaser-background-clicker .showcaser-bg-clicker-col {
  outline-width: 8px;
}
.project-showcaser.video-shown .project-showcaser-background-clicker .showcaser-bg-clicker-col .showcaser-bg-clicker-cell::before {
  transition: 1s;
  opacity: 0;
}
.project-showcaser.video-shown .project-showcaser-background-clicker::after {
  animation-timing-function: cubic-bezier(0.07, 0.75, 0.32, 0.96);
  animation: showcaser-clicker-shine 1.75s 1.5s forwards;
}
.project-showcaser.video-shown .project-showcaser-paragraph {
  transition-delay: 0.5s !important;
  transform: translateX(-42px);
  opacity: 0;
}
.project-showcaser.video-shown .project-showcaser-content-background::after {
  transition-delay: 0.45s;
  transform: translate(20%, -50%) rotate(-45deg);
}
.project-showcaser.video-shown .project-showcaser-mainsectional::after {
  transition: all 1s;
  transition-delay: 0.5s;
  transition-timing-function: cubic-bezier(0.34, -0.01, 0.22, 0.99);
  transform: translate(-200px, -50%) rotate(10deg);
  border: 16px solid #151515;
  box-shadow: 20px 0px 0px rgba(0, 0, 0, 0.25);
}
.project-showcaser.video-shown .showcaser-bg-clicker-col::after {
  transition-delay: 0.85s;
  transform: translate(1000px, -50%) rotate(45deg);
}
.project-showcaser.video-shown .showcaser-bg-clicker-cell {
  background-color: #08080C;
  border-bottom: none !important;
}
.project-showcaser.video-shown .showcaser-bg-clicker-cell img {
  opacity: 1 !important;
  filter: blur(5px) brightness(0.2) !important;
}
.project-showcaser.video-shown .showcaser-bg-clicker-cell .clicker-cell-caption {
  transition: 0.25s !important;
}
.project-showcaser.video-shown .showcaser-bg-clicker-cell:hover .clicker-cell-caption {
  transition: 0.25s;
  opacity: 0.75;
}
@media (max-width: 1760px) {
  .project-showcaser.video-shown .project-showcaser-informational {
    opacity: 0;
  }
}
.project-showcaser.video-shown .showcaser-video .video-controls .central-button {
  transition-delay: 1s !important;
  transition: 0.5s;
  animation: none !important;
  opacity: 0;
}
.project-showcaser.video-hovered .showcaser-video .video-controls .central-button {
  pointer-events: all;
  transition-delay: 0s !important;
  opacity: 1;
}
.project-showcaser:not(.video-shown).video-hovered .project-showcaser-mainsectional::after {
  transition: 0.5s !important;
  transition-delay: 0s !important;
  transition-timing-function: cubic-bezier(0.07, 0.75, 0.32, 0.96) !important;
  transform: translate(-12px, -50%) rotate(44deg);
}
.project-showcaser:not(.video-shown).video-hovered .project-showcaser-paragraph {
  transition: 0.5s;
  transform: translateX(-6px);
  opacity: 0.9;
}
.project-showcaser.animated .project-showcaser-header {
  opacity: 1;
  transition-delay: 1.25s !important;
  transition: 0.5s;
  transform: translate(0px, 50%);
}
.project-showcaser.animated .project-showcaser-mainsectional::after {
  transition-delay: 0.25s;
  transition: 1s;
  right: 1000px;
}
.project-showcaser.animated .pjsc-informational-content {
  transition: 0.5s;
  transition-delay: 0.15s !important;
}
.project-showcaser.animated .pjsc-informational-content:nth-child(2) .title {
  transition-delay: 1.5s !important;
}
.project-showcaser.animated .pjsc-informational-content:nth-child(2) p {
  transition-delay: 1.75s !important;
}
.project-showcaser.animated .pjsc-informational-content .title {
  transition: 0.5s;
  transition-delay: 1.25s !important;
  opacity: 0.5 !important;
  transform: translateX(0px) !important;
}
.project-showcaser.animated .pjsc-informational-content p {
  transition: 0.5s;
  transition-delay: 1s !important;
  opacity: 0.75 !important;
  transform: translateX(0px) !important;
}
.project-showcaser.animated .project-showcaser-row .project-showcaser-mainsectional .project-showcaser-links {
  transition-delay: 2.5s;
  opacity: 1;
}
.project-showcaser.animated .project-showcaser-row .project-showcaser-mainsectional .project-showcaser-links .project-showcaser-link {
  opacity: 1 !important;
  transition-delay: 2.5s !important;
  transform: translateY(0px) !important;
}
.project-showcaser.animated .project-showcaser-background-clicker .showcaser-bg-clicker-cell {
  opacity: 1 !important;
}
.project-showcaser:not(.video-shown).animated .project-showcaser-paragraph .showcaser-p {
  transition: 0.75s;
  transition-delay: 1.5s !important;
  opacity: 0.8 !important;
  transform: translateX(0px) !important;
}
.project-showcaser:not(.video-shown).animated .project-showcaser-content-background::after {
  transition-timing-function: cubic-bezier(0.07, 0.75, 0.32, 0.96);
  transition: 0.75s;
  transition-delay: 1s !important;
  transform: translate(50%, -50%) rotate(-45deg);
}
.project-showcaser:not(.video-shown).animated .project-showcaser-background-clicker .showcaser-bg-clicker-cell {
  transition: 0.5s;
  transition-timing-function: cubic-bezier(0.07, 0.75, 0.32, 0.96);
  transform: translateX(0px);
  opacity: 0.5 !important;
}
.project-showcaser:not(.video-shown).animated .project-showcaser-background-clicker .showcaser-bg-clicker-cell img {
  transition: 1s;
  transition-delay: 1.75s !important;
  opacity: 0.75 !important;
}
.project-showcaser:not(.video-shown).animated .project-showcaser-background-clicker .showcaser-bg-clicker-cell img:nth-child(2) {
  transition-delay: 2s;
}
.project-showcaser:not(.video-shown).animated .project-showcaser-background-clicker .showcaser-bg-clicker-cell img:nth-child(3) {
  transition-delay: 2.25s;
}
@media (max-width: 680px) {
  .project-showcaser .project-showcaser-content .project-showcaser-mainsectional::after {
    transform: translate(0%, -50%) rotate(35deg) !important;
  }
  .project-showcaser .project-showcaser-background-clicker .showcaser-bg-clicker-col::after {
    transform: translateY(-40%) rotate(15deg);
  }
}

.showcaser-video {
  z-index: -1;
  position: relative;
  background-color: #121212;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.showcaser-video .video-controls {
  position: absolute;
  width: 100%;
  height: 100%;
}
.showcaser-video .video-controls .central-button {
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 58%;
  transform: translate(-50%, -50%);
  height: 72px;
  width: 72px;
  opacity: 0;
  overflow: visible;
  z-index: 1;
}
.showcaser-video .video-controls .central-button .central-inner {
  transition: 0.5s;
  opacity: 0;
  position: absolute;
  height: 100%;
}
.showcaser-video .video-controls .central-button .central-inner img {
  height: 100%;
  width: auto;
}
.showcaser-video .video-controls .central-button:hover {
  cursor: pointer !important;
}
.showcaser-video video {
  position: absolute;
  transition: 1s;
  top: 50%;
  transition-delay: 0s;
  width: 100%;
  height: auto;
  transform: translate(10%, -50%);
  filter: brightness(50%) blur(10px);
  transition-timing-function: cubic-bezier(0.74, 0, 0.48, 1.01);
  opacity: 0.5;
}
.showcaser-video video.video-playing {
  opacity: 0.95;
  width: 72.5%;
  transition-delay: 0.25s;
  transition: 0.5s;
  transition-timing-function: cubic-bezier(0.07, 0.75, 0.32, 0.96);
  transform: translate(10%, -50%) scale(0.75);
  filter: brightness(100%) blur(0px);
}
.showcaser-video:hover {
  cursor: pointer !important;
}

.showcaser-bg-clicker-cell .clicker-cell-caption {
  padding-bottom: 0px;
}

.showcaser-bg-clicker-cell.active {
  z-index: 1;
}
.showcaser-bg-clicker-cell.active .clicker-cell-caption {
  animation: showcaser-caption-highlight 0.5s 1s forwards;
}
.showcaser-bg-clicker-cell.active .showcaser-video .video-controls {
  pointer-events: all;
}
.showcaser-bg-clicker-cell.active .showcaser-video .video-controls .central-button {
  animation: popout-up 1s 1s cubic-bezier(0.07, 0.75, 0.32, 0.96) forwards;
}
.showcaser-bg-clicker-cell.active .showcaser-video .video-controls .central-button:hover {
  cursor: pointer !important;
  opacity: 0.75;
}
.showcaser-bg-clicker-cell.active .showcaser-video .video-controls .central-button:hover .central-inner.active {
  opacity: 1;
  transition: 0.125s;
}
.showcaser-bg-clicker-cell.active .showcaser-video .video-controls .central-inner.active {
  opacity: 0.5;
}

@media (max-width: 680px) {
  .project-showcaser .project-showcaser-background-clicker {
    display: none;
  }
  .project-showcaser .project-showcaser-content .project-showcaser-col-img {
    right: calc(20px + 40px - 96px);
  }
  .project-showcaser .project-showcaser-content .project-showcaser-mainsectional {
    z-index: 999;
  }
  .project-showcaser .project-showcaser-content .project-showcaser-mainsectional .project-showcaser-informational {
    z-index: 999;
  }
  .project-showcaser .project-showcaser-content .project-showcaser-mainsectional .project-showcaser-informational .pjsc-informational-content {
    z-index: 999;
  }
  .project-showcaser .project-showcaser-content .project-showcaser-mainsectional .project-showcaser-informational .pjsc-informational-content h2, .project-showcaser .project-showcaser-content .project-showcaser-mainsectional .project-showcaser-informational .pjsc-informational-content .title {
    font-size: 16px;
  }
  .project-showcaser .project-showcaser-content .project-showcaser-mainsectional .project-showcaser-informational .pjsc-informational-content p {
    font-size: 16px;
  }
  .project-showcaser .project-showcaser-content .project-showcaser-mainsectional .project-showcaser-links {
    position: absolute;
    left: auto;
    right: 50%;
    z-index: 99;
    transform: translateX(50%);
  }
  .project-showcaser .project-showcaser-content .project-showcaser-mainsectional .project-showcaser-links .project-showcaser-link-row {
    flex-direction: column;
  }
  .project-showcaser .project-showcaser-content .project-showcaser-mainsectional .project-showcaser-links .project-showcaser-link-row .project-showcaser-link {
    width: 48px;
    height: 48px;
  }
}
#similar-projects {
  margin-top: 96px;
}
#similar-projects .similar-project-title {
  font-family: "Raleway", sans-serif;
  width: 50%;
  display: flex;
  transition: 0.5s;
  transition-timing-function: cubic-bezier(0.07, 0.75, 0.32, 0.96);
  flex-direction: column;
  align-self: flex-end;
  font-size: 32px;
  padding: 0px 20px;
  opacity: 0.7;
}
#similar-projects .similar-project-title .similar-project-subtitle {
  font-family: "Inconsolata", sans-serif;
  font-size: 16px;
  margin-bottom: 10px;
  opacity: 0.3;
}
#similar-projects .similar-project-image {
  position: relative;
  max-width: 50%;
  width: 70%;
  height: 100%;
  align-items: safe center;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  transition: 0.25s;
  opacity: 0.9;
  filter: brightness(80%) grayscale(20%);
}
#similar-projects .similar-project-image img {
  width: 100%;
  min-height: 100%;
  height: auto;
}
#similar-projects .similar-project-image::after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  height: 4px;
  width: 125%;
  background-color: white;
  transition: 0.5s;
  transition-delay: 0.25s;
  transition-timing-function: cubic-bezier(0.07, 0.75, 0.32, 0.96);
  filter: brightness(50%);
}
#similar-projects .similar-project-image:nth-child(2)::after {
  left: auto;
  right: 0px;
}
#similar-projects.animated .similar-projects-grid {
  opacity: 1;
  transform: translateY(0px);
}
#similar-projects.animated .similar-projects-header {
  margin-left: 0px;
  opacity: 1;
}
#similar-projects .similar-projects-header {
  transition: 0.5s;
  transition-delay: x 0.5s;
  margin-left: 42px;
  opacity: 0;
  position: relative;
}
#similar-projects .similar-projects-header h3 {
  font-family: "Raleway", sans-serif;
  font-size: 28px;
  font-weight: 300;
  opacity: 0.4;
}
#similar-projects .similar-projects-header::after {
  content: "";
  position: absolute;
  top: -12px;
  left: 0px;
  height: 2px;
  width: 20%;
  background-color: white;
  opacity: 0.25;
}
#similar-projects .similar-projects-grid {
  margin-top: 64px;
  position: relative;
  width: 100%;
  opacity: 0;
  transition: 0.5s;
  transition-delay: 1s;
  transform: translateY(42px);
}
#similar-projects .similar-projects-grid .row {
  position: relative;
  display: flex;
  width: 100%;
}
#similar-projects .similar-projects-grid .row .cell {
  position: relative;
  width: 50%;
  height: 196px;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  pointer-events: all;
}
#similar-projects .similar-projects-grid .row .cell:nth-child(1)::after {
  left: calc(100% - 20px);
  transform: translate(-100%, -50%);
}
#similar-projects .similar-projects-grid .row .cell:nth-child(2) {
  text-align: right;
}
#similar-projects .similar-projects-grid .row .cell:nth-child(2)::before {
  left: auto;
  right: 0px;
}
#similar-projects .similar-projects-grid .row .cell::before {
  content: "";
  background-color: black;
  position: absolute;
  width: 75%;
  height: 80%;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.1;
  transition: 0.5s;
  z-index: -1;
}
#similar-projects .similar-projects-grid .row .cell::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translate(-50%, -50%);
  transition: 0.25s;
  transition-timing-function: cubic-bezier(0.07, 0.75, 0.32, 0.96);
  height: 60%;
  width: 2px;
  background-color: white;
  filter: brightness(50%);
}
#similar-projects .similar-projects-grid .row .cell:hover {
  cursor: pointer;
}
#similar-projects .similar-projects-grid .row .cell:hover * {
  cursor: pointer !important;
}
#similar-projects .similar-projects-grid .row .cell:hover::before {
  opacity: 0.2;
}
#similar-projects .similar-projects-grid .row .cell:hover::after {
  height: 70%;
  width: 4px;
  filter: brightness(80%);
}
#similar-projects .similar-projects-grid .row .cell:hover .similar-project-image {
  position: relative;
  transition: 0.5s;
  opacity: 1;
  filter: brightness(100%) grayscale(0%);
}
#similar-projects .similar-projects-grid .row .cell:hover .similar-project-image img {
  transition: 0.75s;
  transition-delay: 0.5s;
}
#similar-projects .similar-projects-grid .row .cell:hover .similar-project-image::after {
  transition-delay: 0.125s;
  width: 135%;
  filter: brightness(80%);
}
#similar-projects .similar-projects-grid .row .cell:hover .similar-project-title {
  padding: 0px 16px;
  opacity: 1;
}
#similar-projects .similar-projects-grid .row .cell:hover .similar-project-title .similar-project-subtitle {
  opacity: 0.4;
}
#similar-projects .similar-projects-grid .row .cell:hover::before {
  width: 80%;
}

@media (orientation: portrait) {
  #similar-projects .similar-projects-grid .row {
    flex-direction: column;
    width: 100%;
  }
  #similar-projects .similar-projects-grid .row .cell {
    width: 100%;
    margin-top: 42px;
  }
}
* {
  transition: 0s;
  pointer-events: none;
}

.proj-header-page {
  position: relative;
  height: 20vh;
}

.proj-header-image {
  pointer-events: all;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.proj-header-image::after {
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0.4));
}
.proj-header-image:hover img {
  opacity: 1;
}
.proj-header-image img {
  transition: 0s;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  height: auto;
  min-height: 100%;
  transition: opacity 5s;
  opacity: 0.25;
}

.proj-header {
  position: absolute;
  top: 100%;
  right: 42px;
  transform: translateY(-50%);
}
.proj-header h1, .proj-header h2 {
  transition: 0.5s;
  transition-timing-function: cubic-bezier(0.07, 0.75, 0.32, 0.96);
}
.proj-header h1 {
  position: relative;
  font-family: "Manrope", sans-serif;
  font-size: 64px;
  text-transform: uppercase;
  z-index: 1;
}
.proj-header h2 {
  font-family: "Inconsolata", sans-serif;
  position: absolute;
  top: -10px;
  right: 0px;
  transform: translateY(calc(-50% - 10px));
  text-align: right;
  opacity: 0.25;
}
.proj-header h2::after {
  content: "";
  position: absolute;
  bottom: -12px;
  right: -10px;
  width: 0px;
  transition: 0.25s;
  transition-timing-function: cubic-bezier(0.07, 0.75, 0.32, 0.96);
  background-color: white;
  opacity: 0.5;
  height: 2px;
}
.proj-header img {
  position: relative;
  width: 250px;
  height: auto;
  z-index: 999;
}
.proj-header::before, .proj-header::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(100% + calc(48px / 2));
  transform: translateY(-50%);
  border-radius: 2px;
  height: 5px;
  background-color: white;
}
.proj-header::after {
  opacity: 0.75;
  width: calc(100vw - 100% - calc(48px * 2));
  transition: 0.5s;
  transition-timing-function: cubic-bezier(0.07, 0.75, 0.32, 0.96);
}
.proj-header::before {
  width: 110vw;
  background-color: #404040;
  z-index: 0;
  height: 2px;
  right: -48px;
}

.proj-summary-page {
  display: flex;
  background: #121212;
  padding: 40px;
  min-height: 40vh;
  -webkit-box-shadow: 0 1px 20px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0 1px 20px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0 1px 20px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.proj-summary-page p {
  font-family: "Manrope", sans-serif;
  font-size: 24px;
  margin-bottom: 60px;
}
.proj-summary-page.animated p {
  opacity: 0.2;
}
@media (orientation: portrait) {
  .proj-summary-page {
    flex-direction: column;
  }
}

.summary-image {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-right: 60px;
  transition: 0.5s;
}
.summary-image.cascadia-show {
  opacity: 0.95 !important;
}
.summary-image img {
  pointer-events: none;
  max-width: 20vw;
}
@media (orientation: portrait) {
  .summary-image {
    margin-top: 84px;
    width: 40%;
    height: auto;
  }
  .summary-image img {
    width: 100%;
    height: auto;
  }
  .summary-image.animated {
    opacity: 0.25;
  }
}

.summary-content {
  position: relative;
  transition: 0.5s;
  transition-delay: 1s;
}
.summary-content .time {
  font-family: "DM Sans", sans-serif;
  position: absolute;
  top: 64px;
  right: 52px;
  font-size: 32px;
  opacity: 0.125;
  transform: translateY(100%);
}
@media (orientation: portrait) {
  .summary-content .time {
    right: 20px;
  }
}
.summary-content .summary-header {
  position: relative;
  font-family: "Questrial", sans-serif;
  font-size: 48px;
  margin: 64px 0px;
  text-transform: uppercase;
  transition: 0.5s;
  transition-timing-function: cubic-bezier(0.07, 0.75, 0.32, 0.96);
  opacity: 0.5;
}
.summary-content .summary-header.cascadia-show {
  opacity: 0.5 !important;
}
.summary-content .summary-header::after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 0px;
  width: 30%;
  height: 2px;
  background-color: white;
  opacity: 0.5;
}
.summary-content .summary-header img {
  width: 200px;
  height: auto;
}
.summary-content .summary-paragraph {
  transition: 0.5s;
  transition-timing-function: cubic-bezier(0.07, 0.75, 0.32, 0.96);
}
.summary-content .summary-paragraph.cascadia-show {
  opacity: 0.5 !important;
}
.summary-content .summary-paragraph p {
  font-family: "Raleway", sans-serif;
  font-weight: 300;
}

#spec-toolbox {
  padding-top: 92px;
  opacity: 0;
  transition: 1s;
}
#spec-toolbox .toolbox-internal-paragraph p, #spec-toolbox .toolbox-internal-paragraph h2 {
  transition: 0.5s;
  transition-timing-function: cubic-bezier(0.07, 0.75, 0.32, 0.96);
  opacity: 0;
}
#spec-toolbox .toolbox-internal-paragraph p {
  transition-delay: 0.25s;
  margin-left: 42px;
}
#spec-toolbox .toolbox-internal-paragraph h2 {
  transition-delay: 0.5s;
  margin-left: 24px;
}
#spec-toolbox.animated {
  opacity: 1;
}
#spec-toolbox.animated .toolbox-internal-paragraph p {
  opacity: 0.6;
  margin-left: 0px;
}
#spec-toolbox.animated .toolbox-internal-paragraph p:hover {
  opacity: 0.7;
}
#spec-toolbox.animated .toolbox-internal-paragraph h2 {
  opacity: 1;
  margin-left: 0px;
}
#spec-toolbox.animated .toolbox-internal-paragraph h2::after {
  animation: bounce-out-with-that 0.25s 1.125s forwards cubic-bezier(0.07, 0.75, 0.32, 0.96);
}
#spec-toolbox.animated::before {
  opacity: 1;
}

#screenshots {
  position: relative;
}
#screenshots:after {
  content: "";
  position: absolute;
  left: 200px;
  width: 50%;
  height: 4px;
  background-color: white;
  opacity: 0.25;
  transform: translateY(-50%);
}
@media (orientation: portrait) {
  #screenshots:after {
    opacity: 0;
  }
}
#screenshots .screenshots-header {
  opacity: 0;
  transition: 0.5s;
  transition-timing-function: cubic-bezier(0.07, 0.75, 0.32, 0.96);
  transform: translateX(42px);
}
#screenshots .screenshots-header.animated {
  opacity: 1;
  transform: translateX(0px);
}
#screenshots .screenshots-header h1 {
  font-family: "Raleway Dots", sans-serif;
  font-size: 64px;
  text-align: right;
  opacity: 0.8;
  letter-spacing: 5px;
  transform: translateX(10px);
}

.screenshots-grid {
  position: relative;
  margin: 84px 0px 84px 0px;
}
.screenshots-grid * {
  overflow-y: hidden !important;
}
.screenshots-grid.animated .cell {
  opacity: 1 !important;
  transform: translateY(0px) !important;
}
.screenshots-grid.animated .cell:nth-child(1) {
  transition: all 0.5s 0.25s cubic-bezier(0.07, 0.75, 0.32, 0.96);
}
.screenshots-grid.animated .cell:nth-child(2) {
  transition: all 0.5s 0.5s cubic-bezier(0.07, 0.75, 0.32, 0.96);
}
.screenshots-grid.animated .cell:nth-child(3) {
  transition: all 0.5s 0.75s cubic-bezier(0.07, 0.75, 0.32, 0.96);
}
.screenshots-grid.animated .cell:nth-child(4) {
  transition: all 0.5s 1s cubic-bezier(0.07, 0.75, 0.32, 0.96);
}
.screenshots-grid.animated .cell:nth-child(5) {
  transition: all 0.5s 1.25s cubic-bezier(0.07, 0.75, 0.32, 0.96);
}
.screenshots-grid.animated .cell:nth-child(6) {
  transition: all 0.5s 1.5s cubic-bezier(0.07, 0.75, 0.32, 0.96);
}
.screenshots-grid.animated::before {
  transition-delay: 1s;
  opacity: 1;
}
.screenshots-grid.animated::after {
  transition-delay: 0.25s;
  height: 90%;
}
.screenshots-grid::before {
  content: "";
  width: 200vw;
  background-color: #121212;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: 1s;
  height: 75%;
  opacity: 0;
}
.screenshots-grid:after {
  content: "";
  position: absolute;
  top: 50%;
  right: -32px;
  height: 0px;
  width: 5px;
  transition: 0.5s;
  transition-timing-function: cubic-bezier(0.07, 0.75, 0.32, 0.96);
  background-color: white;
  opacity: 0.75;
  transform: translate(-50%, -50%);
}
.screenshots-grid .row {
  display: flex;
  flex-direction: row;
  overflow-x: scroll;
  overflow-y: hidden;
  scrollbar-width: none;
  pointer-events: all;
  justify-content: center;
  mask-image: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(20%, black), color-stop(100%, black));
  -webkit-mask-image: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(20%, black), color-stop(100%, black));
}
.screenshots-grid .row::-webkit-scrollbar {
  background-color: rgba(0, 0, 0, 0);
  opacity: 0.1;
}
.screenshots-grid .row::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0);
}
.screenshots-grid .row::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.4);
}
.screenshots-grid .row .cell {
  width: 480px;
  height: 720px;
  margin: 0px 12px;
  opacity: 0;
  transform: translateY(42px);
  pointer-events: all;
  overflow-x: hidden;
}
.screenshots-grid .row .cell img {
  pointer-events: none;
  opacity: 0.5;
  transition-timing-function: cubic-bezier(0.07, 0.75, 0.32, 0.96);
  transition: 0.85s;
  height: 100%;
  overflow-x: hidden;
}
.screenshots-grid .row .cell:hover {
  cursor: pointer;
}
.screenshots-grid .row .cell:hover img {
  transition: 1.25s;
  opacity: 0.6;
  transition: 0.25s;
  transform: scale(1.0125);
}

@media (orientation: portrait) {
  .proj-header img {
    width: 13vw;
  }

  .proj-summary-page .summary-content .summary-text {
    width: 90%;
  }
  .proj-summary-page .summary-content .summary-text .summary-paragraph p {
    font-family: "Raleway", sans-serif;
    font-weight: 300;
    line-height: 12px;
  }
}
@media (max-width: 680px) {
  .proj-header-page .proj-header::after {
    width: 150vw !important;
    left: -5vw !important;
    transform: translate(-70%, -50%) !important;
  }
}
@keyframes flintro-box-intro {
  0% {
    height: 56px;
    width: 32px;
    top: -64px;
    opacity: 0;
  }
  40% {
    height: 52px;
    width: 48px;
    top: 50%;
  }
  50% {
    height: 42px;
    width: 52px;
  }
  100% {
    height: 48px;
    width: 48px;
    opacity: 1;
  }
}
@keyframes flintro-box-outro {
  0% {
    width: 100%;
    height: 100%;
  }
  100% {
    width: 100vw;
    height: 100vw;
  }
}
@keyframes flintro-parent-byebye {
  0% {
    opacity: 1;
  }
  99% {
    opacity: 0;
  }
  100% {
    display: none;
  }
}
#flintro {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0px;
  top: 0px;
  background-color: white;
  z-index: 1001;
  animation: flintro-parent-byebye 0.5s 1s;
  animation-fill-mode: forwards;
}
#flintro .box {
  width: 48px;
  height: 48px;
  border-radius: 5px;
  background-color: #121212;
  position: absolute;
  opacity: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%);
  animation: flintro-box-intro 0.5s;
  animation-fill-mode: forwards;
  animation-delay: 0.25s;
}
#flintro .box::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-color: #121212;
  border-radius: inherit;
  animation: flintro-box-outro 0.5s 0.75s forwards;
  animation-fill-mode: forwards;
}

@keyframes intro-header-letter-down {
  0% {
    opacity: 0;
    margin-top: -20px;
  }
  100% {
    opacity: 1;
    margin-top: 0px;
  }
}
@keyframes intro-model-up {
  0% {
    opacity: 0;
    margin-top: 60vh;
  }
  10% {
    opacity: 0;
  }
  100% {
    opacity: 0.5;
    margin-top: 0px;
  }
}
@keyframes intro-model-toscroll {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 0.25;
  }
}
@keyframes intro-model-outscroll {
  0% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.7;
  }
}
@keyframes intro-header-letter-up {
  0% {
    opacity: 0;
    margin-top: 20px;
  }
  100% {
    opacity: 1;
    margin-top: 0px;
  }
}
@keyframes intro-separator-expand {
  0% {
    width: 0px;
  }
  100% {
    width: 120px;
  }
}
@keyframes intro-sub-header-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.8;
  }
}
@keyframes intro-center-separator {
  0% {
    width: 0px;
  }
  60% {
    width: 120%;
    border-radius: 1px;
  }
  80% {
    width: 120%;
    border-radius: 1px;
  }
  100% {
    width: 120%;
    border-radius: 25%;
  }
}
@keyframes intro-center-separator-portrait {
  0% {
    width: 0px;
  }
  60% {
    width: 60%;
    border-radius: 1px;
  }
  80% {
    width: 60%;
    border-radius: 1px;
  }
  100% {
    width: 60%;
    border-radius: 25%;
  }
}
@keyframes popout-up {
  0% {
    opacity: 0;
    margin-top: 10px;
  }
  100% {
    opacity: 0.5;
    margin-top: 0px;
  }
}
@keyframes popout-expand {
  0% {
    width: 0px;
  }
  100% {
    width: 100%;
  }
}
@keyframes popout-fade-out {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
@keyframes showcaser-active-border-top {
  0% {
    outline: 0px solid #121212;
  }
  100% {
    outline: 15px solid #121212;
  }
}
@keyframes dropper-cell-in-left {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes showcaser-cell-highlight {
  0% {
    height: 0px;
  }
  100% {
    height: 6px;
  }
}
@keyframes showcaser-caption-highlight {
  0% {
    padding-bottom: 0px;
  }
  100% {
    padding-bottom: 8px;
  }
}
@keyframes showcaser-clicker-shine {
  0% {
    right: -50%;
  }
  100% {
    right: 150%;
  }
}
#project-dropper {
  position: relative;
  min-height: 100vh;
  margin-bottom: 248px;
}
#project-dropper .project-dropper-header {
  position: absolute;
  top: 48px;
  right: 40px;
}
#project-dropper .project-dropper-header h1 {
  text-transform: uppercase;
  font-family: "Manrope", sans-serif;
  font-size: 48px;
  opacity: 0.35;
}
#project-dropper .midline {
  position: absolute;
  left: 50%;
  width: 2px;
  height: 110%;
  background-color: #4f4f4f;
  transform: translate(-50%, 8%);
  border-radius: 4px;
}
#project-dropper .project-dropper-col {
  width: 50vw;
}
#project-dropper .project-dropper-col.right {
  position: absolute;
  left: 50vw;
  top: calc(480px / 2);
}
#project-dropper .project-dropper-col.right .project-dropper-cell {
  margin-left: auto;
  margin-right: -10%;
}
#project-dropper .project-dropper-col.right .project-dropper-cell .cell-header {
  right: auto;
  text-align: left;
  padding-left: 40px;
}
#project-dropper .project-dropper-col.right .project-dropper-cell .cell-logo {
  left: auto;
  right: 7.5vw;
}
#project-dropper .project-dropper-col.right .project-dropper-cell::after {
  left: calc(-2% - 4px / 2);
  right: auto;
}
#project-dropper .project-dropper-col.right .project-dropper-cell::before {
  right: auto;
  left: 0px;
  transform: translate(-50%, -50%);
}
#project-dropper .project-dropper-cell {
  pointer-events: all;
  position: relative;
  width: 105%;
  margin-bottom: 0px;
  margin-left: -10%;
  height: 480px;
  opacity: 1;
}
#project-dropper .project-dropper-cell .cell-header {
  width: 100%;
  position: absolute;
  bottom: 40px;
  right: 40px;
  text-align: right;
  opacity: 0.75;
  transition: 1.5s;
  transition-timing-function: ease-in-out;
}
#project-dropper .project-dropper-cell .cell-header h1 {
  font-family: "Raleway", sans-serif;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 48px;
}
#project-dropper .project-dropper-cell .cell-header h1 small {
  font-family: "Raleway Dots", sans-serif;
  font-size: 24px;
}
#project-dropper .project-dropper-cell .cell-header h2 {
  font-family: "Inconsolata", sans-serif;
  text-transform: uppercase;
  opacity: 0.5;
  font-size: 16px;
}
#project-dropper .project-dropper-cell .cell-image {
  position: relative;
  width: 100%;
  height: 100%;
  height: 320px;
  top: 50%;
  transform: translate(0%, -50%);
  transition: 2s;
  transition-timing-function: cubic-bezier(0.07, 0.75, 0.32, 0.96);
  overflow: hidden;
}
#project-dropper .project-dropper-cell .cell-image img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: 3s;
  transition-delay: 0.25s;
  opacity: 0.25;
  filter: grayscale(20%) brightness(80%);
}
#project-dropper .project-dropper-cell .cell-logo {
  position: absolute;
  top: 112px;
  left: 7.5vw;
  width: 96px;
  opacity: 0.1;
  transition: 0.5s;
  transition-timing-function: cubic-bezier(0.07, 0.75, 0.32, 0.96);
}
#project-dropper .project-dropper-cell .cell-logo img {
  width: 100%;
  height: auto;
  transition: 1.5s;
  filter: grayscale(100%);
}
#project-dropper .project-dropper-cell::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(-2% + 4px / 2);
  transform: translateY(-50%);
  height: 70%;
  width: 4px;
  border-radius: 4px;
  background-color: white;
  opacity: 0.5;
  transition: 0.25s;
  transition-timing-function: cubic-bezier(0.53, 0.66, 0.09, 1.68);
}
#project-dropper .project-dropper-cell::before {
  content: "";
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translate(50%, -50%);
  height: 80%;
  width: 64px;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  opacity: 0;
  transition: 1s;
  transition-timing-function: cubic-bezier(0.74, 0, 0.48, 1.01);
  filter: blur(15px);
}
#project-dropper .project-dropper-cell:hover {
  cursor: pointer;
}
#project-dropper .project-dropper-cell:hover .cell-header {
  opacity: 1;
  transition-delay: 0.25s;
}
#project-dropper .project-dropper-cell:hover .cell-image {
  transition: 0.5s;
  transition-timing-function: ease-in-out;
}
#project-dropper .project-dropper-cell:hover .cell-image img {
  transition: 0.75s;
  transition-delay: 0s;
  filter: grayscale(5%) brightness(100%);
  opacity: 0.35;
}
#project-dropper .project-dropper-cell:hover .cell-logo {
  top: 100px;
  opacity: 0.9;
}
#project-dropper .project-dropper-cell:hover .cell-logo img {
  filter: grayscale(0%);
}
#project-dropper .project-dropper-cell:hover::after {
  opacity: 1;
  height: 60%;
  border-radius: 0px;
  transition: 0.2s;
}
#project-dropper .project-dropper-cell:hover::before {
  opacity: 1;
}

@media (orientation: portrait) {
  #project-dropper .project-dropper-header {
    top: -112px;
    right: auto;
    left: 20px;
  }
  #project-dropper .project-dropper-header h1 {
    text-transform: capitalize;
    font-size: 24px;
  }
  #project-dropper .project-dropper-col {
    width: 100vw;
  }
  #project-dropper .project-dropper-col .project-dropper-cell {
    height: 256px;
    margin-bottom: calc(256px * 3);
    margin-top: calc(256px * 1.5);
  }
  #project-dropper .project-dropper-col .project-dropper-cell .cell-logo {
    opacity: 0.25;
    left: auto;
    right: 10vw;
  }
  #project-dropper .project-dropper-col .project-dropper-cell .cell-logo img {
    transform: translateX(50%);
    filter: grayscale(0%);
  }
  #project-dropper .project-dropper-col.right {
    top: calc(480px / 4);
    margin-top: calc(480px);
    left: auto;
  }
  #project-dropper .project-dropper-col.right .project-dropper-cell {
    transform: translateY(calc(-480px));
  }
  #project-dropper .project-dropper-col.right .project-dropper-cell .cell-logo {
    right: auto;
    left: 10vw;
  }
  #project-dropper .project-dropper-col.right .project-dropper-cell .cell-logo img {
    transform: translateX(-50%);
  }
}
@media (max-width: 680px) {
  #project-dropper .project-dropper-col .project-dropper-cell .cell-header {
    bottom: calc(40px * 1.5);
    right: 20px;
    opacity: 0.9;
  }
  #project-dropper .project-dropper-col .project-dropper-cell .cell-header h1 {
    font-weight: 800;
    font-size: 6vw;
  }
  #project-dropper .project-dropper-col .project-dropper-cell .cell-logo {
    right: auto;
    left: 15vw;
    width: 13%;
  }
  #project-dropper .project-dropper-col .project-dropper-cell .cell-logo img {
    transform: translateX(0%);
  }
  #project-dropper .project-dropper-col.right .project-dropper-cell .cell-logo {
    left: auto;
    right: 15vw;
  }
  #project-dropper .project-dropper-col.right .project-dropper-cell .cell-logo img {
    transform: translateX(0%);
  }
}
#signature {
  position: fixed;
  bottom: 0px;
  right: 0px;
  padding: calc(40px / 2);
  transform: rotate(-90deg) translate(calc(-25% + 40px / 2), 285%);
  transform-origin: top left;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  z-index: 999;
  opacity: 0.125;
}
#signature h3 {
  font-family: "DM Sans", sans-serif;
  text-transform: uppercase;
  font-size: 16px;
  margin-left: 12px;
}
#signature h3 span {
  font-family: "Abril Fatface", sans-serif;
  position: absolute;
  top: 50%;
  left: 0px;
  font-size: 32px;
  line-height: 12px;
  transform: translateY(-75%);
  opacity: 0.5;
}

@media (max-width: 680px) {
  #signature {
    display: none;
  }
}
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

#main {
  overflow-x: hidden !important;
  overflow-y: hidden;
  z-index: -2;
}

body {
  overflow-x: hidden;
  overflow-y: scroll;
}

a {
  text-decoration: none;
}

* {
  font-family: "Cormorant Garamond", serif;
  color: white;
  padding: 0px;
  margin: 0px;
  transition-timing-function: cubic-bezier(0.07, 0.75, 0.32, 0.96);
  animation-timing-function: cubic-bezier(0.07, 0.75, 0.32, 0.96);
  cursor: default;
}

body {
  background-color: #151515;
  overflow-x: hidden;
}

.content-box-padded {
  padding: 40px 200px;
}
@media (orientation: portrait) {
  .content-box-padded {
    padding: 40px 20px;
  }
}

.full-page {
  position: relative;
  max-width: 100%;
  height: 100%;
}
.full-page.subber {
  width: 70%;
  margin-left: 40px;
}

#interdimensions {
  display: none;
  pointer-events: none;
  position: fixed;
  top: 0px;
  left: 0px;
  background-color: transparent;
  opacity: 0;
  transition: 0.175s;
  transition-timing-function: cubic-bezier(0.17, 0.67, 0.79, 1.02);
}
#interdimensions:not(.stuck-at-bottom) {
  animation: intro-model-up 2.5s cubic-bezier(0.34, 1.25, 0, 0.94) 0.25s forwards;
}
#interdimensions.stuck-at-bottom {
  top: 0px;
  animation: intro-model-outscroll 0.5s forwards;
}

#header-page {
  height: 120vh;
}

#intro-sidebar {
  opacity: 0.5;
  position: relative;
  height: 100vh;
  width: 375px;
}

#intro-center {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translateX(-50%);
}
#intro-center h1 {
  opacity: 0;
  font-family: "Inconsolata", sans-serif;
  font-weight: 400;
  font-size: 70px;
  text-transform: uppercase;
  transition: 8s;
  width: 100%;
  white-space: nowrap;
  transition-timing-function: cubic-bezier(0.51, 0.06, 0.31, 0.95);
}
#intro-center h1 .separator {
  opacity: 0.25;
  left: 50%;
  bottom: -40px;
  width: 0px;
  transform: translateX(-50%);
  animation: intro-center-separator 0.8s 2s forwards cubic-bezier(0.63, 0.02, 0.29, 0.94);
}
@media (max-width: 680px) {
  #intro-center h1 .separator {
    animation: intro-center-separator-portrait 0.8s 2s forwards cubic-bezier(0.63, 0.02, 0.29, 0.94);
  }
}

.separator {
  position: absolute;
  background-color: white;
  height: 4px;
  width: 100px;
  border-radius: 1px;
}

.intro-header {
  width: 100%;
  height: 375px;
  position: absolute;
  top: -40px;
  left: 0px;
  color: white;
  transform: scale(0.6);
}
.intro-header *:hover {
  cursor: default;
}
.intro-header .intro-header-letter {
  font-size: 300px;
  position: absolute;
  z-index: 1;
}
.intro-header .intro-header-letter:nth-child(1), .intro-header .intro-header-letter:nth-child(2) {
  opacity: 0;
}
.intro-header .intro-header-letter:nth-child(1) {
  animation: intro-header-letter-down 0.5s 1s forwards cubic-bezier(0.07, 0.75, 0.32, 0.96);
}
.intro-header .intro-header-letter:nth-child(2) {
  color: lightgray;
  z-index: 0;
  left: 75px;
  animation: intro-header-letter-up 0.5s 1.05s forwards cubic-bezier(0.07, 0.75, 0.32, 0.96);
}
.intro-header #intro-sub-header {
  position: absolute;
  left: 115px;
  bottom: 55px;
}
.intro-header #intro-sub-header h2 {
  font-family: "Mate SC", serif;
  font-size: 28px;
  opacity: 0;
  animation: intro-sub-header-in 0.5s 1.25s forwards cubic-bezier(0.07, 0.75, 0.32, 0.96);
}
.intro-header .intro-separator {
  width: 0px;
  height: 4px;
  background-color: white;
  border-radius: 1px;
  position: absolute;
  left: 9px;
  top: 400px;
  animation: intro-separator-expand 0.5s 1.5s forwards cubic-bezier(0.07, 0.75, 0.32, 0.96);
}
.intro-header .intro-nav {
  position: absolute;
  top: 420px;
  left: 10px;
}
.intro-header .intro-nav ul {
  list-style: none;
}
.intro-header .intro-nav ul li {
  opacity: 0;
  font-family: "Manrope", sans-serif;
  padding: 10px 0px;
  font-size: 24px;
  transition: 0.8s;
  transition-timing-function: cubic-bezier(0.07, 0.75, 0.32, 0.96);
}
.intro-header .intro-nav ul li.cascadia-show {
  opacity: 0.7 !important;
}
.intro-header .intro-nav ul li:hover.cascadia-show {
  transition: 0.2s;
  opacity: 1 !important;
  cursor: pointer;
  margin-left: 3px;
}

#intro-subpiece {
  position: absolute;
  top: 230px;
  right: 70px;
}
#intro-subpiece::after {
  content: "";
  position: absolute;
  right: 0px;
  bottom: 0px;
  height: 1px;
  width: 100vw;
}
#intro-subpiece .intro-side-piece {
  opacity: 0;
  font-family: "Manrope", sans-serif;
  text-transform: uppercase;
  letter-spacing: 5px;
  font-size: 16px;
}
#intro-subpiece .intro-side-piece span {
  font-family: "Manrope", sans-serif;
  font-size: 12px;
}
#intro-subpiece .intro-side-piece span.cascadia-show {
  opacity: 0.8 !important;
}
#intro-subpiece #social-links {
  position: absolute;
  right: 0px;
  top: -5px;
  transform: translateY(-100%);
}
#intro-subpiece #social-links i {
  pointer-events: all;
  opacity: 0;
  font-size: 32px;
  padding-left: 10px;
}
#intro-subpiece #social-links i.cascadia-show {
  opacity: 0.25 !important;
}
#intro-subpiece #social-links i:hover.cascadia-show {
  cursor: pointer;
  transition: 0.2s;
  opacity: 0.9 !important;
}

#hello-nav {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  border: 1px dotted rgba(255, 255, 255, 0.25);
  transform: translate(-50%, -50%);
}
#hello-nav .nav-row {
  margin-left: 20%;
  width: 60%;
  border: 1px dotted rgba(255, 255, 255, 0.25);
  display: flex;
  flex-direction: row;
  justify-content: center;
}
#hello-nav .nav-row .nav-cell {
  border: 1px dotted rgba(255, 0, 255, 0.25);
  flex-grow: 1;
  text-align: center;
}
#hello-nav .nav-row .nav-cell p {
  text-transform: uppercase;
  font-size: 42px;
  font-family: "Manrope", sans-serif;
}

footer {
  height: 200px;
  margin-top: 184px;
  background-color: #121212;
}
footer h3, footer h5, footer h6 {
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  opacity: 0.5;
}
footer h5 {
  font-size: 12px;
  opacity: 0.25;
}
footer h6 {
  font-size: 16px;
}
footer a {
  text-decoration: none;
}
footer a:hover {
  cursor: pointer !important;
}

@media (orientation: portrait) {
  #intro-center h1 {
    font-size: 24px;
  }

  #intro-subpiece {
    top: 20px;
    right: 20px;
    text-align: right;
    opacity: 0.5;
  }
  #intro-subpiece #social-links {
    bottom: -5px;
    transform: translateY(100%);
  }
  #intro-subpiece #social-links i {
    font-size: 56px;
  }

  .intro-header {
    top: 50%;
    transform: translate(-25%, -50%) scale(0.4);
    right: 20px;
  }
}

/*# sourceMappingURL=index.css.map */