/* 
=======================================================
   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: 455px; width: 100%; }
.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;}
/* .main-home-pg .main-page-img div {max-width: none;} */

/*site homepage only*/
/* .mobile-site.main-home-pg .main-page-img {display:block !important; z-index:0} */

/*
    Home page banner should now come from the BannerImage field on the home page item!
    GW 27/01/2017
.main-home-pg .main-page-img div {
	background: url('../../../resources/global/images/MaganCarta17.7.15_060.jpg') no-repeat top fixed transparent !important; 
}*/

/*
20/02/2017 : Moved back into the HP HTML for Athena dev
.main-home-pg .main-page-img div {
  background: url('../../../resources/global/images/MaganCarta17.7.15_060.jpg') no-repeat top fixed transparent !important; 
} */
/* .desktop-site.main-home-pg .main-page-img,
.desktop-site.main-home-pg .main-page-img div, */
.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 {
    display: block;
    z-index: 0 !important;
    overflow: hidden;
/*     max-width: auto !important;
min-width: auto !important;
width:auto!important; */
}

.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 div:before { */
.main-home-pg .main-page-img div {
    /**
    * commented out code in relation to this in:
    * header-and-footer
    * components
    **/

    /*
        BG Order:
        background-color
        background-image
        background-repeat
        background-attachment
        background-position
    */
    /* content: "";  */
    /* background-image: url(../../../resources/global/images/MaganCarta17.7.15_060.jpg); */
    /* background-repeat: no-repeat; breaks in safari iphone 4*/
    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;}

@media only screen and (min-width: 1600px) {
    .main-home-pg .main-page-img div {background-position: 0px -125px;}
} 

@media only screen and (max-width: 1024px) {
    .mobile-site.main-home-pg .main-page-img div {background-position: 0 0;}
}
@media only screen and (max-width: 768px) {
    /* .mobile-site.main-home-pg .main-page-img div:before {background-position: 1140px 0;} */
}
@media only screen and (max-width: 480px) {
    .mobile-site.main-home-pg .main-page-img div {background-position: 650px 0;}
}
 @media only screen and (max-width: 414px) {
    .mobile-site.main-home-pg .main-page-img div {background-position: 700px 0;}
}
@media only screen and (max-width: 375px) {
    .mobile-site.main-home-pg .main-page-img div {background-position: 645px 0;}
}
@media only screen and (max-width: 321px) {
    .mobile-site.main-home-pg .main-page-img div {background-position: 490px 0;}
}

/* end homepage banner*/


.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;
/*     max-width: auto !important;
min-width: auto !important;
width:auto!important; */
}

.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 div:before { */
.main-home-pg .main-page-img div {
    /**
    * commented out code in relation to this in:
    * header-and-footer
    * components
    **/

    /*
        BG Order:
        background-color
        background-image
        background-repeat
        background-attachment
        background-position
    */
    /* content: "";  */
    /* background-image: url(../../../resources/global/images/MaganCarta17.7.15_060.jpg); */
    /* background-repeat: no-repeat; breaks in safari iphone 4*/
    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;}

@media only screen and (min-width: 1600px) {
    .main-home-pg .main-page-img div {background-position: 0px -125px;}
} 

@media only screen and (max-width: 1024px) {
    .mobile-site.main-home-pg .main-page-img div {background-position: 0 0;}
}
@media only screen and (max-width: 768px) {
    /* .mobile-site.main-home-pg .main-page-img div:before {background-position: 1140px 0;} */
}
@media only screen and (max-width: 480px) {
    .mobile-site.main-home-pg .main-page-img div {background-position: 650px 0;}
}
 @media only screen and (max-width: 414px) {
    .mobile-site.main-home-pg .main-page-img div {background-position: 700px 0;}
}
@media only screen and (max-width: 375px) {
    .mobile-site.main-home-pg .main-page-img div {background-position: 645px 0;}
}
@media only screen and (max-width: 321px) {
    .mobile-site.main-home-pg .main-page-img div {background-position: 490px 0;}
}

/* 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 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 {float: left; display: block; padding: 10px; /* padding-bottom:0; */ *padding: 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:hover > ul.hover-intent, 
.primary-nav-item:hover > ul.hover-intent a {display: none; }
.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 .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;}