body 		{
    		font-family: Open Sans, sans-serif;
			margin: 0;
			padding: 0;
			font-size:12px;
			background: #efefef url('../img/bkg.png') repeat 0 0;
			}

scrollbar {
   -moz-appearance: none;
   background: rgb(0,255,0);
}

::-webkit-scrollbar { 
			display: none;
			}
		
a 			{
			color: #FFFFFF;
			outline: none;
			text-decoration: none;
			}
		
a:hover 	{
			color: #477ab4;
			}
.site 		{
			background: #efefef url('../img/bkg.png') repeat 0 0;
			transition: 1s;
			}
		
.header 	{ 
			height: 135px;
			padding-top: 60px;
			text-align: center;
			width: 100%;
			overflow-y: hidden;
			}
#banner {
			font-family: Open Sans, sans-serif;
			font-size: 54px;
			letter-spacing: -1px;
			word-spacing: 0px;
			color: #c7c7c7;
			font-weight: 800;
			text-decoration: none;
			font-style: normal;
			font-variant: normal;
			text-transform: uppercase;
			line-height: 0em;
			}
#subbanner {
			font-family: Open Sans, sans-serif;
			font-size: 22px;
			letter-spacing: 0px;
			word-spacing: 0px;
			color: #b2b2b2;
			text-decoration: none;
			font-style: normal;
			font-variant: normal;
			text-transform: uppercase;
			line-height: 1.4em;
			}

.filmheader	{ 
			font-size: 25px;
			align: center;
			valign: center;
			text-align: center;
			width: 100%;
			overflow-y: hidden;
			}


.mood		{
			margin: 25px auto 0px auto;
			width:1280px;
			font-size: 14px;
			text-align:justify
			}

.films		{
    margin: 0px auto 0px auto;
    width: 95%;
	max-width: 1280px;
    font-size: 14px;
    text-align: justify;
    color: #787878;
}

.films a {
			color:#414141;
}
.films a:hover	{ 
			color: #477ab4;
			}
.thumbs		{
			margin: 0px auto 0px auto;
			width: 95%;
			height:150px;
			font-size: 14px;
			text-align: justify;
			color: #787878;
}
.filmbox {
		margin-top: 0px;
		margin-bottom: 10px;
		margin-right:20px;
		max-width: 240px;
		width:20%;
		text-align: center;
		font-size: 14px;
		color: #787878;
		float:left;
}

.filmbox img {

		opacity: 1;
		margin-bottom:5px;
}
.filmbox a:hover img {
		opacity: .75;
		
		-webkit-transition: .3s ease-in-out;
		transition: .3s ease-in-out;
}
.filmbox:last-child {
		margin-right: 0px;
}
.bons		{
			margin: 25px auto 0px auto;
			width:1330px;
		
			}

.titles		{
			color: #FFFFFF;
			outline: none;
			text-decoration: none;
			}


*{
    box-sizing: border-box;
}
/* Create three equal columns that floats next to each other */
.box {
    float: left;
    width: 426.6666px;
    padding: 10px;
}
.filmsbox0 {
    float: left;
    width: 23%;
    padding-right: 1%;
    padding-left: 1%;
    padding-top: 10px;
    padding-bottom:10px;
}
.filmsbox1 {
    float: left;
    width: 45%;
    padding-right: 1%;
    padding-left: 1%;
}
.filmsbox2 {
    float: left;
    width: 32%;
    padding-right: 1%;
    padding-left: 1%;
}
.upbox1 {
    float: left;
    width: 38%;
    padding-left: 1%;
    padding-bottom:1%;
}
.upbox2 {
    float: left;
    width: 30%;
    padding-right: 1%;
    padding-left: 1%;
}
.upbox3 {
    float: left;
    width: 32%;
    padding-right: 1%;
    padding-left: 1%;
}

.filmstext:after {
    content: "";
    display: table;
    clear: both;
	}
/* Clear floats after the columns */
.text:after {
    content: "";
    display: table;
    clear: both;
}

.headline	{
	margin: 5px auto 10px auto;
    width:426.6666px;
    font-size: 18px;
    text-align:center;
    }

.filmsheadline	{
    margin: 5px auto 10px auto;
    font-size: 25px;
    text-align: left;
    color: #616161;
    font-weight: 500;
    text-transform: uppercase;
}
.crew {
    color: #414141;
	font-weight:400;
}

.logos	{
			margin: 40px 10px 15px 10px;
			font-size: 18px;
			text-align:center;
			}
.logos2	{
			margin: 5px 5px 25px 5px;
			font-size: 18px;
			text-align:center;
			}
.bild {
	width:100%;
	height:auto;
}

.yt_box{
  position: relative;
  max-width: 1280px; /* wie breit soll das Video maximal sein */
  margin: auto;
}
.yt_box:before{
  content: "";
  display: block;
  padding-top: 56%; /* 16:9 Format */
}
.yt_box iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;;
  left: 0;
  right: 0;
  bottom: 0;
}



.logo {
    float: left;
    width: 210px;
    padding: 0px;
}
.rewe {
	    float: left;
	width:41px;
	padding: 8px;
}
/* Clear floats after the columns */
.grid:after {
    content: "";
    display: table;
    clear: both;
}
.nav	 	{
			margin: 0 auto;
			text-align: center;
			width: 100%;
			}

.footer	{
			margin: 15px auto 30px auto;
			max-width:1280px;
			width:95%;
			border-top: 1px solid #BBB;
			}

.imp	{
			margin: 20px 0px 0px 10px;
			float: left;
			color: #b2b2b2;
			}

.implink	{
			color: #727272;
			}

.contact 	{ 
			width: 210px;
			background: #efefef url('../img/bkg.png') repeat 0 0;
			padding: 11px 15px 11px 15px;
			font-family: Helvetica, Arial, Verdana, Century Gothic;
			text-align:center;
			color: #444444;
			font-size:11px;
			line-height: 12px;
			}
			
.imprint 	{ 
			width: 530px;
			background: #efefef url('../img/bkg.png') repeat 0 0;
			padding: 10px 15px 10px 15px;
			font-family: Helvetica, Arial, Verdana, Century Gothic;
			text-align:justify;
			color: #FFFFFF;
			font-size:10px;
			line-height: 12px;
			}
.imprint a	{ 
			color: #888888;
			}
.imprint a:hover	{ 
			color: #477ab4;
			}

.aboutme1 	{ 
			width: 250px;
			background: #efefef url('../img/bkg.png') repeat 0 0;
			padding: 0px 0px 0px 0px;
			font-family: Helvetica, Arial, Verdana, Century Gothic;
			text-align:justify;
			color: #444444;
			font-size:10px;
			line-height: 12px;
			float: left;
			}
.aboutme2 	{ 
			width: 320px;
			background: #efefef url('../img/bkg.png') repeat 0 0;
			padding: 0px 10px 0px 10px;
			font-family: Helvetica, Arial, Verdana, Century Gothic;
			color: #444444;
			font-size:13px;
			line-height: 16px;
			float: left;
			}
.dse 	{ 
			width: 600px;
			background: #efefef url('../img/bkg.png') repeat 0 0;
			padding: 10px 15px 10px 15px;
			font-family: Helvetica, Arial, Verdana, Century Gothic;
			text-align:justify;
			color: #FFFFFF;
			font-size:10px;
			line-height: 12px;
			}
.dse a	{ 
			color: #888888;
			}
.dse a:hover	{ 
			color: #477ab4;
			}

ul#filters 	{
			display: inline-block;
			margin-bottom: 10px;
			}

#info 		{
			-webkit-border-radius:0px;
			-moz-border-radius:0px;
			border-radius:0px;				
			background: #477ab4;
			border:0px solid  #fbeed5;
			width:95%;
			max-width:900px;
			margin:0 auto 40px auto;
			font-family:arial;
			font-size:12px;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			-o-box-sizing: border-box;
			}

#info .info-wrapper {
			padding:10px;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			-o-box-sizing: border-box;
			}
	
#info a		{
			color: #477ab4;
			text-decoration:none;
			}

#info p		{
			margin:5px 0 0 0;
			}

.container 	{ 
			position: relative; 
			max-width: 1280px;
			width:95%;
			margin: 10px auto 0px auto;
			-webkit-transition: all 1s ease;
			-moz-transition: all 1s ease;
 			-o-transition: all 1s ease;
 			transition: all 1s ease;	
			}
 
#filters 	{
			margin:0%;
			padding:0;
			list-style:none;
			}

#filters li {
			float:left;
			}
	
#filters li span {
			display: block;
			padding:5px 12px;		
			text-decoration:none;
			color:#b2b2b2;
			cursor: pointer;
			}
			
#filters li span:hover {
			color:#FFF;
			background: #666;
			}
	
#filters li span.active {
			background: #477ab4;
			color:#FFF;
			}
  
#portfoliolist .portfolio {
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			-o-box-sizing: border-box;
			width:15.866666666%;
			margin:0.4%;
			display:none;
			float:left;
			overflow:hidden;
			}

.portfolio-wrapper {
			overflow:hidden;
			position: relative !important;
			}

.portfolio img {
			width:100%;
			height:100%;
			transition: all 2s ease;
			transform: scale3d(1, 1, 1);
			
			}
.portfolio img:hover {
			transition: all 2s ease;
			transform: scale3d(1.1, 1.1, 1.1);
			}
.portfolio .label {
			position: absolute;
			width: 100%;
			bottom:-169px;
			}

.portfolio .label-bg {
			background: #FFFFFF;
			opacity: 0.85;
			width: 100%;
			height:100%;
			position: absolute;
			top:0;
			left:0;
			}
	
.portfolio .label-text {
			color:#000000;
			position: relative;
			text-align: center;
			valign:middle;
			z-index:500;
			padding:5px 8px;
			font-weight: 500;
			}
.portfolio .label-text a {
			color:#000000;
			}

.portfolio .label-text a:hover {
			color:#477ab4;
			}

.portfolio .text-category {
			display:block;
			font-size:11px;
			color: #646464;
			font-weight: 400;
			}
			
.portfolio .text-title {
			display:block;
			font-size:12px;
			color: #969696;
			}
			
.portfolio .text-title:hover {
			color: #477ab4;
			}
	
/*  #Mobile (Portrait) - Note: Design for a width of 320px */
@media (orientation:portrait) {
.container 	{ 
			width: 95%; 
			}


#portfoliolist .portfolio {
			width:48%;
			margin:1%;
			}		

#ads 		{
			display:none;
			}
}


#portfoliolist {
    min-height: 100px; /* Adjust based on your layout */
    overflow: hidden; /* Prevent content from overflowing */
    transition: height 1s ease; /* Smooth transition for height changes */
}

/* #Mobile (Landscape) - Note: Design for a width of 480px */
@media (orientation: landscape) {
.container 	{
			width: 95%;
			}
	
#ads 		{
			display:none;
			}
}

/* #Clearing */
/* Self Clearing Goodness */
.container:after { 
			content: "\0020"; 
			display: block; 
			height: 0; 
			clear: both; 
			visibility: hidden; 
			}

.clearfix:before,.clearfix:after,.row:before,.row:after {
  			content: '\0020';
 			display: block;
  			overflow: hidden;
  			visibility: hidden;
  			width: 0;
  			height: 0; 
			}
			
.row:after,.clearfix:after {
  			clear: both;
			}

.row,.clearfix 
			{
  			zoom: 1;
			}

.clear 		{
 			clear: both;
 			display: block;
  			overflow: hidden;
 			visibility: hidden;
  			width: 0;
 			height: 0;
			}