@font-face {
  font-family: 'NRRFont';
  /* Choose a name for your font */
  src: url('NRRFont'), url('fonts/nrr.ttf') format('truetype');
  /* Update the path to your actual font file */
}

html {
  margin: 0;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'NRRFont', sans-serif;
  /* Use your custom font as a fallback */
  color: #f15643;
  /* Set the font color to #f15643 */
  padding-bottom: 60px;
  /* Adjust the value based on the height of your fixed footer */

}

header {
    background-color: black;
    color: #f15643; /* Change the font color to #f15643 */
    position: fixed;
    width: 100%;
    top: 0;
    /* z-index: 1000; THIS WILL MAKE HEADER ON TOP OF OVERLAY*/
    margin: 0;
}

main {
    margin-top: 0px;
    background-image: url('bm_cover_crop.jpg');
    background-position: left; 
    background-size: 200%;
    color: #fff;
    overflow: hidden;
    background-attachment: fixed; 
    background-repeat: no-repeat;
}

section {
  text-align: left;
  padding: 10px 0 60px 0;
  width: 90vw;
  max-width:900px;
  margin-left:3%;
}

section .display-flex-items {
    display:flex;
    flex-wrap:wrap;
    text-align:center;
}
section .display-flex-items>div {
    margin:0 10px 20px;
    max-width:200px;
}

section .display-flex-videos {
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    text-align:center;
}
section .display-flex-videos>div {
    margin:0 10px 20px;
    max-width:600px;
}

section.auto {
  text-align: left;
  padding: 10px;
  overflow-y: auto;
  height: auto;
  width: 90vw;
}

h1 {
  color: #f15643;
  font-size: 45px;
}

h2 {
    color: #f15643;
    font-size: 45px;
}

h3 {
    color: #f15643;
    font-size:28px;
}

h4 {
    color: #f15643;
    font-size:18px;
}

#overlay {
  position: fixed;
  /* Sit on top of the page content */
  display: none;
  /* Hidden by default */
  width: 100%;
  /* Full width (cover the whole page) */
  height: 100%;
  /* Full height (cover the whole page) */
  overflow-y: scroll;
  /* text-overflow: auto; */
  text-align: center;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  /* Black background with opacity */
  /* z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer;
  /* Add a pointer on hover */

}

#text {
  color: white;
}

.columns {
  column-count: 2;
}

a:link {
  color: #f15643;
}

/* visited link */
a:visited {
  color: #f15643;
}

/* mouse over link */
a:hover {
  color: white;
}

/* selected link */
a:active {
  color: #f15643;
}

a {
  text-decoration: none;
}

.footer {
  background-color: black;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  /* background-color: black; */
  text-align: center;
  color: #f15643;
  /* Change the font color to #f15643 */
}





/* MOBILE STYLES */
@media screen and (max-width:1000px) {
    main {
        background-position: 10% 50%;
        background-size: cover;
    }
}
@media screen and (max-width:800px) {
    
    header nav.nav-desktop {display:none;}
    
    nav ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    nav a {
      display: block;
      color: #f15643;
      /* Change the font color to #f15643 */
      text-align: center;
      padding: 12px 14px;
      text-decoration: none;
      background-color: black;
    }
    
    nav a:hover {
      background-color: #f15643;
      color: black;
    }


    
    /* MOBILE TIME */
    #menuToggle {
      display: block;
      position: relative;
      top: 20px;
      right: 20px;
      -webkit-user-select: none;
      user-select: none;
      position:absolute;
    }
    
    #menuToggle a {
      text-decoration: none;
      color: #f15643;
      transition: color 0.3s ease;
    }
    
    #menuToggle a:hover {
      color: tomato;
    }
    
    
    #menuToggle input {
      display: block;
      width: 40px;
      height: 32px;
      position: absolute;
      top: -7px;
      left: -5px;
      cursor: pointer;
      opacity: 0;
      /* hide this */
      z-index: 2;
      /* and place it over the hamburger */
      -webkit-touch-callout: none;
    }
    
    /*
     * Just a quick hamburger
     */
    #menuToggle span {
      display: block;
      width: 33px;
      height: 4px;
      margin-bottom: 5px;
      position: relative;
    
      background: #f15643;
      border-radius: 3px;
    
      z-index: 1;
    
      transform-origin: 4px 0px;
    
      transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
        background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
        opacity 0.55s ease;
    }
    
    #menuToggle span:first-child {
      transform-origin: 0% 0%;
    }
    
    #menuToggle span:nth-last-child(2) {
      transform-origin: 0% 100%;
    }
    
    /* 
     * Transform all the slices of hamburger
     * into a crossmark.
     */
    #menuToggle input:checked~span {
      opacity: 1;
      transform: rotate(45deg) translate(-2px, -1px);
      background: #f15643;
    }
    
    /*
     * But let's hide the middle one.
     */
    #menuToggle input:checked~span:nth-last-child(3) {
      opacity: 0;
      transform: rotate(0deg) scale(0.2, 0.2);
    }
    
    /*
     * Ohyeah and the last one should go the other direction
     */
    #menuToggle input:checked~span:nth-last-child(2) {
      transform: rotate(-45deg) translate(0, -1px);
    }
    
    /*
     * Make this absolute positioned
     * at the top left of the screen
     */
    #menu {
      position: absolute;
      width: 300px;
      margin: -100px 0 0 60px;
      padding: 50px;
      padding-top: 75px;
    
      background: black;
      list-style-type: none;
      -webkit-font-smoothing: antialiased;
      /* to stop flickering of text in safari */
      transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
      transform: none;
    }
    
    #menu li {
      padding: 10px 0;
      font-size: 40px;
      color: #f15643;
      transform: none;
    }
    
    /* And let's slide it in from the left */
    #menuToggle input:checked~ul {
      transform-origin: 0% 0%;
      transform: translate(-100%, 0);
    }
    
    h2 {font-size: 40px;}, h3 {font-size: 28px;}
    
    section>div>iframe {width:100%;}
}


/* DESKTOP STYLES */
@media screen and (min-width:800px) {
    
    #menuToggle,
    .footer>nav {display:none;}
    
    header {
        background-color: black;
        color: #f15643; /* Change the font color to #f15643 */
        position: fixed;
        width: 100%;
        top: 0;
        /* z-index: 1000; THIS WILL MAKE HEADER ON TOP OF OVERLAY*/
        margin: 0;
    }
    
    nav ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    
    nav li {
        float: right;
    }
    
    nav a {
        display: block;
        color: #f15643; /* Change the font color to #f15643 */
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }
    
    nav a:hover {
        background-color: #f15643;
        color: black;
    }
    #Video {max-width:unset;}
}