-->{}<--

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

html, body{height:100%;}

div,p,li,ul,ol,h1,h2,h3,h4,h5,h6,img{margin:0px; padding:0px;}

body{
	background-image:url(../image/background.jpg);	
	}
	

.wrapper_main{
	width:950px;
	height:2300px;
	margin-left:auto;
	margin-right:auto;
	}
	

	
/* font-family: 'BenchNine', sans-serif;
font-family: 'Fjalla One', sans-serif;
font-family: 'Oswald', sans-serif;
font-family: 'Open Sans Condensed', sans-serif;
font-family: 'Pathway Gothic One', sans-serif;
font-family: 'Lato', sans-serif;
font-family: 'Roboto', sans-serif;
*/

	hr{
		height:10px;
		border:none;
		background-color:#fff;
		width:20px;
		text-align:left;
		transition:all 0.5s ease;
		}

.unterkategorie{
	color:#FFFFFF;
	font-family: 'Oswald', sans-serif;
	text-transform:uppercase;
	font-weight:700;
	font-size:35px;
	margin-top: -5px;
	letter-spacing:0.02em;
	}

.kategorie{
	color:#FFF;
	font-family: 'BenchNine', sans-serif;
	text-transform:uppercase;
	letter-spacing:0.01em;
	font-size: 23px;
	margin-top:-13px;
	}
	
	.content img{
		margin-bottom:-5px;
		}

	
	.content_left{
	width:50%;
	height:100%;
	float:left;
	margin-top:20%;
	overflow:hidden;
	}
	
	/*.content_left:hover{
	overflow-y:scroll;	
	overflow-x:hidden;
	}*/
	
		

		.left_box_eins{
			width:100%;
			height:25%;
			background-image:url(../image/links_eins.jpg);
			padding-left:4%;
			padding-top:4%;
			transition:all 0.5s ease;
			}
			
			.left_box_eins:hover{
				width:100%;
				height:25%;
				background-image:url(../image/portrait.jpg);
			}
			
		
		.left_box_zwei{
			width:100%;
			height:15%;
			padding-left:4%;
			padding-top:4%;
			background-image:url(../image/links_zwei.jpg);
			
			vertical-align:bottom;
			transition:all 0.5s ease;
			}
			
		.left_box_zwei:hover{
			width:100%;
			height:15%;
			background-image:url(../image/flyer.jpg);
			}
			
		.left_box_drei{
			width:100%;
			height:10%;
			padding-left:4%;
			padding-top:4%;
			background-image:url(../image/links_drei.jpg);
			
			transition:all 0.5s ease;
			}
			
		.left_box_drei:hover{
			background-image:url(../image/cinematography.jpg);
			}
	
		
		.left_box_drei:hover hr{
			width:275px;
			left:-90px;
			
		}
		
		.left_box_eins:hover hr{
				width:150px;
				left:-90px;
				}
		
		.left_box_zwei:hover hr{
			width:85px;
			left:-90px;
			}
			
		.left_box_vier:hover hr{
			width:110px;
			left:-90px;
			}
			
		.right_box_zwei:hover hr{
			width:115px;
			left:-90px;
			}
		
		.right_box_drei:hover hr{
			width:130px;
			left:-90px;
			}
			
		.right_box_vier:hover hr{
			width:85px;
			left:-90px;
	
			}
		.right_box_fuenf:hover hr{
			width:105px;
			left:-90px;
			}
			
		
		
		a{
			text-decoration:none;
		}
			
		a:hover{
			text-decoration:none;
			}
		
		.left_box_vier{
			width:100%;
			height:30%;
			padding-left:4%;
			padding-top:4%;
			background-image:url(../image/links_vier.jpg);
			
			transition:all 0.5s ease;
			}
		
		.left_box_vier:hover{
			background-image:url(../image/family.jpg);
			}
	
	
	.content_right{
	width:50%;
	height:100%;	
	float:right;	
	}
	
	
	

		.right_box_eins{
			width:100%;
			height:13%;
			background-color:#ede9e5;
			}
		
		.right_box_eins img{
			width:75%;
			height:auto;
			margin-left:13%;
			margin-right:0%;
			margin-top:23%;
			}
			
		
		.right_box_zwei{
			width:100%;
			height:13%;
			padding-left:4%;
			padding-top:4%;
			background-image:url(../image/rechts_eins.jpg);
			
			transition:all 0.5s ease;
			}
			
		.right_box_zwei:hover{
			background-image:url(../image/poster.jpg);
			}
			
		.right_box_drei{
			width:100%;
			height:21%;
			padding-left:4%;
			padding-top:4%;
			background-image:url(../image/rechts_zwei.jpg);
			
			transition:all 0.5s ease;
			}
			
		.right_box_drei:hover{
			background-image:url(../image/fashion.jpg);
			}
		
		.right_box_vier{
			width:100%;
			height:35%;
			padding-left:4%;
			padding-top:4%;
			background-image:url(../image/rechts_drei.jpg);
			
			transition:all 0.5s ease;
			}
		
	
		
			
		.right_box_vier:hover{
			background-image:url(../image/label.jpg);
			}
			
		.right_box_fuenf{
			width:100%;
			height:16%;
			padding-left:4%;
			padding-top:4%;
			background-image:url(../image/rechts_vier.jpg);
			
			transition:all 0.5s ease;
			}
			
		.right_box_fuenf:hover{
			background-image:url(../image/about.jpg);
			}
.icons{
	width:25px;
	height:auto;
	margin-right:4px;
	margin-left:4px;
	}
	

		
.footer{
	width:100%;
	height: 200px;
	background-color:#4b4b4b;
	margin-top:30%;
	font-family: 'BenchNine', sans-serif;
	text-transform:uppercase;
	font-size:12px;
	letter-spacing:0.01em;
	color:#B6B6B6;
	
	}

.tabelle{
	width:950px;
	height:auto;
	margin-right:auto;
	margin-left:auto;
	letter-spacing:0.04em;
	}

.footer a{
	color:#B6B6B6;
	padding-left:10px;
	
	}

.footer a:hover{
	color:#fff;
	}

	
tr{
	vertical-align:top;
	}

.table_left{
	margin-top:20px;
	float:left;
	}
	
.table_left td{
	padding-right:30px;
	text-align:left;
	}
	
.table_right{
	margin-top:20px;
	float:right;
	}

.table_right td{
	text-align:right;
	margin-left:-20px;
	}
	
	


	
--> scrollbar

/*
#scrollbar::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px #FFFFFF;
	

}

#scrollbar::-webkit-scrollbar
{
	width: 2px;
	margin-right:30px;
}

#scrollbar::-webkit-scrollbar-thumb
{
	background-color: #000000;
	
}*/

.clearfix{
	width:100%;
	float:clear;
	clear:both;
	}
@media only screen and (max-width : 1023px) {
	.wrapper_main{
		width:80%;
		height:1200px;
		}
		
	.left_box_eins{
			
			height:25%;

			}
			
			.left_box_eins:hover{
				height:25%;
			}
			
		
		.left_box_zwei{
			height:20%;
			}
			
		.left_box_zwei:hover{
	
			height:20%;
	
			}
			
		.left_box_drei{

			height:15%;
	
			}
			
		.left_box_vier{

			height:25%;

			}
	
		.right_box_eins{

			height:20%;
	
			}
		
		.right_box_zwei{
			height:18%;
			}
			
			
		.right_box_drei{
			height:21%;
			}
			
		
		
		.right_box_vier{
			height:26%;
			}
		
			
		.right_box_fuenf{
			height:21%;

			}
			
		.right_box_fuenf:hover{
			background-image:url(../image/about.jpg);
			}
		
	.footer{
	width:100%;
	line-height:1.5;

	}

.tabelle{
	width:80%;
	}


.table_left{
	float:left;
	width:60%;
	}
	
.footer a{
	padding-left:0%;
	}
	
.table_left td{
	padding-right:0%;
	width:0.05%;
	}
	
.table_right{
	float:right;
	width:40%;
	}

.table_right td{
	padding-left:0%;
	}
	}
	
@media only screen and (max-width : 400px) {
	.wrapper_main{
		width:200%;
		margin-bottom:0%;
		height:auto;
		
		}
	.content_left{
		float:none;
		margin-top:0%;
		}
	.content_right{
		float:none;
		height:80%;
		}
		
	.left_box_eins{
		margin-top:0px;
		background-image:url(../image/links_drei.jpg);
		}
	.right_box_eins img{
		width:80%;
		margin-right:10%;
		margin-left:10%;
		margin-top:20%;
		margin-bottom:8%;
		}
	.left_box_drei{
		background-image:url(../image/rechts_zwei.jpg);
		}
		
	hr{
		display:none;
		}

.unterkategorie{
	margin-top: 0px;
	text-align:center;
	margin-bottom:3%;
	}

.kategorie{
	margin-bottom:4%;
	margin-top:-6.5%;
	text-align:center;
	}
		
	.footer{
		height:auto;
		width:100%;
		background-color:#4b4b4b;
		margin-top:0px;
		}
		

.tabelle{
	width:100%;
	height:auto;
	margin-right:auto;
	margin-left:auto;
	line-height:2;
	}


.table_left{
	margin-top:0%;
	padding-top:4%;
	padding-left:4%;
	padding-right:0%;
	float:none;
	width:100%;
	}
	
.footer a{
	padding-left:0%;
	}
	
.table_left td{
	padding-right:0%;
	width:6%;
	}
	
.table_right{
	margin-top:20px;
	float:none;
	width:100%;
	padding-left:0%;
	padding-right:6%;
	padding-bottom:11%;
	}

.table_right td{
	padding-left:0%;
	}
}