@font-face {
  font-family: 'NimbusSanExtD-Bol';
  font-display: block;
  src: url('../fonts/388FEE_0_0.woff2') format('woff2'),
       url('../fonts/388FEE_0_0.woff') format('woff');
  font-weight: 700;
}
@font-face {
  font-family: "nimbus-sans-l";
  font-display: block;
  src: url('../fonts/NimbusSanL-Reg.woff2') format('woff2'),
       url('../fonts/NimbusSanL-Reg.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "titling-gothic-fb-extended";
  font-display: block;
  src: url('../fonts/TitlingGothicFBExtended-Bold.woff2') format('woff2'),
       url('../fonts/TitlingGothicFBExtended-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "titling-gothic-fb-extended-outline-6";
  font-display: block;
  src: url('../fonts/TitlingGothicFBExtended-Bold-Outline-6.woff2') format('woff2'),
       url('../fonts/TitlingGothicFBExtended-Bold-Outline-6.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "titling-gothic-fb-extended-outline-10";
  font-display: block;
  src: url('../fonts/TitlingGothicFBExtended-Bold-Outline-10.woff2') format('woff2'),
       url('../fonts/TitlingGothicFBExtended-Bold-Outline-10.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "titling-gothic-fb-extended-outline-20";
  font-display: block;
  src: url('../fonts/TitlingGothicFBExtended-Bold-Outline-20.woff2') format('woff2'),
       url('../fonts/TitlingGothicFBExtended-Bold-Outline-20.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

html {
  font-size: 10px;
}

body {
  font-family: "titling-gothic-fb-extended", sans-serif;
  font-weight: 700;
  margin: 0;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  background: #151515;
  color: #FFF;
}

@media screen and (min-width: 1441px) {
  html {
    font-size: calc(10px + 10 * ((100vw - 1441px) / 2560));
  }
}

@media screen and (max-width: 320px) {
  html {
    font-size: 9px;
  }
}

[v-cloak] { display:none }

::selection {
  background: #5138ff;
}
::-moz-selection {
  background: #5138ff;
}

a {
  text-decoration: none;
  color: #FFF;
}

a:hover {
  text-decoration: none;
  color: #FFF;
}

#mobile-turn {
  visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #151515;
  text-transform: uppercase;
  letter-spacing: .05rem;
  font-size: 1.1rem;
}

@media (max-height: 420px) and (max-width: 900px){
  #mobile-turn {
    visibility: visible;
    z-index: 150;
  }
}

/* Preloader animation */
.loading-text-wrapper {
  background: #151515;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  transition: .25s all;
}
.loading-text {
  animation: pulse infinite .5s;
  animation-timing-function: linear;
  animation-direction: alternate;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  text-align: center;
  margin: auto;
  text-transform: uppercase;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .1rem;
}

@keyframes pulse {
  0% {
    opacity: .2;
  }
  100% {
    opacity: 1
  }
}

/* Router transition */
.router-anim-enter-active,
.router-anim-leave-active {
  transition-duration: .7s;
  transition-property: opacity;
  transition-timing-function: ease-in-out;
}

.router-anim-enter,
.router-anim-leave-active {
  opacity: 0
}
/*End of router transition*/


/* Cursor */
.cursor {
  fill: transparent;
  stroke: #FFF;
  stroke-width: 1.5px;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
}

.cursor svg {
  width: 20rem;
  margin-top: -10rem;
  margin-left: -10rem;
}

/* Navigation */
nav {
  font-family: "NimbusSanExtD-Bol", sans-serif;
  font-weight: 700;
  line-height: 2.8rem;
  text-transform: uppercase;
  letter-spacing: .03rem;
  font-size: 1.1rem;
  width: 100vw;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  margin-top: 5.5rem;
  padding: 0 6rem;
  z-index: 100;
}

@media (max-width: 850px) and (orientation: portrait){
  nav {
    margin-top: 4rem;
    padding: 0 5rem;
  }
}

@media (max-width: 576px){
  nav {
    letter-spacing: .08rem;
    font-size: 1rem;
    margin-top: 2rem;
    padding: 0 2.5rem;
  }
}

.nav-main {
  margin: 0;
}

.nav-left{
  float: left;
}

.nav-right{
  float: right;
}


.nav-item-link {
  position: relative;
  display: block;
  overflow: hidden;
  cursor: pointer;
}

.link-inner {
  color: transparent!important;
}

.link-inner-top, .link-inner-bottom {
  position: absolute;
  top: 0;
  left: 0;
  transition: transform .6s cubic-bezier(.165,.84,.44,1);
}

.link-inner-top {
  transform: translateY(0) translateZ(0);
}

.link-inner-bottom {
  transform: translateY(120%) translateZ(0);
}

.nav-item-link:hover .link-inner-top {
  transform: translateY(-120%) translateZ(0);
}

.nav-item-link:hover .link-inner-bottom {
  transform: translateY(0) translateZ(0);
}

/* End of navigation */

.social-media {
  font-family: "NimbusSanExtD-Bol", sans-serif;
  font-weight: 700;
  position: fixed;
  left: 6rem;
  bottom: 5.5rem;
  padding: 0;
  display: flex;
  flex-direction: row;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  letter-spacing: .03rem;
  font-size: 1.1rem;
  text-transform: uppercase;
  display: block;
  z-index: 50;
}

@media (max-width: 1024px){
  .social-media {
    font-size: 1.1rem;
    bottom: 4rem;
    left: 5rem;
  }
}

@media (max-width: 576px){
  .social-media {
    display: none;
  }
}

.social-media-item {
  list-style: none;
  float: right;
  padding-right: 2rem;
  display: relative;
}

.social-media-item-link {
    position: relative;
    display: block;
    overflow: hidden;  
}

.social-media-item-link:hover .link-inner-top {
  transform: translateY(-120%) translateZ(0);
}

.social-media-item-link:hover .link-inner-bottom {
  transform: translateY(0) translateZ(0);
}
/* End of social media */

/* Site intro */
.intro-section {
  height: 100vh;
  display: block;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 0;
  overflow: hidden;
}

.home-intro-title {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 7rem;
  line-height: 7rem;
  z-index: 1;
  text-align: center;
  position: relative;
  letter-spacing: -.1rem;
}

.intro-sup {
  font-family: "nimbus-sans-l",sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.3rem;
  letter-spacing: .1rem;
  display: block;
  position: absolute;
  right: 6rem;
  bottom: 2.65rem;
}
.outline {
  font-family: "titling-gothic-fb-extended-outline-20";
  font-size: 99%;
  letter-spacing: 0;
}

.outline6 {
  font-family: "titling-gothic-fb-extended-outline-6";
}

@media (max-width: 1200px) {
  .home-intro-title {
    font-size: 6.5rem;
    line-height: 6.8rem;
  }
}

@media (max-width: 850px) and (orientation: portrait){
  .home-intro-title {
    font-size: 5rem;
    line-height: 5rem;
    letter-spacing: 0;
  }
  .intro-sup {
    font-size: 1rem;
    letter-spacing: .1rem;
    right: 3.3rem;
    bottom: 1.4rem;
  }
  .outline {
    -webkit-text-stroke: 1px #FFF; 
  }
}

@media (max-width: 576px){
  .intro-section {
    overflow: visible;
    height: calc(var(--vh, 1vh) * 100);
  }
  .intro-section-profile-mobile {
    height: 50vh;
    height: calc(var(--vh, 1vh) * 50);
    margin-top: 15rem;
  }
  .home-intro-title{
    font-size: 3rem;
    line-height: 3.4rem;
    letter-spacing: 0;
    top: 60vh;
    top: calc(var(--vh, 1vh) * 60);
  }
  .intro-sup {
    font-size: 1.1rem;
    letter-spacing: .1rem;
    position: absolute;
    bottom: -3rem;
    left: 0;
    right: 0;
  }
  .outline, .outline6 {
    font-family: "titling-gothic-fb-extended-outline-10";
  }
}

.intro-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.intro-img-item-1 {
  position: absolute;
  width: 11vw;
  top: 10vh;
  right: 40vw;
}

.intro-img-item-2 {
  position: absolute;
  width: 18vw;
  bottom: 9vh;
  right: 9vw;
}

.intro-img-item-3 {
  position: absolute;
  width: 27.5vw;
  bottom: 15vh;
  left: 10vw;
}

@media (max-width: 1440px) {
  .intro-img-item-1 {
    width: 13vw;
    right: 39vw;
  }
}

@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1.5),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    .intro-img-item-2 {
      width: 20vw;
      bottom: 10vh;
      right: 7vw;
    }
    .intro-img-item-3 {
      width: 33vw;
      top: 22vh;
      left: 7vw;
    }
}

@media (max-width: 1024px) and (orientation: portrait) {
  .intro-img-item-1 {
    width: 20vw;
    top: 10rem;
    right: 20vw;
  }
  
  .intro-img-item-2 {
    width: 50vw;
    bottom: 5vh;
    right: 7vw;
  }
  
  .intro-img-item-3 {
    position: absolute;
    width: 49vw;
    top: 18rem;
    left: -1rem;
  }
}

@media (max-width: 1024px) and (orientation: landscape) {
  .intro-img-item-1 {
    width: 13vw;
    top: 11vh;
    right: 38vw;
  }
}

@media (max-width: 576px){
  .intro-wrapper {
    bottom: initial;
    overflow: visible;
  }
  .intro-img-item-1 {
    width: 36vw;
    left: 32vw;
    top: 80vh;
    top: calc(var(--vh, 1vh) * 80);
  } 
  .intro-img-item-2 {
    width: 40vw;
    bottom: inherit;
    top: 33vh;
    top: calc(var(--vh, 1vh) * 33);
    right: 2.5rem;
  }
  .intro-img-item-3 {
    width: initial;
    height: 40vh;
    height: calc(var(--vh, 1vh) * 40);
    top: 6.5rem;
    left: 2.5rem;
  }
}

.scroll-down {
  font-weight: 700;
  font-size: 1.1rem;
  position: absolute;
  top: calc((var(--vh, 1vh) * 100) - 8.2rem);
  left: calc(50vw - 5rem);
  width: 10rem;
  height: 8.2rem;
  z-index: 900;
  text-transform: uppercase;
  letter-spacing: .1rem;
  display: block;
}

@media (max-width: 1024px) {
  .scroll-down {
    top: calc((var(--vh, 1vh) * 100) - 8rem);
    height: 8rem;
  }
}

@media (max-width: 576px){
  .scroll-down {
    display: none;
  }
}

.scroll-down-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  overflow: hidden;
  pointer-events: none;
  transition: opacity .3s ease;
  opacity: 1;
}

.scroll-down-inner.deactive {
  opacity: 0
}

.scroll-down-text {
  margin-bottom: 1.2rem;
}

.scroll-down-line {
  width: 0;
  border-left: .1rem solid;
  height: 5.5rem;
  -webkit-animation: upDown 2s ease both infinite;
  animation: upDown 2s ease both infinite
}

@keyframes upDown {
  0%,to {
      -webkit-transform: translateY(0);
      transform: translateY(0)
  }
  50% {
      -webkit-transform: translateY(35%);
      transform: translateY(35%)
  }
}

/*End of site intro*/

/*Start of portfolio grid*/
.site-content {
  width: 100vw;
}

.content-padding {
  padding: 25vh 0 20vh 0;
}

@media (max-width: 1024px) {
  .content-padding {
    padding: 5vh 0 15vh 0;
  }
}
@media (max-width: 576px){
  .content-padding {
    padding: 0;
    padding-top: 20vh;
    padding-top: calc(var(--vh, 1vh) * 20);;
    padding-bottom: 6rem;
  }
}
@media (max-width: 375px) and (min-height: 800px){
  .content-padding {
    padding-top: 8vh;
    padding-top: calc(var(--vh, 1vh) * 8);;
  }
}

.site-content img {
  width: 100%;
  opacity: 1;
}

.equal-padding {
  padding-left: 14rem;
  padding-right: 14rem;
}

.right-padding {
  padding-left: 6rem;
}

.left-padding {
  padding-right: 6rem;
}

.m-top {
  margin-top: 10vh;
}

.grid-m-bottom {
  margin-bottom: 27vh;
}

.m-bottom {
  margin-bottom: 0vh;
}

.text-padding {
  padding-left: 0rem;
  padding-right: 0rem;
}

@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1.5),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    .equal-padding {
      padding-left: 5rem;
      padding-right: 5rem;
    }
    .grid-m-bottom {
      margin-bottom: 15vh;
    }
}

@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1.5),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    .equal-padding {
      padding-left: 6rem;
      padding-right: 6rem;
    }
    .m-top {
      margin-top: 4vh;
    }
    .grid-m-bottom {
      margin-bottom: 15vh;
    }
}
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
    .site-content .equal-padding {
      padding-left: 2rem;
      padding-right: 2rem;
    }
  }


@media (max-width: 576px){
  .equal-padding {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
  .text-padding {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
  .right-padding {
    padding-left: 4.5rem;
  }
  .left-padding {
    padding-right: 4.5rem;
  }
  .m-top {
    margin-top: 0;
  }
  .grid-m-bottom {
    margin-bottom: 14vh;
    margin-bottom: calc(var(--vh, 1vh) * 14);;
  }
  .m-bottom {
    margin-bottom: 14vh;
    margin-bottom: calc(var(--vh, 1vh) * 14);;
  }
}

.prj-link {
  display: block;
  overflow: hidden;
  position: relative;
  cursor: none;
  will-change: transform, filter;
} 


.prj-link img {
  transition: transform 1.3s cubic-bezier(.59,.01,.28,1),opacity 1.3s cubic-bezier(.59,.01,.28,1);
  opacity: 1;
}

.prj-link:hover img {
  -moz-transform: scale(1.07);
  -webkit-transform: scale(1.07);
  transform: scale(1.07);
  opacity: .3;
}

.title {
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: -.01rem;
  text-transform: uppercase;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  transition: all .6s cubic-bezier(.165,.84,.44,1);
  transform: translateY(.5rem);
}

.prj-link:hover .title{
  opacity: 1;
  transform: translateY(-.5rem);
}

.tag {
  display: block;
  font-family: "NimbusSanExtD-Bol", sans-serif;
  font-weight: 700;
  line-height: 2.5rem;
  text-transform: uppercase;
  letter-spacing: .1rem;
  font-size: 1rem;
  position: absolute;
  bottom: 3rem;
  left: 0;
  width: 100%;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding-left: 0;
}

@media (max-width: 1024px){
  .title {
    font-size: 1.4rem;
  }
  .tag {
    display: none;
  }
}

@media (max-width: 576px){
  .title {
    display: none;
  }
  .tag {
    display: none;
  }
}

.tag li {
  list-style: none;
  display: inline;
  padding: 0 .8rem;
  opacity: 0;
  -webkit-transform: translate3d(0,1rem,0);
  transform: translate3d(0,1rem,0);
  transition: opacity .25s cubic-bezier(.59,.01,.28,1),transform .25s cubic-bezier(.59,.01,.28,1),-webkit-transform .25s cubic-bezier(.59,.01,.28,1);
}

.prj-link:hover .tag li:first-of-type + li {
  transition-delay: .1s;
}

.prj-link:hover .tag li:first-of-type + li + li {
  transition-delay: .15s;
}

.prj-link:hover li {
  opacity: 1;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

/*Start of next link*/
.next-link {
  width: 100vw;
  padding-bottom: 20vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.next-link svg {
  fill: #FFF;
  height: .6em;
  vertical-align: baseline;
}

.next-link-subtitle {
  font-family: "nimbus-sans-l",sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.3rem;
  letter-spacing: .1rem;
  text-transform: lowercase;
  line-height: 2.5rem;
  text-align: center;
  margin-bottom: 1.5rem;
  filter: opacity(100%);
  will-change: transform, filter;
  
}

.main-link {
  font-size: 2.8rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #FFF;
  -webkit-text-stroke: .5px transparent; 
  transition: color .6s cubic-bezier(.23,1,.32,1),-webkit-text-stroke-color .6s cubic-bezier(.23,1,.32,1);
  filter: opacity(100%);
  will-change: transform, filter;
}

.main-link:hover {
  color: transparent;
  -webkit-text-stroke: 1.2px #FFF; 
}

.copyright {
  font-family: "nimbus-sans-l",sans-serif;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  position: absolute;
  right: 6rem;
  bottom: 6.5rem;
  padding: 0;
  font-size: 1rem;
  letter-spacing: .15rem;
  opacity: .2;
  transition: opacity .6s cubic-bezier(.23,1,.32,1);
  cursor: default;
}

@media (min-width: 1025px){
.copyright:hover {
  opacity: 1;
  }
  wbr {
    display: none;
  }
}

@media (max-width: 1024px) {
  .copyright {
    bottom: 4.8rem;
  }
}

@media (max-width: 576px){
  .next-link {
    padding-top: 1rem;
    padding-bottom: 12rem;
  }
  .main-link {
    font-size: 2.2rem;
    width: 70vw;
    text-align: center;
    line-height: 2.9rem;
  }  
  .next-link-subtitle {
    margin-bottom: 1rem;
    font-size: 1.1rem;
  }
  .copyright {
    width: 30rem;
    position: absolute;
    right: calc(50vw - (30rem / 2));
    bottom: 4rem;
    font-size: .8rem;
    text-align: center;
    opacity: .5;
  }
}

/* Start of profile */
.profile {
  background: #FF4102;
}

.display-type-wrapper-1 {
  transform: rotate(-8deg);
  transform-origin: 50% 50%;
  z-index: 0;
}
.display-type-wrapper-2 {
  transform: rotate(-8deg);
  transform-origin: 50% 50%;
  z-index: 2;
}

.display-type {
  font-weight: 700;
  font-size: 14rem;
  letter-spacing: -.5rem;
  text-transform: uppercase;
  line-height: 15rem;
  white-space: nowrap;
  position: absolute;
  z-index: 1;
}
.type-top {
  bottom: 0;
  left: -55vw;
}
.type-bottom {
  top: 0;
  left: -60vw;
  z-index: 10;
}

@media (max-width: 576px){
  .display-type {
    font-size: 11rem;
    left: -70vw;
  }
  .type-top {
    bottom: -1rem;
  }
  .type-bottom {
    top: -1rem;
    left: -80vw;
  }
}
.img-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-img {
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.profile-img picture {
  width: 40%;
}

.profile-img img {
  width: 100%;
}

.profile {
  overflow: hidden;
}

.profile-description {
  font-family: "nimbus-sans-l",sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 2.6rem;
  line-height: 4rem;
  letter-spacing: .02rem;
  padding: 10vh 29vw 20vh 30vw;
}
.profile-description p {
  margin: 0;
}
.profile-description > :first-child {
  margin-bottom: 3rem;
}

@media (max-width: 1024px) and (orientation: portrait) {
  .profile-img {
    right: 0;
    bottom: 0;
  }
  .profile-img picture {
    width: 55%;
  }
  .profile-description {
    padding: 10vh 18vw 13vh 18vw;
  }
}
@media (max-width: 576px){
  .profile-img picture {
    width: 65%;
  }
  .profile-description {
    font-size: 1.8rem;
    line-height: 2.8rem;
    padding: 0 2.5rem;
    letter-spacing: .05rem;
    margin-top: 6rem;
    margin-bottom: 6rem;
  }
}

.translate-left-enter {
  opacity: 0;
  transform: translateX(-20px);
}
.translate-left-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: all 3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
/* Start of credits */
.credit-section {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #FF4102;
  z-index: 50;
  font-family: "nimbus-sans-l",sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 2.6rem;
  line-height: 4rem;
  letter-spacing: .02rem;
  text-align: center;
  padding: 0 28vw;
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}

.credits-dev {
  margin-top: 1rem;
}
.credits-dev, .credits-typography{
  margin-bottom: 1.5rem;
}
.credits-help{
  margin-bottom: 0;
}
.credits-dev {
  font-family: "titling-gothic-fb-extended", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 3rem;
}
.blink {
  animation: pulse infinite .6s;
  animation-timing-function: linear;
  animation-direction: alternate;
}

.smiley {
  fill: #FFF;
  width: 6vw;
  height: 6vw;
  position: fixed;
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
  transform-origin: 50% 50%;
}
.smiley-1 {
  top: 8vh;
  left: 40vw;
}
.smiley-2 {
  top: 28vh;
  right: 8vw;
}
.smiley-3 {
  bottom: 17vh;
  left: 12vw;
}

@media (max-width: 1024px) and (orientation: portrait){
  .credit-section {
    padding: 0 10vw;
  }
  .smiley {
    width: 8vw;
    height: 8vw;
  }
}

@media (max-width: 576px){
  .credit-section {
    padding: 0 3.5rem;
    font-size: 1.8rem;
    line-height: 2.8rem;
  }
  .credits-dev {
    font-size: 2rem; 
  }
  .smiley {
    width: 14vw;
    height: 14vw;
  }
  .smiley-1 {
    top: 9vh;
    left: 40vw;
  }
  .smiley-2 {
    top: 35vh;
    right: -5vw;
  }
  .smiley-3 {
    bottom: 8vh;
    left: 11vw;
  }
}

@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/*Start of Project Component Styling*/
.video-container {
  position: relative;
  padding-top: 56.25%;
}

iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.pos-rel {
  position: relative;
}

.hero-image-intro {
  margin-bottom: 14rem;
  position: relative;
  padding-top: 40vh;
  z-index: 0;
}

@media (max-width: 576px){
  .hero-image-intro {
    padding-top: calc(var(--vh, 1vh) * 40);;
    margin-bottom: 6rem;
  }
}

.intro-header {
  font-size: 2.8rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  margin: 0 auto;
  margin-bottom: 1.5rem;
  z-index: 2;
  position: relative;
  width: 45vw;
  letter-spacing: .03rem;
  cursor: default;
}

@media (max-width:1024px){
  .truncate span {
    text-shadow: none!important;
  }
  .intro-header {
    line-height: 3.9rem;
  }
}
@media (min-width: 1025px){
  .truncate {
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
  }
  
  .truncate:hover {
    text-overflow: inherit;
  }
  
  .truncate:hover span.animate-marquee {
    display: inline-block;
    animation: marquee 6s linear infinite;
  }
  
  .animate-marquee {
    padding-right: 60px;
  }
  
  @keyframes marquee {
    0% {
        transform: translate(0,0)
    }
  
    100% {
        transform: translate(-100%,0)
    }
  }
}

.intro-header-date {
  font-family: "nimbus-sans-l",sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.35rem;
  line-height: 2rem;
  letter-spacing: .1rem;
  text-align: center;
}

.intro-header-tags {
  font-family: "NimbusSanExtD-Bol", sans-serif;
  font-weight: 700;
  line-height: 2.5rem;
  text-transform: uppercase;
  letter-spacing: .1rem;
  font-size: 1rem;
  line-height: 2.1rem;
  text-align: center;
  margin-bottom: 6vh;
}

.intro-header-image {
  z-index: 1;
  position: relative;
}

.intro-header-image img{
  width: 100vw;
  object-fit: cover;
}

@media (max-width: 1024px){
  .intro-header {
    width: 80vw;
  }
}

@media (max-width: 576px){
  .intro-header {
    font-size: 2.4rem;
    line-height: 2.9rem;
    width: 85vw;
  }
  .intro-header-date {
    font-size: 1.2rem;
    line-height: 1.5rem;
  }
  
  .intro-header-tags {
    font-size: .9rem;
  }
  .intro-header-image img{
    height: 40rem;
  }
}

.hero-image-body img{
  width: 100vw;
  object-fit: cover;
}

.project-p-bottom {
  padding-bottom: 14rem;
}

@media (max-width: 576px){
  .project-p-bottom, .mobile-p{
    padding-bottom: 6rem;
  }
}

.slider-wrapper {
  position: relative;
  z-index: 1;
}

.nav-prev {
  position: absolute;
  top: 0;
  left: 0;
  height: calc(100% - 14rem);
  width: calc(50% - 14rem);
  margin-left: 14rem;
  z-index: 2;
  cursor: none;
}

.nav-next {
  position: absolute;
  top: 0;
  right: 0;
  height: calc(100% - 14rem);
  width: calc(50% - 14rem);
  margin-right: 14rem;
  z-index: 2;
  cursor: none;
}

.prev-cursor, .next-cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  pointer-events: none;
  opacity: 1;
}

@media only screen and (max-width: 1024px) {
  .prev-cursor, .next-cursor {
    display: none;
    opacity: 0;
    visibility: hidden;
  }
}

.cursor-svg {
  width: 26rem;
  margin-top: -13rem;
  margin-left: -13rem;
  fill: transparent;
  stroke: #FFF;
  stroke-width: 1.5px;
  pointer-events: none;
}

.img-index {
  font-family: "nimbus-sans-l",sans-serif;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 2.3rem;
  letter-spacing: .05rem;
  padding-top: 1.5rem;
  margin-left:auto;
  margin-right:0;
  margin-bottom: -3rem;
}

.fade-slide-enter-active, .fade-slide-leave-active {
  transition: opacity .5s ease-in-out;
}
.fade-slide-enter, .fade-slide-leave-to {
  opacity: 0;
}

img {
  max-width: 100%;
  display: block;
  height: auto;
}

.fade-enter-active, .fade-leave-active {
  transition: all 0.8s ease;
  overflow: hidden;
  visibility: visible;
  opacity: 1;
  position: absolute;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
  visibility: hidden;
}

.img-contain img {
  width: 100%;
  object-fit: cover;
}

.img-contain video {
  width: 100%;
}

.v-align {
  display: flex;
  align-items: center;
}

.body-text {
  font-family: "nimbus-sans-l",sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.5rem;
  line-height: 2.3rem;
  letter-spacing: .05rem;
}

@media (max-width: 576px){
  .nav-prev {
    height: calc(100% - 8rem);
    width: calc(50% - 2.5rem);
    margin-left: 2.5rem;
  }
  .nav-next {
    height: calc(100% - 8rem);
    width: calc(50% - 2.5rem);
    margin-right: 2.5rem;
  }

  .img-index {
    font-size: 1.1rem;
    padding-top: 1rem;
    margin-bottom: -2rem;
  }
  .body-text {
    font-size: 1.4rem;
    line-height: 2.2rem;
    letter-spacing: .05rem;
  }
}

.extra-info-subtitle {
  font-family: "NimbusSanExtD-Bol", sans-serif;
  font-weight: 700;
  line-height: 2.5rem;
  text-transform: uppercase;
  letter-spacing: .1rem;
  font-size: 1rem;
  line-height: 2.1rem;
}
.extra-info-caption {
  font-family: "nimbus-sans-l",sans-serif;
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 2rem;
  letter-spacing: .1rem;
}

.extra-info-caption a {
  opacity: 1;
  transition: opacity .3s ease;
}

.extra-info-caption a:hover {
  opacity: .4;
}

.extra-info-row {
  padding-bottom: 1rem;
}

.extra-info > :last-child {
  padding-bottom: 0;
}

/*404 Styling*/
.page-not-found-type-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  overflow: hidden;
  width: 100vw;
  height: calc(var(--vh, 1vh) * 100);
  position: relative;
}
.type-middle {
  font-weight: 700;
  font-size: 14rem;
  white-space: nowrap;
  position: absolute;
  z-index: 1;
  left: -55vw;
  top: -8rem;
  font-family: "titling-gothic-fb-extended-outline-6";
}
.large-404 {
  font-size: 29vw;
  color: #FF4102;
  cursor: default;
}
.page-not-found-type-container .display-type-wrapper-2{
  position: absolute;
}
.large-404-subtitle {
  font-family: "nimbus-sans-l",sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.35rem;
  line-height: 2rem;
  letter-spacing: .1rem;
  text-align: center;
  margin-top: -10rem;
}
@media only screen and (max-width: 576px) {
  .large-404 {
  font-size: 70vw;
  margin-top: 5rem;
  }
  .large-404-subtitle {
    margin-top: 0;
  }
  .type-middle {
    top: -6rem;
    font-size: 8rem;
  }
}
@media only screen and (max-width: 1024px) {
  .large-404 {
  font-size: 45vw;
  }
}
.marquee3k {
  cursor: default;
}
.marquee3k__copy {
  padding-right: 30px;
  box-sizing: border-box;
}