/* ==========================================================================
	Common
   ========================================================================== */
html {
	height: 100%;
}

body {
	background-color: #fff;
	color:#353535;
	font-family: open_sansregular, Verdana, Geneva, sans-serif;
	font-size: 62.5%;
	font-style: normal;
	font-weight: normal;
	overflow-y: scroll !important;
}

/* ==========================================================================
	Structure
   ========================================================================== */
.navigation {
	margin: 36px 0 0;
}

.content {
	margin: 0 auto;
	max-width: 1440px;
}

.header {
	margin-top: 60px;
	position: unset;
	width: 100%;
}

#video_background {
	margin: 0 auto;
	width: 100%;
}

.video-overlay {
	position: relative;
	display: none;
}

.video-overlay:after {
	content: "";
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgTWFjaW50b3NoIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjI4RkZBQTgzNzg1NzExRTU4NTQyODc3OUM4MTZGMUREIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjI4RkZBQTg0Nzg1NzExRTU4NTQyODc3OUM4MTZGMUREIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MjhGRkFBODE3ODU3MTFFNTg1NDI4Nzc5QzgxNkYxREQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MjhGRkFBODI3ODU3MTFFNTg1NDI4Nzc5QzgxNkYxREQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz66uHInAAAAIUlEQVR42mL5//8/AyMj42YGIGBigABfEMEIkoEBgAADAKvuBwVS8BAjAAAAAElFTkSuQmCC);
	background-size: 3px 3px;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.headerflag {
	display: none;
}

.headline {
	color: #000;
	text-align: center;
	z-index: 404;
}

.row.full.galerie {
	background: #0038BA;
	float: left;
	padding: 30px 0 40px;
	margin: 40px 0 60px 0;
}

.row.citation, .row.goal {
	background:  #0038BA;
	float: left;
	margin: 0 0 40px 0;
	max-width: 1440px;
	width: 100%;
}

.row.goal {
	padding: 48px;
}

.full {
	max-width: none !important;
}

.col-3 {
	margin: 0 0 20px;
}

.galerie .col-4 {
	width: 100%;
}

.col-6 {
	margin: 0 0 20px;
}

.col-12 {
	float: left;
	margin: 0;
	padding: 0 15px;
	width: 100%;
}

.whiteboxes {
	display: flex;
	justify-content: space-between;
}

.whiteboxes > :first-child {
	margin-left: 0;
}

.whitebox {
	background-color: #fff;
	flex: 1 1 0%;
	margin-left: 36px;
	margin-top: 48px;
	padding: 0 24px 24px;
}

.footer {
	background: #717171 none repeat scroll 0 0;
	color: #fff;
	float: left;
	margin: 30px 0 0;
	padding: 18px 0 0;
	width: 100%;
}

.mobile910, .mobile610, .mobile560 {
	display: block;
	float: left;
}

.desktop910, .desktop890, .desktop750, .desktop610, .desktop560 {
	display: none;
}

/* ==========================================================================
	Icons
   ========================================================================== */
@font-face {
	font-family: 'hipa2';
	src: url('../fonts/hipa2.eot?lae9yj');
	src: url('../fonts/hipa2.eot?lae9yj#iefix') format('embedded-opentype'), url('../fonts/hipa2.ttf?lae9yj') format('truetype'), url('../fonts/hipa2.woff?lae9yj') format('woff'), url('../fonts/hipa2.svg?lae9yj#hipa2') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'hipa2' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-twitter-with-circle:before {
	content: "\e900";
}

.icon-facebook-with-circle:before {
	content: "\e901";
}

.icon-angle-right:before {
	color: #0038BA;
	content: "\f105";
	font-weight: 800;
	margin: 0 4px 0 -16px;
	padding: 0 5px 0 0;
}

.icon-check:before {
	color: #009777;
	content: "\f00c";
	font-size: 2em;
}

/* ==========================================================================
	Fonts
   ========================================================================== */
@font-face {
	font-family: 'open_sansbold';
	src: url('../fonts/opensans-bold-webfont.eot');
	src: url('../fonts/opensans-bold-webfont.eot?#iefix') format('../fonts/embedded-opentype'), url('../fonts/opensans-bold-webfont.woff2') format('woff2'), url('../fonts/opensans-bold-webfont.woff') format('woff'), url('../fonts/opensans-bold-webfont.ttf') format('truetype'), url('../fonts/opensans-bold-webfont.svg#open_sansbold') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'open_sanssemibold';
	src: url('../fonts/opensans-semibold-webfont.eot');
	src: url('../fonts/opensans-semibold-webfont.eot?#iefix') format('../fonts/embedded-opentype'), url('../fonts/opensans-semibold-webfont.woff2') format('woff2'), url('../fonts/opensans-semibold-webfont.woff') format('woff'), url('../fonts/opensans-semibold-webfont.ttf') format('truetype'), url('../fonts/opensans-semibold-webfont.svg#open_sansbold') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'open_sansregular';
	src: url('../fonts/opensans-regular-webfont.eot');
	src: url('../fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/opensans-regular-webfont.woff2') format('woff2'), url('../fonts/opensans-regular-webfont.woff') format('woff'), url('../fonts/opensans-regular-webfont.ttf') format('truetype'), url('../fonts/opensans-regular-webfont.svg#open_sansregular') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* ==========================================================================
	Images
   ========================================================================== */
img {
	width: 100%;
}

img.logo {
	display: block !important;
	max-width: 206px;
}

#gn-menu img {
	float: right;
	padding: 6px 12px 0 0;
	width: 185px;
}

.col-4 img {
	display: none;
}

.galerie .col-4 img {
	display: block;
}

.col-4 .box img {
	display: block;
	max-width: 310px;
}

.col-6 img {
	display: none;
	margin: 4px 0 0;
}

.col-6.col-l img, .col-6.col-r img {
	display: block;
	margin: auto;
	width: 50%;
}

.col-12 img {
	margin: 0 auto;
	width: auto;
}
img.wide {
	width: 100%;
}

.col-12.desktop610 img, .col-12.desktop750 img {
	width: auto;
}
.col-12.mobile610 img, .col-12.mobile750 img {
	width: 100%;
}

.galerie img {
	margin: 0 0 30px 0;
}

.project img {
	width: 65%;
}

.orga img {
	width: 30%;
}

#hipavideo {
	width: 100%;
	margin: 17px 0 0 0;
}

/* ==========================================================================
	Headline
   ========================================================================== */
.content h1 {
	clear: both;
	float: left;
	font-family: "open_sansbold";
	font-size: 3em;
	margin: 20px 0;
	text-transform: uppercase;
	width: 100%;
}

h2 {
	color: #0038BA;
	font-family: "open_sansbold";
	font-size: 4em;
	font-weight: normal;
	margin: 0 0 33px;
}

.galerie h2, .goal h2 {
	color: #fff;
	margin: 0 auto 33px;
	max-width: 1100px;
}

.col-12 h3 {
	color: #666;
	font-family: "open_sansregular";
	font-size: 2em;
	font-weight: normal;
	margin: 0;
	text-align: center;
}

.row.citation h3{
	color: #fff;
	margin: 40px;
	text-align: left;
}

.row.goal h3 {
	color: #fff;
	text-align: left;
}

h3 span.left {
	margin: 0px 0 0 -31px;
	padding: 0px 0px 0px 0px;
	vertical-align: sub;
}

h3 span.right {
	vertical-align: sub;
}

h3 i {
	font-size: 0.6em;
}

.goal h4 {
	font-size: 2em;
}
/* ==========================================================================
	Text
   ========================================================================== */
p {
	font-family: "open_sansregular";
	font-size: 1.5em;
	margin-top: 0;
}

strong {
	color: #4a4a4a;
	font-family: "open_sanssemibold";
}

.blue {
	color: #006e94;
}

.white {
	color: #fff;
}

.bg-blue {
	background-color: rgba(0,56,184, 0.3);
	margin-bottom: 12px;
	padding: 3px 7px;
}

.caption {
	display: block;
	font-size: 1.5em;
	margin: -6px auto 0;
	width: 310px;
}

span.citation {
	color: rgba(73, 186, 228, 1);
	font-size: 0.8em;
}
/* ==========================================================================
	Line
   ========================================================================== */
hr {
	clear: both;
	color: #0038BA;
	margin: 0 0 30px;
}

.whitebox > hr {
	border: none;
	border-bottom: 1px solid #0038BA;
}

/* ==========================================================================
	Links
   ========================================================================== */
.button {
	border: 1px solid #0038BA;
	clear: both;
	display: block;
	font-size: 1.6em;
	padding: 14px;
	text-decoration: none;
	text-align: center;
	width: 300px;
}

.apply .button {
	margin: 20px auto 0 auto;
}
a > span.button {
	text-decoration: none;
}

.col-3 a, .col-4 a {
	color: #000;
	text-decoration: none;
}

.footer a {
	color: #fff;
	text-decoration: none;
}

.col-3 a:hover, .col-4 a:hover, .footer a:hover {
	text-decoration: underline;
}

.gn-menu-main a {
	font-weight: 800;
	height: 50px;
}

.gn-menu-main a:hover {
	color: #000
}

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

.box-header a:hover span {
	text-decoration: underline;
}

.whitebox > a {
	font-size: 1.5em;
	text-decoration: none;
}

/* ==========================================================================
	List
   ========================================================================== */
.gn-menu-main ul {
	font-family: "open_sansregular";
	line-height: 46px;
}

#gn-menu>li:first-child {
	float: right;
}

.content li {
	font-family: "open_sansregular";
	font-size: 1.5em;
	margin: 0 0 0 17px;
	padding: 0;
}

.col-8 ul, .col-6 ul {
	margin: -12px 0 0;
}

.col-12 li {
	float: left;
	margin: 0 0 20px;
	width: 100%;
}

/* ==========================================================================
	Table
   ========================================================================== */
tr {
	border-bottom: 1px solid #000;
	padding: 0 0 10px 0;
}

tr:last-child {
	border-bottom: none;
}

th {
	min-width: 76px;
	padding: 0 0 15px 0;
	text-align: center;
}

td {
	padding: 0 0 15px 0;
	text-align: center;
}

td:first-child {
	text-align: left;
}

/* ==========================================================================
	Media Queries
   ========================================================================== */
@media screen and (min-width:560px) {
	.mobile560 {
		display: none;
	}
	.desktop560, .mobile750 {
		display: block;
	}
	.row.citation h3 {
		margin: 40px 47px;
	}
	.box {
		border: 1px solid #ccc;
		max-width: 310px;
	}
	.box-header {
		padding: 8px 15px 0;
	}
	#gn-menu>li:first-child {
		float: left;
	}
	.navigation {
		height: 125px;
	}
	.header {
		margin: 0 0 40px 0;
		position: relative;
		width: 100%;
	}
	.headline {
		bottom: 28%;
		color: #fff;
		margin: 0 auto;
		position: absolute;
		width: 100%;
	}
	.headline .col-6 {
		margin: 0 0 15px !important;
	}
	.col-l .headerflag {
		padding: 0 289px 0 0;
	}
	.col-r .headerflag {
		padding: 0 0 0 289px;
	}
	.row {
		clear: both;
		margin: 0 auto;
		max-width: 1100px;
	}
	.col-8 {
		float: left;
		padding: 0 15px;
		width: 66.6667%;
	}
	.col-6 {
		box-sizing: border-box;
		float: left;
		margin: 0 0 40px 0;
		padding: 0 15px;
		width: 50%;
	}
	.col-6.col-l img {
		float: right;
		margin: 0;
		max-width: 230px;
	}
	.col-6.col-r img {
		float: left;
		margin: 0;
		max-width: 230px;
	}
	.col-6+.col-6 {
		margin: 0 0 40px 0;
	}
	.col-6 img, .col-4 img {
		display: block;
	}
	.col-4 {
		float: left;
		padding: 0 15px;
		width: 33.3333%;
	}
	.galerie .col-4 {
		float: left;
		padding: 0 15px;
		width: 50%;
	}
	.col-3 {
		float: left;
		margin: 0 0 20px;
		padding: 0 15px;
		width: 50%;
	}
	.col-12 li, .col-12	li:not(:last-child) {
		margin: 0 0 20px 0;
		width: 49%;
	}
	.col-12 li:not(:nth-child(2n)) {
		margin-right: 2%;
	}
	#gn-menu>li:first-child {
		display: block;
	}
	
	.gn-menu-main {
		height: auto;
		left: 0;
		margin: 0 auto;
		max-width: 1089px;
		padding: 0 10px;
		position: static;
		top: 0;
		width: auto;
	}
	
	.gn-menu-main>li {
		border-right: none;
	}
	
	.gn-menu-main li.gn-trigger {
		margin: 24px auto 0;
		width: 100%;
	}
	
	.gn-menu-main a:hover {
		border-bottom: 5px solid #0038BA;
	}
	
	.gn-menu-main>li>a {
		display: none;
	}
	
	.gn-menu-wrapper {
		border-top: none;
		height: 68px;
		overflow: unset;
		position: static;
		width: 100%;
		transform: none;
	}
	
	.gn-menu-wrapper.gn-open-all {
		width: 100%;
	}
	
	.gn-scroller {
		height: auto;
		overflow-y: auto;
		width: auto;
	}
	
	.gn-menu {
		border-bottom: none;
	}
	
	.gn-menu>li {
		float: left;
		padding: 0 36px 0 0;
	}
	
	.gn-menu>li:last-child {
		padding: 0;
	}
}

@media screen and (min-width:610px) {
	.mobile610 {
		display: none;
	}
	.desktop610 {
		display: block;
	}
	th {
		min-width: 100px;
		padding: 0 0 15px 0;
		text-align: center;
	}
}

@media screen and (min-width:750px) {
	.mobile750 {
		display: none;
	}
	.desktop750 {
		display: block;
	}
	.navigation {
		height: 125px;
	}
	.row.citation h3 {
		margin: 40px 20% 35px 20%;
	}
	.mobile750 {
		display: none;
	}
	.desktop750 {
		display: block;
	}
}

@media screen and (min-width:890px) {
	.desktop890 {
		display: block;
		float: left;
	}
	.headerflag {
		display: block;
	}
	.button {
		font-size: 1.6em;
	}
	.navigation {
		height: 100px;
	}
	.gn-menu-main li.gn-trigger {
		margin: 3px 0 0 48px;
		width: 570px;
	}
	.gn-menu>li {
		padding: 0 24px 0 0;
	}
	.col-3 {
		width: 25%;
	}
	.galerie .col-4 {
		width: 33.3333%;
	}
	
	.col-12 li, .col-12 li:not(:nth-child(2n)), .col-12 li:not(:last-child) {
		float: left;
		margin: 0;
		width: 23.5%;
	}
	.col-12 li {
		margin: 0;
	}
	.col-12 li:not(:last-child) {
		margin: 0 2% 0 0;
	}
}
@media screen and (min-width:910px) {
	.mobile910 {
		display: none;
	}
	.desktop910 {
		display: block;
		float: left;
	}
	.row.citation h3 {
		margin: 40px 26% 35px 26%;
	}
}

@media screen and (min-width:1200px) {
	.content h1 {
		font-size: 5.5em;
	}
}