@charset "utf-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	text-decoration:none;
}
h1, h2, h3, h4, h5, h6, p {line-height: 1.2em;}
p {line-height: 1.5em; font-size: 1em; }
html {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
	-moz-box-sizing: inherit;
}
/*  display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*----------------------------*/
/*	   	  Main Elements  	  */
/*----------------------------*/
/* !!!! DO NOT INSERT PARAMETERS INTO THESE STYLES. THESE ARE TO HIDE MAIN ELEMENTS FROM THE TEMPLATE !!!! */

#outer-topnavigation {display: none;}
#outer-bottomnavigation {display:none;}
#outer-navigation {}
#sub-navigation {display:none;}
#headernavigation {display:none;}
#inner-header h1 {display: none;}
#sideleft-navigation {display: none;}
#sideright-navigation {display: none;}

#outer-header {}
#outer-slideshow {display: none;}
#index #outer-slideshow {display: block;}
#outer-main {}
#outer-footer {}

#outer-clientfooter {}
#outer-languagebar {display: none;}
#breadcrumbs {display: none;}




/* Make sure these add up to your sites width */
#content { min-height:200px; float:left; margin-right: 2%; }
#sidebar-left {width: 100%;}
#content {width:70%;}
#sidebar-right { width: 28%; float:right; min-height:200px;}

#locations #content { width: 100%;}
#locations #sidebar-right {display: none;}




#inner-topnavigation, #inner-header, #inner-navigation, #inner-slideshow, #inner-main, #inner-clientfooter, #inner-footer, #inner-bottomnavigation, #inner-languagebar {
	max-width: 1440px;
	min-width: 0px; width: 100%;
	margin: 0 auto;
}

#outer-topnavigation, #outer-header, #outer-navigation, #outer-bottomnavigation, #outer-slideshow, #outer-main, #outer-clientfooter, #outer-footer, #outer-languagebar {
	width: 100%;
	float:left;
}
/*----------------------------*/
/*	  MISC/GENERAL STYLES  	  */
/*----------------------------*/
body,html { min-height: 100%; height:100%; } 
body {font-size:1em; font-family: "Gotham Narrow A", "Gotham Narrow B", "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: #f5f5f5; line-height: 1.5em; color:#333; overflow:visible; }


#wrapper {
/*-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out; 
-o-transition:all 0.2s ease-in-out; 
transition:all 0.2s ease-in-out;  */
}
#container {}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #e2e2e2;
    margin: 15px 0;
    padding: 0;
    clear: both;
}

/*Colour code EVERYTHING helper*/

/* HELPER CLASSES */
.last { margin-right:0!important; }
.profileimg {margin: 0 15px 15px 0; float: left; width: 22%;}
.fullwidth {width: 100%;}
.clear { clear:both; }
#content iframe, .module iframe {width: 100%;}

.row {display: inline-block; width: 100%; margin-bottom: 20px;}
.lineBreak {width: 100%; display: inline-block; height: 28px; border-bottom: solid thin #ccc; margin-bottom: 30px; }

.margin-top-40px { margin-top: 40px !important; }

.hidden { display: none !important; }


/*// GRID */
.grid-row:after, .grid-row:before {display: table; content: ''; clear: both; } .grid-row {margin: 0 -15px; display: block; /* max-width: 1248px; */ } .grid-row .c1 {width: 8.3333333333333%; padding: 0 15px; float: left; margin-bottom: 20px; } .grid-row .c2 {width: 16.666666666667%; padding: 0 15px; float: left; margin-bottom: 20px; } .grid-row .c3 {width: 25%; padding: 0 15px; float: left; margin-bottom: 20px; } .grid-row .c4 {width: 33.333333333333%; padding: 0 15px; float: left; margin-bottom: 20px; } .grid-row .c5 {width: 41.666666666667%; padding: 0 15px; float: left; margin-bottom: 20px; } .grid-row .c6 {width: 50%; padding: 0 15px; float: left; margin-bottom: 20px; } .grid-row .c7 {width: 58.333333333333%; padding: 0 15px; float: left; margin-bottom: 20px; } .grid-row .c8 {width: 66.666666666667%; padding: 0 15px; float: left; margin-bottom: 20px; } .grid-row .c9 {width: 75%; padding: 0 15px; float: left; margin-bottom: 20px; } .grid-row .c10 {width: 83.333333333333%; padding: 0 15px; float: left; margin-bottom: 20px; } .grid-row .c11 {width: 91.666666666667%; padding: 0 15px; float: left; margin-bottom: 20px; } .grid-row .c12 {width: 100%; padding: 0 15px; float: left; margin-bottom: 20px; }

.grid-row .c4:nth-child(3n+1) {
    clear: both;
}

.grid-row.contact-list .c4 {
    margin-bottom: 40px;
}



/* Fluid YouTube iframe */
.video-wrapper {
	position: relative;
	padding-bottom: 53.6%;
	padding-top: 25px;
	height: 0;
}
.video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}















/*----------------------------*/
/*	   	  Header style   	  */
/*----------------------------*/
/* Outer region for 100% styles */
#outer-header {  z-index: 999; position: fixed; background-color: #fff; margin-top: 0px;}
#inner-header { padding: 25px 0;}
#inner-header .logo IMG {height: 40px; -ms-interpolation-mode: bicubic;}
#inner-header .logo  {margin-left: 20px; -ms-interpolation-mode: bicubic;}
.mobLogo  {display: none;}








/*----------------------------*/
/* NAVIGATION STYLE + DROPDOWN */
/*----------------------------*/

#outer-navigation { background:#fff; position: fixed; z-index: 999; margin-top: 90px; 
	-webkit-box-shadow: 0px 4px 0px 0px rgba(0,0,0,0.05);
	-moz-box-shadow: 0px 4px 0px 0px rgba(0,0,0,0.05);
	box-shadow: 0px 4px 0px 0px rgba(0,0,0,0.05);}
	#inner-navigation {position: relative;}
	#inner-navigation li { float:left; }
	#inner-navigation li a { display:block; padding: 20px; font-weight: bold; color:#009fda; font-size: 1.1em; margin-right: 15px; }

	/* Hover state and hover */
	#inner-navigation li a:hover, #inner-navigation li.active a {color: #002776;}
	/* Active state for custom style */
	#inner-navigation li.active a { }

	/* Unique button styles */
	#inner-navigation li#l1 {}




	/*----------------------------*/
	/* NAVIGATION DROPDOWN */
	/*----------------------------*/
	.navigation, .navigation > ul {
		position: relative;
	}

	.navigation > li, .navigation > ul > li {
		display: inline-block;
	}

	.navigation > li > a, .navigation ul > li > a {
		display: block; 
		position:relative;
		color: #009fda; 
		padding: 20px;
		margin-right:15px; 
		font-size: 1.1em;
		text-decoration: none; 
		font-weight: bold;
		-webkit-transition:all 0.2s ease-in-out;
		-moz-transition:all 0.2s ease-in-out; 
		-o-transition:all 0.2s ease-in-out; 
		transition:all 0.2s ease-in-out;  
	}

	.navigation > li > a:first-child, .navigation > ul > li > a:first-child {
		padding-left: 0;
	}

	.navigation > li > a:hover, .navigation > li.active > a, 
	.navigation ul > li > a:hover, .navigation ul > li.active > a {
		color: #002776;
	}



	ul.dropdown > li.deskdrop > a:before {
		content:"";
		position:absolute;
		top:50%;
		margin-top: -2px;
		right:2px;
		color: #fff;
		width: 0;
		height: 0; 
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 5px solid #009fda;
	}

	ul.dropdown > li.deskdrop:hover > a:before {
		border-top: 5px solid #002776;
	}
	ul.dropdown > li {

	}
	ul.dropdown > li.arrow > a:after {
		content:"";
		position:absolute;
		bottom:0;
		color: #fff;
		left:50%;
		margin-left:-5px;
		width: 0;
		height: 0; 
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-bottom: 5px solid #002776;
	}

	ul.sub_menu	{ 
		background: #009fda;
		border-top: 5px solid #002776;
		padding: 20px 0px;
		width: 100%; 
		position: absolute;
		top: 100%; 
		left:0;
		z-index: 9999;
		height: auto;
	}

	ul.sub_menu > div > li { 
		position: relative;
		width: 100%;
		display: block;
		float: none!important;
		padding: 0!important;
	}

	ul.sub_menu > div {
		width: 20%;
		float: left;
		display: inline-block;
	}

	ul.sub_menu > div > li > a {
		color: #fff!important;
		width: auto;
		display: block;
		padding: 5px 0px 5px 40px!important;
		font-size: 0.9em!important;
	}

	ul.sub_menu > div > li > a:hover { color: #002776!important; }

	ul.dropdown ul li:last-child { border-bottom: none; }


	/* IE 6 & 7 Needs Inline Block */
	.dropdown:after {
		content: "";
		display: table;
		clear: both;
	}

	.mobSubLi {background: url(/cs/groups/hays_common/@uk/@content/documents/webassets/hays_1291555.png) 95% center no-repeat; background-size: 15px 15px;}
	.mobSubUl li {margin-left: 5%; width: 90%;}
	.mobSubUl li a {color: #009fda!important; border-bottom: solid 2px #009fda!important;}

/* 
LEVEL THREE
*/
ul.sub_menu ul { right: 50%; top:47px; margin-right: -125px; }
ul.dropdown li:hover > ul { visibility: visible; }
.sub_menu {display: none;}
#mobilenavigation ul.sub_menu {
	padding: 0;
}











/*----------------------------*/
/*	   	  Slideshow style  	  */
/*----------------------------*/
/* Outer region for 100% styles */
#outer-slideshow { position:relative; padding: 0; zoom:1; z-index: 1; margin-top: 180px; }
#inner-slideshow {position:relative; height:auto; z-index:0; zoom:1; }
#inner-slideshow .strapline { background:#fff; position:absolute; z-index:99; top:20px;  left:20px; padding:20px; }

/* Slideshow */
#inner-slideshow h1 { font-size:3.4em; font-weight:bold; color:#002776; text-transform: uppercase; margin: 0; line-height: 1em;  }
#inner-slideshow h2 { font-size:3.4em; font-weight:bold; color:#009fda; text-transform: uppercase; margin: 0;  line-height: 1em;}
















/*----------------------------*/
/*	 	 Content styles	      */
/*----------------------------*/
/* Outer region for 100% styles */
#index #outer-main {margin-top: 0px;}
#outer-main {margin-top: 130px; }
#inner-main {padding: 30px 0px 0px 0px;}


#content {}
#text {padding: 30px; background: #fff;}


#newContentBlock {margin-top: 30px; background: #fff;}
#newContentBlock h1 {
	font-size: 1.7em!important;
}


/*----------------------------*/
/*	Sidebar + module style    */
/*----------------------------*/

#sidebar-left {}
#sidebar-right { }

.module { position:relative; }
.module img {width: 100%!important; min-width: 100%!important;}




/*----------------------------*/
/*	HOME PAGE TEXT + VIDEO    */
/*----------------------------*/
#index .module.a #text {width: 65%; float: left; display: inline-block;}
#index .module.a .rightBlock  {width: 33%; float: right; display: inline-block; margin-bottom: 20px;}
#index .module.a .rightBlock img {width: 100%;}
#index .module.a .rightBlock #text  {width: 100%; float: none; display: block;}







#sidebar-right .module {margin-bottom: 30px;}


/* Individual module boxes and remove ones not getting used */
.module.a {}
.module.b {}
.module.c {}
.module.d {}



.module #text {background: #fff; padding: 20px; }
.module #text h1 {color: #002776; font-weight: 700!important; font-size: 1.6em; margin-bottom: 10px;}
.module #text h1.big {font-size: 2em; margin-bottom: 10px; text-transform: uppercase; }

.module #text h2 {color: #002776; font-weight: 700!important; font-size: 1.3em; }
.module #text h3 {color: #009fda; font-weight: 700!important; font-size: 1.2em; }
.module #text p {color: #666;  font-size: 1.1em; line-height: 1.4em; padding-bottom: 20px; }



.module.e {}
.module.f {}
.module.g {}
.module.h {}











/* STANDARD BUTTON STYLE */
.button {padding: 15px 25px; background: #009fda!important; width: auto; display: inline-block; margin: 0px 0!important; 
	font-weight: bold; color: #fff!important;
	text-decoration: none!important;
	-webkit-transition:all 0.2s ease-in-out;
	-moz-transition:all 0.2s ease-in-out; 
	-o-transition:all 0.2s ease-in-out; 
	transition:all 0.2s ease-in-out;  }
	.button:hover {background: #002776!important; }







	/* MAIN DARK BLUE UNDERLINE TITLE */
	h1.title {color:#002776; font-size:2em!important; margin-top: 40px; margin-bottom:20px; padding-bottom: 10px; border-bottom: solid 3px #002776; font-weight: 700!important; text-transform: uppercase;}








	/* ========================================== */
	/* =========== MODULE BOX STYLES  =========== */
	/* ========================================== */


	#linkContainer, #caseContainer {overflow: hidden; } 

	#linkContainer .linkBlock, #caseContainer .caseBlock {
		background-color: #fff;
		width: 31.3%; margin: 10px 1%;
		float: left; height: auto; 

		-webkit-animation-duration: 1.5s;
		-moz-animation-duration: 1.5s; 
		-o-animation-duration: 1.5s; 
		animation-duration: 1.5s;
	}


	.no-opacity #linkContainer .linkBlock, .no-opacity #caseContainer .caseBlock {width: 31%; margin: 10px 1% 10px 1%;}

	#linkContainer .linkBlock img, #caseContainer .caseBlock img {width: 100%;}

	.linkBlock .linkText, .caseBlock .caseText {padding: 20px;}
	#linkContainer .linkBlock h1 {color: #002776; font-weight: 700!important; font-size: 1.6em; margin-bottom: 10px;}
	#caseContainer .caseBlock h1 {color: #002776; font-weight: 700!important; font-size: 1.6em; margin-bottom: 0px;}
	#linkContainer .linkBlock h2, #caseContainer .caseBlock h2 {color: #009fda; font-weight: 700!important; font-size: 1.2em; margin-bottom: 10px;}
	#linkContainer .linkBlock p, #caseContainer .caseBlock p  {
		color: #333333; font-size: 1em; font-weight: 300; line-height: 1.4em; margin-top: 15px; padding-bottom: 20px;
	}


	.caseBlock #flag {width: 40px; position: absolute; right: 20px; bottom: 20px; }


	.module p.intro {color: #777; font-size: 1.1em; background: #fff; padding: 20px; font-weight: lighter; line-height: 1.4em; margin-bottom: 10px; width: 70%; float: left;}
	.module p.intro a {color:#009fda; text-decoration:none; 
		-webkit-transition:all 0.2s ease-in-out;
		-moz-transition:all 0.2s ease-in-out; 
		-o-transition:all 0.2s ease-in-out; 
		transition:all 0.2s ease-in-out;}
		.module p.intro a:hover {color:#002776;}







		/* =========== FILTER STYLES  =========== */

		#filterContainer {width: 100%; display: inline-block; position: relative; padding-bottom: 20px;}
		#filterSelect i.glyphicons:before { color: #fff; font-size: 1.2em; }
		#filterSelect {position: relative; float: right; margin-right: 4%; background-color: #009fda;
			padding: 20px; color: #fff; font-size: 1.2em; font-weight: bold; cursor: pointer;
			-moz-box-sizing: border-box; box-sizing: border-box;
			-webkit-transition:all 0.2s ease-in-out;
			-moz-transition:all 0.2s ease-in-out; 
			-o-transition:all 0.2s ease-in-out; 
			transition:all 0.2s ease-in-out;}
			#filterSelect:hover {background-color: #002776; }

			#filterContainer #filterOptions {  display: none; height: auto; background-color: #fff; padding: 20px; z-index: 99;  width: 100%; margin-top: 10px;
				-moz-box-sizing: border-box; box-sizing: border-box;}

				#filterOptions h3 {color: #aaa; font-weight: bold;  width: auto; font-size: 1.2em; line-height: 1em; margin-bottom: 4px; }
				#filterOptions ul {width: 100%; display: inline-block; padding: 0;}
				#filterOptions ul li { display: inline-block; color: #009fda; font-weight: bold; width: 23%; cursor: pointer; padding: 0;
					background-image: none; padding-left: 0px;}
					#filterOptions ul li.active {color: #002776; }


					#filterOptions a.close {
						position: absolute;
						top: 20px;
						right: 15px;
						color: #ccc;
						padding: 3px 7px;
						cursor: pointer;
						font-size: 1.2em;
						border: 3px solid #ccc;
						border-radius: 50%;

					}



					/* =========== CASE STUDIES LANGUAGE BUTTONS  =========== */

					#langButtons {margin-bottom: 20px;}
					#langButtons .button {margin-right: 10px!important; cursor: pointer; font-weight: bold; background: #eee!important; color: #009fda!important;}
					#langButtons .button.active {background: #002776!important; color: #fff!important;}
					#langButtons .button:hover {background: #ddd!important; }
					#langButtons .button.active:hover {background: #002776!important; }




					/* =========== NEXT/PREV BUTTONS  =========== */

					#nextPrev .next {width: 50%; text-align: right; display: inline-block; float: right;}
					#nextPrev .prev {width: 50%; text-align: left; display: inline-block; float: left;}






					/* =========== RIGHT BLOCK CONTACT DETAILS STYLE  =========== */

					.contactRow {display: inline-block; width: 100%; margin: 0px 0 10px 0;}
					.contactRow .icon {width: 20%; float: left;}
					.contactRow .icon img {width: 100%;}

					.contactRow a {color: #009fda; font-weight: bold; }
					.contactRow .info {width: 75%; float: right;  padding-top: 15px;}







					/* =========== CASE STUDIES LANGUAGE BUTTONS  =========== */

					#content .articleList ul {list-style-type: none!important;}
					#content .articleList ul li  {}
					#content .articleList ul li a {color: #009fda!important; font-weight: bolder; text-decoration: none; }
					#content .articleList ul li:hover a {color: #002776!important;  }



					.module table td {vertical-align: middle!important;}
					.module table td p {padding: 0!important;}
					.module table i {color: #002776; font-size: 3.5em; padding: 10px 20px 10px 10px;}




					.break {
						-ms-word-break: break-all;
						word-break: break-all;
						word-break: break-word; 
						-webkit-hyphens: auto;
						-moz-hyphens: auto;
						hyphens: auto;
					}











					#social {float: right;}
					#social div {width: 40px; height: 40px; margin-left: 15px;  float: right; display: inline-block;}
					#social #linkedIn {background: url(/cs/groups/hays_common/@uk/@content/documents/webassets/hays_1295937.png);
						background-position: top;
						background-size: 40px 80px;
						-webkit-transition:all 0.2s ease-in-out;
						-moz-transition:all 0.2s ease-in-out; 
						-o-transition:all 0.2s ease-in-out; 
						transition:all 0.2s ease-in-out;}
						#social #twitter {background: url(/cs/groups/hays_common/@uk/@content/documents/webassets/hays_1295935.png);
							background-position: top; 
							background-size: 40px 80px;
							-webkit-transition:all 0.2s ease-in-out;
							-moz-transition:all 0.2s ease-in-out; 
							-o-transition:all 0.2s ease-in-out; 
							transition:all 0.2s ease-in-out;}

							#social #linkedIn:hover {background-position: bottom;}
							#social #twitter:hover {
								background-position: bottom;
							}








							/*----------------------------*/
							/*    Client footer styles	  */
							/*----------------------------*/
							/* Outer region for 100% styles */
							#outer-clientfooter {}
							#inner-clientfooter {padding-bottom: 20px;}



							/*------------------------*/
							/*	 Hays footer styles	  */
							/*------------------------*/
							/* Outer region for 100% styles */
							#outer-footer {font-family: 'Arial', Helvetica, sans-serif ; background:#fff; border-top:1px solid #eee; float: left; }
							#inner-footer { margin:0 auto 0 auto;padding: 30px 0;}
							#inner-footer .copyright {font-family: Arial, Helvetica, sans-serif!important; display: inline-block; float: right; text-align: right; }
							#inner-footer #hayslogo {display: none; }
							#inner-footer #disclaimer {display: inline-block; width: 65%; float:left;  font-size:0.8em; text-align:left; color:#777; }

							#inner-footer p { float:right; color:#aaa; }
							#inner-footer span { color:#333; }
							#inner-footer a { color:#333; padding: 0 10px; }
							#inner-footer a:hover { color: #000;}

							#inner-footer .addthis_toolbox {display: none!important;}


							/*----------------------------*/
							/*	 	   Typography	      */
							/*----------------------------*/
							/* Main Content */
							#text p, #text ul { margin:0px 0px 10px 0px; font-size: 1.1em; line-height: 1.4em; color: #666;}
							#text em{font-style: italic;}
							#text a{ color:#009fda; text-decoration:none; 
								-webkit-transition:all 0.2s ease-in-out;
								-moz-transition:all 0.2s ease-in-out; 
								-o-transition:all 0.2s ease-in-out; 
								transition:all 0.2s ease-in-out;}
								#text a:hover { color:#002776; text-decoration:none; }
								#text ol {list-style-type: decimal!important; padding: 10px 10px 10px 20px;}

								#text ul {list-style-type: none; padding: 10px 10px 10px 20px;}
								#text li {line-height: 1.4em; padding: 10px 0;
									background-image: url(/cs/groups/hays_common/@uk/@content/documents/webassets/hays_1291523.png);
									background-repeat: no-repeat;
									background-position: 0px center; 
									padding-left: 30px; }

									#text h1, #text h2,   #text h3,   #text h4,  #text h5 { margin:0px 0px 10px 0px; font-weight:bolder; }
									#text h1 { color:#002776; font-size:2.4em; margin-bottom:10px; }
									#text h2 { color:#002776; font-size:1.8em; margin-bottom:10px; }
									#text h3 { color:#009fda; font-size:1.3em; }
									#text h4 { color:#002776; font-size:1.1em; }
									#text h5 { color:#888; font-size:1.3em; }

									/* Client footer */
									#inner-clientfooter h1 { }

									/*---------------------------------------------*/
									/*	 	   Page: Google map API			       */
									/*---------------------------------------------*/

									#map_canvas {
										height: 530px;
										width: 76%;
										z-index: 10;
										float: left;
										margin-right: 2%;
									}
									#map_canvas img, #map_canvas embed, #map_canvas object { max-width:none;}
									#buttons {
										margin: 0;
										padding: 0;
										position: relative;
										height: 400px;
										float: right;
										width: 21%;
										display: none;
									}
									#buttons a {
										margin-right: 10px;
										width: 44.5%;
										display: block;
										float: left;
										font-weight: bold;
										font-size: 0.75em;
									}

									/* EXPAND AND CLOSE FAQ */
									.expand {background: url(/cs/groups/hays_common/@uk/@content/documents/webassets/hays_1291553.png) 97% center no-repeat #eee; background-size: 18px 18px; color: #009fda!important; font-weight: bold; 
										text-decoration: none!important; padding: 14px 40px 14px 14px; margin: 15px 0px;
										transition:all 0.2s ease-in-out; font-size: 1.4em;
										-webkit-transition:all 0.2s ease-in-out;
										-moz-transition:all 0.2s ease-in-out;
										-o-transition:all 0.2s ease-in-out; cursor: pointer;}

										.expand:hover {background: url(/cs/groups/hays_common/@uk/@content/documents/webassets/hays_1291553.png) 97% center no-repeat #ddd; background-size: 18px 18px;  color: #002776!important; }
										.expand.open {background: url(/cs/groups/hays_common/@uk/@content/documents/webassets/hays_1291554.png) 97% center no-repeat #f5f5f5; background-size: 18px 18px; color: #009fda; }
										.expand.open:hover {background-size: 18px 18px; color: #002776!important; }
										.collapse {display: none;}
										.collapse:after {content: ""; display: table; clear: both; }
										.collapse p {padding: 0px;}











										/* HIDE NAV */
										.flex-control-nav, .flex-direction-nav {display:none;} 
										
										/* Browser Resets */
										.flex-container a:active,#outer-slideshow a:active,.flex-container a:focus,#outer-slideshow a:focus  {outline: none;}
										.flex-control-nav,.flex-direction-nav {margin: 0; padding: 0; list-style: none;} 

/* FlexSlider Necessary Styles
*********************************/
#outer-slideshow #inner-slideshow > img {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
#outer-slideshow #inner-slideshow img {width: 100%; display: none;}
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the #inner-slideshow element */
#inner-slideshow:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} 
html[xmlns] #inner-slideshow {display: block;} 
* html #inner-slideshow {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
* include js that eliminates this class on page load */
.no-js #inner-slideshow > li:first-child {display: block;}





.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
.loading .flex-viewport {max-height: 300px;}
.carousel li {margin-right: 5px}

/* Direction Nav */
.flex-direction-nav {*height: 0;}
.flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block; position: absolute; top: 50%; z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease;}
.flex-direction-nav .flex-next {background-position: 100% 0; right: -36px; }
.flex-direction-nav .flex-prev {left: -36px;}
#outer-slideshow:hover .flex-next {opacity: 0.8; right: 5px;}
#outer-slideshow:hover .flex-prev {opacity: 0.8; left: 5px;}
#outer-slideshow:hover .flex-next:hover, #outer-slideshow:hover .flex-prev:hover {opacity: 1;}
.flex-direction-nav .flex-disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;}

/* Control Nav */
.flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center;}
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);}
.flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }

.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .flex-active {opacity: 1; cursor: default;}












/*----------------------------*/
/*	  MOBILE ELEMENTS 	  	  */
/*----------------------------*/
.show {display: none;}

ul#mobilenavigation, #mobilenav, #topbar {display: none;}
#mobilenav {overflow: auto; width:80%; position: fixed; top: 0; right: -80%; height: 100%; background: #f9f9f9; font-weight:normal; font-size: 1em;
	-webkit-transition: all 400ms cubic-bezier(0.720, 0.080, 0.210, 1); /* older webkit */
	-webkit-transition: all 400ms cubic-bezier(0.720, 0.080, 0.210, 1.250); 
	-moz-transition: all 400ms cubic-bezier(0.720, 0.080, 0.210, 1.250); 
	-o-transition: all 400ms cubic-bezier(0.720, 0.080, 0.210, 1.250); 
	transition: all 400ms cubic-bezier(0.720, 0.080, 0.210, 1.250); /* custom */
}


ul#mobilenavigation h5 {display: none; }

/* Mobile navigation button */
ul#mobilenavigation {
	position:relative;
	float:left;
	width: 100%;
	padding-top: 30px;
}
/* Mobile navigation buttons */
ul#mobilenavigation li a {
	width:90%;
	min-width:90%;
	margin-left: 5%;
	overflow:hidden;
	line-height:40px;
	padding-top: 15px;
	text-indent: 10px;
	text-decoration:none;
	color:#002776;
	font-weight: bold;
	float:left;
	border-bottom:1px solid #002776;
	position: relative;
	-webkit-transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out; 
	-o-transition:all 0.3s ease-in-out; 
	transition:all 0.3s ease-in-out;  
}
ul#mobilenavigation li a:hover {
	background-color:#fff!important;
	color: #009fda;
}

#topbar {display: none;}






@media handheld, only screen and (max-width: 1440px) {

	#inner-main {padding: 20px; }

	ul.sub_menu > li { 
		position: relative;
		width: auto;
		display: block;
		width: 17%;
	}

	#social {margin-right: 10px;}

	h1.title { margin: 20px;  }

	#inner-footer #disclaimer {padding: 0 20px; }

}




@media handheld, only screen and (max-width: 1170px) {

	#wrapper {width: auto;}

	.contactRow {display: inline-block; width: 100%; margin: 0px 0 10px 0px;}

	.contactRow .icon {width: 100%; margin-left: 30% float: none; font-size: 3.5em; color: #002776; text-align: left;}
	.contactRow .icon img {width: 40%!important; min-width: 40%!important;}

	.contactRow a {color: #009fda; font-weight: bold; }
	.contactRow .info {width: 100%; float: none; text-align: left; padding-top: 15px;}

	ul.sub_menu > li { 
		position: relative;
		width: auto;
		display: block;
		width: 20%;
	}

}






@media handheld, only screen and (max-width: 1024px) {

	/* START OF SLIDEOUT NAV */
	.show {display: block!important; }
	#topbar, #wrapper {
		-webkit-transition: all 400ms cubic-bezier(0.720, 0.080, 0.210, 1); /* older webkit */
		-webkit-transition: all 400ms cubic-bezier(0.720, 0.080, 0.210, 1.250); 
		-moz-transition: all 400ms cubic-bezier(0.720, 0.080, 0.210, 1.250); 
		-o-transition: all 400ms cubic-bezier(0.720, 0.080, 0.210, 1.250); 
	transition: all 400ms cubic-bezier(0.720, 0.080, 0.210, 1.250); /* custom */	}

	#outer-slideshow { margin-top:70px; }
	#inner-slideshow {height: auto;}

	#outer-main {margin-top: 50px; }
	#sidebar-left {margin-top: 0px; }

	#inner-header .logo  {display: none;}
	#inner-header {padding: 15px 0;}

	#topbar {
		position: fixed; 
		background-color:#fff; 
		height:75px; 
		width:100%; 
		z-index: 9999999;
		top: 0;
		-webkit-box-shadow: 0px 4px 0px 0px rgba(0,0,0,0.05);
		-moz-box-shadow: 0px 4px 0px 0px rgba(0,0,0,0.05);
		box-shadow: 0px 4px 0px 0px rgba(0,0,0,0.05);
		/*position: absolute; height:55px!important; width:100%;*/ z-index: 999999; display: block;
	}

	.Menu {
		color: #009fda;
		font-size: 2.7em;
		right: 5px;
		top: 5px;
		padding: 0px 20px;
		position: absolute;
		height: 100%;
		line-height: 130%;
		z-index: 9999;
		cursor: pointer;
		-webkit-transition:all 0.2s ease-in-out;
		-moz-transition:all 0.2s ease-in-out; 
		-o-transition:all 0.2s ease-in-out; 
		transition:all 0.2s ease-in-out;  
	}
	.nav-open .Menu, .Menu:hover {color: #002776!important; }

	.mobLogo  {display: block;  position: relative; margin: 20px 0px 0 30px;  height: 35px; float: left;  }
	.mobLogo IMG {height: 35px; }

	#mobilenavigation a.close {
		position: absolute;
		top: 14px;
		right: 15px;
		color: #ccc;
		padding: 3px 7px;
		cursor: pointer;
		z-index: 9999;
		font-size: 1.2em;
		border: 3px solid #ccc;
		border-radius: 50%;
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
	}

	#wrapper { padding:10px; position: relative; width: auto; padding: 0; }

	#container {overflow-x: hidden!important;}
	.nav-open #container {overflow: hidden!important; height: 100%;}
	.nav-open #mobilenav {
		transform:translate(-100%,0);
		-webkit-transform:translate(-100%,0); 
		-moz-transform:translate(-100%,0);
		-o-transform:translate(-100%,0);	}
		.nav-open #wrapper, .nav-open #topbar {
			transform:translate(-80%,0); 
			-webkit-transform:translate(-80%,0); 
			-moz-transform:translate(-80%,0);	
			-o-transform:translate(-80%,0);	
			box-shadow: -15px 0px 70px rgba(0,0,0,0.08); }
			/* END OF SLIDEOUT NAV */


			ul#tabnav li a {padding: 20px 0px; text-indent: 20px; margin: 5px 0px;}


			#outer-navigation,  #inner-navigation
			{display: none;}



			#inner-slideshow h1 { font-size:2em; }
			#inner-slideshow h2 { font-size:2em;}

			.module #text h1.big { font-size:1.2em; }


		}





		@media handheld, only screen and (max-width: 770px) {

			body, body#index {font-size: 1em; background: #f5f5f5!important; }

			body, #wrapper, #outer-topnavigation, #outer-header, #outer-navigation, #outer-slideshow, #outer-main, #inner-main, #outer-clientfooter, #outer-footer,#inner-topnavigation, #inner-header, #inner-navigation, #inner-slideshow, #inner-main, #inner-bottomnavigation, #inner-clientfooter, #inner-footer, #sidebar-left, #sidebar-right, #content, #text, ul#tabnav li a, ul#tabnav li  {
				width: 100%;
				min-width: 0;
				margin-left: 0px;
				margin-right: 0px;
				padding-left: 0px;
				padding-right: 0px;
				margin: 0;
				padding: 0;
			}
            
            .grid-row .c1 { width: 16.666666666667%; } .grid-row .c2 { width: 50%; } .grid-row .c3 { width: 50%; } .grid-row .c4 { width: 100%; } .grid-row .c5 { width: 100%; } .grid-row .c6 { width: 100%; } .grid-row .c7 { width: 100%; } .grid-row .c8 { width: 100%; } .grid-row .c9 { width: 100%; } .grid-row .c10 { width: 100%; } .grid-row .c11 { width: 100%; } .grid-row .c12 { width: 100%; }

			#inner-topnavigation, #outer-navigation, #outer-bottomnavigation,  #sideright-navigation, #inner-bottomnavigation, #inner-navigation, #headernavigation, #inner-languagebar
			{ display:none; }
			#map_canvas {width: 100%;}
			#buttons {display: none!important;}
			#container {overflow-x: hidden!important;}
			#wrapper {padding: 0; position: relative; width: auto;}
			#text {padding: 10px; background: #fff;}


			.module #text h1.big { 
	/*-ms-word-break: break-all;
	word-break: break-all;
	word-break: break-word; 
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;*/
}

#newContentBlock {width: 100%;}


#inner-slideshow h1 { font-size:1em; }
#inner-slideshow h2 { font-size:1em;}


#sidebar-right {margin: 20px 0px;}
#outer-slideshow, #outer-main {margin-top: 70px;}
#inner-slideshow .strapline {font-size: 2em;}

#outer-header {position: relative;}
#content, #sidebar-left {padding: 0px;}

#inner-clientfooter {padding: 0px 20px;}

#outer-footer {font-size: 0.8em; padding: 20px 0;}
#sidebar-left p.intro {width: 100%;}


#linkContainer .linkBlock, #caseContainer .caseBlock {
	width: 100%; margin: 10px 0%;
}


ul#tabnav li a {padding: 20px 0px; text-indent: 20px; margin: 5px 0px;}
.module.c p.intro {width: 100%; margin-bottom: 70px;}

#filterContainer {width: 100%;}
#filterSelect {position: relative; margin-right: 0%; width: 100%;}
#filterSelect:hover {background-color: #002776; }

#filterContainer #filterOptions {  display: none; height: auto; background-color: #fff; padding: 20px; z-index: 99;  width: 100%; margin-top: 10px;
	-moz-box-sizing: border-box; box-sizing: border-box;}

	#filterOptions h3 {color: #666; font-weight: bold;  width: auto; font-size: 1em; line-height: 1em; margin-bottom: 4px; }
	#filterOptions ul {width: 100%; display: inline-block; }
	#filterOptions ul li { width: 48%; }


	#filterOptions a.close {
		position: absolute;
		top: 20px;
		right: 15px;
		color: #ccc;
		padding: 3px 7px;
		cursor: pointer;
		font-size: 1.2em;
		border: 3px solid #ccc;
		border-radius: 50%;
	}



	#langButtons {margin-bottom: 20px;}
	#langButtons .button {margin-right: 10px!important; cursor: pointer; font-weight: bold; background: #eee!important; color: #009fda!important; width: 100%;}
	#langButtons .button.active {background: #002776!important; color: #fff!important;}
	#langButtons .button:hover {background: #ddd!important; }
	#langButtons .button.active:hover {background: #002776!important; }

	#nextPrev .next {width: 50%; text-align: right; display: inline-block; float: right;}
	#nextPrev .prev {width: 50%; text-align: left; display: inline-block; float: left;}


	#outer-main {margin-top: 3px; }
	#sidebar-left {margin-top: 30px; }


	#inner-main {padding: 10px;}


	

	#index .module.a #text {width: 100%; float: none; }
	#index .module.a .rightBlock  {width: 100%; float: none; margin-top: 20px; }
	#index .module.a .rightBlock #text  {width: 100%; float: none; display: block;}
	.contactRow .icon {width: 45px;}
	.contactRow .icon img {min-width: 100%; width: 100%!important;}


	h1.title { font-size: 1.5em !important;}
	#index h1.title {margin-top: 10px; }

	#text h1 {font-size: 1.5em!important;}

	#inner-footer .copyright {float: none; text-align: left; }
	#inner-footer #disclaimer { width: 100%; float:none;}

	#index #sidebar-left {margin-top: 30px; }
	#sidebar-left {margin-top: 70px; }



	div#cc-tag {margin-top: 20px;}
	a#cc-tag-button {padding: 20px;color: #009fda;font-weight: bold;}
	.cc-content {margin-bottom: 20px;}
	div#cc-modal-wrapper {color: #333;}
	div#cc-modal-wrapper a {color: #009fda;font-weight: bold;}
	div#cc-modal {padding: 25px;width: auto;color: #333!important;}
	div#cc-settingsmodal {padding: 20px;width: auto;color: #333!important;}
	div#cc-settingsmodal a {color: #009fda; font-weight: bold;}
	div#cc-settingsmodal a:hover, div#cc-settingsmodal a:active {color: #002776;}
	div#cc-settingsmodal label {margin-right: 10px;}
	#cc-settingsmodal li { margin: 20px 0px;}
	#cc-settingsmodal select { width: 100%; height: 30px; }
	#cc-settingsmodal label span { margin-left: 20px; }

}


@media handheld, only screen and (max-width: 420px) {
	#inner-slideshow .strapline {
		font-size: 1em;
	}
}



