/* 
=======================================================
   TOP NAV
=======================================================
*/

/* .primary-nav-item ul li h4 + ul li a:hover span {text-decoration: underline;}
.primary-nav-item ul li ul li a span {
  background:green;
  width:60%;
} */


/* 
=======================================================
   HEADER
=======================================================
*/

.primary-nav-item > ul, 
.primary-nav-item > ul > li {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.main-page-img {position: absolute; z-index: -10; min-width: 976px; height: 500px; width: 100%; }

/*12079*/
.main-page-img div {max-width: 1600px; margin: 0 auto; height: 455px; background-position: center center; }
/**/

.main-home-pg .main-page-img div {max-width:none;}
.desktop-site.main-home-pg header {height:500px !important}

/*XXXXXXXXXXXXXXXXXXX 14/03/17: homepage banner XXXXXXXXXXXXXXXXXXXXXXXXX*/

.main-home-pg #page-outer {overflow-x:hidden}

.main-home-pg .main-page-img {
    position: absolute;
    z-index: -10 !important;
    background-color:#000;
    overflow: hidden;
}

.mobile-site.main-home-pg .main-page-img div {/*width:auto !important;  max-width: auto !important; */}

.main-home-pg .main-page-img, 
.main-home-pg .main-page-img div {height: 500px;}

.main-home-pg .main-page-img {
    position: absolute;
    z-index: -10 !important;
    background-color:#000;
    overflow: hidden;
}
.mobile-site.main-home-pg .main-page-img {
    display: block;
    z-index: 0 !important;
    overflow: hidden;
}

.mobile-site.main-home-pg .main-page-img div {/*width:auto !important;  max-width: auto !important; */}

.main-home-pg .main-page-img, 
.main-home-pg .main-page-img div {height: 500px;}


.desktop-site .main-page-img div {
    background-position: center top; 
    /* background-repeat: no-repeat; */ 
    background-attachment: scroll; 
    background-color: transparent; 
}/* can update site HEAD styles to just 'background-image' and remove everything else once these style sheets are in use */

.main-home-pg .main-page-img div {
    background-position: 0 0;
    position: fixed;
    height: inherit; 
    width: 100%; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    overflow: inherit;
}

.main-home-pg .footer-block-inner {background-color: #131313;}


/* end homepage banner*/


/* .mobile-site.main-home-pg .main-page-img,.desktop-site.main-home-pg .main-page-img div {height:430px;} */
.main-home-pg .page-header-wrapper {background-color:transparent !important}
/*overlay next to logo*/
.mobile-site.main-home-pg .nav-wrapper .overlay {height:100px;background-color:#333;opacity:.4}
/**/

.header-info-block .pullout-quote {border: none; }
.header-info-txt h3 {margin: 0 0 1rem 0; }
.header-info-data dt {width: 144px; }
.header-info-data dd {width: calc(100% - 144px); }
.header-info-img img {width: 100%; }

.header-text-block h4 {margin: 1.3em 0 0; }
.header-text-block p {border-bottom: solid 1px #ccc; margin: 0; padding: 0 0 0.6875rem; }

/********** NAV *****************/
.menu li {margin: 0; }
.menu a {display: block; padding: 0.5em 1em; text-decoration: none; }

/*units footer*/
.sectional-footer .menu a {color: #333;}

.menu a.action-button {padding: 0; float: left; }
.menu a.action-button .action-text {padding: 0 16px; padding: 0 1rem; }
dd.menu a {padding: 0; }
.h-menu {overflow: hidden; }
.h-menu li {float: left; }
.v-menu li:last-child {border: none; }
.vert-sep li {position: relative; }
.vert-sep li:after {content: '|'; position: absolute; right: 0; top: 0; line-height: 35px; }
.vert-sep li:last-child:after {content: ' '; }

.desktop-site #main-navigation nav {width: 924px; float: left; }/*.desktop-site nav[role="navigation"]{width: 924px; float: left; } */
.desktop-site.main-home-pg #main-navigation {background-color: rgba(0,0,0,.3);}
.desktop-site .primary-nav {width: 923px; }
nav ul, nav li {padding: 0; margin: 0; list-style: none; }
#primary-nav {height: 30px; padding: 70px 0 0; position: relative; z-index: 11; } 
#primary-nav {float: left; }
#primary-nav ul.grid_58 {width: 923px; }
.primary-nav {list-style: none; padding: 0; margin: 0; }
.primary-nav h3 {margin: 0; }
.primary-nav h4 {padding: 5px; }
.desktop-site .primary-nav-item {float: left; background-repeat: no-repeat; background-position: right -2px; }
.primary-nav-item a h3 {padding: 5px 30px 10px 19px; display: block; line-height: 1.2; }

.primary-nav-item > ul {left: -53px; padding-bottom: 15px;}

.desktop-site .primary-nav-item > ul {display: none; }
.desktop-site .primary-nav-item > ul {position: absolute; }
.desktop-site .primary-nav > li:hover a h3, 
.primary-nav-item.parent a h3 {padding-bottom: 0; }

.primary-nav-item > a:focus + ul, 
.primary-nav-item:hover > ul, 
.primary-nav-item:hover > ul a {display: block; }

.primary-nav-item .hover-intent {display: none !important /*need this to hide the focus dd-menu when hovering on others*/}
.primary-nav-item:hover > ul.hover-intent, 
.primary-nav-item:hover > ul.hover-intent a {display: none !important}

.primary-nav-item > a:focus + ul {z-index: 0;}
.primary-nav-item > a:hover + ul,
.primary-nav-item:hover > a + ul {z-index: 1;}

.primary-nav-item ul li:first-child h4, 
.primary-nav-item ul li:first-child > ul, 
.primary-nav-item ul li > ul ul, 
.primary-nav-item ul li ul h4 {border: none; }

/*
* TODO: somehow the star hack helps with the top nav dropdowns
* 20/03/17: Yeah but it means there is an issue with the code else where
*/
.primary-nav-item > ul > li[class^='grid_'] {float: left; display: block; padding: 10px; /* padding-bottom:0; */ *padding: 0;}
.primary-nav-item > ul > li.homelink + li {padding-bottom:0;}

/* Visit dropdown: related to 10607 add home link to top nav dropdowwns */
.primary-nav li:nth-of-type(4) > ul.grid_61 li.grid_14:nth-of-type(1) ul {padding-bottom:0;}

.desktop-site .primary-nav-item.single-col-menu > ul > li {width: 100%;}
.desktop-site .primary-nav-item.single-col-menu > ul:before {
    content: ' ';
    display: block;
    width: 100%;
    height: 10px;
    position: relative;
    background-color: #eee;
}
.primary-nav-item ul li h4, 
.primary-nav-item > ul > li li {padding: 5px 5px 5px 15px; margin: 0; }
.primary-nav-item ul li > ul ul li, 
.primary-nav-item ul li ul h4 {padding: 5px 0; }
.desktop-site .primary-nav-item.single-col-menu > ul {left: auto;}
/*.desktop-site .primary-nav-item.single-col-menu.donate ul {margin-top:8px}*/
.desktop-site .primary-nav-item.single-col-menu ul
.desktop-site .primary-nav-item.single-col-menu ul li {padding: 5px 5px 5px 15px; }

.primary-nav-item.parent > a + ul, 
.primary-nav-item:hover > ul.click-intent, 
.primary-nav-item:hover > ul.click-intent a {display: block; }
#site-logo {width: 52px; height: 100px; float: left; }
.shop #site-logo {position: relative; z-index: 100; }/* for quick basket drop down */


/* 
=======================================================
   HEADING
=======================================================
*/
.spaceslandingpage.shelvesandspaces .sp-category {
	font-size:12px;
	font-size: .75rem;
	text-transform:uppercase;
}
.desktop-site.shelvesandspaces .sp-category a {background-color: #ae2552 !important;}
.desktop-site.shelvesandspaces .sp-category a:hover {background-color: #831c3d !important;}

/*
=======================================================
   FOOTER
=======================================================
*/

.desktop-site .footer-sponsors.footer-2col .sponsors,
.desktop-site .footer-sponsors.footer-2col .collaboration {max-width:50%;}
.footer-sponsors {overflow:hidden;}

.desktop-site .mobile, 
.mobile-site .desktop {display: none !important; }
.footer-block.sectional-footer .footer-block-inner .text-block {display:block;}
.footer-block.sectional-footer .footer-block-inner .text-block a, 
.footer-block.sectional-footer .footer-block-inner .text-block a img {float: left;}
.footer-block .footer-secondary-menu li a {color:#333;}
.desktop-site.shelvesandspaces .footer-sponsors a img {margin-right:16px;}


/*
================================
Footer sponsors
================================
*/

/* .footer-block.sectional-footer.clearfix.vlg-bg,
.footer-block.sectional-footer.clearfix {
    override vlg-bg so that we don't need to make changes in the solution
    background-color: #fff;
}
.footer-block.sectional-footer.clearfix.vlg-bg .footer-block-inner,
.footer-block.sectional-footer.clearfix .footer-block-inner {
    border-top:1px solid #ccc;
} */