/* noto-sans-regular - latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/noto-sans-v7-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Noto Sans'), local('NotoSans'),
       url('../fonts/noto-sans-v7-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/noto-sans-v7-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/noto-sans-v7-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/noto-sans-v7-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/noto-sans-v7-latin-regular.svg#NotoSans') format('svg'); /* Legacy iOS */
}

/* noto-sans-700 - latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/noto-sans-v7-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Noto Sans Bold'), local('NotoSans-Bold'),
       url('../fonts/noto-sans-v7-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/noto-sans-v7-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/noto-sans-v7-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/noto-sans-v7-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/noto-sans-v7-latin-700.svg#NotoSans') format('svg'); /* Legacy iOS */
}

.cover {
	display:table;
	width: 100%;
	height: 100%;
}

body {
    font-family: 'Noto Sans', sans-serif;
	margin: 0;
	padding: 0;
	background: rgba(255,255,255,1);
	color: rgba(82,84,89,1);
	font-size: 16px;
}

.cover body {
	background: rgba(109,111,115,1);
	display: table-cell;
	vertical-align: middle;
}

header {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
}

.branding {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	background: rgba(109,111,115,1);
}

.wrapper {
	position: relative;
	top: 0;
	left: 0;
	max-width: 1000px;
	height: 352px;
	margin: 0 auto;
	background: url(../gfx/layout/branding_large.png) no-repeat right top;
}

.cover .wrapper {
	background: none;
}

.logo {
	position: absolute;
	top: 132px;
	left: 20px;
	width: 272px;
	height: 28px;
}

.subline {
	position: absolute;
	top: 160px;
	left: 130px;
	width: 356px;
	height: 20px;
}

.icon {
	position: absolute;
	top: 132px;
	left: 614px;
	width: 120px;
	height: 82px;
}

nav {
	position: relative;
	top: 0;
	left: 0;
	max-width: 1000px;
	height: auto;
	margin: 0 auto;
}

.menu {
	display: inline-block;
	margin: 0;
	padding: 0;
	font-size: 16px;
	list-style: none;
	position: relative;
	top: 12px;
	left: 132px;
	
}

.menu li {
	display: inline-block;
	padding: 0 8px;
	list-style: none;
	border-left: 1px solid rgba(82,84,89,1); 
}

.menu li.first {
	padding: 0 8px 0 0;
	border-left: none; 
}

.menu a {
	display: block;
	color: rgba(82,84,89,1);
	text-decoration: none;
}

.menu a.selected {
	font-weight: 700;
	color: rgba(140,170,194,1);
}

.menu a:hover {
	text-decoration: underline;
}

#menubutton {
	display: none
}

.menubutton { 
	display: none
}

.main {
	max-width: 1000px;
	margin: 0 auto;
}

article {
	margin: 0 auto;
	padding: 60px 0 80px 132px;
	font-size: 14px;
    line-height: 1.5em;
}

section  {
	display: table;
	width: 100%;
}

.text  {
	display: table-cell;
	vertical-align: top;
}

.textbox  {
	padding: 0 40px 0 0;
}

.image  {
	display: table-cell;
	vertical-align: top;
	width: 378px;
	height: auto;
}

.imagebox  {
	width: 378px;
	height: auto;
	background-color: rgba(109,111,115,1);
	margin: 2em 0 1em 0;
}

.imagebox img  {
	width: auto;
	max-width: 100%;
	height: auto;
}

h1 {
	margin: 0;
	font-weight: 700;
	font-size: 16px;
}

h2 {
	margin: 2em 0 0 0;
	font-weight: 700;
	font-size: 14px;
}

h3 {
	margin: 1em 0 0 0;
	font-weight: 700;
	font-size: 14px;
}

.legal h3 {
	margin: 1em 0 1em 0;
	font-weight: 700;
	font-size: 14px;
}

p {
	margin: 0 0 1em 0;
}

a {
	color: rgba(140,170,194,1);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

footer {
	margin: 0 0 0 132px;
	padding: 12px 0 40px 0;
	border-top: 1px solid  rgba(204,204,204,1);
	font-size: 14px;
	color: rgba(153,153,153,1);
}

footer p {
	margin: 0;
}

.top {
	float: right;
	margin-top: -42px;
}

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

	footer {
		padding: 12px 20px 40px 0;
	}
	
}

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

	.wrapper {
		height: 122px;
		background: url(../gfx/layout/branding_small.png) no-repeat right center;
	}

	.cover .wrapper {
		height: 352px;
		background: none;
	}

	.logo {
		top: 30px;
	}

	.cover .logo {
		top: 132px;
	}

	.subline {
		top: 58px;
	}

	.cover .subline {
		top: 160px;
	}

	.menu {
		left: 20px;
	}

	article {
		padding: 60px 0 80px 20px;
	}
	
	footer {
		margin: 0 0 0 20px;
	}
	
}

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

	.wrapper {
		background: none;
	}

	.icon {
		top: 224px;
		left: 132px;
	}

	.text  {
		display: block;
	}
	
	.textbox  {
		padding: 0;
	}

	.image  {
		display: block;
		width: auto;
	}

	.imagebox  {
		width: auto;
	}

	footer {
		margin: 0 20px;
		padding: 12px 0 40px 0;
	}

}

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

	.subline {
		left: 20px;
	}
	
	.menubutton {
		display: block;
		width: 30px;
		height: 41px;
		position: absolute;
		top: 10px;
		right: 20px;
		margin: 0;
		cursor: pointer;
	}

	.line { 
	   position: absolute; 
	   display: block; 
	   width: 30px; 
	   height: 4px; 
	   background: rgba(140,170,194,1); 
	   transform-origin: center; 
	   transition: 0.5s ease; 
		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		-ms-transition: all 0.5s ease;
		-o-transition: all 0.5s ease;
	}

	.line:nth-child(1) { top: 12px; }
	.line:nth-child(2) { top: 24px; }
	.line:nth-child(3) { top: 36px; }

	#menubutton:checked + .menubutton .line:nth-child(1){
	   transform: translateY(12px) rotate(-45deg);
	}

	#menubutton:checked + .menubutton .line:nth-child(2){
	   opacity:0;
	}

	#menubutton:checked + .menubutton .line:nth-child(3){
	   transform: translateY(-12px) rotate(45deg);
	}

	.menu {
		margin: 0 0 50px 0;
		top: 60px;
		left: 0;
		width: 100%;
		height: 0;
		overflow: hidden;
		background: rgba(255,255,255,1);
		box-shadow: 0px 6px 6px 0px rgba(0,0,0,0.2);
		-webkit-box-shadow: 0px 6px 6px 0px rgba(0,0,0,0.2);
		-moz-box-shadow: 0px 6px 6px 0px rgba(0,0,0,0.2);
		transition: 0.5s ease; 
		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		-ms-transition: all 0.5s ease;
		-o-transition: all 0.5s ease;
	}

	#menubutton:checked + .menubutton  + .menu { 
		height: 280px; 
	}
	
	.menu li,
	.menu li.first {
		display: block;
		padding: 0;
		border-left: none; 
	}
	
	.menu a {
		margin: 0 20px;
		padding: 15px 0;
		border-top: 1px solid rgba(210,212,215,1);
	}


	article {
		padding: 40px 20px 80px 20px;
	}

}

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

	.subline {
		width: 272px;
		height: 15px;
	}

}