* {
          box-sizing:border-box;
        }

        html, body {
            max-width: 100%;
            margin: 0;
            padding: 0;
            height:100%;
            scroll-behavior: smooth;
        }

        @font-face {
            font-family: "SuisseIntl-Book", Arial, sans-serif;
        }

        body {
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            font-size: 18px;
            color: #fff7f7;
            line-height: 1.3rem;
            letter-spacing: -0.03rem;     
        }

        /* Add this CSS to create a fade-in effect */
        .fade-in-image {
        opacity: 0;
        transform: translateY(20%);
        transition: opacity 0.8s ease-out, transform 0.7s ease-out;
        }

        .fade-in-image.loaded {
        opacity: 1;
        transform: translateY(0);
        }

        .fade-in-video {
        opacity: 0;
        transform: translateY(20%);
        transition: opacity 0.8s ease-out, transform 0.7s ease-out;
        }

        .fade-in-video.loaded {
        opacity: 1;
        transform: translateY(0);
        }

        html {
            font-family: "SuisseIntl-Book", Arial, sans-serif;
            background-color: #141414;     
        }

        a:active {
            color: #878787;
            background-color: transparent;
            text-decoration: none;         
        }

        a:link {
            color: #fff7f7;
            background-color: transparent;
            text-decoration: none;
        }

        a:visited {
            color: #fff7f7;
            background-color: transparent;
            text-decoration: none;   
        }

        a:hover {
            opacity: 50%;
    		    transition: opacity .3s ease-out;
    		    -moz-transition: opacity .3s ease-out;
    		    -webkit-transition: opacity .3s ease-out;
    		    -o-transition: opacity .3s ease-out;
            background-color: transparent;
            text-decoration: none;
        } 

        .wrapper {
          top: 0px;
          position: absolute;
          height: auto;
          width: 100%;
        }

        .header {
          position: relative;
          left:0px;
          top:0px;
          width: 100%;
          height: 15vh;
          z-index: 2;
          mix-blend-mode: difference;
          line-height: 1.1rem;
        }

        .header-spacer{ height: var(--header-h); } /* reserveert ruimte */

        .nav-left {
          position: relative;
          width: 25%;
          height: auto;
          left:2%;
        }

        .nav-right {
          top: 3%;
          position: fixed;
          width: 20%;
          left: 51%;
        }  

        .nav-rightsecond {
          top: 3%;
          position: fixed;
          width: 10%;
          left: 71%;
          z-index: 2;
        }            

        .header-case {
          position: relative;
          left:0px;
          top:0px;
          width: 100%;
          height: 15vh;
          z-index: 2;
          mix-blend-mode: difference;
          line-height: 1.1rem;
        }

        #muteBtn {
          position:absolute;
          top:15px;
          left:15px;
          color:#fff7f7;
          border:none;
          background-color: #000;
          border-radius:5%;
          width:75px;
          height:30px;
          font-size:18px;
          cursor:pointer;
          opacity:0;
          transform: translateY(700%);
          transition: opacity .8s ease-out, transform .7s ease-out;
}          

        #muteBtn:hover {
          color: #141414;
          background-color: #fff7f7;
        }

        .name {
            position: fixed;
            z-index: 5;
            mix-blend-mode: difference;
            top:3%;
        }

        .jobtitle {
            position: relative;
            top:3.1rem;
        }    

        .text {
        	position: relative;
        	width: 100%;
        	height: auto;
        	margin-top:1.1vh;
          margin-bottom: 5vh;
        }

        .case-text-content {
        	position: relative;
        	width: 100%;
        	height: 17vh;
        	z-index: 5;
        }

        .description {
          position: relative;
          width: 33%;
          float:left;
          left:11%;
          height: auto;
          top:0px;      
        } 

        .casetitle {
          position: relative;
          width: 40%;
          float:left;
          height: auto;
          top:0px;
          left:2%;
          z-index: 5;
        }

        .casehero {
          position: relative;
          width: 96%;
          height: auto;
          float:left;
          left: 2%;
          margin-bottom: 2%;       
        }   

        .caseleft {
          position: relative;
          width: 47%;
          height: auto;
          float:left;
          left: 2%;
          margin-bottom: 2%;
          max-width: 1600px;        
        }      

        .caseright {
          position: relative;
          width: 47%;
          height: auto;
          float: right;
          right: 2%;
          margin-bottom: 2%;
          max-width: 1600px;       
        }

        .hero-img {
          position: relative;
          left:2%;
          right:2%;
          height: auto;
          width: 96%;
          margin-bottom: 2%;
        }  


        .imgleft {
          position: relative;
          width: 47%;
          height: auto;
          float:left;
          left: 2%;
          margin-bottom: 2%;
          max-width: 1600px;    
        }

        .imgright {
          position: relative;
          width: 47%;
          height: auto;
          float: right;
          right: 2%;
          margin-bottom: 2%;
          max-width: 1600px;             
        }

        .footer {
       		position: relative;
       		width:96%;
       		left: 2%;
       		right:2%;
       		float:left;
       		height: auto;
       		margin-bottom: 2%;
        }

        .footer-case {
       		position: relative;
       		width:96%;
       		left: 2%;
       		right:2%;
       		float:left;
       		height: auto;
       		margin-bottom: 2%;
       		margin-top: 4%;
        }

        .footer-about {
          position: fixed;
          width:96%;
          left: 2%;
          right:2%;
          bottom:2%;
          float:left;
          height: auto;
        }

        .backtotop { 
          position: relative;
          width: 47%;
          height: auto;
          float:left;  
        }

        .contactbottom { 
          position: relative;
          width: 47%;
          height: auto;
          float: right;
          right:2%;
        }      

@media only screen and (max-width: 600px) {
  body {
    font-size: 18px;
    line-height: 1.1rem;
    letter-spacing: -0.05rem; 
  }

  .text {
    position: relative;
    width: 100%;
    height: auto;
    margin-top:1.1vh;
    margin-bottom: 0.2vh;
  }

  .header {
  	height: 30vh;
  }

  .nav-left{
    width: 40%;
    left:2%;
    line-height: 1.1rem;
  }

  .nav-right{
    line-height: 1.1rem;
  }

  .jobtitle{
    top:2.35rem;
  }

  .description {
    position: relative;
    width: 96%;
    float:left;
    left:2%;
    right:2%;
    height: auto;
    top:0px;
    z-index: 100;
  }   

  .casetitle {
  	left:2%;
    width:98%;
  }

  .caseright {
  	float:left;
  	width:96%;
  	left:2%;
  	right:2%;
    margin-bottom:28px;    
  }

  .caseleft {
  	width:96%;
  	left:2%;
  	right:2%;
    margin-bottom:28px;
  }

  .footer {
  	width:96%;
  	left:2%;
  }

}