@charset "UTF-8";
/* CSS Document */

a {color:#CCC; text-decoration:none;}
a:hover
a:active {background-color:#111111;}

p {
	font-family: 'Fira Sans', sans-serif;
	font-size:12px;
	color:#CCC;
	margin: 0px;
	z-index:50;
}

h1 {font-family: 'Fira Sans', sans-serif;
	font-size:12px;
	font-style:normal;
	color:#CCC;
	margin-top:5px;
}

body {
	background-color:#BFBFBF;
}

div#mainframe {
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-300px;
	margin-left:-433px;
	width:866px;
	height:487px;
	background-color:#3B6482;
}

div#binde {
	position:absolute;
	display: table;
	margin-left:auto;
	margin-right:auto;
	bottom:27px;
	width:866px;
	height:40px;
	background-color:#111111;
}

div#corner {
	position:absolute;
	right:0px;
	}

ul {
	list-style:none;
	padding:0px 0px 0px 0px;
}

div#video {
	position:relative;
	margin:auto;
	width:684px;
	height:386px;
	top:20px;
	background-color:#111111;
	overflow: hidden;
	}

div.video1 {
	float: left;
	width:342px;
	height:193px;
	background-color:#111111;
	filter: grayscale(0);
	overflow: hidden;
	}


div.title {
	position:fixed;
	font-family: 'Fira Sans', sans-serif;
	font-size:12px;
	color:#CCC;
	background-color: hsla(0,0%,7%,1.00);
	bottom: -66px;
	padding: 10px;
	text-align: center;
	width: 100%;
	transition: all 500ms;
}

div.video1:hover {filter: grayscale(1);transition: all 500ms;}
div#video .video1:hover .title { bottom:0px;transition: all 500ms;}


div#text {
	position: absolute;
	text-align: center;
	top: 0px;
	right: 0px;
	padding-top: 20px;
	padding-bottom: 30px;
	padding-left: 30px;
	padding-right: 30px;
	background-color: hsla(0,0%,7%,0.90);
	line-height: 1.2;
	background: 0.5;
	transition: all 500ms;
}

/*div#video:hover #text {right:0px;}*/


div#text3 {
	position: absolute;
	text-align: center;
	background: 0.5;
	top:0%;
	right: 0%;
	background-color: hsla(0,0%,7%,0.90);
	padding-top: 20px;
	padding-bottom: 200px;
	padding-left: 30px;
	padding-right: 30px;
}


.icons:hover {transform: scale(1.2);transition: 500ms;}

ul#menu {
	position:absolute;
	margin:0px;
	padding-left:91px;;
}

ul#menu li {
	position:absolute;
}

div.fadehover {
	position: absolute;
}

img.a {
	position: absolute;
	left: 170px;;
	top: 0;
	z-index: 10;
}
	
img.b {
	position: absolute;
	left: 170px;
	top: 0;
}
	
img.c {
	position: absolute;
	left: 256px;
	top: 0;
	z-index: 10;
}
	
img.d {
	position: absolute;
	left: 256px;
	top: 0;
}
	
img.e {
	position: absolute;
	left: 512px;
	top: 0;
	z-index: 10;
}
	
img.f {
	position: absolute;
	left: 512px;
	top: 0;
}

img.i {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
}
	
img.j {
	position: absolute;
	left: 0;
	top: 0;
}
		
img.g {
	position: absolute;
	right: 0;
	top: -13px;
	z-index: 10;
}
	
img.h {
	position: absolute;
	right: 0;
	top: -13px;
}

img.k {
	position: absolute;
	left:0px;
	top:0px;
	z-index: 10;
}

img.l {
	position: absolute;
	left:0px;
	top:0px;
}

img.m {
	position: absolute;
	left:0px;
	top:0px;
	z-index: 10;
}

img.n {
	position: absolute;
	left:0px;
	top:0px;
}

img.o {
	position: absolute;
	left:0px;
	top:0px;
	z-index: 10;
}

img.q {
	position: absolute;
	left:0px;
	top:0px;
}

#contact_b {
	position:absolute;
	left: 512px;
	top:0px;
}

#work_b {
	position:absolute;
	left: 170px;
	top:0px;
}

#about_b {
	position:absolute;
	left:256px;
	top:0px;
}

#impressum {
	position:absolute;
	right:0px;
	bottom:-14px;
}

#panel, #flip {
	position:absolute;
	right:0px;
    text-align: left;
    background-color: #111111;
}

#panel {
	top:3px;
    padding: 10px 10px 11px 10px;
    display: none;
	font-family: 'Fira Sans', sans-serif;
	font-size:10px;
	text-align:right;
	color:#CCC;
	width: 188px;
}

.icons {
	padding-bottom:5px;
	transition: 500ms;
}