html, body {
	font-family: "Orbitron", sans-serif;
	height: 100%;
}

body {	
	overflow-x: hidden;
}

header {
	background-image: url(../res/road-min.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	text-align: center;
	line-height: 48vh;
	box-shadow: inset 0 0 5vmin 0 #000;
}


header img {
	position: relative;
	width: 60vmin;
	z-index: 1000;
}

header h2 {
	font-size: 6vmin;
	color: #eee;
	letter-spacing: 0.4vmin;
	white-space: nowrap;
	text-align: center;
	position: relative;
	line-height: 48vh;
}

.black-layer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.4);
}

article {
	padding-top: 2vmin;
	box-sizing: border-box;
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items:flex-start;
	align-content:flex-start;
}

h1 {
	margin: 0;
	height: 0;
	opacity: 0;
	visibility: hidden;
}

article h2 {
	color: #222;
	font-size: 6vmin;
}

article.img-flex-container section {
	min-width: 50vmin;
}

article.img-flex-container h2 {
	padding: 2vmin;
	text-align: left;
	flex: 0 0 100%;
	color: #111;
}

article section {
	z-index: 1;
	margin: 5% 2% 5% 2%;
	padding: 3vmin;
	text-align: center;
	flex: 1;
	line-height: 7vmin;
	flex-basis: 33%;
	min-width: 38vmin;
	justify-content: center;
}


article section.text-background {
	background-color: rgba(255, 255, 255, 0.7);
	padding: 2vmin;
	box-shadow: 0 5px 15px -4px #888;
}

article section h2 {
	font-size: 4vmin;
}

article section ul {
	padding-left: 4vmin;
}

article section ul li {
	list-style: square;
	text-align: left;
}

article section i {
	background-color: #eee;
	border-radius: 100%;
	box-shadow: 0 2vmin 0 14vmin #eee,
				 0 2.5vmin 1vmin 13.7vmin #aaa;
	font-size: 8vmin;
}

.fast-section i {
	color: #477187;
}

.safe-section i {
	color: #D4B86A;
}

.cheap-section i {
	color: #5a5;
}

.white-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(240,240,240,0.9);
}

.traffic-background {
	background-image: url(../res/traffic-min.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}

.black-layer.special {
	background-color: #f55;
	width: 50%;
	top: -5%;
	left: -15%;
	height: 100%;
	transform: rotateZ(-10deg);
	box-shadow: 4vmin 4vmin 0 0 #f77,
				7vmin 7vmin 0 0 #f99;
	z-index: -1;
}

.sprinter-image img {
	width: 100%;
}


.icon:hover .icon-car {
	animation: moveFast 0.7s;
	transition: transform 0.7s; 
}

@keyframes moveFast {
	0% {transform: translateX(0px); opacity: 1;}
	50% {transform: translateX(20vmin); opacity: 0;}
	51% {transform: translateX(-20vmin); opacity: 0;}
	100% {transform: translateX(0px); opacity: 1;}
}

#under-construction {
	position: absolute;
	top: 20%;
	font-style: italic;
	font-size: 3vmin;
	left: 0;
	width: 100%;
	text-align: center;
	color: #eee;
	z-index: 10;
}

#powered-by {
	position: absolute;
	bottom: 10px;
	right: -130px;
	letter-spacing: 2px;
	font-size: 70%;
	transform-origin: 0%;
	transform: rotateZ(-90deg);
}


footer article section h2 {
	color: #eee;
	text-align: left;
} 

footer {
	position: relative;
	color: #222;
	box-shadow: 0 0 3vmin 0 #222;
}


/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1200px) {
	article {
		padding-left: 3%;
		padding-right: 3%;
	}
	
}


/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (max-width: 992px) {
	.impressum {
		padding-left: 2%;
		padding-right: 2%;
	}

	article section {
		margin: 10% 2% 10% 2%;
	}
} 

@media only screen and (max-width: 830px) {
	article section {
		margin: 10% 2% 10% 2%;
	}

} 

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width: 768px) {
	article {
		padding-left: 2%;
		padding-right: 2%;
	}

	article section {
		margin: 10% 2% 10% 2%;
	}
} 

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (max-width: 640px) {

	article {
		padding-left: 1%;
		padding-right: 1%;
	}

	article section {
		margin: 10% 2% 10% 2%;
	}

} 


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {


}