/* @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Old+Standard+TT:ital,wght@0,700;1,400&display=swap'); */

@font-face {
  font-family: 'Pressura Light';
  src: url(./font/Pitch-Regular.otf);
}

@font-face {
  font-family: 'Pressura Light Italic';
  src: url(./font/Pitch-Italic.otf);
}

@font-face {
  font-family: 'Pressura Bold';
  src: url(./font/gt-pressura-mono-bold.ttf);
}

body {
  background-color: #111111;
  margin: 0;
  overflow-x: hidden;
}

*::-webkit-scrollbar {
  display: none;
}

* {
  -ms-overflow-style: none;
  scrollbar-width: none;
  letter-spacing: .75px;
  cursor: default;
}

a {
  color: #d1c4b4;
  text-decoration: none;
  cursor: pointer;
}

p {
  font-family: 'Pressura Light', monospace;
}

h3, h4 {
  font-family: 'Pressura Bold', monospace;
  font-weight: bold;
}

path {
  stroke-width: 5px;
}

#mobilenote {
  display: none
}

.cursor {
  z-index: 10;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  border: 1px solid #d1c4b4;
  transition: all .2s ease-out;
  position: fixed;
  pointer-events: none;
  left: 0;
  top: 0;
  color: rgba(17, 17, 17, 0);
  font-family: 'Pressura Light', monospace;
  font-size: 13px;
  text-align: center;
  line-height: 6.25;
  font-weight: bold;
}

.cursor2 {
  z-index: 10;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background-color: #d1c4b4;
  opacity: 1;
  position: fixed;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: opacity .2s;
}

.hover {
  width: 75px;
  height: 75px;
}

.cursorinnerhover {
  opacity: 0;
}

.click {
  background-color: #d1c4b4;
}

.hover2 {
  width: 75px;
  height: 75px;
  background-color: #d1c4b4;
  color: rgba(17, 17, 17, 1);
  border-radius: 100%;
  border: 1px solid #d1c4b4;
}

.hover3 {
  width: 75px;
  height: 75px;
  background-color: #111;
  color: rgba(208, 195, 179, 1);
  border-radius: 100%;
  border: 1px solid #111;
}

.background {
  position: fixed;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  width: 200%;
  height: 200vh;
  background: transparent url('http://assets.iceable.com/img/noise-transparent.png') repeat 0 0;
  background-repeat: repeat;
  animation: bg-animation .2s infinite;
  opacity: .5;
  visibility: visible;
  user-select: none;
  z-index: 4;
  user-select: none;
  pointer-events: none;
}

@keyframes bg-animation {
  0% {
    transform: translate(0, 0)
  }

  10% {
    transform: translate(-5%, -5%)
  }

  20% {
    transform: translate(-10%, 5%)
  }

  30% {
    transform: translate(5%, -10%)
  }

  40% {
    transform: translate(-5%, 15%)
  }

  50% {
    transform: translate(-10%, 5%)
  }

  60% {
    transform: translate(15%, 0)
  }

  70% {
    transform: translate(0, 10%)
  }

  80% {
    transform: translate(-15%, 0)
  }

  90% {
    transform: translate(10%, 5%)
  }

  100% {
    transform: translate(5%, 0)
  }
}

.loading {
  position: fixed;
  left: 20px;
  right: 20px;
  top: 20px;
  bottom: 20px;
  height: auto;
  width: auto;
  border: 1px solid #d1c4b4;
  transition: all .5s;
  display: block;
}

.loading .precontent {
  position: absolute;
  width: 100%;
  height: auto;
  transition: all .5s;
  display: block;
  top: 35%;
}

.precontent h4 {
  position: relative;
  margin: 50px auto;
  text-align: center;
  width: 100%;
  font-size: 26px;
  line-height: 1.5;
  color: #d1c4b4;
}

.loading .question {
  display: flex;
  margin: auto;
  display: flex;
  justify-content: center;
}

.loading .soundquestion {
  margin: 0 20px;
  width: 75px;
  height: 75px;
  border: solid 1px #d1c4b4;
  border-radius: 50%;
  text-align: center;
}

.loading .soundquestion p {
  font-size: 13px;
  line-height: 1.5;
  color: #d1c4b4;
  margin-top: 22px;
}

main {
  position: fixed;
  left: 20px;
  right: 20px;
  top: 20px;
  bottom: 20px;
  height: auto;
  width: auto;
  border: 1px solid #d1c4b4;
  opacity: 1;
  transition: all .5s;
  overflow: hidden;
}

nav {
  position: absoulte;
  width: 100%;
  height: 100px;
  border-bottom: 1px solid;
  display: flex;
  border-color: #d1c4b4;
}

.home {
  position: absolute;
  height: inherit;
  width: 250px;
  border-right: 1px solid;
  border-color: #d1c4b4;
  background-position: bottom;
  background-size: cover;
  background-position: center;
  background-repeat: repeat;
  background: linear-gradient(to top right, rgba(0, 0, 0, 0) calc(50% - 1px), #d1c4b4, rgba(0, 0, 0, 0) calc(50% + 1px)), linear-gradient(to top left, rgba(0, 0, 0, 0) calc(50% - 1px), #d1c4b4, rgba(0, 0, 0, 0) calc(50% + 1px));
}

.navigation {
  position: absolute;
  height: inherit;
  left: 250px;
  right: 100px;
  width: auto;
  display: flex;
}

.about, .projects {
  height: 100%;
  width: 50%;
  transition: all .3s;
}

.about {
  left: 0;
  right: 50%;
  min-width: 100px;
}

.projects {
  left: 50%;
  right: 0;
  border-left: 1px solid;
  border-color: #d1c4b4;
}

.active {
  background-color: #d1c4b4;
  color: #111;
  width: calc(100vw - 40px - 250px - 100px - 100px);
}

#sound {
  position: absolute;
  right: 0;
  height: inherit;
  width: 100px;
  border-left: 1px solid;
  border-color: #d1c4b4;
  overflow: hidden;
}

p.section {
  position: absolute;
  font-family: 'Pressura Light', monospace;
  width: 100%;
  color: #d1c4b4;
  margin: 20px;
  font-size: 13px;
}

#sound p.section {
  text-align: center;
  margin: 20px 0;
}

.container {
  position: absolute;
  height: calc(100vh - 40px - 100px);
  width: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  transition: all .5s;
}

.container video {
  width: 100%;
  height: auto;
  border-bottom: 1px solid #d1c4b4;
  margin: 0;
}

.container.ct1 {
  display: block;
}

.overview {
  position: relative;
  height: 45vw;
  width: 100%;
  display: flex;
  border-bottom: 1px solid #d1c4b4;
}

.ct1 .intruduction {
  position: relative;
  height: 100%;
  width: 250px;
  border-right: 1px solid #d1c4b4;
}

.text {
  position: absolute;
  bottom: 50px;
  left: 20px;
  right: 20px;
  width: auto;
  height: auto;
}

.ct0 .text p {
  font-family: 'Pressura Light', monospace;
  font-size: 13px;
  line-height: 2;
  color: #d1c4b4;
  margin-top: 20px;
}

.ct1 .text p {
  font-family: 'Pressura Light', monospace;
  font-size: 13px;
  line-height: 2;
  color: #d1c4b4;
}

.text strong {
  font-size: 16px;
}

.showcase {
  position: relative;
  height: 100%;
  width: calc(100vw - 40vw - 100vw);
}

.ct-1 {
  display: flex;
}

.work-list {
  height: auto;
  width: calc(100vw / 2 - 20px);
}

.work-section {
  width: 100%;
  height: 200px;
  border-bottom: 1px solid #d1c4b4;
  display: flex;
  align-items: center;
  border-right: 1px solid #d1c4b4;
  overflow: hidden;
}

.work-show {
  height: calc(7 * 200px);
  width: calc(100vw / 2 - 20px);
  background-attachment: fixed;
  background-position: 37.5vw;
  background-size: cover;
  background-color: rgba(17, 17, 17, 0.25);
  background-blend-mode: darken;
  border-left: 1px solid #d1c4b4;
  transition: opacity .3s;
}

.work-show p {
  position: fixed;
  bottom: 50px;
  left: calc(50% + 20px);
  font-family: 'Pressura Light', monospace;
  font-size: 13px;
  color: #d1c4b4;
  line-height: 2;
}

.work-section svg {
  margin: auto 20px 20px auto;
  height: 20px;
  width: 20px;
  opacity: 0;
  transition: all .3s;
}

.work-section:last-child {
  border-bottom: none;
}

.work-section p {
  font-family: 'Pressura Light', monospace;
  font-style: italic;
  font-size: 13px;
  color: #d1c4b4;
  margin-left: 50px;
}

.work-section h3 {
  font-size: 60px;
  color: rgba(209, 196, 180, 0);
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #d1c4b4;
  margin-left: 20px;
  transition: all .3s;
}

.ct0 .showcase {
  background-image: url(./img/about2.png);
  background-position: center;
  background-size: cover;
  width: calc(100vw - 40px - 300px);
}

.ct0 .intruduction {
  width: 300px;
  position: relative;
  height: 100%;
  border-right: 1px solid #d1c4b4;
}

.ct0 .justme {
  position: relative;
  height: auto;
  width: 100%;
}

.justme .cases {
  height: auto;
  width: 100%;
  border-bottom: 1px solid #d1c4b4;
}

.cases .aboutme {
  height: auto;
  min-width: 750px;
  max-width: 55vw;
  border-right: 1px solid #d1c4b4;
}

.cases .headcase {
  height: 275px;
  width: 100%;
  display: flex;
}

.cases .bottomcase {
  height: 0;
  width: 100%;
  display: flex;
}

.caseleft {
  height: inherit;
  width: calc(100vw - 40px - 275px);
  border-right: 1px solid #d1c4b4;
}

.headcase .caseleft {}

.caseright {
  height: inherit;
  width: 275px;
  right: 0;
  position: absolute;
}

.bottomcase svg {
  position: absolute;
  right: 20px;
  bottom: 20px;
  height: 20px;
  width: 20px;
  z-index: 4;
  transform-origin: bottom right;
  transition: all .5s;
  user-select: none;
  pointer-events: none;
}

.cases:first-child, .cases:nth-child(3) {
  display: flex;
}

.cases .title {
  height: auto;
  width: 300px;
  border-right: 1px solid #d1c4b4;
}

.cases .education {
  height: auto;
  width: calc(100vw - 40px - 300px);
}

.education .study {
  width: inherit;
  height: auto
}

.education .study:first-child {
  border-bottom: 1px solid #d1c4b4;
}

.study p, .title p, .aboutme p {
  margin: 15px 20px;
  font-family: 'Pressura Light', monospace;
  font-size: 13px;
  color: #d1c4b4;
  line-height: 2;
}

.study p {
  font-size: 13px;
  line-height: 2;
}

.study a {
  text-decoration: underline;
}

.aboutme p {
  margin-bottom: 50px;
}

.aboutme p:nth-child(2) {
  font-size: 13px;
  line-height: 2;
}

.caseright p {
  margin: 15px 20px;
  font-family: 'Pressura Light', monospace;
  font-size: 13px;
  color: #d1c4b4;
  line-height: 2;
}

.abt-marquee-01 {
  overflow: hidden;
  height: 1000px;
  --offset: 20vw;
  --move-initial: calc(-25% + var(--offset));
  --move-final: calc(-50% + var(--offset));
  border-bottom: 1px solid #d1c4b4;
  background-image: url(./img/dots.png);
  background-position: center;
  background-size: 0px;
  background-repeat: repeat;
}

.ct0 .project {
  border: none;
}

.abt-contact {
  height: 1000px;
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid #d1c4b4;
}

.abt-contact a {
  height: inherit;
  width: inherit;
  text-decoration: none;
}

.abt-marquee-02 {
  height: 350px;
  --offset: 20vw;
  --move-final: calc(-25% + var(--offset));
  --move-initial: calc(-50% + var(--offset));
  transform: rotate(-7.5deg);
}

.abt-marquee-03 {
  height: 350px;
  --offset: 20vw;
  --move-initial: calc(-25% + var(--offset));
  --move-final: calc(-50% + var(--offset));
  transform: rotate(-7.5deg);
}

.abt-marquee-02 .marquee__inner, .abt-marquee-03 .marquee__inner {
  width: fit-content;
  display: flex;
  transform: translate3d(var(--move-initial), 0, 0);
  animation: marquee 20s linear infinite;
  transition: all .2s;
  font-family: 'Pressura Bold', monospace;
  font-size: 350px;
  -webkit-text-stroke-width: 2px;
  color: rgba(209, 196, 180, 0);
}

.abt-marquee-02 span, .abt-marquee-03 span {
  margin-left: 100px;
}

.bubbles {
  width: 100%;
  height: 100%;
}

.bubblesvg {
  position: absolute;
  top: 0;
  /* right: calc(-100vw + 40px + 250px); */
  width: calc(100vw - 40px - 250px);
  display: block;
  height: 100%;
  opacity: 1;
  background-image: url(./img/shadow22.png);
  background-size: cover;
  background-position: center;
}

.works {
  position: relative;
  height: 75px;
  width: 100%;
  display: flex;
  border-bottom: 1px solid #d1c4b4;
}

.work {
  background: linear-gradient(to top right, rgba(0, 0, 0, 0) calc(50% - 1px), #d1c4b4, rgba(0, 0, 0, 0) calc(50% + 1px)), linear-gradient(to top left, rgba(0, 0, 0, 0) calc(50% - 1px), #d1c4b4, rgba(0, 0, 0, 0) calc(50% + 1px));

  position: absolute;
  height: 100%;
  width: 250px;
  border-right: 1px solid #d1c4b4;
}

.work h4 {
  font-size: 40px;
  color: #d1c4b4;
  text-align: center;
  font-style: italic;
  margin: 15px;
}

.works .pattern {
  position: absolute;
  left: 250px;
  height: 100%;
  width: calc(100vw - 40px - 250px);
}

.project, .overlay {
  position: relative;
  height: auto;
  width: 100%;
}

.project {
  border-bottom: 1px solid #d1c4b4;
}

.overlay {
  position: absolute;
  height: 100%;
  background-size: cover;
  background-position: bottom center;
  z-index: 3;
  opacity: 0;
  transition: all .3s ease;
}

.prj1 .overlay {
  background-image: url(./img/test2.png);
  background-color: rgba(17, 17, 17, 0.5);
  background-blend-mode: darken;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, calc(100vw - 40px - 250px + 1px) 100%, calc(100vw - 40px - 250px + 1px) 350px, 0% 350px);
}

.prj2 .overlay {
  background-image: url(./img/test3.png);
  background-color: rgba(17, 17, 17, 0.5);
  background-blend-mode: darken;
  clip-path: polygon(0% 0%, 100% 0%, 100% 350px, 250px 350px, 250px 100%, 0% 100%);
}

.overlay:hover {
  opacity: 1;
}

.head {
  position: relative;
  height: 350px;
  width: 100%;
  display: flex;
}

.prj1 .head, .prj2 .head {
  border-bottom: 1px solid #d1c4b4;
}

.prj7 .head {
  height: 275px;
  background-color: #d1c4b4;
}

.prj7 p {
  position: absolute;
  left: 20px;
  top: 20px;
  margin: 0;
  font-size: 13px;
}

.prjX {
  border-bottom: none;
}

.prjX .head {
  height: 200px;
  border-bottom: 1px solid #d1c4b4;
}

.prjY {
  overflow: hidden;
}

.prjY .head {
  display: flex;
  height: 400px;
}

.prjY svg {
  position: absolute;
  right: 20px;
  bottom: 20px;
  height: 20px;
  width: 20px;
  transform-origin: bottom right;
  transition: all .5s;
  user-select: none;
  pointer-events: none;
}

.prjY .overlay {
  position: absolute;
  height: 100%;
  min-width: 750px;
  max-width: 55vw;
  right: 0;
  opacity: 1;
  border-left: 1px solid #d1c4b4;
}

.prjY .informu {
  position: absolute;
  height: 100%;
  width: inherit;
  margin: 145px 50px;
}

.prjY .informu p {
  font-size: 13px;
  color: #d1c4b4;
  font-family: 'Pressura Light', monospace;
  user-select: none;
  pointer-events: none;
  line-height: 2;
}

.prjY .informu strong {
  font-size: 16px;
}

.info {
  position: absolute;
  height: 100%;
  overflow: hidden;
}

.prj1 .info {
  width: 250px;
  border-right: 1px solid #d1c4b4;
}

.prj2 .info {
  right: 0;
  width: 250px;
}

.info .text {
  position: absolute;
  bottom: 20px;
  z-index: 3;
  user-select: none;
  pointer-events: none;
}

.info p {
  font-family: 'Pressura Light', monospace;
  font-size: 13px;
  color: #d1c4b4;
  line-height: 2;
  margin: 0;
}

.prj1 .info h4, .prj2 .info h4 {
  position: absolute;
  font-style: italic;
  font-size: 135px;
  color: #d1c4b4;
  right: 0;
  top: 55%;
  margin: 0;
  transform: translate(45%, -50%) rotate(-90deg);
}

.content {
  position: absolute;
}

.prj1 .content {
  width: 100%;
  left: 250px;
}

.prj2 .content {
  left: 0;
  height: 100%;
  width: calc(100vw - 40px - 250px);
  border-right: 1px solid #d1c4b4;
}

.fail {
  position: absolute;
  width: 500%;
  font-size: 80px;
  color: rgba(209, 196, 180, 0);
  font-family: 'Pressura Bold', monospace;
  margin: 120px 50px;
  -webkit-text-stroke: 1px #d1c4b4;
  font-weight: 900;
  transition: all .5s ease;
  z-index: 5;
  user-select: none;
  pointer-events: none;
}

.failhover {
  color: rgba(209, 196, 180, 1);
}

.bottom {
  position: relative;
  height: 65px;
  width: 100%;
  display: flex;
}

.prj56 .bottom {
  border-bottom: 1px solid #d1c4b4;
}

.pattern {
  position: absolute;
  height: 100%;
  /* background: linear-gradient(to top right, rgba(0, 0, 0, 0) calc(50% - 1px), #d1c4b4, rgba(0, 0, 0, 0) calc(50% + 1px)), linear-gradient(to top left, rgba(0, 0, 0, 0) calc(50% - 1px), #d1c4b4, rgba(0, 0, 0, 0) calc(50% + 1px)); */
}

.prj1 .pattern {
  left: 0;
  width: calc(100vw - 40px - 250px);
  border-right: 1px solid #d1c4b4;
}

.prj2 .pattern {
  left: 250px;
  width: calc(100vw - 40px - 250px);
}

.link {
  position: absolute;
  right: 0;
  height: 100%;
  width: 250px;
}

.link svg {
  position: absolute;
  right: 20px;
  bottom: 20px;
  height: 20px;
  width: 20px;
  z-index: 4;
  transform-origin: bottom right;
  transition: all .5s;
  user-select: none;
  pointer-events: none;
}

.link p {
  font-family: 'Pressura Light', monospace;
  font-size: 13px;
  /* line-height: 2; */
  color: #d1c4b4;
  margin: 15px 20px;
}

.prj2 .link {
  left: 0;
  border-right: 1px solid #d1c4b4;
}

.error {
  height: 100%;
  left: 0;
  width: 250px;
}

.prj34 .error {
  border-right: 1px solid #d1c4b4;
}

.prj56 .error {
  border-left: 1px solid #d1c4b4;
}

.error .diagonal {
  height: 100%;
  width: 100%;
  background: linear-gradient(to top right, rgba(0, 0, 0, 0) calc(50% - 1px), #d1c4b4, rgba(0, 0, 0, 0) calc(50% + 1px)), linear-gradient(to top left, rgba(0, 0, 0, 0) calc(50% - 1px), #d1c4b4, rgba(0, 0, 0, 0) calc(50% + 1px));
}

.prj56 .error .diagonal {
  height: 52.5vh;
  width: 100%;
  background: linear-gradient(to top left, rgba(0, 0, 0, 0) calc(50% - 2px), #d1c4b4, rgba(0, 0, 0, 0) calc(50% + 2px))
}

.prj34 .head {
  height: 450px;
}

.prj34 .left .overlay {
  position: absolute;
  width: calc((100vw - 40px - 250px - 4px) / 2);
  height: 100%;
  background-image: url(./img/dearmoon.png);
  background-color: rgba(17, 17, 17, 0.5);
  background-blend-mode: darken;
  background-size: cover;
  background-position: bottom center;
  z-index: 3;
  transition: all .3s ease;
}

.prj34 .right .overlay {
  position: absolute;
  /* left: 57.5vw; */
  width: calc((100vw - 40px - 250px - 4px) / 2);
  height: 100%;
  background-image: url(./img/waitr/title_1.png);
  background-color: rgba(17, 17, 17, 0.5);
  background-blend-mode: darken;
  background-size: cover;
  background-position: bottom center;
  z-index: 3;
  transition: all .3s ease;
}

.left, .right {
  position: relative;
  height: 100%;
  width: calc((100vw - 40px - 250px - 2px) / 2);
  display: block;
  overflow: hidden;
}

.left {
  border-right: 1px solid #d1c4b4;
}

.prj34 .content {
  position: absolute;
  width: 100%;
  height: 300px;
  border-bottom: 1px solid #d1c4b4;
}

.prj34 .fail, .prj56 .fail {
  margin: 100px 50px;
}

.prj34 .info, .prj56 .info {
  top: 300px;
  position: absolute;
  width: 100%;
  height: 150px;
}

.prj34 .info .text, .prj56 .info .text {
  position: absolute;
  left: 150px;
  top: 15px;
  width: calc(100% - 200px);
  height: inherit;
  z-index: 4;
  bottom: 0;
  display: flex;
}

.right svg, .left svg {
  position: absolute;
  right: 20px;
  bottom: 20px;
  height: 20px;
  width: 20px;
  z-index: 4;
  transform-origin: bottom right;
  transition: all .5s;
  user-select: none;
  pointer-events: none;
}

.prj7 svg {
  position: absolute;
  right: 20px;
  bottom: 20px;
  height: 20px;
  width: 20px;
  transform-origin: bottom right;
  transition: all .5s;
  user-select: none;
  pointer-events: none;
}

.prj34 .info p, .prj56 .info p {
  margin-right: 20px;
}

.prj34 .info h4, .prj56 .info h4 {
  position: absolute;
  font-size: 60px;
  color: #d1c4b4;
  font-style: italic;
  margin: 0;
  transform: translate(-10%, -30%) translateY(-5%);
}

.contact {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.copyright {
  position: absolute;
  width: 200px;
  height: 100%;
  border-right: 1px solid #d1c4b4;
  background: linear-gradient(to top right, rgba(0, 0, 0, 0) calc(50% - 1px), #d1c4b4, rgba(0, 0, 0, 0) calc(50% + 1px)), linear-gradient(to top left, rgba(0, 0, 0, 0) calc(50% - 1px), #d1c4b4, rgba(0, 0, 0, 0) calc(50% + 1px));
}

.marquee {
  position: absolute;
  left: 200px;
  overflow: hidden;
  height: 100%;
  --offset: 20vw;
  --move-initial: calc(-25% + var(--offset));
  --move-final: calc(-50% + var(--offset));
}

.marquee__inner {
  position: absolute;
  top: -105px;
  width: fit-content;
  display: flex;
  position: relative;
  transform: translate3d(var(--move-initial), 0, 0);
  animation: marquee 25s linear infinite;
  transition: all .3s;
  font-family: 'Pressura Bold', monospace;
  color: #d1c4b4;
  font-size: 283px;
  color: rgba(209, 196, 180, 0);
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #d1c4b4;
}

.marquee span {
  margin: 0 50px;
}

@keyframes marquee {
  0% {
    transform: translate3d(var(--move-initial), 0, 0);
  }

  100% {
    transform: translate3d(var(--move-final), 0, 0);
  }
}

.visualizer-container {
  position: absolute;
  bottom: -5px;
  left: 1px;
  z-index: 10;
  width: 300%;
  overflow: hidden;
}

.visualizer-container__bar {
  display: inline-block;
  background: #d1c4b4;
  margin: 0 1px;
  width: 1px;
}

.container.ct2 {
  display: block;
}

.prj-overview {
  position: relative;
  width: 100%;
  height: 750px;
  border-bottom: 1px solid #d1c4b4;
  display: flex;
}

.prj-info {
  position: absolute;
  width: 250px;
  height: 100%;
  border-right: 1px solid #d1c4b4;
}

.prj-text {
  position: absolute;
  bottom: 50px;
  left: 20px;
  right: 20px;
  width: auto;
  height: auto;
}

.prj-text p {
  font-family: 'Pressura Light', monospace;
  font-size: 13px;
  color: #d1c4b4;
  line-height: 2;
  margin: 0;
}

.prj-chapter p,
.prj-introduction p {
  font-family: 'Pressura Light', monospace;
  font-size: 13px;
  line-height: 2;
  color: #d1c4b4;
  margin: 0;
}

.prj-chapter a {
  text-decoration: underline;
}

.prj-text strong {
  font-family: 'Pressura Light', monospace;
  font-style: italic;
  /* font-size: 16px; */
}

.prj-chapter strong {
  margin-bottom: 50px;
  font-size: 13px;
}

.prj-image {
  position: absolute;
  left: calc(250px + 1px);
  height: 100%;
  width: calc(100vw - 40px - 250px);
  background-size: cover;
  background-color: rgba(17, 17, 17, 0.25);
  background-blend-mode: darken;
}

.ct7 .prj-image {
  background-position: bottom center;
}

.ct5 .prj-image, .ct6 .prj-image {
  background-position: center center;
}

.prj-image h4 {
  position: absolute;
  bottom: 50px;
  left: 50px;
  font-size: 140px;
  line-height: .875;
  color: #d1c4b4;
  margin: 0;
}

.prj-information {
  position: relative;
  height: auto;
  width: 100%;
  display: flex;
  border-bottom: 1px solid #d1c4b4;
}

.prj-chapter {
  position: relative;
  max-width: 55vw;
  min-width: 750px;
  height: auto;
  display: block;
  border-right: 1px solid #d1c4b4;
}

.prj-chapter p {
  margin: 20px 20px 50px 20px;
  width: auto;
}

.prj-space {
  position: relative;
  height: 100px;
  width: 100%;
  border-bottom: 1px solid #d1c4b4;
}

.prj-placeholder {
  position: absolute;
  height: 100%;
  width: 300px;
  border-right: 1px solid #d1c4b4;
}

.prj-section {
  position: relative;
  width: inherit;
  height: auto;
}

.prj-head {
  position: relative;
  height: auto;
  width: 100%;
  display: flex;
}

.sct-last .prj-head {
  height: 650px;
  background-position: center;
  background-size: cover;
}

.container:nth-child(5) .sct-last .prj-head {
  background-image: url(./img/sense/title.png);
}

.container:nth-child(6) .sct-last .prj-head {
  background-image: url(./img/profectum/title_1.png);
}

.container:nth-child(7) .sct-last .prj-head {
  background-image: url(./img/dearmoon/title_1.png);
}

.container:nth-child(8) .sct-last .prj-head {
  background-image: url(./img/waitr/title_1.png);
}

.container:nth-child(9) .sct-last .prj-head {
  background-image: url(./img/spacerace/main_1.jpg);
}

.container:nth-child(10) .sct-last .prj-head {
  background-image: url(./img/datair/title_1.png);
}

.container:nth-child(11) .sct-last .prj-head {
  background-image: url(./img/hfghistory/title_1.png);
}

.prj-end {
  height: auto;
  width: 100%;
}

.prj-description {
  position: relative;
  width: 350px;
  height: 100%;
}

.sct1 .prj-description, .sct3 .prj-description {
  right: 0;
}

.sct2 .prj-description, .sct4 .prj-description {
  left: 0;
}

.prj-picture {
  position: absolute;
  width: auto;
  height: 100%;
  transition: opacity .5s;
  display: flex;
}

.prj-bottom {
  position: relative;
  height: 200px;
  width: 100%;
  border-bottom: 1px solid #d1c4b4;
  border-top: 1px solid #d2c4b4;
}

.prj-bottom.light  {
  /* border-top: 1px solid #d1c4b4; */
}

.sct-last .prj-bottom {
  border-bottom: 1px solid #d1c4b4;
  border-top: 1px solid #d2c4b4;
  /* background: linear-gradient(to top right, rgba(0, 0, 0, 0) calc(50% - 1px), #d1c4b4, rgba(0, 0, 0, 0) calc(50% + 1px)), linear-gradient(to top left, rgba(0, 0, 0, 0) calc(50% - 1px), #d1c4b4, rgba(0, 0, 0, 0) calc(50% + 1px)); */
}

.prj-buttons {
  position: absolute;
  height: auto;
  width: auto;
  border-top: 1px solid #d1c4b4;
  bottom: -1px;
  cursor: pointer;
}

.prj-buttons.hidden {
  display: none;
}

.sct1 .prj-buttons, .sct3 .prj-buttons {
  border-right: 1px solid #d1c4b4;
  right: calc(-75px - 2px);
}

.sct2 .prj-buttons, .sct4 .prj-buttons {
  left: calc(-75px - 2px);
  border-left: 1px solid #d1c4b4;
}

.prj-pattern {
  position: absolute;
  height: 100%;
  width: 100%;
  background: linear-gradient(to top right, rgba(0, 0, 0, 0) calc(50% - 1px), #d1c4b4, rgba(0, 0, 0, 0) calc(50% + 1px)), linear-gradient(to top left, rgba(0, 0, 0, 0) calc(50% - 1px), #d1c4b4, rgba(0, 0, 0, 0) calc(50% + 1px));
}

.sct1 .prj-pattern, .sct3 .prj-pattern {
  right: 0;
  width: 347px;
  border-left: 1px solid #d1c4b4;
  /* width: calc(100vw - 40px - 350px);
  border-right: 1px solid #d1c4b4; */
}

.sct2 .prj-pattern, .sct4 .prj-pattern {
  /* right: 0;
  width: calc(100vw - 40px - 350px);
  border-left: 1px solid #d1c4b4; */
  width: 347px;
  border-right: 1px solid #d1c4b4;
}

.sct1 .prj-button, .sct3 .prj-button {
  border-left: 1px solid #d1c4b4;
}

.sct2 .prj-button, .sct4 .prj-button {
  border-right: 1px solid #d1c4b4;
}

.prj-description p, .prj-description h5, .prj-description a {
  font-family: 'Pressura Light', monospace;
  font-size: 13px;
  color: #d1c4b4;
  line-height: 2;
  margin: 1.25vw;
}

.prj-description a {
  text-decoration: underline;
}

.switch {
  opacity: 0;
  user-select: none;
  pointer-events: none;
}

.sct1 .slider-container {
  position: relative;
  height: auto;
  width: calc(100vw - 40px - 350px);
  border-right: 1px solid #d2c4b4;
}

.sct2 .slider-container {
  position: relative;
  height: auto;
  width: calc(100vw - 40px - 350px);
  border-left: 1px solid #d2c4b4;
  border-right: none;
}

.wrapper-container {
  height: inherit;
  width: inherit;
}

.slider {
  position: relative;
  width: 100%;
  height: calc(((100vw - 40px - 350px) / 16) * 9);
}

.slider.large {
  position: relative;
  width: 100%;
  height: calc(((100vw - 40px - 350px) / 3) * 4);
}

.sct2 .slider, .sct4 .slider {
  right: 0;
  width: calc(100vw - 40px - 350px);
}

.slider-space {
  height: 75px;
  width: 100%;
  border-bottom: 1px solid #d2c4b4;
  border-top: 1px solid #d2c4b4;
}

.wrapper {
  overflow: hidden;
  position: relative;
  background: #111;
  z-index: 1;
}

#items {
  width: 100000px;
  position: relative;
  top: 0;
  left: calc(-100% - 1px);
  height: calc(((100vw - 40px - 350px) / 16) * 9);
  overflow-y: hidden;
}

.large #items {
  width: 100000px;
  position: relative;
  top: 0;
  left: calc(-100% - 1px);
  height: calc(((100vw - 40px - 350px) / 3) * 4);
  overflow-y: hidden;
}

#items.shifting {
  transition: left .5s;
}

.slide {
  width: calc(100vw - 40px - 350px);
  height: inherit;
  cursor: pointer;
  float: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: all 1s;
  position: relative;
  /* object-position: center; */
  object-position: center;
  object-fit: cover;
  background: #000;
  border-right: 1px solid #555;
  cursor: default;
}

.ct3 .sct1 .slide {
  object-position: center top;
}

.control {
  z-index: 2;
  height: 75px;
  width: 75px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #d1c4b4;
}

.control svg {
  height: 20px;
  width: 20px;
}