/*
   ==============
   TOP NAVIGATION
   Source: www.w3schools.com/howto/howto_js_topnav_responsive.asp
   ==============
*/

/* Add a black background color to the top navigation */
.menu {
   overflow: hidden;
   float:right
}

/* Style the links inside the navigation bar */
.nav-container a {
   float: left;
   display: block;
   color: #444;
   text-align: center;
   padding: 10px 16px;
   text-decoration: none;
   font-family: Raleway;
   font-weight: 500;
}

/* Change the color of links on hover */
.menu a:hover {
   color: black;
   padding-bottom: 7px;
}

.menu a:hover {
   border-bottom: 3px solid #709d3c;
}

/* Hide the link that should open and close the topnav on small screens */
.menu-link {
   display: none;
   text-decoration: none;
}

.nav-container a {
   padding: 10px 10px;
}







/*
   =================================
   R E S P O N S I V E   L A Y O U T
   =================================
*/

/* dropped SRB 2024

/* @media only screen and (max-width: 639px) { --- SRB 16/1/21 
@media only screen and (max-width: 790px) {
   #kiln-menu a {
      font-size: 1.6rem;
      width: 100%;
   }
}
*/


@media all and (max-width: 639px) {

   /* .menu a:not(:first-child) {display: none;} ----- SRB 25/11/20 
   .menu a {display: none;} */
   
   .menu {
      width: 100%;
      max-height: 0;
      padding: 0;
      -webkit-transition: all 0.3s ease;  
      -moz-transition: all 0.3s ease;
      -ms-transition: all 0.3s ease;
      transition: all 0.3s ease; 
   }

   .menu-link {
      display: block; 
      float: right;
      padding: 7px 10px;
      font-size: 1.7rem;
      line-height: 4rem;
   }

   .nav-container nav.active {
      float: left;
      max-height: 55em; 
   }

   .menu a {
      float: none;
      display: block;
      text-align: left;
      width: 100%;
   }

   .menu a:hover {
      background-color: #e1dbce;
      border-bottom: 3px solid #f5f0e6;
   }

   #nav-container {
      text-align: center;
      padding-left: 0px;
      transition: 0.5s;
   }


}