/* MOBILE SMALL - Non-Retina - (0-321px) */

/* --------------- navigation ---------------- */
/* === Main menu settings === */
.navigation-wrap { /* navigation menu container to edge of screen */
  /*background:#F6F5F4; /* background of whole navigation bar to the edge of the screen. Can be made same colour as #header, .navigation or none depending on effect */
}
#menubox .container-item {
  background: #fff; /* below navigation on mobile/tablet */
}
/*.navigation { /* navigation menu container to edge of dislay area */
/*}*/
.menu-icons-wrap {
  top: 0;
}
.useraccountmenu-enabled .menu-icons-wrap {
  top: 2px;
  top: 0.2rem;
}
.fixed-header .useraccountmenu-enabled .menu-icons-wrap {
  top: 1px;
  top: 0.1rem;
}
/*#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 */
/*}*/
/*#menubox .navigation {
}*/


/* === Top level menu items === */
nav.main-menu ul.menu { /* navigation menu UL */
  background:#7a1C79;  /* 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,
#close-icon { /* navigation menu, 'Menu' and 'Search' tabs */
  background:#7A1c79; /* background for top level tab - usually the same as the navigation background */
  border:none; /* border colour on each navigation tab */
  color:#dec6dd;  /* top level tab font color*/
  font-size:16px; /* font-size for top menu*/
  font-size:1.6rem; /* font-size for top menu*/
  padding:5px 3%; /* padding of each tab in mobile /tablet version */
  padding:0.5rem 3%; 
  font-weight:bold;
  border-bottom: solid 1px #fff;
}
#menu-icon,
#search-icon,
#search-icon-nav,
#close-icon{ /* 'Menu' tab on mobile/tablet */
  background:url(../images/icons/menu-icon-white.svg) no-repeat center center #7a1C79; /* 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/icons/search-icon-white.svg) no-repeat center center #7a1C79; /* background of button - same as navigation with Search icon on top */
}
#close-icon { /* 'Search' tab on mobile/tablet */
  background:url(../images/icons/search-icon-white.svg) no-repeat center center #7a1C79; /* background of button - same as navigation with Search icon on top */
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
  margin-left: 10px;
  margin-left: 1rem;
}

/* Top level menu items - hover styles */
#menu-icon:hover,
#search-icon:hover,
#search-icon-nav:hover,
#close-icon:hover { /* navigation menu tabs on hover */
  background-color:#3A0339;  /* 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.active a,
nav.main-menu ul.menu li.active a:hover {
  background:#3A0339;  /* background for top level tab on hover */
  color:#fff; /* top level tab font color on hover */
}


/* === Drop down first level === */
nav.main-menu ul.menu li.expanded ul {
  background: none;
}

/*Child Trigger */
.js nav.main-menu ul.menu li.expanded .child-trigger {
  padding:5px 20px;
  padding:0.5rem 2rem;
  border-left:1px solid #dec6dd;
  background:#7A1c79;
}
.js nav.main-menu ul.menu li.expanded .child-trigger .arrow {
  color:#dec6DD;
}
.js nav.main-menu ul.menu li.expanded .child-trigger:hover,
.js nav.main-menu ul.menu li.expanded.open-child .child-trigger {
  background:#3A0339;

}
.js nav.main-menu ul.menu li.expanded .child-trigger:hover .arrow,
.js nav.main-menu ul.menu li.expanded.open-child .child-trigger .arrow {
  color:#fff;
}

/* 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:#7A1C79 !important;  /* background of first level drop down menu in mobile/tablet menu */
  color:#dec6dd !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:#3a0339 !important;  /* background of active first level drop down menu */
  color:#fff !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:#3A0339 !important;  /* background for first level drop down menu on hover */
  color:#fff !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:#3A0339 !important;  /* background for first level drop down menu on active tab when hovering*/
  color:#fff !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*/ 
/*}*/

/* === Drop down second level === */
nav.main-menu ul.menu li.expanded ul li ul,
.js nav.main-menu ul.menu li.expanded ul li ul { /* Drop down navigation tab container */ 
  display:none !important; /* hides second level drop down */
}

/* ------------------------------------- RESPONSIVE ADJUSTMENTS ------------------------------------- */

@media all and (min-width: 321px) {
  /* MOBILE - Non-Retina - (321px–580px) */
  
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 321px),
only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 321px),
only screen and (-o-min-device-pixel-ratio: 2/1) and (min-width: 321px),
only screen and (min-device-pixel-ratio: 2) and (min-width: 321px),
only screen and (min-resolution: 192dpi) and (min-width: 321px),
only screen and (min-resolution: 2dppx) and (min-width: 321px) { 
  /* MOBILE - Retina - (321px–580px) */
  
}


@media all and (min-width: 581px) {
  /* MOBILE LARGE - Non-Retina - (581px–767px) */
  
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 581px),
only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 581px),
only screen and (-o-min-device-pixel-ratio: 2/1) and (min-width: 581px),
only screen and (min-device-pixel-ratio: 2) and (min-width: 581px),
only screen and (min-resolution: 192dpi) and (min-width: 581px),
only screen and (min-resolution: 2dppx) and (min-width: 581px) { 
  /* MOBILE LARGE - Retina - (581px–767px landscape only) */
  
}

@media all and (min-width: 768px) {
  /* TABLET - Non-Retina - (768px–1024px) */

  /* --------------- 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;
  }
  .menu-icons-wrap {
    top: 10px;
    top: 1rem;
  }
  .useraccountmenu-enabled .menu-icons-wrap {
    top: 21px;
    top: 2.1rem;
  }
  .fixed-header .menu-icons-wrap {
    top: 0;
  }
 
  /* === Top level menu items === */
 
  /* 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: 768px),
only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 768px),
only screen and (-o-min-device-pixel-ratio: 2/1) and (min-width: 768px),
only screen and (min-device-pixel-ratio: 2) and (min-width: 768px),
only screen and (min-resolution: 192dpi) and (min-width: 768px),
only screen and (min-resolution: 2dppx) and (min-width: 768px) { 
  /* TABLET - Retina - (768px–1024px) */
  
}

@media all and (min-width: 1025px) {
  /* DESKTOP SMALL - Non-Retina - (1025px–1280px) */
  
  /* --------------- navigation ---------------- */
  /* === Main menu settings === */
  .navigation-wrap { /* navigation menu container to edge of screen */
    background:#7a1c79; /* background of whole navigation bar to the edge of the screen. Can be made same colour as #header, .navigation or none depending on effect */
  }
  #menubox .container-item {
    background: none; /* reset backgound below navigation on mobile/tablet */
  }
  .region-navigation-inline .navigation {
    bottom: 0;
  }
  .fixed-header #search-icon-nav {
    width:30px;
    width:3rem;
  }
  #searchbox.searchbox-header {
    width:250px;
    margin-top: 10px;
    margin-top: 1rem;
    margin-bottom: 10px;
    margin-bottom: 1rem;
  }
  
  /* === Top level menu items === */
  nav.main-menu ul.menu { /* navigation menu UL */
    padding-top: 0; /* reset from mobile */
  }
  nav.main-menu ul.menu li a,
  #menu-icon,
  #search-icon { /* navigation menu, 'Menu' and 'Search' tabs */
    background:#7a1c79; /* background for top level tab - usually the same as the navigation background */
    color:#dec6dd;  /* top level tab font color*/
  }
  nav.main-menu ul.menu li a {/* navigation menu tabs */
    padding:0 20px !important; /* text padding left and right of each tab */
    padding:0 2rem !important; /* text padding left and right of each tab */
    border:none; /* border colour on each tab */
    line-height:50px; /* center the text vertically - should be the same height as 'height' in 'ul.menu.nav' */
    line-height:5rem; /* center the text vertically - should be the same height as 'height' in 'ul.menu.nav' */
  }
  .fixed-header nav.main-menu ul.menu li a {
    line-height:30px; /* center the text vertically - should be the same height as 'height' in 'ul.menu.nav' */
    line-height:3rem; /* center the text vertically - should be the same height as 'height' in 'ul.menu.nav' */
  }
  nav.main-menu ul.menu { /* use to add/remove border on first and last navigation tabs */
    float: left;
    position: relative;
  }
  .menubox-full-width nav.main-menu ul.menu {
  }
  
  /* 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:#3A0339;  /* background for top level tab on hover */
    color:#fff; /* top level tab font color 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 */
    background:#3A0339;  /* background for top level active tab on hover */
    color:#fff; /* top level active tab font color on hover */
  }
  nav.main-menu ul.menu li a.active,
  nav.main-menu ul.menu li.active a { /* navigation menu active tabs */
    background:#3a0339;  /* background for top level active tab on hover */
    color:#fff; /* top level active tab font color on hover */
  }
  
  /* === Drop down first level === */
  nav.main-menu ul.menu li.expanded ul { /* Drop down navigation menu UL */ 
    top:50px; /*position of first level drop down menu - height of top level menu plus height of border*/
    top: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:30px; /*position of first level drop down menu - height of top level menu plus height of border*/
    top:3rem; /*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 a,
  nav.main-menu ul.menu li.expanded ul li.expanded ul li a { /* Drop down navigation tab */ 
    background: #7a1c79 !important;  /* background of first level drop down menu */
    color:#dec6dd !important; /* text colour on first level drop down menu */
    border:none !important; /* border colour around tabs - same as left & right on navigation */
    font-size:14px;  /* font size of first level drop down menu */
    font-size:1.4rem;  /* font size of first level drop down menu */
    padding:10px 20px !important;  /* padding above/below and left/right on the first level drop down menu */
    padding:1rem 2rem !important;  /* padding above/below and left/right on the first level drop down menu */
    margin-bottom:1px;
  }
  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: #3A0339 !important;  /* background of active first level drop down menu */
    color:#fff !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:#3A0339 !important;  /* background for first level drop down menu on hover */
    color:#fff !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:#3A0339 !important;  /* background for first level drop down menu on active tab when hovering*/
    color:#fff !important; /* font colour on first level drop down menu on hover on active tab */
  }


}

@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1025px),
only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 1025px),
only screen and (-o-min-device-pixel-ratio: 2/1) and (min-width: 1025px),
only screen and (min-device-pixel-ratio: 2) and (min-width: 1025px),
only screen and (min-resolution: 192dpi) and (min-width: 1025px),
only screen and (min-resolution: 2dppx) and (min-width: 1025px) { 
  /* DESKTOP SMALL - Retina - (1025px–1280px) */
  
}


@media only screen and (min-width: 1281px) {
  /* DESKTOP - Non-Retina - (1281px–1920px) */


  /* --------------- navigation ---------------- */
  /* === Main menu settings === */
  
  /* === Top level menu items === */
  
  /* 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: 1281px),
only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 1281px),
only screen and (-o-min-device-pixel-ratio: 2/1) and (min-width: 1281px),
only screen and (min-device-pixel-ratio: 2) and (min-width: 1281px),
only screen and (min-resolution: 192dpi) and (min-width: 1281px),
only screen and (min-resolution: 2dppx) and (min-width: 1281px) { 
  /* DESKTOP - Retina - (1281px–1920px) */
  
}


@media only screen and (min-width: 1921px) {
  /* DESKTOP LARGE - Non-Retina - (1921px and larger) */
  
  /* --------------- navigation ---------------- */
  /* === Main menu settings === */
  
  /* === Top level menu items === */
  
  /* 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: 1921px),
only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 1921px),
only screen and (-o-min-device-pixel-ratio: 2/1) and (min-width: 1921px),
only screen and (min-device-pixel-ratio: 2) and (min-width: 1921px),
only screen and (min-resolution: 192dpi) and (min-width: 1921px),
only screen and (min-resolution: 2dppx) and (min-width: 1921px) { 
  /* DESKTOP LARGE - Retina - (1921px and larger) */
  
}