/*
	(c)2012 - visuallizard.com

	General Layout Styles.
	Sets major blocking (and minor styles) to genaral elements in the template.
	All can be removed and started from scratch or elemnts can be adjusted individually.
*/
* { box-sizing: border-box; }
body { background: #fff; padding: 0; overflow: hidden; }
.cke { display: flex; flex-wrap: wrap; align-items: center; padding: 2em 0; border-bottom: 1px solid #999; }
#introduction .cke { border: none; }

.container {
/*
	Set site width only here and use this class to centre the content in browser window.
	Default width is 960px and can be changed in skeleton.css to maintain resposivnes.
*/
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 0;
	position: relative;
}



a#mn_open { display: none; }
#mobile-nav { display: none; }

.announcement {
	display: block;
	position: relative;
	width: 100%;
	padding: 30px 0;
	margin: 0;
	text-align: center;
	font-size: 20px;
	background: #f3f4f4;
}

/* Header */
header {
	display: block;
	position: relative;
	z-index: 5;
	width: 100%;
	padding: 0;
	margin: 0;
}
	header .container {
		display: flex;
		position: relative;
		justify-content: flex-start;
		column-gap: 1.25rem;
		flex-wrap: wrap;
		padding: 1em 0;
		border-bottom: 1px solid #d3d4d4;

	}
		header .container > h1 {
			display: block;
			position: relative;
			flex-basis: 25%;
			max-width: 25%;
			height: 95px;
			padding: 0;
			margin: 0;
		}
			header h1 a {
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				text-indent: -9999em;
				background: url("../../../img/v9/logo-wpg-no-tagline.svg") no-repeat center center;
				background-size: contain;
			}
		header .container ul.translate {
			display: flex;
			position: absolute;
			justify-content: flex-end;
			flex-wrap: wrap;
			column-gap: 0.625rem;
			top: 0.625rem;
			right: 0;
			width: 200px;
			list-style: none;
		}
			header .container ul.translate li {
				display: block;
				position: relative;
				padding: 0;
				margin: 0;
			}
			header .container ul.translate li:before {
				content: "|";
				display: block;
				position: absolute;
				left: -0.75rem;
				padding: 3px 5px;
				color: #000;
			}
			header .container ul.translate li:first-child:before {
				display: none;
			}
				header .container ul.translate li a {
					display: block;
					position: relative;
					padding: 0.25rem;
				}



/* !navigation styles */
nav {
	display: block;
	position: relative;
	flex-basis: 65%;
	flex-grow: 1;
	padding: 1.25rem 0 0 0;
	margin: 0;
}
		nav ul.nav_1 {
			display: flex;
			position: relative;
			justify-content: flex-start;
			flex-wrap: nowrap;
			column-gap: 0.625rem;
			width: 100%;
			padding: 25px 0 0 0;
			margin: 0;
			list-style: none;
			font-size: 1rem;
			font-weight: 400;
		}
			nav ul.nav_1 li {
				display: block;
				position: relative;
				flex-grow: 1;
				padding: 0;
				margin: 0;
			}
				nav ul.nav_1 li a {
					display: block;
					position: relative;
					width: 100%;
					padding: 10px 0;
					margin: 0;
					text-align: center;
					text-decoration: none;
					letter-spacing: 0.5px;
					color: #000;
				}
				nav ul.nav_1 > li:hover > a,
				nav ul.nav_1 > li.at > a { background: #c01327; color: #fff; }
				nav ul.nav_1 li > ul {
					display: none;
					position: absolute;
					z-index: 4;
					top: 100%;
					left: 0;
					width: 240px;
					padding: 0;
					margin: 0;
					border: 1px solid #c01327;
					font-size: 14px;
					text-transform: none;
					background: #fff;
				}
				nav ul.nav_1 li:last-child ul.nav_2 { left: auto; right: 0; }
				nav ul.nav_1 li:hover > ul.nav_2 { display: block; }
					nav ul.nav_1 li > ul.nav_2 li {
						display: block;
						position: relative;
						flex-grow: 0;
						width: 100%;
						padding: 0;
						margin: 0;
					}
						nav ul.nav_1 li > ul.nav_2 li a {
							display: block;
							position: relative;
							width: 100%;
							padding: 5px 10px;
							line-height: 1.25;
							text-align: left;
						}
						nav ul.nav_1 li > ul.nav_2 li:hover a,
						nav ul.nav_1 li > ul.nav_2 li.at a {
							background: #c01327;
							color: #fff;;
						}
						nav ul.nav_3 { display: none; }



/* ! Content area styles */
div.content {
	margin: 0 0 1.65rem 0;
}
div#mfm-contact .container {
	display: flex;
	position: relative;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	column-gap: 4%;
	row-gap: 1.25rem;
	max-width: 600px;
	padding: 0 0 2rem 0;
}
	div#mfm-contact .container > img {
		display: block;
		position: relative;
		flex-basis: 30%;
		max-width: 30%;
		padding: 0;
		margin: 0;
	}
	div#mfm-contact .container > div.content-body {
		display: block;
		position: relative;
		flex-basis: 50%;
		flex-grow: 1;
		padding: 0;
	}
		div#mfm-contact .container > div.content-body p {
			margin: 0;
		}


/* !Footer layout styles	 */
#subscribe {
	display: block;
	position: relative;
	clear: both;
	width: 100%;
	padding: 0;
	margin: 30px 0 0 0;
}
	#subscribe .container {
		display: flex;
		position: relative;
		justify-content: flex-start;
		flex-wrap: wrap;
		column-gap: 1%;
		row-gap: 1.25rem;
		max-width: 1200px;
		padding: 30px 0;
		border-top: 1px solid #d3d4d4;
	}
	#subscribe div.col {
		display: block;
		position: relative;
		z-index: 1;
		flex-basis: 30%;
		max-width: 30%;
		padding: 0;
		margin: 0;
	}
	#subscribe div.col:nth-child(2) {
		flex-grow: 1;
		max-width: 40%;
	}


footer {
	display: block;
	position: relative;
	width: 100%;
	padding: 0;
	margin: 0;
	background: #586876;
	color: #fff;
}
	footer > .container {
		display: flex;
		position: relative;
		flex-wrap: wrap;
		justify-content: space-between;
		column-gap: 2%;
		row-gap: 1.25rem;
		max-width: 1200px;
		padding: 1.65rem 0;
	}
		footer > .container div.col {
			display: block;
			position: relative;
			flex-basis: 18%;
			max-width: 18%;
			padding: 0 1rem;
		}
		footer > .container div.col:nth-child(1) {
			flex-basis: 60%;
			max-width: 100%;
			flex-grow: 1;
			padding: 0;
		}
			footer > .container div.col p.copyright {
				margin: 0;
			}
			footer > .container div.col > a {
				display: block;
				color: #fff;
			}
				footer > .container div.col > a img {
					display: block;
				}
				footer > .container div.col#mfm > a img {
					padding: 1rem 0;
					margin-top: 0;
				}
			footer > .container div.col ul.social {
				display: flex;
				position: relative;
				justify-content: flex-start;
				column-gap: 0.625rem;
				padding: 0;
				margin: 1rem 0;
				list-style: none;
			}
				footer > .container div.col ul.social li {

				}
					footer > .container div.col ul.social li a {
						display: block;
						color: #fff;
					}


/* Content layout (appearence) */
.content-display {

}
	.content-display:after { clear: both; }

	.content-display .content-block {
		width: 45%;
		margin: 0 2.5% 0 0;
	}

	/* 	single */
	.content-display.type-0 {

	}

	/* 	double */
	.content-display.type-1 .content-block {

	}

	/* double, wide-top */
	.content-display.type-2 .content-block:nth-child(3n+1) {
		width: 100%;
		margin: 0;
	}

	/* double, wide-bottom */
	.content-display.type-3 .content-block:nth-child(3n+3) {
		width: 100%;
		margin: 0;
	}


	/* triple */
	.content-display.type-4 .content-block {
		width: 30%;
		margin-right: 3%;
	}


/* Hide content that requires JavaScript unless JavaScript is running. */
body .requires-js { display: none; }
