/*

Styling retrieved by Steve Beeston on 18th August 2015 from
http://responsivenavigation.net/examples/multi-toggle/index.html
by Erick Arbe

This style sheet is based on DESKTOP FIRST, as opposed to MOBILE FIRST

Modified by Steve Beeston 5/4/17 to use Font Awesome for hamburger and to add the word MENU, plus centering of mobile menu

*/

div#nav-container {
   text-align: left;
   /* padding-left: 30px; SRB 1/8/17
   padding-right: 30px; */
   /* border-bottom: solid 1px #333; */
}

#navigation {  
   position: relatve;
   height; 41px;
}

#navigation.stickytop {
   position: fixed;
   top: 0;
   height: 41px;
   z-index: 99;
}



.menu-link {
   display: none;
}

.menu { 
   /* float: left; 
   margin-left: 33.6%;*/
   -webkit-transition: all 0.3s ease;  
   -moz-transition: all 0.3s ease;
   -ms-transition: all 0.3s ease;
   transition: all 0.3s ease; 
   text-align: right;
}

.menu ul { 
   width: 100%;
   padding: 0px;
   margin: 0px;
   list-style: none;
   position: relative;
   display: inline-block;
   z-index: 9;
}

.menu > li > ul.sub-menu {
	min-width: 10em;
	/* padding: 4px 0; SRB 1/5/22 */
	background-color: #1C4579;
	/* border: 1px solid #CCC; SRB 1/5/22 */
   z-index: 2;
   width: auto; /* Jubilee SRB 1/5/22 */
}

.menu ul li {
   padding: 0px;
   margin: 0;
}

.menu > ul > li {
   display: inline-block; 
   /* width: 15%; /* 24.6 */ --- SRB 5/1/19 */
   text-align: center;
}

.menu ul li a {
   display: block; 
   text-decoration: none; 
   font-weight: 600; /* SRB 19/1/22 */
}

.menu ul li > a {
   padding: 5px 11px;
   padding: 5px 8px; /* ... after adding FAQs SRB 16/5/22 */
   text-decoration: none;
   border-bottom-width: 0;
   line-height: 30px; /* 31px */
   color: white;
}

.menu ul li > a:hover {
   color: #D32121;
   /* background: #ddd; SRB 8/2/22 */
   transition: ease 300ms;
}

.menu ul ul { 
   display: none; 
   position: absolute; 
   top:100%;
   min-width: 160px;
   background-color: #f4f4f4;
   /* border: 1px solid #CCC; SRB 1/5/22 */
}

.menu ul li:hover > ul { 
   display: block; 
}

.menu ul ul > li {
   position: relative; 
   margin: 0;
}

.menu ul ul > li a {
   padding: 5px 15px 5px 10px; 
   height: auto; 
   background-color: #28568f;
}

.menu ul ul > li a:hover {
   background-color: #42BBA3; 
   background-color: #1C4579; /* Jubilee SRB 1/5/22 */
   color: #D32121;
}

.menu ul ul ul { 
   position: absolute; 
   left: 100%; 
   top:0;
}

/*
ul.sub-menu li {
   width: fit-content;
}
*/

ul.sub-menu li a {
   text-align: left;
}

/* =================================*/
   @media all and (max-width: 817px) {
/* =================================*/
}


/* =================================*/
   /* @media all and (max-width: 599px) { */
   /* @media all and (max-width: 456px) { */
   @media all and (max-width: 1010px) {
/* =================================*/


   #nav-container {
      text-align: center;
      padding-left: 0px;
      width: 100%;
   }

   /* SRB 12/2/22 */
   header .large-10,
   header .medium-12 {
      width: 100%;
      text-align: center;
   }


   div#nav-container {
      padding-left: 0px;
      padding-right: 0px;
   }

   a.menu-link {
      display: block; 
      color: #333; 
      text-decoration: none; 
      padding: 7px 10px;
   }

   .menu { clear: both; min-width: inherit; float: none;}

   .menu, .menu > ul ul {
      display: block;
      overflow: hidden; 
      max-height: 0; 
      width: 100%;
   }

   .menu > li > ul.sub-menu {
      padding: 0px; 
      border: none;
      width: 100%;
   }

   .menu.active, .menu > ul ul.active {
      float: left;
      max-height: 55em; 
   }

   .menu ul {
      display: inline;
   }

   .menu > ul {
      border-top: 1px solid #808080;
   }

   .menu li, .menu > ul > li {
      width: 100%;
      display: block; 
      border-bottom: 1px solid #ddd;
      text-align: center;  /* SRB 11/1/22 */
   }

   .menu li a {
      color: #000; 
      display: block; 
      padding: 0.8em; 
      border-bottom: 1px solid #808080; 
      position: relative;
      line-height: 40px !important;
   }

   .menu li.has-submenu > a:after {
      content: '+';
      position: absolute;
      top: 0;
      right: 0;
      display: block;
      font-size: 1.5em;
      padding: 0.55em 0.5em;
   }

   .menu li.has-submenu > a.active:after {
      content: "-";
   }

/* SRB 1/5/22
  .menu ul ul > li a {
      height:58px; 
      padding: 19px 18px 19px 30px;
   }
*/

  .menu ul ul, .menu ul ul ul {
      display: inherit; 
      position: relative; 
      left: auto; 
      top: auto; 
      border: none; 
   }

   ul.sub-menu li a {
      text-align: center;
   }


}


/*
   =========
   HAMBURGER
   =========
*/



a.menu-link {
   color: #EEE;
	padding-right: 10px;
	margin-top: -0.15em;
	line-height: 40px;
	font-size: 18px;
	font-weight: 200;
	vertical-align: middle;
	z-index: 99;
   border-bottom: none;
   text-align: center;
   width: 100%;
}

.menu-link .fa {
   font-size: 20px;
   color: #EEE;
}