@charset "UTF-8";
body {
	margin:0;
	font-family: 'Raleway', sans-serif;
	font-size:18px;
	line-height:1.5em;
	color:#222;
}
#links {
	position:relative;
	width:50%;
	height:100VH;
	float:left;
	background-repeat: no-repeat;
	background-size: cover;
	background-color:#FDC420;
}
#rechts {
	position:relative;
	width:50%;
	height:100VH;
	float:right;
	text-align: left;
	background-image:url(img/wie.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
#logo {
	position:absolute;
	top:50%;
	right:0;
	left:0;
	-webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
	text-align:center;
	height:40%;
	max-height:283px;
}
#logo img {
	height:100%;
	width:auto;
	max-height:283px;
}
#content {
	position:absolute;
	padding-left:5%;
	padding-right:25%;
	top:50%;
	right:0;
	left:0;
	-webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
H1 {
	font-size: 2em;
	line-height:1.5em;
	font-weight:400;
	
}
H2 {
	font-weight:400;
	font-size:1.2em;
}
p {
	font-weight:300;
}
a.button {
	-webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 0;
    border-style: solid;
    border-width: 0;
    cursor: pointer;
    font-weight: 400;
    line-height: normal;
    margin: 0 0 1.11111em;
    position: relative;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    padding: 1em 2em 1em 2em;
    font-size: 1em;
    background-color: #FDC420;
    color: #FFFFFF;
    transition: background-color 300ms ease-out;
    text-transform: uppercase;
    border-radius: 15px;
    margin-bottom: 2rem;
}
a.button:hover{
    background-color: #444;
    color: #FFF;
}
.facebook {
	color:#3b5998;
}
.js-intro-video video {	
	position:fixed;
	left:0;
	right:0;
	width:100%;
	filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(70%);
}
@media only screen and (max-device-width: 420px) {
#links {
	width:100%;
	height:50VH;
	float:none;
	background-image:url(img/banner.jpg);
}
#rechts {
	width:100%;
	height:100VH;
	float:none;
	background-position: 70%;
	background-image:url(img/wie_licht.jpg);
}
H1 {
	font-size: 4em;
	line-height:1.5em;
	font-weight:400;	
}
H2 {
	font-weight:400;
	font-size:3em;
}
p {
	font-weight:300;
	font-size:2em;
	line-height:2em;
}
a.button {
    font-size: 2em;
    background-color: #FDC420;
}
#content {
	padding-left:5%;
	padding-right:5%;
}
#logo {
	height:100%;
}
#logo img {
	height:100%;
}
a.facebook {
	font-size:4em;
}
.js-intro-video video {	
	display:none;
}
}