/* --------------- navigation ---------------- */
/* === Main menu settings === */
.navigation-wrap { /* navigation menu container to edge of screen */
  background:#fff; /* background of whole navigation bar to the edge of the screen. Can be made same colour as #header, .navigation or none depending on effect */
}
.navigation { /* navigation menu container to edge of dislay area */
}
#menu-icon,
#search-icon,
#search-icon-nav { /* 'Menu' tab on mobile/tablet */
}
#menubox,
#searchbox { /* navigation menu and search field containers */
}
.fixed-header #menubox,
.fixed-header #searchbox { /* navigation menu and search field containers when header is fixed */
}
.js #menubox,
.js #searchbox { /* if there is javascript. hide the navigation menu and the search field */
}


/* === Top level menu items === */
nav.main-menu ul.menu { /* navigation menu UL */
  background:  #006898;  /* background of whole navigation bar */
}
nav.main-menu ul.menu li { /* navigation menu tab container */
  margin:0; /* make -1px to prevent doubling of borders between tabs. Should be the negative of the border width*/
}
nav.main-menu ul.menu li a,
#menu-icon,
#search-icon,
#search-icon-nav { /* navigation menu, 'Menu' and 'Search' tabs */
  background:#f7f7f7; /* background for top level tab - usually the same as the navigation background */
  border-color:#fefefe #cccccc #cccccc #fefefe; /* border colour on each navigation tab */
  color:#525252;  /* top level tab font color*/
  font-size:13px; /* font-size for top menu*/
  font-size:1.3rem; /* font-size for top menu*/
  padding:5px 3%; /* padding of each tab in mobile /tablet version */
  padding:0.5rem 3%; 
  font-weight:bold;
  text-transform: uppercase;
}
#menu-icon,
#search-icon,
#search-icon-nav { /* 'Menu' tab on mobile/tablet */
  background:url(../images/menu-icon-white.png) no-repeat center center   #006898; /* background of button - same as navigation with Menu icon on top */
  border:none; /* border colour on Menu and Search tab */
  height:30px; /* same as the height of .logo-wrap img **header-height** (minus 2rem for padding top & bottom) */
  height:3rem; /* same as the height of .logo-wrap img **header-height** (minus 2rem for padding top & bottom) */
  width:30px;
  width:3rem;
  padding: 0;
}
#search-icon,
#search-icon-nav { /* 'Search' tab on mobile/tablet */
  background:url(../images/search-icon-white.png) no-repeat center center   #006898; /* background of button - same as navigation with Search icon on top */
}
nav.main-menu ul.menu li.first a { /* use to add/remove border on first navigation tab */
}
nav.main-menu ul.menu li.last a { /* use to add/remove border on last navigation tab */
}

/* Top level menu items - hover styles */
#menu-icon:hover,
#search-icon:hover,
#search-icon-nav:hover { /* navigation menu tabs on hover */
  background-color:  #003044;  /* background for top level tab on hover */
  color:  #fff; /* top level tab font color on hover */
  border:none;
}
nav.main-menu ul.menu li a:hover,
nav.main-menu ul.menu li a.active,
nav.main-menu ul.menu li a.active:hover {
  background:#dfdfdf;  /* background for top level tab on hover */
  color:#525252; /* top level tab font color on hover */
}


/* === Drop down first level === */
/*Child Trigger */
.js nav.main-menu ul.menu li.expanded .child-trigger {
  padding:5px 20px;
  padding:0.5rem 2rem;
  border-left:1px solid #ccc;
}
.js nav.main-menu ul.menu li.expanded .child-trigger:hover {
  background:#dfdfdf;
}

/* Normal drop down styling */
nav.main-menu ul.menu li.expanded ul { /* Drop down navigation menu UL */ 
}
nav.main-menu ul.menu li.expanded ul li,
nav.main-menu ul.menu li.expanded ul li.expanded ul li { /* Drop down navigation tab container */ 
  margin-top:0; /* prevents doubling of top and bottom border - should be a negative of the border width */
}
nav.main-menu ul.menu li.expanded ul li a,
nav.main-menu ul.menu li.expanded ul li.expanded ul li a { /* Drop down navigation tab */ 
  background:#f7f7f7 !important;  /* background of first level drop down menu in mobile/tablet menu */
  color:#525252 !important;  /* text colour on first level drop down menu in mobile/tablet menu */
  font-weight:normal;
  font-size:12px;
  font-size:1.2rem;
}
nav.main-menu ul.menu li.expanded ul li.active a,
nav.main-menu ul.menu li.expanded ul li.expanded ul li.active a { /* Drop down navigation active tab */ 
  background:#dfdfdf !important;  /* background of active first level drop down menu */
  color:#525252 !important; /* text colour on first level active drop down menu */
}

/* drop down first level - hover styles */
nav.main-menu ul.menu li.expanded ul li a:hover { /* Drop down navigation tab on hover */ 
  background:#dfdfdf !important;  /* background for first level drop down menu on hover */
  color:#525252 !important; /* font colour on first level drop down menu on hover */
}
nav.main-menu ul.menu li.expanded ul li.active a:hover { /* Drop down navigation active tab on hover*/ 
  background:#dfdfdf !important;  /* background for first level drop down menu on active tab when hovering*/
  color:#525252 !important; /* font colour on first level drop down menu on hover on active tab */
}
nav.main-menu ul.menu li:hover ul { /* first level drop down menu on hover */
}
nav.main-menu ul.menu li.expanded ul li ul { /* second level drop down menu*/ 
}




/* --------------- Responsive Adjustments ---------------- */
/* Note, the CSS outside these Media Queries is used for all devices incl. mobiles */

@media only screen and (min-width: 320px) {
  /* Mobile & Small screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)and (min-width: 320px),
only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 320px),
only screen and (-o-min-device-pixel-ratio: 2/1) and (min-width: 320px),
only screen and (min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and (min-resolution: 192dpi) and (min-width: 320px),
only screen and (min-resolution: 2dppx) and (min-width: 320px) { 
  /* Mobile & Small screen, retina, stuff to override above media query */


}

@media only screen and (min-width: 700px) {
  /* Tablet & Medium screen, non-retina */


  /* --------------- navigation ---------------- */
  /* === Main menu settings === */
  #navigation-wrap { /* navigation menu container to edge of screen */
    padding:10px 0;
    padding:1rem 0;
  }
  .fixed-header #navigation-wrap { /* navigation menu container to edge of screen when scrolling */
    padding:0;
  }
  .navigation { /* navigation menu container to edge of dislay area */
  }
  #menu-icon,
  #search-icon,
  #search-icon-nav { /* 'Search' tab on mobile/tablet */
  }
  .js #menu-icon,
  .js #search-icon,
  .js #search-icon-nav { /* If there is javascript, show 'Menu' and 'Search' tabs on mobile/tablet */
  }
  #menubox,
  #searchbox { /* navigation menu and search field containers */
  }
  #menubox { /* navigation menu field containers */
  }
  .fixed-header #menubox,
  .fixed-header #searchbox { /* navigation menu and search field containers when header is fixed */
  }
  .fixed-header #menubox { /* navigation menu containers when header is fixed */
  }
  .js #menubox,
  .js #searchbox { /* if there is javascript. hide the navigation menu and the search field */
  }
  
  
  /* === Top level menu items === */
  nav.main-menu ul.menu { /* navigation menu UL */
  }
  nav.main-menu ul.menu, 
  nav.main-menu ul.menu ul,
  nav.main-menu ul.menu li {
  }
  nav.main-menu ul.menu li { /* navigation menu tab container */
  }
  nav.main-menu ul.menu li a,
  #menu-icon,
  #search-icon { /* navigation menu, 'Menu' and 'Search' tabs */
  }
  nav.main-menu ul.menu li a {/* navigation menu tabs */
  }
  nav.main-menu ul.menu li.first a { /* use to add/remove border on first navigation tab */
  }
  nav.main-menu ul.menu li.last a { /* use to add/remove border on last navigation tab */
  }
  
  /* Top level menu items - hover styles */
  nav.main-menu ul.menu li.active a:hover,  /* This line and the next is needed to prevent hover errors on active tabs in Nice Menu Superfish Javascript */
  nav.main-menu ul.menu li.active:hover a, 
  nav.main-menu ul.menu li a:hover, 
  nav.main-menu ul.menu li:hover a,
  #menu-icon:hover,
  #search-icon:hover { /* navigation menu tabs on hover */
  }
  nav.main-menu ul.menu li a.active:hover, 
  nav.main-menu ul.menu li.active a:hover, 
  nav.main-menu ul.menu li.active:hover a { /* navigation menu active tabs on hover*/ 
  }
  nav.main-menu ul.menu li a.active,
  nav.main-menu ul.menu li.active a { /* navigation menu active tabs */
  }
  
  /* === Drop down first level === */
  nav.main-menu ul.menu li.expanded ul { /* Drop down navigation menu UL */ 
  }
  nav.main-menu ul.menu li.expanded ul li,
  nav.main-menu ul.menu li.expanded ul li.expanded ul li { /* Drop down navigation tab container */ 
  }
  nav.main-menu ul.menu li.expanded ul li a,
  nav.main-menu ul.menu li.expanded ul li.expanded ul li a { /* Drop down navigation tab */ 
  }
  nav.main-menu ul.menu li.expanded ul li.active a,
  nav.main-menu ul.menu li.expanded ul li.expanded ul li.active a { /* Drop down navigation active tab */ 
  }
  
  /* drop down first level - hover styles */
  nav.main-menu ul.menu li.expanded ul li a:hover { /* Drop down navigation tab on hover */ 
  }
  nav.main-menu ul.menu li.expanded ul li.active a:hover { /* Drop down navigation active tab on hover*/ 
  }
  nav.main-menu ul.menu li ul { /* first level drop down menu */
  }
  nav.main-menu ul.menu li:hover ul { /* first level drop down menu on hover */
  }
  nav.main-menu ul.menu li.expanded ul li ul { /* second level drop down menu*/ 
  }


}

@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 700px),
only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 700px),
only screen and (-o-min-device-pixel-ratio: 2/1) and (min-width: 700px),
only screen and (min-device-pixel-ratio: 2) and (min-width: 700px),
only screen and (min-resolution: 192dpi) and (min-width: 700px),
only screen and (min-resolution: 2dppx) and (min-width: 700px) { 
  /* Tablet & Medium screen, retina, stuff to override above media query */

}

@media only screen and (min-width: 1024px) { 
  /* Desktop & Large screen, non-retina */


  /* --------------- navigation ---------------- */
  /* === Main menu settings === */
  
  /* === Top level menu items === */
  #menu-icon,
  #search-icon,
  #search-icon-nav { /* 'Menu' tab on mobile/tablet */
    height:45px; /* same as the height of .logo-wrap img **header-height** (minus 2rem for padding top & bottom) */
    height:4.5rem; /* same as the height of .logo-wrap img **header-height** (minus 2rem for padding top & bottom) */
    width:45px;
    width:4.5rem;
  }
  .fixed-header #menu-icon,
  .fixed-header #search-icon,
  .fixed-header #search-icon-nav { /* 'Menu' tab on mobile/tablet */
    height:30px; /* same as the height of .logo-wrap img **header-height** (minus 2rem for padding top & bottom) */
    height:3rem; /* same as the height of .logo-wrap img **header-height** (minus 2rem for padding top & bottom) */
    width:30px;
    width:3rem;
  }
  
  /* Top level menu items - hover styles */
  
  /* === Drop down first level === */
  
  /* drop down first level - hover styles */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1024px),
only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 1024px),
only screen and (-o-min-device-pixel-ratio: 2/1) and (min-width: 1024px),
only screen and (min-device-pixel-ratio: 2) and (min-width: 1024px),
only screen and (min-resolution: 192dpi) and (min-width: 1024px),
only screen and (min-resolution: 2dppx) and (min-width: 1024px) { 
  /* Desktop & Large screen, retina, stuff to override above media query */


}

@media only screen and (min-width: 1280px) { 
  /* Desktop & Extra Large screen, non-retina */


  /* --------------- navigation ---------------- */
  /* === Main menu settings === */
  .navigation-wrap { /* navigation menu container to edge of screen */
    background:  #006898; /* background of whole navigation bar to the edge of the screen. Can be made same colour as #header, .navigation or none depending on effect */
  }
  .fixed-header #navigation-wrap { /* navigation menu container to edge of screen when scrolling */
  }
  .navigation { /* navigation menu container to edge of dislay area */
  }
  #menu-icon, 
  #search-icon { /* 'Menu' and 'Search' tab on desktop */
  }
  .js #menu-icon,
  .js #search-icon { /* Hide 'Menu' and 'Search' tabs on desktop */
  }
  #search-icon-nav {
  }
  .block-nice-menus {
  }
  .fixed-header .block-nice-menus,
  .fixed-header #search-icon-nav {
  }
  .fixed-header #search-icon-nav {
    width:30px;
    width:3rem;
  }
  #menubox,
  #searchbox { /* navigation menu and search field containers */
  }
  #menubox {
    padding:0; 
  }
  #searchbox {
    width:250px;
  }
  .js #menubox,
  .js #searchbox { /* if there is javascript. hide the navigation menu and the search field */
  }
  .fixed-header #menubox {
  }
  .fixed-header #searchbox {
  }
  .drop-menu-search #searchbox {
  }
  
  
  /* === Top level menu items === */
  nav.main-menu ul.menu { /* navigation menu UL */
  }
  .fixed-header nav.main-menu ul.menu {
  }
  nav.main-menu ul.menu, 
  nav.main-menu ul.menu ul,
  nav.main-menu ul.menu li {
  }
  nav.main-menu ul.menu li { /* navigation menu tab container */
  }
  nav.main-menu ul.menu li a,
  #menu-icon,
  #search-icon { /* navigation menu, 'Menu' and 'Search' tabs */
    background:  #006898; /* background for top level tab - usually the same as the navigation background */
    color:  #fff;  /* top level tab font color*/
  }
  nav.main-menu ul.menu li a {/* navigation menu tabs */
    padding:0 11px !important; /* text padding left and right of each tab */
    padding:0 1.1rem !important; /* text padding left and right of each tab */
    border-color:#3B809B #003f5b #003f5b #3B809B; /* border colour on each tab */
    border-top: none;
    border-bottom: none;
    line-height:35px; /* center the text vertically - should be the same height as 'height' in 'nav.main-menu ul.menu' */
    line-height:3.5rem; /* center the text vertically - should be the same height as 'height' in 'nav.main-menu ul.menu' */
  }
  .fixed-header nav.main-menu ul.menu li a {
    line-height:3.5px; /* center the text vertically - should be the same height as 'height' in 'nav.main-menu ul.menu' */
    line-height:3.5rem; /* center the text vertically - should be the same height as 'height' in 'nav.main-menu ul.menu' */
  }
  nav.main-menu ul.menu { /* use to add/remove border on first navigation tab */
    border-left: 1px solid #003f5B;
    border-right: 1px solid #3b809b;
  }
  
  /* Top level menu items - hover styles */
  nav.main-menu ul.menu li.active a:hover,  /* This line and the next is needed to prevent hover errors on active tabs in Nice Menu Superfish Javascript */
  nav.main-menu ul.menu li.active:hover a, 
  nav.main-menu ul.menu li a:hover, 
  nav.main-menu ul.menu li:hover a,
  #menu-icon:hover,
  #search-icon:hover {/* navigation menu tabs on hover */
    background:  #003f5b;  /* background for top level tab on hover */
    color:  #fff; /* top level tab font color on hover */
    border-color:#3b809b #003f5b #003f5b #3b809b; /* border colour on each tab */
  }
  nav.main-menu ul.menu li a.active:hover, 
  nav.main-menu ul.menu li.active a:hover, 
  nav.main-menu ul.menu li.active:hover a { /* navigation menu active tabs on hover */
    background:  #FFC700;  /* background for top level active tab on hover */
    color:#006898; /* top level active tab font color on hover */
    border-color:#ffde56 #ee9500 #ee9500 #ffde56; /* border colour on each tab */
  }
  nav.main-menu ul.menu li a.active,
  nav.main-menu ul.menu li.active a { /* navigation menu active tabs */
    background:  #FFC700;  /* background for top level active tab on hover */
    color:#006898; /* top level active tab font color on hover */
    border-color:#ffde56 #ee9500 #ee9500 #ffde56; /* border colour on each tab */
  }
  
  /* === Drop down first level === */
  nav.main-menu ul.menu li.expanded ul { /* Drop down navigation menu UL */ 
    top:35px; /*position of first level drop down menu - height of top level menu plus height of border*/
    top:3.5rem; /*position of first level drop down menu - height of top level menu plus height of border*/
  }
  .fixed-header nav.main-menu ul.menu li.expanded ul {
    top:35px; /*position of first level drop down menu - height of top level menu plus height of border*/
    top:3.5rem; /*position of first level drop down menu - height of top level menu plus height of border*/
  }
  nav.main-menu ul.menu li.expanded ul li,
  nav.main-menu ul.menu li.expanded ul li.expanded ul li { /* Drop down navigation tab container */ 
  }
  nav.main-menu ul.menu li.expanded ul li a,
  nav.main-menu ul.menu li.expanded ul li.expanded ul li a { /* Drop down navigation tab */ 
    background: #f7f7f7 !important;  /* background of first level drop down menu */
    color:#333 !important; /* text colour on first level drop down menu */
    border-color:#ccc #aaa #aaa #ccc !important; /* border colour around tabs - same as left & right on navigation */
    font-size:12px;  /* font size of first level drop down menu */
    font-size:1.2rem;  /* font size of first level drop down menu */
    padding:3px 15px !important;  /* padding above/below and left/right on the first level drop down menu */
    padding:0.3rem 15px !important;  /* padding above/below and left/right on the first level drop down menu */
  }
  nav.main-menu ul.menu li.expanded ul li.active a,
  nav.main-menu ul.menu li.expanded ul li.expanded ul li.active a { /* Drop down navigation active tab */ 
    background: #dfdfdf !important;  /* background of active first level drop down menu */
    color:#333 !important; /* text colour on first level active drop down menu */
  }
  
  /* drop down first level - hover styles */
  nav.main-menu ul.menu li.expanded ul li a:hover { /* Drop down navigation tab on hover */ 
    background:#dfdfdf !important;  /* background for first level drop down menu on hover */
    color:#333 !important; /* font colour on first level drop down menu on hover */
  }
  nav.main-menu ul.menu li.expanded ul li.active a:hover { /* Drop down navigation active tab on hover*/ 
    background:#dfdfdf !important;  /* background for first level drop down menu on active tab when hovering*/
    color:#333 !important; /* font colour on first level drop down menu on hover on active tab */
  }
  nav.main-menu ul.menu li ul { /* first level drop down menu */
  }
  nav.main-menu ul.menu li:hover ul { /* first level drop down menu on hover */
  }
  nav.main-menu ul.menu li.expanded ul li ul { /* second level drop down menu*/ 
  }


}

@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1280px),
only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 1280px),
only screen and (-o-min-device-pixel-ratio: 2/1) and (min-width: 1280px),
only screen and (min-device-pixel-ratio: 2) and (min-width: 1280px),
only screen and (min-resolution: 192dpi) and (min-width: 1280px),
only screen and (min-resolution: 2dppx) and (min-width: 1280px) { 
  /* Desktop & Extra Large screen, retina, stuff to override above media query */


}