* {
    box-sizing: border-box;
}

body {
    background-color: black;
	background-size: 100%;
    min-width: 320px;
}

/*------------------------------ Custom Fonts ------------------------------------*/

.customHeader {
    font-family: sans-serif;
    color: white;
    font-size: 60px;
    font-weight: 600;
    font-style: oblique;
    text-align: left;
}

.customfsf {
    font-family: sans-serif;
    color: white;
    font-size: 20px;
    font-style: oblique;
}

.customDopText {
    font-family: sans-serif;
    color: white;
    font-size: 16px;
    font-style: oblique;
}

.navFont {
    font-family: sans-serif;
    color: white;
    font-size: 16px;
}

#title1, #title2, #title3, #title4, #title5, #title6 {
    margin: 0;
}

h4 {
    font-family: sans-serif;
    color: white;
}

p {
    font-family: sans-serif;
    font-size: 14px;
    color: white;
}

.videoFont {
    font-family: sans-serif;
    font-size: 12px;
    color: white;
}

.contactPageFont {
    font-family: sans-serif;
    color: white;
    font-size: 50px;
    font-weight: 600;
    font-style: oblique;
    text-align:center;
}

.contactDetailsPageFont {
    font-family: sans-serif;
    color: white;
    font-size: 30px;
    font-weight: 600;
    font-style: oblique;
    text-align:center;
}

/*------------------------------- NAV ------------------------------------------------------- */

ul {
    list-style-type: none;
    margin: 5px;
    padding: 0;
    overflow: hidden;
  }
  
  li {
    float: right;
  } 
  
  li a {
    display: block;
    color: white;
    font-family: sans-serif;
    text-align: right;
    padding: 8px 12px 0px 12px;
    text-decoration: none;
  }
  
  #currentpage {
    text-decoration: underline;
  }
  li a:hover {
    background-color: hotpink;
  }

/* --------------------------------- Grid Container ---------------------------------------- */
#container {
    width: 100%;
	margin: 0 auto;
    display: grid;
	grid-template-columns: repeat(12, 1fr); 

	grid-template-rows: auto;

	grid-template-areas: 
	  "header header header header header sidebar sidebar sidebar sidebar sidebar sidebar sidebar"
      "content content content content content content content content content content content content "
      "footer footer footer footer footer footer footer footer footer footer footer footer";

  
	gap: 10px; 
  }

  
  /* -------------------------------- Grid Cells ------------------------------------------ */

header {
    position: sticky;
    top: 0;
	min-height: 100px;
    grid-area: header;
    z-index: 5;
    padding-left: 10px;
}

.headerContent {
    line-height: 0%;
}

aside {
    position: sticky;
    top: 0;
	min-height: 100px;
    grid-area: sidebar;
    z-index: 5;
}


/* MAIN */

main {
    margin-top: -120px;
    background-color: black;
    min-height: 1000px;
    width: 100%;
    grid-area: content;
} 

.video_container1, .video_container2, .video_container3, .video_container4, .video_container5, .video_container6 {
    width: 100%;
    min-height: 180px;
    background-color: black;
    object-fit: fill;
}

.content1, .content2, .content3, .content4, .content5, .content6 {
    box-sizing: border-box;
    position: relative;
    background-color: black;
    width: 100%;
    min-height: 180px;
    text-align: center;
    object-fit: cover;
  }

footer {
    background-color: black;
	min-height: 200px;
    grid-area: footer;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: relative;
    z-index: 3;
}

.box1 {
    margin: 10px;
    padding: 10px;
    text-align: center;

}

.box2 {
    margin: 10px;
    padding-top: 10px;
    text-align: center;
}

.box3 {
    margin: 10px;
    padding-top: 5px;
    text-align: center;
}

.box4 {
    margin: 10px;
    padding-top: 10px;
    text-align: center;
}

#commercials-main, #promos-main, #narrative-main {
    margin-top: -10px;
    width: 100%;
    background-color: black;
	min-height: 200px;
    grid-area: content;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    position: relative;
    z-index: 4;
}

#promos-main {
    grid-template-rows: repeat(2, 1fr);
}

#narrative-main {
    margin-top: 20px;
    grid-template-rows: repeat(1, 1fr);
}

.filmbox {
    margin: 0px;
    padding: 0px;
    text-align: center;
}

.icon {
    margin-top: 25px;
    width: 50px;
    height: 50px;
}

.icon:hover {
    width: 60px;
    height: 60px;
}

a[href^="mailto"] {
    color: white;
}

a[href^="mailto"]:hover { color: hotpink; }

.head_title {
    text-decoration: none;
}

/* ------------------------------ Front Video Player --------------------------------*/

.vidSlider {
    width: 100%;
    object-fit: fill;
    }

video {
    position: relative;
    object-fit: cover;
    width: 100%;
  }
  
.vidNavigation { 
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  }
  
.vidNavigation li {
  list-style: none;
  cursor: pointer;
  margin: 0 10px;
  transition: 0.5s;
  font-family: sans-serif;
  color: white;
  font-size: 30px;
  }
  
.vidNavigation li:hover {
  opacity: 1;
  }

/*------------------------ VIDEO PLAYER -------------------------------*/
#player-main {
    margin-top: -130px;
    background-color: black;
    min-height: 180px;
    width: 100%;
    grid-area: content;
} 

.player_container {
    width: 100%;
    min-height: 180px;
    background-color: black;
    object-fit: fill;
}

.player-content {
    box-sizing: border-box;
    position: relative;
    background-color: black;
    width: 100%;
    min-height: 180px;
    text-align: center;
    object-fit: cover;
  }

  .vidId { 
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 12;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    }

    /*------------------------------ MODAL -------------------------------------*/
    
     /* The Modal (background) */
    .modal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    }
    
    /* Modal Content/Box */
    .modal-content {
        background-color: #030303;
        width: 100%; /* Could be more or less, depending on screen size */
        height: 100%;
        text-align: center;
        overflow: scroll;
    }
    
    /* The Close Button */
    .close {
        color: #aaa;
        float: right;
        right: 10px;
        font-size: 50px;
    }
    
    .close:hover,
    .close:focus {
        color: hotpink;
        text-decoration: none;
        cursor: pointer;
    }


      /* ------------------------------- HAMBURGER MENU ------------------------------------*/

      #menu__toggle {
        opacity: 0;
      }
      #menu__toggle:checked + .menu__btn > span {
        transform: rotate(45deg);
      }
      #menu__toggle:checked + .menu__btn > span::before {
        top: 0;
        transform: rotate(0deg);
      }
      #menu__toggle:checked + .menu__btn > span::after {
        top: 0;
        transform: rotate(90deg);
      }
      #menu__toggle:checked ~ .menu__box {
        left: 0 !important;
      }

      .menu__btn {
        display: none;
        position: fixed;
        top: 30px;
        right: 20px;
        width: 50px;
        cursor: pointer;
        z-index: 1;
      }

      .menu__btn > span,
      .menu__btn > span::before,
      .menu__btn > span::after {
        display: block;
        position: absolute;
        width: 100%;
        height: 2px;
        background-color: rgb(201, 199, 199);
        transition-duration: .25s;
      }

      .menu__btn > span::before {
        content: '';
        top: -8px;
      }

      .menu__btn > span::after {
        content: '';
        top: 8px;
      }

      .menu__box {
        display: none;
        position: fixed;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 80px 0;
        list-style: none;
        background-color: #ECEFF1;
        box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
        transition-duration: .25s;
        overflow: scroll;
      }

      .menu__item {
        display: block;
        padding: 12px 24px;
        color: #333;
        font-family: sans-serif;
        font-size: 40px;
        font-weight: 600;
        text-decoration: none;
        transition-duration: .25s;
        text-align: center;
        overflow: scroll;
      }

      .hList {
        display: none;
        float:none;
        margin-top: 30px;
        margin-bottom: 30px;
      } 

      .menu__item:hover {
        background-color: #CFD8DC;
      }
    
/* -------------------- Media Quires ------------------------------ */

/* ------------------ Mindre Desktop ----------------------------- */

@media screen and (min-width: 960px) and (max-width: 1200px) {
    #container {
        grid-template-columns: repeat(12, 1fr);
        grid-template-areas: 
	    "header header header header header sidebar sidebar sidebar sidebar sidebar sidebar sidebar"
        "content content content content content content content content content content content content "
        "footer footer footer footer footer footer footer footer footer footer footer footer";
    }

    .customHeader {
        font-size: 50px;
        font-weight: 600;
    }
    
    .customfsf {
        font-size: 20px;
    }

    .vidNavigation {
        top: 30%;
    }

    .navFont {
        font-size: 14px;
    }

    li a {
        padding: 8px 10px 0px 10px;
      }

}

/* ------------------ Tabletts -----------------------------*/

/* ipad 767px */
@media screen and (min-width: 767px) and (max-width: 960px) {
    #container {
        grid-template-columns: repeat(12, 1fr);
        grid-template-areas: 
        /* 12 columns */
	    "header header header header header header header header header header header header sidebar"
        "content content content content content content content content content content content"
        "footer footer footer footer footer footer footer footer footer footer footer footer";
    }

    main {
        margin-top: -90px;
    } 

    #commercials-main {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(6, 1fr);
    }

    #promos-main {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
    }

    #narrative-main {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }

    footer {
        height: 200px; /* 200px per box*/
        grid-area: footer;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows:repeat(2, 1fr);
    }

    #main-nav {
        display: none;
    }

    .menu__btn {
        display: block;
    }

    .menu__box {
        display: block;
    }

    .hList {
        display: block;
    }

    header {
        min-height: 80px;
    }
    
    aside {
        min-height: 80px;
    }

    .headerContent {
        margin-top: -10px;
    }

    .customHeader {
        font-size: 40px;
        font-weight: 600;
    }
    
    .customfsf {
        font-size: 20px;
    }

    .vidNavigation {
        top: 30%;
    }

    .vidNavigation li {
        font-size: 20px;
    }

    .vidId { 
        top: 78%;
        width: 270px;
        }

    .videoFont {
        font-size: 11px;
    }

    #downArrow {
        display: none;
    }
}

/* ------------------- Mobile Phones ------------------------- */

@media screen and (min-width: 320px) and (max-width: 767px) {
    #container {
        grid-template-columns: repeat(12, 1fr);
        grid-template-areas: 
	    "header header header header header header header header header header header sidebar"
        "content content content content content content content content content content content content" 
        "footer footer footer footer footer footer footer footer footer footer footer footer";
    
    }

    main {
        margin-top: 10px;
    } 

    #commercials-main {
        margin-top: 10px;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(12, 1fr);
    }

    #promos-main {
        margin-top: 10px;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(6, 1fr);
    }

    #narrative-main {
        margin-top: 10px;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(3, 1fr);
    }

    footer {
        height: 600px; /* 200px per box*/
        grid-area: footer;
        display: grid;
        grid-template-columns:repeat(1, 1fr);
        grid-template-rows:repeat(4, 1fr);
    }

    #main-nav {
        display: none;
    }

    .menu__btn {
        display: block;
    }

    .menu__box {
        display: block;
    }

    .hList {
        display: block;
    }

    header {
        min-height: 60px;
    }
    
    aside {
        min-height: 60px;
    }

    .headerContent {
        margin-top: 10px;
    }

    .customHeader {
        font-size: 30px;
        font-weight: 600;
    }
    
    .customfsf {
        font-size: 11px;
    }

    .customDopText {
        font-size: 11px;
    }

    .vidNavigation li {
        font-size: 8px;
    }
    
    .vidNavigation {
    top: 35%;
    }

    #player-main {
        margin-top: 40px;
    } 

    .contactPageFont {
        font-size: 50px;
    }
    
    .contactDetailsPageFont {
        font-size: 20px;
    }

    #downArrow {
        display: none;
    }

    /* #title2 {
        font-size: 8px;
    } */
}

/* ------------------------------------ Smallest Device ------------------------------*/

@media screen and (max-width: 320px) {
    #container {
        grid-template-columns: repeat(12, 1fr);
        grid-template-areas: 
	    "header header header header header header header header header header header sidebar"
        "content content content content content content content content content content content content" 
        "footer footer footer footer footer footer footer footer footer footer footer footer";
    }

    main {
        margin-top: -10px;
    } 
    
    #commercials-main {
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(12, 1fr);
    }

    #promos-main {
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(6, 1fr);
    }

    #narrative-main {
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(3, 1fr);
    }
    
    footer {
        height: 600px; /* 200px per box*/
        grid-area: footer;
        display: grid;
        grid-template-columns:repeat(1, 1fr);
        grid-template-rows:repeat(4, 1fr);
    }

    #main-nav {
        display: none;
    }

    .menu__btn {
        display: block;
    }

    .menu__box {
        display: block;
    }

    .hList {
        display: block;
    }

    header {
        min-height: 60px;
    }
    
    aside {
        min-height: 60px;
    }

    .headerContent {
        margin-top: -5px;
    }

    .customHeader {
        font-size: 20px;
        font-weight: 600;
    }
    
    .customfsf {
        font-size: 10px;
    }

    .customDopText {
        font-size: 10px;
    }

    .vidNavigation li {
        font-size: 6px;
    }

    #player-main {
        margin-top: 40px;
    } 

    .contactPageFont {
        font-size: 30px;
    }
    
    .contactDetailsPageFont {
        font-size: 10px;
    }

    #downArrow {
        display: none;
    }
}



/* ------------------------- FlexBox Main ------------------------------ */


.main {
    display: flex;
}

.flex-items {
    display: flex;
    flex-direction:column;
    flex-wrap: wrap;
    justify-content: center; 
    align-items: center; 
} 

/* ------------------------- FlexBox Aside ------------------------------ */

aside {
    display: flex;
}

.flex-items-aside {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-end;
}

/* ------------------------- FlexBox Header ------------------------------ */

header {
    display: flex;
}
.flex-items-header {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items:center;
}