/*
	 
*/

@charset "utf-8";

 <style  type="text/css">
		body {
	background-color: #000000;
}

         #banner {
             margin-left:auto; 
             margin-right:auto; 
             width:800px;  
          }

          #banner img { 
             max-width:800px; 
             max-height:250px; 
          }
 
          #main {
            margin-left:auto;
            margin-right:auto;
            width:800px; 
          }    

          #main-content {
            padding:20px;
            width:760px; 
            float:left;
          }  

           #widget-container {
            padding:1px;
            width:790px; 
            float:none;
          }  
		  #widget-container img {
            
            width:100px; 
           
          }    

          .widget-content {
             margin:0px; 
             padding:1px;
             width:100px;
             background-color: #161616; 
			  float:left;
          } 
		  .widget-content:hover {
             margin:0px; 
             padding:1px;
             width:100px;
             background-color:#d50962; 
			 
          }      

          .widget-title {
             font-weight:bold;
             padding:10px;
             background-color:#d50962;  
          }    

          .widget-text {
	padding:10px;
	background-color:#FCFCFC;
	font-family: Verdana, Arial, Helvetica, sans-serif;
          } 
		  .main-text {
	padding:10px;
	background-color:#3a2d27;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
	line-height: normal;
	text-align:justify;
	display: block;
          }
		  .main-titel {
	color: #d50962;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	display: block;
         }  
         .main-link {
	padding:10px;
	background-color:#d50962;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: normal;
	display: block;
          }  
		  .textnav {
	font-size: 12px;
	color: #d50962;
	font-weight: bold;
		}
.textnav:hover {
	font-size: 12px;
	color: #cccccc;
	font-weight: bold;
} 
.menue {
   float: left;
   position: relative;
   width: 12%;
   padding-bottom: 4%;
   margin-right: 4%;
   margin-left: 4%;
   
}
.but {
   position: absolute;
   left: 1px;
   right: 1px;
   top: 1px;
   bottom: 1px;
   overflow: hidden;
}

.but img {
   width: 100%;
}

.but:hover {
   position: absolute;
   left: 1px;
   right: 1px;
   top: 1px;
   bottom: 1px;
   overflow: hidden;
   background-color:#d50962;
}
.wrap {
   overflow: hidden;
   margin: 10px;
}
.box {
   float: left;
   position: relative;
   width: 25%;
   padding-bottom: 25%;
}
.boxInner {
   position: absolute;
   left: 10px;
   right: 10px;
   top: 10px;
   bottom: 10px;
   overflow: hidden;
}
.boxInner img {
   width: 100%;
}
.boxInner .titleBox {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   margin-bottom: -50px; /*auf z.B 0 setzen um die Titelbox gleich erscheinen zu lassen */
   background: #000;
   background: rgba(0, 0, 0, 0.5); /* für alpha darstellung - letzter wert */
   color: #FFF;
   padding: 10px;
   text-align: center;
   -webkit-transition: all 0.3s ease-out;
   -moz-transition: all 0.3s ease-out;
   -o-transition: all 0.3s ease-out;
   transition: all 0.3s ease-out;
}
body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox {
   margin-bottom: 0;
}

#footer {
             margin-left:auto; 
             margin-right:auto; 
             width:800px;  
          }

          #footer img { 
             max-width:800px; 
             max-height:80px; 
          }


		.img-item
{
        float:left;
        margin-right:10px;
}

.img-item a
{
        float: left;
   position: relative;
}
		  
.thumb-screen
{
        display:block;
        position:absolute;
        top:0;
        left:0px;
        width:100%;
        height:110px;
        background: #000 url(../img/zoom.png) center center no-repeat;
        z-index:99;
        opacity: 0;
        transition: opacity .5s ease;
}


.thumb-screen:hover
{
        opacity:0.5;
}

		.clear
{
        clear:both;
}
 
 @media (min-width: 769px) and (max-width: 970px) {
            #banner { width:800px; }
            #banner img { max-width:800px; max-height:211px; }
            #main { width:800px; }            
            #main-content { width:760px; }
			.box { width: 25%; padding-bottom: 25%; }
			#footer { width:800px; }
            #footer img { max-width:800px; max-height:80px; }
          } 
 @media (min-width: 641px) and (max-width: 768px) {
            #banner { width:660px; }
            #banner img { max-width:660px; max-height:188px; }
            #main { width:660px; }            
            #main-content { width:620px; }
           .menue {width: 16%; padding-bottom: 6%; margin-right: 2%; margin-left: 2%}
		   .box { width: 25%; padding-bottom: 25%; }
		   #footer { width:660px; }
            #footer img { max-width:660px; max-height:66px; }
           
          } 

@media (min-width: 481px) and (max-width: 640px) {
            #banner { width:520px; }
            #banner img { max-width:520px; max-height:163px; }
            #main { width:520px; }            
            #main-content { width:500px; padding:10px }
			.menue {width: 18%; padding-bottom: 6%; margin-right: 1%; margin-left: 1%}
			.box { width: 33%; padding-bottom: 33%; }
			#footer { width:520px; }
            #footer img { max-width:520px; max-height:52px; }
          } 
		  
 @media (min-width: 421px) and (max-width: 480px) {
             #banner { width:450px; }
            #banner img { max-width:450px; max-height:141px; }
            #main { width:450px; }            
            #main-content { width:430px; padding:10px}
			.main-titel { font-size: 12px; font-weight: bold; display: left; }    
			
			.menue {width: 20%; padding-bottom: 8%; margin-right: 0%; margin-left: 0%}
			.box { width: 50%; padding-bottom: 50%; }
			#footer { width:450px; }
            #footer img { max-width:450px; max-height:45px; }
          }

@media (min-width: 361px) and (max-width: 420px) {
           #banner { width:410px; }
            #banner img { max-width:410px; max-height:128px; }
            #main { width:410px; }            
            #main-content { width:400px; padding:5px}
			.main-titel { font-size: 12px; font-weight: bold; display: left; }    
			
			.menue {width: 20%; padding-bottom: 6%; margin-right: 0%; margin-left: 0%}
			.box { width: 80%; padding-bottom: 80%; }
			#footer { width:410px; }
            #footer img { max-width:410px; max-height:41px; }
          }

@media (min-width: 321px) and (max-width: 360px) {
            #banner { width:350px; }
            #banner img { max-width:350px; max-height:109px; }
            #main { width:350px; }            
            #main-content { width:340px; padding:5px;}
			.main-titel { font-size: 12px; font-weight: bold; display: left; }
			
			.menue {width: 33%; padding-bottom: 10%; margin-right: 0%; margin-left: 0%}
			
			.box { width: 80%; padding-bottom: 80%; }
			#footer { width:350px; }
            #footer img { max-width:350px; max-height:35px; }
          }

@media (max-width: 320px) {
            #banner { width:320px; }
            #banner img { max-width:320px; max-height:100px; padding:2px;}
            #main { width:310px; }  
			#main-content { width:304px; padding:3px; margin:3px;} 
			.main-titel { font-size: 11px; font-weight: bold; display: left; } 
			
			.menue {width: 33%; padding-bottom: 10%; margin-right: 0%; margin-left: 0%} 
			.box { width: 80%; padding-bottom: 80%; }
			#footer { width:320px; }
            #footer img { max-width:320px; max-height:32px; }
			
			
          }



	    </style>