/* CSS COLOUR VARIABLES - NOT SUPPORTED BY IE */
:root 
{
	--colour-brandblue: rgb(0, 47, 108);
	--colour-brand1: #2C2321;
	--colour-brand2: rgb(255,232,0); /* Harper yellow */
	--colour-brand3: #9DAB34;
	--colour-brand4: rgb(87,44,95); /* Aubergine */
	--colour-brand5: rgb(35,47,132);
	--colour-brand6: rgb(203,211,0);
	--colour-brand7: rgb(0,68,19);
	--colour-brand8: rgb(83,207,186); /* Aqua */
	--colour-brand9: rgb(162,229,210);
	--colour-brand10: #252628;
	--colour-brand11: rgb(0,160,175);
	--colour-brand12: rgb(0,48,64);
	--colour-brand13: #C0D7B0; /*Ag1 */
	--colour-brand14: #79B060; /* Ag2 */
	--colour-brand15: #FFAB82; /* CEWG1 */
	--colour-brand16: #FF5704; /* CEWG2 */
	--colour-brand17: #F3977C; /* Animals1 */
	--colour-brand18: #FACEBD; /* Animals2 */
	--colour-brand19: #582A55; /* Business1 */
	--colour-brand20: #A0859E; /* Business2 */
	--colour-brand21: #002F87; /* Engineering1 */
	--colour-brand22: #7F97C3; /* Engineering2 */
	--colour-brand23: #FFCE00; /* Food1 */
	--colour-brand24: #FFE67F; /* Food2 */
	--colour-brand25: #EB5B6A; /* REALM1 */
	--colour-brand26: #F6B5B4; /* REALM2 */
	--colour-brand27: #8DB8BA; /* VN1 */
	--colour-brand28: #C6DBDC; /* VN2 */
	--colour-brand29: #5F4595; /* Physio1 */
	--colour-brand30: #AB9DCD; /* Physio2 */
	--colour-brand31: #BAAEA9; /* Zoology1 */
	--colour-brand32: #AA9C95; /* Zoology2 */	
	--colour-brand33: rgb(218,218,218); /* Gray */
	--colour-brand-slate: rgb(29,37,45);
}
/* END CSS COLOUR VARIABLES */

/* FONT SELECTION */
body{ font-family: Roboto; }
#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: 'Roboto Condensed', sans-serif; font-weight: 400; font-family: 'Fira Sans', sans-serif; font-weight: 700; font-size: 1em; }
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; font-weight: 400; }
div.content-section a.box-link{ font-family: Roboto; font-weight: bold; }
a.call-to-action{ 				font-family: Roboto; font-weight: bold; }
article span.more-info{ 		font-family: Roboto; font-weight: bold; }
ul.atoz-menu li{ 				font-family: Roboto; font-weight: bold; }
.small-heading{ 				font-family: Roboto; font-weight: 700; }
div.search-bar input{ 			font-family: Roboto; font-weight: 300; }

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

html{ -webkit-text-size-adjust: 100%; } /* stop body copy size changing on iOS when rotating the screen */
body{ margin: 0; background-color: rgb(29,37,45); overflow-x: hidden; }
h1, h2, h3{ margin-top: 0; color: #252628; }
h1{ font-size: 2.5em; line-height: 1em; }
h2{ font-size: 2em; }
h3{ font-size: 1.5em; }
h4{ font-size: 1.25em; margin-top: 0; }
.smaller{ font-size: 0.5em; }
a{ cursor: pointer; }
a.link-box{ margin-bottom: 12px; }

.right{ float: right; }
.clear{ clear: both; }

.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark p{ color: white; }

p, ul, ol{ font-weight: 300; margin-top: 0; }
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; }

/* BRANDING */
a.hau-logo img{ width: 100%; max-width: 290px; min-width: 180px; }
a.hau-logo:focus{ border-bottom: 1px solid rgb(255,232,0); }
/* END BRANDING */

/* 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: 640px; height: 80vh; height: calc(100vh - 202px); background-attachment: scroll; background-position: center center; background-repeat: no-repeat; background-size: cover; }

div.header-overlay{ width: 100%; /*16x9*/height: 720px; /*2x1*/height: 640px; height: 80vh; 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; }
.bg-pos-bottom{ background-position: center bottom; }
.bg-pos-top{ background-position: center top; }
.bg-pos-left{ background-position: left center; }
.bg-pos-right{ background-position: right center; }
div.scroll-bg{ background-attachment: scroll; background-position: center 0px; }

/* MENU BAR */
div#menu-bar-container{ position: relative; z-index: 10; min-height: 112px; height: 20vh; height: 202px; }
div#menu-bar-container ul{ list-style: none; font-size: large; padding-left: 0px; margin-bottom: 0; }
div#menu-bar-container ul li{ display: inline-block; }
div#menu-bar-container ul li a{ color: rgb(0, 47, 108); display: block; padding: 0px 12px 0px 12px; line-height: 48px; border-bottom: 8px solid transparent; transition: all 0.3s ease; }
div#menu-bar-container.white ul li a{ color: white; }
div#menu-bar-container.white ul li a:hover, div#menu-bar-container.white ul li a:focus{ background-color: transparent; color: rgb(255,232,0); border-bottom-color: rgb(255,232,0); }
div#menu-bar-container ul li a:hover{ background-color: transparent; color: rgba(87,44,95,1); transition: all 0.3s ease; border-bottom: 8px solid rgba(87,44,95,1); }

@media screen and (max-width: 1096px) 
{
	div#menu-bar-container ul{ padding: 0px 2px 0px 2px; }
	div#menu-bar-container ul li a{ padding: 0px 10px 0px 10px; }
}

/* 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; }

#mobile-menu-overlay{ 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; }

/* right menu */
#mobile-menu
{ 
	/*background-color: #252628;*/ width: 66.666%; min-height: 100%; position: absolute; top: 0px; right: 0px; z-index: 999;  
	-ms-transform-origin: right;
	    transform-origin: right; -webkit-transform-origin: right;
	-ms-transform: translateX(100%);
	    transform: translateX(100%); -webkit-transform: translateX(100%);
	transition: 0.3s ease-in-out !important; 
}

#mobile-menu ul{ list-style: none; font-size: large; 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 #333; }
#mobile-menu ul li a:hover, #mobile-menu ul li a:focus{ background-color: transparent; color: rgb(255,232,0); transition: all 0.3s ease; border-left: 8px solid rgb(255,232,0); }

#mobile-menu.show
{ 
	margin-left: 0px; margin-right: 0px; 
	-ms-transform-origin: right;
	    transform-origin: right; -webkit-transform-origin: right;
	-ms-transform: translateX(0px);
	    transform: translateX(0px); -webkit-transform: translateX(0px);
	transition: 0.3s ease-in-out;
	box-shadow: 0px 0px 10px black;
}

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

img.icon{ display: inline-block; border-radius: 50%; border: 1px solid transparent; margin: 12px; transition: all 0.3s ease; cursor: pointer; width: 46px; height: 46px; }
img.icon:hover, img.icon:focus{ /*border-radius: 0%;*/ transition: all 0.3s ease; background-color: rgba(255,255,255,0.2); }

#icon-menu-bar a { margin: 12px; }
#icon-menu-bar a:not(.visible1024) { display: inline-block; }
#icon-menu-bar img.icon{ display: block; margin: 0px; }
#icon-menu-bar span{ margin: 12px; }

@media screen and (max-width: 640px) 
{
	#icon-menu-bar a { margin: 6px; }
	#icon-menu-bar span{ margin: 6px; }
}

@media screen and (max-width: 480px) 
{
	#icon-menu-bar a { margin: 3px; }
	#icon-menu-bar span{ margin: 3px; }
}

/* style on keyboard focus */
div#icon-menu-bar a{ border-radius: 50%; transition: all 0.3s ease; }
div#icon-menu-bar a:focus{ background-color: rgba(255,255,255,0.2); }
a:focus img.icon{ /*border-radius: 0%;*/ transition: all 0.3s ease; }
img.icon:focus{ /*border-radius: 0%;*/ transition: all 0.3s ease; }
.blue div#icon-menu-bar a:focus{ background-color: rgba(0,0,0,0.2); }

div.social-icons a{ border-radius: 50%; transition: all 0.3s ease; }

@media screen and (max-width: 1024px) 
{
	#menu-bar-mobile{ display: block; }
	.hide1024{ display: none; }
	.show1024{ display: block; }
	.visible1024{ display: inline-block; }
	
	div#menu-bar-container{ height: 134px; }
	div.header-content{ height: calc(100vh - 134px); }
	div.header-overlay{ height: calc(100vh - 134px); }
}
/* END MENU BAR */

/* 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: 2.5em; 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; }

/* 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 12px 0px 12px; padding-top: 12px; padding-bottom: 12px; }
/*div.content-section-margin{ margin: 16px; } */ /* DON'T USE THIS - problems with background graphics and margins */ 
div.content-section-inner{ padding: 12px 12px 0.1px 12px; }
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; }
p.section-intro, p.section-intro1024{ font-size: 2em; } 
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; }
		
/* 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%; }

/* 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; text-decoration: none; }
.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{ text-decoration: none; border-bottom: 1px dotted #905; color: black; font-weight: 400; }
div.content-section p a:hover, div.content-section li a:hover{ background-color: rgb(255,232,0); border-bottom-color: rgb(255,232,0); color: black; }
div.content-section p a, div.content-section li a, div.content-section h3 a{ text-decoration: none; color: #EB5B6A; color: #905; border-bottom-width: 0; }

main div.content-section p a, main div.content-section li a, main div.content-section h3 a{ border-bottom-width: 1px; }

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

/* add focus styles for keyboard access */
div.content-section p a:focus, div.content-section li a:focus{ background-color: rgb(255,232,0); border-bottom-color: rgb(255,232,0); color: black; }

.bg-dark div.content-section p a:not(.box-link), main .bg-dark div.content-section ul:not(.page-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; }

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: black; 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.tab1{ background-color: #989C33; }
div.tabmenu a.tab2{ background-color: #33838a; }
div.tabmenu a.tab3{ background-color: #5f6062; }
div.tabmenu a.tab4{ background-color: #ae7337; }
div.tabmenu a.tab5{ background-color: #aa697f; }
div.tabmenu a.tab6{ background-color: #989C33; }
div.tabmenu a.tab7{ background-color: #33838a; }
div.tabmenu a.tab8{ background-color: #5f6062; }
div.tabmenu a.tab9{ background-color: #ae7337; }
div.tabmenu a.tab10{ background-color: #aa697f; }
div.tabmenu a.tab11{ background-color: #5F4595; }
div.tabmenu a.tab12{ background-color: rgb(0,48,64); }
div.tabmenu a.tab13{ background-color: rgb(0,48,64); }

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;  }

div.tabmenu a#tabmenu1a:hover, div.tabmenu a#tabmenu1b:hover, div.tabmenu a#tabmenu1c:hover, div.tabmenu a#tabmenu1d:hover, div.tabmenu a#tabmenu1e:hover{ background-color: white; color: black; }
/* 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; }
ul.footer-links li{ font-size: small; }
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: rgb(255,232,0); 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: rgb(255,232,0); background-color: transparent; }

div.icon{ display: inline-block; padding: 0px 12px 0px 12px; }
div.icon img{ width: 48px; border-radius: 50%; }
.footer-break{ border-top: 0px solid rgba(0,0,0,0.2); }
div.social-icons a{ display: inline-block; margin: 12px; }
div.social-icons a img.icon{ margin: 0px; display: block; border: 0; border-radius: 50%; }
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 */

div.content-section p a.profile-link{ border-bottom: 0px; color: black; display: inline-block; max-width: 400px; }
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); }

.centre { text-align: center; }

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; color: black; }
.bg-white span.filter{ background-color: #eee; }
div.content-section a.filter{ border-bottom: 0; /*line-height: 34px;*/ }
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;
}
/* 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 */

/* COLOURS */
.bg-brandblue{ background-color: rgb(1,33,105); }
.bg-brandyellow{ background-color: rgb(255, 232, 0); }

.bg-yellow{ background-color: rgb(255,232,0); }
.bg-darkteal{ background-color: rgb(0,48,64); color: white; }
.bg-teal{ background-color: rgb(0,160,175); color: white; }
.bg-orange{ background-color: rgb(245,128,7); color: white; }
.bg-darkgrey{ background-color: rgb(27,27,27); color: white; }
.bg-pink{ background-color: rgb(223,70,97); color: white; } /* BLUSH */
.bg-grey{ background-color: #f4f4f4; }
.bg-lightgrey{ background-color: rgb(250,250,250); }
.bg-white{ background-color: white; color: black; }
.bg-black{ background-color: black; }
.bg-darkblue{ background-color: #131631; color: white; }

.bg-brand1{ background-color: #2C2321; color: white; }
.bg-brand2{ background-color: rgb(255,232,0); color: black; }
.bg-brand3{ background-color: #9DAB34; }
.bg-brand4{ background-color: rgb(87,44,95); color: white; } /*Aubergine */
.bg-brand5{ background-color: rgb(35,47,132); color: white; }
.bg-brand6{ background-color: rgb(203,211,0); color: black; }
.bg-brand7{ background-color: rgb(0,68,19); color: white; }
.bg-brand8{ background-color: rgb(83,207,186); color: black; } /* Aqua */
.bg-brand9{ background-color: rgb(162,229,210); color: black; }
.bg-brand10{ background-color: #252628; color: white; }
.bg-brand11{ background-color: rgb(0,160,175); color: black; }
.bg-brand12{ background-color: rgb(0,48,64); color: black; }
.bg-brand13{ background-color: #C0D7B0; color: black; }
.bg-brand14{ background-color: #79B060; color: black; }
.bg-brand15{ background-color: #FFAB82; color: black; }
.bg-brand16{ background-color: #FF5704; color: black; }
.bg-brand17{ background-color: #F3977C; color: black; }
.bg-brand18{ background-color: #FACEBD; color: black; }
.bg-brand19{ background-color: #582A55; color: white; }
.bg-brand20{ background-color: #A0859E; color: black; }
.bg-brand21{ background-color: #002F87; color: white; }
.bg-brand22{ background-color: #7F97C3; color: black; }
.bg-brand23{ background-color: #FFCE00; color: black; }
.bg-brand24{ background-color: #FFE67F; color: black; }
.bg-brand25{ background-color: #EB5B6A; color: black; }
.bg-brand26{ background-color: #F6B5B4; color: black; }
.bg-brand27{ background-color: #8DB8BA; color: black; }
.bg-brand28{ background-color: #C6DBDC; color: black; }
.bg-brand29{ background-color: #5F4595; color: black; }
.bg-brand30{ background-color: #AB9DCD; color: black; }
.bg-brand31{ background-color: #BAAEA9; color: black; }
.bg-brand32{ background-color: #AA9C95; color: black; }
.bg-brand33{ background-color: rgb(218,218,218); color: black; }

/* brand background colours */
.bg-brand-harper-blue{ background-color: rgb(1,33,105); color: white; }
.bg-brand-harper-yellow{ background-color: rgb(255,233,0); }
.bg-brand-silver{ background-color: rgb(180,183,185); }
.bg-brand-blush{ background-color: rgb(233,70,97); }
.bg-brand-aqua{ background-color: rgb(83,207,186); }
.bg-brand-acid{ background-color: rgb(227,232,41); }
.bg-brand-tangerine{ background-color: rgb(254,80,0); }
.bg-brand-sky{ background-color: rgb(151,193,223); }
.bg-brand-clay{ background-color: rgb(234,167,148); }
.bg-brand-stone{ background-color: rgb(169,156,149); }
.bg-brand-forest{ background-color: rgb(44,82,52); }
.bg-brand-cranberry{ background-color: rgb(111,38,61); }
.bg-brand-moss{ background-color: rgb(24,48,40); color: white; }
.bg-brand-aubergine{ background-color: rgb(87,44,95); }
.bg-brand-slate{ background-color: rgb(29,37,45); color: white; }
.bg-brand-midnight{ background-color: rgb(30,26,52); color: white; }

.colour-brand1{ color: #2C2321; }
.colour-brand2{ color: rgb(255,232,0); }
.colour-brand8{ color: rgb(83,207,186); }
.colour-brand10{ color: #252628; }
.colour-brand11{ color: rgb(0,160,175); }
.colour-brand12{ color: rgb(0,48,64); }
.colour-brand16{ color: #FF5704; }
.colour-brand25{ color: #EB5B6A; }
/* END COLOURS */

/* LINKS */
div.content-section a.box-link{ cursor: pointer; line-height: 36px; border: 2px solid #333; color: #333; text-transform: uppercase; font-size: x-small; padding: 8px 16px 8px 16px; white-space: nowrap; }
div.content-section p a.box-link:hover{ background-color: #333; color: white; border-bottom-color: #333; }
div.content-section a.box-link.light{ background-color: transparent; border-color: white; color: white; }
div.content-section a.box-link.light:hover{ background-color: white; color: #333; border-bottom-color:white;}
div.content-section a.box-link.black{ background-color: transparent; color: #000000; border-color:black;}
div.content-section a.box-link.black:hover{ background-color: black; border-color: black; color: white; }
div.content-section a.box-link.tangerine{ background-color: #FE5000; border-color: #FE5000; color: white; }
div.content-section a.box-link.tangerine:hover{ background-color: transparent; color: #FE5000; border-color:#FE5000;}
div.content-section a.box-link.aqua{ background-color: #53cfba; border-color: #53cfba; color: white; }
div.content-section a.box-link.aqua:hover{ background-color: transparent; color: #53cfba; border-bottom-color:#53cfba;}

div.content-section a.box-link{ background-color: #00A196; border-color: #00A196; background-color: #00534D; border-color: #00534D; font-size: small; color: white; }
.bg-dark div.content-section p a.box-link { color: white; }
div.content-section p a.box-link:hover, div.content-section table a.box-link:hover{ background-color: transparent; color: #00534D; border-bottom-color: #00534D; }
div.content-section p a.box-link:focus, div.content-section table a.box-link:focus{ background-color: rgb(255,232,0); color: black; border-bottom-color: #00534D; }
div.content-section p a.box-link.light:focus, div.content-section table a.box-link.light:focus{ border-color: black; }

a.call-to-action{ letter-spacing: 2px; transition: all 0.3s ease; text-align: center; margin-bottom: 1em; display: inline-block; width: calc( 100% - 36px); cursor: pointer; border: 2px solid #00A196; background-color: #00A196; color: white; text-transform: uppercase; font-size: small; padding: 8px 16px 8px 16px; }
a.call-to-action:hover{ transition: all 0.3s ease; background-color: transparent; color: #00A196; }

/* 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%; }
.flex-width-33-100 { -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%;  }

/* 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%; }

/* ARTICLE */
.flex-wrapper > article { margin: 12px 0px 12px 0px; }

article{ background-color: transparent; overflow: hidden; transition: all 0.25s ease; position: relative; }
article span{ 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%; background-color: white; transition: all 0.5s ease; }
article a:hover{ transition: all 0.5s ease; }

article a{ overflow: hidden; border-radius: 0px; height: 100%; position: relative; }
article span.headline, article h2.headline, article h3.headline{ padding: 24px 24px 12px 24px; font-size: 125%; 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; }
.flex-wrapper:hover > article:hover { opacity: 1; }
.flex-wrapper:hover > article:not(:hover) { opacity: 0.5; }
		
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); }

article { margin: 12px 0px 12px 0px; }
article:hover { margin: 6px 0px 18px 0px; }

/* add focus styles for keyboard users */
article a:hover .headline, article a:focus .headline{ color: black; text-decoration: underline; }
article a:hover .divider, article a:focus .divider{ text-decoration: underline solid white; }
article a:focus { background-color: rgb(255,232,0); color: black; outline: none; }
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; }
.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 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; }
/* END ARTICLE */

/* 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; }
.fill-purple .flex-inner{ background-color: rgb(87,44,95); }
#facilities img{ max-width: 64px; }

@media screen and (max-width: 640px) 
{
	/* change margins */
	article a{ margin: 0px 6px 0px 6px; }
	.flex-wrapper article { margin: 6px 0px 6px 0px; }
	article span.headline, article h2.headline, article h3.headline{ padding: 12px 12px 12px 12px; }
	article span.abstract{ padding: 0px 12px 48px 12px; }
	article.no-more-info span.abstract{ padding-bottom: 12px; }

	.flex-wrapper article:hover { margin: 4px 0px 8px 0px; }
	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; }

	#icon-menu-bar{ padding-left: 0px; padding-right: 6px; }

	.flex-inner{ left: 6px; min-width: calc(100% - 12px); }
	
	article span.headline, article h2.headline, article h3.headline{ font-family: 'Roboto Condensed'; font-weight: bold; }
}
/* END ARTICLE */

/* 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;*/ font-size: 16px; letter-spacing: 1px; }

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

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

/* ACCORDIAN */
/* Use flex-box to position items */
.accordian-container{ border-top: 1px solid black; transition: all 0.3s ease; }
.accordian-section{ border-bottom: 1px solid black; }
.accordian-header{ /*min-height: 48px;*/ 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{ color: white; }

/* jQuery solution */
.accordian-body{ padding-left: 32px; clear: left; }

.accordion-with-border .accordian-container{ border-top-width: 0; border-bottom-width: 0; }
.accordion-with-border .accordian-section{ border: 1px solid rgba(0,0,0,0.5); border-radius: 4px; margin-bottom: 12px; background-color: rgba(255,255,255,0.75); }
.accordion-with-border .accordian-header{ font-size: 1.15em; }
.accordion-with-border .accordian-header, .accordion-with-border .accordian-body{ padding-right: 16px; }
.accordion-with-border.bg-dark .accordian-section{ background-color: rgba(0,0,0,0.2); border-color: rgba(255,255,255,0.5); }

/* CSS transitions solution */
/* full width centre accordian */
.accordian-centre > .accordian-section{ margin-bottom: 0; border-radius: 0; border: 0; border-bottom: 1px solid black; background-color: transparent; }
.accordian-centre > .accordian-section > .accordian-header{ max-width: 1280px; margin: 0 auto; font-size: 2em; text-align: left; padding-top: 24px; padding-bottom: 24px; padding-right: 0px; }
.accordian-centre > .accordian-section > .accordian-header div{  background: url(/img/icon/icon-arrow-down.png) center right no-repeat; padding-left: 24px; padding-right: 48px; }
.accordian-centre > .accordian-section > .accordian-header h2{ font-size: 1em; 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; padding-right: 0px; }


/* END ACCORDIAN */

/* PAGE MENU */
ul.page-menu{ list-style: none; padding-left: 0; margin: 0; }
ul.page-menu ul{ list-style: none; padding-left: 24px; }
ul.page-menu li{ -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid-column; }
ul.page-menu li a{ border-bottom: 1px solid #333; display: block; font-size: 1.25em; 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; color: black; }
ul.page-menu li a:hover, ul.page-menu li a:focus{ background-color: transparent; color: rgb(87,44,95); border-bottom-color: rgb(87,44,95); }
.bg-dark ul.page-menu{ border-color: #ccc; }
.bg-dark ul.page-menu li{  }
.bg-dark ul.page-menu li a{ color: white; border-color: #ccc; background-image: url('/img/icon/arrow-right-24x24-dark.png'); }
.bg-dark ul.page-menu li a:hover, .bg-dark ul.page-menu li a:focus{ color: rgb(255,232,0); } 

main ul.page-menu { margin-bottom: 24px; }
/* END PAGE MENU */

.col3{ -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-gap: 24px; -moz-column-gap: 24px; column-gap: 24px; }
.col2{ -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 24px; -moz-column-gap: 24px; column-gap: 24px; }

/* LIBRARY 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; 
	/*background: transparent url('/img/icon/white/icon-search.svg') no-repeat; 
	background-position: right center; 
	background-size: 48px 48px; */
}
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; }

/* remove when new library search has been launched */
div.library-search{ padding: 12px 24px 12px 12px; }
div.library-search div.search-bar{ margin: 0px; }
div.library-search div.search-bar input{ font-size: large; padding-left: 12px; color: black; background: white url('/img/icon/icon-mobile-search.png') no-repeat; background-position: right center; }
/* end remove */

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);*/ }
.blue img.icon:hover, .blue img.icon:focus{ background-color: rgba(0,0,0,0.2); }

@media screen and (max-width: 640px) 
{
	div.search-bar{ margin: 0px 12px 0px 12px; }
}
/* END LIBRARY 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; }
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: rgb(255,232,0); }

.bg-dark ul.atoz-menu li a{ border-color: rgba(255,255,255,0.75); color: white; }
.bg-dark ul.atoz-menu li a:hover{ color: black; border-color: rgb(255,232,0); }
/* 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; 
	line-height: 48px;
}
.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, ul.radio-buttons li label:focus + .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, ul.check-box li label:focus + .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 */

.standard input[type="submit"].rounded { background-color: rgb(1,33,105); color: white; border-radius: 22px; border-color: rgb(1,33,105); }
.standard input[type="submit"].rounded:hover, .standard input[type="submit"]:focus { color: rgb(1,33,105); background-color: white; transition: all 0.3s ease; }
.bg-dark .standard input[type="submit"].rounded:hover, .bg-dark .standard input[type="submit"]:focus { background-color: rgba(0,0,0,0.2); }
/* END STANDARD FORM */

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

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; }

div.middle50 div.content-align, div.middle100 div.content-align{ display: table-cell; }

.align-middle div.middle50 div.content-align, .align-middle div.middle100 div.content-align{ vertical-align: middle; }
.align-bottom div.middle50 div.content-align, .align-bottom div.middle100 div.content-align{ vertical-align: bottom; }
/* 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: 16px; 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: #1d252d; color: rgb(255,232,0); transition: all 0.3s ease; }

/* RESPONSIVE */
@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; }
	div.stickynav-inner ul li.hide1024{ display: none; }
	#menu-bar-mobile{ display: block; }
	
	/* fix page heading size so it doesn't get too small */
	div.page-heading h1{ font-size: 2.5em; }
	p.section-intro1024{ font-size: 1em; } 
}
@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; }	
}

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

	.hide640{ display: none; }
	.show640{ display: block; }
	.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%;  }
	.flex-width-33-100 { -ms-flex: 2 0px; -webkit-flex: 2 0px; flex: 2 0px; -ms-flex-preferred-size: 100%; -webkit-flex-basis: 100%; flex-basis: 100%;  }
	
	/* 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%; }
	article span.section{ padding-left: 12px; padding-right: 12px; }
	
	/* change margins and padding for smaller screens */
	div.content-section-margin{ margin: 0px 6px 0px 6px; padding-top: 6px; padding-bottom: 6px; }
	/* div.content-section-margin{ margin: 8px; } */ /* DON'T USE THIS - problems with background graphics and margins */ 
	#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: 12px; padding-right: 48px; }
	
	/* MAKE HEADERS SMALLER */
	h2{ font-size: 1.5em; }
	h3{ font-size: 1.25em; }
	p.section-intro{ font-size: 1.5em; } 
	
	.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; }
}

@media screen and (max-width: 480px) 
{
	.hide480{ display: none; }
	
	#icon-menu-bar{ max-width: 180px; }
	img.icon{ width: 42px; height: 42px; }
	
	div#menu-bar-container { height: 82px; min-height: 82px; }
}

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

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

div.accordian-header:focus, div.accordian-header:hover, div.accordian-header:focus h2, div.accordian-header:hover h2{ color: rgb(87,44,95); }
.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%; }

@media screen and (max-width: 640px) 
{
	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%;  }
}

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; }

@media screen and (max-width: 640px) 
{
	img#dashboard-header-logo{ padding: 12px 6px 6px 12px; }
}

.with-accordian .accordian-container { border-top-width: 0; border-bottom-width: 0px; }
.with-accordian + .accordian-centre .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; }
#mobile-menu{ z-index: 2147483637; }

#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; }

.flex-wrapper.rounded article, .flex-wrapper.rounded article a, .flex-wrapper.rounded article div.flex-inner{ border-radius: 4px; border-top-right-radius: 4px; }

.flex-wrapper.with-shadow article { overflow: visible; }
.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);
}

.flex-wrapper.no-fade{ transition: all 0.3s ease; }
.flex-wrapper.no-fade:hover > article:not(:hover) { opacity: 1; }

.flex-wrapper.no-fade article {overflow: visible; }
.flex-wrapper.no-fade article:hover { margin: 12px 0px 12px 0px; }
 @media screen and (max-width: 640px)
 {
	.flex-wrapper.no-fade article:hover { margin: 6px 0px 6px 0px; }
 }
.flex-wrapper.no-fade article div.flex-inner { transition: all 0.3s ease; }
.flex-wrapper.no-fade article:hover div.flex-inner { 
	-webkit-box-shadow: 0px 3px 5px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 3px 5px 2px rgba(0,0,0,0.2);
    box-shadow: 0px 3px 5px 2px rgba(0,0,0,0.2); 
}

/* BLOG ARTICLES */
article.grid-item img {
    max-width: 100%;
	width: auto;
    max-height: 340px;
    margin: 0 auto;
	position: relative;
	z-index: 1;
}

article.grid-item span.section-container{ z-index: 2; }

article.grid-item .blog-cover-img-container{ background-color: black; position: relative; overflow: hidden; }
article.grid-item .blog-cover-img{ filter: blur(8px); -webkit-filter: blur(8px); z-index: 0; background-size: cover; background-position: center center; position: absolute; top: 0px; width: 100%; height: 100%; opacity: 0.5; }

table.borders-top-bottom{ border-top: 1px solid black; padding-top: 0px; margin-top: 12px; margin-bottom: 12px; }
table.borders-top-bottom td, table.borders-top-bottom th{ border-bottom: 1px solid black; }

@media screen and (min-width: 1280px) 
{
	p, li{ font-size: 1.15em; }
	li > ul > li, li > ol > li { font-size: 1em; }
}

.fullWidthContainer > .content-section{ max-width: 100%; }
.fullWidthContainer > .content-section > .content-section-margin{ padding: 0; margin: 0; }
.fullWidthContainer > .content-section > .content-section-margin .content-section-inner{ padding: 0; margin: 0; }
.fullWidthContainer > .content-section iframe{ display: block; }