/* -- header & footer -- */

/* ###################### STRUCTURE ####################### */

body {margin:0;width:100%;height:100%;overflow:hidden;padding:64px 0 0 0;background:#fff;border-collapse:collapse;}

	header {float:left;clear:left;width:100%;background-color:#fff;box-shadow:0 3px 3px 0 rgba(0,0,0,0.4);z-index:10;position:fixed;top:0;left:0;}

		header > div {width:960px;margin-left:auto;margin-right:auto;}

	footer {float:left;clear:left;width:100%;background-color:#003399;}

		footer > div {width:960px;margin-left:auto;margin-right:auto;padding-bottom:2em;min-height:120px;}

/* ######################################################## */

/* -- header -- */
header > div > .svgLogo { float:left; height:4rem;}

/* -- ss variants -- */
header.ss > div > .svgLogo { float:left; height:2rem;}

/* -- nav -- */
nav { float:right; display:block; width:320px; height:4rem;}
nav > ul { display:flex; height:4rem; margin:0; padding:0;}
nav > ul > li { flex:1; display:flex; height:4rem; margin:0; padding:0; list-style-type:none;}
nav > ul > li > a { flex:1; vertical-align:middle; text-align:center; font:italic 0.9rem/4rem Sans-serif;}
nav > ul > li > a:link,
nav > ul > li > a:visited { color:#003399; background:#ffffff; box-shadow:inset 0px -8px 0px -4px #003399;}
nav > ul > li > a:hover,
nav > ul > li > a:active,
nav > ul > li > a:focus { color:#ffffff; background:#003399; box-shadow:inset 0px -8px 0px -4px #cc0000; text-decoration:none;}

	/* -- ss variants -- */
	.ss nav { width:320px; height:2rem;}
	.ss nav > ul { height:2rem;}
	.ss nav > ul > li { height:2rem;}
	.ss nav > ul > li > a { line-height:2rem;}
	.ss nav > ul > li > a:link,
	.ss nav > ul > li > a:visited { box-shadow:inset 0px -8px 0px -4px #003399; }
	.ss nav > ul > li > a:hover,
	.ss nav > ul > li > a:active,
	.ss nav > ul > li > a:focus { box-shadow:inset 0px -8px 0px -4px #cc0000; text-decoration:none;}


/* -- HAMBURGER MENU -- */
body{ overflow-y:scroll; }

/* Nav Trigger INPUT:Checkbox and LABEL */
input[type="checkbox"].nav-trigger { display:none; }
label[for="nav-trigger"] {	display:none; position:relative; left:-8px; top:12px; height:0px; width:30px; cursor: pointer; transition: 0.3s ease; }

/* footer */
footer { color:#6699cc;}
footer p.legal { padding:1em 0 0 0; font:normal 0.8em/1.2em Sans-serif; color:#6699cc;}


/* Media Queries */

@media screen and (min-width: 640px) and (max-width: 960px) {
	header > div,
	footer > div { width:100%; }
}

@media screen and (max-width: 640px) {
	
	/* header */
	header > div { width:100%; }

	label[for="nav-trigger"] { display:block; float:right; position:relative; height:4rem; }
		.ss label[for="nav-trigger"] { top:0rem; height:2rem; }

	nav,
		.ss nav { clear:both; position:relative; display:none; margin:0; width:0; height:3rem; }
	nav > ul,
		.ss nav > ul { display:block; margin:0; padding:0; width:100%; height:3rem; }
	nav > ul > li,
		.ss nav > ul > li { display:block; margin:0; padding:0; width:100%; height:3rem; list-style-type:none; }
	nav > ul > li > a,
		.ss nav > ul > li > a { display:block; margin:0; padding:0; width:100%; height:3rem; line-height:3rem; }
	nav > ul > li > a:link,
	nav > ul > li > a:visited,
		.ss nav > ul > li > a:link,
		.ss nav > ul > li > a:visited { color:#003399; background:#ffffff; border-bottom:0; border-top:1px solid #cccccc; text-decoration:none; }
	nav > ul > li > a:hover,
	nav > ul > li > a:active,
	nav > ul > li > a:focus,
		.ss nav > ul > li > a:hover,
		.ss nav > ul > li > a:active,
		.ss nav > ul > li > a:focus { color:#cc0000; background:#ffeeee; border-bottom:0; border-top:1px solid #cccccc; text-decoration:none; }

	.nav-trigger + label,
	nav { transition:left 0.2s; }
	/* Make the Magic Happen */
	.nav-trigger:checked + label {  }
	.nav-trigger:checked ~ nav { display:block; width:100%; }
	.nav-trigger:checked ~ nav > ul,
		.ss .nav-trigger:checked ~ nav > ul { }
	.nav-trigger:checked ~ nav > ul > li,
		.ss .nav-trigger:checked ~ nav > ul > li {  }
	.nav-trigger:checked ~ nav > ul > li > a,
		.ss .nav-trigger:checked ~ nav > ul > li > a {  }
	
	/* footer */
	footer > div { width:100%;}

	}