html{ font-size: 62.5%; -webkit-text-size-adjust: 100%; } /* stop body copy size changing on iOS when rotating the screen */
body{ background-color: white; margin: 0; overflow-x: hidden; }

/* FONT SELECTION */
body{ font-family: Roboto, sans-serif; }
#site-wrapper{ position: relative; overflow: hidden; width: 100%; background-color: inherit; }

h1, h2, h3{ font-family: 'Fira Sans', sans-serif; }

article span.headline{ 	font-family: 'Fira Sans', sans-serif; font-weight: bold; }
.accordian-header{ 		font-family: 'Fira Sans', sans-serif; font-weight: bold; }
ul.page-menu li a{ 		font-family: 'Fira Sans', sans-serif; font-weight: bold; }

h1 em{ 			font-family: Lora, serif; font-style: normal; }
p.quote{ 		font-family: "Fira Sans", sans-serif; font-size: 24px; font-weight: 700; }
div.quote p{ 	font-family: 'Fira Sans', sans-serif; font-weight: bold; }

h1.skew{ 						font-family: 'Roboto Condensed', sans-serif; font-weight: 700; }
div#menu-bar-container ul a{ 	font-family: 'Fira Sans', sans-serif; font-weight: 700; }
div.stickynav-container{ 		font-family: 'Roboto Condensed', sans-serif; }
div#breadcrumb ul{ 				font-family: 'Roboto Condensed', sans-serif; font-weight: 700; }

#mobile-menu ul{ 				font-family: Roboto, sans-serif; font-weight: 400; }
div.content-section a.box-link{ font-family: Roboto, sans-serif; font-weight: bold; }
a.call-to-action{ 				font-family: Roboto, sans-serif; font-weight: bold; }
article span.more-info{ 		font-family: Roboto, sans-serif; font-weight: bold; }
ul.atoz-menu li{ 				font-family: Roboto, sans-serif; font-weight: bold; }
.small-heading{ 				font-family: Roboto, sans-serif; font-weight: 700; }
div.search-bar input{ 			font-family: Roboto, sans-serif; font-weight: 300; }

.standard label{ 				font-family: Roboto, sans-serif; font-weight: 300; }
.standard input[type="text"], .standard input[type="password"], .standard select{ font-family: Roboto, sans-serif; font-weight: 400; }
.standard input[type="submit"]{ font-family: Roboto, sans-serif; font-weight: bold; }
.standard input[type="button"]{ font-family: Roboto, sans-serif; font-weight: bold; }
.standard select option{ 		font-family: Roboto, sans-serif; }
/* END FONT SELECTION */

/* TEXT SIZES */
h1, h2, h3, h4{ margin-top: 0; }
h1{ font-size: 6.0rem; line-height: 1.2em;  }
h2{ font-size: 3.2rem; }
h3{ font-size: 2.4rem; }
h4{ font-size: 2rem; }

p, ul, ol{ font-size: 2rem; line-height: 1.5em; font-weight: 300; margin-top: 0; }
p.section-intro, p.section-intro1024 { font-size: 3rem; }

.smaller{ font-size: 0.5em; }
a{ cursor: pointer; }
a.link-box{ margin-bottom: 12px; }
main div.content-section p a.img-link{ border-bottom-width: 0; }

.right{ float: right; }
.clear{ clear: both; }
.centre { text-align: center; }

.bg-dark { color: white; }

sup, sub { line-height: 0; }

span.larger{ font-size: larger; }
span.xlarge{ font-size: 250%; }

h1.skew{ -ms-transform: skew(0deg, -7deg); -webkit-transform: skew(0deg, -7deg); transform: skew(0deg, -7deg); }

.visible1024{ display: none; }
.show1024{ display: none; }
.show912{ display: none; }
.show640{ display: none; }

.no-margin{ margin: 0; }
.no-padding{ padding: 0; }

.no-margin.search-bar{ margin: 0; }

/* fixed width header image */
div.header-container{ background-attachment: scroll; background-position: center center; background-repeat: no-repeat; background-size: cover; overflow: hidden; }
div.header{ width: 100%; margin: 0 auto; position: relative; }
div.header-content{ width: 100%; min-height: 256px; height: calc(100vh - 202px); background-attachment: scroll; background-position: center center; background-repeat: no-repeat; background-size: cover; }

div.header-overlay{ width: 100%; height: calc(100vh - 202px); min-height: 256px; }
	
.cover-img{ background-attachment: fixed; background-position: center center; background-repeat: no-repeat; background-size: cover; }
.cover-img-scroll{ background-attachment: scroll; background-position: center center; background-repeat: no-repeat; background-size: cover; }
div.scroll-bg{ background-attachment: scroll; background-position: center 0px; }

/* MENU BAR */
div#menu-bar-container { z-index: 10; text-align: center; min-height: auto; position: fixed; top: 0px; right: 0px; width: 100%; height: 84px; }
div#menu-bar-container ul{ list-style: none; padding-left: 0px; margin-bottom: 0; }
div#menu-bar-container ul li{ display: inline-block; }
div#menu-bar-container ul li a { color: white; line-height: 64px; font-size: 1.8rem; display: block; padding: 0px 12px; border-bottom: 8px solid transparent; transition: all 0.3s ease; }
div#menu-bar-container ul li a:hover, div#menu-bar-container ul li a:focus 
{
    color: #ffdd00;
    border-bottom-color: #ffdd00;
	background-color: transparent;
	transition: all 0.3s ease; 
}
div#menu-bar-container img.icon{ margin: 0px; }
div#menu-bar-container div.content-section-inner{ padding-bottom: 0px; padding-top: 12px; }
/* END MENU BAR */

/* DASHBOARD MENU BAR */
div.dashboard-header div#menu-bar-container{ min-height: auto; height: auto; }
div.dashboard-header div#menu-bar-container ul li a{ border-bottom-width: 4px; line-height: 57px; }
/* END DASHBOARD MENU BAR */

/* MOBILE MENU */
#mobile-menu-overlay{ cursor: pointer; display: block; transition: all 0.3s ease; position: fixed; top: 0px; width: 100%; height: 100%; z-index: -998; margin: 0; padding: 0; overflow: hidden; background-color: rgb(0,0,0); background-color: transparent; opacity: 0; }

#mobile-menu
{ 
	width: 66.666%; height: 100vh; position: fixed; top: 0px; left: 0px; z-index: 2147483637;  
	-ms-transform-origin: left;
	    transform-origin: left; -webkit-transform-origin: left;
	-ms-transform: translateX(-100%);
	    transform: translateX(-100%); -webkit-transform: translateX(-100%);
	transition: 0.3s ease-in-out !important; 
	overflow-y: scroll;
}
#mobile-menu.show
{ 
	margin-left: 0px; margin-right: 0px; 
	-ms-transform-origin: left;
	    transform-origin: left; -webkit-transform-origin: left;
	-ms-transform: translateX(0px);
	    transform: translateX(0px); -webkit-transform: translateX(0px);
	transition: 0.3s ease-in-out;
}

#mobile-menu ul{ list-style: none; font-size: 2rem; margin-bottom: 0px; padding-left: 0px; }
#mobile-menu ul li{ display: block; }
#mobile-menu ul li a
{ 
	color: white; 
	display: block; 
	background-image: url('/img/icon/icon-menu-arrow-white.png'); 
	background-position: center right; 
	background-repeat: no-repeat; 
	padding: 0px 32px 0px 16px; 
	line-height: 48px; 
	border-left: 8px solid transparent; 
	transition: all 0.3s ease; 
	text-decoration: none; 
	border-bottom: 1px solid rgba(128,128,128,0.5);; 
}
#mobile-menu ul li a:hover, #mobile-menu ul li a:focus
{ 
	background-color: transparent; 
	transition: all 0.3s ease; 
	border-left: 8px solid #ffdd00; 
	color: #ffdd00;
}
#mobile-menu ul li ul li a { padding-left: 32px; }
#mobile-menu a span { padding: 24px; display: block; }
#mobile-menu a span img { max-height: 64px; max-width: 100%; }

/* burger menu */
#menu-icon 
{
	position: relative;
	max-width: 64px;
	max-height: 64px;
	width: 100%;
	height: 64px;
	display: block;
	border-bottom-left-radius: 50%;
}

#menu-icon path 
{
	stroke: white;
	stroke-width: 2;
	stroke-linecap: round;
	transition: all 250ms ease-in-out;
	transform: rotate(0deg);
	transform-origin: 50% 50%;
	will-change: transform, opacity;
}

#menu-button{ transition: all 250ms ease-in-out; }
#menu-button:hover path,
#menu-button:focus path,
#menu-button:active path 
{
    stroke: rgb(255,221,0);
}
#menu-button.is-active #menu-icon path:nth-child(1) { opacity: 0; }
#menu-button.is-active #menu-icon path:nth-child(4) { opacity: 0; }
#menu-button.is-active #menu-icon path:nth-child(2) { transform: rotate(45deg); }
#menu-button.is-active #menu-icon path:nth-child(3) { transform: rotate(-45deg); }

#menu-button svg{ background-color: rgb(44,82,52); } 
/* END MOBILE MENU */

#main-menu { max-width: 100%; }
#main-menu .content-section-inner{ background-color: #2c5234; max-width: 100%; border-bottom: 1px solid white; }


#icon-menu-bar { float: right; text-align: right; }

img.icon{ display: inline-block; border-radius: 50%; border: 1px solid white; margin: 12px; transition: all 0.3s ease; cursor: pointer; width: 46px; height: 46px; }
img.icon:hover{ border-radius: 0%; transition: all 0.3s ease; }

/* style on keyboard focus */
a:focus img.icon{ border-radius: 0%; transition: all 0.3s ease; }
img.icon:focus{ border-radius: 0%; transition: all 0.3s ease; }



/* PAGE HEADING */
div#page-title{ width: 100%; max-width: 1280px; margin: 0 auto; color: white; font-weight: 300; display: none; }
div#page-title-inner{ padding: 4px 24px 4px 24px; }

div.page-heading-container{ position: absolute; bottom: 48px; width: 100%; }

div.page-heading-content{ max-width: 1280px; margin: 0 auto; }
div.page-heading-content div.page-heading{ padding: 8px 12px 8px 24px; display: inline-block; }
div.page-heading h1, div.page-heading h2{ padding: 0; margin: 0; color: white; }
div.page-heading h1{ font-size: 4vw; }
div.page-heading a{ text-decoration: none; display: inline-block; }
div.page-heading a h2{ font-size: 1.5em; background-color: rgb(255,232,0); color: black; padding: 4px 8px 4px 8px; transition: all 0.3s ease; }
div.page-heading a:hover h2, div.page-heading a:focus h2{ background-color: #2C2321; color: rgb(255,232,0); transition: all 0.3s ease; }

div.page-heading.bg-light h1, div.page-heading.bg-light h2{ color: #252628; }
/* END PAGE HEADING */

/* CONTENT POSITIONING */
div.content-top{ position: absolute; top: 0px; width: 100%; }
div.content-middle{ position: absolute; width: 100%; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
div.content-bottom{ position: absolute; bottom: 0px; }
/* END CONTENT POSITIONING */

/* PROGRESS BAR */
div.progress-bar-container{ position: fixed; top: 0; height: 6px; background-color: transparent; width: 100%; z-index: 1000; }
div.progress-bar{ background-color: red; width: 0%; height: 6px; }
div.progress-bar-container.dark div.progress-bar{ background-color: rgb(255,232,0); }
/* END PROGRESS BAR */

/* STICKY NAV */
div.stickynav-container{ background-color: rgb(29,37,45); overflow: hidden; }
div.stickynav{ width: 1280px; max-width: 1280px; margin: 0 auto; }
div.stickynav-inner{ padding: 0 12px 0 12px; display: inline-block; vertical-align:top; }
div.stickynav-inner ul{ margin: 0; padding: 0; font-weight: 700; float: left; z-index: 100; }
div.stickynav-inner ul li{ display: inline-block; border-right: 0px solid white; border-bottom: 0px solid white; }
div.stickynav-inner ul li a{ display: inline-block; min-height: 32px; line-height: 32px; padding: 0 12px 0 12px; color: white; text-decoration: none; border-bottom: 8px solid rgb(29,37,45); border-top: 8px solid rgb(29,37,45); transition: all 0.3s ease; }
div.stickynav-inner ul li a:hover, div.stickynav-inner ul li a:focus{ border-bottom: 8px solid rgb(255,232,0); color: rgba(255,255,255,0.5); transition: all 0.3s ease; }
div.stickynav-inner ul li a.active{ border-top: 8px solid rgb(29,37,45); border-bottom: 8px solid white; color: rgba(255,255,255,0.5); }

div#drag{ position: relative; }
div.drag-icon{ box-shadow: 0px 0px 48px black; background-color: #333; width: 48px; height: 48px; position: absolute; right: 0; z-index: 1001; }
div.drag-icon-shadow{ background: linear-gradient(90deg, rgba(0,0,0,0),rgba(0,0,0,0.4)); width: 48px; height: 48px; position: absolute; right: 48px; z-index: 2; }
div.drag-icon img{ width: 24px; padding: 12px 0px 0px 12px; margin: 0; }
/* END STICKY NAV */

.sticky { position: fixed; width: 100%; left: 0; top: 0px; padding-top: 6px; z-index: 100; border-top: 0; transition: all 0.3s ease; }
div.headersticky{ margin-top: 48px; }

p.category{ font-size: small; margin-bottom: 8px; }

div.quote{ border-left: 1px solid black; padding-left: 24px; font-size: larger; }
div.quote p{ font-style: italic; }

/* CONTENT SECTION */
div.content-section-container{ overflow: hidden; }
div.content-section{ width: 100%; max-width: 1280px; margin: 0 auto;  }
div.content-section-margin{ margin: 0px 24px 0px 24px; padding-top: 12px; padding-bottom: 12px; }
div.content-section-inner{ padding: 24px 24px 0.1px 24px; }
div.content-section-vertical-padding{ padding-top: 24px; padding-bottom: 24px; }

div.content-section-inner p strong, div.content-section-inner li strong { font-weight: 700; }

div.padding-bottom{ padding-bottom: 12px; }
div.content-section img.block{ max-width: 100%; display: block; margin: 0 auto; }

div.content-section.narrow{ max-width: 640px; }

/* CONTENT SECTION TABLE */
div.content-section table th{ text-align: left; vertical-align: top; }
div.content-section table td{ font-weight: 300; vertical-align: top; }
div.content-section table td strong{ font-weight: 700; }
div.content-section table tr:nth-child(odd){ background-color: #eee; }
div.content-section table a{ text-decoration: none; border-bottom: 1px dotted #905; font-weight: 400; color: #905; }
div.content-section table a:hover, div.content-section table a:focus{ background-color: rgb(255,232,0); color: black; border-bottom-color: rgb(255,232,0); }

div.content-section table th.rotate90 div{ width: 45px; height: 300px; overflow: hidden; }
div.content-section table th.rotate90 a
{ 
	display: block;
	-webkit-transform:rotate(90deg);
	-ms-transform:rotate(90deg);
	transform: rotate(90deg);
	-ms-transform-origin: top left;
	    transform-origin: top left;
	-webkit-transform-origin: top left; 
	position: relative;
	left: 45px;
	width: 300px;
	height: 45px;
	text-decoration: none;
}
div.content-section table th.rotate90 a:hover
{ 
	color: black;
	background-color: rgb(255,232,0);
}
div.content-section table.with-border td{ border-right: 1px solid #ccc; }
div.content-section table.with-vertical-padding td{ padding-top: 4px; padding-bottom: 4px; }
div.content-section table.with-vertical-padding th{ padding-top: 4px; padding-bottom: 4px; }
/* END CONTENT SECTION TABLE */

/* TWELVE COLUMN GRID */
div.col-width-one{ 		vertical-align: top; display: inline-block; width: 8.33%; }
div.col-width-two{ 		vertical-align: top; display: inline-block; width: 16.66%; }
div.col-width-three{ 	vertical-align: top; display: inline-block; width: 24.99%; }
div.col-width-four{ 	vertical-align: top; display: inline-block; width: 33.32%; }
div.col-width-five{ 	vertical-align: top; display: inline-block; width: 41.65%; }
div.col-width-six{ 		vertical-align: top; display: inline-block; width: 49.98%; }
div.col-width-seven{ 	vertical-align: top; display: inline-block; width: 58.31%; }
div.col-width-eight{ 	vertical-align: top; display: inline-block; width: 66.64%; }
div.col-width-nine{ 	vertical-align: top; display: inline-block; width: 75%; }
div.col-width-max-50pc{ max-width: 50%; }
/* END TWELVE COLUMN GRID */

/* COLUMN ALIGNMENT */
.col-right{ text-align: right; }
.col-left{ text-align: left; }
.col-middle{ text-align: center; }

div.divider { width: 96px; height: 1px; border-bottom: 2px solid #333; margin: 0 auto; margin-bottom: 16px; }
.col-right div.divider{ margin: 0px 0px 16px auto; }
.col-left div.divider{ margin: 0px auto 16px 0px; }

.column-inner{ padding: 0 12px 0 12px; }
.with-vertical-padding{ padding-top: 12px; padding-bottom: 12px; }

div.content-section h1, div.content-section h2, div.content-section h3, div.content-section h4{ margin: 0 0 16px 0; }

/* STANDARD COPY LINKS */
div.content-section p a, div.content-section li a, div.content-section h3 a{ border-bottom: 1px dotted #905; font-weight: 400; text-decoration: none; color: #905; border-bottom-width: 0; }

div.content-section p a:hover,
div.content-section p a:focus, 
div.content-section li a:hover,
div.content-section li a:focus,
div.content-section h3 a:hover,
div.content-section h3 a:focus
{ 
	background-color: rgb(255,232,0); 
	border-bottom-color: rgb(255,232,0); 
	color: black; 
}
div.content-section p strong a, div.content-section li strong a{ font-weight: 700; }
main div.content-section p a, main div.content-section li a, main div.content-section h3 a{ border-bottom-width: 1px; }

.bg-dark div.content-section p a:not(.box-link), main .bg-dark div.content-section ul:not(.page-menu,.atoz-menu) li a:not(.tab){ color: #f7fe88; border-bottom-color: #f7fe88; }
.bg-dark div.content-section p a:hover, main .bg-dark div.content-section ul:not(.page-menu) li a:hover{ color: black; }
/* END STANDARD COPY LINKS */

img.round{ border-radius: 50%; }

/* PROFILE */
a.profile-link span{ border: 5px solid white; display: inline-block; background-color: rgba(0,0,0,0.2); color: white; border-radius: 50%; width: 96px; line-height: 96px; font-weight: bold; box-shadow: 0px 2px 5px rgba(0,0,0,0.1); }
a.profile-link:hover span{ border-color: rgb(0,48,64); }
/* END PROFILE */

/* BREADCRUMB */
div#breadcrumb{ border-bottom: 0px solid #333;  }
div#breadcrumb ul{ margin: 0px 0px 0px 24px; padding: 0; }
div#breadcrumb ul li{ display: inline-block; border-right: 0px solid #eee; background-color: #333; background-color: transparent; color: white; font-size: smaller; }
div#breadcrumb ul li a{ border-bottom: 0px; display: inline-block; min-height: 24px; line-height: 24px; padding: 0px 0px 0px 24px; color: white; text-decoration: none; background-image: url('/img/icon/arrow-right-24x24-dark.png'); background-position: center left; background-repeat: no-repeat; }
div#breadcrumb ul li a:hover, div#breadcrumb ul li a:focus{ color: rgb(255,232,0); background-color: transparent; }
/* END BREADCRUMB */

/* TAB MENU */
div.tabmenu ul{ margin: 0; padding: 0; font-weight: 300; }
div.tabmenu ul li{ display: inline-block; border-right: 1px solid transparent; }
div.tabmenu ul li a{ border-top: 8px solid transparent; display: inline-block; min-height: 40px; line-height: 40px; padding: 0 16px 0 16px; color: white; text-decoration: none; border-bottom: 8px solid transparent; }
div.tabmenu ul li span{ min-height: 48px; line-height: 48px; padding: 0 16px 0 16px; }
div.tabmenu a.tab{ background-color: rgb(218,218,218); color: black; font-weight: 700; }
div.tabmenu a.active{ background-color: white; color: black; border-top-color: purple; }
div.tabmenu ul li a:hover:not(.active){ background-color: rgb(218,218,218); color: black; border-top-color: yellow; border-bottom-color: rgb(218,218,218); }
div.tabmenu ul li a.active:hover{ background-color: white; border-bottom-color: white; cursor: default;  }
/* END TAB MENU */

/* FOOTER */
div.footer-container{ background-color: #333; color: white; min-height: 800px; }
div.footer{ width: 100%; max-width: 1280px; margin: 0 auto;  }
div.footer-inner{ }
ul.footer-links{ list-style: none; padding: 0; }

footer div.content-section p a, footer div.content-section h3 a{ color: rgb(162,229,210); }
footer div.content-section h3{ font-size: 16px; font-family: Roboto; font-weight: 400; }
footer div.content-section ul.footer-links li a{ color: #929394; }
footer div.content-section h3 a:hover, footer div.content-section p a:hover, footer div.content-section ul.footer-links li a:hover{ color: #ffdd00; background-color: transparent; }
footer div.content-section h3 a:focus, footer div.content-section p a:focus, footer div.content-section ul.footer-links li a:focus{ color: #ffdd00; background-color: transparent; }

footer div.content-section { background-image: url(https://cdn.harper-adams.ac.uk/image/ssff/icon/crop-yellow.svg); background-repeat: no-repeat; background-position: 100% 0%; background-size: 300px 300px; }

footer a img#footer-logo{ border-bottom: 1px solid transparent; }
footer a:hover img#footer-logo, footer a:focus img#footer-logo{ border-bottom: 1px solid #ffdd00; }

div.icon{ display: inline-block; padding: 0px 12px 0px 12px; }
div.icon img{ width: 48px; border-radius: 50%; }
.footer-break{ border-top: 1px solid #333; }
div.social-icons a{ display: inline-block; margin: 12px; }
div.social-icons a img.icon{ margin: 0px; display: block; }
div.social-icons a:hover img.icon-twitter, div.social-icons a:focus img.icon-twitter{ background-color: #2AA9E0; border-color: #2AA9E0; }
div.social-icons a:hover img.icon-facebook, div.social-icons a:focus img.icon-facebook{ background-color: #3B5998; border-color: #3B5998; }
div.social-icons a:hover img.icon-vimeo, div.social-icons a:focus img.icon-vimeo{ background-color: #4EBBFF; border-color: #4EBBFF; }
div.social-icons a:hover img.icon-instagram, div.social-icons a:focus img.icon-instagram{ background-color: #c13584; border-color: #c13584; }
div.social-icons a:hover img.icon-linkedin, div.social-icons a:focus img.icon-linkedin{ background-color: #0077b5; border-color: #0077b5; }
div.social-icons a:hover img.icon-youtube, div.social-icons a:focus img.icon-youtube{ background-color: #ff0000; border-color: #ff0000; }

div#cookies{ position: fixed; bottom: 0px; width: 100%; }
/* END FOOTER */

/* PROFILE LINK */
div.content-section p a.profile-link{ border-bottom: 0px; color: black; display: inline-block; }
div.content-section p a.profile-link img{ border: 5px solid transparent; border-radius: 50%; transition: all 0.3s ease; box-shadow: 0px 2px 5px rgba(0,0,0,0.1); }
div.content-section p a.profile-link:hover{ background-color: transparent; }
div.content-section p a.profile-link:hover img{ border: 5px solid rgb(0,48,64); transition: all 0.3s ease; }

.bg-dark div.content-section p a.profile-link:hover { color: rgb(255,232,0); }
.bg-dark div.content-section p a.profile-link:hover img{ border-color: rgb(255,232,0); }
/* END PROFILE LINK */

/* FORM FILTER */
span.filter{ text-wrap: none; margin-left: 2px; margin-right: 2px; margin-bottom: 4px; padding: 8px 16px 8px 16px; border-radius: 16px; /*line-height: 32px;*/ font-size: small; display: inline-block; background-color: white; }
.bg-white span.filter{ background-color: #eee; }
div.content-section a.filter{ border-bottom: 0; }
div.content-section a.filter:hover{ background-color: transparent; }
div.content-section a.filter:hover span.filter{ background-color: rgb(255,232,0);  }

span.filter.with-remove{ padding-right: 0px; }
span.filter img {
    float: right;
    height: 16px;
    margin-top: 0px;
    cursor: pointer;
    background-color: #ddd;
    border-radius: 50%;
    margin-right: 8px;
    margin-left: 8px;
}
/* END FORM FILTER */

/* OVERLAYS AND GRADIENTS */
.dark30pc{ background-color: rgba(0,0,0,0.3); color: white; }
.dark50pc{ background-color: rgba(0,0,0,0.5); color: white; }
.dark75pc{ background-color: rgba(0,0,0,0.75); color: white; }
.dark90pc{ background-color: rgba(0,0,0,0.9); color: white; }
.dark-gradient
{ /*Safari 5.1-6*/ /*Opera 11.1-12*/ /*Fx 3.6-15*/
	background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0.8)); /*Standard*/ 
}	
.darkgrey-gradient
{ /*Safari 5.1-6*/
	background: -o-linear-gradientrgba(27,27,27,0),rgba(27,27,27,0),rgba(27,27,27,1)); /*Opera 11.1-12*/ /*Fx 3.6-15*/
	background: linear-gradient(rgba(27,27,27,0),rgba(27,27,27,0),rgba(27,27,27,1)); /*Standard*/ 
}
.gradient
{ /*Safari 5.1-6*/ /*Opera 11.1-12*/ /*Fx 3.6-15*/
	background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.8)); /*Standard*/ 
}

.horizontal-gradient
{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&1+0,0+30,0+80,1+100 */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0) 80%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=1 ); /* IE6-9 */
}
/* END OVERLAYS AND GRADIENTS */

/* BOX LINKS */
div.content-section a.box-link{ font-size: 1.3rem; cursor: pointer; line-height: 36px; border: 2px solid #2c5234; text-transform: uppercase; padding: 8px 16px; white-space: nowrap; background-color: transparent; color: #2c5234; }
div.content-section p a.box-link:hover,
div.content-section p a.box-link:focus,
div.content-section table a.box-link:hover,
div.content-section table a.box-link:focus
{ 
	background-color: #2c5234; 
	color: white; 
	border-bottom-color: #2c5234; 
}

div.content-section-container.bg-dark div.content-section a.box-link{ background-color: transparent; border-color: white; color: white; }
div.content-section-container.bg-dark div.content-section p a.box-link:hover, 
div.content-section-container.bg-dark div.content-section p a.box-link:focus,
div.content-section-container.bg-dark div.content-section table a.box-link:hover, 
div.content-section-container.bg-dark div.content-section table a.box-link:focus
{ 
	background-color: white; 
	color: #2c5234; 
	border-bottom-color:white;
}
/* END BOX LINKS */

/* FELX GRID */
.flex-wrapper 
{
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-flow: row wrap;
	-webkit-flex-flow: row wrap;
	        flex-flow: row wrap;
	-ms-flex-align: stretch;
	-webkit-align-items: stretch;
	        align-items: stretch;
  
	-ms-flex-line-pack: stretch;
	-webkit-align-content: stretch;
	        align-content: stretch;
	max-width: 100%;  
}
.flex-wrapper-center 
{
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-direction: row; /* works with row or column */
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
}

/* FELX BOX PERCENTAGES */
/* MIN-WIDTH DOESN'T WORK ON MOBILE!! */
.flex-width-one { -ms-flex: 1 0px; -webkit-flex: 1 0px; flex: 1 0px; -ms-flex-preferred-size: 8.333%; -webkit-flex-basis: 8.333%; flex-basis: 8.333%; }
.flex-width-two { -ms-flex: 2 0px; -webkit-flex: 2 0px; flex: 2 0px; -ms-flex-preferred-size: 16.666%; -webkit-flex-basis: 16.666%; flex-basis: 16.666%; }
.flex-width-three { -ms-flex: 3 0px; -webkit-flex: 3 0px; flex: 3 0px; -ms-flex-preferred-size: 25%; -webkit-flex-basis: 25%; flex-basis: 25%; }
.flex-width-four { -ms-flex: 4 0px; -webkit-flex: 4 0px; flex: 4 0px; -ms-flex-preferred-size: 33.333%; -webkit-flex-basis: 33.333%; flex-basis: 33.333%;  }
.flex-width-five { -ms-flex: 5 0px; -webkit-flex: 5 0px; flex: 5 0px; -ms-flex-preferred-size: 41.666%; -webkit-flex-basis: 41.666%; flex-basis: 41.666%;  }
.flex-width-six { -ms-flex: 6 0px; -webkit-flex: 6 0px; flex: 6 0px; -ms-flex-preferred-size: 50%; -webkit-flex-basis: 50%; flex-basis: 50%;  }
.flex-width-seven { -ms-flex: 7 0px; -webkit-flex: 7 0px; flex: 7 0px; -ms-flex-preferred-size: 58.333%; -webkit-flex-basis: 58.333%; flex-basis: 58.333%;  }
.flex-width-eight { -ms-flex: 8 0px; -webkit-flex: 8 0px; flex: 8 0px; -ms-flex-preferred-size: 66.666%; -webkit-flex-basis: 66.666%; flex-basis: 66.666%;  }
.flex-width-nine { -ms-flex: 9 0px; -webkit-flex: 9 0px; flex: 9 0px; -ms-flex-preferred-size: 75%; -webkit-flex-basis: 75%; flex-basis: 75%;  }
.flex-width-100-fifty { -ms-flex: 12 0px; -webkit-flex: 12 0px; flex: 12 0px; -ms-flex-preferred-size: 100%; -webkit-flex-basis: 100%; flex-basis: 100%;  }
.flex-width-50-25-50 { -ms-flex: 6 0px; -webkit-flex: 6 0px; flex: 6 0px; -ms-flex-preferred-size: 50%; -webkit-flex-basis: 50%; flex-basis: 50%;  }
.flex-width-100-25-50 { -ms-flex: 12 0px; -webkit-flex: 12 0px; flex: 12 0px; -ms-flex-preferred-size: 100%; -webkit-flex-basis: 100%; flex-basis: 100%;  }
.flex-width-6-4-3-2 { -ms-flex: 2 0px; -webkit-flex: 2 0px; flex: 2 0px; -ms-flex-preferred-size: 16.666%; -webkit-flex-basis: 16.666%; flex-basis: 16.666%; }

/* default is a twelve column grid */
.col-width-one{ width: 8.333%; }
.col-width-two{ width: 16.666%; }
.col-width-three{ width: 25%; }
.col-width-four{ width: 33.333%; }
.col-width-five{ width: 41.666%; }
.col-width-six{ width: 50%; }
.col-width-seven{ width: 58.333%; }
.col-width-eight{ width: 66.666%; }
.col-width-nine{ width: 75%; }

.fixed-width{ display: inline-block; vertical-align: top; width: 250px; }
.fixed-width-25-50{ display: inline-block; vertical-align: top; width: 25%; }
.fixed-width-33-50{ display: inline-block; vertical-align: top; width: 33.3%; }
.fixed-width-50-100{ display: inline-block; vertical-align: top; width: 50%; }

/* ARTICLE */
article{ background-color: transparent; overflow: visible; transition: all 0.25s ease; position: relative; margin: 0px 0px 24px 0px; }
article span{ font-size: 1.6rem; display: block; }
article img{ max-width: 100%; width: 100%; }
article span.posted{ position: absolute; bottom: 24px; font-size: small; padding: 12px 24px 0px 24px; } 
article a
{ 
	position: relative; 
	margin: 0px 12px 0px 12px; 
	text-decoration: none; 
	color: black; 
	display: block; 
	min-height: 100%; 
	height: 100%;
	background-color: white; 
	transition: all 0.3s ease; 
	overflow: hidden; 
	border-radius: 0px; 
}
article a:hover{ transition: all 0.3s ease; }

article span.headline, article h2.headline, article h3.headline{ padding: 24px 24px 12px 24px; font-size: 2rem; margin-bottom: 0px; }

article a.bg-dark:visited span.headline{ color: white; }

article span.small{ font-size: small; font-weight: 300; }
article span.divider{ width: 96px; height: 1px; border-bottom: 1px solid #ccc; padding-bottom: 16px; }
article span.abstract{ font-weight: 300; padding: 0px 24px 48px 24px; }
article span.abstract strong{ font-weight: 700; }
article.edge-to-edge span.headline, article.edge-to-edge h2.headline, article.edge-to-edge h3.headline, article.edge-to-edge span.abstract{ padding-left: 0px; padding-right: 0px; }
article.edge-to-edge span.more-info{ margin-right: 0px; }
article span.pad{ padding: 24px 24px 0px 24px; }

article span.fifty50, article div.fifty50{ position: relative; display: inline-block; width: 50%; vertical-align: top; height: 100%; }

article span.more-info{ overflow: hidden; position: absolute; bottom: 0px; right: 0px; margin: 0px 24px 24px 24px; cursor: pointer; text-decoration: none; text-transform: uppercase; font-size: x-small; }

article span.more-info span{ min-width: 12px; transition: all 0.5s ease-out; border-radius: 50%; background-color: inherit;  position: relative; line-height: 24px; border: 1px solid #333; padding: 3px 9px 3px 9px; display: inline-block; }
article span.more-info span.reveal{ left: 150px; border-right: 0px; }
article a:hover span.more-info span.reveal{ left: 0px;  }
article.dark span.more-info span{ border-color: white; }

article a:hover span.more-info span{ border-radius: 0%; }
article img{ transition: all 0.5s ease-out; display: block; }

article a:hover img{ transition: all 0.5s ease-out; }

article a span.fifty50.cover-img-scroll{ transition: all 0.3s ease-out; }
article a:hover span.fifty50.cover-img-scroll{ opacity: 0.5; }

article a:visited span.headline{ color: rgb(0, 47, 108); }
article.bg-dark a:visited span.headline{ color: rgb(255,232,0); }

/* add focus styles for keyboard users */
article a:focus span.headline{ color: black; }
article a:focus { background-color: rgb(255,232,0); color: black; }
article a:focus span.fifty50, article a:focus div.fifty50 { background-color: rgb(255,232,0); transition: all 0.5s ease; }
article a:focus span.divider{ border-bottom-color: black; }

.bg-dark div.content-section p a:focus { color: black; }

article.col-width{ display: inline-block; vertical-align: top; }
article span.section-container{ position: relative; }
article span.section{ white-space: nowrap; position: absolute; top: -32px; line-height: 32px; background-color: rgb(255,232,0); color: black; font-weight: bold; padding-left: 24px; padding-right: 24px; font-size: small; }
article span.padding{ height: 32px; width: 100%; }

article.no-more-info span.abstract{ padding-bottom: 24px; }

.flex-wrapper.rounded article, 
.flex-wrapper.rounded article a, 
.flex-wrapper.rounded article div.flex-inner,
div.selector.rounded article, 
div.selector.rounded article a,
div.selector.rounded article div.flex-inner
{ 
	border-radius: 8px; 
}
div.selector.rounded article span.section { border-top-right-radius: 4px; }
div.selector.rounded article .no-tile-image span.section { border-top-right-radius: 0px; border-bottom-right-radius: 4px; }

.flex-wrapper.with-shadow article div.flex-inner {
    -webkit-box-shadow: 0px 3px 5px 2px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 3px 5px 2px rgba(0,0,0,0.1);
    box-shadow: 0px 3px 5px 2px rgba(0,0,0,0.1);
}

div.selector.dark-mode article div.flex-inner{ background-color: transparent; }
div.selector.dark-mode article a { border: 2px solid white; background-color: rgb(29,37,45); background-color: rgba(0,0,0,0.15); color: white; }
div.selector.dark-mode article a:hover { border-color: rgb(255,232,0); }
div.selector.dark-mode.rounded article:hover .flex-inner { box-shadow: 0px 0px 10px rgba(255,232,0,0.5); }
div.selector.dark-mode article a:focus { background-color: rgb(255,232,0); color: black; }
div.selector.dark-mode article a:visited span.headline { color: white; }
div.selector.dark-mode article a:visited:focus span.headline { color: black; }

.shadow article a{ box-shadow: 0 5px 10px rgba(0,0,0,0.25); }

/* FLEX-INNER FIXES A PROBLEM WITH MOBILE DEVICES IGNORING THE HEIGHT OF THE FLEX CONTAINER - FORCE THE INNER TO BE 100% HEIGHT OF CONTAINER */
.flex-inner{ position: absolute; bottom: 0px; left: 12px; min-height: 100%; min-width: calc(100% - 24px); background-color: white; }

/* END ARTICLE */

#facilities img{ max-width: 64px; }


/* QUICK LIST - used for popular news */
ul.quick-list{ list-style: none; padding: 0; margin: 0; margin-bottom: 24px; }
ul.quick-list li a div.img_block{ display: inline-block; width: 72px; height: 72px; overflow: hidden; margin-right: 12px; }
ul.quick-list li a div.headline_block{ display: inline-block; width: calc(100% - 84px); vertical-align: top; font-weight: bold; }
ul.quick-list li a img{ height: 72px; margin-left: -28px; }
ul.quick-list li a { font-size: small; display: block; border-bottom: 1px solid #ccc; padding-bottom: 8px; padding-top: 8px; color: black; }
ul.quick-list li a span{ font-weight: normal;  }
ul.quick-list li a:hover{ background-color: transparent; border-bottom-color: #ccc; }
ul.quick-list li a:hover img{ opacity: 0.5; }
/* END QUICK LIST */

div.content-section ol.menu li a{ color: black; text-decoration: none; font-weight: 300; transition: all 0.3s ease; border-bottom: 0px; }
div.content-section ol.menu li a:hover{ background-color: #f7fe88; transition: all 0.3s ease; }

time{ font-variant: small-caps; display: inline; }

.small-heading{ text-transform: uppercase; font-size: 14px; letter-spacing: 2px; }

#more-news{ transition: all 1s ease; }

.image-gallery img{ max-width: 100%; }

/* ACCORDIAN */
/* Use flex-box to position items */
.accordian-container{ border-bottom: 1px solid black; transition: all 0.3s ease; margin-bottom: 24px; }
.accordian-container.accordian-centre { margin-bottom: 0px; border-bottom-width: 0; }
.accordian-section{ border-top: 1px solid black; }
.accordian-header{ padding: 12px 0px 12px 0px; clear: left; cursor: pointer; font-size: 1.25em; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-flow: row wrap; -webkit-flex-flow: row wrap; flex-flow: row wrap; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; -ms-flex-line-pack: stretch; -webkit-align-content: stretch; align-content: stretch;
	max-width: 100%; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; }
.accordian-header div{ -ms-flex: 1; -webkit-flex: 1; flex: 1; }
.accordian-header div.openclose{ -ms-flex: 0 0 32px; -webkit-flex: 0 0 32px; flex: 0 0 32px; }	
.accordian-header img.toggle{ float: left; vertical-align: middle; width: 32px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); transition: all 0.3s ease; }
.accordian-section.reveal > .accordian-header img.toggle{ -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); transition: all 0.3s ease; }
.accordian-title:hover{ cursor: pointer; color: rgb(255,232,0);  }
.accordian-section > .accordian-header h2, .accordian-section > .accordian-header h3{ font-size: 1em; margin-bottom: 0; }

.bg-dark .accordian-container, .bg-dark .accordian-section{ border-color: white; }
.bg-dark .accordian-header, .bg-dark .accordian-header h2{ color: white; }

/* jQuery solution */
.accordian-body{ padding-left: 32px; clear: left; }
/* CSS transitions solution */
/* full width centre accordian */
.accordian-centre > .accordian-section > .accordian-header{ max-width: 1280px; margin: 0 auto; font-size: 2em; text-align: left; padding-top: 24px; padding-bottom: 24px; }
.accordian-centre > .accordian-section > .accordian-header div{  background: url(/img/icon/icon-arrow-down.png) center right no-repeat; padding-left: 48px; padding-right: 48px; }
.accordian-centre > .accordian-section > .accordian-header h2{ font-size: 3.2rem; margin-bottom: 0; }
.accordian-centre > .reveal > .accordian-header div{ background: url(/img/icon/icon-arrow-up.png) center right no-repeat; }
.accordian-centre > .accordian-section > .accordian-body{ padding-left: 0px; }

/* END ACCORDIAN */

/* PAGE MENU */
ul.page-menu{ list-style: none; padding-left: 0; margin: 0; margin-bottom: 24px; }
ul.page-menu ul{ list-style: none; padding-left: 24px; margin-bottom: 0px; }
ul.page-menu li{ -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid-column; }
div.content-section ul.page-menu li a
{ 
	display: block; 
	font-size: 1.9rem; 
	padding: 4px 0px 4px 0px; 
	background-image: url('/img/icon/arrow-right-24x24.png'); 
	background-position: center right; 
	background-repeat: no-repeat; 
	padding-right: 32px; 
	border-bottom: 1px dotted #2c5234;
    color: #2c5234;
	font-weight: 700;
}
div.content-section ul.page-menu li a:hover, 
div.content-section ul.page-menu li a:focus
{ 
	background-color: transparent; 
	color: black; 
	border-bottom: 1px solid black; 
}
.bg-dark div.content-section ul.page-menu li a{ color: white; border-color: white; background-image: url('/img/icon/arrow-right-24x24-dark.png'); }

.bg-dark div.content-section ul.page-menu li a:hover, 
.bg-dark div.content-section ul.page-menu li a:focus {
    background-color: transparent;
    color: #ffdd00;
	border-bottom-color: #ffdd00;
}
/* END PAGE MENU */

/* CONTENT COLUMNS */
.col3{ -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-gap: 32px; -moz-column-gap: 32px; column-gap: 32px; }
.col2{ -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 32px; -moz-column-gap: 32px; column-gap: 32px; }
/* END CONTENT COLUMNS */

/* PAGE SEARCH BAR */
div.search-bar{ margin: 0px 0px 0px 24px; }
div.search-bar input
{ 
	margin-right: 0px; 
	width: 100%; 
	-webkit-appearance: none; -moz-appearance: none; 
	color: white; 
	border: 0; 
	min-height: 48px; 
	font-size: x-large; 
	padding: 0px; 
}
div.search-bar .standard input[type="text"]{ border-bottom-color: white !important; }
#mobile-menu div.search-bar .standard input[type="text"]{ padding-top: 0; }
div.search-bar .standard input[type="submit"]{ border: 0; }
#mobile-menu div.search-bar .standard label.input-label{ top: 6px; left: 12px; }
#mobile-menu .standard input:focus+label.input-label, #mobile-menu .standard input.focus+label.input-label{ font-size: 10px; font-weight: normal; top: 0px; }

div.page-search{ padding: 12px 12px 12px 12px; }
div.page-search div.search-bar{ margin: 0px; }
div.page-search div.search-bar input{ font-size: large; padding-left: 12px; color: black; background-color: white; width: calc(100% - 60px); }
div.page-search div.search-bar input[type=button], div.page-search div.search-bar input[type=submit]
{ 
	height: 48px; 
	width: 48px; 
	float: right; 
	font-size: 12px; 
	font-weight: bold; 
	background: #DE6E17; 
	color: #ffffff; 
	background: #DE6E17 url('/img/icon/white/icon-search.svg') no-repeat; background-position-x: 0%; background-position-y: 0%; 
	cursor: pointer; 
}
div.page-search div.search-bar input[type="button"]:focus, div.page-search div.search-bar input[type="submit"]:focus { background: rgb(255,232,0) url('/img/icon/icon-mobile-search.png') no-repeat; }

/* HEADER SEARCH BAR */
.blue div.search-bar .standard input[type="text"]{ border-bottom-color: rgb(1,33,105) !important; color: rgb(1,33,105); /*background-image: url('/img/icon/blue/icon-search.svg');*/ }
.blue img.icon { border-color: rgb(1,33,105); }

@media screen and (max-width: 640px) 
{
	div.search-bar{ margin: 0px 12px 0px 12px; }
}
/* END PAGE SEARCH BAR */

/* A TO Z SELECTOR */
ul.atoz-menu{ list-style: none; padding: 0; margin: 0; text-align: center; }
ul.atoz-menu li{ display: inline-block; padding: 2px 4px 2px 4px; }
div.content-section ul.atoz-menu li a{ cursor: pointer; display: block; border: 1px solid rgba(0,0,0,0.25); color: black; border-radius: 50%; width: 46px; line-height: 46px; text-align: center; vertical-align: middle; transition: all 0.3s ease; }
ul.atoz-menu li span{ display: block; width: 48px; line-height: 46px; text-align: center; vertical-align: middle; opacity: 0.5; }
ul.atoz-menu li a:hover, ul.atoz-menu li a:focus{ transition: all 0.3s ease; border-bottom-color: rgba(0,0,0,0.25); border-radius: 0%; }
ul.atoz-menu li a.active{ background-color: #ffdd00; }

main .bg-dark div.content-section ul.atoz-menu li a{ border-color: rgba(255,255,255,0.75); color: white; }
main .bg-dark div.content-section ul.atoz-menu li a:hover,
main .bg-dark div.content-section ul.atoz-menu li a:focus
{ 
	color: black; border-color: #ffdd00; 
}
/* END A TO Z SELECTOR */

.full-width{ width: 100%; display: block; margin-right: 0px; }

/* STANDARD FORM */
.standard select::-ms-expand { display: none; } /* hide arrow on IE */

.standard label{ font-size: x-large; transition: all 0.3s ease; color: black; }
.standard input{ border-radius: 0; margin-right: 12px; }
.standard input[type="text"], .standard input[type="password"]
{ 
	-webkit-appearance: none; -moz-appearance: none; 
	background-color: transparent; 
	margin-bottom: 24px; 
	border: 0;
	border-bottom: 1px solid black !important; 
	min-height: 48px; 
	font-size: x-large; 
	padding: 12px 0px 6px 12px; 
	margin-top: 0px; 
}
.standard input[type="submit"]
{ 
	transition: all 0.3s ease; 
	-webkit-appearance: none; -moz-appearance: none; 
	border: 2px solid black; 
	text-align: center; 
	width: 100%; 
	margin-bottom: 12px; 
	text-transform: uppercase; 
	font-size: small; 
	cursor: pointer; 
	padding-top: 12px; 
	padding-bottom: 12px; 
	background-color: transparent; 
}
.standard input[type="button"]
{ 
	-webkit-appearance: none; -moz-appearance: none; 
	border: 2px solid black; 
	text-align: center; 
	margin-bottom: 24px; 
	text-transform: uppercase; 
	font-size: small; 
	cursor: pointer; 
	padding: 12px 12px 12px 12px; 
	background-color: transparent; 
}
.standard input[type="submit"]:hover{ background-color: rgba(0,0,0,0.25); transition: all 0.3s ease; }

.standard select
{ 
	margin-bottom: 24px; 
	min-height: 48px; 
	background-color: transparent; 
	font-size: x-large; 
	padding-left: 0px; 
	padding-right: 48px; 
	border-top: 0 !important; 
	border-right: 0 !important; 
	border-bottom: 1px solid black; 
	border-left: 1px solid black; 
}
.standard select option{ color: black; font-size: medium; min-height: 48px; }
.standard input[type="text"].width50{ width: 50%; }

.select-arrow{ background: url(/img/icon/icon-arrow-down.png) right top no-repeat; }

/* change colours for dark background */
.bg-dark .standard label{ color: rgb(162,229,210); }
.bg-dark .standard input[type="text"], .bg-dark .standard input[type="password"], .bg-dark .standard select{ color: white; border-color: white !important; }
.bg-dark .standard input[type="submit"], .bg-dark .standard input[type="button"]{ border-color: white; color: white; }
.bg-dark .select-arrow{ background: url(/img/icon/icon-arrow-down-white.png) right top no-repeat; }
.bg-dark .standard input[type="submit"]:focus, .bg-dark .standard input[type="button"]:focus{ border-color: yellow; color: yellow; }

.standard label{ padding-left: 12px; }
.standard input[type="text"], .standard input[type="password"]{ border-left: 1px solid black; padding-left: 12px; }
.standard select{ padding-left: 12px; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; margin-right: 12px; }
.standard textarea{ border: 1px solid black; border-radius: 0; width: calc(100% - 6px); padding: 2px; }

div.form-row{ position: relative; }
div.inline{ display: inline-block; }

.standard label.input-label{ display: block; position: absolute; top: 12px; cursor: text; }
.standard input:focus+label.input-label, .standard input.focus+label.input-label{ text-transform: uppercase; font-size: small; font-weight: normal; top: 0px; }
.standard label.select-label{ display: block; position: relative; text-transform: uppercase; font-size: small; font-weight: normal; top: 0px; }

.white .search-bar label.input-label{ color: white; }
.blue .search-bar label.input-label{ color: rgb(1,33,105); }

/* no padding */
.standard label{ padding-left: 0px; }
.standard select{ padding-left: 0px; }
.standard input[type="text"], .standard input[type="password"]{ border-left: 0px solid black; padding-left: 0px; }
.standard input[type="text"], .standard input[type="password"]{ min-height: 48px; padding: 6px 0px 0px 0px; }
.standard select{ border-left: 0px solid black !important; }

.standard select.date{ width: 25%; margin-right: 12px; }

.standard input.full-width{ width: 100%; margin-right: 0px; }
.standard input.with-description{ margin-bottom: 0px; }
.standard select.with-description{ margin-bottom: 0px; }

/* radio buttons */
ul.radio-buttons{ list-style: none; margin: 0px; padding: 0px; }
ul.radio-buttons li{
	display: block;
	position: relative;
	float: left;
	width: 100%;
	min-height: 29px;
	margin-bottom: 8px;
}
ul.radio-buttons li input[type=radio]{ position: absolute; visibility: hidden; }

ul.radio-buttons li label{
	display: block;
	position: relative;
	font-weight: 300;
	font-size: large;
	padding: 0px 0px 0px 48px;
	margin: 0px;
	line-height: 29px;
	z-index: 9;
	cursor: pointer;
	-webkit-transition: all 0.25s linear;
}

ul.radio-buttons li:hover label{
	color: #333;
}

ul li .check{
	display: block;
	position: absolute;
	border: 4px solid #AAAAAA;
	border-radius: 100%;
	height: 21px;
	width: 21px;
	top: 0px;
	left: 0px;
	z-index: 5;
	transition: border .25s linear;
	-webkit-transition: border .25s linear;
}

ul.radio-buttons li:hover .check { border-color: #333; }

ul.radio-buttons li .check::before {
	display: block;
	position: absolute;
	content: '';
	border-radius: 100%;
	height: 15px;
	width: 15px;
	top: 3px;
	left: 3px;
	margin: auto;
	transition: background 0.25s linear;
	-webkit-transition: background 0.25s linear;
}

ul.radio-buttons input[type=radio]:checked ~ .check { border-color: rgb(87,44,95); }
ul.radio-buttons input[type=radio]:checked ~ .check::before{ background: rgb(87,44,95); }
ul.radio-buttons input[type=radio]:checked ~ label{ color: rgb(87,44,95); }

ul.radio-buttons.bg-dark input[type=radio]:checked ~ .check { border-color: rgb(255,232,0); }
ul.radio-buttons.bg-dark input[type=radio]:checked ~ .check::before{ background: rgb(255,232,0); }
ul.radio-buttons.bg-dark input[type=radio]:checked ~ label{ color: rgb(255,232,0); }

ul.radio-buttons.bg-dark li:hover .check { border-color: white; }
ul.radio-buttons.bg-dark li:hover label{ color: white; }

/* smaller radio button */
ul.radio-buttons.small li .check{
	height: 15px;
	width: 15px;
}

ul.radio-buttons.small li .check::before {
	height: 9px;
	width: 9px;
}

ul.radio-buttons.small li label{
	font-size: medium;
	padding: 0px 0px 0px 36px;
	line-height: 23px;
}
/* end radio buttons */

/* checkbox */
ul.check-box{ list-style: none; margin: 0px; padding: 0px; }
ul.check-box li{
	display: block;
	position: relative;
	float: left;
	width: 100%;
	min-height: 29px;
	margin-bottom: 8px;
}
ul.check-box li input[type=checkbox]{ position: absolute; visibility: hidden; }

ul.check-box li label{
	display: block;
	position: relative;
	font-weight: 300;
	font-size: large;
	padding: 0px 0px 0px 48px;
	margin: 0px;
	line-height: 29px;
	z-index: 9;
	cursor: pointer;
	-webkit-transition: all 0.25s linear;
}

ul.check-box li:hover label{
	color: #333;
}

ul.check-box li .check{
	display: block;
	position: absolute;
	border: 4px solid #AAAAAA;
	border-radius: 0;
	height: 21px;
	width: 21px;
	top: 0px;
	left: 0px;
	z-index: 5;
	transition: border .25s linear;
	-webkit-transition: border .25s linear;
}

ul.check-box li:hover .check { border-color: #333; }

ul.check-box li .check::before {
	display: block;
	position: absolute;
	content: '';
	border-radius: 0;
	height: 15px;
	width: 15px;
	top: 3px;
	left: 3px;
	margin: auto;
	transition: background 0.25s linear;
	-webkit-transition: background 0.25s linear;
}

ul.check-box input[type=checkbox]:checked ~ .check { border-color: rgb(87,44,95); }
ul.check-box input[type=checkbox]:checked ~ .check::before{ background: rgb(87,44,95); }
ul.check-box input[type=checkbox]:checked ~ label{ color: rgb(87,44,95); }

/* smaller check box */
ul.check-box li.small .check {
	height: 15px;
	width: 15px;
}

ul.check-box li.small label {
	font-size: medium;
	padding: 0px 0px 0px 36px;
	line-height: 23px;
}

ul.check-box li.small {
	min-height: 23px;
}

ul.check-box li.small .check::before {
	height: 9px;
	width: 9px;
}
/* end check box */
/* END STANDARD FORM */

/* SELECTOR PAGE */
div.selector{ position: relative; }
div.selector div.content-section-margin{ padding-bottom: 36px; }

div.section-selector{ position: fixed; right: 6px; z-index: 998; }
div.section-selector ul{ list-style: none; text-align: right; margin-top: 6px; }
div.section-selector li{ padding: 2px 4px 2px 4px; }
div.section-selector li a{ color: white; font-size: small; text-decoration: none; }
div.section-selector li a.section-title{ vertical-align: top; }
div.section-selector li a.circle{ width: 16px; height: 16px; border: 1px solid white; display: inline-block; border-radius: 50%; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); }
div.section-selector li a.circle.active{ background-color: rgba(255,255,255,0.75); }
div.section-selector li a.circle:hover{ background-color: rgb(255,232,0); }

div.next-selector{ position: absolute; bottom: 0px; text-align: center; width: 100%; z-index: 997; }

div.middle50{ min-height: 50vh; display: table; width: 100%; }
div.middle50 div.content-valign{ display: table-cell; vertical-align: middle; }
div.middle100{ min-height: 100vh; display: table; width: 100%; }
div.middle100 div.content-valign{ display: table-cell; vertical-align: middle; }
/* END SELECTOR PAGE */

/* hide an element from view, but still used by screen readers for accessibility */
.accessibility-hide
{ 
	position: absolute !important;
	left: -10000px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
} 

footer div.content-section h3.small-heading{ font-size: 14px; font-family: Roboto; color: white; font-weight: 700; }
h2.bg-dark{ color: white; }

div.page-heading a.section-nav{ font-size: 1.5em; background-color: rgb(255,232,0); color: black; padding: 4px 8px 4px 8px; font-weight: 700; transition: all 0.3s ease; font-family: 'Fira Sans', sans-serif; margin-bottom: 16px; }
div.page-heading a.section-nav:hover, div.page-heading a.section-nav:focus{ background-color: #2C2321; color: rgb(255,232,0); transition: all 0.3s ease; }

.standard input#search_input{ border-bottom-width: 0 !important; margin-bottom: 0px; }

/* ACCORDIAN dark background */
.bg-dark .accordian-header { color: white; }
.bg-dark .accordian-container{ border-bottom-color: white; }
.bg-dark .accordian-section{ border-top-color: white; }

.accordian-header .toggle.dark{ display: block; }
.accordian-header .toggle.light{ display: none; }
.bg-dark .accordian-header .toggle.dark{ display: none; }
.bg-dark .accordian-header .toggle.light{ display: block; }

div.accordian-header,  
div.accordian-header h2
{
	color: rgb(44, 82, 52); 
}
div.accordian-header:focus, 
div.accordian-header:hover, 
div.accordian-header:focus h2, 
div.accordian-header:hover h2
{ 
	color: black; 
}
.bg-dark div.accordian-header:focus, 
.bg-dark div.accordian-header:hover, 
.bg-dark div.accordian-header:focus h2, 
.bg-dark div.accordian-header:hover h2
{ 
	color: rgb(255,233,0); 
}

.awards{ padding-bottom: 12px; }
.awards img{ max-height: 150px; max-width: 100%; }

a.skip-main {
    left:-999px;
    position:absolute;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
    z-index:-999;
	color: white;
}
a.skip-main:focus, a.skip-main:active {
    color: black;
    background-color: rgb(255,232,0);
    left: auto;
    top: auto;
    width: 30%;
    height: auto;
    overflow:auto;
    margin: 10px 35%;
    padding:5px;
    text-align:center;
    font-size:1.2em;
    z-index:999;
	text-decoration: none;
	font-weight: bold;
}

div#cookies h2{ font-size: 20px; }

img#dashboard-header-logo{ width: 120px; padding: 12px 6px 6px 24px; }

.with-accordian .accordian-container { border-bottom-width: 0px; }
.with-accordian .accordian-section { border-top-width: 0px; border-bottom: 1px solid black; }
.with-accordian { border-top: 1px solid black; }
.with-accordian ~ .with-accordian { border-top: 0px solid black; }

ul.ToC li.H3{ margin-left: 32px; }

.bg-dark div.content-section table td, .bg-dark div.content-section table th{ background-color: transparent; color: white; }
.bg-dark div.content-section table tr:nth-child(odd) { background-color: transparent; }
.bg-dark div.content-section table td{ border-top: 1px solid white; }
.bg-dark div.content-section table a:not(.box-link){ color: #f7fe88; border-bottom-color: #f7fe88; }
.bg-dark div.content-section table a:hover{ color: black; }

p.outline-text{ border: 1px solid #ccc; background-color: #eee; border-radius: 8px; padding: 8px; text-align: center; }

/* mobile search bar */
div.page-search div.search-bar input{ border-radius: 24px 0px 0px 24px; }
div.page-search div.search-bar input[type=button], div.page-search div.search-bar input[type=submit] { border-radius: 0px 24px 24px 0px; }

#mobile-menu div.page-search div.search-bar input[type=text]{ background-color: rgba(255,255,255,0.2); color: white; background-image: none; }
#mobile-menu div.search-bar .standard label.input-label{ top: 0px; line-height: 48px; color: white; }
#mobile-menu .standard input:focus+label.input-label, #mobile-menu .standard input.focus+label.input-label{ /*top: -12px; line-height: normal;*/ opacity: 0; text-transform: none; font-size: large; }


#header-search div.search-bar .standard label.input-label{ left: 12px; top: 0px; line-height: 48px; }
#header-search .standard input:focus+label.input-label, #header-search .standard input.focus+label.input-label{ opacity: 0; text-transform: none; font-size: large; }
#header-search div.search-bar input[type=text]{ padding-top: 0px; border: 0 !important; }

.white #header-search div.search-bar input[type=text]{ background-color: rgba(255,255,255,0.2); color: white; }






div.nested-container{ margin: 0 auto; border-radius: 64px; border-top-left-radius: 32px; padding: 32px; }

a.skip-main {
    left:-999px;
    position:absolute;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
    z-index:-999;
	font-size: 2rem;
}
a.skip-main:focus, a.skip-main:active {
    color: black;
    background-color: rgb(255,232,0);
    left: auto;
    top: auto;
    width: 30%;
    height: auto;
    overflow:auto;
    margin: 10px 35%;
    padding:5px;
    text-align:center;
    font-size:2rem;
    z-index:999;
	text-decoration: none;
	font-weight: bold;
}

/* SLIDES CSS */
/* overrides the standard styles for slide style pages */
.content-section-container > .accordian-container { border-bottom-width: 0px; }
iframe{ max-width: 100%; }

div#cookies{ z-index: 9990; }
/*div.selector div.content-section-margin { padding-bottom: 64px;}*/
div.next-selector{ border-top: 0px solid rgba(255,255,255,0.2); border-bottom: 0px solid rgba(255,255,255,0.2); }
div.next-selector:hover{ background-color: rgba(0,0,0,0.2); transition: all 0.3s ease; -webkit-transition: all 0.3s ease; }

.narrow div.content-section{ max-width: 800px; }

.facilities img { max-width: 64px; }
main div.content-section-margin { padding-top: 36px; margin: 0px 24px 0px 24px; }

@-webkit-keyframes pulse 
{
	0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); }
	50% { -webkit-transform: translate(0, 10px); transform: translate(0, 10px); }
	100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 
}

@keyframes pulse 
{
	0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); }
	50% { -webkit-transform: translate(0, 10px); transform: translate(0, 10px); }
	100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 
}

.next-selector a{ display: block; -webkit-animation: pulse 2s infinite; animation: pulse 2s infinite; background: transparent url("/img/icon/icon-arrow-down-white.png") no-repeat center center; height: 48px; }
.bg-light div.next-selector{ border-top: 0px solid rgba(0,0,0,0.2);  border-bottom: 0px solid rgba(0,0,0,0.2);}
.bg-light .next-selector a{ background: transparent url("/img/icon/icon-arrow-down.png") no-repeat center center; }

/* DOT NAVIGATION */
div.section-selector { right: 0px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
div.section-selector ul{ padding: 0px; margin-top: 24px; }
div.section-selector li { padding: 0px 4px 0px 4px; }
div.section-selector li a{ position: relative; width: 20px; height: 20px; background-color: transparent; display: block; border-radius: 50%; box-shadow: none; box-sizing: border-box; }
div.section-selector li a.active{ border: 1px solid rgba(255,255,255,1); }
div.section-selector li a.active span{ opacity: 1; }
div.section-selector li a:hover span, div.section-selector li a:focus span { opacity: 1; width: 8px; height: 8px; }
div.section-selector li a span {
	position: absolute;
	display: block;
	top: 50%;
	left: 50%;
	width: 5px;
	height: 5px;
	background: white;
	border-radius: 50%;
	transform: translate3d(-50%, -50%, 0);
	opacity: 0.5;
	transition: 0.3s ease-in-out !important;
}
/* END DOT NAVIGATION */


/* loading icon https://smallenvelop.com/display-loading-icon-page-loads-completely/ */
.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con 
{
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 2147483001; /* to appear above Unibuddy popup */
	background: url(/img/preloader/Preloader_1.gif) center no-repeat #fff;
	text-align: center;
	padding-top: 64px;
}

/* VIDEO BACKGROUND */
/*.fullscreen_bg 
{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: 0;
  height: 100vh;
}

.fullscreen_bg_video 
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media (min-aspect-ratio: 16/9) {
  .fullscreen_bg_video {
    height: 300%;
    top: -100%;
  }
}

@media (max-aspect-ratio: 16/9) {
  .fullscreen_bg_video {
    width: 300%;
    left: -100%;
  }
}
*/
.fullscreen_bg 
{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: 0;
  height: 50vh;
  min-height: 448px;
}

.fullscreen_bg_video 
{
  position: absolute;
  top: 0;
  left: 0;
  min-height: 448px;
}

@media (min-aspect-ratio: 16/18) {
  .fullscreen_bg_video {
    width: 100%;
	height: auto;
    left: 0%;
  }
}

/* if viewport is exactly square then video height takes precedence */
@media (max-aspect-ratio: 16/18) {
  .fullscreen_bg_video {
    height: 100%;
	width: auto;
    top: 0%;
  }
}

@media (max-width: 767px) {
  /* video doesn't auto start on mobiles - so hide video */
  /*.fullscreen_bg_video { display: none; }*/
}

@media (max-width: 796px)
{
	.fullscreen_bg_video 
	{
		height: 100%;
		width: auto;
		top: 0%;
	}
}

@media (max-height: 448px) and (min-aspect-ratio: 16/9)
{
	.fullscreen_bg_video 
	{
		width: 100%;
		height: auto;
		top: 0%;
	}
}
@media (max-height: 448px) and (max-aspect-ratio: 16/9)
{
	.fullscreen_bg_video 
	{
		height: 100%;
		width: auto;
		top: 0%;
	}
}

@media (max-height: 448px) 
{
	.fullscreen_bg,
	.fullscreen_bg_video,
	div.middle50	
	{
	  min-height: 100vh !important;
	}
}
/* END VIDEO BACKGROUND */

.middle100{ position: relative; z-index: 1; height: 100vh; }
.middle50{ position: relative; z-index: 1; }

/* NOTIFICATION DIALOG */
#notification
{
	border-radius: 4px; position: fixed; z-index: 999; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50%; margin: 0 auto;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
}
#notification div.notification-container{ border-radius: 4px; }
#notification div.notification-inner{ padding: 24px; border-top: 8px solid rgb(83,207,186); border-radius: 4px; }
a.notification-btn { font-weight: bold; display: block; text-align: center; padding: 12px; border-radius: 21px; }
a.notification-btn:hover, a.notification-btn:focus{ background-color: rgb(255,232,0); }



img.rounded{ border-radius: 50%; }
div.img-container{ margin: 16px 16px 16px 16px; }

div.selector-container
{
	display: none;
	right: 0px;
    top: 0px;
    background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 100%);
	width: 28px;
	height: 100vh;
	position: fixed;
	z-index: 997;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
}
div.selector-container:hover
{
	background-color: rgba(0,0,0,0.3);
	border-left: 1px solid rgba(255,255,255,0.5);
}

div.selector div.bg-dark ul:not(.page-menu) li{ color: white; }
.bg-dark ul li a{ color: #f7fe88; border-bottom-color: #f7fe88; }
.bg-dark div.quote{ border-color: white; }

.left{ float: left; }

p.DT_profile{ clear: left; }
p.DT_profile img{ float: left; margin-right: 12px; margin-bottom: 12px; }
p.DT_profile span{ float: left; display: inline-block; }

p.outline-text{ margin-bottom: 8px; margin-top: 12px; clear: left; background-color: rgba(0,0,0,0.1); }
p.outline-text.dark-mode{ color: white; background-color: rgba(0,0,0,0.2); }

.fluid-gradient-heading {
	color: transparent !important;
    background: linear-gradient(
91.36deg, #ECA658 0%, #F391A6 13.02%, #E188C3 25.52%, #A58DE3 37.5%, #56ABEC 49.48%, #737EB7 63.02%, #C8638C 72.92%, #DD5D57 84.38%, #DF6C51 97.92%);
	background: rgb(34,193,195);
	background: linear-gradient(120deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);

    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -moz-background-clip: text;
    -webkit-animation: intro-gradient 10s infinite ease both;
    -moz-animation: intro-gradient 10s infinite ease both;
    animation: intro-gradient 10s infinite ease both;
}

/* fluid-gradient-header does not define a background colour/gradient - this must be set by another style */
.fluid-gradient-header {
	color: transparent !important;
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -moz-background-clip: text;
    -webkit-animation: intro-gradient 10s infinite ease both;
    -moz-animation: intro-gradient 10s infinite ease both;
    animation: intro-gradient 10s infinite ease both;
}

.gradient-rainbow{ background-image: linear-gradient(91.36deg, #ECA658 0%, #F391A6 13.02%, #E188C3 25.52%, #A58DE3 37.5%, #56ABEC 49.48%, #737EB7 63.02%, #C8638C 72.92%, #DD5D57 84.38%, #DF6C51 97.92%); }

@-webkit-keyframes intro-gradient {
    0%{background-position:0% 4%}
    50%{background-position:100% 97%}
    100%{background-position:0% 4%}
}
@-moz-keyframes intro-gradient {
    0%{background-position:0% 4%}
    50%{background-position:100% 97%}
    100%{background-position:0% 4%}
}
@keyframes intro-gradient { 
    0%{background-position:0% 4%}
    50%{background-position:100% 97%}
    100%{background-position:0% 4%}
}

.scaling-text{ font-size: 5vw; line-height: 1.2em; }
.scaling-header{ font-size: 6vw; line-height: 1.2em; }
.border-left-forest{ border-left: 8px solid rgb(44,82,52); }

.with-border-bottom{ border-bottom: 1px solid rgba(255,255,255,0.5); padding-bottom: 32px; }

.align-to-centre .flex-width-two, .align-to-centre .flex-width-three{ display: flex; align-items: center; justify-content: center; }
img.full-width{ width: auto; max-width: 100%; }
.no-move article:hover{ margin: 12px 0px 12px 0px; }
.bg-pos-75{ background-position: 75% 50%; }


/* SSFF STYLES */


.footer-break { border-top: 1px solid white; }

.bg-light { color: black; }

.left{ float: left; }

div.progress-bar-container.dark div.progress-bar { background-color: #ffdd00; }

img{ max-width: 100%; }

div.progress-bar-container{ background-color: transparent; }

/*.accordian-container { border-bottom-width: 0; }*/

span.calendar{ padding: 24px 24px 0px 24px; }
span.calendar span.day{ font-size: 48px; display: inline-block; vertical-align: text-top; line-height: 48px; font-family: 'Merriweather','Times New Roman',serif; }
span.calendar span.month{ display: inline-block; text-transform: uppercase; font-size: 80%; vertical-align: text-top; font-family: 'Hind Siliguri', sans-serif; }
span.calendar span.day_of_week{ text-transform: uppercase; vertical-align: text-top; font-weight: 300; padding-top: 8px; font-family: 'Hind Siliguri', sans-serif; letter-spacing: 2px; }

div.stickynav-container{ background-color: white; }
div.stickynav{ width: 100%; max-width: 1280px; margin: 0 auto; border-bottom: 1px solid black; }

div.stickynav-inner ul li a {
    color: black;
    border-bottom-color: white;
    border-top-color: white;
}

div.stickynav-inner ul li a:hover {
    border-bottom: 8px solid #5a417c;
    color: #5a417c;
}

div.stickynav-inner ul li a.active {
    border-top-color: white;
    border-bottom-color: black;
    color: black;
}

.sticky { top: 0px; padding-top: 6px; }



.anchor {
  display: block;
  height: 84px; /* height of menu bar + 16px so that content isn't hidden underneath bar */
  margin-top: -84px; /* height of menu bar + 16px */
  visibility: hidden;
}

div.page-heading h1, div.page-heading h2{ text-align: center; font-family: 'Merriweather','Times New Roman',serif; }
.dark50pc{ background-color: rgba(15,79,50,0.5); background-color: rgba(0,0,0,0.25); }



div.content-section p a, div.content-section li a, div.content-section h3 a { color: rgb(44,82,52); border-bottom: 1px dotted rgb(44,82,52); }

div.middle50{ height: 0px; height: 50vh; min-height: 448px; } /* fix a bug in Firefox where it ignores min-height */
div.middle80{ display: table; width: 100%; height: 0px; height: 80vh; min-height: 512px; } /* fix a bug in Firefox where it ignores min-height */

div.middle80 div.content-valign {
    display: table-cell;
    vertical-align: middle;
}

div.middle100{ height: 0px; height: 100vh; min-height: 600px; } /* fix a bug in Firefox where it ignores min-height */

div.bottom90{  display: table; width: 100%; height: 0px; height: 90vh; min-height: 512px; } /* fix a bug in Firefox where it ignores min-height */
div.bottom90 div.content-valign {
    display: table-cell;
    vertical-align: bottom;
}
div.bottom90 h1{ font-size: 3.5em; }

div.news div.content-section{ max-width: 960px; }





div.content-section-container.allow-overflow{ overflow: visible; }




main{ transition: 0.3s ease-in-out !important; }
main.menu-show
{ 
	-ms-transform: translateX(66.666%);
	transform: translateX(66.666%); 
	-webkit-transform: translateX(66.666%);
	
}

div.content-section p a:hover, div.content-section li a:hover, div.content-section p a:focus, div.content-section li a:focus{
    background-color: #ffdd00;
    border-bottom-color: #ffdd00;
    color: black;
}

div.padding-bottom-off{ padding-bottom: 0px; }



.bg-dark .accordian-centre > .accordian-section > .accordian-header div {
    background: url(https://www.harper-adams.ac.uk/img/icon/icon-arrow-down-white.png) center right no-repeat;
}

.bg-dark .accordian-centre > .reveal > .accordian-header div {
    background: url(https://www.harper-adams.ac.uk/img/icon/icon-arrow-up-white.png) center right no-repeat;
}

.bg-dark div.content-section ul{ color: white; }

.bg-dark div.content-section p a:not(.box-link), 
.bg-dark div.content-section li a:not(.box-link), 
.bg-dark div.content-section h3 a 
{
    color: #f7fe88;
    border-bottom-color: #f7fe88;
}

.bg-dark div.content-section p a:hover, 
.bg-dark div.content-section li a:hover, 
.bg-dark div.content-section p a:focus, 
.bg-dark div.content-section li a:focus 
{
    background-color: #ffdd00;
    border-bottom: 1px solid #ffdd00;
    color: black;
}

div.content-section table th, div.content-section table td{ font-size: 18px; }

div.content-section table th{ background-color: #2c5234; color: white; }
div.content-section table th h2{ color: white; }

div.content-section table.with-border, div.content-section table.with-border th, div.content-section table.with-border td{ border: 1px solid #005b67; }



div.idheaderspacer{ height: 84px; margin: -84px 0 0; z-index: -1; }

div.social-icons a:hover img.icon-email, div.social-icons a:focus img.icon-email{ background-color: #afcb3a; border-color: #afcb3a; }

/* FORM */
.standard select{ padding-right: 0px; border: 1px solid #ccc !important; background-color: white; border-radius: 8px; padding-left: 12px; padding-right: 12px; line-height: 44px; min-height: 46px; }
.standard select.select-arrow{ padding-right: 48px; }

.standard input[type="text"]
{ 
	-webkit-appearance: none; -moz-appearance: none; 
	background-color: white;
	border: 1px solid #ccc !important;
	min-height: 46px;
	font-size: x-large;
	padding: 0px 12px 0px 12px;
	margin: 0px 12px 24px 0px;
	border-radius: 8px;
}
.standard label.input-label{ display: block; position: absolute; left: 12px; top: 0px; cursor: text; transition: all 0.3s ease; line-height: 48px; min-height: 48px; }
.standard input:focus+label.input-label, .standard input.focus+label.input-label{ text-transform: uppercase; font-size: 12px; font-weight: normal; top: -16px; line-height: normal; }
.standard label.select-label{ font-size: 12px; padding-left: 12px; }
.standard textarea{ border-radius: 8px; padding: 12px; width: calc(100% - 26px); margin-bottom: 24px; border-color: #ccc; }
.standard textarea.no-margin{ margin-bottom: 0px; }
.standard input.full-width{ width: calc(100% - 26px); }
.standard label.select-label { position: absolute; top: -16px; }

.standard button
{ 
	transition: all 0.3s ease; 
	-webkit-appearance: none; -moz-appearance: none; 
	border: 2px solid black; 
	text-align: center; 
	width: 100%; 
	margin-bottom: 12px; 
	text-transform: uppercase; 
	font-size: small; 
	font-weight: 700;
	cursor: pointer; 
	padding-top: 12px; 
	padding-bottom: 12px; 
	background-color: transparent; 
	font-family: Roboto;
}
.standard button:focus{ background-color: rgb(251, 184, 0); }
ul.check-box li .check:focus, ul.check-box input[type=checkbox]:checked ~ .check:focus{  border-color: rgb(251, 184, 0); border-color: black; }
/* END FORM */



.standard input:focus+label.input-label, .standard input.focus+label.input-label{ font-size: 1.2rem; }
.standard label{ font-size: 2.4rem; }
.standard label.select-label{ font-size: 1.2rem; }

div.content-section table th, div.content-section table td{ font-size: 1.8rem; }

.accordian-header{ font-size: 2.0rem; }
.accordian-centre > .accordian-section > .accordian-header { font-size: 3.2rem; }
.accordian-centre > .accordian-section > .accordian-header > h2,  .accordian-centre > .accordian-section > .accordian-header > h3 { font-size: 3.2rem; }



span.calendar span.day { font-size: 4.8rem; line-height: 4.8rem; }

.small-heading { font-size: 1.4rem; }
ul.check-box li label{ font-size: 1.8rem; }
div.bottom90 h1{ font-size: 5.6rem; }

div.content-section-container.bg_scroll{ background-position: center top; background-attachment: scroll; background-size: contain; }



.scaling-text, .scaling-header{ font-family: "Fira Sans", sans-serif; }
div.next-selector{ display: none; }

#ssff-navbar{ position: relative; transition: top 0.3s; }
#ssff-navbar a:focus img{ border-bottom: 1px solid #ffdd00; }

/* RESPONSIVE - adjustments for screen size */
@media screen and (min-width: 1280px) 
{
	.scaling-text{ font-size: 64px; /*line-height: 80px;*/ }
	.scaling-header{ font-size: 76px; /*line-height: 92px;*/ }
}

@media screen and (max-width: 1280px) 
{
	/* fixes an issue on mobile devices with the way scroll/fixed background attachment works */
	div.header-content{ background-attachment: scroll; }
	.flex-width-6-4-3-2{ -ms-flex: 3 0px; -webkit-flex: 3 0px; flex: 3 0px; -ms-flex-preferred-size: 25%; -webkit-flex-basis: 25%; flex-basis: 25%;  }
}

@media screen and (max-width: 1024px) 
{
	.hide1024{ display: none; }
	.show1024{ display: block; }
	.visible1024{ display: inline-block; }
	
	#menu-bar-mobile{ display: block; }

	div.header-content{ height: calc(100vh - 134px); }
	div.header-overlay{ height: calc(100vh - 134px); }
	
	div.stickynav-inner ul li.hide1024{ display: none; }
	
	/* fix page heading size so it doesn't get too small */
	div.page-heading h1{ font-size: 2.5em; }
}

@media (min-width: 1024px) 
{
	div.selector.rounded article { min-height: 120px; }
	body{ margin-top: 84px; } /* for floating main menu */
	

}

@media screen and (max-width: 912px) 
{
	.hide912{ display: none; }
	.hide912 > div{ display: none; } /* hide internal div as well */
	.show912{ display: block; }
	
	/* default is a twelve column grid */
	.col-width-one{ width: 16.666%; }
	.col-width-two{ width: 33.333%; }
	.col-width-three{ width: 50%; }
	.col-width-four{ width: 66.666%; }
	.col-width-five{ width: 83.333%; }
	.col-width-six{ width: 100%; }
	.col-width-seven{ width: 100%; }
	.col-width-eight{ width: 100%; }
	.col-width-nine{ width: 100%; }
	
	/* change to six column layout */
	.flex-width-one { -ms-flex: 1 0px; -webkit-flex: 1 0px; flex: 1 0px; -ms-flex-preferred-size: 16.666%; -webkit-flex-basis: 16.666%; flex-basis: 16.666%; }
	.flex-width-two, .flex-width-6-4-3-2 { -ms-flex: 2 0px; -webkit-flex: 2 0px; flex: 2 0px; -ms-flex-preferred-size: 33.333%; -webkit-flex-basis: 33.333%; flex-basis: 33.333%;  }
	.flex-width-three { -ms-flex: 3 0px; -webkit-flex: 3 0px; flex: 3 0px; -ms-flex-preferred-size: 50%; -webkit-flex-basis: 50%; flex-basis: 50%;  }
	.flex-width-four { -ms-flex: 3 0px; -webkit-flex: 3 0px; flex: 3 0px; -ms-flex-preferred-size: 50%; -webkit-flex-basis: 50%; flex-basis: 50%;  }
	.flex-width-five { -ms-flex: 5 0px; -webkit-flex: 5 0px; flex: 5 0px; -ms-flex-preferred-size: 83.333%; -webkit-flex-basis: 83.333%; flex-basis: 83.333%;  }
	.flex-width-six, .flex-width-seven, .flex-width-eight, .flex-width-nine { -ms-flex: 6 0px; -webkit-flex: 6 0px; flex: 6 0px; -ms-flex-preferred-size: 100%; -webkit-flex-basis: 100%; flex-basis: 100%;  }
	.flex-width-100-fifty { -ms-flex: 6 0px; -webkit-flex: 6 0px; flex: 6 0px; -ms-flex-preferred-size: 50%; -webkit-flex-basis: 50%; flex-basis: 50%; }
	.flex-width-50-25-50, .flex-width-100-25-50 { -ms-flex: 3 0px; -webkit-flex: 3 0px; flex: 3 0px; -ms-flex-preferred-size: 25%; -webkit-flex-basis: 25%; flex-basis: 25%;  }
	
	.fixed-width-25-50{ width: 50%; }
	.fixed-width-33-50{ width: 50%; }
	.fixed-width-50-100{ width: 100%; }
	
	div.section-selector li a.section-title{ display: none; }

	div#menu-bar-container{ width: 64px; height: 64px; }	
	
	p.breadcrumb{ margin-bottom: 32px; margin-right: 32px; } /* ensure text does not go under the burger menu */
	footer div.content-section { background-size: 400px 400px; }
}

@media screen and (max-width: 640px) 
{
	.hide640{ display: none; }
	.show640{ display: block; }
	
	ul.atoz-menu li a{ width: 30px; line-height: 30px; }
	ul.atoz-menu li span{ width: 32px; line-height: 30px; }

	/* show content in single columns */
	.col2, .col3{ -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; }
	
	.col-width-one{ width: 25%; }
	.col-width-two, .flex-width-6-4-3-2 { width: 50%; }
	.col-width-three{ width: 50%; }
	.col-width-four{ width: 100%; }
	.col-width-five{ width: 100%; }
	.col-width-six{ width: 100%; }
	
	/* change to two column layout */
	.flex-width-one { -ms-flex: 1 0px; -webkit-flex: 1 0px; flex: 1 0px; -ms-flex-preferred-size: 25%; -webkit-flex-basis: 25%; flex-basis: 25%; }
	.flex-width-two, .flex-width-three, .flex-width-6-4-3-2 { -ms-flex: 2 0px; -webkit-flex: 2 0px; flex: 2 0px; -ms-flex-preferred-size: 50%; -webkit-flex-basis: 50%; flex-basis: 50%;  }
	.flex-width-four, .flex-width-five { -ms-flex: 6 0px; -webkit-flex: 6 0px; flex: 6 0px; -ms-flex-preferred-size: 100%; -webkit-flex-basis: 100%; flex-basis: 100%;  }
	.flex-width-50-25-50, .flex-width-100-25-50 { -ms-flex: 2 0px; -webkit-flex: 2 0px; flex: 2 0px; -ms-flex-preferred-size: 50%; -webkit-flex-basis: 50%; flex-basis: 50%;  }
	
	/* change padding and margins for smaller screens */ 
	div.stickynav-inner, div.stickynav-inner ul li a, div.content-section-inner div.column-inner, div.tabmenu ul li a, div.tabmenu ul li span{ padding: 0 6px 0 6px; }
	div.content-section-inner, div.content-section-gallery{ padding: 6px 6px 0.1px 6px; }
	div.page-heading-content div.page-heading{ padding: 4px 12px 4px 12px; }
	div.photo-item-inner{ margin: 0 8px 0 8px; }
	div#page-title-inner{ padding: 4px 12px 4px 12px; }
	
	div.page-heading-container{ bottom: 48px; font-family: 'Roboto Condensed', sans-serif; width: 100%; }
	
	div.content-section-margin{ margin: 0px 12px 0px 12px; padding-top: 6px; padding-bottom: 6px; }
	
	#menu-bar-mobile{ padding: 6px; }
	img.icon{ margin: 3px; }
	div.social-icons a{ margin: 3px; }
	
	div#breadcrumb ul{ margin-left: 12px; }
	.accordian-centre > .accordian-section > .accordian-header{ font-size: 1.5em; padding-top: 12px; padding-bottom: 12px; }
	.accordian-centre > .accordian-section > .accordian-header div{ padding-left: 24px; padding-right: 24px; }
	
	.standard select{ font-size: large; margin-bottom: 12px; }
	.standard label{ font-size: large; }
	.standard input[type="text"], .standard input[type="password"]{ font-size: large; }
	.standard input[type="text"], .standard input[type="password"], .standard input[type="submit"], .standard input[type="button"]{ margin-bottom: 12px; }

	ul.radio-buttons li label { font-size: large; }
	
	.cover-img{ background-attachment: scroll; background-position: center center; background-repeat: no-repeat; background-size: cover; }
	.bg-pos-75{ background-position: 75% 50%; }
	
	footer .awards .flex-width-two{ -ms-flex: 4 0px; -webkit-flex: 4 0px; flex: 4 0px; -ms-flex-preferred-size: 33.333%; -webkit-flex-basis: 33.333%; flex-basis: 33.333%;  }
	img#dashboard-header-logo{ padding: 12px 6px 6px 12px; }
	
	.scaling-text{ font-size: 32px; /*line-height: 40px;*/ }
	.scaling-header{ font-size: 38px; /*line-height: 46px;*/ }
	
	div.bottom90 h1{ font-size: 4.0rem; }
	
	span.calendar{ padding: 12px 12px 0px 12px; }
	
	.standard select{ margin-bottom: 24px; }
	#icon-menu-bar{ padding-left: 0px; padding-right: 6px; }

	/* ARTICLE change padding and margins */
	article a{ margin: 0px 6px 0px 6px; }
	
	article span.section{ padding-left: 12px; padding-right: 12px; }
	article span.headline, article h2.headline, article h3.headline{ font-family: 'Roboto Condensed', sans-serif; font-weight: bold; padding: 12px 12px 12px 12px; }
	article span.abstract{ padding: 0px 12px 48px 12px; }
	article.no-more-info span.abstract{ padding-bottom: 12px; }
	article span.more-info{ margin: 0px 12px 12px 12px; }
	article span.posted{ bottom: 12px; padding: 6px 12px 0px 12px; }
	article span.pad{ padding: 12px 12px 0px 12px; }
	.flex-wrapper > article { margin: 0px 0px 12px 0px; }
	.flex-wrapper > article:hover { margin: 0px 0px 12px 0px; }

	.flex-inner{ left: 6px; min-width: calc(100% - 12px); }
	
	footer div.content-section { background-image: none; }
}

@media screen and (max-width: 480px) 
{
	.hide480{ display: none; }
	
	html{ font-size: 48.61%; }
	
	#icon-menu-bar{ max-width: 180px; }
	img.icon{ width: 42px; height: 42px; }
	
	div.nested-container{ padding: 16px; }
	
	#notification { width: 80%; }

	div.bottom90 h1{ font-size: 2em; }
}

@media screen and (max-width: 360px) 
{
	.hide360{ display: none; }
}

.social-icons img{ width: 48px; height: 48px; vertical-align: middle; display: inline-block; border-radius: 50%; transition: 0.3s ease-in-out; }
.social-icons a:hover img.icon-twitter, .social-icons a:focus img.icon-twitter{ background-color: #2AA9E0; border-color: #2AA9E0; }
.social-icons a:hover img.icon-facebook, .social-icons a:focus img.icon-facebook{ background-color: #3B5998; border-color: #3B5998; }
.social-icons a:hover img.icon-vimeo, .social-icons a:focus img.icon-vimeo{ background-color: #4EBBFF; border-color: #4EBBFF; }
.social-icons a:hover img.icon-instagram, .social-icons a:focus img.icon-instagram{ background-color: #c13584; border-color: #c13584; }
.social-icons a:hover img.icon-linkedin, .social-icons a:focus img.icon-linkedin{ background-color: #0077b5; border-color: #0077b5; }
.social-icons a:hover img.icon-youtube, .social-icons a:focus img.icon-youtube{ background-color: #ff0000; border-color: #ff0000; }

div#menu-bar-container ul.social-icons li a { padding-left: 6px; padding-right: 6px; }
div#menu-bar-container ul.social-icons li a:hover, div#menu-bar-container ul.social-icons li a:focus 
{
    border-bottom-color: transparent;
}