@import url('//fonts.googleapis.com/css?family=Titillium+Web:300,400,400i,600,700,900');

* {margin:0; padding:0; font-family: 'Titillium Web', sans-serif; box-sizing: border-box }
a {text-decoration:none; color:#de1621}
.flex {display:flex; justify-content: space-between; flex-wrap: wrap;}
.main-color {color:#de1621}
.white {color:#fff}
.dark {color:#555}
.blak {color:#000}
.left, .right {width:48%;}

@media only screen and (max-width: 1200px) {
	.left, .right  {width:100%;}
}



.italic {font-style:italic; font-weight:400; width:100%; text-align:center; margin-bottom:2em}
b {font-weight:700}
.referenz {width:15%; margin-top:2em;}
@media only screen and (max-width: 1300px) {
	.referenz {width:21%;}
}
@media only screen and (max-width: 800px) {
	.referenz {width:31%;}
}


.referenz img {width:100%; border-radius:200px; border:1px solid #eee; padding:1em; filter: grayscale(100%); background:#fff}
.referenz img:hover {filter:none}
.jens {width:100%; text-align:center}

.jens img {border-radius:300px; width:70%}

@media only screen and (max-width: 1200px) {
	.jens img{width:25%}
}

@media only screen and (max-width: 700px) {
	.jens img{width:70%}
}
.jens p {margin:2em 0;}
.jens p span {font-weight:700; color:#de1621}
.menu {
	position:fixed;
	top:45vh;
	right: -293px;
	z-index:99;
	background:#fff;
	border:1px solid #eee;
	padding:1em;
	transform: rotate(90deg);
}

@media only screen and (max-width: 800px) {
	.menu {display:none}
}

.menu a, .menu2 a {text-decoration: none; color:#333; padding:0 11px;}
a:hover {text-decoration:underline}

.icon {
	display:block;
	position:absolute;
	width:40px;
	height:40px;
	left:50%;
	bottom:-20px;
	margin-left:-20px;
	background:#fff;
	border-radius:30px;
	padding:6px;
	border:1px solid #de1621;
	text-align:center
}
.icon img {height:100%}
.frame {width:100%; background:#333; color:#fff}
.redframe {width:100%; background:#de1621; color:#fff}

.network img{background:#f1f1f1}

.section--first .card {
	background:#f9f9f9;
	padding:2em;
	font-size: 1em;
	width:23%;
	border-bottom:3px solid #de1621;
}

@media only screen and (max-width: 1300px) {
	.section--first .card {width:49%; margin-bottom:2em}
}
@media only screen and (max-width: 800px) {
	.section--first .card {width:100%; margin-bottom:2em}
}



.section--second .card {
	background:#f9f9f9;
	padding:2em;
	font-size: 1em;
	width:48%;
	border-bottom:3px solid #de1621;
}

@media only screen and (max-width: 1300px) {
	.section--second .card {width:49%; margin-bottom:2em}
}
@media only screen and (max-width: 800px) {
	.section--second .card {width:100%; margin-bottom:2em}
}


p {font-weight:300; line-height:1.7em;}
p span, div.card span {font-weight:700; text-transform:uppercase; font-style: normal}
div.card span {margin-bottom:1em; color:#de1621}
p span>span {color:#de1621; font-style: italic; padding-right:2px}
h1 {}
h2 {}
h3 {width:100%; text-align:left; font-size:1em; font-weight:300; text-transform:uppercase; margin-bottom:2em; color:#999}
h3 span {font-weight:700; color:#de1621}
div.card p {margin-bottom:1em}

.section--stage p {color:#000; font-size:1.08em; text-transform:uppercase; font-weight:300}
.section--stage img {display:block}
.section--stage .logo {display:flex; flex-wrap:wrap; justify-content: space-around}
.section--stage .square {width:30px; height:30px; background-color: #eee; transform: rotate(45deg); position:absolute; bottom:-15px}


.main {width:100%}
.section--challenge {width:800px; margin:auto;}

.section {position:relative; padding:4em 0;}

.section--stage {
	display:flex;
	justify-content:center;
	width:100%;
	height:80vh;
	padding:0;
	background-image: url(hafen.jpg);
	background-size:cover;
	align-items: center;
	background-color: #eee;
}

@media only screen and (max-width: 800px) {
	.section--stage {height:50vh}
}

.section--first {
	width:75vw;
	max-width:1200px;
	margin-left:auto;
	margin-right:auto;
	padding:5em;
}

@media only screen and (max-width: 800px) {
	.section--first {padding:0; width:90vw;margin-top:2em}
}

.section--third, .section--fourth, .section--fifth {
	width:75vw;
	max-width:1200px;
	margin:2em auto;
	padding:2em 5em;
	display:flex;
	flex-wrap: wrap;
	justify-content:space-between;
}

.section--second {
	width:75vw;
	max-width:1200px;
	margin:2em auto;
	padding:2em 5em;
	display:flex;
	flex-wrap: wrap;
	justify-content:space-around;
}

@media only screen and (max-width: 1300px) {
	.section--second .illu {width:100%; padding:0; margin-top:2em}
}

@media only screen and (max-width: 800px) {
	.section--second, .section--third, .section--fourth, .section--fifth {width:90vw; padding:0}
}

.section--third {margin: 7em auto; padding:6em 5em}

@media only screen and (max-width: 800px) {
	.section--third  {padding:3em 0; width:90vw; margin-bottom:2em; margin-top:0}
}

.section--third .leistung {width:30%; margin-bottom:2em}
.leistung img{display:block; margin:0 auto 1em auto}


@media only screen and (max-width: 1300px) {
	.section--third .leistung {width:49%; margin-bottom:2em}
}
@media only screen and (max-width: 800px) {
	.section--third .leistung {width:100%; margin-bottom:2em}
}


.section--fifth .italic {margin-top:2em;}

.section--fourth {margin-top:-7em; padding:5em}

@media only screen and (max-width: 800px) {
	.section--fourth  {margin-top:-2em; padding:5em 0}
}

.section--fourth h3, .section--fourth h3 span {color:#fff}

.face {
	width:120px;
	height:120px;
	border-radius:200px;
	display:block;
	margin:2em auto;
	overflow:hidden;
}

.face--img {width:115%}

.experte img {filter:grayscale(100%)}
.experten {display:flex; justify-content: space-between; flex-wrap: wrap; margin-top:4em}
.experten h3 {width:100%; text-align:center; font-weight:700; font-size:1.2em; color:#333}
.experte {width:30%; margin-bottom:2em; text-align:center}
@media only screen and (max-width: 800px) {
	.experte  {width:47%}
}

.experte img {border-radius:300px; width:150px}

.footer p {width:100%; text-align: center}

.footer span {color:#fff}

footer {
	width:100%;
	background:#de1621;
	padding:2em;
	color:#fff;
	display:flex;
	justify-content: space-around;
	flex-wrap: wrap;
}