/* Nav Bar */
  #spud-nav {
    background-color: #FFF;
    height: 210px;
  }

  /* Centred Logo */
  .navbar-brand
  {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 10px;
  }
  
  /* The Overlay (background) */
.overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */    
    height: 0%;
    width: 100%;
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    background-color: rgb(59,130,157); /* fallback for older browsers */
    background-color: rgb(59,130,157, 0.95);
    overflow-y: hidden; /* Disable vertical scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
  }
  
  /* Position the content inside the overlay */
  .overlay-content {
    position: relative;
    top: 15%; /* 25% from the top */
    width: 100%; /* 100% width */
    text-align: center; /* Centered text/links */
    margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
    z-index: 3;
  }
  
  .navbar {
    background-color: #f4f4f4;
      text-align: center;
      padding: 0.5rem 0 5rem;
      font-size: 1.25rem;
  }
  
  .overlay ul {
      list-style: none;
      margin: 0;
      padding: 0;
  }
  
  .overlay li {
      display: block;
  }
  
  
  /* The navigation links inside the overlay */
  .overlay a {
    display: inline-block;
    transition: 0.3s;
    font-size: 1.25rem;
    position: relative;
    padding: 0.125rem 0 0.125rem;
    margin: 0.75rem 1.5rem;
    color: white !important;
    text-decoration: none;
    text-transform: uppercase;
    background: linear-gradient(to bottom, orange 0%, orange 100%);
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: 3px 3px;
  }
  
  .overlay a:hover {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23ff9800' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
    background-position: 0 100%;
    background-size: auto 6px;
    background-repeat: repeat-x;
    text-decoration: none;
  }
  
  /* Position the close button (top right corner) */
  .overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 60px;
    background: none;
  }
  
  .overlay a.closebtn:hover, .overlay .closebtn:focus {
    background: none
  }
  
  /* Hamburger position */
  .hamburger {
    font-size:30px;
    cursor:pointer;
    position: absolute;
    right: 30px;
    top: 20px;
    color: #3b829d;
    z-index: 2;
  }
  
  
  /* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
  @media screen and (max-height: 600px) {
    li.navitem-home {
      display: none;
    }
    .overlay a {
      font-size: 1rem;
      padding: 0.125rem 0 0.125rem;
      margin: 0.75rem 1.5rem;
    }
    .overlay .closebtn {
      font-size: 40px;
      top: 8px;
      right: 40px;
    }
  }
  
  @media screen and (max-height: 450px) {
    li.navitem-home {
      display: none;
    }
    .overlay a {
      font-size: 1rem;
      padding: 0rem 0 0rem;
      margin: 0 1.5rem;
    }
    .overlay .closebtn {
      font-size: 40px;
      top: 8px;
      right: 40px;
    }
  }