/* CSS Document */

HTML {}
BODY {
	margin: 0;
	padding: 0;
	background-color: #FFF;
	font-family: 'Open Sans', sans-serif;
}
BODY.dark { background-color: #262626; }

H1 {
	font-size: 35px;
	line-height: 42px;
	font-weight: 300;
	color: #0a80c1;
	text-transform: uppercase;
	margin: 0;
	padding: 0;
}
BODY.dark H1 {
	font-size: 22px;
	line-height: 29px;
	font-weight: 600;
	color: #FFF;
	text-transform: uppercase;
	margin: 13px 0 0 0;
	padding: 0;
}
H2 {
	font-size: 26px;
	line-height: 32px;
	font-weight: 300;
	color: #0a80c1;
	text-transform: uppercase;
}
H3 {
	font-size: 18px;
	line-height: 26px;
	font-weight: 600;
	color: #0a80c1;
	text-transform: uppercase;
	margin: 0;
	padding: 0;
}
BODY.dark H3 {
	font-size: 18px;
	line-height: 26px;
	font-weight: 600;
	color: #FFF;
	text-transform: uppercase;
	margin: 0;
	padding: 0;
}
H4 {}
H5 {}
H6 {}

IMG { border: none; }
HR { border: none; border-bottom: solid 1px #666; }

.clr { clear:both; }

.width { width: 1140px; margin: 0 auto 0 auto; }

/*	ONE  *************************************************************** */

DIV.one_col { box-sizing: border-box; padding: 0 15px 0 15px; }

/*	TWO  *************************************************************** */

DIV.two_col {}
DIV.two_col .container { float: left; width: 50%; box-sizing: border-box; padding: 0 15px 0 15px; }

DIV.two_col .c_1 {}
DIV.two_col .c_2 {}

/*	THREE  *************************************************************** */

DIV.three_col {}
DIV.three_col .container { float: left; width: 33.3333%; box-sizing: border-box; padding: 0 15px 0 15px; }

DIV.three_col .c_1 {}
DIV.three_col .c_2 {}
DIV.three_col .c_3 {}

/*	FOUR   *************************************************************** */

DIV.four_col {}
DIV.four_col .container { float: left; width: 25%; box-sizing: border-box; padding: 0 15px 0 15px; }
 
DIV.four_col .c_1 {}
DIV.four_col .c_2 {}
DIV.four_col .c_3 {}
DIV.four_col .c_4 {}

/* ********************************************************************* */
/*	HEAD
/* ********************************************************************* */

#head {}

#head #logo {
	float: left;
	width: 177px;
	height: auto;
}
#head #logo IMG { width: 100%; height: auto; display: block; }

/*	MENU *************************************************************** */

#head #menu {
	float: right;
}
#head #menu .menutab { display: none; }

#head #menu > UL { float: right; width: auto; padding: 0; margin: 20px 25px 0 0; list-style: none; display: block; }
#head #menu > UL LI { float: left; display: block; }
#head #menu > UL LI A { 
	display: block; 
	padding: 10px 25px 10px 25px; 
	text-decoration: none;
	font-size: 14px;
	line-height: 14px;
	font-weight: 600;
	color: #FFF;
	text-transform: uppercase;
}
#head #menu > UL LI A:HOVER {}

#head #menu > UL LI > UL { display: none; position: absolute; margin: 0; padding: 0; }
#head #menu > UL LI > UL LI { float: none; }
#head #menu > UL LI > UL LI A {}
#head #menu > UL LI > UL LI A:HOVER {}

#head #menu UL LI UL LI UL { display: none; }
#head #menu UL LI UL LI UL LI {}
#head #menu UL LI UL LI UL LI A {}
#head #menu UL LI UL LI UL LI A:HOVER {}

/*	MENU DARK ********************************************************** */

#head #menu.dark UL LI A { 
	color: #666;
}
#head #menu.dark UL LI A:HOVER { color: #0a80c1; }

/*	MENU GOVERN ******************************************************** */

BODY.govern #head #menu UL LI A { 
	color: #FFF;
}
BODY.govern #head #menu UL LI A:HOVER { color: #ef7930; }

/*	MENU LEGAL ********************************************************* */

BODY.legal #head #menu UL LI A { 
	color: #FFF;
}
BODY.legal #head #menu UL LI A:HOVER { color: #d32e32; }

/*	TITLE ************************************************************** */

#head #title {
	float: left; 
	clear: right;
	margin: 85px 0 0 90px;
	width: 870px;
}
#head #title.center {
	text-align: center;
	width: 610px; 
}

/* ********************************************************************* */
/*	CONTENT
/* ********************************************************************* */

#content { padding: 20px 0 120px 0; }

#content #submenu {
	float: left;
	width: 177px;
	height: auto;
}
#content #submenu UL { margin: 0; padding: 2px 0 0 0; list-style: none; }
#content #submenu UL LI { display: block; margin: 0; padding: 0; }
#content #submenu UL LI A {
	display: inline-block;
	color: #FFF;
	font-size: 14px;
	line-height: 20px;
	margin: 10px 0 0 0;
	padding-right: 12px;
}
#content #submenu UL LI A:HOVER {
	background-position: right center;
	background-repeat: no-repeat;
	text-decoration: none;
}
/*	SUBMENU DARK ******************************************************* */
#content #submenu.dark UL LI A { color: #282828; }
/*	SUBMENU GOVERN ***************************************************** */
BODY.govern #content #submenu UL LI A:HOVER {
	background-image: url(../images/bullet-governance.jpg);
}
/*	SUBMENU LEGAL ****************************************************** */
BODY.legal #content #submenu UL LI A:HOVER {
	background-image: url(../images/bullet-legal.jpg);
}

#content #page {
	float: left; 
	margin: 0 0 0 90px;
	width: 870px;
}
#content #page .narrow { width: 610px; }

#content P {
	font-size: 13px;
	line-height: 18px;
	color: #282828;
	font-weight: 400;
}
BODY.dark #content P { color: #FFF; }

#content UL {}
#content UL LI {
	font-size: 13px;
	line-height: 18px;
	color: #282828;
	font-weight: 400;
}
BODY.dark #content UL LI { color: #FFF; }

#content OL {}
#content OL LI {
	font-size: 13px;
	line-height: 18px;
	color: #282828;
	font-weight: 400;
}
BODY.dark #content OL LI { color: #FFF; }

#content A { text-decoration: none; color: #000; }
#content A:HOVER { text-decoration: underline; }
BODY.dark #content A { color: #FFF; }
BODY.govern #content A { color: #ef7930; }
BODY.legal #content A { color: #d32e32; }

#content A.button { display: inline-block; padding: 8px 20px 8px 20px; color: #FFF; background-color: #0a80c1; text-transform: uppercase; }
#content A.button:HOVER { text-decoration: none; background-color: #000; }

BODY.govern #content A.button { background-color: #ef7930; color: #FFF; }
BODY.legal #content A.button { background-color: #d32e32; color: #FFF; }

BODY.govern #content A.button:HOVER { background-color: #000; color: #FFF; }
BODY.legal #content A.button:HOVER { background-color: #000; color: #FFF; }

/*	HOME *************************************************************** */

#content .home-strapline {
	font-size: 38px;
	line-height: 48px;
	font-weight: 300;
	color: #FFF;
	margin: 0;
	padding: 75px 0 75px 0;
	text-align: center;
}

#content .home-blocks {}
#content .home-blocks P { padding: 0; margin: 0; text-align: center; }
#content .home-blocks P.image { height: 60px; margin: 20px 0 20px 0; }
#content .home-blocks P.big {
	font-size: 32px;
	line-height: 38px;
	font-weight: 300;
	color: #FFF;
	text-transform: uppercase;
}
#content .home-blocks P.small {
	font-size: 12px;
	line-height: 18px;
	font-weight: 700;
	color: #FFF;
	text-transform: uppercase;
}
#content .home-blocks P A { color: #FFF; }
#content .home-blocks P A:HOVER { text-decoration: none; }

/*	VACANCIES ********************************************************** */

#content .vacancies .container { margin-bottom: 25px; }

/* ********************************************************************* */
/*	FOOTER
/* ********************************************************************* */

#foot {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url(../images/footer-search.jpg);
	background-position: center top;
	background-repeat: repeat-x;
	height: 60px;
}
BODY.govern #foot { background-image: url(../images/footer-goverance.jpg); }
BODY.legal #foot { background-image: url(../images/footer-legal.jpg); }

/* ********************************************************************* */
/* ********************************************************************* */
/* ********************************************************************* */

@media screen and (max-width: 1140px) {
	
	.width { width: 960px; }

	/* ********************************************************************* */
	/*	HEAD
	/* ********************************************************************* */
	
	#head {}
	
	/*	MENU *************************************************************** */
	
	#head #menu > UL LI A { 
		padding: 15px 17px 15px 17px; 
	}
	/*	TITLE ************************************************************** */
	
	#head #title {
		margin: 85px 0 0 40px;
		width: 740px;
	}
	
	/* ********************************************************************* */
	/*	CONTENT
	/* ********************************************************************* */
	
	#content {}
	
	#content #submenu {}
	#content #page {
		margin: 0 0 0 40px;
		width: 740px;
	}
	
}

@media screen and (max-width: 960px) {

	.width { width: 100%; }
	
	/*	ONE  *************************************************************** */
	/*	TWO  *************************************************************** */
	/*	THREE  *************************************************************** */
	/*	FOUR   *************************************************************** */
	
	DIV.four_col {}
	DIV.four_col .container { width: 50%; }

	/* ********************************************************************* */
	/*	HEAD
	/* ********************************************************************* */
	
	#head {}
	#head #logo { width: 130px; padding-left: 15px; }
	
	/*	MENU *************************************************************** */
	
	#head #menu { position: absolute; right: 0px; top: 0; bottom: 0; }
	#head #menu .menutab { float: left; display: block; font-size: 30px; line-height: 30px; color: #FFF; padding: 15px 15px 15px 15px; cursor: pointer; }
	
	#head #menu > UL { position: absolute; top: 0; right: 0; width: 300px; margin: 0 0 0 0; padding: 0 0 0 0; background-color: #999; box-shadow: 0 0 5px rgba(0,0,0,0.5); overflow: hidden; }
	#head #menu > UL LI { float: none; width: 300px; }
	#head #menu > UL LI A { 
		padding: 15px 25px 15px 25px; 
		font-size: 16px;
		line-height: 16px;
		color: #FFF;
		border-bottom: solid 1px #FFF;
		font-weight: 300;
		text-align: center;
	}
	#head #menu > UL LI A:HOVER {
		background-color: #888;
		color: #FFF;
	}
	
	#head #menu > UL LI > UL { display: block; position: static; margin: 0; }
	#head #menu > UL LI > UL LI { float: none; display: block; position: static; }
	#head #menu > UL LI > UL LI A { font-size: 14px; line-height: 14px; background-color: #888; }
	#head #menu > UL LI > UL LI A:HOVER { background-color: #777; }
	
	/*	MENU DARK ********************************************************** */
	#head #menu.dark UL LI A { color: #FF; }
	#head #menu.dark UL LI A:HOVER { color: #FFF; }
	/*	MENU GOVERN ******************************************************** */
	BODY.govern #head #menu UL LI A { color: #FFF; }
	BODY.govern #head #menu UL LI A:HOVER { color: #FFF; }
	/*	MENU LEGAL ********************************************************* */
	BODY.legal #head #menu UL LI A { color: #FFF; }
	BODY.legal #head #menu UL LI A:HOVER { color: #FFF; }
	
	/*	TITLE ************************************************************** */
	
	#head #title { clear: both; float: none; margin: 20px 0 0 0; width: auto; }
	#head #title.center { width: auto; }
	
	/* ********************************************************************* */
	/*	CONTENT
	/* ********************************************************************* */
	
	#content { padding: 20px 0 120px 0; }
	
	#content #submenu { display: none; }
	#content #page {
		float: none; 
		margin: 0 0 0 0;
		width: auto;
	}
	#content #page .narrow { width: auto; }

	/* ********************************************************************* */
	/*	FOOTER
	/* ********************************************************************* */
	
	#foot { height: 40px; }

}

@media screen and (max-width: 768px) {
	
	/*	ONE  *************************************************************** */
	/*	TWO  *************************************************************** */
	DIV.two_col {}
	DIV.two_col .container { float: none; width: 100%; }
	/*	THREE  *************************************************************** */
	DIV.three_col {}
	DIV.three_col .container { float: none; width: 100%; }
	/*	FOUR   *************************************************************** */
	DIV.four_col {}
	DIV.four_col .container { float: none; width: 100%; }

	/* ********************************************************************* */
	/*	HEAD
	/* ********************************************************************* */
	
	#head {}
	#head #logo { width: 100px; padding-left: 15px; }
	
	/* ********************************************************************* */
	/*	FOOTER
	/* ********************************************************************* */
	
	#foot { height: 30px; }

}

@media screen and (max-width: 480px) {

	/* ********************************************************************* */
	/*	HEAD
	/* ********************************************************************* */
	
	#head {}
	#head #logo { width: 80px; padding-left: 15px; }

	/* ********************************************************************* */
	/*	FOOTER
	/* ********************************************************************* */
	
	#foot { height: 20px; }

}

@media screen and (max-width: 380px) {

	/* ********************************************************************* */
	/*	HEAD
	/* ********************************************************************* */
	
	#head {}
	#head #logo { width: 60px; padding-left: 15px; }

	/* ********************************************************************* */
	/*	FOOTER
	/* ********************************************************************* */
	
	#foot { height: 15px; }

}