#container {
   margin: 0 auto;
   max-width: 890px;
}

.headerlogo {
   padding: 0 !important;
}

.headerlogo img {
   max-height: 48px;
}

.toggle,
[id^=drop] {
   display: none;
}

/* Giving a background-color to the nav container. */

nav { 
   background-color: #0b233c;
   margin:0;
   padding: 0;
   position: fixed;
   width: 100%;
   z-index: 99;
}

#logo {
   display: block;
   float: left;
   font-size: 20px;
   max-height: 48px;
   padding: 0 30px;
}

/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */

nav:after {
   clear:both;
   content:"";
   display:table;
}

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */
nav ul {
   float: right;
   list-style: none;
   margin:0;
   padding:0;
   position: relative;
   }
   
/* Positioning the navigation items inline */
nav ul li {
   display:inline-block;
   float: left;
   margin: 0px;
   }

/* Styling the top level links */

.mega-top-lvl a {
   color: #FFFFFF;
   display:block;
   font-size:17px;
   padding:14px 20px;   
   text-decoration:none;
   transition: .25s ease;
}
.mega-top-lvl a:hover { 
   background: rgba(30, 119, 168, .5);
   color: white !important;
   text-decoration: none !important;
}
/* Registration popup button in the menu bar */

.header-reg-cell {
   padding: 0;
}
.header-reg-button {
   background-color: #f38044;
   color: #FFFFFF;
   display:block;
   font-size:17px;
   padding:14px 20px;   
   text-decoration:none;
   transition: .25s ease;
}
.header-reg-button:hover { 
   background: #d6630a !important;
   color: white !important;
   text-decoration: none !important;
}

.header-reg-cell-sq {
   padding: 5px;
}
.header-reg-cell-sq .header-reg-button {
   background-color: #f38044;
   border-radius: 5px;
   color: #FFFFFF;
   display:block;
   font-size:17px;
   padding:9px 15px;   
   text-decoration:none;
   transition: .25s ease;
}
.header-reg-cell-sq .header-reg-button:hover { 
   background: #d6630a !important;
   color: white !important;
   text-decoration: none !important;
}

/* Styling the dropdown "megamenu" toppers and links */

.feature-dropdown {
   padding: 15px 0;
}

.topper {
   color: #FFF;
   display: block;
   font-size: 14px;
   font-weight: 600;
   padding: 5px 20px;   
   text-decoration: none;
   transition: .25s ease;
}

.mega-a {
   color: #FFF;
   display: block;
   font-size: 14px;
   font-weight: 400;
   padding: 5px 20px 5px 35px;   
   text-decoration: none !important;
   transition: .25s ease;
}
.mega-a:hover {
   color: #FFF;
   font-size: 14px;
   text-decoration: none !important;
}

.mega-aline {
   padding: 15px 20px;
}
.nohover {
   background: none !important;
}

nav ul li ul li:hover { 
   background: rgba(30, 119, 168, .5); 
}

/* Hide Dropdowns by Default
 * and giving it a position of absolute */
nav ul ul {
   background-color: #0b233c;
   display: none;
   position: absolute; 
   /* has to be the same number as the "line-height" of "nav a" */
   top: 50px;
}
   
/* -------------------- Display Dropdowns on Hover -------------------- */

nav ul li:hover > ul {
   display:inherit;
}
   
/* -------------------- First Tier Dropdown -------------------- */

nav ul ul li {
   float:none;
   display:list-item;
   position: relative;
   /* width:170px; */
}

/* Second, Third and more Tiers   
 * We move the 2nd and 3rd etc tier dropdowns to the left
 * by the amount of the width of the first tier.
*/
nav ul ul ul li {
   position: relative;
   top:-60px;
   /* has to be the same number as the "width" of "nav ul ul li" */ 
   left:170px; 
}

   
/* Change ' +' in order to change the Dropdown symbol */
/* li > a:after { content:  ' +'; } */
/* li > a:only-child:after { content: ''; } */


/* Media Queries
--------------------------------------------- */

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

   #logo {
      display: block;
      float: left;
      padding: 0;
      text-align: center;
      /* width: 100%; */
   }
   nav {
       background-color: #0b233c;
       margin: 0;
       padding: 0;
       position: sticky;
   }
   nav ul {
      text-align: left;
      width: 100%;
   }

   /* Hide the navigation menu by default */
   /* Also hide the  */

   .toggle + a,
   .menu {
      display: none;
   }

   /* Styling the toggle lable */

   .toggle {
      background-color: #0b223c;
      border:none;
      color:#FFF;
      display: block;
      font-size:17px;
      padding:14px 20px;   
      text-decoration:none;
   }
   .toggle:hover {
      background-color: #0b223c;
   }
   label {
      margin: 0;
   }
   .right {
      text-align: right;
   }

   /* Display Dropdown when clicked on Parent Lable */

   [id^=drop]:checked + ul {
      display: block;
   }

   /* Change menu item's width to 100% */

   nav ul li {
      display: block;
      width: 100%;
      }

   nav ul ul .toggle,
   nav ul ul a {
      padding: 0 40px;
   }
   nav ul ul ul a {
      padding: 0 80px;
   }
   nav a:hover,
    nav ul ul ul a {
      background-color: #000000;
   }
   nav ul li ul li .toggle,
   nav ul ul a,
   nav ul ul ul a{
      padding:14px 20px;   
      color:#FFF;
      font-size:17px; 
   }
   nav ul li ul li .toggle,
   nav ul ul a {
      background-color: #0b223c; 
   }

   /* Hide Dropdowns by Default */

   nav ul ul {
      float: none;
      position:static;
      color: #ffffff;
      /* has to be the same number as the "line-height" of "nav a" */
   }
      
   /* Hide menus on hover */

   nav ul ul li:hover > ul,
   nav ul li:hover > ul {
      display: none;
   }
      
   /* First Tier Dropdown */

   nav ul ul li {
      display: block;
      width: 100%;
   }
   nav ul ul ul li {
      position: static;
      /* has to be the same number as the "width" of "nav ul ul li" */ 
   }

}

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

   nav ul li {
      display:block;
      width: 94%;
   }

}