.haMenuContainer{ z-index: 2147483647; font-family: "Source Serif 4"; color: white; position: fixed; top: 0; left: 100vw; width: 100%; height: 100vh; overflow-y: auto; background-color: rgb(1,33,105); transition: all ease 0.3s; }
.haMenuContainer #haMenuContainer-inner{ max-width: 1200px; margin: 0 auto; padding: 0 32px 32px 32px; position: relative; }
.haMenuContainer .haMenuContainer-header{ padding: 32px 0; box-sizing: border-box; position: relative; }
.haMenuContainer .haMenuContainer-header > a { display: inline-block;  }
.haMenuContainer .haMenuContainer-header img{ height: 48px; display: inline-block; }
.haMenuContainer .haMenuContainer-header ul{ display: flex; list-style: none; padding: 0; margin: 0; position: absolute; top: 0; right: 0; }
.haMenuContainer .haMenuContainer-header ul a{ padding: 0 8px; border-right: 1px solid white; font-size: 0.8em; }

/* QUICK MENU */
.haQuickMenu{ position: absolute; width: 100%; z-index: 2147483646; }
.haQuickMenu ul{ background-color: rgba(4,24,64,0.7); backdrop-filter: blur(8px); display: flex; list-style: none; padding: 0; margin: 0; position: absolute; top: 0; right: 0; border-bottom-left-radius: 0; }
.haQuickMenu ul li{ display: inline-block; }
.haQuickMenu ul a{ font-family: "Source Serif 4"; display: block; padding: 4px 8px; color: white; text-decoration: none; font-size: 12px; line-height: normal;}
.haQuickMenu ul a:hover, .haQuickMenu ul a:focus{ color: #cfab63; background-color: rgba(4,24,64,1); }
.haQuickMenu div{ position: relative; max-width: 1400px; margin: 0 auto; }
.haQuickMenu > div > a { height: 48px; position: absolute; top: 32px; left: 16px; }
.haQuickMenu > div > a > img{ height: 48px; display: block; }

.haMenuContainer a{ color: white; text-decoration: none; display: inline-block; transition: all 0.25s ease; }
.haMenuContainer a:focus{ color: #cfab63; }
.haMenuContainer a:hover{ color: #cfab63; text-decoration: underline; }

.haMenuContainer nav{ box-sizing: border-box; }
.haMenuContainer ul{ list-style: none; padding: 0; margin: 1em 0; }
.haMenuContainer ul li{ font-size: initial; line-height: normal; }
.haMenuContainer .sub-menu{ display: none; grid-template-columns: 1fr; width: 100%; max-width: 1200px; /*min-height: calc(100vh - 128px);*/ background-color: rgb(27,56,120); background-color: rgb(1,33,105); }
.haMenuContainer .sub-menu .sub-menu{ background-color: rgb(1,33,105); top: 0; }

.haMenuContainer nav.main-menu > div > ul a{ font-size: 1.5em; display: inline-block; padding: 16px 48px 16px 0; }
.haMenuContainer nav.sub-menu ul a[href^="javascript:;"] { 
	font-size: 1.25em; 
	padding: 16px 48px 16px 0; 
	background-color: transparent;
    background-image: url("https://www.harper-adams.ac.uk/img/menu/white/menu.png");
	background-position: center right;
    background-repeat: no-repeat; }
.haMenuContainer nav.sub-menu ul a, .haMenuContainer nav.sub-menu ul a.back{ font-size: 1em; padding: 8px 0px 8px 0; background: none; }

.haMenuContainer nav.main-menu > div > ul a{
	background-color: transparent;
    background-image: url("https://www.harper-adams.ac.uk/img/menu/white/menu.png");
	background-position: center right;
    background-repeat: no-repeat; 
	line-height: normal;
}

.haMenuContainer h2, .haMenuContainer h3 { font-family: "Source Serif 4"; font-size: 1.5em; border-bottom: 1px solid #cfab63; color: white; padding-bottom: 16px; font-weight: 400; margin: 16px 0; }

.haMenuContainer nav.sub-menu ul h2:not(:has(a)), .haMenuContainer nav.sub-menu ul h3:not(:has(a)){ padding: 8px 0 24px 0; }
.haMenuContainer ul li p{ font-family: Effra; color: rgb(247, 235, 213); font-size: 1.25em; margin: 1em 0; font-weight: 400; }

.haMenuContainer a#closeMainMenu{ position: absolute; top: 32px; right: 0px; }

.haMenuContainer nav article{ background-color: #041840; margin: 0; border: 0; }
.haMenuContainer nav article a{ background-color: #041840; padding: 0; margin: 0; transition: all 0.25s ease; }
.haMenuContainer nav article:last-of-type, .haMenuContainer nav article:last-of-type a{ background-color: #f7ebd5; color: rgb(1,33,105); }
.haMenuContainer nav article a span.section-container{ display: none; }
.haMenuContainer nav article a span.headline{ display: block;
  padding: 16px 16px 0 16px;
  font-weight: 900;
  font-size: 1.25em;
  color: white;
  line-height: 1.25em; 
  transition: all 0.25s ease; }
.haMenuContainer nav article:last-of-type a span.headline{ color: rgb(1,33,105); }

.haMenuContainer nav article a:hover span.headline,
.haMenuContainer nav article a:hover span.abstract,
.haMenuContainer nav article a:focus span.headline,
.haMenuContainer nav article a:focus span.abstract{ color: #cfab63; transition: all 0.25s ease; }
  
.haMenuContainer nav article a span.abstract{ display: block; padding: 16px; font-size: 0.8em; transition: all 0.25s ease; }
.haMenuContainer nav article a span.blog-cover-img-container img{ display: none; }
.haMenuContainer nav article a span.blog-cover-img{
	height: 152px;
	display: block;
	background-size: cover;
	background-position: center center; }
	
.haMenuContainer nav article.grid-item a span.blog-cover-img{ position: initial; opacity: 1; filter: none; }
	
  
.haMenuContainer nav a img{ max-width: 100%; }

.haMenuContainer .sub-menu-inner > div{ display: grid; grid-template-columns: 1fr; grid-column-gap: 32px; grid-row-gap: 32px; }


@media screen and (min-width: 520px) {
	.haMenuContainer .sub-menu-inner > div{ display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 32px; }
	.haMenuContainer nav.main-menu > div > ul a{ font-size: 2em; }
	.haMenuContainer nav.sub-menu ul a[href^="javascript:;"] { font-size: 1.5em; }
	.haMenuContainer h2, .haMenuContainer h3 { font-size: 2em; }
	.haMenuContainer nav.sub-menu ul a.back{ font-size: 16px; }
}

@media screen and (min-width: 640px) {
	.haMenuContainer .sub-menu-inner{ display: grid; /*grid-template-columns: 1fr 260px;*/ grid-template-columns: 1fr 293px; grid-column-gap: 32px; }
	.haMenuContainer .sub-menu-inner > div{ grid-template-columns: 1fr; }
	.haMenuContainer .sub-menu-inner > div:has(article) { border-left: 1px solid #444d8b; padding-left: 32px; }
	
	.haQuickMenu > div > a { left: 36px; }
}

@media screen and (min-width: 1024px) {
	.haMenuContainer .sub-menu-inner{ /*grid-template-columns: 1fr 572px;*/ grid-template-columns: 1fr 605px; }
	.haMenuContainer .sub-menu-inner > div{ grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; }
	
	.haMenuContainer nav article:nth-child(1){ grid-row: 1; grid-column: 2; }
	.haMenuContainer nav article:nth-child(2){ grid-row: 1; grid-column: 1; }
}

@media screen and (min-width: 1400px) {
	.haQuickMenu > div > a { left: 32px; }
	.haQuickMenu ul{ margin-right: 32px; }
}

div.menuButtonContainer{ width: 100%; position: fixed; top: 0; left: 0; z-index: 2147483646; }
div.menuButtonContainer.closeButtonContainer{ position: absolute; }
div.menuButtonContainer div{ max-width: 1400px; margin: 0 auto; position: relative; }

#openMainMenu{ backdrop-filter: blur(8px); position: absolute; right: 32px; top: 32px; width: 48px; display: grid; grid-template-columns: 0 48px; background-color: rgba(1,33,105,0.7); background-color: rgba(4,24,64,0.5); color: white; border-radius: 32px; border-radius: 0; text-decoration: none; font-family: Effra; }
#openMainMenu span{ display: none; line-height: 48px; padding-left: 16px; }
#openMainMenu svg{ stroke: white; stroke-width: 2px; width: 48px; height: 48px; display: block; border-radius: 32px; border-radius: 0; border: 1px solid rgba(255,255,255,0.5); box-sizing: border-box; }
#openMainMenu:hover, #openMainMenu:focus{ color: #cfab63; background-color: rgba(1,33,105,1); background-color: rgba(4,24,64,1); }
#openMainMenu:hover svg, #openMainMenu:focus svg{ stroke: #cfab63; border-color: #cfab63; }

#closeMainMenu{ position: absolute; right: 0; top: 32px; margin-right: 32px; width: 48px; display: grid; grid-template-columns: 0 48px; background-color: rgba(0,0,0,1); color: white; border-radius: 32px; border-radius: 0; text-decoration: none; font-family: Effra; }
#closeMainMenu span{ display: none; line-height: 48px; padding-left: 16px; }
#closeMainMenu svg{ stroke: white; stroke-width: 2px; width: 48px; height: 48px; display: block; border-radius: 32px; border-radius: 0; border: 1px solid rgba(255,255,255,0.5); box-sizing: border-box; }
#closeMainMenu:hover, #closeMainMenu:focus{ color: #cfab63; background-color: black; }
#closeMainMenu:hover svg, #openMainMenu:focus svg{ stroke: #cfab63; border-color: #cfab63; }

.searchMainMenu{ border-radius: 32px; backdrop-filter: blur(8px); background-color: rgba(4,24,64,0.5); position: absolute;	top: 32px; right: 88px; border: 3px solid transparent; box-sizing: border-box; }
.searchMainMenu svg{ display: block; width: 42px; height: 42px; border-radius: 32px; background-color: rgb(1,33,105); background-color: rgb(4,24,64); stroke: white; stroke-width: 3px; fill: none; }
.searchMainMenu:hover, .searchMainMenu:focus{ background-color: rgb(1,33,105); background-color: rgb(4,24,64); }
.searchMainMenu:hover svg, .searchMainMenu:focus svg{ stroke: #cfab63;  }
  
.closeButtonContainer .searchMainMenu{ right: 88px; background-color: rgba(0,0,0,0.25); }
.closeButtonContainer .searchMainMenu svg{ background-color: black; }
.closeButtonContainer .searchMainMenu:hover, .closeButtonContainer .searchMainMenu:focus{ background-color: black; }

@media screen and (min-width: 460px) 
{
	.haMenuContainer .haMenuContainer-header img{ height: 64px; }
	#closeMainMenu{ width: 112px; grid-template-columns: 64px 48px; }
	#closeMainMenu span{ display: block; }
	#openMainMenu{ width: 112px; grid-template-columns: 64px 48px; }
	#openMainMenu span{ display: block; }
	.searchMainMenu, .closeButtonContainer .searchMainMenu{ right: 152px; }
}

/* MENU BUTTON STYLE */
#openMainMenu{ box-sizing: border-box; border: 3px solid transparent; border-radius: 32px; }
#openMainMenu span{ line-height: 42px; }
#openMainMenu svg{ width: 42px; height: 42px; background-color: rgb(4,24,64); border: 0; border-radius: 32px; }

#closeMainMenu{ box-sizing: border-box; border: 3px solid transparent;	border-radius: 32px; background-color: rgba(0,0,0,0.25); }
#closeMainMenu span{ line-height: 42px; }
#closeMainMenu svg{ width: 42px; height: 42px; background-color: black; border: 0; border-radius: 32px; }

/* SEARCH */
.haMenuContainer nav form label{ font-size: 2em; display: block; width: 100%; margin-bottom: 32px; }
.haMenuContainer nav form input[type="text"]{
	background-color: transparent;
	color: white;
	border: 0;
	border-bottom: 1px solid white;
	font-size: 1.5em;
	padding: 8px;
	width: 100%;
	box-sizing: border-box;
}
.haMenuContainer nav form input[type="submit"]{
	font-family: Effra;
	font-size: 1em;
	cursor: pointer;
	border-radius: 32px;
}
.haMenuContainer nav form input[type="submit"]:focus, .haMenuContainer nav form input[type="submit"]:hover{
	background-color: #cfab63;
}
.haMenuContainer nav form input[type="text"]:focus{ background-color: white; color: black; }

.haMenuContainer nav form div{ display: grid; grid-template-columns: 1fr 100px; grid-column-gap: 32px; }

@media screen and (min-width: 640px) 
{
	.haMenuContainer nav form div{ grid-template-columns: 1fr 150px; }
}

/* OVERRIDE OLD MENU STYLES */
body.pageV1 main { margin-top: 0; padding-top: 0; }
/*
body.pageV1 nav.breadcrumb{ margin-top: 96px; }
.GridLayout.transparentMenu .mainHeader .container-inner{ padding-top: 96px; }
*/
div#site-wrapper header#hauHeader{ height: 96px; background-color: rgb(1,33,105); border-bottom: 1px solid rgba(255,255,255,0.2); }
body.transparentMenu div#site-wrapper header#hauHeader{ height: 0; border-bottom: 0; }