@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src: local('Roboto'), local('Roboto-Regular'), url(/media/roboto-v30-latin-regular.ttf) format('truetype');
}

body, h1, h2, h3 {
	font-family: 'Roboto', sans-serif;
}

body {
	margin: 0;
	background-color:		#330033;
}

main {
	padding:			20px;
}

article {
	width:			calc((100% / 2) - 20px);
	background-color:		#ccc;
	float:			left;
	margin-left:		10px;
	margin-right:		10px;
	margin-bottom:		20px;
	border-top:			16px solid #ffffff;
	overflow:			hidden;
}

article p, article h2, article h3 {
	padding-left:		20px;
	padding-right:		20px;
}

p {
	line-height:		16pt;
}

img {
	width:			100%;
	height:			auto;
	transition: 		transform .25s, filter .25s ease-out;
}

img:hover {
	transform: 			scale(1.05);
	transition: 		transform .25s, visibility .25s ease-in;
}

img.nohover {
	transform:			none;
}

.hover {
	overflow: hidden;
	transform-origin: 0 0;
}


main, header, footer {
	max-width:			var(--standard-width);
}

footer {
	max-width:			calc(var(--standard-width) - 2 * 20px);
}

section, nav.sitemap {
	background-color:		#fff;
	margin:			0 auto;
	clear:			both;
	overflow:			hidden;
}

section, nav.sitemap, footer {
	padding:			20px;
}
	

section.magazine h2 {
	margin-left:		10px;
}

section.magazine article h2 {
	margin-left:		0px;
}

section.magazine {
	width:			calc(100% - 20px);
	padding:			10px;
}


li {
	margin-right: 20px;
}


nav li {
	a-list-style:			none;
}



nav.page li a {
	height:			80px;
	width:			calc(100% + 20px);
	display:			flex;
	align-items:		center;
	justify-content:		left;
	border-bottom:		1px solid #000;
	margin-left:		-40px;
	padding-left:		20px;
}



a {
	color:			#000;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}


article li {
	line-height:	18pt;
}



nav.sitemap {
	max-width:			calc( var(--standard-width) - 2 * 20px );
	background-color:		#efefef;
	padding:			20px;
	line-height:		18pt;
	margin-top: 		-20px;
}

nav.sitemap ul li:before {
	content:			'\003E';
}

nav.sitemap ul {
	float:			left;
}

nav a:hover {
	background-color:		#cccccc;
}



/* ... */



.separator {
	max-width:			var(--standard-width);
	background-color:		#ffffff;
	height:			16px;
	margin:			0 auto;
}

.corporate-content {
	background-color:		#ffffff;
	margin-top: -20px;
}

.bold {
	font-family:		'Roboto', sans-serif;
	font-weight:		800;
	font-size:			32pt;
}


a.button {
	border:			2px solid #000;
	text-decoration:		none;
	padding:			20px;
}



:root {
	--standard-width: 	1400px;
	--standard-padding:	20px;
}

body {
	font-family:		sans-serif;
	margin: 			0;
	background-color: 	#999;
	color:			#000;
}

header {
	background-color:		#fff;
	margin:			0;
}

main, header, footer {
	margin:			0 auto;
	overflow:			hidden;
}


/* Responsiveness */

.desktop {
	display:			block;
}
	
.mobile  {
	display:			none;
}

@media screen and (max-width: 1400px) {
	main {
		padding:		0;
	}
}


@media screen and (max-width: 900px) {
	
	section.magazine {
		width:		calc(100% - 0px);
	}
	
	section.magazine article {
		width:		calc(100% - 40px);
		float:		none;
		margin-left: 	10px;
	}
	
	section.magazine article h2 {
		margin-left:	0px;
	}
	
	main {
		padding:		0;
	}

	.contact {
		left: 20px;
	}
	
	.desktop {
		display:		none;
	}

	.mobile {
		display:		block;
	}
}






/* Cookie Message */

#cookiemessage {
	border-top: 1px solid #fff;
	background: rgba(51, 51, 51, 0.9);	
	color: #fff;
	position:fixed;
	bottom: 0px; 
	z-index: 100; 
	width: 100%; 
	font-size: 11pt; 
	line-height: 12pt;
}

#cookiemessage  table {
	padding: 20px;
}

#cookiemessage input {
	background-color: #ffff00;
	padding: 10px 30px 10px 30px;
	color: #333;
	border: none;
	font-size: 11pt;
	cursor:pointer;
	margin-left: 20px;
	margin-right: 20px;
}

#cookiemessage a {
	color: #fff;
	text-decoration: underline;
}

#cookiemessageCloser {
	color: #777;
	font: 14px/100% arial, sans-serif;
	position: absolute;
	right: 5px;
	text-decoration: none;
	text-shadow: 0 1px 0 #fff;
	top: 5px;
	cursor:pointer;
	border: 1px solid #fff;
	padding: 5px;
	background: #ced6df; /* Old browsers */

}

#cookiemessageCloser:hover {
	border-bottom: 1px solid white;
	border-right: 1px solid white;
	border-top: 1px solid #7b92a9;
	border-left: 1px solid #7b92a9;
}



/* Menu */

/*Strip the ul of padding and list styling*/
			
#menu {
	background-color: #eeeeee;
	width: 100%;
	max-width: 1400px;
	z-index: 100;
}

#menu ul {
	list-style-type:none;
	margin:0;
	padding:0;
	position: absolute;
}
/* Create a horizontal list with spacing*/
.top li {
	a-display: inline-block;
	float: left;
	margin-right: 1px;
	list-style-type: none;
}

li {
	list-style-type: none;
}

/*Style for menu links*/
.top li a {
	display: block;
	a-min-width: 140px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	color: #000;
	background: #efefef;
	text-decoration: none;
	padding: 0 10px 0 10px;
}
/*Hover state for top level links*/
.top li:hover a {
	background: #3da434;
}
/*Style for dropdown links*/
.top li:hover ul a {
	background: #f3f3f3;
	color: #2f3036;
	height: 40px;
	line-height: 40px;
}
/*Hover state for dropdown links*/
.top li:hover ul a:hover {
	background: #3da434;
	color: #fff;
}
/*Hide dropdown links until they are needed*/
.top li ul {
	display: none;
}
/*Make dropdown links vertical*/
#menu li ul li {
	display: block;
	float: none;
}
/*Prevent text wrapping*/
#menu li ul li a {
	width: auto;
	min-width: 100px;
	padding: 0 20px;
}
/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
    display: block;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
	text-decoration: none;
	color: #fff;
	background: #19c589;
	text-align: center;
	display: none;
}
/*Hide checkbox*/
input[type=checkbox]{
	display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
	display: block;
}

/*Responsive Styles*/
@media screen and (max-width: 900px) {
	/*Make dropdown links appear inline*/
	ul {
		position: static;
		display: none;
		/* background-color: #ff0000; */
		width: 100%;
		display: table;
	}
	/*Create vertical spacing*/
	li, a {
		margin-bottom: 1px;
	}
	/*Make all menu links full width*/
	ul li, li a {
		width: 100%;
	}
	/*Display 'show menu' link*/
	.show-menu {
		display:block;
		width: 100%;
		pointer-events: auto;
		height: 60px;
		margin: 0 auto;
		a-position: relative;
	}
}




/* Icon */

#nav-icon {
	width: 50px;
	height: 35px;
	position: relative;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	-o-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	cursor: pointer;
}

#nav-icon span {
	display: block;
	position: absolute;
	height: 8px;
	width: 100%;
	background: #eeeeee;
	border-radius: 8px;
	opacity: 1;
	left: 0;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .25s ease-in-out;
	-moz-transition: .25s ease-in-out;
	-o-transition: .25s ease-in-out;
	transition: .25s ease-in-out;
}

#nav-icon span:nth-child(1) {
	top: 0px;
}

#nav-icon span:nth-child(2), #nav-icon span:nth-child(3) {
	top: 18px;
}

#nav-icon span:nth-child(4) {
	top: 36px;
}

#nav-icon.open span:nth-child(1) {
	top: 18px;
	width: 0%;
	left: 50%;
}

#nav-icon.open span:nth-child(2) {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}

#nav-icon.open span:nth-child(3) {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

#nav-icon.open span:nth-child(4) {
	top: 18px;
	width: 0%;
	left: 50%;
}








/* Flyout right */

.contact {
	margin: 0 auto;
	width: 240px;
	max-width: 1400px;
	position: fixed;
	top: 240px;
	z-index: 10;
	height: 100px;
	left: calc(var(--standard-width) / 2 + 50% - 240px);
}

.drawer {
	text-align: right;
	width: 240px;
	height: 100%;
	color: white;
	right: 0px;
	position: relative;
	text-align: right;
}

.drawer a {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	padding: 4px;
}

div.a, div.b {
	display: table-cell;
}

div.a {
	position: relative;
	width: 240px;
	padding-left: 4px;
}

div.a:hover {
	background-color: var(--cws-pink);
}

div.a img {
	float: right;
}

div.b  {
	display: none;
	float: left;
}

div.b a {
	height: 40px;
	text-align: center;
	vertical-align: middle;
	overflow: hidden;
}

div.a:hover div.b {
	display: block;
	padding-left: 10px;
	padding-right: 10px;
	transform: scale(1.1);
	transition: transform .25s, visibility .25s ease-in;
}