html {
        overflow-y: scroll;
        &.modal-active {
                overflow: hidden;
        }
}

body {
        box-sizing: border-box;
        background-color: black;
        position: relative;
        margin: 0;
        width: 100vw;
        height: 462vh;
        overflow-x: hidden;
        overflow-y: hidden;
        &.modal-active {
                overflow: hidden;
        }
        /* border: solid 2px orange; */
}

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

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

.panel::-webkit-scrollbar {
        display: none;
}

.hidden {
        display: none;
}

.firstContainer {
        height: 100vh;
        width: 100vw;
        position: relative;
        z-index: 100;
        background: url("/assets/KK_HOME_MOBILE.gif");
        /* background: url("/assets/KK_HOME_MOBILE.gif"); */
        background-size: cover;
        background-position: center;
        overflow: hidden;
        &.modal-active {
                overflow: hidden;
        }
}

#video-home {
        display: none;
}

.home {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        width: 90vw;
        height: 20px;
        margin: auto;
        position: absolute;
        top: 0; left: 0px; bottom: 0; right: 0;
        z-index: 9;
        /* border: solid 1px blue; */
}

.home > * {
        color: whitesmoke;
        font-family: 'din-2014';
        font-weight: 300;
        font-size: 12px;
        width: 120px;
        /* align-self: center; */
        /* border: solid 1px red;        */
}

.cursor-small-one {
        width: 6px;
        height: 10px;
        background-color: #f5f5f5;
        opacity: 1;
        animation: blinkCursor .7s linear infinite alternate, fade-me-out .2s ease-out normal forwards;
        -webkit-animation: blinkCursor .7s linear infinite alternate, fade-me-out .2s ease-out normal forwards;
        -moz-animation:    blinkCursor .7s linear infinite alternate, fade-me-out .2s ease-out normal forwards;
        -o-animation:      blinkCursor .7s linear infinite alternate, fade-me-out .2s ease-out normal forwards;
        -ms-animation:    blinkCursor .7s linear infinite alternate, fade-me-out .2s ease-out normal forwards; 
        animation-delay: 0.5s, 1.2s;
        -webkit-animation-delay: 0.5s, 1.2s;
        -moz-animation-delay: 0.5s, 1.2s;
        -o-animation-delay: 0.5s, 1.2s;
        -ms-animation-delay: 0.5s, 1.2s;
        margin-top: 2px;
}

#title-2 {
        position: relative;
        left: 50px;        
}

.cursor-small-two {
        width: 6px;
        height: 10px;
        background-color: #f5f5f5;
        opacity: 0;
        animation: blinkCursor .7s linear infinite alternate, fade-me-out .2s ease-out normal forwards;
        -webkit-animation: blinkCursor .7s linear infinite alternate, fade-me-out .2s ease-out normal forwards;
        -moz-animation:    blinkCursor .7s linear infinite alternate, fade-me-out .2s ease-out normal forwards;
        -o-animation:      blinkCursor .7s linear infinite alternate, fade-me-out .2s ease-out normal forwards;
        -ms-animation:    blinkCursor .7s linear infinite alternate, fade-me-out .2s ease-out normal forwards; 
        animation-delay: 1.4s, 1.7s;
        -webkit-animation-delay: 1.4s, 1.7s;
        -moz-animation-delay: 1.4s, 1.7s;
        -o-animation-delay: 1.4s, 1.7s;
        -ms-animation-delay: 1.4s, 1.7s;
        position: relative;
        left: 50px;
        margin-top: 2px;
}

#title-3 {
        position: relative;
        left: 35px;
}

.cursor-small-three {
        width: 6px;
        height: 10px;
        background-color: #f5f5f5;
        opacity: 0;
        animation: blinkCursor .7s linear infinite alternate;
        -webkit-animation: blinkCursor .7s linear infinite alternate;
        -moz-animation:    blinkCursor .7s linear infinite alternate;
        -o-animation:      blinkCursor .7s linear infinite alternate;
        -ms-animation:    blinkCursor .7s linear infinite alternate; 
        animation-delay: 2.3s;
        -webkit-animation-delay: 2.3s;
        -moz-animation-delay: 2.3s;
        -o-animation-delay: 2.3s;
        -ms-animation-delay: 2.3s;
        position: relative;
        left: 37px;
        margin-top: 2px;
}

.extra-info {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 80vw;
        height: 120px;
        margin: auto;
        position: absolute;
        top: 140px; left: -10px; bottom: 0; right: 0;
        z-index: 9;
}

.name-info {
        display: flex;
        flex-direction: column;
        gap: 4px;
        font-family: "din-2014";
        font-weight: 300;
        font-size: 12px;
        color: black;
        opacity: 0;
        height: 100px;
        width: 350px;
}

span {
        background-color: #f5f5f5;
        border: solid 1px #f5f5f5;
        width: 2px;
        opacity: 0;
}

/* #spacer-3f {
        margin-top: 10px;
}

#spacer-3r {
        margin-top: 10px;
} */

.test-box {
        display: flex;
        flex-direction: row;
}

.empty-div {
        width: 20px;
}

#name-line-1 {
        background-color: #f5f5f5;
        opacity: 0;
}

#name-line-2 {
        background-color: #f5f5f5;
        opacity: 0;
}

#name-line-3 {
        background-color: #f5f5f5;
        /* margin-top: 10px; */
        opacity: 0;
}

#name-line-4 {
        background-color: #f5f5f5;
        opacity: 0;
}


.location-info {
        display: flex;
        flex-direction: column;
        gap: 4px;
        font-family: "din-2014";
        font-weight: 300;
        font-size: 12px;
        color: black;
        opacity: 0;
        position: relative;
        left: 10px;
        width: 200px;
        position: relative;
}

#location-line-1 {
        background-color: #f5f5f5;
        opacity: 0;
}

#location-line-2 {
        background-color: #f5f5f5;
        opacity: 0;
}


.work-info {
        display: flex;
        flex-direction: column;
        gap: 4px;
        font-family: "din-2014";
        font-weight: 300;
        font-size: 12px;
        color: black;
        opacity: 0;
        position: relative;
        left: 50px;
        width: 250px;
        position: relative;
}

#work-line-1 {
        background-color: #f5f5f5;
        opacity: 0;
}

#work-line-2 {
        background-color: #f5f5f5;
        opacity: 0;
}

#work-line-3 {
        background-color: #f5f5f5;
        opacity: 0;
}

#work-line-4 {
        background-color: #f5f5f5;
        opacity: 0;
}

.mobile-container {
        position: relative;
        height: 362vh;
        /* border: solid 1px red; */
        overflow-y: hidden;
        &.leave {
                animation: fadeOut .75s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
        }
        &.comeBack {
                animation: fadeIn .75s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
        }
        &.modal-active {
                overflow: hidden;
        }
}

.titles-mobile {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        gap: 100px;
        font-family: "din-2014";
        font-weight: 300;
        font-size: 12px;
        color: whitesmoke;
        height: 250vh;
        position: relative;
        margin: auto;
        top: 10vh;
        z-index: 999;
        /* border: solid 2px blue; */
        overflow-y: hidden;
}

.contact-container {
        height: 102vh;
        position: relative;
        top: 10vh;
        opacity: 0;
        /* border: solid 1px fuchsia; */
        overflow: hidden;
}

.contact {
        height: fit-content;
        width: 100vw;
        position: relative;
        top: 85%;
        /* left: 50%; */

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        /* position: relative; */
        /* top: 300px; */
        /* left: -20px; */
        /* gap: 10px; */
        /* margin-left: 20vw; */
        /* margin-right: 63vw; */
        /* opacity: 1; */
        font-family: "din-2014";
        font-weight: 300;
        font-size: 12px;
        color: whitesmoke;
        
        /* background: green; */
}

.contact > * {
        z-index: 999999;
}

.disable-hover {
        pointer-events: none;
}

/* .temp {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        gap: 10px;
        width: 250px;
        height: 66px;
        position: fixed;
        top: 87vh;
        left: calc(200vw - 31px);
        margin-left: 20vw;
        margin-right: 63vw;
        opacity: 0;
} */

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

.fullscreen-gif {
        background: url('/assets/LOGO_MOBILE.gif');
        background-size: cover;
        background-position: center;
        opacity: 1;
        height: 100vh;
        width: 100vw;
        position: absolute;
        /* top: -20vh; */
        z-index: -1;
}

#work-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        z-index: 9999;
}

.vimeo-player-mobile {
        opacity: 0;
        height: 50vw;
        width: 70vw;
        position: fixed;
        left: 15vw;
        top: 6vh;
        z-index: -999;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;

}

iframe {
        height: 100%;
        width: 100%;
        position: relative;
}

/* .information {
        display: flex;
        flex-direction: column;
        gap: 2px;
        position: relative;
        margin: auto;
        left: -14.5vw;
        top: calc(-1vw);
        font-family: "din-2014";
        font-weight: 300;
        font-size: 12px;
        color: whitesmoke;
        opacity: 0.5;
        width: 40vw;
        height: 10vh;
        
} */

.contact-gif {
        opacity: 0;
        height: 100vh;
        width: 100vw;
        position: fixed;
        z-index: -1;
}

.reel {
        color: whitesmoke;
        font-family: 'din-2014';
        font-weight: 700;
        font-size: 12px; 
}

.title-container {
        display: flex;
        flex-direction: row;
        /* justify-content: center;
        align-items: center; */
        font-family: 'din-2014', sans-serif;
        font-weight: 300;
        font-size: 12px;
}

.x {
        display: none;
}

.container {
        display: none;
}

.test-box-project {
        display: flex;
        flex-direction: row;
        color: black;
        cursor: pointer;
        /* position: relative;
        z-index: 99999999; */
}

.test-box-project > div {
        background-color: #f5f5f5;
        opacity: 0;
}


.shrink {
        animation: shrink 0.1s ease-out forwards;
}

.hide-no-shrink {
        animation: hideImage 0.5s forwards ease, shrink 0s ease-out forwards;
        /* transform: scale(0.035); */
}

.reveal-no-shrink {
        animation: revealImage 0.5s forwards ease, shrink 0s ease-out forwards;
}

.no-shrink {
        animation: shrink 0s ease-out forwards;
}



.blur {
        animation: blur 1s linear forwards;
}

.unblur {
        animation: unblur 1s linear forwards;
}

.reveal-image {
        -webkit-animation: revealImage 2s forwards ease;
        -moz-animation:    revealImage 2s forwards ease;
        -o-animation:      revealImage 2s forwards ease;
        -ms-animation:    revealImage 2s forwards ease;
        animation:         revealImage 2s forwards ease;
}
    
.hide-image {
        -webkit-animation: hideImage 2s forwards ease;
        -moz-animation:    hideImage 2s forwards ease;
        -o-animation:      hideImage 2s forwards ease;
        -ms-animation:    hideImage 2s forwards ease; 
        animation:         hideImage 2s forwards ease;
}


.reveal-image-fast {
        -webkit-animation: revealImage 0.5s forwards ease;
        -moz-animation:    revealImage 0.5s forwards ease;
        -o-animation:      revealImage 0.5s forwards ease;
        -ms-animation:    revealImage 0.5s forwards ease;
        animation:         revealImage 0.5s forwards ease;
}
    
.hide-image-fast {
        -webkit-animation: hideImage 0.5s forwards ease;
        -moz-animation:    hideImage 0.5s forwards ease;
        -o-animation:      hideImage 0.5s forwards ease;
        -ms-animation:    hideImage 0.5s forwards ease; 
        animation:         hideImage 0.5s forwards ease;
}

@keyframes unfoldIn {
        0% {
          transform:scaleY(.005) scaleX(0);
        }
        50% {
          transform:scaleY(.005) scaleX(1);
        }
        100% {
          transform:scaleY(1) scaleX(1);
        }
      }
      
      @keyframes unfoldOut {
        0% {
          transform:scaleY(1) scaleX(1);
        }
        50% {
          transform:scaleY(.005) scaleX(1);
        }
        100% {
          transform:scaleY(.005) scaleX(0);
        }
      }
      
      @keyframes zoomIn {
        0% {
          transform:scale(0);
        }
        100% {
          transform:scale(1);
        }
      }
      
      @keyframes zoomOut {
        0% {
          transform:scale(1);
        }
        100% {
          transform:scale(0);
        }
      }
      
      @keyframes fadeIn {
        0% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }
      
      @keyframes fadeOut {
        0% {
          opacity: 1;
        }
        100% {
          opacity: 0;
        }
      }
      
      @keyframes scaleUp {
        0% {
          transform:scale(.8) translateY(1000px);
          opacity:0;
        }
        100% {
          transform:scale(1) translateY(0px);
          opacity:1;
        }
      }
      
      @keyframes scaleDown {
        0% {
          transform:scale(1) translateY(0px);
          opacity:1;
        }
        100% {
          transform:scale(.8) translateY(1000px);
          opacity:0;
        }
      }
      
      @keyframes scaleBack {
        0% {
          transform:scale(1);
        }
        100% {
          transform:scale(.85);
        }
      }
      
      @keyframes scaleForward {
        0% {
          transform:scale(.85);
        }
        100% {
          transform:scale(1);
        }
      }
      
      @keyframes quickScaleDown {
        0% {
          transform:scale(1);
        }
        99.9% {
          transform:scale(1);
        }
        100% {
          transform:scale(0);
        }
      }
      
      @keyframes slideUpLarge {
        0% {
          transform:translateY(0%);
        }
        100% {
          transform:translateY(-100%);
        }
      }
      
      @keyframes slideDownLarge {
        0% {
          transform:translateY(-100%);
        }
        100% {
          transform:translateY(0%);
        }
      }
      
      @keyframes moveUp {
        0% {
          transform:translateY(0);
        }
        100% {
          transform:translateY(-100vh);
        }
      }
      
      @keyframes moveDown {
        0% {
          transform:translateY(0px);
        }
        100% {
          transform:translateY(100vh);
        }
      }
      
      @keyframes blowUpContent {
        0% {
          transform:scale(1);
          opacity:1;
        }
        99.9% {
          transform:scale(2);
          opacity:0;
        }
        100% {
          transform:scale(0);
        }
      }
      
      @keyframes blowUpContentTwo {
        0% {
          transform:scale(2);
          opacity:0;
        }
        100% {
          transform:scale(1);
          opacity:1;
        }
      }
      
      @keyframes blowUpModal {
        0% {
          transform:scale(0);
        }
        100% {
          transform:scale(1);
        }
      }
      
      @keyframes blowUpModalTwo {
        0% {
          transform:scale(1);
          opacity:1;
        }
        100% {
          transform:scale(0);
          opacity:0;
        }
      }
      
      @keyframes roadRunnerIn {
        0% {
          transform:translateX(-1500px) skewX(30deg) scaleX(1.3);
        }
        70% {
          transform:translateX(30px) skewX(0deg) scaleX(.9);
        }
        100% {
          transform:translateX(0px) skewX(0deg) scaleX(1);
        }
      }
      
      @keyframes roadRunnerOut {
        0% {
          transform:translateX(0px) skewX(0deg) scaleX(1);
        }
        30% {
          transform:translateX(-30px) skewX(-5deg) scaleX(.9);
        }
        100% {
          transform:translateX(1500px) skewX(30deg) scaleX(1.3);
        }
      }
      
      @keyframes sketchIn {
              0% {
                      stroke-dashoffset: 778;
              }
              100% {
                      stroke-dashoffset: 0;
              }
      }
      
      @keyframes sketchOut {
              0% {
                      stroke-dashoffset: 0;
              }
              100% {
                      stroke-dashoffset: 778;
              }
      }
      
      @keyframes modalFadeIn {
        0% {
          background-color:transparent;
        }
        100% {
          background-color:white;
        }
      }
      
      @keyframes modalFadeOut {
        0% {
          background-color:white;
        }
        100% {
          background-color:transparent;
        }
      }
      
      @keyframes modalContentFadeIn {
        0% {
          opacity:0;
          top:-20px;
        }
        100% {
          opacity:1;
          top:0;
        }
      }
      
      @keyframes modalContentFadeOut {
        0% {
          opacity:1;
          top:0px;
        }
        100% {
          opacity:0;
          top:-20px;
        }
      }
      
      @keyframes bondJamesBond {
        0% {
          transform:translateX(1000px);
        }
        80% {
          transform:translateX(0px);
          border-radius:75px;
          height:75px;
          width:75px;
        }
        90% {
          border-radius:3px;
          height:182px;
          width:247px;
        }
        100% {
          border-radius:3px;
          height:162px;
          width:227px;
        }
      }
      
      @keyframes killShot {
        0% {
          transform:translateY(0) rotate(0deg);
          opacity:1;
        }
        100% {
          transform:translateY(300px) rotate(45deg);
          opacity:0;
        }
      }
      
      @keyframes fadeToRed {
        0% {
          background-color:rgba(black,.6);
        }
        100% {
          background-color:rgba(red,.8);
        }
      }
      
      @keyframes slowFade {
        0% {
          opacity:1;
        }
        99.9% {
          opacity:0;
          transform:scale(1);
        }
        100% {
          transform:scale(0);
        }
      }

      #modal-container {
        /* position:fixed; */
        /* position: relative; */
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        height: 100vh;
        width: 100vw;
        /* top: 100vh; */
        /* left: 0; */
        /* transform:scale(1); */
        /* z-index: 9999; */
        /* border: solid 1px red; */
        &.on {
                z-index: 888;
                /* transform: scale(1); */
                animation: fadeIn .75s cubic-bezier(0.12, 0.960, 0.110, 1.000) forwards;
                /* animation: fadeIn 3s  cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards; fadeIn 2s  cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards */
                .background {
                  background:rgba(0,0,0,0);

                  .content {
                    animation: fadeIn .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
                  }
                }
                + .content {
                  z-index:1;
                  animation: fadeOut .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
                }
                &.out {
                  .modal-background {
                    .modal {
                      animation: fadeOut .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
                    }
                  }
                  + .content {
                    animation: fadeIn .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
                  }
                }
        }
        .modal-background {
                display:table-cell;
                background:rgba(0,0,0,0);
                position: relative;
                text-align:center;
                vertical-align:middle;
                width: 500px;
                max-width: 500px;
                height: 500px;
                max-height: 500px;
                .modal {
                  height: 100%;
                  width: 100%;
                };
        }
}

@media only screen and (min-width: 500px) {
        



        .mobile-container {
                display: none;
        }
        .vimeo-player-mobile {
                display: none;
        }
        html {
                overflow-y: scroll;
                height: 100%;
                -webkit-overflow-scrolling: touch;
                overflow-scrolling: touch;
                &.modal-active {
                        overflow: hidden;
                }
        }
        body {
                overflow-y: visible;
                position: relative;
                height: unset;
                width: unset;
                cursor: crosshair;
                &.modal-active {
                        overflow: hidden;
                }
        }
        html, body {
                overflow-x: hidden;
                margin: 0;
        }
        
        .firstContainer {
                height: 100vh;
                width: 100vw;
                position: absolute;
                z-index: 100;
                background: none;
        }
        
        #video-home {
                display: block;
                position: absolute;
                width: 100vw;
                height: 100vh;
                object-fit: cover;
                object-position: center;
                padding: 0;
                margin: 0;
        }
        
        .home {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                width: 75vw;
                height: 20px;
                margin: auto;
                position: absolute;
                top: 0; left: 0px; bottom: 0; right: 0;
                z-index: 9;
        }
        
        .home > * {
                color: whitesmoke;
                font-family: 'din-2014';
                font-weight: 300;
                font-size: 12px;
                width: 120px;        
        }
        
        .cursor-small-one {
                width: 6px;
                height: 10px;
                background-color: #f5f5f5;
                opacity: 1;
                animation: blinkCursor .7s linear infinite alternate, fade-me-out .2s ease-out normal forwards;
                -webkit-animation: blinkCursor .7s linear infinite alternate, fade-me-out .2s ease-out normal forwards;
                -moz-animation:    blinkCursor .7s linear infinite alternate, fade-me-out .2s ease-out normal forwards;
                -o-animation:      blinkCursor .7s linear infinite alternate, fade-me-out .2s ease-out normal forwards;
                -ms-animation:    blinkCursor .7s linear infinite alternate, fade-me-out .2s ease-out normal forwards; 
                animation-delay: 0.5s, 1.2s;
                -webkit-animation-delay: 0.5s, 1.2s;
                -moz-animation-delay: 0.5s, 1.2s;
                -o-animation-delay: 0.5s, 1.2s;
                -ms-animation-delay: 0.5s, 1.2s;
                margin-top: 2px;
        }
        
        #title-2 {
                position: relative;
                left: 50px;        
        }
        
        .cursor-small-two {
                width: 6px;
                height: 10px;
                background-color: #f5f5f5;
                opacity: 0;
                animation: blinkCursor .7s linear infinite alternate, fade-me-out .2s ease-out normal forwards;
                -webkit-animation: blinkCursor .7s linear infinite alternate, fade-me-out .2s ease-out normal forwards;
                -moz-animation:    blinkCursor .7s linear infinite alternate, fade-me-out .2s ease-out normal forwards;
                -o-animation:      blinkCursor .7s linear infinite alternate, fade-me-out .2s ease-out normal forwards;
                -ms-animation:    blinkCursor .7s linear infinite alternate, fade-me-out .2s ease-out normal forwards; 
                animation-delay: 1.4s, 1.7s;
                -webkit-animation-delay: 1.4s, 1.7s;
                -moz-animation-delay: 1.4s, 1.7s;
                -o-animation-delay: 1.4s, 1.7s;
                -ms-animation-delay: 1.4s, 1.7s;
                position: relative;
                left: 50px;
                margin-top: 2px;
        }
        
        #title-3 {
                position: relative;
                left: 50px;
        }
        
        .cursor-small-three {
                width: 6px;
                height: 10px;
                background-color: #f5f5f5;
                opacity: 0;
                animation: blinkCursor .7s linear infinite alternate;
                -webkit-animation: blinkCursor .7s linear infinite alternate;
                -moz-animation:    blinkCursor .7s linear infinite alternate;
                -o-animation:      blinkCursor .7s linear infinite alternate;
                -ms-animation:    blinkCursor .7s linear infinite alternate; 
                animation-delay: 2.3s;
                -webkit-animation-delay: 2.3s;
                -moz-animation-delay: 2.3s;
                -o-animation-delay: 2.3s;
                -ms-animation-delay: 2.3s;
                position: relative;
                left: 52px;
                margin-top: 2px;
        }
        
        .extra-info {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                width: 75vw;
                height: 60px;
                margin: auto;
                position: absolute;
                top: 90px; left: 10px; bottom: 0; right: 0;
                z-index: 9;
        }
        
        .name-info {
                display: flex;
                flex-direction: column;
                gap: 4px;
                font-family: "din-2014";
                font-weight: 300;
                font-size: 12px;
                color: black;
                opacity: 0;
                height: 100px;
                width: 340px;
        }
        
        span {
                background-color: #f5f5f5;
                border: solid 1px #f5f5f5;
                width: 2px;
                opacity: 0;
        }
        
        /* #spacer-3f {
                margin-top: 10px;
        }
        
        #spacer-3r {
                margin-top: 10px;
        } */
        
        .test-box {
                display: flex;
                flex-direction: row;
        }
        
        .empty-div {
                width: 50px;
        }
        
        #name-line-1 {
                background-color: #f5f5f5;
                opacity: 0;
        }
        
        #name-line-2 {
                background-color: #f5f5f5;
                opacity: 0;
        }
        
        #name-line-3 {
                background-color: #f5f5f5;
                /* margin-top: 10px; */
                opacity: 0;
        }
        
        #name-line-4 {
                background-color: #f5f5f5;
                opacity: 0;
        }
        
        
        .location-info {
                display: flex;
                flex-direction: column;
                gap: 4px;
                font-family: "din-2014";
                font-weight: 300;
                font-size: 12px;
                color: black;
                opacity: 0;
                position: relative;
                left: 10px;
                width: 200px;
                position: relative;
        }
        
        #location-line-1 {
                background-color: #f5f5f5;
                opacity: 0;
        }
        
        #location-line-2 {
                background-color: #f5f5f5;
                opacity: 0;
        }
        
        
        .work-info {
                display: flex;
                flex-direction: column;
                gap: 4px;
                font-family: "din-2014";
                font-weight: 300;
                font-size: 12px;
                color: black;
                opacity: 0;
                position: relative;
                left: 108px;
                width: 180px;
                position: relative;
        }
        
        #work-line-1 {
                background-color: #f5f5f5;
                opacity: 0;
        }
        
        #work-line-2 {
                background-color: #f5f5f5;
                opacity: 0;
        }
        
        #work-line-3 {
                background-color: #f5f5f5;
                opacity: 0;
        }
        
        #work-line-4 {
                background-color: #f5f5f5;
                opacity: 0;
        }
        
        .container {
                width: 320vw;
                /* width: 11000px;
                max-width: 11000px; */
                height: 100vh !important;
                max-height: 100vh !important;
                display: flex;
                flex-wrap: nowrap;
                background: black;
                position: relative;
                overflow-y: hidden;
        }

        .pin-spacer {
                /* height: 100vh !important; */
                width: 320vw !important;
        }
        
        .panel {
                width: 11000px;
                height: 100vw;
                position: fixed;
                background: transparent;
                &.behind {
                        z-index: -999;
                }
                &.infront {
                        z-index: 999;
                }
                
        }

        
        .red {
                height: 100vh;
                width: max(320vw, 2700px);
                left: 118vw;
        }
        
        .titles {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                gap: 32px;
                font-family: "din-2014";
                font-weight: 300;
                font-size: 12px;
                color: whitesmoke;
                width: 200vw;
                position: fixed;
                margin: auto;
                top: 50vh;
                z-index: 999999999;
        }

        .titles > * {
                min-width: fit-content;
        }

        .project-info {
                width: 130px;
                height: 50px;
                position: absolute;
                top: 30px;
        }

        .test-box-project {
                display: flex;
                flex-direction: row;
                color: black;
                cursor: pointer;
                position: relative;
                /* z-index: 99999999; */
        }

        .test-box-project > div {
                background-color: #f5f5f5;
                border: solid 2px #f5f5f5;
                opacity: 0;
                /* position: relative;
                z-index: 9999999;
                cursor: pointer; */
        }

        #line-2 {
                margin-top: 4px;
        }
        
        .contact-container-desktop {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: flex-start;
                font-family: "din-2014";
                font-weight: 300;
                font-size: 12px;
                color: whitesmoke;
                gap: -2px;
                width: 216px;
                height: 30px;
                position: absolute;
                margin-top: 11px;
                opacity: 0;
        }
        

        .contact-box {
                height: 100vh;
                width: 100vw;
                position: fixed;
                display: flex;
                flex-direction: row-reverse;
                align-items: center;
                justify-content: center;

        }

        .logo {
                height: 100%;
                width: 100%;
                position: absolute;
                top: 0;
                opacity: 0;
        }

        #logo-video {
                width: 100%;
                height: 100%;
                object-fit: cover;
                position: absolute;
        }
        
        a {
                text-decoration: none;
                color: #f5f5f5;
                cursor: pointer;
        }
        
        .fullscreen-gif {
                opacity: 1;
                background: none;
                height: 100vh;
                width: 100vw;
                position: fixed;
                z-index: -1;
                top: 0;
        }
        
        #work-video {
                width: 100%;
                height: 100%;
                object-fit: cover;
                position: absolute;
                z-index: 9999;
        }
        
        .vimeo-player {
                opacity: 0;
                height: 80vh;
                width: 80vw;
                position: fixed;
                left: 10vw;
                top: 8vh;
                z-index: -999;
                display: flex;
                gap: 20px;
                flex-direction: column;
                align-items: center;
                justify-content: center;        
        }
        
        iframe {
                height: 100%;
                width: 100%;
        }
        
        .x {
                display: block;
                position: fixed;
                z-index: 999999; 
                height: 50px;
                width: 50px;
                top: 0px;
                left: calc(100vw - 30px);
                padding-top: 10px;
                opacity: 0;
        }
        
        .information {
                display: flex;
                flex-direction: column;
                gap: 2px;
                position: relative;
                font-family: "din-2014";
                font-weight: 300;
                font-size: 12px;
                color: whitesmoke;
                opacity: 0.5;
                width: 95%;
                height: 15%;
                
        }
        
        .contact-gif {
                opacity: 0;
                height: 100vh;
                width: 100vw;
                position: fixed;
                z-index: -1;
        }
        
        .reel {
                color: whitesmoke;
                font-family: 'din-2014';
                font-weight: 700;
                font-size: 12px; 
        }
        
        .title-container {
                display: flex;
                flex-direction: row;
                font-family: 'din-2014', sans-serif;
                font-weight: 300;
                font-size: 12px;
        }
}


@keyframes shrink {
        0% {transform: scale(1);}
        25% {transform: scale(0.6);}
        75% {transform: scale(0.4);}
        100% {transform: scale(0.075);}
}




@keyframes revealImage {
        from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
}

@-webkit-keyframes revealImage {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
}

@-moz-keyframes revealImage {
        from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
}

@-o-keyframes revealImage {
        from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
}

@-ms-keyframes revealImage {
        from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
}


@keyframes hideImage {
        from {
                opacity: 1;
            }
            to {
                opacity: 0;
            }
}
      
@-webkit-keyframes hideImage {
        from {
            opacity: 1;
        }
        to {
            opacity: 0;
        }
}

@-moz-keyframes hideImage {
        from {
                opacity: 1;
            }
            to {
                opacity: 0;
            }
}

@-o-keyframes hideImage {
        from {
                opacity: 1;
            }
            to {
                opacity: 0;
            }
}

@-ms-keyframes hideImage {
        from {
                opacity: 1;
            }
            to {
                opacity: 0;
            }
}


@keyframes blur {
        0% {filter: blur(0px)}
        25% {filter: blur(0.5px)}
        75% {filter: blur(1px)}
        100% {filter: blur(1.5px)}
}

@-webkit-keyframes blur {
        0% {filter: blur(0px)}
        25% {filter: blur(0.5px)}
        75% {filter: blur(1px)}
        100% {filter: blur(1.5px)} 
}

@-moz-keyframes blur {
        0% {filter: blur(0px)}
        25% {filter: blur(0.5px)}
        75% {filter: blur(1px)}
        100% {filter: blur(1.5px)} 
}

@-o-keyframes blur {
        0% {filter: blur(0px)}
        25% {filter: blur(0.5px)}
        75% {filter: blur(1px)}
        100% {filter: blur(1.5px)} 
}

@-ms-keyframes blur {
        0% {filter: blur(0px)}
        25% {filter: blur(0.5px)}
        75% {filter: blur(1px)}
        100% {filter: blur(1.5px)} 
}




@keyframes unblur {
        0% {filter: blur(1.5px)}
        25% {filter: blur(1px)}
        75% {filter: blur(0.5px)}
        100% {filter: blur(0px)}
}

@-webkit-keyframes unblur {
        0% {filter: blur(1.5px)}
        25% {filter: blur(1px)}
        75% {filter: blur(0.5px)}
        100% {filter: blur(0px)}
}

@-moz-keyframes unblur {
        0% {filter: blur(1.5px)}
        25% {filter: blur(1px)}
        75% {filter: blur(0.5px)}
        100% {filter: blur(0px)}
}

@-o-keyframes unblur {
        0% {filter: blur(1.5px)}
        25% {filter: blur(1px)}
        75% {filter: blur(0.5px)}
        100% {filter: blur(0px)}
}

@-ms-keyframes unblur {
        0% {filter: blur(1.5px)}
        25% {filter: blur(1px)}
        75% {filter: blur(0.5px)}
        100% {filter: blur(0px)}
}




@keyframes blinkCursor {
        0% {opacity: 1;}
        40% {opacity: 1;}
        60% {opacity: 0;}
        100% {opacity: 0;}
}

@-webkit-keyframes blinkCursor {
        0% {opacity: 1;}
        40% {opacity: 1;}
        60% {opacity: 0;}
        100% {opacity: 0;}
}

@-moz-keyframes blinkCursor {
        0% {opacity: 1;}
        40% {opacity: 1;}
        60% {opacity: 0;}
        100% {opacity: 0;}
}

@-o-keyframes blinkCursor {
        0% {opacity: 1;}
        40% {opacity: 1;}
        60% {opacity: 0;}
        100% {opacity: 0;}
}

@-ms-keyframes blinkCursor {
        0% {opacity: 1;}
        40% {opacity: 1;}
        60% {opacity: 0;}
        100% {opacity: 0;}
}


@-webkit-keyframes fade-me-out {
        0% {
                opacity: 1;
            }
        
            100% {
                z-index: 0;
                opacity: 0;
            }
}

@keyframes fade-me-out {
        0% {
            opacity: 1;
        }
    
        100% {
            z-index: 0;
            opacity: 0;
        }
}



@-moz-keyframes fade-me-out {
        0% {
                opacity: 1;
            }
        
            100% {
                z-index: 0;
                opacity: 0;
            }
}

@-o-keyframes fade-me-out {
        0% {
                opacity: 1;
            }
        
            100% {
                z-index: 0;
                opacity: 0;
            }
}

@-ms-keyframes fade-me-out {
        0% {
                opacity: 1;
            }
        
            100% {
                z-index: 0;
                opacity: 0;
            }
}