@font-face {
    font-family: 'Audrey';
    font-style: normal;
    font-weight: normal;
    src: local('Audrey'), url('Audrey-Bold.woff') format('woff');
    }















:root {
    
   --primary-color: rgba(0,130,160,0.65);
    --overlay-color: rgba(0,0,0,0.80);
    --menu-speed: 0.75s;

}

* {
  box-sizing: border-box;
    margin: 0;
    padding: 0;
    
}

body{
    
    font-family: acumin-pro;
    line-height: 1.4;
    background:#030513;
    
}

.Container{
    
    background-color: #030513;
    max-height:auto;
    width: auto;
    margin: auto;
    
    
    
}

.Container-menu{
    

    margin: auto;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    z-index: 1;
    max-width: 50%;
    
    
}
/*no background overlay color-change var to none*/
.showcase{
  
    color:white;
    height: 100%;
    position: relative;
    z-index: 1;
    
    
   
}

.showcase:before{
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    height: auto;
    z-index: -1;
    
}


.showcase h3{
    font-family: Audrey;
    font-style:bold;
    font-size: 18px;
    padding:25px 15px 0px 45px;
    display: flex;
   font-weight: 600;
    opacity: 80%;
    letter-spacing: 0.6px;
}

.showcase h4{
    font-family: Audrey;
    font-size: 18px;
    font-style:bold;
    padding:0px 25px 0px 45px;
    display: flex;
   font-weight: 600;
    opacity: 80%;
    letter-spacing: 0.6px;
}


.showcase img{
  width: 80%;
    height: auto;
    margin-top:-23%;
    margin-bottom:-55%;
    display:block;
    z-index: -1;
    margin-left: 10%;

    
    
}

.showcase2 img{
  width: 70%;
    height: auto;
    margin-top:-17%;
    margin-bottom:-55%;
    margin-left: 100%;
   
        
        
       }



.bio p{
    font-size: 0.90rem;
    padding:0px 32px 2px 32px;
    text-align:justify;
    font-family: Proxima Nova;
    font-style: Regular;
    letter-spacing: -0.6px;
    color: lightgray;
    opacity: 100%;
    

}
.bio { width: 100%;
    height: auto;
    opacity: 0.90;
    padding-top: 12%;
    margin-top:150px;
    margin-bottom: -5%;
    
    
    
}

.menu-wrap{
    
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
}
/* MENU STYLES */
.menu-wrap {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
    font-family: acumin-pro;
}

.menu-wrap .toggler {
  position: fixed;
  
  z-index: 2;
  cursor: pointer;
  width: 60px;
  height: 60px;
  opacity: 50;
    display: inline-block;
    background-color: darkgoldenrod;
   
    
}


.menu-wrap .hamburger {
  position: fixed;
  top: 0;
  left: 0px;
  z-index: 1;
  width: 65px;
  height: 45px;
  padding: 1rem;
  background:;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Hamburger Line */
.menu-wrap .hamburger > div {
  position: relative;
  flex: none;
  width: 100%;
  height: 1px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
}

/* Hamburger Lines - Top & Bottom */
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -10px;
  width: 100%;
  height: 2px;
  background: inherit;
}
/* Moves Line Down */
.menu-wrap .hamburger > div::after {
  top: 8px;
}

/* Toggler Animation */
.menu-wrap .toggler:checked + .hamburger > div {
  transform: rotate(135deg);
}

/* Turns Lines Into X */
.menu-wrap .toggler:checked + .hamburger > div:before,
.menu-wrap .toggler:checked + .hamburger > div:after {
  top: 0;
  transform: rotate(90deg);
}

/* Rotate On Hover When Checked */
.menu-wrap .toggler:checked:hover + .hamburger > div {
  transform: rotate(225deg);
}

/* Show Menu */
.menu-wrap .toggler:checked ~ .menu {
  visibility: visible;
}

.menu-wrap .toggler:checked ~ .menu > div {
  transform: scale(1);
  transition-duration: var(--menu-speed);
}

.menu-wrap .toggler:checked ~ .menu > div > div {
  opacity: 1;
  transition:  opacity 0.4s ease 0.4s;
}

.menu-wrap .menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-wrap .menu > div {
  background: var(--overlay-color);
  border-radius: 80%;
  width: 250vw;
  height: 250vw;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  transform: scale(0);
  transition: all 0.4s ease;
}

.menu-wrap .menu > div > div {
  text-align: center;
  max-width: 90vw;
  max-height: 100vh;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.menu-wrap .menu > div > div > ul > li {
  list-style: none;
  color: #bebdb8;
  font-size: 1.1rem;
  padding: 0.9rem;
}
.menu-wrap .menu > div > div > ul >li> ul {
  list-style: none;
  color:whitesmoke;
  font-size: 1.2rem;
  padding: 0.9rem;
}
.menu-wrap .menu > div > div > ul > li > a {
  color: inherit;
  text-decoration: none;
  transition: color 0.4s ease;
}

.menu-wrap .menu > div > div > ul >li > ul > li > a {
    color: inherit;
  text-decoration: none;
  transition: color 0.4s ease;
    font-size: 1.2rem;
    display: inline-block;
    padding-top: 8px;
}


.logos{
    
    position: relative;
    padding-left:0px;
    margin-bottom: 0px;
    margin-top: -70px;
}


.logos p{font-family: acumin-pro,arial;
    font-size: 12px;
    color:ghostwhite;
    opacity:0.6;
     margin-left: 30px;
     
    

}

hr{margin-left: 10%;
    margin-right: 10%;
opacity: 0;
background-color:#f7cd46;
    margin-top: 60px;

}

 .imdb{
    
   margin-left: 5%;
    display: inline-block;
    align-content: center;
    vertical-align: middle;
     z-index: 1;
}

.vimeo{display: inline-block;
    align-content: center;
    vertical-align: middle;
margin-left: 19%;
    
}

.contact{display: inline-block;
    align-content: center;
    vertical-align: middle;
    margin-left: 25%;
}


.imdb img{
    
 padding-left: 0px;
    width:40px;
    height: auto;
    margin-top:20px;
    position: fixed;   
    
    
}

.vimeo img{
    

    width:12%;
    height: auto;
    margin-top:0%;
    position: fixed;   
    
    
}


.contact img{
    

    width:12%;
    height: auto;
    margin-top:0px;
    position: fixed;   
    
    
}








.Container-menu{
    
    margin:0px 50px 0px 180px;
}

# Layer_1 {fill:blue,
    transition:.6s fill;}
    
#Layer_1:hover {fill:url(#gradient);}


#Layer_1{
  margin-left: 70px;
    position: absolute;
}

#NARRATIVE:{
    height: 10px;
    
}


.narrativebutton{
    opacity: 30%;
    transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: relative;
    background-color:yellow;
     display: block;
     text-decoration: none;
     z-index:1;
    width: 85px;
     height: 30px;
    

     
} 


.narrativebutton h3{
    
 opacity: 50;
    background-color: transparent;
    color: lightgray;
    z-index: 2;
    
    
}




.narrativebutton a{
    opacity: 0;
    background-color: transparent;
    color: lightgray;
  
    
}

.narrativesub{
    display:none;
    padding-top: 0px;
    opacity:0%;
    text-decoration: none;
    background-color:orange;
    z-index:0;
    position: relative;
  margin: 30%;
    height: 200px;
    
}

.narrativesub li a{
  font-family: acumin-pro;
    font-size: 20px;
    text-decoration: none;
    display: block;
    
    
    
}
 ul.sub-navnar{display: none;}
    




.Container-menu:hover + .narrativebutton {opacity: 100%;} 
 .Container-menu:hover ~.docubutton {opacity: 100%;}
.Container-menu:hover ~.projectbutton h3 {opacity: 100%;}
.Container-menu:hover ~.videobutton h3 {opacity: 100%;}







@media only screen and (min-device-width: 0px) and (max-width:299px) {

    .Container{display: none}
    
}













@media only screen and (min-device-width: 300px) and (max-width:360px) {
    
  .Container{
        max-width: 320px;}
    
    .showcase h3 {font-size: 1.4rem;padding:30px 50px 0px 25px; font-family: Audrey;font-style:normal;font-weight: 100;}
    
    .showcase h4{font-size: 1.4rem;padding:0px 25px 0px 25px;font-family: Audrey;font-style:normal;font-weight: 100;}
    
    .bio p{font-size: 1.1rem;}
    
    .menu-wrap .toggler {
  position: fixed;
  
  z-index: 2;
  cursor: pointer;
  width: 55px;
  height: 55px;
  opacity: 0;
    display: inline-block;
    margin-top: 5px;
    margin-left: 270px;
    
    
}
.menu-wrap .hamburger {
  position: fixed;
  top: 0;
  left: 0px;
  z-index: 1;
  width: 40px;
  height: 65px;
  padding: 0;
  
  display: flex;
  align-items: center;
  justify-content: center;
    margin-left:10px;margin-top: 20px; }
    
    /* Hamburger Line */
.menu-wrap .hamburger > div {
  position: fixed;
  flex: none;
  width: 30px;;
  height: 1px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
    margin-top: -25px;
    margin-left: 530px;
}

/* Hamburger Lines - Top & Bottom */
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -7px;
  width: 100%;
  height: 2px;
  background: inherit;
}
    
    /* Moves Line Down */
.menu-wrap .hamburger > div::after {
  top: 7px;
}
    
 
    .menu-wrap .menu > div > div > ul > li{padding:0.5rem; }   
    
    
    
    
    
.bio p{
    font-size: 1rem;
    padding:0px 35px 2px 35px;
    text-align:justify;
    font-family: acumin-pro;
    font-style:normal;
    letter-spacing: -0.3px;
    color: lightgray;
    opacity: 100%;
    justify-content: center;
   
  
    

}
.bio { width: 100%;
    height: auto;
    opacity: 0.90;
    margin-top:145px;
    margin-bottom: -5%;
    
    
    
}    
    
    
    
    
    
    
    
    
.logos p {font-family: acumin-pro,arial;
    font-size: 11px;
    color:ghostwhite;
    opacity: 0.5;
     margin-left: 35%;
    margin-top:23%;
    padding-bottom: 50px;}   
    
   
    
    .showcase2 img {display: none;}
    
    .Container-menu{
        display: none;
    }
    
     .narrativebutton{
        display: none;
    }
    .narrativesub{
        display: none;
    }
    
    
    .imdb img{
    
 padding-left: 0px;
    width:43px;
    height: auto;
    margin-top:30px;
    position: absolute;   
    
    
}

.vimeo img{
    

    width:11%;
    height: auto;
    margin-top:25px;
    position: absolute;   
    margin-left: 5px;
    
}


.contact img{
    

    width:10.5%;
    height: auto;
    margin-top:26px;
    position: absolute;  
    margin-left: -30px;
    
    }
    
    
    
    .imdb img{width:9%;}
    
    .vimeo img{width:8%;}
    
    .contact img{width:7%;}
    
    
    .Container-menu{
        display: none;
    }
    
     .narrativebutton{
        display: none;
    }
    .narrativesub{
        display: none;
    }
    
    .projectbutton{
        display: none;
    }
    
.videobutton{
        display: none;
    }
 
     .docubutton{
        display: none;
    }
    
    .doc-navnar li{
        display: none;
    }
    
    input[type=checkbox]:checked ~ .doc-navnar {display: none;
    }
    
    input[type=checkbox]:checked ~ .sub-navnar {display: none;
    }
    
    
    #narrative{display: none;
    }
    
    #documentary{display: none;
    }
    
}

   
    























@media only screen and (min-device-width: 360px) and (max-device-width:374px) {
    
  .Container{
        max-width: 360px;}
    
  .menu-wrap .hamburger {width: 65px;height: 65px; margin-left:10px; }
    
    .menu-wrap .toggler {
  position: fixed;
  
  z-index: 2;
  cursor: pointer;
  width: 55px;
  height: 55px;
  opacity: 0;
    display: inline-block;
     margin-top: 5px;
    margin-left: 290px;
    float: right;
    
}
.menu-wrap .hamburger {
  position: absolute;
  top: 0;
  left: 0px;
  z-index: 1;
  width: 40px;
  height: 65px;
  padding: 1rem;
  
  display: flex;
  align-items: center;
  justify-content: center;
     margin-left:10px;margin-top: 20px; }
    
    /* Hamburger Line */
.menu-wrap .hamburger > div {
  position: absolute;
  flex: none;
  width: 70%;
  height: 2px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
     margin-top: -25px;
    margin-left: 585px;
}

/* Hamburger Lines - Top & Bottom */
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -7px;
  width: 100%;
  height: 1px;
  background: inherit;
}
    
    /* Moves Line Down */
.menu-wrap .hamburger > div::after {
  top: 9px;
}
    
     .showcase h3 {font-size: 1.4rem;padding:30px 50px 0px 30px; font-family: Audrey;font-style:normal;font-weight: 500;}
    
    .showcase h4{font-size: 1.4rem;padding:0px 25px 0px 30px;font-family: Audrey;font-style:normal;font-weight: 500;}
    
    .bio p{
    font-size: 1rem;
    padding:0px 40px 2px 40px;
    text-align:justify;
    font-family: acumin-pro;
    font-style:normal;
    letter-spacing: -0.6px;
    color: lightgray;
    opacity: 100%;
    justify-content: center;
   
}
   
    
    .menu-wrap .menu > div > div > ul >li> ul {padding:0.3rem;}    
    
    .menu-wrap .menu > div > div > ul >li > ul > li > a {padding-top: 10px;}
    
    
    
    .bio{ margin-top:160px;}
    
    .showcase img{
  width: 80%;
    height: auto;
    margin-top:-20%;
    margin-bottom:-55%;
    margin-left: 10%;
       }
    
    .showcase2 img{display: none;}
    
    
    .logos{
    margin-top: 0%;
}
    
    .imdb img{
    
 padding-left: 5px;
    width:47px;
    height: auto;
    margin-top:-35px;
    position: absolute;   
    
    
}

.vimeo img{
    

    width:12%;
    height: auto;
    margin-top:-40px;
    position: absolute;
    margin-left: 6px;
    
    
}


.contact img{
    

    width:11%;
    height: auto;
    margin-top:-38px;
    position: absolute;   
    margin-left: -40px;
    
}

 hr{margin-left: 10%;
    margin-right: 10%;
opacity: 0;
background-color:#f7cd46;
    margin-top: 55px;

}   
    
    
    
    
    
    .imdb img{width:9.5%;}
    
    .vimeo img{width:6.5%;}
    
    .contact img{width:6%;}
    
    .menu-wrap .menu > div > div > ul > li {font-size: 1.1rem;
  padding: 0.4rem;}
    
    .menu-wrap .menu > div > div > ul >li> ul {font-size: 1rem;
  padding: 0.8rem;}
    
    .menu-wrap .menu > div > div > ul >li > ul > li > a {
        font-size:1.1rem;}
    
    .menu-wrap .menu > div > div > ul > li > a {
        font-size:1.1rem;}
    
    
    .logos p {font-family: acumin-pro,arial;
    font-size: 11px;
    color:ghostwhite;
    opacity: 0.5;
     margin-left: 39%;
    margin-top:0px;
    padding-bottom: 15%;}  
    
    .Container-menu{
        display: none;
    }
    
     .narrativebutton{
        display: none;
    }
    .narrativesub{
        display: none;
    }
    
    .projectbutton{
        display: none;
    }
    
.videobutton{
        display: none;
    }
 
     .docubutton{
        display: none;
    }
    
    .doc-navnar li{
        display: none;
    }
    
    input[type=checkbox]:checked ~ .doc-navnar {display: none;
    }
    
    input[type=checkbox]:checked ~ .sub-navnar {display: none;
    }
    
    
    #narrative{display: none;
    }
    
    #documentary{display: none;
    }
    
       
}  



























    
@media only screen and (min-device-width: 375px) and (max-device-width:389px) {
    
  .Container{
        max-width: 375px;}
    
  .menu-wrap .hamburger {width: 65px;height: 65px; margin-left:8px; }
    
    .menu-wrap .toggler {
  position: fixed;
  
  z-index: 2;
  cursor: pointer;
  width: 55px;
  height: 55px;
  opacity: 0;
    display: inline-block;
     margin-top: 10px;
    margin-left: 315px;
    float: right;
    
}
.menu-wrap .hamburger {
  position: absolute;
  top: 0;
  left: 15px;
  z-index: 1;
  width: 35px;
  height: 60px;
  padding: 1rem;
  
  display: flex;
  align-items: center;
  justify-content: center;
    margin-left:3%;margin-top: 20px; }
    
    /* Hamburger Line */
.menu-wrap .hamburger > div {
  position: absolute;
  flex: none;
  width: 85%;
  height: 2px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
    margin-top: -25px;
    margin-left: 620px;
}

/* Hamburger Lines - Top & Bottom */
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -7px;
  width: 100%;
  height: 1px;
  background: inherit;
}
    
    /* Moves Line Down */
.menu-wrap .hamburger > div::after {
  top: 9px;
}
    
    
    
      
    
    .menu-wrap .menu > div > div > ul >li > ul > li > a {padding-top: 10px;font-size: 4.8vw;} 
    
    
    
    
     .showcase h3 {font-size: 1.4rem;padding:35px 50px 0px 15px; font-family: Audrey;font-style:normal;font-weight: 500;}
    
    .showcase h4{font-size: 1.4rem;padding:0px 25px 0px 15px;font-family: Audrey;font-style:normal;font-weight: 500;}
    
    .bio p{
    font-size: 4.4vw;
    padding:0px 40px 2px 40px;
    text-align:justify;
    font-family: acumin-pro;
    font-style:normal;
    
    color: lightgray;
    opacity: 100%;
    justify-content: center;
  
  
    

}
    
    .bio{ margin-top:170px;}
    
    .showcase img{
  width: 90%;
    height: auto;
    margin-top:-20%;
    margin-bottom:-55%;
    margin-left: 5%;
       }
    
    .showcase2 img{display: none;}
    
    
    .logos{
    margin-top: 0%;
}
    
    
  
    
    
    .imdb img{
    
 padding-left: 0px;
    width:45px;
    height: auto;
    margin-top:-40px;
    position: absolute;   
    margin-left: 6%;
    
}

.vimeo img{
    

    width:12%;
    height: auto;
    margin-top:-45px;
    position: absolute;
    margin-left: 4px;
    
    
}


.contact img{
    

    width:11%;
    height: auto;
    margin-top:-44px;
    position: absolute;   
    margin-left: -45px;
    
}

 hr{margin-left: 10%;
    margin-right: 10%;
opacity: 0;
background-color:#f7cd46;
    margin-top: 65px;

}   
    
    
    
    
    
    .imdb img{width:9%;}
    
    .vimeo img{width:7%;}
    
    .contact img{width:6.3%;}
    
    .menu-wrap .menu > div > div > ul > li {font-size: 1.2rem;
  padding: 0.5rem;}
    
    .menu-wrap .menu > div > div > ul >li> ul {font-size: 1.2rem;
  padding: 0.9rem;}
    
    .logos p {font-family: acumin-pro,arial;
    font-size: 12px;
    color:ghostwhite;
    opacity: 0.5;
     margin-left: 40%;
    margin-top:0px;
    padding-bottom: 15%;} 
    
    .Container-menu{
        display: none;
    }
    
     .narrativebutton{
        display: none;
    }
    .narrativesub{
        display: none;
    }
    
       .Container-menu{
        display: none;
    }
    
     .narrativebutton{
        display: none;
    }
    .narrativesub{
        display: none;
    }
    
    .projectbutton{
        display: none;
    }
    
.videobutton{
        display: none;
    }
 
     .docubutton{
        display: none;
    }
    
    .doc-navnar li{
        display: none;
    }
    
    input[type=checkbox]:checked ~ .doc-navnar {display: none;
    }
    
    input[type=checkbox]:checked ~ .sub-navnar {display: none;
    }
    
    
    #narrative{display: none;
    }
    
    #documentary{display: none;
    }
    
}
  
 














@media only screen and (min-device-width: 390px) and (max-device-width:411px) {
    
  .Container{
        max-width: 390px;}

.menu-wrap .hamburger {width: 70px;height: 70px;margin-left:300px;margin-top: 10px;}
    
    
    
    .menu-wrap .menu > div > div > ul > li {font-size: 1.2rem;
  padding: 0.5rem;}
    
    .menu-wrap .menu > div > div > ul >li> ul {font-size: 1.2rem;
  padding: 0.6rem;}
    
    .menu-wrap { left: 3%;}
    
    .menu-wrap .menu > div > div > ul >li > ul > li > a {padding-top: 10px;}
    
    
    .menu-wrap .toggler {
  position: fixed;
  
  z-index: 2;
  cursor: pointer;
  width: 55px;
  height: 55px;
  opacity: 0;
    display: inline-block;
     margin-top: 15px;
    margin-left: 310px;
    float: right;
    
}
    
    
    .menu-wrap .hamburger {
  position: absolute;
  top: 0;
  left: 0px;
  z-index: 1;
  width: 40px;
  height: 65px;
  padding: 1rem;
  
  display: flex;
  align-items: center;
  justify-content: center;
    margin-left:1%;margin-top: 10px; }
    
    /* Hamburger Line */
.menu-wrap .hamburger > div {
  position: absolute;
  flex: none;
  width: 75%;
  height: 1px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
    margin-top: 5px;
    margin-left: 640px;
}

/* Hamburger Lines - Top & Bottom */
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -9px;
  width: 100%;
  height: 2px;
  background: inherit;
}
    
    /* Moves Line Down */
.menu-wrap .hamburger > div::after {
  top: 8px;
}
    
    
    
    
    
    .showcase h3 {font-size: 1.5rem;padding:40px 50px 0px 25px; font-family: Audrey;font-style:normal;font-weight: 500;}
    
    .showcase h4{font-size: 1.5rem;padding:0px 25px 0px 25px;font-family: Audrey;font-style:normal;font-weight: 500;}
    
   .bio p{
    font-size: 17px;
    padding:0px 40px 2px 40px;
    text-align:justify;
    font-family: acumin-pro;
    font-style:normal;
    
    color: lightgray;
    opacity: 100%;
    justify-content: center;
   
  
    

}
    
    
    .bio{ margin-top:180px;}
    
    .showcase img{
  width: 85%;
    height: auto;
    margin-top:-20%;
    margin-bottom:-55%;
    margin-left: 7%;
       }
    
    .showcase2 img{display: none;}
    
    .logos{
    margin-top: 0%;
}
    
    .imdb img{
    
 padding-left: 0px;
    width:45px;
    height: auto;
    margin-top:-43px;
    position: absolute;   
    
    
}

.vimeo img{
    

    width:10%;
    height: auto;
    margin-top:-48px;
    position: absolute;
    margin-left: -10px;
    
    
}


.contact img{
    

    width:9%;
    height: auto;
    margin-top:-47px;
    position: absolute;   
    margin-left: -65px;
    
}

 hr{margin-left: 10%;
    margin-right: 10%;
opacity: 0;
background-color:#f7cd46;
    margin-top: 70px;

}   
    
    
    
    
    
   .imdb img{width:8%;}
    
    .vimeo img{width:7%;}
    
    .contact img{width:6%;}
    
    
    
     .logos p {font-family: acumin-pro,arial;
    font-size: 12px;
    color:ghostwhite;
    opacity: 0.5;
     margin-left: 42%;
    margin-top:0px;
    padding-bottom: 18%;}   
    
  
    
    
    .Container-menu{
        display: none;
    }
    
     .narrativebutton{
        display: none;
    }
    .narrativesub{
        display: none;
    }
    
       .Container-menu{
        display: none;
    }
    
     .narrativebutton{
        display: none;
    }
    .narrativesub{
        display: none;
    }
    
    .projectbutton{
        display: none;
    }
    
.videobutton{
        display: none;
    }
 
     .docubutton{
        display: none;
    }
    
    .doc-navnar li{
        display: none;
    }
    
    input[type=checkbox]:checked ~ .doc-navnar {display: none;
    }
    
    input[type=checkbox]:checked ~ .sub-navnar {display: none;
    }
    
    
    #narrative{display: none;
    }
    
    #documentary{display: none;
    }
    
}
  
    
    
    
    
    
    





















@media only screen and (min-device-width: 412px) and (max-device-width:427px) {
    
    .Container{
        max-width: 412px;}
    
    
  menu-wrap .hamburger {width: 70px;height: 70px;margin-left:300px;margin-top: 10px;}
    
    
    
    .menu-wrap .menu > div > div > ul > li {font-size: 1.2rem;
  padding: 0.7rem;}
    
    .menu-wrap .menu > div > div > ul >li> ul {font-size: 1.4rem;
  padding: 0.4rem;}
    
    .menu-wrap { left: 3%;}
    
    
    .menu-wrap .menu > div > div > ul >li > ul > li > a {padding-top: 8px;}
    
    
    
    
    .menu-wrap .toggler {
  position: fixed;
  
  z-index: 2;
  cursor: pointer;
  width: 55px;
  height: 55px;
  opacity: 0;
    display: inline-block;
     margin-top: 20px;
    margin-left: 330px;
    float: right;
    
}
    
    
    
    
    
    
    
    .menu-wrap .hamburger {
  position: absolute;
  top: 0;
  left: 0px;
  z-index: 1;
  width: 35px;
  height: 60px;
  padding: 1rem;
  
  display: flex;
  align-items: center;
  justify-content: center;
    margin-left:1%;margin-top: 10px; }
    
    /* Hamburger Line */
.menu-wrap .hamburger > div {
  position: absolute;
  flex: none;
  width: 85%;
  height: 1px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
     margin-top: 10px;
    margin-left: 675px;
}

/* Hamburger Lines - Top & Bottom */
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -9px;
  width: 100%;
  height: 2px;
  background: inherit;
}
    
    /* Moves Line Down */
.menu-wrap .hamburger > div::after {
  top: 9px;
}
    
    
    
    
    
    .showcase h3 {font-size: 1.6rem;padding:40px 50px 0px 25px; font-family: Audrey;font-style:normal;font-weight: 500;}
    
    .showcase h4{font-size: 1.6rem;padding:0px 25px 0px 25px;font-family: Audrey;font-style:normal;font-weight: 500;}
    
   .bio p{
    font-size: 4.1vw;
    padding:0px 35px 2px 35px;
    text-align:justify-all;
    font-family: acumin-pro;
    font-style:normal;
    
    color: lightgray;
    opacity: 100%;
   
  
  
    

}
    
    
    .bio{ margin-top:190px;}
    
    .showcase img{
  width: 85%;
    height: auto;
    margin-top:-20%;
    margin-bottom:-55%;
    margin-left: 7%;
       }
    
    .showcase2 img{display: none;}
    
    .logos{
    margin-top: 10px;
}
    
    .imdb img{
    
 padding-left: -0px;
    width:40px;
    height: auto;
    margin-top:-65px;
    position: absolute; 
        margin-left: 15px;
    
    
}

.vimeo img{
    

    width:12%;
    height: auto;
    margin-top:-70px;
    position: absolute;
    margin-left: -8px;
    
    
}


.contact img{
    

    width:11%;
    height: auto;
    margin-top:-70px;
    position: absolute;   
    margin-left: -67px;
    
}

 hr{margin-left: 10%;
    margin-right: 10%;
opacity: 0;
background-color:#f7cd46;
    margin-top: 90px;

}   
    
    
    
    
    
   .imdb img{width:9%;}
    
    .vimeo img{width:6.5%;}
    
    .contact img{width:6%;}
    
    
    
     .logos p {font-family: acumin-pro,arial;
    font-size: 13px;
    color:ghostwhite;
    opacity: 0.5;
     margin-left: 42%;
    margin-top:-15px;
    padding-bottom: 20%;}   
    
  
    
    
      .Container-menu{
        display: none;
    }
    
     .narrativebutton{
        display: none;
    }
    .narrativesub{
        display: none;
    }
    
       .Container-menu{
        display: none;
    }
    
     .narrativebutton{
        display: none;
    }
    .narrativesub{
        display: none;
    }
    
    .projectbutton{
        display: none;
    }
    
.videobutton{
        display: none;
    }
 
     .docubutton{
        display: none;
    }
    
    .doc-navnar li{
        display: none;
    }
    
    input[type=checkbox]:checked ~ .doc-navnar {display: none;
    }
    
    input[type=checkbox]:checked ~ .sub-navnar {display: none;
    }
    
    
    #narrative{display: none;
    }
    
    #documentary{display: none;
    }
    
}
  
    
    
    












@media only screen and (min-device-width: 428px) and (max-device-width:479px) {
    
    .Container{
        max-width: 428px;}
    
    
    
        menu-wrap .hamburger {width: 70px;height: 70px;margin-left:300px;margin-top: 100px;}
    
    
    
    .menu-wrap .menu > div > div > ul > li {font-size: 1.2rem;
  padding: 0.5rem;}
    
    .menu-wrap .menu > div > div > ul >li> ul {font-size: 1.3rem;
  padding: 0.9rem;}
    
    .menu-wrap { left: 3%;}
    
    .menu-wrap .menu > div > div > ul >li > ul > li > a {padding-top: 10px;}
    
     .menu-wrap .toggler {
  position: fixed;
  
  z-index: 2;
  cursor: pointer;
  width: 40px;
  height: 40px;
  opacity: 0;
    display: inline-block;
     margin-top: 30px;
    margin-left: 350px;
    float: right;
    
}
    
    
    
    
    
    .menu-wrap .hamburger {
  position: absolute;
  top: 0;
  left: 0px;
  z-index: 1;
  width: 35px;
  height: 65px;
  padding: 1rem;
  
  display: flex;
  align-items: center;
  justify-content: center;
    margin-left:10px;margin-top: 10px; }
    
    /* Hamburger Line */
.menu-wrap .hamburger > div {
  position: absolute;
  flex: none;
  width: 90%;
  height: 1px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
    margin-top: 25px;
    margin-left: 705px;
}

/* Hamburger Lines - Top & Bottom */
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -9px;
  width: 100%;
  height: 2px;
  background: inherit;
}
    
    /* Moves Line Down */
.menu-wrap .hamburger > div::after {
  top: 9px;
}
    
    
    
    
    
    .showcase h3 {font-size: 1.6rem;padding:45px 50px 0px 35px; font-family: Audrey;font-style:normal;font-weight: 500;}
    
    .showcase h4{font-size: 1.6rem;padding:0px 25px 0px 35px;font-family: Audrey;font-style:normal;font-weight: 500;}
    
   .bio p{
    font-size: 17px;
    padding:10px 40px 2px 40px;
    text-align:justify;
    font-family: acumin-pro;
    font-style:normal;
    
    color: lightgray;
    opacity: 100%;
    justify-content: center;
   
 
    

}
    
    
    .bio{ margin-top:195px;}
    
    .showcase img{
  width: 80%;
    height: auto;
    margin-top:-20%;
    margin-bottom:-55%;
    margin-left: 10%;
       }
    
    .showcase2 img{display: none;}
    
    .logos{
    margin-top: 0%;
}
    
    .imdb img{
    
 padding-left: 0px;
    width:47px;
    height: auto;
    margin-top:-45px;
    position: absolute;   
    
    
}

.vimeo img{
    

    width:13%;
    height: auto;
    margin-top:-50px;
    position: absolute;
    margin-left: -5px;
    
    
}


.contact img{
    

    width:11%;
    height: auto;
    margin-top:-50px;
    position: absolute;   
    margin-left: -65px;
    
}

 hr{margin-left: 10%;
    margin-right: 10%;
opacity: 0;
background-color:#f7cd46;
    margin-top: 80px;

}   
    
    
    
    
    
    .imdb img{width:8%;}
    
    .vimeo img{width:6.5%;}
    
    .contact img{width:6%;}
    
    
    
     .logos p {font-family: acumin-pro,arial;
    font-size: 12px;
    color:ghostwhite;
    opacity: 0.5;
     margin-left: 46%;
    margin-top:-15px;
    padding-bottom: 20%;}   
    
  
    
    
    .Container-menu{
        display: none;
    }
    
     .narrativebutton{
        display: none;
    }
    .narrativesub{
        display: none;
    }
    
       .Container-menu{
        display: none;
    }
    
     .narrativebutton{
        display: none;
    }
    .narrativesub{
        display: none;
    }
    
    .projectbutton{
        display: none;
    }
    
.videobutton{
        display: none;
    }
 
     .docubutton{
        display: none;
    }
    
    .doc-navnar li{
        display: none;
    }
    
    input[type=checkbox]:checked ~ .doc-navnar {display: none;
    }
    
    input[type=checkbox]:checked ~ .sub-navnar {display: none;
    }
    
    
    #narrative{display: none;
    }
    
    #documentary{display: none;
    }
    
}
    
    






@media only screen and (min-device-width: 480px) {
    
    .Container{
        max-width: 480px;}
    
    
    
        .menu-wrap .hamburger {width: 70px;height: 70px;margin-left:300px;margin-top: 100px;}
    
    
    
    .menu-wrap .menu > div > div > ul > li {font-size: 1.4rem;
  padding: 0.6rem;}
    
    .menu-wrap .menu > div > div > ul >li> ul {font-size: 1.4rem;
  padding: 0.6rem;}
    
    .menu-wrap .menu > div > div > ul >li > ul > li > a {padding-top: 10px;
    font-size:1.3rem;}
    
    .menu-wrap { left: 3%;}
    
    
    
    .menu-wrap .toggler {
  position: fixed;
  
  z-index: 2;
  cursor: pointer;
  width: 55px;
  height: 55px;
  opacity: 0;
    display: inline-block;
     margin-top: 30px;
    margin-left: 390px;
    float: right;
    
}
    
    

    
    .menu-wrap .hamburger {
  position: absolute;
  top: 0;
  left: 0px;
  z-index: 1;
  width: 35px;
  height: 65px;
  padding: 1.3rem;
  
  display: flex;
  align-items: center;
  justify-content: center;
    margin-left:1%;margin-top: 5px; }
    
    /* Hamburger Line */
.menu-wrap .hamburger > div {
  position: absolute;
  flex: none;
  width: 80%;
  height: 1px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
    margin-top: 10px;
    margin-left: 805px;
}

/* Hamburger Lines - Top & Bottom */
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -9px;
  width: 100%;
  height: 2px;
  background: inherit;
}
    
    /* Moves Line Down */
.menu-wrap .hamburger > div::after {
  top: 10px;
}
    
    
    
    
    
    .showcase h3 {font-size: 1.8rem;padding:35px 50px 0px 33px; font-family: Audrey;font-style:normal;font-weight: 500;}
    
    .showcase h4{font-size: 1.8rem;padding:0px 25px 0px 33px;font-family: Audrey;font-style:normal;font-weight: 500;}
    
   .bio p{
    font-size: 18px;
    padding:0px 55px 10px 55px;
    text-align:justify;
    font-family: acumin-pro;
    font-style:normal;
    
    color: lightgray;
    opacity: 100%;
    justify-content: center;
   
      
  
    

}
    
    
    .bio{ margin-top:223px;}
    
    .showcase img{
  width: 85%;
    height: auto;
    margin-top:-20%;
    margin-bottom:-55%;
    margin-left: 7%;
       }
    
    .showcase2 img{display: none;}
    
    .logos{
    margin-top: 7%;
}
    
    .imdb img{
    
margin-left: 35px;
    width:38px;
    height: auto;
    margin-top:-100px;
    position: absolute;   
    
    
}

.vimeo img{
    

    width:6%;
    height: auto;
    margin-top:-105px;
    position: absolute;
    margin-left: 5px;
    
    
}


.contact img{
    

    width:5.5%;
    height: auto;
    margin-top:-105px;
    position: absolute;   
    margin-left: -63px;
    
}

 hr{margin-left: 10%;
    margin-right: 10%;
opacity: 0;
background-color:#f7cd46;
    margin-top: 90px;

}   
    
    

    
    
     .logos p {font-family: acumin-pro,arial;
    font-size: 13px;
    color:ghostwhite;
    opacity: 0.5;
     margin-left: 46%;
    margin-top:-65px;
    padding-bottom: 10%;}   
    
  
    
    
      .Container-menu{
        display: none;
    }
    
     .narrativebutton{
        display: none;
    }
    .narrativesub{
        display: none;
    }
    
       .Container-menu{
        display: none;
    }
    
     .narrativebutton{
        display: none;
    }
    .narrativesub{
        display: none;
    }
    
    .projectbutton{
        display: none;
    }
    
.videobutton{
        display: none;
    }
 
     .docubutton{
        display: none;
    }
    
    .doc-navnar li{
        display: none;
    }
    
    input[type=checkbox]:checked ~ .doc-navnar {display: none;
    }
    
    input[type=checkbox]:checked ~ .sub-navnar {display: none;
    }
    
    
    #narrative{display: none;
    }
    
    #documentary{display: none;
    }
    
}
    
    
    











/* ----------- iPad Pro 9----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) and (max-device-width: 1024px)
  
    
   {
    

.Container{
        max-width: 650px;}
    
    
    
    
        .menu-wrap .hamburger {width: 70px;height: 70px;margin-left:300px;margin-top: 100px;}
    
    .menu-wrap .toggler {
  position: fixed;
  
  z-index: 2;
  cursor: pointer;
  width: 60px;
  height: 60px;
  opacity: 0;
    display: inline-block;
    margin-top: 30px;
    margin-left: 650px;
    float: right;
    
}
    
    .menu-wrap .menu > div > div > ul > li {font-size: 1.2rem;
  padding: 1.6rem;}
    
    .menu-wrap .menu > div > div > ul >li> ul {font-size: 1.2rem;
  padding: 1.1rem;}
    
    .menu-wrap .menu > div > div > ul >li > ul > li > a {font-size:1.2rem;} 
    
    .menu-wrap { left: 3%;}
    
    .menu-wrap .hamburger {
  position: absolute;
  top: 0;
  left: 0px;
  z-index: 1;
  width: 40px;
  height: 65px;
  padding: 1rem;
  
  display: flex;
  align-items: center;
  justify-content: center;
    margin-left:1%;margin-top: 10px; }
    
    /* Hamburger Line */
.menu-wrap .hamburger > div {
  position: absolute;
  flex: none;
  width: 73%;
  height: 1px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
     margin-top: 20px;
    margin-left: 1300px;
}

/* Hamburger Lines - Top & Bottom */
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -8px;
  width: 100%;
  height: 2px;
  background: inherit;
}
    
    /* Moves Line Down */
.menu-wrap .hamburger > div::after {
  top: 8px;
}
    
    
    
    
    
    .showcase h3 {font-size: 1.7rem;padding:95px 50px 0px 80px; font-family: Audrey;font-style:normal;font-weight: 500;}
    
    .showcase h4{font-size: 1.7rem;padding:0px 25px 0px 80px;font-family: Audrey;font-style:normal;font-weight: 500;}
    
   .bio p{
    font-size: 17.5px;
    padding:0px 60px 10px 60px;
    text-align:justify;
    font-family: acumin-pro;
    font-style:normal;
    
    color: lightgray;
    opacity: 100%;
    justify-content: center;
   
    

}
    
    
    .bio{ margin-top:300px;
       margin-left: -10px;
       
       }
       
       
       
       
    
    .showcase img{
  width: 73%;
    height: auto;
    margin-top:-19%;
    margin-bottom:-55%;
    margin-left: 13%;
       }
    
    .showcase2 img{display: none;}
    
    .logos{
    margin-top: 8%;
        margin-left: -20px;
}
    
    .imdb img{
    
 margin-left: 35px;
    width:31px;
    height: auto;
    margin-top:5px;
    position: absolute;   
    
    
}

.vimeo img{
    

    width:24px;
    height: auto;
    margin-top:3px;
    position: absolute;
    margin-left: -43px;
    
    
}


.contact img{
    

    width:21.5px;
    height: auto;
    margin-top:4px;
    position: absolute;   
    margin-left: -170px;
    
}

 hr{margin-left:90px;
    margin-right: 380px;
opacity: 0;
background-color:#f7cd46;
    margin-top: 0px;

}   
    
    
    
    
     .logos p {font-family: acumin-pro,arial;
    font-size: 12px;
    color:ghostwhite;
    opacity: 0.5;
     margin-left: 62%;
    margin-top:7%;
    padding-bottom: 15%;}   
    
  
    
    
     .Container-menu{
        display: none;
    }
    
     .narrativebutton{
        display: none;
    }
    .narrativesub{
        display: none;
    }
    
    
    
}








/*Ipad 10 */


@media only screen and (min-device-width: 810px){
    
    .Container{
        max-width: 700px;}



 .menu-wrap .hamburger {width: 70px;height: 70px;margin-left:300px;margin-top: 100px;}
    
    .menu-wrap .toggler {
  position: fixed;
  
  z-index: 2;
  cursor: pointer;
  width: 60px;
  height: 60px;
  opacity: 0;
    display: inline-block;
     margin-top: 30px;
    margin-left: 690px;
    float: right;
    
}
    
    .menu-wrap .menu > div > div > ul > li {font-size: 1.2rem;
  padding: 1.6rem;}
    
    .menu-wrap .menu > div > div > ul >li> ul {font-size: 1.2rem;
  padding: 1.1rem;}
    
    .menu-wrap .menu > div > div > ul >li > ul > li > a {font-size:1.2rem;} 
    
    
    
    .menu-wrap { left: 3%;}
    
    .menu-wrap .hamburger {
  position: absolute;
  top: 0;
  left: 0px;
  z-index: 1;
  width: 40px;
  height: 65px;
  padding: 1rem;
  
  display: flex;
  align-items: center;
  justify-content: center;
    margin-left:1%;margin-top: 10px; }
    
    /* Hamburger Line */
.menu-wrap .hamburger > div {
  position: absolute;
  flex: none;
  width: 80%;
  height: 1px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
    margin-top: 20px;
    margin-left: 1400px;
}

/* Hamburger Lines - Top & Bottom */
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -8px;
  width: 100%;
  height: 2px;
  background: inherit;
}
    
    /* Moves Line Down */
.menu-wrap .hamburger > div::after {
  top: 8px;
}
    
    
    
    
    
    .showcase h3 {font-size: 1.7rem;padding:95px 50px 0px 85px; font-family: Audrey;font-style:normal;font-weight: 500;}
    
    .showcase h4{font-size: 1.7rem;padding:0px 25px 0px 85px;font-family: Audrey;font-style:normal;font-weight: 500;}
    
   .bio p{
    font-size: 17px;
    padding:0px 80px 10px 80px;
    text-align:justify;
    font-family: acumin-pro;
    font-style:normal;
    
    color: lightgray;
    opacity: 100%;
    justify-content: center;
   
    

}
    
    
    .bio{ margin-top:320px;
       margin-left: -10px;
       
       }
       
       
       
       
    
    .showcase img{
  width: 73%;
    height: auto;
    margin-top:-19%;
    margin-bottom:-55%;
    margin-left: 12%;
       }
    
    .showcase2 img{display: none;}
    
    .logos{
    margin-top: 8%;
        margin-left: -20px;
}
    
    .imdb img{
    
 margin-left: 55px;
    width:33px;
    height: auto;
    margin-top:23px;
    position: absolute;   
    
    
}

.vimeo img{
    

    width:25px;
    height: auto;
    margin-top:20px;
    position: absolute;
    margin-left: -25px;
    
    
}


.contact img{
    

    width:22px;
    height: auto;
    margin-top:20px;
    position: absolute;   
    margin-left: -157px;
    
}

 hr{margin-left:110px;
    
opacity: 0;
background-color:#f7cd46;
    margin-top: -50px;

}   
    
    
    
    
     .logos p {font-family: acumin-pro,arial;
    font-size: 12px;
    color:ghostwhite;
    opacity: 0.5;
     margin-left: 62%;
    margin-top:10%;
    padding-bottom: 5%;}   
    
  
    
    
     .Container-menu{
        display: none;
    }
    
     .narrativebutton{
        display: none;
    }
    .narrativesub{
        display: none;
    }
    
    
    
}





/* ----------- iPad Pro 11----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 834px) 
  and (max-device-height: 1194px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
    

.Container{
        max-width: 810px;}



.menu-wrap .hamburger {width: 70px;height: 70px;margin-left:300px;margin-top: 100px;}
    
    .menu-wrap .toggler {
  position: fixed;
  
  z-index: 2;
  cursor: pointer;
  width: 60px;
  height: 60px;
  opacity: 0;
    display: inline-block;
   margin-top: 35px;
    margin-left: 695px;
    float: right;
    
}
    
    .menu-wrap .menu > div > div > ul > li {font-size: 1.2rem;
  padding: 1.6rem;}
    
    .menu-wrap .menu > div > div > ul >li> ul {font-size: 1.2rem;
  padding: 1.1rem;}
    
    .menu-wrap { left: 3%;}
    
    .menu-wrap .hamburger {
  position: absolute;
  top: 0;
  left: 0px;
  z-index: 1;
  width: 40px;
  height: 65px;
  padding: 1rem;
  
  display: flex;
  align-items: center;
  justify-content: center;
    margin-left:1%;margin-top: 30px; }
    
    /* Hamburger Line */
.menu-wrap .hamburger > div {
  position: absolute;
  flex: none;
  width: 80%;
  height: 1px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
     margin-top: 10px;
    margin-left: 1410px;
}

/* Hamburger Lines - Top & Bottom */
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -8px;
  width: 100%;
  height: 2px;
  background: inherit;
}
    
    /* Moves Line Down */
.menu-wrap .hamburger > div::after {
  top: 8px;
}
    
    
    
    
    
    .showcase h3 {font-size: 1.7rem;padding:100px 50px 0px 130px; font-family: Audrey;font-style:normal;font-weight: 500;}
    
    .showcase h4{font-size: 1.7rem;padding:0px 25px 0px 130px;font-family: Audrey;font-style:normal;font-weight: 500;}
    
   .bio p{
    font-size: 18px;
    padding:0px 90px 10px 90px;
    text-align:justify;
    font-family: acumin-pro;
    font-style:normal;
    
    color: lightgray;
    opacity: 100%;
    justify-content: center;
   
    

}
    
    
    .bio{ margin-top:370px;
       margin-left: -5px;
       
       }
       
       
       
       
    
    .showcase img{
  width: 63%;
    height: auto;
    margin-top:-14%;
    margin-bottom:-55%;
    margin-left: 17%;
       }
    
    .showcase2 img{display: none;}
    
    .logos{
    margin-top: 8%;
        margin-left: 30px;
}
    
    .imdb img{
    
 margin-left: 20px;
    width:33px;
    height: auto;
    margin-top:-140px;
    position: absolute;   
    
    
}

.vimeo img{
    

    width:25px;
    height: auto;
    margin-top:-145px;
    position: absolute;
    margin-left: -75px;
    
    
}


.contact img{
    

    width:22.5px;
    height: auto;
    margin-top:-145px;
    position: absolute;   
    margin-left: -225px;
    
}

 hr{margin-left:110px;
    
opacity: 0;
background-color:#f7cd46;
    margin-top: 150px;

}   
    
    
    
    
     .logos p {font-family: acumin-pro,arial;
    font-size: 11px;
    color:ghostwhite;
    opacity: 0.5;
     margin-left: 66%;
    margin-top:-105px;
    padding-bottom: 5%;}   
    
  
    
    
     .Container-menu{
        display: none;
    }
    
     .narrativebutton{
        display: none;
    }
    .narrativesub{
        display: none;
    }
    
    
    
}





/*ipad  12*/
@media only screen and (min-device-width: 1366px) and (orientation:landscape) {


.Container{
        max-width: 1000px;}

    
     .menu-wrap .hamburger {width: 70px;height: 70px;margin-left:300px;margin-top: 100px;}
    
    
    
    .menu-wrap .menu > div > div > ul > li {font-size: 1.2rem;
  padding: 1.2rem;}
    
    .menu-wrap .menu > div > div > ul >li> ul {font-size: 1.2rem;
  padding: 1.2rem;}
    
    .menu-wrap { left: 3%;}
    
    
    
    .menu-wrap .toggler {
  position: fixed;
  
  z-index: 2;
  cursor: pointer;
  width: 55px;
  height: 55px;
  opacity: 0;
    display: inline-block;
     margin-top: 10px;
    margin-left: 390px;
    float: right;
        right:8%;
    
}
       
    
    
    .menu-wrap .hamburger {
  position: absolute;
  top: 0;
  left: 0px;
  z-index: 1;
  width: 55px;
  height: 65px;
  padding: 1rem;
  
  display: flex;
  align-items: center;
  justify-content: center;
    margin-left:1%;margin-top: 10px; }
    
    /* Hamburger Line */
.menu-wrap .hamburger > div {
  position: fixed;
  flex: none;
  width: 30px;
  height: 1px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
    margin-top: 5px;
   right: 8%;
    
}

/* Hamburger Lines - Top & Bottom */
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
   content: '';
  position: absolute;
  z-index: 1;
  top: -8px;
  width: 100%;
  height: 2px;
  background: inherit;
}
    
    /* Moves Line Down */
.menu-wrap .hamburger > div::after {
  top: 8px;
}
    
    
    
    .showcase h3 {font-size: 1.7rem;padding:80px 50px 0px 210px; font-family: Audrey;font-style:normal;font-weight: 500;}
    
    .showcase h4{font-size: 1.7rem;padding:0px 25px 0px 210px;font-family: Audrey;font-style:normal;font-weight: 500;}
    
   
    
    
    .bio{ margin-top:450px;
    margin-left: 0px;
    
    }
    
    
    
    
    .bio p{
    font-size: 18px;
    padding:0px 170px 10px 170px;
    text-align:justify;
    font-family: acumin-pro;
    font-style:normal;
    
    color: lightgray;
    opacity: 100%;
    justify-content: center;
   
      
}
    
    

    .showcase img{
  width: 540px;
    height: auto;
    margin-top:-14%;
    margin-bottom:-55%;
    margin-left:21%;
       }
    
    .showcase2 img{display: none;}
    
    .logos{
    margin-top: 0;
        margin-left: 40px;
        margin-bottom: 0px;
}
    
    .imdb img{
    
 margin-left: 85px;
    width:33px;
    height: auto;
    margin-top:-20px;
    position: relative;
        padding-bottom: 0px;
    
    
}

.vimeo img{
    

    width:25px;
    height: auto;
    margin-top:-20px;
    position: relative;
    margin-left: -160px;
    padding-bottom: 0px;
    
}


.contact img{
    

    width:23px;
    height: auto;
    margin-top:-20px;
    position: relative;   
    margin-left: -355px;
    padding-bottom: 0px;
}

 hr{margin-left: 10%;
    margin-right: 10%;
opacity: 0;
background-color:#f7cd46;
    margin-top: 90px;

}   
    
    

     .logos p {font-family: acumin-pro,arial;
    font-size: 11px;
    color:ghostwhite;
    opacity: 0.5;
     margin-left: 65%;
    margin-top:-15px;
    padding-bottom: 10%;}   
    
  
    
    
     .Container-menu{
        display: none;
    }
    
     .narrativebutton{
        display: none;
    }
    .narrativesub{
        display: none;
    }
    
    .menu-wrap{
        display: block;
    }
    
     ul.sub-navnar{display: none;}
    
    input[type=checkbox]:checked ~ .sub-navnar {
        display: none;}
    
    
    #narrative{display: none;}
    
    .videobutton h3{display: none;}
    
    .videobutton a{display: none;}
    
    .videobutton{display: none;}
    
    .projectbutton h3{display: none;}
    
    .projectbutton a{display: none;}
    
    
    .projectbutton{display: none;}
    
    ul.doc-navnar{display: none;}
    #documentary{display: none;}
    
    input[type=checkbox]:checked ~ .doc-navnar {display: none;}
    
    .doc-navnar li a{display: none;}
        
     .doc-navnar li {display: none;} 
        
      .docubutton a{display: none;}
    
       .docubutton{display: none;}
    
     #Layer_1{display: none;}
}
    








/*ipad 11 */
@media only screen and (min-device-width: 1113px) and (max-device-width:1365px)and (orientation:landscape) {

.Container{
        max-width: 800px;}
    
     .menu-wrap .hamburger {width: 70px;height: 70px;margin-left:300px;margin-top: 100px;}
    
    
    
    .menu-wrap .menu > div > div > ul > li {font-size: 1.2rem;
  padding: 1.2rem;}
    
    .menu-wrap .menu > div > div > ul >li> ul {font-size: 1.2rem;
  padding: 1.2rem;}
    
    .menu-wrap { left: 3%;}
    
    
    
    .menu-wrap .toggler {
  position: fixed;
  
  z-index: 2;
  cursor: pointer;
  width: 55px;
  height: 55px;
  opacity: 0;
    display: inline-block;
     margin-top: 10px;
    margin-left: 390px;
    float: right;
        right:8%;
    
}
       
    
    
    .menu-wrap .hamburger {
  position: absolute;
  top: 0;
  left: 0px;
  z-index: 1;
  width: 55px;
  height: 65px;
  padding: 1rem;
  
  display: flex;
  align-items: center;
  justify-content: center;
    margin-left:1%;margin-top: 10px; }
    
    /* Hamburger Line */
.menu-wrap .hamburger > div {
  position: fixed;
  flex: none;
  width: 30px;
  height: 1px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
    margin-top: 5px;
   right: 8%;
    
}

/* Hamburger Lines - Top & Bottom */
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
   content: '';
  position: absolute;
  z-index: 1;
  top: -8px;
  width: 100%;
  height: 2px;
  background: inherit;
}
    
    /* Moves Line Down */
.menu-wrap .hamburger > div::after {
  top: 8px;
}
    
    
    
    .showcase h3 {font-size: 1.7rem;padding:90px 50px 0px 100px; font-family: Audrey;font-style:normal;font-weight: 500;}
    
    .showcase h4{font-size: 1.7rem;padding:0px 25px 0px 100px;font-family: Audrey;font-style:normal;font-weight: 500;}
    
   
    
    
    .bio{ margin-top:377px;
    margin-left: 0px;
    
    }
    
    
    
    
    .bio p{
    font-size: 18px;
    padding:0px 100px 10px 70px;
    text-align:justify;
    font-family: acumin-pro;
    font-style:normal;
    
    color: lightgray;
    opacity: 100%;
    justify-content: center;
   
      
}
    
    

    .showcase img{
  width: 550px;
    height: auto;
    margin-top:-17%;
    margin-bottom:-55%;
    margin-left:12%;
       }
    
    .showcase2 img{display: none;}
    
    .logos{
    margin-top: 0;
        margin-left: 40px;
        margin-bottom: 0px;
}
    
    .imdb img{
    
 margin-left: -5px;
    width:33px;
    height: auto;
    margin-top:-20px;
    position: relative;
        padding-bottom: 0px;
    
    
}

.vimeo img{
    

    width:25px;
    height: auto;
    margin-top:-20px;
    position: relative;
    margin-left: -125px;
    padding-bottom: 0px;
    
}


.contact img{
    

    width:23px;
    height: auto;
    margin-top:-20px;
    position: relative;   
    margin-left: -275px;
    padding-bottom: 0px;
}

 hr{margin-left: 10%;
    margin-right: 10%;
opacity: 0;
background-color:#f7cd46;
    margin-top: 90px;

}   
    
    

     .logos p {font-family: acumin-pro,arial;
    font-size: 11px;
    color:ghostwhite;
    opacity: 0.5;
     margin-left: 63%;
    margin-top:0px;
    padding-bottom: 10%;}   
    
  
    
    
     .Container-menu{
        display: none;
    }
    
     .narrativebutton{
        display: none;
    }
    .narrativesub{
        display: none;
    }
    
    .menu-wrap{
        display: block;
    }
    
     ul.sub-navnar{display: none;}
    
    input[type=checkbox]:checked ~ .sub-navnar {
        display: none;}
    
    
    #narrative{display: none;}
    
    .videobutton h3{display: none;}
    
    .videobutton a{display: none;}
    
    .videobutton{display: none;}
    
    .projectbutton h3{display: none;}
    
    .projectbutton a{display: none;}
    
    
    .projectbutton{display: none;}
    
    ul.doc-navnar{display: none;}
    #documentary{display: none;}
    
    input[type=checkbox]:checked ~ .doc-navnar {display: none;}
    
    .doc-navnar li a{display: none;}
        
     .doc-navnar li {display: none;} 
        
      .docubutton a{display: none;}
    
       .docubutton{display: none;}
    
     #Layer_1{display: none;}
}
    








/*Laptop-Small size*/


@media only screen and (min-device-width: 1280px)and (max-height:800px){


.Container{
        max-width: 600px;}



.showcase h3 {font-size: 1.1rem;padding:50px 50px 0px 150px; font-family: Audrey;font-style:normal;font-weight: 500;}
    
    .showcase h4{font-size: 1.1rem;padding:0px 25px 0px 150px;font-family: Audrey;font-style:normal;font-weight: 500;}
    
   
    
    
    .bio{ margin-top:280px;
    margin-left: 25px;}
    
    
    
    
    .bio p{
    font-size: 12px;
    padding:0px 85px 2px 65px;
    text-align:justify;
    font-family: acumin-pro;
    font-style:normal;
    
    color: lightgray;
    opacity: 100%;
    justify-content: center;
  
      
  
    

}
    
    .showcase img{
  width: 300px;
    height: auto;
    margin-top:-13%;
    margin-bottom:-55%;
    margin-left: 25%;
       }
    
    .showcase2 img{display: none;}
    
    .logos{
    margin-top: 55%;
        margin-left: 70px;
}
    
    .imdb img{
    
 margin-left: -10px;
    width:21px;
    height: auto;
    margin-top:-110px;
    position: absolute;   
    
    
}

.vimeo img{
    

    width:15.5px;
    height: auto;
    margin-top:-113px;
    position: absolute;
    margin-left: -80px;
    
    
}


.contact img{
    

    width:14px;
    height: auto;
    margin-top:-113px;
    position: absolute;   
    margin-left: -188px;
    
}

 hr{margin-left: 10%;
    margin-right: 10%;
opacity: 0;
background-color:#f7cd46;
    margin-top: 90px;

}   
    
    
     .logos p {font-family: acumin-pro,arial;
    font-size: 8px;
    color:lightgray;
    opacity: 0.5;
     margin-left: 66%;
    margin-top:-120px;
    padding-bottom: 1%;}   
    
  
    
    
     .Container-menu{
        display: block;
    }
    
     .narrativebutton{
        display: block;
    }
    .narrativesub{
        display: block;
    }
    
    
   #Layer_1{
  margin-left: 45px;
    position: absolute;
       margin-top:-324px;
       width: 160px;
       height: auto;
} 
    
    
    
 .narrativebutton{
    opacity: 0%;
   
    position: absolute;
    background-color:transparent;
     color: gray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:590px; 
     margin-left: 95px;
     cursor: default;
     width: 105px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 9px;
     
    
    
}

.narrativebutton a{
    opacity: 100%;
    color: gray;
    background-color: transparent;
  
    
}



   .sub-navnar li {
  font-family: acumin-pro;
    width: 130px;
    text-decoration: none;
       color: lightgray;
    list-style-type: none;
   padding-bottom: 3px;
      
    
}


.sub-navnar li a{
font-family: acumin-pro;
    font-size: 10px;
    text-decoration: none;
    color: lightgray;
   
   }
    
    
   
    
input[type=checkbox]:checked ~ .sub-navnar {
    display: block;
    position: absolute;
    margin-top: -255px;
   
    z-index: 99999;
    width: 100px;
    height: 100px;
    background-color: transparent;
    margin-left:95px;
    font-size: 15px;
    font-family:acumin-pro;
  color: lightgray;
    list-style-type: none;
}


#narrative{
    position: absolute;
    width: 65px;
    height: 40px;
    top: 580px;
   
    margin-left: 95px;
    z-index: 1;
    opacity: 0;
    cursor: default;
    
}
    
    
    ul.sub-navnar{
        position: absolute;
      margin-top: 200px;
        width: 250px;
        margin-left:150px;
        display: none;
    }   
    
    
    
    .docubutton{
    opacity: 0;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    background-color:transparent;
     color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:590px; 
     margin-left: 440px;
     cursor: pointer;
     width: 105px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 9px;
     
    
    
}

.docubutton a{
    opacity: 0%;
    color: lightgray;
    background-color: transparent;
  
    
}
    
    .doc-navnar li {
  font-family: acumin-pro;
    width: 130px;
    text-decoration: none;
       color: lightgray;
    list-style-type: none;
   padding-bottom: 10px;
    
}


.doc-navnar li a{
font-family: acumin-pro;
    font-size: 10px;
    text-decoration: none;
    color: lightgray;
    
   }
    
    
   
    
input[type=checkbox]:checked ~ .doc-navnar {
    display: block;
    position: absolute;
   margin-top: -250px;
    z-index: 99999;
    width: 100px;
    height: 100px;
    background-color: transparent;
    margin-left:455px;
    font-size: 15px;
    font-family:acumin-pro;
    color: lightgray;
    list-style-type: none;
}


#documentary{
    position: absolute;
    width: 90px;
    height: 40px;
    top: 579px;
    
    margin-left: 430px;
    z-index: 1;
    opacity: 0;
    cursor: default;
    
}
    
    
    ul.doc-navnar{
        position: absolute;
      margin-top: 200px;
        width: 250px;
        margin-left:140px;
        display: none;
    }   
    
    
    
    
    
    
    
    
   .projectbutton{
    opacity: 100;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    background-color:transparent;
     color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:505px; 
     margin-left: 240px;
     cursor: default;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 12px;
     
    
    
}

.projectbutton a{
    opacity: 100;
    color: white;
    background-color: transparent;
     transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: static;
    color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:745px; 
     left: 285px;
     cursor: default;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 12px;
  
    
}  
    
 .projectbutton h3{
    opacity: 0;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position:static;
    background-color:transparent;
    color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:645px; 
     left: 340px;
     cursor: default;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 10px;
     
    
    
}   
    
    
    
    
 .videobutton{
    opacity: 100;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    background-color:transparent;
     color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:717px; 
    margin-left: 120px;
     cursor: default;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 14px;
     
    
    
}

.videobutton a{
    opacity: 100;
    
    background-color: transparent;
     transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
     cursor: pointer;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 14px;
  
    
}  
    
 .videobutton h3{
    opacity:0;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    background-color:transparent;
     color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
     cursor: default;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 10px;
     left:73%;
     
    
    
}   
       
 .Container-menu{
        display: block;
    }
    
     .narrativebutton{
        display: block;
    }
    .narrativesub{
        display: block;
    }
    
    .menu-wrap{
        display: none;
    }
    
     ul.sub-navnar{display: none;}
    
    input[type=checkbox]:checked ~ .sub-navnar {
        display: block;}
    
    
    #narrative{display:block;}
    
    .videobutton h3{display:block;}
    
    .videobutton a{display: block;}
    
    .videobutton{display: block;}
    
    .projectbutton h3{display: block;}
    
    .projectbutton a{display:block;}
    
    
    .projectbutton{display: block;}
    
    ul.doc-navnar{display: none;}
    #documentary{display: block;}
    
    input[type=checkbox]:checked ~ .doc-navnar {display: block;}
    
    .doc-navnar li a{display: block;}
        
     .doc-navnar li {display: block;} 
        
      .docubutton a{display: block;}
    
       .docubutton{display: block;}
    
     #Layer_1{display: block;}
   
    
    
    
    
    
    
    
    
 
}





















/*Laptop-Medium size*/


@media only screen and (min-device-width: 1366px)and (max-device-height:768px){


.Container{
        max-width: 600px;}


.showcase h3 {font-size: 1rem;padding:40px 50px 0px 150px; font-family: Audrey;font-style:normal;font-weight: 500;}
    
    .showcase h4{font-size: 1rem;padding:0px 25px 0px 150px;font-family: Audrey;font-style:normal;font-weight: 500;}
    
   
    
    
    .bio{ margin-top:275px;
    margin-left: 35px;}
    
    
    
    
    .bio p{
    font-size: 11px;
    padding:0px 125px 5px 65px;
    text-align:justify;
    font-family: acumin-pro;
    font-style:normal;
    
    color: lightgray;
    opacity: 100%;
    justify-content: center;
   
      
  
    

}
    
    .showcase img{
  width: 300px;
    height: auto;
    margin-top:-13%;
    margin-bottom:-55%;
    margin-left: 25%;
       }
    
    .showcase2 img{display: none;}
    
    .logos{
    margin-top: 55%;
        margin-left: 70px;
}
    
    .imdb img{
    
 margin-left: -20px;
    width:21px;
    height: auto;
    margin-top:-130px;
    position: absolute;   
    
    
}

.vimeo img{
    

    width:15px;
    height: auto;
    margin-top:-133px;
    position: absolute;
    margin-left: -90px;
    
    
}


.contact img{
    

    width:14.5px;
    height: auto;
    margin-top:-133px;
    position: absolute;   
    margin-left: -200px;
    
}

 hr{margin-left: 10%;
    margin-right: 10%;
opacity: 0;
background-color:#f7cd46;
    margin-top: 90px;

}   
    
    
     .logos p {font-family: acumin-pro,arial;
    font-size: 7px;
    color:lightgray;
    opacity: 0.5;
     margin-left: 68%;
    margin-top:-140px;
    padding-bottom: 0px;}   
    
  
    
    
     .Container-menu{
        display: block;
    }
    
     .narrativebutton{
        display: block;
    }
    .narrativesub{
        display: none;
    }
    
    
   #Layer_1{
  margin-left: 45px;
    position: absolute;
       margin-top:-338px;
       width: 140px;
       height: auto;
} 
    
    
    
 .narrativebutton{
    opacity: 0%;
   
    position: absolute;
    background-color:transparent;
     color: gray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:560px; 
     margin-left: 105px;
     cursor: default;
     width: 105px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 9px;
     
    
    
}

.narrativebutton a{
    opacity: 0%;
    color: gray;
    background-color: transparent;
  
    
}



   .sub-navnar li {
  font-family: acumin-pro;
    width: 130px;
    text-decoration: none;
       color: lightgray;
    list-style-type: none;
   padding-bottom: 3px;
      
    
}


.sub-navnar li a{
font-family: acumin-pro;
    font-size: 10.5px;
    text-decoration: none;
    color: lightgray;
   
   }
    
    
   
    
input[type=checkbox]:checked ~ .sub-navnar {
    display: block;
    position: absolute;
    margin-top: -275px;
   
    z-index: 99999;
    width: 100px;
    height: 100px;
    background-color: transparent;
    margin-left:105px;
    font-size: 15px;
    font-family:acumin-pro;
  color: lightgray;
    list-style-type: none;
}


#narrative{
    position: absolute;
    width: 65px;
    height: 40px;
    top: 548px;
   
    margin-left: 103px;
    z-index: 1;
    opacity: 0;
    cursor: default;
    
}
    
    
    ul.sub-navnar{
        position: absolute;
      margin-top: 200px;
        width: 250px;
        margin-left:150px;
        display: none;
    }   
    
    
    
    .docubutton{
    opacity: 0;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    background-color:transparent;
     color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:560px; 
     margin-left: 420px;
     cursor: default;
     width: 105px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 9px;
     
    
    
}

.docubutton a{
    opacity: 0%;
    color: lightgray;
    background-color: transparent;
  
    
}
    
    .doc-navnar li {
  font-family: acumin-pro;
    width: 130px;
    text-decoration: none;
       color: lightgray;
    list-style-type: none;
   padding-bottom: 10px;
    
}


.doc-navnar li a{
font-family: acumin-pro;
    font-size: 10.5px;
    text-decoration: none;
    color: lightgray;
    
   }
    
    
   
    
input[type=checkbox]:checked ~ .doc-navnar {
    display: block;
    position: absolute;
   margin-top: -270px;
    z-index: 99999;
    width: 100px;
    height: 100px;
    background-color: transparent;
    margin-left:440px;
    font-size: 15px;
    font-family:acumin-pro;
    color: lightgray;
    list-style-type: none;
}


#documentary{
    position: absolute;
    width: 90px;
    height: 40px;
    top: 550px;
    
    margin-left: 415px;
    z-index: 1;
    opacity: 0;
    cursor: default;
    
}
    
    
    ul.doc-navnar{
        position: absolute;
      margin-top: 200px;
        width: 250px;
        margin-left:150px;
        display: none;
    }   
    
    
    
    
    
    
    
    
   .projectbutton{
    opacity: 100;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    background-color:transparent;
     color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:485px; 
     margin-left: 230px;
     cursor: pointer;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 12px;
     
    
    
}

.projectbutton a{
    opacity: 100%;
    color: white;
    background-color: transparent;
     transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: static;
    color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:745px; 
     left: 280px;
     cursor: pointer;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 12px;
  
    
}  
    
 .projectbutton h3{
    opacity: 0;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position:static;
    background-color:transparent;
    color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:625px; 
     left: 330px;
     cursor: default;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 10px;
     
    
    
}   
    
    
    
    
 .videobutton{
    opacity: 100;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    background-color:transparent;
     color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:661px; 
    margin-left: 120px;
     cursor: pointer;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 14px;
     
    
    
}

.videobutton a{
    opacity: 100%;
    
    background-color: transparent;
     transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
     cursor: pointer;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 14px;
  
    
}  
    
 .videobutton h3{
    opacity:0;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    background-color:transparent;
     color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
     cursor: default;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 10px;
     left:69%;
     
    
    
}   
       
    
    
    
    
    
    
    .menu-wrap{display: none;}
    
    
 
}












































/*Macbook*/

@media only screen and  (min-device-height: 1440px) and (max-device-height: 1440px) and (min-device-width: 2304px) and (max-device-width: 2304px) {


.Container{
        max-width: 1100px;}
 


.showcase h3 {font-size: 2rem;padding:90px 50px 0px 255px; font-family: Audrey;font-style:normal;font-weight: 500;}
    
    .showcase h4{font-size: 2rem;padding:0px 25px 0px 255px;font-family: Audrey;font-style:normal;font-weight: 500;}
    
   
    
    
    .bio{ margin-top:490px;
    margin-left: 30px;}
    
    
    
    
    .bio p{
    font-size: 21px;
    padding:0px 150px 5px 110px;
    text-align:justify;
    font-family: acumin-pro;
    font-style:normal;
    
    color: lightgray;
    opacity: 100%;
    justify-content: center;
   
      
  
    

}
    
    .showcase img{
  width: 600px;
    height: auto;
    margin-top:-15%;
    margin-bottom:-55%;
    margin-left: 23%;
       }
    
    .showcase2 img{display: none;}
    
    .logos{
    margin-top: 58%;
        margin-left: 70px;
}
    
    .imdb img{
    
 margin-left: 10px;
    width:40px;
    height: auto;
    margin-top:-198px;
    position: absolute;   
    
    
}

.vimeo img{
    

    width:28px;
    height: auto;
    margin-top:-200px;
    position: absolute;
    margin-left: -125px;
    
    
}


.contact img{
    

    width:26px;
    height: auto;
    margin-top:-200px;
    position: absolute;   
    margin-left: -335px;
    
}

 hr{margin-left: 10%;
    margin-right: 10%;
opacity: 0;
background-color:#f7cd46;
    margin-top: 90px;

}   
    
    
     .logos p {font-family: acumin-pro,arial;
    font-size: 14px;
    color:lightgray;
    opacity: 0.5;
     margin-left: 68%;
    margin-top:-200px;
    padding-bottom: 0%;}   
    
  
    
    
     .Container-menu{
        display: block;
    }
    
     .narrativebutton{
        display: block;
    }
    .narrativesub{
        display: none;
    }
    
    
   #Layer_1{
  margin-left: 235px;
    position: absolute;
       margin-top:-578px;
       width: 270px;
       height: auto;
} 
    
    
    
 .narrativebutton{
    opacity: 0%;
   
    position: absolute;
    background-color:transparent;
     color: gray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:1080px; 
     margin-left: 140px;
     cursor: default;
     width: 105px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 16px;
     
    
    
}

.narrativebutton a{
    opacity: 0%;
    color: gray;
    background-color: transparent;
  
    
}



   .sub-navnar li {
  font-family: acumin-pro;
    width: 135px;
    text-decoration: none;
       color: lightgray;
    list-style-type: none;
   padding-bottom: 15px;
      
    
}


.sub-navnar li a{
font-family: acumin-pro;
    font-size: 18px;
    text-decoration: none;
    color: lightgray;
    font-weight: bolder;
   
   }
    
    
   
    
input[type=checkbox]:checked ~ .sub-navnar {
    display: block;
    position: absolute;
    margin-top: -440px;
   
    z-index: 99999;
    width: 100px;
    height: 100px;
    background-color: transparent;
    margin-left:135px;
    font-size: 15px;
    font-family:acumin-pro;
  color: lightgray;
    list-style-type: none;
}


#narrative{
    position: absolute;
    width: 170px;
    height: 40px;
    top: 1075px;
   
    margin-left: 110px;
    z-index: 1;
    opacity: 0;
    cursor: default;
    
}
    
    
    ul.sub-navnar{
        position: absolute;
      margin-top:200px;
        width: 250px;
        margin-left:200px;
        display: none;
    }   
    
    
    
    .docubutton{
    opacity: 0;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    background-color:transparent;
     color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:1080px; 
     margin-left: 830px;
     cursor: default;
     width: 105px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 16px;
     
    
    
}

.docubutton a{
    opacity: 0%;
    color: lightgray;
    background-color: transparent;
  
    
}
    
    .doc-navnar li {
  font-family: acumin-pro;
    width: 130px;
    text-decoration: none;
       color: lightgray;
    list-style-type: none;
   padding-bottom: 15px;
    
}


.doc-navnar li a{
font-family: acumin-pro;
    font-size: 20px;
    text-decoration: none;
    color: lightgray;
    font-weight: bolder;
    
   }
    
    
   
    
input[type=checkbox]:checked ~ .doc-navnar {
    display: block;
    position: absolute;
    margin-top: -480px;
    z-index: 99999;
    width: 100px;
    height: 100px;
    background-color: transparent;
    margin-left:870px;
    font-size: 15px;
    font-family:acumin-pro;
    color: lightgray;
    list-style-type: none;
}


#documentary{
    position: absolute;
    width: 200px;
    height: 40px;
    top: -480px;
    position: relative;
    margin-left: 795px;
    z-index: 1;
    opacity: 0;
    cursor: default;
    
}
    
    
    ul.doc-navnar{
        position: absolute;
      margin-top: 200px;
        width: 250px;
        margin-left:150px;
        display: none;
    }   
    
    
    
    
    
    
    
    
   .projectbutton{
    opacity: 100;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    background-color:transparent;
     color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:925px; 
     margin-left: 415px;
     cursor: default;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 15px;
     
    
    
}

.projectbutton a{
    opacity: 100%;
    color: white;
    background-color: transparent;
     transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: static;
    color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:745px; 
     left: 280px;
     cursor: pointer;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 19px;
  
    
}  
    
 .projectbutton h3{
    opacity: 0;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: static;
    background-color:transparent;
    color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:745px; 
     left: 280px;
     cursor: default;
     width: 260px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 19px;
     
    
    
}   
    
    
    
    
 .videobutton{
    opacity: 100;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    background-color:transparent;
     color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:1282px; 
     margin-left: 483px;
     cursor: pointer;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 11px;
     
    
    
}

.videobutton a{
    opacity: 100%;
    
    background-color: transparent;
     transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: static;
    color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
     cursor: pointer;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 14px;
  
    
}  
    
 .videobutton h3{
    opacity: 0;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: static;
    background-color:transparent;
     color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
     cursor: default;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 19px;
     
    
    
}   
       
    
.Container-menu{
        display: block;
    }
    
     .narrativebutton{
        display: block;
    }
    .narrativesub{
        display: block;
    }
    
    .menu-wrap{
        display: none;
    }
    
     ul.sub-navnar{display: none;}
    
    input[type=checkbox]:checked ~ .sub-navnar {
        display: block;}
    
    
    #narrative{display:block;}
    
    .videobutton h3{display:block;}
    
    .videobutton a{display: block;}
    
    .videobutton{display: block;}
    
    .projectbutton h3{display: block;}
    
    .projectbutton a{display:block;}
    
    
    .projectbutton{display: block;}
    
    ul.doc-navnar{display: none;}
    #documentary{display: block;}
    
    input[type=checkbox]:checked ~ .doc-navnar {display: block;}
    
    .doc-navnar li a{display: block;}
        
     .doc-navnar li {display: block;} 
        
      .docubutton a{display: block;}
    
       .docubutton{display: block;}
    
     #Layer_1{display: block;}
   
        
    
    
    
    
   
    
 
}



    
    
    
    






@media only screen and (min-device-width: 2305px) 
   {
 
.Container{
        max-width: 900px;}


.showcase h3 {font-size: 1.7rem;padding:110px 50px 0px 180px; font-family: Audrey;font-style:normal;font-weight: 500;}
    
    .showcase h4{font-size: 1.7rem;padding:0px 25px 0px 180px;font-family: Audrey;font-style:normal;font-weight: 500;}
    
   
    
    
    .bio{ margin-top:420px;
    margin-left: -5px;}
    
    
    
    
    .bio p{
    font-size: 16px;
    padding:0px 145px 2px 135px;
    text-align:justify;
    font-family: acumin-pro;
    font-style:normal;
    
    color: lightgray;
    opacity: 100%;
    justify-content: center;
   
      
  
    

}
    
    .showcase img{
  width: 500px;
    height: auto;
    margin-top:-14%;
    margin-bottom:-55%;
    margin-left: 20%;
       }
    
    .showcase2 img{display: none;}
    
    .logos{
    margin-top: 55%;
        margin-left: 70px;
}
    
    .imdb img{
    
 margin-left: 20px;
    width:25px;
    height: auto;
    margin-top:-130px;
    position: absolute;   
    
    
}

.vimeo img{
    

    width:21px;
    height: auto;
    margin-top:-135px;
    position: absolute;
    margin-left: -95px;
    
    
}


.contact img{
    

    width:19px;
    height: auto;
    margin-top:-135px;
    position: absolute;   
    margin-left: -265px;
    
}

 hr{margin-left: 10%;
    margin-right: 10%;
opacity: 0;
background-color:#f7cd46;
    margin-top: 90px;

}   
    
    
     .logos p {font-family: acumin-pro,arial;
    font-size:11px;
    color:lightgray;
    opacity: 0.5;
     margin-left: 61%;
    margin-top:-135px;
    padding-bottom: 5%;}   
    
  
    
    
     .Container-menu{
        display: block;
    }
    
     .narrativebutton{
        display: block;
    }
    .narrativesub{
        display: none;
    }
    
    
   #Layer_1{
  margin-left: 160px;
    position: absolute;
       margin-top:-455px;
       width: 210px;
       height: auto;
} 
    
    
    
 .narrativebutton{
    opacity: 0%;
   
    position: absolute;
    background-color:transparent;
     color: gray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:955px; 
     margin-left: 135px;
     cursor: default;
     width: 105px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 13.5px;
     
    
    
}

.narrativebutton a{
    opacity: 0%;
    color: gray;
    background-color: transparent;
  
    
}



   .sub-navnar li {
  font-family: acumin-pro;
    width: 130px;
    text-decoration: none;
       color: lightgray;
    list-style-type: none;
   padding-bottom: 15px;
      
    
}


.sub-navnar li a{
font-family: acumin-pro;
    font-size: 14px;
    text-decoration: none;
    color: lightgray;
   
   }
    
    
   
    
input[type=checkbox]:checked ~ .sub-navnar {
    display: block;
    position: absolute;
    margin-top: -350px;
   
    z-index: 99999;
    width: 100px;
    height: 100px;
    background-color: transparent;
    margin-left:134px;
    font-size: 15px;
    font-family:acumin-pro;
  color: lightgray;
    list-style-type: none;
}


#narrative{
    position: absolute;
    width: 120px;
    height: 40px;
    top: 945px;
   
    margin-left: 120px;
    z-index: 1;
    opacity: 0;
    cursor: default;
    display: block;
    
}
    
    
    ul.sub-navnar{
        position: absolute;
      margin-top: 200px;
        width: 250px;
        margin-left:150px;
        display: none;
    }   
    
    
    
    .docubutton{
    opacity:0;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    background-color:transparent;
     color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:955px; 
     margin-left:635px;
     cursor: default;
     width: 105px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 13px;
     
    
    
}

.docubutton a{
    opacity: 0%;
    color: lightgray;
    background-color: transparent;
  
    
}
    
    .doc-navnar li {
  font-family: acumin-pro;
    width: 130px;
    text-decoration: none;
       color: lightgray;
    list-style-type: none;
   padding-bottom: 15px;
        display: none;
    
}


.doc-navnar li a{
font-family: acumin-pro;
    font-size: 14px;
    text-decoration: none;
    color: lightgray;
    display: block;
    
   }
    
    
   
    
input[type=checkbox]:checked ~ .doc-navnar {
    display: block;
    position: absolute;
   margin-top: -350px;
    z-index: 99999;
    width: 100px;
    height: 100px;
    background-color: transparent;
    margin-left:670px;
    font-size: 15px;
    font-family:acumin-pro;
    color: lightgray;
    list-style-type: none;
}


#documentary{
    position: absolute;
    width: 130px;
    height: 40px;
    top: 945px;
    
    margin-left: 625px;
    z-index: 1;
    opacity: 0;
    cursor: default;
display: block;
}
    
    
    ul.doc-navnar{
        position: absolute;
      margin-top: 200px;
        width: 250px;
        margin-left:150px;
        display: none;
    }   
    
    
    
    
    
    
    
    
   .projectbutton{
    opacity: 100;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    background-color:transparent;
     color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:835px; 
     margin-left: 350px;
     cursor: default;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 14px;
     
    
    
}

.projectbutton a{
    opacity: 100%;
    color: white;
    background-color: transparent;
     transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: static;
    color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:745px; 
     left: 300px;
     cursor: pointer;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 14px;
  
    
}  
    
 .projectbutton h3{
    opacity: 0;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position:static;
    background-color:transparent;
    color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:725px; 
     left: 350px;
     cursor:default;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 15px;
     
    
    
}   
    
    
    
    
 .videobutton{
    opacity: 100%;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    background-color:transparent;
     color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:1113px; 
    margin-left: 255px;
     cursor: default;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 14px;
     
    
    
}

.videobutton a{
    opacity: 100%;
    
    background-color: transparent;
     transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
     cursor: pointer;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 14px;
  
    
}  
    
 .videobutton h3{
    opacity:0%;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    background-color:transparent;
     color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
     cursor: default;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 15px;
     left:69%;
     
    
    
}   
       
  .Container-menu{
        display: block;
    }
    
     .narrativebutton{
        display: block;
    }
    .narrativesub{
        display: none;
    }
    
    .menu-wrap{
        display: none;
    }
    
     ul.sub-navnar{display:none;}
    
    input[type=checkbox]:checked ~ .sub-navnar {
        display: block;}
    
    
    #narrative{display:block;}
    
    .videobutton h3{display:block;}
    
    .videobutton a{display: block;}
    
    .videobutton{display: block;}
    
    .projectbutton h3{display: block;}
    
    .projectbutton a{display:block;}
    
    
    .projectbutton{display: block;}
    
    ul.doc-navnar{display: none}
    #documentary{display: block;}
    
    input[type=checkbox]:checked ~ .doc-navnar {display: block;}
    
    .doc-navnar li a{display: block;}
        
     .doc-navnar li {display: block;} 
        
      .docubutton a{display: block;}
    
       .docubutton{display: block;}
    
     #Layer_1{display: block;}


    
    
 
}






















@media only screen and (min-width: 1440px) and (max-width: 2303px)
   {

.Container{
        max-width: 900px;}


.showcase h3 {font-size: 1.7rem;padding:110px 50px 0px 180px; font-family: Audrey;font-style:normal;font-weight: 500;}
    
    .showcase h4{font-size: 1.7rem;padding:0px 25px 0px 180px;font-family: Audrey;font-style:normal;font-weight: 500;}
    
   
    
    
    .bio{ margin-top:420px;
    margin-left: -5px;}
    
    
    
    
    .bio p{
    font-size: 16px;
    padding:0px 145px 2px 135px;
    text-align:justify;
    font-family: acumin-pro;
    font-style:normal;
    
    color: lightgray;
    opacity: 100%;
    justify-content: center;
   
      
  
    

}
    
    .showcase img{
  width: 500px;
    height: auto;
    margin-top:-14%;
    margin-bottom:-55%;
    margin-left: 20%;
       }
    
    .showcase2 img{display: none;}
    
    .logos{
    margin-top: 55%;
        margin-left: 70px;
}
    
    .imdb img{
    
 margin-left: 20px;
    width:25px;
    height: auto;
    margin-top:-130px;
    position: absolute;   
    
    
}

.vimeo img{
    

    width:21px;
    height: auto;
    margin-top:-135px;
    position: absolute;
    margin-left: -95px;
    
    
}


.contact img{
    

    width:19px;
    height: auto;
    margin-top:-135px;
    position: absolute;   
    margin-left: -265px;
    
}

 hr{margin-left: 10%;
    margin-right: 10%;
opacity: 0;
background-color:#f7cd46;
    margin-top: 90px;

}   
    
    
     .logos p {font-family: acumin-pro,arial;
    font-size:11px;
    color:lightgray;
    opacity: 0.5;
     margin-left: 61%;
    margin-top:-135px;
    padding-bottom: 5%;}   
    
  
    
    
     .Container-menu{
        display: block;
    }
    
     .narrativebutton{
        display: block;
    }
    .narrativesub{
        display: none;
    }
    
    
   #Layer_1{
  margin-left: 160px;
    position: absolute;
       margin-top:-455px;
       width: 210px;
       height: auto;
} 
    
    
    
 .narrativebutton{
    opacity: 0%;
   
    position: absolute;
    background-color:transparent;
     color: gray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:955px; 
     margin-left: 135px;
     cursor: default;
     width: 105px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 13.5px;
     
    
    
}

.narrativebutton a{
    opacity: 0%;
    color: gray;
    background-color: transparent;
  
    
}



   .sub-navnar li {
  font-family: acumin-pro;
    width: 130px;
    text-decoration: none;
       color: lightgray;
    list-style-type: none;
   padding-bottom: 15px;
      
    
}


.sub-navnar li a{
font-family: acumin-pro;
    font-size: 14px;
    text-decoration: none;
    color: lightgray;
   
   }
    
    
   
    
input[type=checkbox]:checked ~ .sub-navnar {
    display: block;
    position: absolute;
    margin-top: -350px;
   
    z-index: 99999;
    width: 100px;
    height: 100px;
    background-color: transparent;
    margin-left:134px;
    font-size: 15px;
    font-family:acumin-pro;
  color: lightgray;
    list-style-type: none;
}


#narrative{
    position: absolute;
    width: 120px;
    height: 40px;
    top: 945px;
   
    margin-left: 120px;
    z-index: 1;
    opacity: 0;
    cursor: default;
    display: block;
    
}
    
    
    ul.sub-navnar{
        position: absolute;
      margin-top: 200px;
        width: 250px;
        margin-left:150px;
        display: none;
    }   
    
    
    
    .docubutton{
    opacity:0;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    background-color:transparent;
     color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:955px; 
     margin-left:635px;
     cursor: default;
     width: 105px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 13px;
     
    
    
}

.docubutton a{
    opacity: 0%;
    color: lightgray;
    background-color: transparent;
  
    
}
    
    .doc-navnar li {
  font-family: acumin-pro;
    width: 130px;
    text-decoration: none;
       color: lightgray;
    list-style-type: none;
   padding-bottom: 15px;
        display: none;
    
}


.doc-navnar li a{
font-family: acumin-pro;
    font-size: 14px;
    text-decoration: none;
    color: lightgray;
    display: block;
    
   }
    
    
   
    
input[type=checkbox]:checked ~ .doc-navnar {
    display: block;
    position: absolute;
   margin-top: -350px;
    z-index: 99999;
    width: 100px;
    height: 100px;
    background-color: transparent;
    margin-left:670px;
    font-size: 15px;
    font-family:acumin-pro;
    color: lightgray;
    list-style-type: none;
}


#documentary{
    position: absolute;
    width: 130px;
    height: 40px;
    top: 945px;
    
    margin-left: 625px;
    z-index: 1;
    opacity: 0;
    cursor: default;
display: block;
}
    
    
    ul.doc-navnar{
        position: absolute;
      margin-top: 200px;
        width: 250px;
        margin-left:150px;
        display: none;
    }   
    
    
    
    
    
    
    
    
   .projectbutton{
    opacity: 100;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    background-color:transparent;
     color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:835px; 
     margin-left: 350px;
     cursor: default;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 14px;
     
    
    
}

.projectbutton a{
    opacity: 100%;
    color: white;
    background-color: transparent;
     transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: static;
    color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:745px; 
     left: 300px;
     cursor: pointer;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 14px;
  
    
}  
    
 .projectbutton h3{
    opacity: 0;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position:static;
    background-color:transparent;
    color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:725px; 
     left: 350px;
     cursor:default;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 15px;
     
    
    
}   
    
    
    
    
 .videobutton{
    opacity: 100%;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    background-color:transparent;
     color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:1113px; 
    margin-left: 255px;
     cursor: default;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 14px;
     
    
    
}

.videobutton a{
    opacity: 100%;
    
    background-color: transparent;
     transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
     cursor: pointer;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 14px;
  
    
}  
    
 .videobutton h3{
    opacity:0%;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    background-color:transparent;
     color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
     cursor: default;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 15px;
     left:69%;
     
    
    
}   
       
  .Container-menu{
        display: block;
    }
    
     .narrativebutton{
        display: block;
    }
    .narrativesub{
        display: none;
    }
    
    .menu-wrap{
        display: none;
    }
    
     ul.sub-navnar{display:none;}
    
    input[type=checkbox]:checked ~ .sub-navnar {
        display: block;}
    
    
    #narrative{display:block;}
    
    .videobutton h3{display:block;}
    
    .videobutton a{display: block;}
    
    .videobutton{display: block;}
    
    .projectbutton h3{display: block;}
    
    .projectbutton a{display:block;}
    
    
    .projectbutton{display: block;}
    
    ul.doc-navnar{display: none}
    #documentary{display: block;}
    
    input[type=checkbox]:checked ~ .doc-navnar {display: block;}
    
    .doc-navnar li a{display: block;}
        
     .doc-navnar li {display: block;} 
        
      .docubutton a{display: block;}
    
       .docubutton{display: block;}
    
     #Layer_1{display: block;}


    
    
 
}



















/* ----------- Desktop MDPI ----------- */
/* Portrait and Landscape */
@media only screen and  (min-height: 900px) and (max-height: 900px) and (min-device-width: 1440px) and (max-device-width: 1440px)  {
 


.Container{
        max-width: 600px;}


.showcase h3 {font-size: 1.2rem;padding:60px 50px 0px 90px; font-family: Audrey;font-style:normal;font-weight: 500;}
    
    .showcase h4{font-size: 1.2rem;padding:0px 25px 0px 90px;font-family: Audrey;font-style:normal;font-weight: 500;}
    
   
    
    
    .bio{ margin-top:280px;
    margin-left: -5px;}
    
    
    
    
    .bio p{
    font-size: 14px;
    padding:0px 30px 2px 30px;
    text-align:justify;
    font-family: acumin-pro;
    font-style:normal;
    
    color: lightgray;
    opacity: 100%;
    justify-content: center;
 
      
  
    

}
    
    .showcase img{
  width: 360px;
    height: auto;
    margin-top:-16%;
    margin-bottom:-55%;
    margin-left: 15%;
       }
    
    .showcase2 img{display: none;}
    
    .logos{
    margin-top: 55%;
        margin-left: 70px;
}
    
    .imdb img{
    
 margin-left: -80px;
    width:22px;
    height: auto;
    margin-top:-100px;
    position: absolute;   
    
    
}

.vimeo img{
    

    width:18px;
    height: auto;
    margin-top:-103px;
    position: absolute;
    margin-left: -142px;
    
    
}


.contact img{
    

    width:17px;
    height: auto;
    margin-top:-102px;
    position: absolute;   
    margin-left: -242px;
    
}

 hr{margin-left: 10%;
    margin-right: 10%;
opacity: 0;
background-color:#f7cd46;
    margin-top: 90px;

}   
    
    
     .logos p {font-family: acumin-pro,arial;
    font-size: 9px;
    color:lightgray;
    opacity: 0.5;
     margin-left: 68%;
    margin-top:-110px;
    padding-bottom: 5%;}   
    
  
    
    
     .Container-menu{
        display: block;
    }
    
     .narrativebutton{
        display: block;
    }
    .narrativesub{
        display: none;
    }
    
    
   #Layer_1{
  margin-left: 20px;
    position: absolute;
       margin-top:-335px;
       width: 175px;
       height: auto;
} 
    
    
    
 .narrativebutton{
    opacity: 0%;
   
    position: absolute;
    background-color:transparent;
     color: gray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:675px; 
     margin-left: 30px;
     cursor: default;
     width: 105px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 10.5px;
     
    
    
}

.narrativebutton a{
    opacity: 0%;
    color: gray;
    background-color: transparent;
  
    
}



   .sub-navnar li {
  font-family: acumin-pro;
    width: 130px;
    text-decoration: none;
       color: lightgray;
    list-style-type: none;
   padding-bottom: 1px;
      
    
}


.sub-navnar li a{
font-family: acumin-pro;
    font-size: 12px;
    text-decoration: none;
    color: lightgray;
   
   }
    
    
   
    
input[type=checkbox]:checked ~ .sub-navnar {
    display: block;
    position: absolute;
    margin-top: -253px;
   
    z-index: 99999;
    width: 100px;
    height: 100px;
    background-color: transparent;
    margin-left:30px;
    font-size: 15px;
    font-family:acumin-pro;
  color: lightgray;
    list-style-type: none;
}


#narrative{
    position: absolute;
    width: 80px;
    height: 40px;
    top: 665px;
   
    margin-left: 28px;
    z-index: 1;
    opacity: 0;
    cursor: default;
    
}
    
    
    ul.sub-navnar{
        position: absolute;
      margin-top: 200px;
        width: 250px;
        margin-left:130px;
        display: none;
    }   
    
    
    
    .docubutton{
    opacity: 0;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    background-color:transparent;
     color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:675px; 
     margin-left: 470px;
     cursor: default;
     width: 105px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 10px;
     
    
    
}

.docubutton a{
    opacity: 0%;
    color: lightgray;
    background-color: transparent;
  
    
}
    
    .doc-navnar li {
  font-family: acumin-pro;
    width: 130px;
    text-decoration: none;
       color: lightgray;
    list-style-type: none;
   padding-bottom: 3px;
    
}


.doc-navnar li a{
font-family: acumin-pro;
    font-size: 12px;
    text-decoration: none;
    color: lightgray;
    
   }
    
    
   
    
input[type=checkbox]:checked ~ .doc-navnar {
    display: block;
    position: absolute;
   margin-top: -250px;
    z-index: 99999;
    width: 100px;
    height: 100px;
    background-color: transparent;
    margin-left:496px;
    font-size: 15px;
    font-family:acumin-pro;
    color: lightgray;
    list-style-type: none;
}


#documentary{
    position: absolute;
    width: 130px;
    height: 40px;
    top: 665px;
    
    margin-left: 450px;
    z-index: 1;
    opacity: 0;
    cursor: default;
    
}
    
    
    ul.doc-navnar{
        position: absolute;
      margin-top: 200px;
        width: 250px;
        margin-left:150px;
        display: none;
    }   
    
    
    
    
    
    
    
    
   .projectbutton{
    opacity: 100;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    background-color:transparent;
     color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:580px; 
     margin-left: 210px;
     cursor: default;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 11px;
     
    
    
}

.projectbutton a{
    opacity: 100%;
    color: white;
    background-color: transparent;
     transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: static;
    color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:745px; 
     left: 280px;
     cursor: pointer;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 14px;
  
    
}  
    
 .projectbutton h3{
    opacity: 0;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position:static;
    background-color:transparent;
    color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:645px; 
     left: 330px;
     cursor: default;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 12px;
     
    
    
}   
    
    
    
    
 .videobutton{
    opacity: 100;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    background-color:transparent;
     color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:800px; 
    margin-left: 110px;
     cursor:default;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 11px;
     
    
    
}

.videobutton a{
    opacity: 100%;
    
    background-color: transparent;
     transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
     cursor: pointer;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 14px;
  
    
}  
    
 .videobutton h3{
    opacity:0;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    background-color:transparent;
     color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
     cursor: default;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 11.5px;
     left:69%;
     
    
    
}   
       
  .Container-menu{
        display: block;
    }
    
     .narrativebutton{
        display: block;
    }
    .narrativesub{
        display: block;
    }
    
    .menu-wrap{
        display: none;
    }
    
     ul.sub-navnar{display: none;}
    
    input[type=checkbox]:checked ~ .sub-navnar {
        display: block;}
    
    
    #narrative{display:block;}
    
    .videobutton h3{display:block;}
    
    .videobutton a{display: block;}
    
    .videobutton{display: block;}
    
    .projectbutton h3{display: block;}
    
    .projectbutton a{display:block;}
    
    
    .projectbutton{display: block;}
    
    ul.doc-navnar{display: none;}
    #documentary{display: block;}
    
    input[type=checkbox]:checked ~ .doc-navnar {display: block;}
    
    .doc-navnar li a{display: block;}
        
     .doc-navnar li {display: block;} 
        
      .docubutton a{display: block;}
    
       .docubutton{display: block;}
    
     #Layer_1{display: block;}
   
      
    
}
































@media only screen and (min-device-width: 1367px) and (max-width: 1439px)
   {

.Container{
        max-width: 900px;}


.showcase h3 {font-size: 1.7rem;padding:110px 50px 0px 180px; font-family: Audrey;font-style:normal;font-weight: 500;}
    
    .showcase h4{font-size: 1.7rem;padding:0px 25px 0px 180px;font-family: Audrey;font-style:normal;font-weight: 500;}
    
   
    
    
    .bio{ margin-top:420px;
    margin-left: -5px;}
    
    
    
    
    .bio p{
    font-size: 16px;
    padding:0px 145px 2px 135px;
    text-align:justify;
    font-family: acumin-pro;
    font-style:normal;
    
    color: lightgray;
    opacity: 100%;
    justify-content: center;
   
      
  
    

}
    
    .showcase img{
  width: 500px;
    height: auto;
    margin-top:-14%;
    margin-bottom:-55%;
    margin-left: 20%;
       }
    
    .showcase2 img{display: none;}
    
    .logos{
    margin-top: 55%;
        margin-left: 70px;
}
    
    .imdb img{
    
 margin-left: 20px;
    width:25px;
    height: auto;
    margin-top:-130px;
    position: absolute;   
    
    
}

.vimeo img{
    

    width:21px;
    height: auto;
    margin-top:-135px;
    position: absolute;
    margin-left: -95px;
    
    
}


.contact img{
    

    width:19px;
    height: auto;
    margin-top:-135px;
    position: absolute;   
    margin-left: -265px;
    
}

 hr{margin-left: 10%;
    margin-right: 10%;
opacity: 0;
background-color:#f7cd46;
    margin-top: 90px;

}   
    
    
     .logos p {font-family: acumin-pro,arial;
    font-size:11px;
    color:lightgray;
    opacity: 0.5;
     margin-left: 61%;
    margin-top:-135px;
    padding-bottom: 5%;}   
    
  
    
    
     .Container-menu{
        display: block;
    }
    
     .narrativebutton{
        display: block;
    }
    .narrativesub{
        display: none;
    }
    
    
   #Layer_1{
  margin-left: 160px;
    position: absolute;
       margin-top:-455px;
       width: 210px;
       height: auto;
} 
    
    
    
 .narrativebutton{
    opacity: 0%;
   
    position: absolute;
    background-color:transparent;
     color: gray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:955px; 
     margin-left: 135px;
     cursor: default;
     width: 105px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 13.5px;
     
    
    
}

.narrativebutton a{
    opacity: 0%;
    color: gray;
    background-color: transparent;
  
    
}



   .sub-navnar li {
  font-family: acumin-pro;
    width: 130px;
    text-decoration: none;
       color: lightgray;
    list-style-type: none;
   padding-bottom: 15px;
      
    
}


.sub-navnar li a{
font-family: acumin-pro;
    font-size: 14px;
    text-decoration: none;
    color: lightgray;
   
   }
    
    
   
    
input[type=checkbox]:checked ~ .sub-navnar {
    display: block;
    position: absolute;
    margin-top: -350px;
   
    z-index: 99999;
    width: 100px;
    height: 100px;
    background-color: transparent;
    margin-left:134px;
    font-size: 15px;
    font-family:acumin-pro;
  color: lightgray;
    list-style-type: none;
}


#narrative{
    position: absolute;
    width: 120px;
    height: 40px;
    top: 945px;
   
    margin-left: 120px;
    z-index: 1;
    opacity: 0;
    cursor: default;
    display: block;
    
}
    
    
    ul.sub-navnar{
        position: absolute;
      margin-top: 200px;
        width: 250px;
        margin-left:150px;
        display: none;
    }   
    
    
    
    .docubutton{
    opacity:0;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    background-color:transparent;
     color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:955px; 
     margin-left:635px;
     cursor: default;
     width: 105px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 13px;
     
    
    
}

.docubutton a{
    opacity: 0%;
    color: lightgray;
    background-color: transparent;
  
    
}
    
    .doc-navnar li {
  font-family: acumin-pro;
    width: 130px;
    text-decoration: none;
       color: lightgray;
    list-style-type: none;
   padding-bottom: 15px;
        display: none;
    
}


.doc-navnar li a{
font-family: acumin-pro;
    font-size: 14px;
    text-decoration: none;
    color: lightgray;
    display: block;
    
   }
    
    
   
    
input[type=checkbox]:checked ~ .doc-navnar {
    display: block;
    position: absolute;
   margin-top: -350px;
    z-index: 99999;
    width: 100px;
    height: 100px;
    background-color: transparent;
    margin-left:670px;
    font-size: 15px;
    font-family:acumin-pro;
    color: lightgray;
    list-style-type: none;
}


#documentary{
    position: absolute;
    width: 130px;
    height: 40px;
    top: 945px;
    
    margin-left: 625px;
    z-index: 1;
    opacity: 0;
    cursor: default;
display: block;
}
    
    
    ul.doc-navnar{
        position: absolute;
      margin-top: 200px;
        width: 250px;
        margin-left:150px;
        display: none;
    }   
    
    
    
    
    
    
    
    
   .projectbutton{
    opacity: 100;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    background-color:transparent;
     color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:835px; 
     margin-left: 350px;
     cursor: default;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 14px;
     
    
    
}

.projectbutton a{
    opacity: 100%;
    color: white;
    background-color: transparent;
     transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: static;
    color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:745px; 
     left: 300px;
     cursor: pointer;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 14px;
  
    
}  
    
 .projectbutton h3{
    opacity: 0;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position:static;
    background-color:transparent;
    color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:725px; 
     left: 350px;
     cursor:default;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 15px;
     
    
    
}   
    
    
    
    
 .videobutton{
    opacity: 100%;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    background-color:transparent;
     color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:1113px; 
    margin-left: 255px;
     cursor: default;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 14px;
     
    
    
}

.videobutton a{
    opacity: 100%;
    
    background-color: transparent;
     transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
     cursor: pointer;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 14px;
  
    
}  
    
 .videobutton h3{
    opacity:0%;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    background-color:transparent;
     color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
     cursor: default;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 15px;
     left:69%;
     
    
    
}   
       
  .Container-menu{
        display: block;
    }
    
     .narrativebutton{
        display: block;
    }
    .narrativesub{
        display: none;
    }
    
    .menu-wrap{
        display: none;
    }
    
     ul.sub-navnar{display:none;}
    
    input[type=checkbox]:checked ~ .sub-navnar {
        display: block;}
    
    
    #narrative{display:block;}
    
    .videobutton h3{display:block;}
    
    .videobutton a{display: block;}
    
    .videobutton{display: block;}
    
    .projectbutton h3{display: block;}
    
    .projectbutton a{display:block;}
    
    
    .projectbutton{display: block;}
    
    ul.doc-navnar{display: none}
    #documentary{display: block;}
    
    input[type=checkbox]:checked ~ .doc-navnar {display: block;}
    
    .doc-navnar li a{display: block;}
        
     .doc-navnar li {display: block;} 
        
      .docubutton a{display: block;}
    
       .docubutton{display: block;}
    
     #Layer_1{display: block;}


    
    
 
}







/* ----------- Desktop HIDPI ----------- */

@media only screen and (min-device-width: 1920px) and (max-device-height: 1080px)
   {

.Container{
        max-width: 900px;}


.showcase h3 {font-size: 1.5rem;padding:60px 50px 0px 215px; font-family: Audrey;font-style:normal;font-weight: 500;}
    
    .showcase h4{font-size: 1.5rem;padding:0px 25px 0px 215px;font-family: Audrey;font-style:normal;font-weight: 500;}
    
   
    
    
    .bio{ margin-top:400px;
    margin-left: -5px;}
    
    
    
    
    .bio p{
    font-size: 16px;
    padding:0px 145px 5px 135px;
    text-align:justify;
    font-family: acumin-pro;
    font-style:normal;
    
    color: lightgray;
    opacity: 100%;
    justify-content: center;
   
      
  
    

}
    
    .showcase img{
  width: 450px;
    height: auto;
    margin-top:-12%;
    margin-bottom:-55%;
    margin-left: 24%;
       }
    
    .showcase2 img{display: none;}
    
    .logos{
    margin-top: 55%;
        margin-left: 70px;
}
    
    .imdb img{
    
 margin-left: 20px;
    width:27px;
    height: auto;
    margin-top:-210px;
    position: absolute;   
    
    
}

.vimeo img{
    

    width:22px;
    height: auto;
    margin-top:-215px;
    position: absolute;
    margin-left: -95px;
    
    
}


.contact img{
    

    width:20px;
    height: auto;
    margin-top:-215px;
    position: absolute;   
    margin-left: -265px;
    
}

 hr{margin-left: 10%;
    margin-right: 10%;
opacity: 0;
background-color:#f7cd46;
    margin-top: 90px;

}   
    
    
     .logos p {font-family: acumin-pro,arial;
    font-size:11px;
    color:lightgray;
    opacity: 0.5;
     margin-left: 61%;
    margin-top:-215px;
    padding-bottom: 0%;}   
    
  
    
    
     .Container-menu{
        display: block;
    }
    
     .narrativebutton{
        display: block;
    }
    .narrativesub{
        display: none;
    }
    
    
   #Layer_1{
  margin-left: 160px;
    position: absolute;
       margin-top:-475px;
       width: 210px;
       height: auto;
} 
    
    
    
 .narrativebutton{
    opacity: 0%;
   
    position: absolute;
    background-color:transparent;
     color: gray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:820px; 
     margin-left: 135px;
     cursor: default;
     width: 105px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 13.5px;
     
    
    
}

.narrativebutton a{
    opacity: 0%;
    color: gray;
    background-color: transparent;
  
    
}



   .sub-navnar li {
  font-family: acumin-pro;
    width: 130px;
    text-decoration: none;
       color: lightgray;
    list-style-type: none;
   padding-bottom: 10px;
      
    
}


.sub-navnar li a{
font-family: acumin-pro;
    font-size: 14px;
    text-decoration: none;
    color: lightgray;
   
   }
    
    
   
    
input[type=checkbox]:checked ~ .sub-navnar {
    display: block;
    position: absolute;
    margin-top: -375px;
   
    z-index: 99999;
    width: 100px;
    height: 100px;
    background-color: transparent;
    margin-left:134px;
    font-size: 15px;
    font-family:acumin-pro;
  color: lightgray;
    list-style-type: none;
}


#narrative{
    position: absolute;
    width: 120px;
    height: 40px;
    top: 815px;
   
    margin-left: 120px;
    z-index: 1;
    opacity: 0;
    cursor: default;
    display: block;
    
}
    
    
    ul.sub-navnar{
        position: absolute;
      margin-top: 200px;
        width: 250px;
        margin-left:150px;
        display: none;
    }   
    
    
    
    .docubutton{
    opacity:0;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    background-color:transparent;
     color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:820px; 
     margin-left:635px;
     cursor: default;
     width: 105px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 13px;
     
    
    
}

.docubutton a{
    opacity: 0%;
    color: lightgray;
    background-color: transparent;
  
    
}
    
    .doc-navnar li {
  font-family: acumin-pro;
    width: 130px;
    text-decoration: none;
       color: lightgray;
    list-style-type: none;
   padding-bottom: 10px;
        display: none;
    
}


.doc-navnar li a{
font-family: acumin-pro;
    font-size: 14px;
    text-decoration: none;
    color: lightgray;
    display: block;
    
   }
    
    
   
    
input[type=checkbox]:checked ~ .doc-navnar {
    display: block;
    position: absolute;
   margin-top: -375px;
    z-index: 99999;
    width: 100px;
    height: 100px;
    background-color: transparent;
    margin-left:670px;
    font-size: 15px;
    font-family:acumin-pro;
    color: lightgray;
    list-style-type: none;
}


#documentary{
    position: absolute;
    width: 130px;
    height: 40px;
    top: 815px;
    
    margin-left: 625px;
    z-index: 1;
    opacity: 0;
    cursor: default;
display: block;
}
    
    
    ul.doc-navnar{
        position: absolute;
      margin-top: 200px;
        width: 250px;
        margin-left:150px;
        display: none;
    }   
    
    
    
    
    
    
    
    
   .projectbutton{
    opacity: 100;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    background-color:transparent;
     color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:705px; 
     margin-left: 350px;
     cursor: default;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 14px;
     
    
    
}

.projectbutton a{
    opacity: 100%;
    color: white;
    background-color: transparent;
     transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: static;
    color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:745px; 
     left: 300px;
     cursor: pointer;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 14px;
  
    
}  
    
 .projectbutton h3{
    opacity: 0;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position:static;
    background-color:transparent;
    color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:725px; 
     left: 350px;
     cursor:default;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 15px;
     
    
    
}   
    
    
    
    
 .videobutton{
    opacity: 100%;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    background-color:transparent;
     color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:973px; 
    margin-left: 255px;
     cursor: default;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 14px;
     
    
    
}

.videobutton a{
    opacity: 100%;
    
    background-color: transparent;
     transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
     cursor: pointer;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 14px;
  
    
}  
    
 .videobutton h3{
    opacity:0%;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    background-color:transparent;
     color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
     cursor: default;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 15px;
     left:69%;
     
    
    
}   
       
  .Container-menu{
        display: block;
    }
    
     .narrativebutton{
        display: block;
    }
    .narrativesub{
        display: none;
    }
    
    .menu-wrap{
        display: none;
    }
    
     ul.sub-navnar{display:none;}
    
    input[type=checkbox]:checked ~ .sub-navnar {
        display: block;}
    
    
    #narrative{display:block;}
    
    .videobutton h3{display:block;}
    
    .videobutton a{display: block;}
    
    .videobutton{display: block;}
    
    .projectbutton h3{display: block;}
    
    .projectbutton a{display:block;}
    
    
    .projectbutton{display: block;}
    
    ul.doc-navnar{display: none}
    #documentary{display: block;}
    
    input[type=checkbox]:checked ~ .doc-navnar {display: block;}
    
    .doc-navnar li a{display: block;}
        
     .doc-navnar li {display: block;} 
        
      .docubutton a{display: block;}
    
       .docubutton{display: block;}
    
     #Layer_1{display: block;}


    
    
 
}










@media only screen and (min-device-width: 1281px)and (max-width:1365px)and (orientation:portrait){


.Container{
        max-width: 900px;}


.showcase h3 {font-size: 1.7rem;padding:70px 50px 0px 180px; font-family: Audrey;font-style:normal;font-weight: 500;}
    
    .showcase h4{font-size: 1.7rem;padding:0px 25px 0px 180px;font-family: Audrey;font-style:normal;font-weight: 500;}
    
   
    
    
    .bio{ margin-top:420px;
    margin-left: -5px;}
    
    
    
    
    .bio p{
    font-size: 16px;
    padding:0px 145px 2px 135px;
    text-align:justify;
    font-family: acumin-pro;
    font-style:normal;
    
    color: lightgray;
    opacity: 100%;
    justify-content: center;
   
      
  
    

}
    
    .showcase img{
  width: 500px;
    height: auto;
    margin-top:-13%;
    margin-bottom:-55%;
    margin-left: 20%;
       }
    
    .showcase2 img{display: none;}
    
    .logos{
    margin-top: 55%;
        margin-left: 70px;
}
    
    .imdb img{
    
 margin-left: 20px;
    width:25px;
    height: auto;
    margin-top:-160px;
    position: absolute;   
    
    
}

.vimeo img{
    

    width:21px;
    height: auto;
    margin-top:-165px;
    position: absolute;
    margin-left: -95px;
    
    
}


.contact img{
    

    width:19px;
    height: auto;
    margin-top:-165px;
    position: absolute;   
    margin-left: -265px;
    
}

 hr{margin-left: 10%;
    margin-right: 10%;
opacity: 0;
background-color:#f7cd46;
    margin-top: 90px;

}   
    
    
     .logos p {font-family: acumin-pro,arial;
    font-size:11px;
    color:lightgray;
    opacity: 0.5;
     margin-left: 61%;
    margin-top:-165px;
    padding-bottom: 5%;}   
    
  
    
    
     .Container-menu{
        display: block;
    }
    
     .narrativebutton{
        display: block;
    }
    .narrativesub{
        display: none;
    }
    
    
   #Layer_1{
  margin-left: 160px;
    position: absolute;
       margin-top:-455px;
       width: 210px;
       height: auto;
} 
    
    
    
 .narrativebutton{
    opacity: 0%;
   
    position: absolute;
    background-color:transparent;
     color: gray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:910px; 
     margin-left: 135px;
     cursor: default;
     width: 105px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 13.5px;
     
    
    
}

.narrativebutton a{
    opacity: 0%;
    color: gray;
    background-color: transparent;
  
    
}



   .sub-navnar li {
  font-family: acumin-pro;
    width: 130px;
    text-decoration: none;
       color: lightgray;
    list-style-type: none;
   padding-bottom: 15px;
      
    
}


.sub-navnar li a{
font-family: acumin-pro;
    font-size: 14px;
    text-decoration: none;
    color: lightgray;
   
   }
    
    
   
    
input[type=checkbox]:checked ~ .sub-navnar {
    display: block;
    position: absolute;
    margin-top: -360px;
   
    z-index: 99999;
    width: 100px;
    height: 100px;
    background-color: transparent;
    margin-left:134px;
    font-size: 15px;
    font-family:acumin-pro;
  color: lightgray;
    list-style-type: none;
}


#narrative{
    position: absolute;
    width: 120px;
    height: 40px;
    top: 900px;
   
    margin-left: 120px;
    z-index: 1;
    opacity: 0;
    cursor: default;
    display: block;
    
}
    
    
    ul.sub-navnar{
        position: absolute;
      margin-top: 200px;
        width: 250px;
        margin-left:150px;
        display: none;
    }   
    
    
    
    .docubutton{
    opacity:0;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    background-color:transparent;
     color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:910px; 
     margin-left:635px;
     cursor: default;
     width: 105px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 13px;
     
    
    
}

.docubutton a{
    opacity: 0%;
    color: lightgray;
    background-color: transparent;
  
    
}
    
    .doc-navnar li {
  font-family: acumin-pro;
    width: 130px;
    text-decoration: none;
       color: lightgray;
    list-style-type: none;
   padding-bottom: 15px;
        display: none;
    
}


.doc-navnar li a{
font-family: acumin-pro;
    font-size: 14px;
    text-decoration: none;
    color: lightgray;
    display: block;
    
   }
    
    
   
    
input[type=checkbox]:checked ~ .doc-navnar {
    display: block;
    position: absolute;
   margin-top: -365px;
    z-index: 99999;
    width: 100px;
    height: 100px;
    background-color: transparent;
    margin-left:670px;
    font-size: 15px;
    font-family:acumin-pro;
    color: lightgray;
    list-style-type: none;
}


#documentary{
    position: absolute;
    width: 130px;
    height: 40px;
    top: 900px;
    
    margin-left: 625px;
    z-index: 1;
    opacity: 0;
    cursor: default;
display: block;
}
    
    
    ul.doc-navnar{
        position: absolute;
      margin-top: 200px;
        width: 250px;
        margin-left:150px;
        display: none;
    }   
    
    
    
    
    
    
    
    
   .projectbutton{
    opacity: 100;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    background-color:transparent;
     color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:805px; 
     margin-left: 350px;
     cursor: default;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 14px;
     
    
    
}

.projectbutton a{
    opacity: 100%;
    color: white;
    background-color: transparent;
     transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: static;
    color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:745px; 
     left: 300px;
     cursor: pointer;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 14px;
  
    
}  
    
 .projectbutton h3{
    opacity: 0;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position:static;
    background-color:transparent;
    color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:725px; 
     left: 350px;
     cursor:default;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 15px;
     
    
    
}   
    
    
    
    
 .videobutton{
    opacity: 100%;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    background-color:transparent;
     color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:1083px; 
    margin-left: 255px;
     cursor: default;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 14px;
     
    
    
}

.videobutton a{
    opacity: 100%;
    
    background-color: transparent;
     transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
     cursor: pointer;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 14px;
  
    
}  
    
 .videobutton h3{
    opacity:0%;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    background-color:transparent;
     color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
     cursor: default;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 15px;
     left:69%;
     
    
    
}   
       
  .Container-menu{
        display: block;
    }
    
     .narrativebutton{
        display: block;
    }
    .narrativesub{
        display: none;
    }
    
    .menu-wrap{
        display: none;
    }
    
     ul.sub-navnar{display:none;}
    
    input[type=checkbox]:checked ~ .sub-navnar {
        display: block;}
    
    
    #narrative{display:block;}
    
    .videobutton h3{display:block;}
    
    .videobutton a{display: block;}
    
    .videobutton{display: block;}
    
    .projectbutton h3{display: block;}
    
    .projectbutton a{display:block;}
    
    
    .projectbutton{display: block;}
    
    ul.doc-navnar{display: none}
    #documentary{display: block;}
    
    input[type=checkbox]:checked ~ .doc-navnar {display: block;}
    
    .doc-navnar li a{display: block;}
        
     .doc-navnar li {display: block;} 
        
      .docubutton a{display: block;}
    
       .docubutton{display: block;}
    
     #Layer_1{display: block;}


    
    
 
}






























@media only screen and (min-device-width: 1201px)and (max-width:1279px){
    
    
    
    .Container{
        max-width: 900px;}


.showcase h3 {font-size: 1.7rem;padding:110px 50px 0px 180px; font-family: Audrey;font-style:normal;font-weight: 500;}
    
    .showcase h4{font-size: 1.7rem;padding:0px 25px 0px 180px;font-family: Audrey;font-style:normal;font-weight: 500;}
    
   
    
    
    .bio{ margin-top:420px;
    margin-left: -5px;}
    
    
    
    
    .bio p{
    font-size: 16px;
    padding:0px 145px 2px 135px;
    text-align:justify;
    font-family: acumin-pro;
    font-style:normal;
    
    color: lightgray;
    opacity: 100%;
    justify-content: center;
   
      
  
    

}
    
    .showcase img{
  width: 500px;
    height: auto;
    margin-top:-14%;
    margin-bottom:-55%;
    margin-left: 20%;
       }
    
    .showcase2 img{display: none;}
    
    .logos{
    margin-top: 55%;
        margin-left: 70px;
}
    
    .imdb img{
    
 margin-left: 20px;
    width:25px;
    height: auto;
    margin-top:-130px;
    position: absolute;   
    
    
}

.vimeo img{
    

    width:21px;
    height: auto;
    margin-top:-135px;
    position: absolute;
    margin-left: -95px;
    
    
}


.contact img{
    

    width:19px;
    height: auto;
    margin-top:-135px;
    position: absolute;   
    margin-left: -265px;
    
}

 hr{margin-left: 10%;
    margin-right: 10%;
opacity: 0;
background-color:#f7cd46;
    margin-top: 90px;

}   
    
    
     .logos p {font-family: acumin-pro,arial;
    font-size:11px;
    color:lightgray;
    opacity: 0.5;
     margin-left: 61%;
    margin-top:-135px;
    padding-bottom: 5%;}   
    
  
    
    
     .Container-menu{
        display: block;
    }
    
     .narrativebutton{
        display: block;
    }
    .narrativesub{
        display: none;
    }
    
    
   #Layer_1{
  margin-left: 160px;
    position: absolute;
       margin-top:-455px;
       width: 210px;
       height: auto;
} 
    
    
    
 .narrativebutton{
    opacity: 0%;
   
    position: absolute;
    background-color:transparent;
     color: gray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:955px; 
     margin-left: 135px;
     cursor: default;
     width: 105px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 13.5px;
     
    
    
}

.narrativebutton a{
    opacity: 0%;
    color: gray;
    background-color: transparent;
  
    
}



   .sub-navnar li {
  font-family: acumin-pro;
    width: 130px;
    text-decoration: none;
       color: lightgray;
    list-style-type: none;
   padding-bottom: 15px;
      
    
}


.sub-navnar li a{
font-family: acumin-pro;
    font-size: 14px;
    text-decoration: none;
    color: lightgray;
   
   }
    
    
   
    
input[type=checkbox]:checked ~ .sub-navnar {
    display: block;
    position: absolute;
    margin-top: -350px;
   
    z-index: 99999;
    width: 100px;
    height: 100px;
    background-color: transparent;
    margin-left:134px;
    font-size: 15px;
    font-family:acumin-pro;
  color: lightgray;
    list-style-type: none;
}


#narrative{
    position: absolute;
    width: 120px;
    height: 40px;
    top: 945px;
   
    margin-left: 120px;
    z-index: 1;
    opacity: 0;
    cursor: default;
    display: block;
    
}
    
    
    ul.sub-navnar{
        position: absolute;
      margin-top: 200px;
        width: 250px;
        margin-left:150px;
        display: none;
    }   
    
    
    
    .docubutton{
    opacity:0;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    background-color:transparent;
     color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:955px; 
     margin-left:635px;
     cursor: default;
     width: 105px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 13px;
     
    
    
}

.docubutton a{
    opacity: 0%;
    color: lightgray;
    background-color: transparent;
  
    
}
    
    .doc-navnar li {
  font-family: acumin-pro;
    width: 130px;
    text-decoration: none;
       color: lightgray;
    list-style-type: none;
   padding-bottom: 15px;
        display: none;
    
}


.doc-navnar li a{
font-family: acumin-pro;
    font-size: 14px;
    text-decoration: none;
    color: lightgray;
    display: block;
    
   }
    
    
   
    
input[type=checkbox]:checked ~ .doc-navnar {
    display: block;
    position: absolute;
   margin-top: -350px;
    z-index: 99999;
    width: 100px;
    height: 100px;
    background-color: transparent;
    margin-left:670px;
    font-size: 15px;
    font-family:acumin-pro;
    color: lightgray;
    list-style-type: none;
}


#documentary{
    position: absolute;
    width: 130px;
    height: 40px;
    top: 945px;
    
    margin-left: 625px;
    z-index: 1;
    opacity: 0;
    cursor: default;
display: block;
}
    
    
    ul.doc-navnar{
        position: absolute;
      margin-top: 200px;
        width: 250px;
        margin-left:150px;
        display: none;
    }   
    
    
    
    
    
    
    
    
   .projectbutton{
    opacity: 100;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    background-color:transparent;
     color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:835px; 
     margin-left: 350px;
     cursor: default;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 14px;
     
    
    
}

.projectbutton a{
    opacity: 100%;
    color: white;
    background-color: transparent;
     transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: static;
    color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:745px; 
     left: 300px;
     cursor: pointer;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 14px;
  
    
}  
    
 .projectbutton h3{
    opacity: 0;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position:static;
    background-color:transparent;
    color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:725px; 
     left: 350px;
     cursor:default;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 15px;
     
    
    
}   
    
    
    
    
 .videobutton{
    opacity: 100%;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    background-color:transparent;
     color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:1113px; 
    margin-left: 255px;
     cursor: default;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 14px;
     
    
    
}

.videobutton a{
    opacity: 100%;
    
    background-color: transparent;
     transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
     cursor: pointer;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 14px;
  
    
}  
    
 .videobutton h3{
    opacity:0%;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    background-color:transparent;
     color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
     cursor: default;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 15px;
     left:69%;
     
    
    
}   
       
  .Container-menu{
        display: block;
    }
    
     .narrativebutton{
        display: block;
    }
    .narrativesub{
        display: none;
    }
    
    .menu-wrap{
        display: none;
    }
    
     ul.sub-navnar{display:none;}
    
    input[type=checkbox]:checked ~ .sub-navnar {
        display: block;}
    
    
    #narrative{display:block;}
    
    .videobutton h3{display:block;}
    
    .videobutton a{display: block;}
    
    .videobutton{display: block;}
    
    .projectbutton h3{display: block;}
    
    .projectbutton a{display:block;}
    
    
    .projectbutton{display: block;}
    
    ul.doc-navnar{display: none}
    #documentary{display: block;}
    
    input[type=checkbox]:checked ~ .doc-navnar {display: block;}
    
    .doc-navnar li a{display: block;}
        
     .doc-navnar li {display: block;} 
        
      .docubutton a{display: block;}
    
       .docubutton{display: block;}
    
     #Layer_1{display: block;}


    
    
 
}




















@media only screen and (min-device-width: 1024px)and (max-width:1200px)and (orientation:portrait){

.Container{
        max-width: 900px;}


.showcase h3 {font-size: 1.7rem;padding:110px 50px 0px 180px; font-family: Audrey;font-style:normal;font-weight: 500;}
    
    .showcase h4{font-size: 1.7rem;padding:0px 25px 0px 180px;font-family: Audrey;font-style:normal;font-weight: 500;}
    
   
    
    
    .bio{ margin-top:420px;
    margin-left: -5px;}
    
    
    
    
    .bio p{
    font-size: 16px;
    padding:0px 145px 2px 135px;
    text-align:justify;
    font-family: acumin-pro;
    font-style:normal;
    
    color: lightgray;
    opacity: 100%;
    justify-content: center;
   
      
  
    

}
    
    .showcase img{
  width: 500px;
    height: auto;
    margin-top:-14%;
    margin-bottom:-55%;
    margin-left: 20%;
       }
    
    .showcase2 img{display: none;}
    
    .logos{
    margin-top: 55%;
        margin-left: 70px;
}
    
    .imdb img{
    
 margin-left: 20px;
    width:25px;
    height: auto;
    margin-top:-130px;
    position: absolute;   
    
    
}

.vimeo img{
    

    width:21px;
    height: auto;
    margin-top:-135px;
    position: absolute;
    margin-left: -95px;
    
    
}


.contact img{
    

    width:19px;
    height: auto;
    margin-top:-135px;
    position: absolute;   
    margin-left: -265px;
    
}

 hr{margin-left: 10%;
    margin-right: 10%;
opacity: 0;
background-color:#f7cd46;
    margin-top: 90px;

}   
    
    
     .logos p {font-family: acumin-pro,arial;
    font-size:11px;
    color:lightgray;
    opacity: 0.5;
     margin-left: 61%;
    margin-top:-135px;
    padding-bottom: 5%;}   
    
  
    
    
     .Container-menu{
        display: block;
    }
    
     .narrativebutton{
        display: block;
    }
    .narrativesub{
        display: none;
    }
    
    
   #Layer_1{
  margin-left: 160px;
    position: absolute;
       margin-top:-455px;
       width: 210px;
       height: auto;
} 
    
    
    
 .narrativebutton{
    opacity: 0%;
   
    position: absolute;
    background-color:transparent;
     color: gray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:955px; 
     margin-left: 135px;
     cursor: default;
     width: 105px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 13.5px;
     
    
    
}

.narrativebutton a{
    opacity: 0%;
    color: gray;
    background-color: transparent;
  
    
}



   .sub-navnar li {
  font-family: acumin-pro;
    width: 130px;
    text-decoration: none;
       color: lightgray;
    list-style-type: none;
   padding-bottom: 15px;
      
    
}


.sub-navnar li a{
font-family: acumin-pro;
    font-size: 14px;
    text-decoration: none;
    color: lightgray;
   
   }
    
    
   
    
input[type=checkbox]:checked ~ .sub-navnar {
    display: block;
    position: absolute;
    margin-top: -350px;
   
    z-index: 99999;
    width: 100px;
    height: 100px;
    background-color: transparent;
    margin-left:134px;
    font-size: 15px;
    font-family:acumin-pro;
  color: lightgray;
    list-style-type: none;
}


#narrative{
    position: absolute;
    width: 120px;
    height: 40px;
    top: 945px;
   
    margin-left: 120px;
    z-index: 1;
    opacity: 0;
    cursor: default;
    display: block;
    
}
    
    
    ul.sub-navnar{
        position: absolute;
      margin-top: 200px;
        width: 250px;
        margin-left:150px;
        display: none;
    }   
    
    
    
    .docubutton{
    opacity:0;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    background-color:transparent;
     color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:955px; 
     margin-left:635px;
     cursor: default;
     width: 105px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 13px;
     
    
    
}

.docubutton a{
    opacity: 0%;
    color: lightgray;
    background-color: transparent;
  
    
}
    
    .doc-navnar li {
  font-family: acumin-pro;
    width: 130px;
    text-decoration: none;
       color: lightgray;
    list-style-type: none;
   padding-bottom: 15px;
        display: none;
    
}


.doc-navnar li a{
font-family: acumin-pro;
    font-size: 14px;
    text-decoration: none;
    color: lightgray;
    display: block;
    
   }
    
    
   
    
input[type=checkbox]:checked ~ .doc-navnar {
    display: block;
    position: absolute;
   margin-top: -350px;
    z-index: 99999;
    width: 100px;
    height: 100px;
    background-color: transparent;
    margin-left:670px;
    font-size: 15px;
    font-family:acumin-pro;
    color: lightgray;
    list-style-type: none;
}


#documentary{
    position: absolute;
    width: 130px;
    height: 40px;
    top: 945px;
    
    margin-left: 625px;
    z-index: 1;
    opacity: 0;
    cursor: default;
display: block;
}
    
    
    ul.doc-navnar{
        position: absolute;
      margin-top: 200px;
        width: 250px;
        margin-left:150px;
        display: none;
    }   
    
    
    
    
    
    
    
    
   .projectbutton{
    opacity: 100;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    background-color:transparent;
     color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:835px; 
     margin-left: 350px;
     cursor: default;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 14px;
     
    
    
}

.projectbutton a{
    opacity: 100%;
    color: white;
    background-color: transparent;
     transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: static;
    color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:745px; 
     left: 300px;
     cursor: pointer;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 14px;
  
    
}  
    
 .projectbutton h3{
    opacity: 0;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position:static;
    background-color:transparent;
    color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:725px; 
     left: 350px;
     cursor:default;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 15px;
     
    
    
}   
    
    
    
    
 .videobutton{
    opacity: 100%;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    background-color:transparent;
     color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:1113px; 
    margin-left: 255px;
     cursor: default;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 14px;
     
    
    
}

.videobutton a{
    opacity: 100%;
    
    background-color: transparent;
     transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
     cursor: pointer;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 14px;
  
    
}  
    
 .videobutton h3{
    opacity:0%;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    background-color:transparent;
     color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
     cursor: default;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 15px;
     left:69%;
     
    
    
}   
       
  .Container-menu{
        display: block;
    }
    
     .narrativebutton{
        display: block;
    }
    .narrativesub{
        display: none;
    }
    
    .menu-wrap{
        display: none;
    }
    
     ul.sub-navnar{display:none;}
    
    input[type=checkbox]:checked ~ .sub-navnar {
        display: block;}
    
    
    #narrative{display:block;}
    
    .videobutton h3{display:block;}
    
    .videobutton a{display: block;}
    
    .videobutton{display: block;}
    
    .projectbutton h3{display: block;}
    
    .projectbutton a{display:block;}
    
    
    .projectbutton{display: block;}
    
    ul.doc-navnar{display: none}
    #documentary{display: block;}
    
    input[type=checkbox]:checked ~ .doc-navnar {display: block;}
    
    .doc-navnar li a{display: block;}
        
     .doc-navnar li {display: block;} 
        
      .docubutton a{display: block;}
    
       .docubutton{display: block;}
    
     #Layer_1{display: block;}


    
    
 
}










/* ----------- iPad 12 Pro ----------- */
/* Portrait  */
@media only screen and (min-device-width: 1024px) and (max-device-width: 1024px)and (min-device-height: 1366px) and (max-device-height: 1366px) and (orientation:portrait) {


.Container{
        max-width: 800px;}
    
     .menu-wrap .hamburger {width: 70px;height: 70px;margin-left:300px;margin-top: 100px;}
    
    
    
    .menu-wrap .menu > div > div > ul > li {font-size: 1.2rem;
  padding: 1.5rem;}
    
    .menu-wrap .menu > div > div > ul >li> ul {font-size: 1.2rem;
  padding: 1.5rem;}
    
    .menu-wrap { left: 3%;}
    
    
    
    .menu-wrap .toggler {
  position: fixed;
  
  z-index: 2;
  cursor: pointer;
  width: 55px;
  height: 55px;
  opacity: 0;
    display: inline-block;
     margin-top: 10px;
    margin-left: 390px;
    float: right;
        right:8%;
    
}
       
    
    
    .menu-wrap .hamburger {
  position: absolute;
  top: 0;
  left: 0px;
  z-index: 1;
  width: 55px;
  height: 65px;
  padding: 1rem;
  
  display: flex;
  align-items: center;
  justify-content: center;
    margin-left:1%;margin-top: 20px; }
    
    /* Hamburger Line */
.menu-wrap .hamburger > div {
  position: fixed;
  flex: none;
  width: 30px;
  height: 1px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
    margin-top: 5px;
   right: 8%;
    
}

/* Hamburger Lines - Top & Bottom */
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
   content: '';
  position: absolute;
  z-index: 1;
  top: -8px;
  width: 100%;
  height: 2px;
  background: inherit;
}
    
    /* Moves Line Down */
.menu-wrap .hamburger > div::after {
  top: 8px;
}
    
    
    
    .showcase h3 {font-size: 1.7rem;padding:170px 50px 0px 105px; font-family: Audrey;font-style:normal;font-weight: 500;}
    
    .showcase h4{font-size: 1.7rem;padding:0px 25px 0px 105px;font-family: Audrey;font-style:normal;font-weight: 500;}
    
   
    
    
    .bio{ margin-top:377px;
    margin-left: 0px;
    
    }
    
    
    
    
    .bio p{
    font-size: 18px;
    padding:0px 75px 10px 55px;
    text-align:justify;
    font-family: acumin-pro;
    font-style:normal;
    
    color: lightgray;
    opacity: 100%;
    justify-content: center;
  
      
}
    
    

    .showcase img{
  width: 550px;
    height: auto;
    margin-top:-15%;
    margin-bottom:-55%;
    margin-left:13%;
       }
    
    .showcase2 img{display: none;}
    
    .logos{
    margin-top: 0;
        margin-left: 40px;
        margin-bottom: 0px;
}
    
    .imdb img{
    
 margin-left: -20px;
    width:33px;
    height: auto;
    margin-top:-10px;
    position: relative;
        padding-bottom: 0px;
    
    
}

.vimeo img{
    

    width:25px;
    height: auto;
    margin-top:-10px;
    position: relative;
    margin-left: -123px;
    padding-bottom: 0px;
    
}


.contact img{
    

    width:23px;
    height: auto;
    margin-top:-10px;
    position: relative;   
    margin-left: -268px;
    padding-bottom: 0px;
}

 hr{margin-left: 10%;
    margin-right: 10%;
opacity: 0;
background-color:#f7cd46;
    margin-top: 90px;

}   
    
    

     .logos p {font-family: acumin-pro,arial;
    font-size: 10px;
    color:ghostwhite;
    opacity: 0.5;
     margin-left: 66%;
    margin-top:40px;
    padding-bottom: 10%;}   
    
  
    
    
     .Container-menu{
        display: none;
    }
    
     .narrativebutton{
        display: none;
    }
    .narrativesub{
        display: none;
    }
    
    .menu-wrap{
        display: block;
    }
    
     ul.sub-navnar{display: none;}
    
    input[type=checkbox]:checked ~ .sub-navnar {
        display: none;}
    
    
    #narrative{display: none;}
    
    .videobutton h3{display: none;}
    
    .videobutton a{display: none;}
    
    .videobutton{display: none;}
    
    .projectbutton h3{display: none;}
    
    .projectbutton a{display: none;}
    
    
    .projectbutton{display: none;}
    
    ul.doc-navnar{display: none;}
    #documentary{display: none;}
    
    input[type=checkbox]:checked ~ .doc-navnar {display: none;}
    
    .doc-navnar li a{display: none;}
        
     .doc-navnar li {display: none;} 
        
      .docubutton a{display: none;}
    
       .docubutton{display: none;}
    
     #Layer_1{display: none;}
    
    
    
    
    
}
    


    
    
    
    
    









/*ipad 9*/
@media only screen and (min-device-width: 936px) and (max-device-width:1024px)and (orientation:landscape) {

.Container{
        max-width: 800px;}
    
     .menu-wrap .hamburger {width: 70px;height: 70px;margin-left:300px;margin-top: 100px;}
    
    
    
    .menu-wrap .menu > div > div > ul > li {font-size: 1.1rem;
  padding: 1.6rem;}
    
    .menu-wrap .menu > div > div > ul >li> ul {font-size: 1.1rem;
  padding: 1.1rem;}
    
    .menu-wrap .menu > div > div > ul >li > ul > li > a {font-size:1.2rem;} 
    
    .menu-wrap { left: 3%;}
    
    
    
    .menu-wrap .toggler {
  position: fixed;

  z-index: 2;
  cursor: pointer;
  width: 55px;
  height: 55px;
  opacity: 0;
    display: inline-block;
     margin-top: 10px;
    margin-left: 390px;
    float: right;
        right:8%;
    
}
       
    
    
    .menu-wrap .hamburger {
  position: absolute;
  top: 0;
  left: 0px;
  z-index: 1;
  width: 55px;
  height: 65px;
  padding: 1rem;
  
  display: flex;
  align-items: center;
  justify-content: center;
    margin-left:1%;margin-top: 10px; }
    
    /* Hamburger Line */
.menu-wrap .hamburger > div {
  position: fixed;
  flex: none;
  width: 31px;
  height: 1px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
    margin-top: 5px;
   right: 8%;
    
}

/* Hamburger Lines - Top & Bottom */
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
   content: '';
  position: absolute;
  z-index: 1;
  top: -8px;
  width: 100%;
  height: 2px;
  background: inherit;
}
    
    /* Moves Line Down */
.menu-wrap .hamburger > div::after {
  top: 8px;
}
    
    
    
    .showcase h3 {font-size: 1.7rem;padding:90px 50px 0px 120px; font-family: Audrey;font-style:normal;font-weight: 500;}
    
    .showcase h4{font-size: 1.7rem;padding:0px 25px 0px 120px;font-family: Audrey;font-style:normal;font-weight: 500;}
    
   
    
    
    .bio{ margin-top:370px;
    margin-left: 0px;}
    
    
    
    
    .bio p{
    font-size: 17.5px;
    padding:0px 130px 10px 125px;
    text-align:justify;
    font-family: acumin-pro;
    font-style:normal;
    
    color: lightgray;
    opacity: 100%;
    justify-content: center;
   
      
}
    
    

    .showcase img{
  width: 530px;
    height: auto;
    margin-top:-18%;
    margin-bottom:-55%;
    margin-left:15%;
       }
    
    .showcase2 img{display: none;}
    
    .logos{
    margin-top: 0;
        margin-left: 40px;
        margin-bottom: 0px;
}
    
    .imdb img{
    
 margin-left: 50px;
    width:31px;
    height: auto;
    margin-top:-40px;
    position: relative;
        padding-bottom: 0px;
    
    
}

.vimeo img{
    

    width:25px;
    height: auto;
    margin-top:-40px;
    position: relative;
    margin-left: -125px;
    padding-bottom: 0px;
    
}


.contact img{
    

    width:22px;
    height: auto;
    margin-top:-40px;
    position: relative;   
    margin-left: -275px;
    padding-bottom: 0px;
}

 hr{margin-left: 10%;
    margin-right: 10%;
opacity: 0;
background-color:#f7cd46;
    margin-top: 90px;

}   
    
    

     .logos p {font-family: acumin-pro,arial;
    font-size: 11px;
    color:ghostwhite;
    opacity: 0.5;
     margin-left: 59%;
    margin-top:0px;
    padding-bottom: 10%;}   
    
  
    
    
     .Container-menu{
        display: none;
    }
    
     .narrativebutton{
        display: none;
    }
    .narrativesub{
        display: none;
    }
    
    .menu-wrap{
        display: block;
    }
    
     ul.sub-navnar{display: none;}
    
    input[type=checkbox]:checked ~ .sub-navnar {
        display: none;}
    
    
    #narrative{display: none;}
    
    .videobutton h3{display: none;}
    
    .videobutton a{display: none;}
    
    .videobutton{display: none;}
    
    .projectbutton h3{display: none;}
    
    .projectbutton a{display: none;}
    
    
    .projectbutton{display: none;}
    
    ul.doc-navnar{display: none;}
    #documentary{display: none;}
    
    input[type=checkbox]:checked ~ .doc-navnar {display: none;}
    
    .doc-navnar li a{display: none;}
        
     .doc-navnar li {display: none;} 
        
      .docubutton a{display: none;}
    
       .docubutton{display: none;}
    
     #Layer_1{display: none;}
}
    











    
    
    
    
    
    
    
    
    
/*Lens menu starts*/    

@media only screen and (min-device-width: 900px)and (max-width:1023px){

.Container{
        max-width: 900px;}


.showcase h3 {font-size: 1.7rem;padding:110px 50px 0px 180px; font-family: Audrey;font-style:normal;font-weight: 500;}
    
    .showcase h4{font-size: 1.7rem;padding:0px 25px 0px 180px;font-family: Audrey;font-style:normal;font-weight: 500;}
    
   
    
    
    .bio{ margin-top:420px;
    margin-left: -5px;}
    
    
    
    
    .bio p{
    font-size: 16px;
    padding:0px 145px 2px 135px;
    text-align:justify;
    font-family: acumin-pro;
    font-style:normal;
    
    color: lightgray;
    opacity: 100%;
    justify-content: center;
   
      
  
    

}
    
    .showcase img{
  width: 500px;
    height: auto;
    margin-top:-14%;
    margin-bottom:-55%;
    margin-left: 20%;
       }
    
    .showcase2 img{display: none;}
    
    .logos{
    margin-top: 55%;
        margin-left: 70px;
}
    
    .imdb img{
    
 margin-left: 20px;
    width:25px;
    height: auto;
    margin-top:-130px;
    position: absolute;   
    
    
}

.vimeo img{
    

    width:21px;
    height: auto;
    margin-top:-135px;
    position: absolute;
    margin-left: -95px;
    
    
}


.contact img{
    

    width:19px;
    height: auto;
    margin-top:-135px;
    position: absolute;   
    margin-left: -265px;
    
}

 hr{margin-left: 10%;
    margin-right: 10%;
opacity: 0;
background-color:#f7cd46;
    margin-top: 90px;

}   
    
    
     .logos p {font-family: acumin-pro,arial;
    font-size:11px;
    color:lightgray;
    opacity: 0.5;
     margin-left: 61%;
    margin-top:-135px;
    padding-bottom: 5%;}   
    
  
    
    
     .Container-menu{
        display: block;
    }
    
     .narrativebutton{
        display: block;
    }
    .narrativesub{
        display: none;
    }
    
    
   #Layer_1{
  margin-left: 160px;
    position: absolute;
       margin-top:-455px;
       width: 210px;
       height: auto;
} 
    
    
    
 .narrativebutton{
    opacity: 0%;
   
    position: absolute;
    background-color:transparent;
     color: gray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:955px; 
     margin-left: 135px;
     cursor: default;
     width: 105px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 13.5px;
     
    
    
}

.narrativebutton a{
    opacity: 0%;
    color: gray;
    background-color: transparent;
  
    
}



   .sub-navnar li {
  font-family: acumin-pro;
    width: 130px;
    text-decoration: none;
       color: lightgray;
    list-style-type: none;
   padding-bottom: 15px;
      
    
}


.sub-navnar li a{
font-family: acumin-pro;
    font-size: 14px;
    text-decoration: none;
    color: lightgray;
   
   }
    
    
   
    
input[type=checkbox]:checked ~ .sub-navnar {
    display: block;
    position: absolute;
    margin-top: -350px;
   
    z-index: 99999;
    width: 100px;
    height: 100px;
    background-color: transparent;
    margin-left:134px;
    font-size: 15px;
    font-family:acumin-pro;
  color: lightgray;
    list-style-type: none;
}


#narrative{
    position: absolute;
    width: 120px;
    height: 40px;
    top: 945px;
   
    margin-left: 120px;
    z-index: 1;
    opacity: 0;
    cursor: default;
    display: block;
    
}
    
    
    ul.sub-navnar{
        position: absolute;
      margin-top: 200px;
        width: 250px;
        margin-left:150px;
        display: none;
    }   
    
    
    
    .docubutton{
    opacity:0;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    background-color:transparent;
     color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:955px; 
     margin-left:635px;
     cursor: default;
     width: 105px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 13px;
     
    
    
}

.docubutton a{
    opacity: 0%;
    color: lightgray;
    background-color: transparent;
  
    
}
    
    .doc-navnar li {
  font-family: acumin-pro;
    width: 130px;
    text-decoration: none;
       color: lightgray;
    list-style-type: none;
   padding-bottom: 15px;
        display: none;
    
}


.doc-navnar li a{
font-family: acumin-pro;
    font-size: 14px;
    text-decoration: none;
    color: lightgray;
    display: block;
    
   }
    
    
   
    
input[type=checkbox]:checked ~ .doc-navnar {
    display: block;
    position: absolute;
   margin-top: -350px;
    z-index: 99999;
    width: 100px;
    height: 100px;
    background-color: transparent;
    margin-left:670px;
    font-size: 15px;
    font-family:acumin-pro;
    color: lightgray;
    list-style-type: none;
}


#documentary{
    position: absolute;
    width: 130px;
    height: 40px;
    top: 945px;
    
    margin-left: 625px;
    z-index: 1;
    opacity: 0;
    cursor: default;
display: block;
}
    
    
    ul.doc-navnar{
        position: absolute;
      margin-top: 200px;
        width: 250px;
        margin-left:150px;
        display: none;
    }   
    
    
    
    
    
    
    
    
   .projectbutton{
    opacity: 100;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    background-color:transparent;
     color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:835px; 
     margin-left: 350px;
     cursor: default;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 14px;
     
    
    
}

.projectbutton a{
    opacity: 100%;
    color: white;
    background-color: transparent;
     transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: static;
    color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:745px; 
     left: 300px;
     cursor: pointer;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 14px;
  
    
}  
    
 .projectbutton h3{
    opacity: 0;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position:static;
    background-color:transparent;
    color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:725px; 
     left: 350px;
     cursor:default;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 15px;
     
    
    
}   
    
    
    
    
 .videobutton{
    opacity: 100%;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    background-color:transparent;
     color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
  top:1113px; 
    margin-left: 255px;
     cursor: default;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 14px;
     
    
    
}

.videobutton a{
    opacity: 100%;
    
    background-color: transparent;
     transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
     cursor: pointer;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 14px;
  
    
}  
    
 .videobutton h3{
    opacity:0%;
   transition-property: opacity;
    transition: 900s cubic-bezier(.01,10,0.999,0.999) 0s;
    position: absolute;
    background-color:transparent;
     color: lightgray;
     display: block;
     text-decoration: none;
     z-index:0;
     cursor: default;
     width: 200px;
     height: 40px;
     font-family: acumin-pro,arial;
    font-size: 15px;
     left:69%;
     
    
    
}   
       
  .Container-menu{
        display: block;
    }
    
     .narrativebutton{
        display: block;
    }
    .narrativesub{
        display: none;
    }
    
    .menu-wrap{
        display: none;
    }
    
     ul.sub-navnar{display:none;}
    
    input[type=checkbox]:checked ~ .sub-navnar {
        display: block;}
    
    
    #narrative{display:block;}
    
    .videobutton h3{display:block;}
    
    .videobutton a{display: block;}
    
    .videobutton{display: block;}
    
    .projectbutton h3{display: block;}
    
    .projectbutton a{display:block;}
    
    
    .projectbutton{display: block;}
    
    ul.doc-navnar{display: none}
    #documentary{display: block;}
    
    input[type=checkbox]:checked ~ .doc-navnar {display: block;}
    
    .doc-navnar li a{display: block;}
        
     .doc-navnar li {display: block;} 
        
      .docubutton a{display: block;}
    
       .docubutton{display: block;}
    
     #Layer_1{display: block;}


    
    
 
}















@media only screen and (min-device-width: 835px) and (max-width:899px) {


.Container{
        max-width: 601px;}

.menu-wrap .hamburger {width: 70px;height: 70px;margin-left:300px;margin-top: 100px;}
    
    
    
    .menu-wrap .menu > div > div > ul > li {font-size: 1rem;
  padding: 0.9rem;}
    
    .menu-wrap .menu > div > div > ul >li> ul {font-size: 1rem;
  padding: 0.8rem;}
    
    .menu-wrap .menu > div > div > ul >li > ul > li > a {
        font-size:1rem;}
    
    .menu-wrap { left: 3%;}
    
      .menu-wrap .toggler {
  position: fixed;
  
  z-index: 2;
  cursor: pointer;
  width: 55px;
  height: 55px;
  opacity: 0;
    display: inline-block;
     margin-top: 30px;
    margin-left: 390px;
    float: right;
        right:8%;
    
}
    
    
    
    
    
    .menu-wrap .hamburger {
  position: absolute;
  top: 0;
  left: 0px;
  z-index: 1;
  width: 40px;
  height: 65px;
  padding: 1rem;
  
  display: flex;
  align-items: center;
  justify-content: center;
    margin-left:1%;margin-top: 10px; }
    
    /* Hamburger Line */
.menu-wrap .hamburger > div {
  position: fixed;
  flex: none;
  width: 27px;
  height: 1px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
    margin-top: 20px;
   right: 10%;
    
}

/* Hamburger Lines - Top & Bottom */
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
   content: '';
  position: absolute;
  z-index: 1;
  top: -8px;
  width: 100%;
  height: 2px;
  background: inherit;
}
    
    /* Moves Line Down */
.menu-wrap .hamburger > div::after {
  top: 6px;
}
    

    
    
    .showcase h3 {font-size: 1.5rem;padding:150px 50px 0px 45px; font-family: Audrey;font-style:normal;font-weight: 500;}
    
    .showcase h4{font-size: 1.5rem;padding:0px 25px 0px 45px;font-family: Audrey;font-style:normal;font-weight: 500;}
    
   
    
    
    .bio{ margin-top:310px;
    margin-left: -10px;}
    
    
    
    
    .bio p{
    font-size: 16px;
    padding:0px 40px 2px 40px;
    text-align:justify;
    font-family: acumin-pro;
    font-style:normal;
    
    color: lightgray;
    opacity: 100%;
    justify-content: center;
   
      
  
    

}
    
    .showcase img{
  width: 500px;
    height: auto;
    margin-top:-16%;
    margin-bottom:-55%;
    margin-left: 7%;
       }
    
    .showcase2 img{display: none;}
    
    .logos{
    margin-top: 30%;
        margin-left: 25px;
}
    
    .imdb img{
    
 margin-left: -20px;
    width:25px;
    height: auto;
    margin-top:-90px;
    position: absolute;   
    
    
}

.vimeo img{
    

    width:21px;
    height: auto;
    margin-top:-95px;
    position: absolute;
    margin-left: -85px;
    
    
}


.contact img{
    

    width:19px;
    height: auto;
    margin-top:-94px;
    position: absolute;   
    margin-left: -190px;
    
}

 hr{margin-left: 10%;
    margin-right: 10%;
opacity: 0;
background-color:#f7cd46;
    margin-top: 90px;

}   
    
    
     .logos p {font-family: acumin-pro,arial;
    font-size:11px;
    color:lightgray;
    opacity: 0.5;
     margin-left: 61%;
    margin-top:-95px;
    padding-bottom: 5%;}   
    
  
    
    
     .Container-menu{
        display: none;
    }
    
     .narrativebutton{
        display: none;
    }
    .narrativesub{
        display: none;
    }
    
  .menu-wrap{
        display: block;
    }
    
    input[type=checkbox]:checked ~ .sub-navnar {
        display: none;}
    
    
    ul.sub-navnar{display: none;}
    

#narrative{display: none;}

.videobutton h3{display: none;}
    
    .videobutton a{display: none;}
    
    .videobutton{display: none;}
    
    .projectbutton h3{display: none;}
    
    .projectbutton a{display: none;}
    
    
    .projectbutton{display: none;}
    
    ul.doc-navnar{display: none;}
    #documentary{display: none;}
    
    input[type=checkbox]:checked ~ .doc-navnar {display: none;}
    
    .doc-navnar li a{display: none;}
        
     .doc-navnar li {display: none;} 
        
      .docubutton a{display: none;}
    
       .docubutton{display: none;}
    
     #Layer_1{display: none;}


}


















@media only screen and (min-device-width: 927px) and (max-device-width:935px)and (orientation:landscape) {


.Container{
        max-width: 600px;}
    
     .menu-wrap .hamburger {width: 70px;height: 70px;margin-left:300px;margin-top: 100px;}
    
    
    
   .menu-wrap .menu > div > div > ul > li {font-size: 1.1rem;
  padding: 0.6rem;}
    
    .menu-wrap .menu > div > div > ul >li> ul {font-size: 1.1rem;
  padding:0.2rem;}
    
    
    .menu-wrap .menu > div > div > ul >li > ul > li > a {
        font-size:1.2rem;
    
    padding-top: 10px;}
    
    
    .menu-wrap { left: 3%;}
    
    
    
    .menu-wrap .toggler {
  position: fixed;
  
  z-index: 2;
  cursor: pointer;
  width: 55px;
  height: 55px;
  opacity: 0;
    display: inline-block;
     margin-top: 10px;
    margin-left: 390px;
    float: right;
        right:8%;
    
}
       
    
    
    .menu-wrap .hamburger {
  position: absolute;
  top: 0;
  left: 0px;
  z-index: 1;
  width: 55px;
  height: 65px;
  padding: 1rem;
  
  display: flex;
  align-items: center;
  justify-content: center;
    margin-left:1%;margin-top: 10px; }
    
    /* Hamburger Line */
.menu-wrap .hamburger > div {
  position: fixed;
  flex: none;
  width: 35px;
  height: 1px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
    margin-top: 5px;
   right: 8%;
    
}

/* Hamburger Lines - Top & Bottom */
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
   content: '';
  position: absolute;
  z-index: 1;
  top: -8px;
  width: 100%;
  height: 2px;
  background: inherit;
}
    
    /* Moves Line Down */
.menu-wrap .hamburger > div::after {
  top: 8px;
}
    
    
    
    .showcase h3 {font-size: 1.7rem;padding:35px 50px 0px 30px; font-family: Audrey;font-style:normal;font-weight: 500;}
    
    .showcase h4{font-size: 1.7rem;padding:0px 25px 0px 30px;font-family: Audrey;font-style:normal;font-weight: 500;}
    
   
    
    
    .bio{ margin-top:285px;
    margin-left: 10px;}
    
    
    
    
    .bio p{
    font-size: 19px;
    padding:0px 75px 8px 25px;
    text-align:justify;
    font-family: acumin-pro;
    font-style:normal;
    
    color: lightgray;
    opacity: 100%;
    justify-content: center;
   
      
}
    
    

    .showcase img{
  width: 500px;
    height: auto;
    margin-top:-16%;
    margin-bottom:-55%;
    margin-left:6%;
       }
    
    .showcase2 img{display: none;}
    
    .logos{
    margin-top: 0;
        margin-left: 40px;
        margin-bottom: 0px;
}
    
    .imdb img{
    
 margin-left: -33px;
    width:38px;
    height: auto;
    margin-top:-60px;
    position: relative;
        padding-bottom: 0px;
    
    
}

.vimeo img{
    

    width:28px;
    height: auto;
    margin-top:-60px;
    position: relative;
    margin-left: -82px;
    padding-bottom: 0px;
    
}


.contact img{
    

    width:25px;
    height: auto;
    margin-top:-60px;
    position: relative;   
    margin-left: -172px;
    padding-bottom: 0px;
}

 hr{margin-left: 10%;
    margin-right: 10%;
opacity: 0;
background-color:#f7cd46;
    margin-top: 90px;

}   
    
    

     .logos p {font-family: acumin-pro,arial;
    font-size: 12px;
    color:ghostwhite;
    opacity: 0.5;
     margin-left: 54%;
    margin-top:0px;
    padding-bottom: 20%;}   
    
  
    
    
     .Container-menu{
        display: none;
    }
    
     .narrativebutton{
        display: none;
    }
    .narrativesub{
        display: none;
    }
    
    .menu-wrap{
        display: block;
    }
    
     ul.sub-navnar{display: none;}
    
    input[type=checkbox]:checked ~ .sub-navnar {
        display: none;}
    
    
    #narrative{display: none;}
    
    .videobutton h3{display: none;}
    
    .videobutton a{display: none;}
    
    .videobutton{display: none;}
    
    .projectbutton h3{display: none;}
    
    .projectbutton a{display: none;}
    
    
    .projectbutton{display: none;}
    
    ul.doc-navnar{display: none;}
    #documentary{display: none;}
    
    input[type=checkbox]:checked ~ .doc-navnar {display: none;}
    
    .doc-navnar li a{display: none;}
        
     .doc-navnar li {display: none;} 
        
      .docubutton a{display: none;}
    
       .docubutton{display: none;}
    
     #Layer_1{display: none;}
}
    




















@media only screen and (min-device-width: 811px) and (max-width:833px) {

.Container{
        max-width: 601px;}

.menu-wrap .hamburger {width: 70px;height: 70px;margin-left:300px;margin-top: 100px;}
    
    
    
    .menu-wrap .menu > div > div > ul > li {font-size: 1rem;
  padding: 0.9rem;}
    
    .menu-wrap .menu > div > div > ul >li> ul {font-size: 1rem;
  padding: 0.8rem;}
    
    .menu-wrap .menu > div > div > ul >li > ul > li > a {
        font-size:1rem;}
    
    .menu-wrap { left: 3%;}
    
      .menu-wrap .toggler {
  position: fixed;
  
  z-index: 2;
  cursor: pointer;
  width: 55px;
  height: 55px;
  opacity: 0;
    display: inline-block;
     margin-top: 30px;
    margin-left: 390px;
    float: right;
        right:8%;
    
}
    
    
    
    
    
    .menu-wrap .hamburger {
  position: absolute;
  top: 0;
  left: 0px;
  z-index: 1;
  width: 40px;
  height: 65px;
  padding: 1rem;
  
  display: flex;
  align-items: center;
  justify-content: center;
    margin-left:1%;margin-top: 10px; }
    
    /* Hamburger Line */
.menu-wrap .hamburger > div {
  position: fixed;
  flex: none;
  width: 27px;
  height: 1px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
    margin-top: 20px;
   right: 10%;
    
}

/* Hamburger Lines - Top & Bottom */
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
   content: '';
  position: absolute;
  z-index: 1;
  top: -8px;
  width: 100%;
  height: 2px;
  background: inherit;
}
    
    /* Moves Line Down */
.menu-wrap .hamburger > div::after {
  top: 6px;
}
    

    
    
    .showcase h3 {font-size: 1.5rem;padding:150px 50px 0px 45px; font-family: Audrey;font-style:normal;font-weight: 500;}
    
    .showcase h4{font-size: 1.5rem;padding:0px 25px 0px 45px;font-family: Audrey;font-style:normal;font-weight: 500;}
    
   
    
    
    .bio{ margin-top:310px;
    margin-left: -10px;}
    
    
    
    
    .bio p{
    font-size: 16px;
    padding:0px 40px 2px 40px;
    text-align:justify;
    font-family: acumin-pro;
    font-style:normal;
    
    color: lightgray;
    opacity: 100%;
    justify-content: center;
   
      
  
    

}
    
    .showcase img{
  width: 500px;
    height: auto;
    margin-top:-16%;
    margin-bottom:-55%;
    margin-left: 7%;
       }
    
    .showcase2 img{display: none;}
    
    .logos{
    margin-top: 30%;
        margin-left: 25px;
}
    
    .imdb img{
    
 margin-left: -20px;
    width:25px;
    height: auto;
    margin-top:-90px;
    position: absolute;   
    
    
}

.vimeo img{
    

    width:21px;
    height: auto;
    margin-top:-95px;
    position: absolute;
    margin-left: -85px;
    
    
}


.contact img{
    

    width:19px;
    height: auto;
    margin-top:-94px;
    position: absolute;   
    margin-left: -190px;
    
}

 hr{margin-left: 10%;
    margin-right: 10%;
opacity: 0;
background-color:#f7cd46;
    margin-top: 90px;

}   
    
    
     .logos p {font-family: acumin-pro,arial;
    font-size:11px;
    color:lightgray;
    opacity: 0.5;
     margin-left: 61%;
    margin-top:-95px;
    padding-bottom: 5%;}   
    
  
    
    
     .Container-menu{
        display: none;
    }
    
     .narrativebutton{
        display: none;
    }
    .narrativesub{
        display: none;
    }
    
  .menu-wrap{
        display: block;
    }
    
    input[type=checkbox]:checked ~ .sub-navnar {
        display: none;}
    
    
    ul.sub-navnar{display: none;}
    

#narrative{display: none;}

.videobutton h3{display: none;}
    
    .videobutton a{display: none;}
    
    .videobutton{display: none;}
    
    .projectbutton h3{display: none;}
    
    .projectbutton a{display: none;}
    
    
    .projectbutton{display: none;}
    
    ul.doc-navnar{display: none;}
    #documentary{display: none;}
    
    input[type=checkbox]:checked ~ .doc-navnar {display: none;}
    
    .doc-navnar li a{display: none;}
        
     .doc-navnar li {display: none;} 
        
      .docubutton a{display: none;}
    
       .docubutton{display: none;}
    
     #Layer_1{display: none;}


}



















@media only screen and (min-device-width: 769px) and (max-width:809px) {
    
  
.Container{
        max-width: 601px;}

.menu-wrap .hamburger {width: 70px;height: 70px;margin-left:300px;margin-top: 100px;}
    
    
    
    .menu-wrap .menu > div > div > ul > li {font-size: 1rem;
  padding: 0.9rem;}
    
    .menu-wrap .menu > div > div > ul >li> ul {font-size: 1rem;
  padding: 0.8rem;}
    
    .menu-wrap .menu > div > div > ul >li > ul > li > a {
        font-size:1rem;}
    
    .menu-wrap { left: 3%;}
    
      .menu-wrap .toggler {
  position: fixed;
  
  z-index: 2;
  cursor: pointer;
  width: 55px;
  height: 55px;
  opacity: 0;
    display: inline-block;
     margin-top: 30px;
    margin-left: 390px;
    float: right;
        right:8%;
    
}
    
    
    
    
    
    .menu-wrap .hamburger {
  position: absolute;
  top: 0;
  left: 0px;
  z-index: 1;
  width: 40px;
  height: 65px;
  padding: 1rem;
  
  display: flex;
  align-items: center;
  justify-content: center;
    margin-left:1%;margin-top: 10px; }
    
    /* Hamburger Line */
.menu-wrap .hamburger > div {
  position: fixed;
  flex: none;
  width: 27px;
  height: 1px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
    margin-top: 20px;
   right: 10%;
    
}

/* Hamburger Lines - Top & Bottom */
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
   content: '';
  position: absolute;
  z-index: 1;
  top: -8px;
  width: 100%;
  height: 2px;
  background: inherit;
}
    
    /* Moves Line Down */
.menu-wrap .hamburger > div::after {
  top: 6px;
}
    

    
    
    .showcase h3 {font-size: 1.5rem;padding:150px 50px 0px 45px; font-family: Audrey;font-style:normal;font-weight: 500;}
    
    .showcase h4{font-size: 1.5rem;padding:0px 25px 0px 45px;font-family: Audrey;font-style:normal;font-weight: 500;}
    
   
    
    
    .bio{ margin-top:310px;
    margin-left: -10px;}
    
    
    
    
    .bio p{
    font-size: 16px;
    padding:0px 40px 2px 40px;
    text-align:justify;
    font-family: acumin-pro;
    font-style:normal;
    
    color: lightgray;
    opacity: 100%;
    justify-content: center;
   
      
  
    

}
    
    .showcase img{
  width: 500px;
    height: auto;
    margin-top:-16%;
    margin-bottom:-55%;
    margin-left: 7%;
       }
    
    .showcase2 img{display: none;}
    
    .logos{
    margin-top: 30%;
        margin-left: 25px;
}
    
    .imdb img{
    
 margin-left: -20px;
    width:25px;
    height: auto;
    margin-top:-90px;
    position: absolute;   
    
    
}

.vimeo img{
    

    width:21px;
    height: auto;
    margin-top:-95px;
    position: absolute;
    margin-left: -85px;
    
    
}


.contact img{
    

    width:19px;
    height: auto;
    margin-top:-94px;
    position: absolute;   
    margin-left: -190px;
    
}

 hr{margin-left: 10%;
    margin-right: 10%;
opacity: 0;
background-color:#f7cd46;
    margin-top: 90px;

}   
    
    
     .logos p {font-family: acumin-pro,arial;
    font-size:11px;
    color:lightgray;
    opacity: 0.5;
     margin-left: 61%;
    margin-top:-95px;
    padding-bottom: 5%;}   
    
  
    
    
     .Container-menu{
        display: none;
    }
    
     .narrativebutton{
        display: none;
    }
    .narrativesub{
        display: none;
    }
    
  .menu-wrap{
        display: block;
    }
    
    input[type=checkbox]:checked ~ .sub-navnar {
        display: none;}
    
    
    ul.sub-navnar{display: none;}
    

#narrative{display: none;}

.videobutton h3{display: none;}
    
    .videobutton a{display: none;}
    
    .videobutton{display: none;}
    
    .projectbutton h3{display: none;}
    
    .projectbutton a{display: none;}
    
    
    .projectbutton{display: none;}
    
    ul.doc-navnar{display: none;}
    #documentary{display: none;}
    
    input[type=checkbox]:checked ~ .doc-navnar {display: none;}
    
    .doc-navnar li a{display: none;}
        
     .doc-navnar li {display: none;} 
        
      .docubutton a{display: none;}
    
       .docubutton{display: none;}
    
     #Layer_1{display: none;}


}























@media only screen and (min-device-width: 601px) and (max-width:767px) {
    
  .Container{
        max-width: 601px;}

.menu-wrap .hamburger {width: 70px;height: 70px;margin-left:300px;margin-top: 100px;}
    
    
    
    .menu-wrap .menu > div > div > ul > li {font-size: 1rem;
  padding: 0.9rem;}
    
    .menu-wrap .menu > div > div > ul >li> ul {font-size: 1rem;
  padding: 0.8rem;}
    
    .menu-wrap .menu > div > div > ul >li > ul > li > a {
        font-size:1rem;}
    
    .menu-wrap { left: 3%;}
    
      .menu-wrap .toggler {
  position: fixed;
  
  z-index: 2;
  cursor: pointer;
  width: 55px;
  height: 55px;
  opacity: 0;
    display: inline-block;
     margin-top: 30px;
    margin-left: 390px;
    float: right;
        right:8%;
    
}
    
    
    
    
    
    .menu-wrap .hamburger {
  position: absolute;
  top: 0;
  left: 0px;
  z-index: 1;
  width: 40px;
  height: 65px;
  padding: 1rem;
  
  display: flex;
  align-items: center;
  justify-content: center;
    margin-left:1%;margin-top: 10px; }
    
    /* Hamburger Line */
.menu-wrap .hamburger > div {
  position: fixed;
  flex: none;
  width: 27px;
  height: 1px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
    margin-top: 20px;
   right: 10%;
    
}

/* Hamburger Lines - Top & Bottom */
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
   content: '';
  position: absolute;
  z-index: 1;
  top: -8px;
  width: 100%;
  height: 2px;
  background: inherit;
}
    
    /* Moves Line Down */
.menu-wrap .hamburger > div::after {
  top: 6px;
}
    

    
    
    .showcase h3 {font-size: 1.5rem;padding:150px 50px 0px 45px; font-family: Audrey;font-style:normal;font-weight: 500;}
    
    .showcase h4{font-size: 1.5rem;padding:0px 25px 0px 45px;font-family: Audrey;font-style:normal;font-weight: 500;}
    
   
    
    
    .bio{ margin-top:310px;
    margin-left: -10px;}
    
    
    
    
    .bio p{
    font-size: 16px;
    padding:0px 40px 2px 40px;
    text-align:justify;
    font-family: acumin-pro;
    font-style:normal;
    
    color: lightgray;
    opacity: 100%;
    justify-content: center;
   
      
  
    

}
    
    .showcase img{
  width: 500px;
    height: auto;
    margin-top:-16%;
    margin-bottom:-55%;
    margin-left: 7%;
       }
    
    .showcase2 img{display: none;}
    
    .logos{
    margin-top: 30%;
        margin-left: 25px;
}
    
    .imdb img{
    
 margin-left: -20px;
    width:25px;
    height: auto;
    margin-top:-90px;
    position: absolute;   
    
    
}

.vimeo img{
    

    width:21px;
    height: auto;
    margin-top:-95px;
    position: absolute;
    margin-left: -85px;
    
    
}


.contact img{
    

    width:19px;
    height: auto;
    margin-top:-94px;
    position: absolute;   
    margin-left: -190px;
    
}

 hr{margin-left: 10%;
    margin-right: 10%;
opacity: 0;
background-color:#f7cd46;
    margin-top: 90px;

}   
    
    
     .logos p {font-family: acumin-pro,arial;
    font-size:11px;
    color:lightgray;
    opacity: 0.5;
     margin-left: 61%;
    margin-top:-95px;
    padding-bottom: 5%;}   
    
  
    
    
     .Container-menu{
        display: none;
    }
    
     .narrativebutton{
        display: none;
    }
    .narrativesub{
        display: none;
    }
    
  .menu-wrap{
        display: block;
    }
    
    input[type=checkbox]:checked ~ .sub-navnar {
        display: none;}
    
    
    ul.sub-navnar{display: none;}
    

#narrative{display: none;}

.videobutton h3{display: none;}
    
    .videobutton a{display: none;}
    
    .videobutton{display: none;}
    
    .projectbutton h3{display: none;}
    
    .projectbutton a{display: none;}
    
    
    .projectbutton{display: none;}
    
    ul.doc-navnar{display: none;}
    #documentary{display: none;}
    
    input[type=checkbox]:checked ~ .doc-navnar {display: none;}
    
    .doc-navnar li a{display: none;}
        
     .doc-navnar li {display: none;} 
        
      .docubutton a{display: none;}
    
       .docubutton{display: none;}
    
     #Layer_1{display: none;}


}







/*Ipad 10*/
@media only screen and (min-device-width: 1025px) and (max-device-width:1112px) and (orientation:landscape) {

.Container{
        max-width: 800px;}
    
     .menu-wrap .hamburger {width: 70px;height: 70px;margin-left:300px;margin-top: 100px;}
    
    
    
    .menu-wrap .menu > div > div > ul > li {font-size: 1.2rem;
  padding: 1rem;}
    
    .menu-wrap .menu > div > div > ul >li> ul {font-size: 1.2rem;
  padding: 1rem;}
    
    .menu-wrap { left: 3%;}
    
    
    
    .menu-wrap .toggler {
  position: fixed;
  
  z-index: 2;
  cursor: pointer;
  width: 55px;
  height: 55px;
  opacity: 0;
    display: inline-block;
     margin-top: 10px;
    margin-left: 390px;
    float: right;
        right:8%;
    
}
       
    
    
    .menu-wrap .hamburger {
  position: absolute;
  top: 0;
  left: 0px;
  z-index: 1;
  width: 55px;
  height: 65px;
  padding: 1rem;
  
  display: flex;
  align-items: center;
  justify-content: center;
    margin-left:1%;margin-top: 10px; }
    
    /* Hamburger Line */
.menu-wrap .hamburger > div {
  position: fixed;
  flex: none;
  width: 31px;
  height: 1px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
    margin-top: 5px;
   right: 8%;
    
}

/* Hamburger Lines - Top & Bottom */
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
   content: '';
  position: absolute;
  z-index: 1;
  top: -8px;
  width: 100%;
  height: 2px;
  background: inherit;
}
    
    /* Moves Line Down */
.menu-wrap .hamburger > div::after {
  top: 8px;
}
    
    
    
    .showcase h3 {font-size: 1.7rem;padding:90px 50px 0px 120px; font-family: Audrey;font-style:normal;font-weight: 500;}
    
    .showcase h4{font-size: 1.7rem;padding:0px 25px 0px 120px;font-family: Audrey;font-style:normal;font-weight: 500;}
    
   
    
    
    .bio{ margin-top:380px;
    margin-left: 0px;}
    
    
    
    
    .bio p{
    font-size: 18px;
    padding:0px 140px 10px 125px;
    text-align:justify;
    font-family: acumin-pro;
    font-style:normal;
    
    color: lightgray;
    opacity: 100%;
    justify-content: center;
   
      
}
    
    

    .showcase img{
  width: 530px;
    height: auto;
    margin-top:-17%;
    margin-bottom:-55%;
    margin-left:15%;
       }
    
    .showcase2 img{display: none;}
    
    .logos{
    margin-top: 0;
        margin-left: 40px;
        margin-bottom: 0px;
}
    
    .imdb img{
    
 margin-left: 50px;
    width:33px;
    height: auto;
    margin-top:-20px;
    position: relative;
        padding-bottom: 0px;
    
    
}

.vimeo img{
    

    width:25px;
    height: auto;
    margin-top:-20px;
    position: relative;
    margin-left: -128px;
    padding-bottom: 0px;
    
}


.contact img{
    

    width:22px;
    height: auto;
    margin-top:-20px;
    position: relative;   
    margin-left: -277px;
    padding-bottom: 0px;
}

 hr{margin-left: 10%;
    margin-right: 10%;
opacity: 0;
background-color:#f7cd46;
    margin-top: 90px;

}   
    
    

     .logos p {font-family: acumin-pro,arial;
    font-size: 11px;
    color:ghostwhite;
    opacity: 0.5;
     margin-left: 57%;
    margin-top:0px;
    padding-bottom: 10%;}   
    
  
    
    
     .Container-menu{
        display: none;
    }
    
     .narrativebutton{
        display: none;
    }
    .narrativesub{
        display: none;
    }
    
    .menu-wrap{
        display: block;
    }
    
     ul.sub-navnar{display: none;}
    
    input[type=checkbox]:checked ~ .sub-navnar {
        display: none;}
    
    
    #narrative{display: none;}
    
    .videobutton h3{display: none;}
    
    .videobutton a{display: none;}
    
    .videobutton{display: none;}
    
    .projectbutton h3{display: none;}
    
    .projectbutton a{display: none;}
    
    
    .projectbutton{display: none;}
    
    ul.doc-navnar{display: none;}
    #documentary{display: none;}
    
    input[type=checkbox]:checked ~ .doc-navnar {display: none;}
    
    .doc-navnar li a{display: none;}
        
     .doc-navnar li {display: none;} 
        
      .docubutton a{display: none;}
    
       .docubutton{display: none;}
    
     #Layer_1{display: none;}
}
    

    
    
    
    






 


    
    
    
    
    
    
    

@media only screen and (min-device-width: 669px) and (max-device-width:844px)and (orientation:landscape) {

.Container{
        max-width: 600px;}
    
     .menu-wrap .hamburger {width: 70px;height: 70px;margin-left:300px;margin-top: 100px;}
    
    
    
    .menu-wrap .menu > div > div > ul > li {font-size: 1.1rem;
  padding: 0.5rem;}
    
    .menu-wrap .menu > div > div > ul >li> ul {font-size: 1.1rem;
  padding:0.1rem;}
    
    
    .menu-wrap .menu > div > div > ul >li > ul > li > a {
        font-size:1.2rem;
    
    padding-top: 8px;}
    
    
    .menu-wrap { left: 3%;}
    
    
    
    .menu-wrap .toggler {
  position: fixed;
  
  z-index: 2;
  cursor: pointer;
  width: 55px;
  height: 55px;
  opacity: 0;
    display: inline-block;
     margin-top: 10px;
    margin-left: 390px;
    float: right;
        right:8%;
    
}
    
    
    
    
    
    .menu-wrap .hamburger {
  position: absolute;
  top: 0;
  left: 0px;
  z-index: 1;
  width: 40px;
  height: 65px;
  padding: 1rem;
  
  display: flex;
  align-items: center;
  justify-content: center;
    margin-left:1%;margin-top: 10px; }
    
    /* Hamburger Line */
.menu-wrap .hamburger > div {
  position: fixed;
  flex: none;
  width: 33px;
  height: 1px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
    margin-top: 5px;
   right: 8%;
    
}

/* Hamburger Lines - Top & Bottom */
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
   content: '';
  position: absolute;
  z-index: 1;
  top: -8px;
  width: 100%;
  height: 2px;
  background: inherit;
}
    
    /* Moves Line Down */
.menu-wrap .hamburger > div::after {
  top: 6px;
}
    
    
    
    .showcase h3 {font-size: 1.7rem;padding:40px 50px 0px 50px; font-family: Audrey;font-style:normal;font-weight: 500;}
    
    .showcase h4{font-size: 1.7rem;padding:0px 25px 0px 50px;font-family: Audrey;font-style:normal;font-weight: 500;}
    
   
    
    
    .bio{ margin-top:270px;
    margin-left: 0px;}
    
    
    
    
    .bio p{
    font-size: 18.5px;
    padding:0px 90px 8px 70px;
    text-align:justify;
    font-family: acumin-pro;
    font-style:normal;
    
    color: lightgray;
    opacity: 100%;
    justify-content: center;
  
      
}
    
    
    
    
    
    
    
    .showcase img{
  width: 480px;
    height: auto;
    margin-top:-15%;
    margin-bottom:-55%;
    margin-left:8%;
       }
    
    .showcase2 img{display: none;}
    
    .logos{
    margin-top: 0;
        margin-left: 40px;
        margin-bottom: 0px;
}
    
    .imdb img{
    
 margin-left: 5px;
    width:36px;
    height: auto;
    margin-top:-80px;
    position: relative;
        padding-bottom: 0px;
    
    
}

.vimeo img{
    

    width:28px;
    height: auto;
    margin-top:-80px;
    position: relative;
    margin-left: -86px;
    padding-bottom: 0px;
    
}


.contact img{
    

    width:26px;
    height: auto;
    margin-top:-80px;
    position: relative;   
    margin-left: -182px;
    padding-bottom: 0px;
}

 hr{margin-left: 10%;
    margin-right: 10%;
opacity: 0;
background-color:#f7cd46;
    margin-top: 90px;

}   
    
    
    
    
    
    
    
    
    
     .logos p {font-family: acumin-pro,arial;
    font-size: 13px;
    color:ghostwhite;
    opacity: 0.5;
     margin-left: 48%;
    margin-top:-10px;
    padding-bottom: 15%;}   
    
  
    
    
     .Container-menu{
        display: none;
    }
    
     .narrativebutton{
        display: none;
    }
    .narrativesub{
        display: none;
    }
    
    .menu-wrap{
        display: block;
    }
    
     ul.sub-navnar{display: none;}
    
    input[type=checkbox]:checked ~ .sub-navnar {
        display: none;}
    
    
    #narrative{display: none;}
    
    .videobutton h3{display: none;}
    
    .videobutton a{display: none;}
    
    .videobutton{display: none;}
    
    .projectbutton h3{display: none;}
    
    .projectbutton a{display: none;}
    
    
    .projectbutton{display: none;}
    
    ul.doc-navnar{display: none;}
    #documentary{display: none;}
    
    input[type=checkbox]:checked ~ .doc-navnar {display: none;}
    
    .doc-navnar li a{display: none;}
        
     .doc-navnar li {display: none;} 
        
      .docubutton a{display: none;}
    
       .docubutton{display: none;}
    
     #Layer_1{display: none;}
}
  
       
   
       
       
       
    
/*Galaxy S21*/   
       
       
 @media
   only screen and (min-device-width: 800px) and (max-device-width:800px) 
  { 
   

.Container{
        max-width: 600px;}
    
     .menu-wrap .hamburger {width: 70px;height: 70px;margin-left:300px;margin-top: 100px;}
    
    
    
    .menu-wrap .menu > div > div > ul > li {font-size: 1rem;
  padding: 0.3rem;}
    
    .menu-wrap .menu > div > div > ul >li> ul {font-size: 1rem;
  padding:0.1rem;}
    
    
    .menu-wrap .menu > div > div > ul >li > ul > li > a {
        font-size:1.1rem;
    
    padding-top: 8px;}
    
    
    .menu-wrap { left: 3%;}
    
    
    
    .menu-wrap .toggler {
  position: fixed;
  
  z-index: 2;
  cursor: pointer;
  width: 55px;
  height: 55px;
  opacity: 0;
    display: inline-block;
     margin-top: 10px;
    margin-left: 390px;
    float: right;
        right:8%;
    
}
    
    
    
    
    
    .menu-wrap .hamburger {
  position: absolute;
  top: 0;
  left: 0px;
  z-index: 1;
  width: 40px;
  height: 65px;
  padding: 1rem;
  
  display: flex;
  align-items: center;
  justify-content: center;
    margin-left:1%;margin-top: 10px; }
    
    /* Hamburger Line */
.menu-wrap .hamburger > div {
  position: fixed;
  flex: none;
  width: 33px;
  height: 1px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
    margin-top: 5px;
   right: 8%;
    
}

/* Hamburger Lines - Top & Bottom */
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
   content: '';
  position: absolute;
  z-index: 1;
  top: -8px;
  width: 100%;
  height: 2px;
  background: inherit;
}
    
    /* Moves Line Down */
.menu-wrap .hamburger > div::after {
  top: 6px;
}
    
    
    
    .showcase h3 {font-size: 1.6rem;padding:40px 50px 0px 50px; font-family: Audrey;font-style:normal;font-weight: 500;}
    
    .showcase h4{font-size: 1.6rem;padding:0px 25px 0px 50px;font-family: Audrey;font-style:normal;font-weight: 500;}
    
   
    
    
    .bio{ margin-top:270px;
    margin-left: 0px;}
    
    
    
    
    .bio p{
    font-size: 2.4vw;
    padding:0px 90px 8px 70px;
    text-align:justify;
    font-family: acumin-pro;
    font-style:normal;
    
    color: lightgray;
    opacity: 100%;
    justify-content: center;
  
      
}
    
    
    
    
    
    
    
    .showcase img{
  width: 480px;
    height: auto;
    margin-top:-15%;
    margin-bottom:-55%;
    margin-left:8%;
       }
    
    .showcase2 img{display: none;}
    
    .logos{
    margin-top: 0;
        margin-left: 40px;
        margin-bottom: 0px;
}
    
    .imdb img{
    
 margin-left: 5px;
    width:36px;
    height: auto;
    margin-top:-80px;
    position: relative;
        padding-bottom: 0px;
    
    
}

.vimeo img{
    

    width:26px;
    height: auto;
    margin-top:-80px;
    position: relative;
    margin-left: -86px;
    padding-bottom: 0px;
    
}


.contact img{
    

    width:24px;
    height: auto;
    margin-top:-80px;
    position: relative;   
    margin-left: -182px;
    padding-bottom: 0px;
}

 hr{margin-left: 10%;
    margin-right: 10%;
opacity: 0;
background-color:#f7cd46;
    margin-top: 90px;

}   
    
    
    
    
    
    
    
    
    
     .logos p {font-family: acumin-pro,arial;
    font-size: 13px;
    color:ghostwhite;
    opacity: 0.5;
     margin-left: 48%;
    margin-top:-10px;
    padding-bottom: 15%;}   
    
  
    
    
     .Container-menu{
        display: none;
    }
    
     .narrativebutton{
        display: none;
    }
    .narrativesub{
        display: none;
    }
    
    .menu-wrap{
        display: block;
    }
    
     ul.sub-navnar{display: none;}
    
    input[type=checkbox]:checked ~ .sub-navnar {
        display: none;}
    
    
    #narrative{display: none;}
    
    .videobutton h3{display: none;}
    
    .videobutton a{display: none;}
    
    .videobutton{display: none;}
    
    .projectbutton h3{display: none;}
    
    .projectbutton a{display: none;}
    
    
    .projectbutton{display: none;}
    
    ul.doc-navnar{display: none;}
    #documentary{display: none;}
    
    input[type=checkbox]:checked ~ .doc-navnar {display: none;}
    
    .doc-navnar li a{display: none;}
        
     .doc-navnar li {display: none;} 
        
      .docubutton a{display: none;}
    
       .docubutton{display: none;}
    
     #Layer_1{display: none;}
}
       
       















       
       
       
       
    @media only screen and (min-device-width: 845px) and (max-device-width:851px)and (orientation:landscape) {
        
     .Container{
        max-width: 600px;}
    
     .menu-wrap .hamburger {width: 70px;height: 70px;margin-left:300px;margin-top: 100px;}
    
    
    
    .menu-wrap .menu > div > div > ul > li {font-size: 1.1rem;
  padding: 0.5rem;}
    
    .menu-wrap .menu > div > div > ul >li> ul {font-size: 1.1rem;
  padding:0.1rem;}
    
    
    .menu-wrap .menu > div > div > ul >li > ul > li > a {
        font-size:1.2rem;
    
    padding-top: 8px;}
    
    
    .menu-wrap { left: 3%;}
    
    
    
    .menu-wrap .toggler {
  position: fixed;
  
  z-index: 2;
  cursor: pointer;
  width: 55px;
  height: 55px;
  opacity: 0;
    display: inline-block;
     margin-top: 10px;
    margin-left: 390px;
    float: right;
        right:8%;
    
}
    
    
    
    
    
    .menu-wrap .hamburger {
  position: absolute;
  top: 0;
  left: 0px;
  z-index: 1;
  width: 40px;
  height: 65px;
  padding: 1rem;
  
  display: flex;
  align-items: center;
  justify-content: center;
    margin-left:1%;margin-top: 10px; }
    
    /* Hamburger Line */
.menu-wrap .hamburger > div {
  position: fixed;
  flex: none;
  width: 33px;
  height: 1px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
    margin-top: 5px;
   right: 8%;
    
}

/* Hamburger Lines - Top & Bottom */
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
   content: '';
  position: absolute;
  z-index: 1;
  top: -8px;
  width: 100%;
  height: 2px;
  background: inherit;
}
    
    /* Moves Line Down */
.menu-wrap .hamburger > div::after {
  top: 6px;
}
    
    
    
    .showcase h3 {font-size: 1.7rem;padding:40px 50px 0px 50px; font-family: Audrey;font-style:normal;font-weight: 500;}
    
    .showcase h4{font-size: 1.7rem;padding:0px 25px 0px 50px;font-family: Audrey;font-style:normal;font-weight: 500;}
    
   
    
    
    .bio{ margin-top:270px;
    margin-left: 0px;}
    
    
    
    
    .bio p{
    font-size: 18.5px;
    padding:0px 90px 10px 70px;
    text-align:justify;
    font-family: acumin-pro;
    font-style:normal;
    
    color: lightgray;
    opacity: 100%;
    justify-content: center;
  
      
}
    
    
    
    
    
    
    
    .showcase img{
  width: 480px;
    height: auto;
    margin-top:-15%;
    margin-bottom:-55%;
    margin-left:8%;
       }
    
    .showcase2 img{display: none;}
    
    .logos{
    margin-top: 0;
        margin-left: 40px;
        margin-bottom: 0px;
}
    
    .imdb img{
    
 margin-left: 5px;
    width:36px;
    height: auto;
    margin-top:-80px;
    position: relative;
        padding-bottom: 0px;
    
    
}

.vimeo img{
    

    width:28px;
    height: auto;
    margin-top:-80px;
    position: relative;
    margin-left: -86px;
    padding-bottom: 0px;
    
}


.contact img{
    

    width:26px;
    height: auto;
    margin-top:-80px;
    position: relative;   
    margin-left: -182px;
    padding-bottom: 0px;
}

 hr{margin-left: 10%;
    margin-right: 10%;
opacity: 0;
background-color:#f7cd46;
    margin-top: 90px;

}   
    
    
    
    
    
    
    
    
    
     .logos p {font-family: acumin-pro,arial;
    font-size: 13px;
    color:ghostwhite;
    opacity: 0.5;
     margin-left: 48%;
    margin-top:-10px;
    padding-bottom: 15%;}   
    
  
    
    
     .Container-menu{
        display: none;
    }
    
     .narrativebutton{
        display: none;
    }
    .narrativesub{
        display: none;
    }
    
    .menu-wrap{
        display: block;
    }
    
     ul.sub-navnar{display: none;}
    
    input[type=checkbox]:checked ~ .sub-navnar {
        display: none;}
    
    
    #narrative{display: none;}
    
    .videobutton h3{display: none;}
    
    .videobutton a{display: none;}
    
    .videobutton{display: none;}
    
    .projectbutton h3{display: none;}
    
    .projectbutton a{display: none;}
    
    
    .projectbutton{display: none;}
    
    ul.doc-navnar{display: none;}
    #documentary{display: none;}
    
    input[type=checkbox]:checked ~ .doc-navnar {display: none;}
    
    .doc-navnar li a{display: none;}
        
     .doc-navnar li {display: none;} 
        
      .docubutton a{display: none;}
    
       .docubutton{display: none;}
    
     #Layer_1{display: none;}
}
  
   
 













/*Iphone 14 Pro*/

@media only screen and (min-device-width: 852px) and (max-device-width:852px) and (orientation:landscape){
.Container{
        max-width: 600px;}
    
     .menu-wrap .hamburger {width: 70px;height: 70px;margin-left:300px;margin-top: 100px;}
    
    
    
    .menu-wrap .menu > div > div > ul > li {font-size: 1.1rem;
  padding: 0.5rem;}
    
    .menu-wrap .menu > div > div > ul >li> ul {font-size: 1.1rem;
  padding:0.1rem;}
    
    
    .menu-wrap .menu > div > div > ul >li > ul > li > a {
        font-size:1.2rem;
    
    padding-top: 8px;}
    
    
    .menu-wrap { left: 3%;}
    
    
    
    .menu-wrap .toggler {
  position: fixed;
  
  z-index: 2;
  cursor: pointer;
  width: 55px;
  height: 55px;
  opacity: 0;
    display: inline-block;
     margin-top: 10px;
    margin-left: 390px;
    float: right;
        right:8%;
    
}
    
    
    
    
    
    .menu-wrap .hamburger {
  position: absolute;
  top: 0;
  left: 0px;
  z-index: 1;
  width: 40px;
  height: 65px;
  padding: 1rem;
  
  display: flex;
  align-items: center;
  justify-content: center;
    margin-left:1%;margin-top: 10px; }
    
    /* Hamburger Line */
.menu-wrap .hamburger > div {
  position: fixed;
  flex: none;
  width: 33px;
  height: 1px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
    margin-top: 5px;
   right: 8%;
    
}

/* Hamburger Lines - Top & Bottom */
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
   content: '';
  position: absolute;
  z-index: 1;
  top: -8px;
  width: 100%;
  height: 2px;
  background: inherit;
}
    
    /* Moves Line Down */
.menu-wrap .hamburger > div::after {
  top: 6px;
}
    
    
    
    .showcase h3 {font-size: 1.6rem;padding:40px 50px 0px 50px; font-family: Audrey;font-style:normal;font-weight: 500;}
    
    .showcase h4{font-size: 1.6rem;padding:0px 25px 0px 50px;font-family: Audrey;font-style:normal;font-weight: 500;}
    
   
    
    
    .bio{ margin-top:270px;
    margin-left: 0px;}
    
    
    
    
    .bio p{
    font-size: 18.5px;
    padding:0px 90px 10px 70px;
    text-align:justify;
    font-family: acumin-pro;
    font-style:normal;
    
    color: lightgray;
    opacity: 100%;
    justify-content: center;
  
      
}
    
    
    
    
    
    
    
    .showcase img{
  width: 480px;
    height: auto;
    margin-top:-15%;
    margin-bottom:-55%;
    margin-left:8%;
       }
    
    .showcase2 img{display: none;}
    
    .logos{
    margin-top: 0;
        margin-left: 40px;
        margin-bottom: 0px;
}
    
    .imdb img{
    
 margin-left: 5px;
    width:35px;
    height: auto;
    margin-top:-80px;
    position: relative;
        padding-bottom: 0px;
    
    
}

.vimeo img{
    

    width:28px;
    height: auto;
    margin-top:-80px;
    position: relative;
    margin-left: -85px;
    padding-bottom: 0px;
    
}


.contact img{
    

    width:25px;
    height: auto;
    margin-top:-80px;
    position: relative;   
    margin-left: -179px;
    padding-bottom: 0px;
}

 hr{margin-left: 10%;
    margin-right: 10%;
opacity: 0;
background-color:#f7cd46;
    margin-top: 90px;

}   
    
    
    

    
     .logos p {font-family: acumin-pro,arial;
    font-size: 13px;
    color:ghostwhite;
    opacity: 0.5;
     margin-left: 48%;
    margin-top:-10px;
    padding-bottom: 15%;}   
    
  
    
    
     .Container-menu{
        display: none;
    }
    
     .narrativebutton{
        display: none;
    }
    .narrativesub{
        display: none;
    }
    
    .menu-wrap{
        display: block;
    }
    
     ul.sub-navnar{display: none;}
    
    input[type=checkbox]:checked ~ .sub-navnar {
        display: none;}
    
    
    #narrative{display: none;}
    
    .videobutton h3{display: none;}
    
    .videobutton a{display: none;}
    
    .videobutton{display: none;}
    
    .projectbutton h3{display: none;}
    
    .projectbutton a{display: none;}
    
    
    .projectbutton{display: none;}
    
    ul.doc-navnar{display: none;}
    #documentary{display: none;}
    
    input[type=checkbox]:checked ~ .doc-navnar {display: none;}
    
    .doc-navnar li a{display: none;}
        
     .doc-navnar li {display: none;} 
        
      .docubutton a{display: none;}
    
       .docubutton{display: none;}
    
     #Layer_1{display: none;}
}
  
       











       
       
       
       

/*Galaxy Note 5*/

    @media only screen and (min-device-width: 853px) and (max-device-width:853px) and (orientation:landscape){
        
        
    .Container{
        max-width: 600px;}
    
     .menu-wrap .hamburger {width: 70px;height: 70px;margin-left:300px;margin-top: 100px;}
    
    
    
    .menu-wrap .menu > div > div > ul > li {font-size: 1.3rem;
  padding: 0.5rem;}
    
    .menu-wrap .menu > div > div > ul >li> ul {font-size: 1.3rem;
  padding: 0.6rem;}
    
    .menu-wrap { left: 3%;}
    
    .menu-wrap .menu > div > div > ul >li > ul > li > a {padding-top: 10px;font-size:1.3rem;}
    
    .menu-wrap .toggler {
  position: fixed;
  
  z-index: 2;
  cursor: pointer;
  width: 55px;
  height: 55px;
  opacity: 0;
    display: inline-block;
     margin-top: 10px;
    margin-left: 390px;
    float: right;
        right:8%;
    
}
       
    
    
    .menu-wrap .hamburger {
  position: absolute;
  top: 0;
  left: 0px;
  z-index: 1;
  width: 55px;
  height: 65px;
  padding: 1rem;
  
  display: flex;
  align-items: center;
  justify-content: center;
    margin-left:1%;margin-top: 10px; }
    
    /* Hamburger Line */
.menu-wrap .hamburger > div {
  position: fixed;
  flex: none;
  width: 35px;
  height: 1px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
    margin-top: 5px;
   right: 8%;
    
}

/* Hamburger Lines - Top & Bottom */
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
   content: '';
  position: absolute;
  z-index: 1;
  top: -8px;
  width: 100%;
  height: 2px;
  background: inherit;
}
    
    /* Moves Line Down */
.menu-wrap .hamburger > div::after {
  top: 8px;
}
    
    
    
    .showcase h3 {font-size: 1.9rem;padding:35px 50px 0px 15px; font-family: Audrey;font-style:normal;font-weight: 500;}
    
    .showcase h4{font-size: 1.9rem;padding:0px 25px 0px 15px;font-family: Audrey;font-style:normal;font-weight: 500;}
    
   
    
    
    .bio{ margin-top:285px;
    margin-left: 13px;}
    
    
    
    
    .bio p{
    font-size: 20px;
    padding:0px 75px 10px 25px;
    text-align:justify;
    font-family: acumin-pro;
    font-style:normal;
    
    color: lightgray;
    opacity: 100%;
    justify-content: center;
   
      
}
    
    

    .showcase img{
  width: 550px;
    height: auto;
    margin-top:-16%;
    margin-bottom:-55%;
    margin-left:2%;
       }
    
    .showcase2 img{display: none;}
    
    .logos{
    margin-top: 0;
        margin-left: 40px;
        margin-bottom: 0px;
}
    
    .imdb img{
    
 margin-left: -30px;
    width:38px;
    height: auto;
    margin-top:-60px;
    position: relative;
        padding-bottom: 0px;
    
    
}

.vimeo img{
    

    width:30px;
    height: auto;
    margin-top:-60px;
    position: relative;
    margin-left: -82px;
    padding-bottom: 0px;
    
}


.contact img{
    

    width:27px;
    height: auto;
    margin-top:-60px;
    position: relative;   
    margin-left: -165px;
    padding-bottom: 0px;
}

 hr{margin-left: 10%;
    margin-right: 10%;
opacity: 0;
background-color:#f7cd46;
    margin-top: 90px;

}   
    
    

     .logos p {font-family: acumin-pro,arial;
    font-size: 14px;
    color:ghostwhite;
    opacity: 0.5;
     margin-left: 50%;
    margin-top:0px;
    padding-bottom: 20%;}   
    
  
    
    
     .Container-menu{
        display: none;
    }
    
     .narrativebutton{
        display: none;
    }
    .narrativesub{
        display: none;
    }
    
    .menu-wrap{
        display: block;
    }
    
     ul.sub-navnar{display: none;}
    
    input[type=checkbox]:checked ~ .sub-navnar {
        display: none;}
    
    
    #narrative{display: none;}
    
    .videobutton h3{display: none;}
    
    .videobutton a{display: none;}
    
    .videobutton{display: none;}
    
    .projectbutton h3{display: none;}
    
    .projectbutton a{display: none;}
    
    
    .projectbutton{display: none;}
    
    ul.doc-navnar{display: none;}
    #documentary{display: none;}
    
    input[type=checkbox]:checked ~ .doc-navnar {display: none;}
    
    .doc-navnar li a{display: none;}
        
     .doc-navnar li {display: none;} 
        
      .docubutton a{display: none;}
    
       .docubutton{display: none;}
    
     #Layer_1{display: none;}
}
    
     
        
        
        
        
        
        
        
        
        

       
       
       
       
       
       
      

       
       
       
       
       





 















/*S Galaxy S20 Plus*/

       @media only screen and (min-device-width:854px) and  (max-device-width:854px) and (orientation:landscape){
           
           
      .Container{
        max-width: 600px;}
    
     .menu-wrap .hamburger {width: 70px;height: 70px;margin-left:300px;margin-top: 100px;}
    
    
    
    .menu-wrap .menu > div > div > ul > li {font-size: 1.1rem;
  padding: 0.4rem;}
    
    .menu-wrap .menu > div > div > ul >li> ul {font-size: 1.1rem;
  padding: 0.2rem;}
           
  .menu-wrap .menu > div > div > ul >li > ul > li > a {
      font-size:1.1rem;
           
     padding-top: 5px;   
           
           }
           
           
    
    .menu-wrap { left: 3%;}
    
    
    
    .menu-wrap .toggler {
  position: fixed;
  
  z-index: 2;
  cursor: pointer;
  width: 55px;
  height: 55px;
  opacity: 0;
    display: inline-block;
     margin-top: 10px;
    margin-left: 390px;
    float: right;
        right:8%;
    
}
       
    
    
    .menu-wrap .hamburger {
  position: absolute;
  top: 0;
  left: 0px;
  z-index: 1;
  width: 55px;
  height: 65px;
  padding: 1rem;
  
  display: flex;
  align-items: center;
  justify-content: center;
    margin-left:1%;margin-top: 10px; }
    
    /* Hamburger Line */
.menu-wrap .hamburger > div {
  position: fixed;
  flex: none;
  width: 30px;
  height: 1px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
    margin-top: 0px;
   right: 8%;
    
}

/* Hamburger Lines - Top & Bottom */
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
   content: '';
  position: absolute;
  z-index: 1;
  top: -8px;
  width: 100%;
  height: 2px;
  background: inherit;
}
    
    /* Moves Line Down */
.menu-wrap .hamburger > div::after {
  top: 8px;
}
    
    
    
    .showcase h3 {font-size: 1.6rem;padding:35px 50px 0px 60px; font-family: Audrey;font-style:normal;font-weight: 500;}
    
    .showcase h4{font-size: 1.6rem;padding:0px 25px 0px 60px;font-family: Audrey;font-style:normal;font-weight: 500;}
    
   
    
    
    .bio{ margin-top:285px;
    margin-left: 5px;}
    
    
    
    
    .bio p{
    font-size: 18px;
    padding:0px 75px 8px 25px;
    text-align:justify;
    font-family: acumin-pro;
    font-style:normal;
    
    color: lightgray;
    opacity: 100%;
    justify-content: center;
   
      
}
    
    

    .showcase img{
  width: 450px;
    height: auto;
    margin-top:-15%;
    margin-bottom:-55%;
    margin-left:10%;
       }
    
    .showcase2 img{display: none;}
    
    .logos{
    margin-top: 0;
        margin-left: 40px;
        margin-bottom: 0px;
}
    
    .imdb img{
    
 margin-left: -35px;
    width:34px;
    height: auto;
    margin-top:-60px;
    position: relative;
        padding-bottom: 0px;
    
    
}

.vimeo img{
    

    width:26px;
    height: auto;
    margin-top:-60px;
    position: relative;
    margin-left: -84px;
    padding-bottom: 0px;
    
}


.contact img{
    

    width:23px;
    height: auto;
    margin-top:-60px;
    position: relative;   
    margin-left: -178px;
    padding-bottom: 0px;
}

 hr{margin-left: 10%;
    margin-right: 10%;
opacity: 0;
background-color:#f7cd46;
    margin-top: 90px;

}   
    
    

     .logos p {font-family: acumin-pro,arial;
    font-size: 12px;
    color:ghostwhite;
    opacity: 0.5;
     margin-left: 53%;
    margin-top:0px;
    padding-bottom: 20%;}   
    
  
    
    
     .Container-menu{
        display: none;
    }
    
     .narrativebutton{
        display: none;
    }
    .narrativesub{
        display: none;
    }
    
    .menu-wrap{
        display: block;
    }
    
     ul.sub-navnar{display: none;}
    
    input[type=checkbox]:checked ~ .sub-navnar {
        display: none;}
    
    
    #narrative{display: none;}
    
    .videobutton h3{display: none;}
    
    .videobutton a{display: none;}
    
    .videobutton{display: none;}
    
    .projectbutton h3{display: none;}
    
    .projectbutton a{display: none;}
    
    
    .projectbutton{display: none;}
    
    ul.doc-navnar{display: none;}
    #documentary{display: none;}
    
    input[type=checkbox]:checked ~ .doc-navnar {display: none;}
    
    .doc-navnar li a{display: none;}
        
     .doc-navnar li {display: none;} 
        
      .docubutton a{display: none;}
    
       .docubutton{display: none;}
    
     #Layer_1{display: none;}

         
           
           
           
} 





















@media only screen and (min-device-width: 855px) and (max-device-width:926px)and (orientation:landscape){ 

.Container{
        max-width: 600px;}
    
     .menu-wrap .hamburger {width: 70px;height: 70px;margin-left:300px;margin-top: 100px;}
    
    
    
    .menu-wrap .menu > div > div > ul > li {font-size: 1.1rem;
  padding: 0.5rem;}
    
    .menu-wrap .menu > div > div > ul >li> ul {font-size: 1.1rem;
  padding: 0.3rem;}
    
    .menu-wrap .menu > div > div > ul >li > ul > li > a {padding-top: 10px;
    font-size: 1.2rem;}
    
    
    .menu-wrap { left: 3%;}
    
    
    
    .menu-wrap .toggler {
  position: fixed;
  
  z-index: 2;
  cursor: pointer;
  width: 55px;
  height: 55px;
  opacity: 0;
    display: inline-block;
     margin-top: 10px;
    margin-left: 390px;
    float: right;
        right:8%;
    
}
       
    
    
    .menu-wrap .hamburger {
  position: absolute;
  top: 0;
  left: 0px;
  z-index: 1;
  width: 55px;
  height: 65px;
  padding: 1rem;
  
  display: flex;
  align-items: center;
  justify-content: center;
    margin-left:1%;margin-top: 10px; }
    
    /* Hamburger Line */
.menu-wrap .hamburger > div {
  position: fixed;
  flex: none;
  width: 35px;
  height: 1px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
    margin-top: 5px;
   right: 8%;
    
}

/* Hamburger Lines - Top & Bottom */
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
   content: '';
  position: absolute;
  z-index: 1;
  top: -8px;
  width: 100%;
  height: 2px;
  background: inherit;
}
    
    /* Moves Line Down */
.menu-wrap .hamburger > div::after {
  top: 8px;
}
    
    
    
    .showcase h3 {font-size: 1.7rem;padding:35px 50px 0px 30px; font-family: Audrey;font-style:normal;font-weight: 500;}
    
    .showcase h4{font-size: 1.7rem;padding:0px 25px 0px 30px;font-family: Audrey;font-style:normal;font-weight: 500;}
    
   
    
    
    .bio{ margin-top:285px;
    margin-left: 10px;}
    
    
    
    
    .bio p{
    font-size: 19px;
    padding:0px 75px 8px 25px;
    text-align:justify;
    font-family: acumin-pro;
    font-style:normal;
    
    color: lightgray;
    opacity: 100%;
    justify-content: center;
   
      
}
    
    

    .showcase img{
  width: 500px;
    height: auto;
    margin-top:-16%;
    margin-bottom:-55%;
    margin-left:6%;
       }
    
    .showcase2 img{display: none;}
    
    .logos{
    margin-top: 0;
        margin-left: 40px;
        margin-bottom: 0px;
}
    
    .imdb img{
    
 margin-left: -33px;
    width:36px;
    height: auto;
    margin-top:-60px;
    position: relative;
        padding-bottom: 0px;
    
    
}

.vimeo img{
    

    width:28px;
    height: auto;
    margin-top:-60px;
    position: relative;
    margin-left: -83px;
    padding-bottom: 0px;
    
}


.contact img{
    

    width:26px;
    height: auto;
    margin-top:-60px;
    position: relative;   
    margin-left: -173px;
    padding-bottom: 0px;
}

 hr{margin-left: 10%;
    margin-right: 10%;
opacity: 0;
background-color:#f7cd46;
    margin-top: 90px;

}   
    
    

     .logos p {font-family: acumin-pro,arial;
    font-size: 13px;
    color:ghostwhite;
    opacity: 0.5;
     margin-left: 51%;
    margin-top:0px;
    padding-bottom: 20%;}   
    
  
    
    
     .Container-menu{
        display: none;
    }
    
     .narrativebutton{
        display: none;
    }
    .narrativesub{
        display: none;
    }
    
    .menu-wrap{
        display: block;
    }
    
     ul.sub-navnar{display: none;}
    
    input[type=checkbox]:checked ~ .sub-navnar {
        display: none;}
    
    
    #narrative{display: none;}
    
    .videobutton h3{display: none;}
    
    .videobutton a{display: none;}
    
    .videobutton{display: none;}
    
    .projectbutton h3{display: none;}
    
    .projectbutton a{display: none;}
    
    
    .projectbutton{display: none;}
    
    ul.doc-navnar{display: none;}
    #documentary{display: none;}
    
    input[type=checkbox]:checked ~ .doc-navnar {display: none;}
    
    .doc-navnar li a{display: none;}
        
     .doc-navnar li {display: none;} 
        
      .docubutton a{display: none;}
    
       .docubutton{display: none;}
    
     #Layer_1{display: none;}
}
    
 






@media only screen and (min-device-width: 667px) and (max-device-width:668px)and (orientation:landscape) {


.Container{
        max-width: 600px;}
    
     .menu-wrap .hamburger {width: 70px;height: 70px;margin-left:300px;margin-top: 100px;}
    
    
    
    .menu-wrap .menu > div > div > ul > li {font-size: 1.2rem;
  padding: 0.3rem;}
    
    .menu-wrap .menu > div > div > ul >li> ul {font-size: 1.2rem;
  padding: 0.3rem;}
    
    .menu-wrap .menu > div > div > ul >li > ul > li > a{font-size: 1.2rem;}
    
    .menu-wrap { left: 3%;}
    
       
    
    .menu-wrap .menu > div > div > ul >li > ul > li > a {padding-top: 5px;}
    
    .menu-wrap .toggler {
  position: fixed;
  
  z-index: 2;
  cursor: pointer;
  width: 55px;
  height: 55px;
  opacity: 0;
    display: inline-block;
     margin-top: 10px;
    margin-left: 390px;
    float: right;
        right:8%;
    
}
    
    
    
    
    
    .menu-wrap .hamburger {
  position: absolute;
  top: 0;
  left: 0px;
  z-index: 1;
  width: 40px;
  height: 65px;
  padding: 1rem;
  
  display: flex;
  align-items: center;
  justify-content: center;
    margin-left:1%;margin-top: 10px; }
    
    /* Hamburger Line */
.menu-wrap .hamburger > div {
  position: fixed;
  flex: none;
  width: 33px;
  height: 1px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
    margin-top: 5px;
   right: 8%;
    
}

/* Hamburger Lines - Top & Bottom */
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
   content: '';
  position: absolute;
  z-index: 1;
  top: -8px;
  width: 100%;
  height: 2px;
  background: inherit;
}
    
    /* Moves Line Down */
.menu-wrap .hamburger > div::after {
  top: 6px;
}
    
    
    
    .showcase h3 {font-size: 1.7rem;padding:35px 50px 0px 50px; font-family: Audrey;font-style:normal;font-weight: 500;}
    
    .showcase h4{font-size: 1.7rem;padding:0px 25px 0px 50px;font-family: Audrey;font-style:normal;font-weight: 500;}
    
   
    
    
    .bio{ margin-top:270px;
    margin-left: 0px;}
    
    
    
    
    .bio p{
    font-size: 18px;
    padding:0px 90px 8px 70px;
    text-align:justify;
    font-family: acumin-pro;
    font-style:normal;
    
    color: lightgray;
    opacity: 100%;
    justify-content: center;
   
      
}
    
    
    
    
    
    
    
    .showcase img{
  width: 480px;
    height: auto;
    margin-top:-15%;
    margin-bottom:-55%;
    margin-left:8%;
       }
    
    .showcase2 img{display: none;}
    
    .logos{
    margin-top: 0;
        margin-left: 40px;
        margin-bottom: 0px;
}
    
    .imdb img{
    
 margin-left: 5px;
    width:36px;
    height: auto;
    margin-top:-80px;
    position: relative;
        padding-bottom: 0px;
    
    
}

.vimeo img{
    

    width:30px;
    height: auto;
    margin-top:-80px;
    position: relative;
    margin-left: -78px;
    padding-bottom: 0px;
    
}


.contact img{
    

    width:26px;
    height: auto;
    margin-top:-80px;
    position: relative;   
    margin-left: -162px;
    padding-bottom: 0px;
}

 hr{margin-left: 10%;
    margin-right: 10%;
opacity: 0;
background-color:#f7cd46;
    margin-top: 90px;

}   
    
    
    
    
    
    
    
    
    
     .logos p {font-family: acumin-pro,arial;
    font-size: 13px;
    color:lightgray;
    opacity: 0.5;
     margin-left: 48%;
    margin-top:-10px;
    padding-bottom: 15%;}   
    
  
    
    
     .Container-menu{
        display: none;
    }
    
     .narrativebutton{
        display: none;
    }
    .narrativesub{
        display: none;
    }
    
    .menu-wrap{
        display: block;
    }
    
     ul.sub-navnar{display: none;}
    
    input[type=checkbox]:checked ~ .sub-navnar {
        display: none;}
    
    
    #narrative{display: none;}
    
    .videobutton h3{display: none;}
    
    .videobutton a{display: none;}
    
    .videobutton{display: none;}
    
    .projectbutton h3{display: none;}
    
    .projectbutton a{display: none;}
    
    
    .projectbutton{display: none;}
    
    ul.doc-navnar{display: none;}
    #documentary{display: none;}
    
    input[type=checkbox]:checked ~ .doc-navnar {display: none;}
    
    .doc-navnar li a{display: none;}
        
     .doc-navnar li {display: none;} 
        
      .docubutton a{display: none;}
    
       .docubutton{display: none;}
    
     #Layer_1{display: none;}
}
    
 










@media only screen and (min-device-width: 601px) and (max-device-width:666px)and (orientation:landscape) {

.Container{
        max-width: 550px;}
    
     .menu-wrap .hamburger {width: 70px;height: 70px;margin-left:300px;margin-top: 100px;}
    
    
    
    .menu-wrap .menu > div > div > ul > li {font-size: 1.1rem;
  padding: 0.3rem;}
    
    .menu-wrap .menu > div > div > ul >li> ul {font-size: 1.1rem;
  padding: 0rem;}
    
    
   .menu-wrap .menu > div > div > ul >li > ul > li > a {
       font-size:1.1rem;
       padding-top: 7px;
    }
    
    
    .menu-wrap { left: 3%;}
    
    
    
    .menu-wrap .toggler {
  position: fixed;
  
  z-index: 2;
  cursor: pointer;
  width: 55px;
  height: 55px;
  opacity: 0;
    display: inline-block;
     margin-top: 10px;
    margin-left: 390px;
    float: right;
        right:8%;
    
}
    
    
    
    
    
    .menu-wrap .hamburger {
  position: absolute;
  top: 0;
  left: 0px;
  z-index: 1;
  width: 40px;
  height: 65px;
  padding: 1rem;
  
  display: flex;
  align-items: center;
  justify-content: center;
    margin-left:1%;margin-top: 3px; }
    
    /* Hamburger Line */
.menu-wrap .hamburger > div {
  position: fixed;
  flex: none;
  width: 30px;
  height: 1px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
    margin-top: 5px;
   right: 8%;
    
}

/* Hamburger Lines - Top & Bottom */
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
   content: '';
  position: absolute;
  z-index: 1;
  top: -8px;
  width: 100%;
  height: 2px;
  background: inherit;
}
    
    /* Moves Line Down */
.menu-wrap .hamburger > div::after {
  top: 6px;
}
    
    
    
    .showcase h3 {font-size: 1.6rem;padding:25px 50px 0px 60px; font-family: Audrey;font-style:normal;font-weight: 500;}
    
    .showcase h4{font-size: 1.6rem;padding:0px 25px 0px 60px;font-family: Audrey;font-style:normal;font-weight: 500;}
    
   
    
    
    .bio{ margin-top:250px;
    margin-left: 0px;}
    
    
    
    
    .bio p{
    font-size: 17px;
    padding:0px 70px 8px 50px;
    text-align:justify;
    font-family: acumin-pro;
    font-style:normal;
    
    color: lightgray;
    opacity: 100%;
    
  
      
}
    
    
    
    
    
    
    
    .showcase img{
  width: 400px;
    height: auto;
    margin-top:-15%;
    margin-bottom:-55%;
    margin-left:12%;
       }
    
    .showcase2 img{display: none;}
    
    .logos{
    margin-top: 0;
        margin-left: 40px;
        margin-bottom: 0px;
}
    
    .imdb img{
    
 margin-left: -15px;
    width:33px;
    height: auto;
    margin-top:-80px;
    position: relative;
        padding-bottom: 0px;
    
    
}

.vimeo img{
    

    width:26px;
    height: auto;
    margin-top:-80px;
    position: relative;
    margin-left: -73px;
    padding-bottom: 0px;
    
}


.contact img{
    

    width:23px;
    height: auto;
    margin-top:-80px;
    position: relative;   
    margin-left: -152px;
    padding-bottom: 0px;
}

 hr{margin-left: 10%;
    margin-right: 10%;
opacity: 0;
background-color:#f7cd46;
    margin-top: 90px;

}   
    
    
    
    
    
    
    
    
    
     .logos p {font-family: acumin-pro,arial;
    font-size: 12px;
    color:lightgray;
    opacity: 0.5;
     margin-left: 50%;
    margin-top:-10px;
    padding-bottom: 15%;}   
    
  
    
    
     .Container-menu{
        display: none;
    }
    
     .narrativebutton{
        display: none;
    }
    .narrativesub{
        display: none;
    }
    
    .menu-wrap{
        display: block;
    }
    
     ul.sub-navnar{display: none;}
    
    input[type=checkbox]:checked ~ .sub-navnar {
        display: none;}
    
    
    #narrative{display: none;}
    
    .videobutton h3{display: none;}
    
    .videobutton a{display: none;}
    
    .videobutton{display: none;}
    
    .projectbutton h3{display: none;}
    
    .projectbutton a{display: none;}
    
    
    .projectbutton{display: none;}
    
    ul.doc-navnar{display: none;}
    #documentary{display: none;}
    
    input[type=checkbox]:checked ~ .doc-navnar {display: none;}
    
    .doc-navnar li a{display: none;}
        
     .doc-navnar li {display: none;} 
        
      .docubutton a{display: none;}
    
       .docubutton{display: none;}
    
     #Layer_1{display: none;}
}
    
 










@media only screen and (min-device-width: 481px) and (max-width:600px) {
    
.Container{
        max-width: 481px;}
    
     .menu-wrap .hamburger {width: 70px;height: 70px;margin-left:300px;margin-top: 100px;}
    
    
    
    .menu-wrap .menu > div > div > ul > li {font-size: 1rem;
  padding: 0.9rem;}
    
    .menu-wrap .menu > div > div > ul >li> ul {font-size: 1rem;
  padding: 0.8rem;}
    
    .menu-wrap .menu > div > div > ul >li > ul > li > a {
        font-size:1rem;}
    
    
    .menu-wrap { left: 3%;}
    
    
    
    .menu-wrap .toggler {
  position: fixed;
  
  z-index: 2;
  cursor: pointer;
  width: 55px;
  height: 55px;
  opacity: 0;
    display: inline-block;
     margin-top: 30px;
    margin-left: 390px;
    float: right;
        right:8%;
    
}
    
    
    
    
    
    .menu-wrap .hamburger {
  position: absolute;
  top: 0;
  left: 0px;
  z-index: 1;
  width: 40px;
  height: 65px;
  padding: 1rem;
  
  display: flex;
  align-items: center;
  justify-content: center;
    margin-left:1%;margin-top: 10px; }
    
    /* Hamburger Line */
.menu-wrap .hamburger > div {
  position: fixed;
  flex: none;
  width: 27px;
  height: 1px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
    margin-top: 20px;
   right: 10%;
    
}

/* Hamburger Lines - Top & Bottom */
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
   content: '';
  position: absolute;
  z-index: 1;
  top: -8px;
  width: 100%;
  height: 2px;
  background: inherit;
}
    
    /* Moves Line Down */
.menu-wrap .hamburger > div::after {
  top: 6px;
}
    
    
    
    .showcase h3 {font-size: 1.5rem;padding:150px 50px 0px 20px; font-family: Audrey;font-style:normal;font-weight: 500;}
    
    .showcase h4{font-size: 1.5rem;padding:0px 25px 0px 20px;font-family: Audrey;font-style:normal;font-weight: 500;}
    
   
    
    
    .bio{ margin-top:245px;
    margin-left: 0px;}
    
    
    
    
    .bio p{
    font-size: 16px;
    padding:0px 20px 2px 20px;
    text-align:justify;
    font-family: acumin-pro;
    font-style:normal;
    
    color: lightgray;
    opacity: 100%;
    justify-content: center;
   
      
}
    
    
    
    
    
    
    
    .showcase img{
  width: 450px;
    height: auto;
    margin-top:-16%;
    margin-bottom:-55%;
    margin-left:3%;
       }
    
    .showcase2 img{display: none;}
    
    .logos{
    margin-top: 40%;
        margin-left: 40px;
}
    
    .imdb img{
    
 margin-left: -40px;
    width:25px;
    height: auto;
    margin-top:-90px;
    position: absolute;   
    
    
}

.vimeo img{
    

    width:21px;
    height: auto;
    margin-top:-95px;
    position: absolute;
    margin-left: -82px;
    
    
}


.contact img{
    

    width:19px;
    height: auto;
    margin-top:-94px;
    position: absolute;   
    margin-left: -155px;
    
}

 hr{margin-left: 10%;
    margin-right: 10%;
opacity: 0;
background-color:#f7cd46;
    margin-top: 90px;

}   
    
    
    
    
    
    
    
    
    
     .logos p {font-family: acumin-pro,arial;
    font-size: 11px;
    color:lightgray;
    opacity: 0.5;
     margin-left: 55%;
    margin-top:-90px;
    padding-bottom: 5%;}   
    
  
    
    
     .Container-menu{
        display: none;
    }
    
     .narrativebutton{
        display: none;
    }
    .narrativesub{
        display: none;
    }
    
    .menu-wrap{
        display: block;
    }
    
     ul.sub-navnar{display: none;}
    
    input[type=checkbox]:checked ~ .sub-navnar {
        display: none;}
    
    
    #narrative{display: none;}
    
    .videobutton h3{display: none;}
    
    .videobutton a{display: none;}
    
    .videobutton{display: none;}
    
    .projectbutton h3{display: none;}
    
    .projectbutton a{display: none;}
    
    
    .projectbutton{display: none;}
    
    ul.doc-navnar{display: none;}
    #documentary{display: none;}
    
    input[type=checkbox]:checked ~ .doc-navnar {display: none;}
    
    .doc-navnar li a{display: none;}
        
     .doc-navnar li {display: none;} 
        
      .docubutton a{display: none;}
    
       .docubutton{display: none;}
    
     #Layer_1{display: none;}
}
    
 







@media only screen and (min-device-width: 481px) and (max-device-width:600px) and (orientation:landscape){


    
       
.Container{
        max-width: 481px;}
    
     .menu-wrap .hamburger {width: 70px;height: 70px;margin-left:300px;margin-top: 100px;}
    
    
    
    .menu-wrap .menu > div > div > ul > li {font-size: 1.1rem;
  padding: 0.3rem;}
    
    .menu-wrap .menu > div > div > ul >li> ul {font-size: 1.1rem;
  padding: 0.1rem;}
    
    
    
    .menu-wrap .menu > div > div > ul >li > ul > li > a {
        font-size:1.1rem;padding-top: 5px;}
    
    
    
    .menu-wrap { left: 3%;}
    
    
    
    .menu-wrap .toggler {
  position: fixed;
  
  z-index: 2;
  cursor: pointer;
  width: 55px;
  height: 55px;
  opacity: 0;
    display: inline-block;
     margin-top: 10px;
    margin-left: 390px;
    float: right;
        right:8%;
    
}
    
    
    
    
    
    .menu-wrap .hamburger {
  position: absolute;
  top: 0;
  left: 0px;
  z-index: 1;
  width: 35px;
  height: 55px;
  padding: 1rem;
  
  display: flex;
  align-items: center;
  justify-content: center;
    margin-left:1%;margin-top: 10px; }
    
    /* Hamburger Line */
.menu-wrap .hamburger > div {
  position: fixed;
  flex: none;
  width: 30px;
  height: 1px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
    margin-top: 5px;
   right: 8%;
    
}

/* Hamburger Lines - Top & Bottom */
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
   content: '';
  position: absolute;
  z-index: 1;
  top: -8px;
  width: 100%;
  height: 2px;
  background: inherit;
}
    
    /* Moves Line Down */
.menu-wrap .hamburger > div::after {
  top: 6px;
}
    
    
    
    .showcase h3 {font-size: 1.6rem;padding:35px 50px 0px 20px; font-family: Audrey;font-style:normal;font-weight: 500;}
    
    .showcase h4{font-size: 1.6rem;padding:0px 25px 0px 20px;font-family: Audrey;font-style:normal;font-weight: 500;}
    
   
    
    
    .bio{ margin-top:230px;
    margin-left: -10px;}
    
    
    
    
    .bio p{
    font-size: 18px;
    padding:0px 60px 8px 50px;
    text-align:justify;
    font-family: acumin-pro;
    font-style:normal;
    
    color: lightgray;
    opacity: 100%;
    justify-content: center;
   
      
}
    
    
    
    
    
    
    
    .showcase img{
  width: 400px;
    height: auto;
    margin-top:-16%;
    margin-bottom:-55%;
    margin-left:5%;
       }
    
    .showcase2 img{display: none;}
    
    .logos{
    margin-top: 0;
        margin-left: 40px;
        margin-bottom: 0px;
}
    
    .imdb img{
    
 margin-left: -20px;
    width:35px;
    height: auto;
    margin-top:-80px;
    position: relative;
        padding-bottom: 0px;
    
    
}

.vimeo img{
    

    width:28px;
    height: auto;
    margin-top:-80px;
    position: relative;
    margin-left: -54px;
    padding-bottom: 0px;
    
}


.contact img{
    

    width:25px;
    height: auto;
    margin-top:-80px;
    position: relative;   
    margin-left: -110px;
    padding-bottom: 0px;
}

 hr{margin-left: 10%;
    margin-right: 10%;
opacity: 0;
background-color:#f7cd46;
    margin-top: 90px;

}   
    
    
    
    
    
    
    
    
    
     .logos p {font-family: acumin-pro,arial;
    font-size: 13px;
    color:lightgray;
    opacity: 0.5;
     margin-left: 36%;
    margin-top:0px;
    padding-bottom: 15%;}   
    
  
    
    
     .Container-menu{
        display: none;
    }
    
     .narrativebutton{
        display: none;
    }
    .narrativesub{
        display: none;
    }
    
    .menu-wrap{
        display: block;
    }
    
     ul.sub-navnar{display: none;}
    
    input[type=checkbox]:checked ~ .sub-navnar {
        display: none;}
    
    
    #narrative{display: none;}
    
    .videobutton h3{display: none;}
    
    .videobutton a{display: none;}
    
    .videobutton{display: none;}
    
    .projectbutton h3{display: none;}
    
    .projectbutton a{display: none;}
    
    
    .projectbutton{display: none;}
    
    ul.doc-navnar{display: none;}
    #documentary{display: none;}
    
    input[type=checkbox]:checked ~ .doc-navnar {display: none;}
    
    .doc-navnar li a{display: none;}
        
     .doc-navnar li {display: none;} 
        
      .docubutton a{display: none;}
    
       .docubutton{display: none;}
    
     #Layer_1{display: none;}
}