style.css

@charset "UTF-8";

/* ########################################################## */
/* GLOBAL ################################################### */
/* ########################################################## */

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

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

body {
	
	color: #ffffff;
	background-color: #080908;
	background-image: url(../img/background.jpg);
	background-repeat: no-repeat;
	background-position: 50% 83px;
	background-size: 1920px 799px;
	font-family: "acumin-pro", sans-serif;
}

a {
	color: #FFFFFF;
	text-decoration: none;
}

/* ########################################################## */
/* RASTAAAAAAAA ############################################# */
/* ########################################################## */

.container {
	margin: 0 auto; 			
	max-width: 1200px; 		
}

.row {
	width: auto;
}

.row:before,
.row:after {
	content: " ";
	display: table;	
}

.row:after {
	clear: both;	
}

.columns {
	float: left;	
	padding-left: 1em;
	padding-right: 1em;
}

.push {
	float:right;	
}

/* ########################################################## */
/* SPALTEN ################################################## */
/* ########################################################## */

@media screen and (max-width:800px) {
	.small-1 {width: 50%;}
	.small-2 {width: 100%;}	
	
}

@media screen and (min-width:800px) and (max-width:1000px) {
	.medium-1 {width:25%;}
	.medium-2 {width:50%;}
	.medium-3 {width:75%;}
	.medium-4 {width:100%;}
	
	.medium-offset-1 {margin-left:25%;}
	.medium-offset-2 {margin-left:50%;}
	.medium-offset-3 {margin-left:75%;}
}

@media screen and (min-width:1000px) {
	.large-1 {width:8.333333%;}
	.large-2 {width:16.666666%;}
	.large-3 {width:25%;}	
	.large-4 {width:33.333333%;}
	.large-5 {width:41.666666%;}
	.large-6 {width:50%;}
	.large-7 {width:58.333333%;}
	.large-8 {width:66.666666%;}
	.large-9 {width:75%;}
	.large-10 {width:83.333333%;}
	.large-11 {width:91.666666%;}
	.large-12 {width:100%}
	
	.large-offset-1 {margin-left:8.333333%;}
	.large-offset-2 {margin-left:16.666666%;}
	.large-offset-3 {margin-left:25%;}
	.large-offset-4 {margin-left:33.333333%;}
	.large-offset-5 {margin-left:41.666666%;}
	.large-offset-6 {margin-left:50%;}
	.large-offset-7 {margin-left:58.333333%;}
	.large-offset-8 {margin-left:66.666666%;}
	.large-offset-9 {margin-left:75%;}
	.large-offset-10 {margin-left:83.333333%;}
	.large-offset-11 {margin-left:91.666666%;}
}


/* ########################################################## */
/* ANIMATIONS ############################################### */
/* ########################################################## */

.hvr-shrink {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-shrink:hover, .hvr-shrink:focus, .hvr-shrink:active {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
}

/* ########################################################## */
/* NAVIGATION ############################################### */
/* ########################################################## */

.vl-mainnavi ul {
	padding: 0;
	margin-bottom: 0;
	margin-top: 1.5em;
}

.vl-mainnavi ul li {
	list-style-type: none;
	display: inline-block;
	margin-right: 75px;
	margin-left: 0px;
}

.vl-nav-box {
	background-color: #101110;
	margin-bottom: 80px;
	height: 83px;
	background-image: url(../img/navi_background.jpg);
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-size: 1920px 83px;
	border-bottom: 1px solid rgba(255,255,255,0.11);
}

.vl-navi-icon {
	vertical-align: text-bottom;
	height: 32px;
	margin-right: 0.5em;
}

.vl-navi-element {
	margin-left: 0.3em;
	font-size: 1.4em;
}

.vl-navi-element-active {
	font-weight: bold;
}

/* ########################################################## */
/* HEADER ################################################### */
/* ########################################################## */
.vl-main-logo {
	max-width: 600px;
	margin-bottom: 90px;
}

.vl-home-icon {
	vertical-align: middle;
	height: 34px;
	margin-right: 0.3em;
}

.vl-teaser-icon {
	vertical-align: text-bottom;
	height: 50px;
	margin-right: 0.2em;
}

.vl-teaser-headline {
	text-transform: uppercase;
	font-weight: normal;
	font-size: 2.5em;
}

.vl-teaser-text {
	line-height: 1.7em;	
	font-size: 1em;
}

.vl-zitat {
	max-width: 650px;
	margin-top: 3em;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 5em;
	display: block;
}

/* ########################################################## */
/* CONTENT BOXES - MAIN PART ################################ */
/* ########################################################## */

.vl-content-box {
	background-color: rgba(255,255,255,0.25);
	padding: 1em;

	overflow: hidden;
	margin-bottom: 100px;
	border: 1px solid #95989A;
}

.vl-content-box p {
	line-height: 1.9em;
	font-weight: lighter;	
}

.vl-content-box ul li {
	line-height: 1.9em;
	font-weight: lighter;
}

.vl-content-box-image-left {
	padding-top: 1.7em;
	padding-bottom: 1.7em;
	background-color: #3D3D3D;
	background-image: url(../img/headerLinks.png);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	border-top: 1px solid #95989A;
	border-left: 1px solid #95989A;
	border-right: 1px solid #95989A;
}

.vl-content-box-image-right {
	padding-top: 1.7em;
	padding-bottom: 1.7em;
	background-color: #3D3D3D;
	background-image: url(../img/headerRechts.png);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	border-top: 1px solid #95989A;
	border-left: 1px solid #95989A;
	border-right: 1px solid #95989A;
}

.vl-content-box-image h2 {
	text-transform: uppercase;
	font-size: 3em;
	margin-bottom: 0;
	text-align: center;
	margin-top: 0;
}

.vl-content-box-image h3 {
	margin-top: 0;
	margin-bottom: 0;
	text-align: center;
	text-transform: uppercase;
	font-weight: normal;	
}

:focus {
	outline: 0;
}

.vl-input {
	padding-left: 1em;
	width: 100%;
	margin-bottom: 1em;
	background-color: #0B0B0B;
	border: 1px solid #838383;
	color: #B8B8B8;
	font-size: 0.9em;
	height: 40px;
}

.vl-input:focus {
	border: 1px solid #327B34;
}

.vl-button {
	width: 70%;
	height: 45px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0;
	color: #ffffff;
	background-color: #030303;
	border-bottom: 4px solid #327B34;
	border-top-style: none;
	border-right-style: none;
	border-left-style: none;
	display: block;
	cursor: pointer;
}

.vl-button:hover {
	background-color: #151515;
}

/* ########################################################## */
/* FOOTER ################################################### */
/* ########################################################## */

footer {
padding-top: 1em;
background: #191919; /* Old browsers */
background: -moz-linear-gradient(top,  #191919 0%, #1f1f1f 22%, #1f1f1f 22%, #1f1f1f 100%); 
background: -webkit-linear-gradient(top,  #191919 0%,#1f1f1f 22%,#1f1f1f 22%,#1f1f1f 100%); 
background: linear-gradient(to bottom,  #191919 0%,#1f1f1f 22%,#1f1f1f 22%,#1f1f1f 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#191919', endColorstr='#1f1f1f',GradientType=0 ); 
}

footer h4 {
	color: #ADADAD;
	font-size: 2em;
	margin: 0;
}

footer p {
	color: #ADADAD;
	font-size: 0.8em;
}

.vl-footer-logo {
	margin-top: 3em;
 	max-width: 350px;
}

.vl-copyright {
	color: #ADADAD;
	font-size: 0.8em;
}

.vl-imprint {
	padding: 0;
}

.vl-imprint li {
	list-style-type: none;
	display: inline-block;
	color: #6E6E6E;
	font-size: 0.7em;
}

.vl-imprint li:first-child:after {
	content: " | ";
}

.vl-imprint li a {
	color: #6E6E6E;
}

.vl-sitemap {
	padding-left: 20px;
	font-size: 0.8em;
}

.vl-sitemap li a {
	color: #ADADAD;
}

/* ########################################################## */
/* MEDIA QUERYS ############################################# */
/* ########################################################## */

@media (max-width: 1137px) and (min-width: 800px){
	
	.vl-teaser-headline {
	font-size: 1.7em;
	}
	
	.vl-home-icon {
	height: 24px;

	}

	.vl-teaser-icon {
	height: 40px;
	}

}

@media (max-width: 933px) and (min-width: 800px){
	
	.vl-mainnavi ul li {
		margin-right: 40px;
	}
	
	.vl-content-box-image h2 {
		font-size: 2em;
	}
	
	.vl-content-box-image h3 {
		font-size: 1em;
		
	}
}

@media (max-width: 800px) {
	
	
	.vl-nav-button {
	margin-top: 18px;
	display: block;
	height: 40px;
	width: 100%;
	background-repeat: no-repeat;
	background-position: 98% center;
	background-image: url(../img/burgericon.svg);
	cursor: pointer;
	}
	
	.vl-mainnavi ul {
		overflow: hidden;
		height: 0;
	}
	
	.vl-mainnavi ul.open {
		height: auto;
	}
	
	.vl-mainnavi li {
	display: block;
	padding-top: 1em;
	padding-bottom: 1em;
	float: none;
	width: 100%;
	border-bottom: 1px solid rgba(35,35,35,1.00);
	}
	
	.vl-nav-box {
		height:auto;
		background-image: none;
		background-color:#161616;
	}
}

@media (max-width: 390px) {
	.vl-home-icon {
		height: 30px;

	}

	.vl-teaser-icon {
		height: 40px;
	}

	.vl-teaser-headline {
		font-size: 2em;
	}
	
}