html, body {margin: 0; height: 100%; overflow-x: hidden; overflow-y:auto;}


/* Webfont: Nohemi-ExtraLight */@font-face {
  font-family: 'NohemiExtLt';
  src: 
       url('src/fonts/Nohemi-Light.woff') format('woff'), /* Modern Browsers */
       url('src/fonts/Nohemi-Light.woff2') format('woff2'), /* Modern Browsers */
       url('src/fonts/Nohemi-Light.ttf') format('truetype'); /* Safari, Android, iOS */
           font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}

/* Webfont: Nohemi-Regular */@font-face {
  font-family: 'Nohemi';
  src: url('src/fonts/Nohemi-Medium.woff') format('woff'), /* Modern Browsers */
       url('src/fonts/Nohemi-Medium.woff2') format('woff2'), /* Modern Browsers */
       url('src/fonts/Nohemi-Medium.ttf') format('truetype'); /* Safari, Android, iOS */
           font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}

/* Webfont: Nohemi-Bold */@font-face {
  font-family: 'NohemiBold';
  src: url('src/fonts/Nohemi-Bold.woff') format('woff'), /* Modern Browsers */
       url('src/fonts/Nohemi-Bold.woff2') format('woff2'), /* Modern Browsers */
       url('src/fonts/Nohemi-Bold.ttf') format('truetype'); /* Safari, Android, iOS */
           font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}


body {
    background-color: #ed1c24;
    font-family: 'Inclusive Sans', sans-serif;
    font-family:'Nohemi';
    color: white;
  }
  
  h1 {
    color: white;
    text-align: center;
  }
  

  .test{
    display:block;
    position: fixed;
    width: 50vw;
    left:25vw;
    top:65vh;
    color: aliceblue;
    font-size: 1.5em;
    text-align: center;
    
  }

  #text-bio{
    font-size: 5vh;
    line-height: 4.5vh;
    display: block;
    position: fixed;
    height: auto;
    width: 60%;
    bottom:20px;
    
    margin: 30px;
    font-family: 'Nohemi';
  }
  #text-bio p{
    font-size: 2.5vh;
    margin-top: 0.5vh;
    margin-bottom: 0;
    margin-left: 0;
    font-family: 'NohemiExtLt';
    line-height: 2.5vh;
  }


  #loading{
    position: fixed;
    display: block;
    width: 100px;
    height:100px;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    background-image: url('src/loading.svg');
    background-repeat: no-repeat;
    background-size: contain;
  }
  #loading-bar{
    width:0%;
    height:5px;
    display: block;
    position: fixed;
    background-color: white;
  }

  #scrollSection{
    width: 10px;
    height:3080px;
  }

  #container{
    width: 100vw;
    height: 100vh;
    display: block;
    position: fixed;
    
  }
  #background{
    width: 100%;
    top:0;
    height: 300vh;
    z-index: -100;
    position: fixed;
    display: block;
    background-image: linear-gradient(red,red, orange, blue, pink, orange, red, red);
  }
  #projectWindow{
    width: 100%;
    height: 80vh;
    display: block;
    position: fixed;
    z-index: -20;
    top:5vh;
    
  }
  #back_button{
    width: 60px;
    height: 60px;
    display: block;
    position: absolute;
    left:15vw;
    top:50%;
    transform: translate(0%, -50%);
    background-image: url('src/back-btn.svg');
    mix-blend-mode: difference;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 100;

  }
  #nowViewing{
    width: 100%;
    height: 50px;
    bottom: 0%;
    display: block;
    position: absolute;
    text-align: center;
    font-family: 'NohemiExtLt';
    font-size: 1em;
    opacity: 0.9;
    user-select: none;
    color: white;

  }
  #nowViewingNavCircles{
    position: absolute;
    display: block;
    background-image: url('src/nav-dot.png');
    background-position:0; 
    background-size: 25px;
    background-repeat: repeat-x;
    height:25px;
    width:230px;
    bottom: 0%;
    left: 50%;
    transform: translate(-50%, 0%);
    opacity: 0.5;
  }
  #nowViewing_CurrentCircle{
    position: absolute;
    display: block;
    background-image: url('src/nav-dot.png');
    background-position: center;
    background-size: 25px;
    height:25px;
    width:25px;
    left: 50%;
    bottom: 0%;
    transform: translate(-50%, 0%);

  }

  #projectContent{
    display: block; 
    position: absolute;
    width: 65%;
    max-width: 1200px;
    min-width: 900px;
    height: 75%;
    left: 50%;
    transform: translate(-50%, 0%);
    top:10%;
    align-items: center;
    justify-content: center;
    
    transform-style: preserve-3d;
    perspective: 2000px;
    
  }
  #projectImage{
    height: 100%;
    width: 50%;
    right:0%;
    background-size: cover;
    background-position: center;
    display: block;
    position: absolute;
    z-index: -15;
    background-image: url('src/projects/nandos/Machopea-action-shot-2.png');


  }

  .zine-page{
    position: absolute;
    display: block;
    height: 60vh;
    width: 42.5vh;

    z-index: 100;
    
    background-size:contain;
    background-position: center;

    perspective: 1000px;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    background-color: #ed1c24;

  

  }
  .zine-page video{
    object-fit: cover;
    width: 100%;
    height: 100%;
  }


  #zine-page-right{
    z-index: 103;
    border-left: 1px solid black;

  }
  #zine-page-right-back{
    pointer-events: none;
    border-right: 1px solid black;

  }
  #zine-page-right-behind{
    z-index: 101;
    pointer-events: none;
    border-left: 1px solid black;
  }

  #zine-page-left{
    z-index: 103;
    border-right: 1px solid black;
    
  }
  #zine-page-left-back{
    pointer-events: none;
    border-left: 1px solid black;
    
  }
  #zine-page-left-behind{
    z-index: 101;
    pointer-events: none;
    border-right: 1px solid black;  
  }

  .zine-book-depth{
    position: absolute;
    display: block;
    height: 60vh;
    width: 10vh;
    background-color: #ed1c24;
    z-index: 99;
    perspective: 1000px;
    border: 2px solid #b4ac91;
    box-sizing: border-box;
    background-repeat: repeat;

    

  }

  #zine-book-depth-leftcentre{
    opacity: 1;
    background-color: #fff295;
  }

  #zine-book-depth-leftbottom, #zine-book-depth-lefttop, #zine-book-depth-rightbottom, #zine-book-depth-righttop{
    background-image: url('src/zine-depth-page-horizontal.png');
    background-position: 0 10px;
    
  }
  #zine-book-depth-leftcentre, #zine-book-depth-rightcentre{
    background-image: url('src/zine-depth-page.png');

      

  }

  #zine-book-depth-leftbottom{
    opacity: 1;
    background-color:orange;
    width: 45.0vh;
    height: 10vh;
    clip-path: polygon(0% 0%, 6% 100%, 100% 100%, 100% 0%);
  }
  #zine-book-depth-lefttop{
    opacity: 1;
    background-color:orange;
    width: 45.0vh;
    height: 10vh;
    clip-path: polygon(6% 0%, 0% 100%, 100% 100%, 100% 0%);
  }
  #zine-book-depth-rightcentre{
    opacity: 1;
    background-color: #fff295;
  }
  #zine-book-depth-rightbottom{
    opacity: 1;
    background-color:orange;
    width: 45.0vh;
    height: 10vh;
    clip-path: polygon(0% 0%, 0% 100%, 94% 100%, 100% 0%);
  }
  #zine-book-depth-righttop{
    opacity: 1;
    background-color:orange;
    width: 45.0vh;
    height: 10vh;
    clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 94% 0%);
  }


  


  .scrollingImage{
    display: block;
    position: absolute;
    height: 100%;
    width:70%;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    top:0;
    
  }

  #projectImage1{
    background-image: url('src/projects/nandos/garlic-bread-2.png');
  }

  #projectImage2{
    background-image: url('src/projects/nandos/heart-burger.png');
  }
  #projectImage3{
    background-image: url('src/projects/nandos/Machopea-action-shot.png');
  }
  #projectImage4{
    background-image: url('src/projects/nandos/mac-and-cheese.png');
  }

  #projectDescription, #projectTitleHighlight{
    display: block;
    position: absolute;
    width: 50%;
    top: 50%;
    transform: translateY(-50%);
    line-height: 1.2em;
    color: white;
    font-family: 'NohemiExtLt';
    text-align: center;
    text-wrap: wrap;
    


    
  }
  #projectDescription h1 , #projectTitleHighlight h1{
    font-size: 6.5em;
    text-align: left;
    font-family: 'NohemiBold';
    line-height: 0.85em;
    margin-bottom: 0px;
    margin-top: 0px;
  }
  #projectDescription h1 mark, #projectDescription h2 mark{
    background-color: transparent;
    color: white;

  }
  
  #projectDescription h2, #projectTitleHighlight h2{
    font-size: 2.5em;
    text-align: left;
    font-family: 'NohemiExtLt';
    line-height: 0.85em;
    margin-bottom: 10px;
  }
  #projectDescription p{
    font-size: 0.9em;
    text-align: left;
    font-family: 'NohemiExtLt';
    line-height: 1.3em;
    margin-bottom: 5px;
    opacity: 1;
    background: linear-gradient(0deg, rgba(255,179,250,1) 0%, rgba(232,251,255,0.8) 100%);
    border-radius: 5px;
    color: black;
    padding: 10px;
    width:75%;
    border-color: black;
    border-width: 0px;
    border-style: solid;
    
    
    
  }
  #projectTitleHighlight{
    z-index: -10;
    pointer-events: none;
    color: transparent;
    
  }
  #projectTitleHighlight h1 mark, #projectTitleHighlight h2 mark{
    
    background-image: linear-gradient(to right, #FF00FF, #FF4500,  red, orange);
    
    color: transparent;
    padding-top: 10px;
    padding-bottom: 0px;
    


    background-repeat: repeat;
    background-attachment: fixed;
    background-position: left;
    
  }
  #projectTitleHighlight h2 mark{
    padding-right: 20px;
  }

  #fadedBackground{
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0;
    left:0;
    top:0;
    z-index: -200;
  }



  #projectVideo{
    height: 85vh;
    width: 46vh;
    display: block;
    position: fixed;
    object-fit: cover;
    z-index: -100;
    top:5%;
    left: 50%;
    transform: translate(-50%, 0%);
    background-image: linear-gradient( #ff8229, orange);
    border: 2px solid purple;
    box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.8);
  }

  #htmlVideoPlayer{
    display: block;
    position: absolute;
    border-radius: 5px;
    height: 78.5vh;
    width: 44vh;
    left:2%;
    bottom:1vh;
    background-color: black;
  }

  #projectVideo iframe{
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 50px;
  }

  #project-video-top-bar{
    width:100%;
    height:4vh;
    background-color: #ed1c24;
    border-bottom: 2px solid purple;
    text-align:center;
    
    font-family: 'NohemiExtLt';
    line-height:4vh;
    background-image: linear-gradient(to right, #FF00FF, #FF4500,  red, orange);
  }
  #project-video-top-bar h1{
    width: 40vh;
    height:4vh;
    margin-top: 0;
    margin-left: 1vh;
    font-size: 2vh;
    line-height: 4.2vh;

  }
  #project-video-exit{
    display: block;
    position: absolute;
    width: 2.5vh;
    height:2.5vh;
    right:0.75vh;
    top:0.75vh;
    background-image: url('src/exit_button.svg');
    mix-blend-mode: overlay;
    opacity: 0.5;
  }
  #triggerTop{
    display: block;
    position: absolute;
    width: 100px;
    left:0px;
    top:300vh;
    height: 100px;
    background-color: white;
    z-index: 50;
  }

  #whirlwind{
    display: block;
    width: 100vw;
    height: 100vh;
    position: fixed;

  }

  .mo_pivot{
    transform-style: preserve-3d;
    width:10vw;
    height: 13vw;
    min-width: 150px;
    min-height: 195px;
    display: block;
    position: absolute;
    cursor:pointer;
  }

  .movingObject{
    
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 30;
    transform-origin: 50% 50%;
    background-size: 100% auto;
    background-color: aquamarine;
    object-fit: fill;
  }

  .mo_pivot .mo_side{
    display: block;
    position: absolute;
    background-image: linear-gradient(red, yellow);
  }
  #collabs1 .mo_side{
    display: block;
    position: absolute;
    background-image: linear-gradient(green, yellow);
  }
  #oefy1 .mo_side{
    display: block;
    position: absolute;
    background-image: linear-gradient(blue, cyan);
  }
  #nandos1 .mo_side{
    display: block;
    position: absolute;
    background-image: linear-gradient(lime, green);
  }
  #aki1 .mo_side{
    display: block;
    position: absolute;
    background-image: linear-gradient(purple, cyan);
  }
  #tinned1 .mo_side{
    display: block;
    position: absolute;
    background-image: linear-gradient(blue, pink);
  }
  #rats1 .mo_side{
    display: block;
    position: absolute;
    background-image: linear-gradient(green, brown  );
  }
  




  .mo_pivot .leftSide{
    height:100%;
    width: 2vw;
  }
  .mo_pivot .rightSide{
    right: 0%;
    height:100%;
    width: 2vw;
  }
  .mo_pivot .bottomSide{
    bottom:0%;
    height:2vw;
    width: 100%;
  }
  .mo_pivot .topSide{
    top:0%;
    height:2vw;
    width: 100%;
  }


  #old-stuff{
    transform-style: preserve-3d;
    width:5vw;
    height:5vw;
    display: block;
    position: absolute;
  }
  #old-stuff .old-stuff-side{
    display: block;
    position: absolute;
    background-image: linear-gradient(red, yellow);
  }

  #old-stuff .leftSide{
    width: 100%;
    height: 100%;
    background-image: url(src/front-page/box\ face\ 1.svg);
  }
  #old-stuff .rightSide{
    width: 100%;
    height: 100%;
    right:0%;
    background-image: url(src/front-page/box\ face\ 3.svg);
  }
  #old-stuff .topSide{
    width: 100%;
    height: 100%;
    top:0%;
    background-image: url(src/front-page/box\ face\ 2.svg);
  }

  





  .is-a-block{
    display: block;
    position: absolute;
  }

  #contextBubble{
    display: block;
    position: absolute;
    width:10vw;
    height: 20vh;
    top:-1vw;
    z-index: -5;
    left:10vw;
    text-align: left;
    line-height: 1.1  ;
    font-family: "NohemiExtLt";
    font-size: 7px;
    padding: 20px;
    opacity: 1;
    pointer-events: none;
    color: #fff295;

    -webkit-user-select: none; /* Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */

  }



  #newTextLogo{
    width: 200px;
    height: 100px;
    display: block;
    position: fixed;
    z-index: 200;

    left:30px;
    top: 30px;
    background-image: url('src/bchanlogo.svg');
    background-repeat: no-repeat;

  }
  #newTextLogo h1{
    font-size: 0.92em;
    padding-top: 105px;
    margin:0;
    text-align: left;
  }

  #email{
    display: block;
    position: fixed;
    width:30vh;
    height:20px;
    top:30px;
    right:30px;
    text-align: right;
    font-size: 2vh;
  }

  .background-icon{
    position: absolute;
    display: block;
    width: 3vw;
    height: 3vw;
    z-index: -11;
    background-repeat: no-repeat;
  }

  #textLogo{
    display:block;
    position: absolute;
    
    width: 96vw;
    opacity: 0;
    z-index: -10;

    margin: auto  ;
    justify-content: center;
    align-items: center;

    user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
  }
  #textLogoBox{
    display: block;
    position: absolute;
    width: 100vw;
    height: 55vw;
    vertical-align: middle;
    left:2vw;
    bottom:10vh;  
    top: 48%;
    transform-origin: center;
  }

  #mouseContextBubble{
    display: block;
    position: absolute;
    width: 300px;
    height: 45px;
    background: linear-gradient(0deg, rgba(255,179,250,1) 0%, rgba(232,251,255,0.8) 100%);
    color: blue;
    z-index: 100;
    border-radius: 5px;
    transform-origin: 0% 50%;
    font-size: 0.8em;
    line-height: 1.2;
    padding: 10px;
    font-family:'NohemiExtLt';  
    user-select: none;
    pointer-events: none;
  }
  #mouseContextBubble b{
    font-family: 'Nohemi';
    color:BLACK;
  }
  #clickMeRoundel{
    width: 40px;
    height: 40px;
    background-image: url("src/Click\ me\ roundel.svg");
    display: block;
    position: absolute;
    pointer-events: none;
    mix-blend-mode: difference; 
    z-index: 200;
    
  }
  #clickMeArrow{
    width: 40px;
    height: 40px;
    background-image: url("src/clickmeArrow.svg");
    display: block;
    position: absolute;
    pointer-events: none;
    mix-blend-mode: difference; 
    z-index: 200;
    background-size: contain;
  }

  .notDraggable{
    user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
  }

  .footer{
    display: block;
    position: fixed;
    width:30%;
    bottom:50px;
    color: white;
    font-family: "Nohemi";
    font-size: 1.2em;
    letter-spacing: .03rem;
    user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
  }
  #footer-right{
    right:50px;
    text-align: right;
    cursor:pointer;
  }
  #footer-left{
    left:50px;
    text-align: left;
    cursor:pointer;
  }
  #footer-clients{
    width: 100%;
    bottom: 20px;
    text-align: center;
    font-size: 0.9em;
    font-family: 'NohemiExtLt';
  }
  #watch-button{
    display: block;
    position: fixed;
    background-image: url('src/Watch_btn.svg');
    background-position: center;
    background-repeat: no-repeat;
    width: 120px;
    height: 45px;
    right:30px;
    bottom: 30px;
    pointer-events: all;
  }

  #construction-message{
    width:100%;
    height: 100%;
    display: block;
    position: fixed;
    background-image: url('src/construction-mobile.png');
    background-position: center;
    background-size: contain;
    left:0;
    top:0;
    z-index: -300;
    opacity: 0;
  }

  #thumbnail-video-diageo{
    background-image: url('src/projects/zine/diageo/cover.jpg');
    background-size: 100% 100%;
  }
  #thumbnail-video-oefy{
    background-image: url('src/projects/zine/oef/cover.jpg');
    background-size: 100% 100%;
  }
  #thumbnail-video-nandos{
    background-image: url('src/projects/zine/nandos/cover.jpg');
    background-size: 100% 100%;
  }
  #thumbnail-video-collabs{
    background-image: url('src/projects/zine/Collaborations/cover.jpg');
    background-size: 100% 100%;
  }
  #thumbnail-video-rats{
    background-image: url('src/projects/zine/shortfilm/cover.jpg');
    background-size: 100% 100%;
  }


  @media (max-width:799px) {
    .project-title h1{
      font-size:20vw;
      font-family: 'NohemiBold';
    }
    .sub-project-title{
      font-size: 12vw;
    }

  }
  @media (min-width:800px) {
    .project-title h1{
      font-size:10.0em;
      line-height: 0;
      font-family: 'NohemiBold';
      
    }
    .sub-project-title{
      font-size: 6em;
    }
  }


  @media (max-width:599px) {
      .half-column{
        width: 100%;
      }
      .sub-project-title{
        text-align: center;
        margin-top: 10px;
      }
      .secondary-image-preview{
        display: none;

      }
      .paragraph-body{
        padding-left: 20px;
        padding-right: 20px;
      }


  }
  @media (min-width:600px) {
      .half-column{
        width: 49%;
      }
      .sub-project-title{
        margin-top: 50px;
      }

  }