@charset "UTF-8";

body { 	min-width: 990px; overflow: auto; 
		margin:0;
		background-color:#666666;

	}

/*BILD*/
#bild { max-width: 1600px;
		width:100%; 
		margin:0;
		padding:0;}

#bild div {		padding-top: 66.36%; 
				background-image:url(../bilder%20Mathias/mathias-kusche-slider_3_1172.jpg);
			    background-repeat: no-repeat; 
			   	background-size: cover; 
			    background-position: center;
				border:none;
				}
				
#head {	position: absolute;
		left: 0; top: 0; z-index: 5000;
		min-width: 990px; width: 100%;		
	}

/*LOGO*/
#logobox {	
		width:33%; min-width:30px; max-width:447px;
	}
	
#logobox a { 
		display:block;

		width: 100%;
		height: 0;
		padding-top: 13.87%;
			
		background-image: url(../bilder%20Mathias/bg_logobox_schwarz_Logo.png);
		background-size: cover;
								
		text-indent: -1000em; 
		overflow: hidden;
	}
			
/*MENÜLEISTE*/
#navibox div {	
		width:33%; min-width:30px; max-width:447px;	
		float: left;
	  }
	  
#navibox div a {
			display:block;

			width: 100%;
			height: 0;
			padding-top: 8.72%;
			
			background-image: url(../bilder%20Mathias/bg_logobox_schwarz_schauspieler.png);
			background-size: cover;
								
			text-indent: -1000em; 
			overflow: hidden;
}	  
		
/*MENÜPUNKTE*/
ul#menu {	background-image:url(../bilder%20Mathias/bg_menu_weiss.png);		/*weiße Menüleiste*/
			
			list-style-type:none;
			height: 65px;
			margin-left: 15%; 
			padding-right: 10%; 
			font-family:Arial, Helvetica, sans-serif;
			font-size:18px;
			font-style:normal;
					
			text-align:right; 
			
			margin-top:0;
			margin-right:0;
			margin-bottom:0;
		}

ul#menu li{	
			display:inline-block;
			margin-right: 3%; 		/*Abstände zwischen den Punkten nach rechts*/
			/*border: 1px solid yellow;	*/ /*TEST*/
		}

ul#menu li.kontakt{ 
			margin-right: 0%;		/*Abstand nach rechts*/	
		}

/*STYLE FÜR LINKS*/
ul#menu a {
			display: block; 
			text-decoration:none;
			color:black;
			height: 60px; line-height: 70px; /*Änderung des Zeilenhöhe und wo die Streifen sitzen */
		}

/*STYLE FÜR ROLLOVER*/
ul#menu a:hover {
			color:#666666;
			border-bottom: 5px solid #666666; 	
		}


/*CONTENTBOX*/
#contentbox{	width: 65%;
				height:31em;
				line-height:2em;
				
				position:absolute;
				z-index: 5000; 
			
				/*margin:0; */
				padding-right: 10%;	
				margin-left:15%;				
				top:10em;	
				
				background-image:url(../bilder%20Mathias/bg_content.png);
	
				font-family:Arial, Helvetica, sans-serif;
				font-size:16px;
				font-style:normal;
				
				text-align:left; 
				
				overflow:auto;}

#contentbox div{ padding: 1em 3em 1em 3em;}

/*TEXTE*/
h1			{padding-bottom: 1em;}

ul#impressumkontakt{list-style:none;
					padding:0;
					margin-bottom:3em;
					font-size:14px;
					line-height:1.5em;
					}
				
ul#fotosdesign	{list-style:none;
				padding:0;
				font-size:14px;
				line-height:1.5em;
				margin-bottom:5em;
				}

a#fotografwebsite	{text-decoration:underline;
					color:black;
					}

a:hover#fotografwebsite{text-decoration:none;
						color:#666666;
						}
						
p.haftung	{font-size:14px;
			line-height:1.5em;
			}
				
/*Aktuelles*/
#aktuellbox {	max-width:10em;
				width: 10em;
				min-width: 30px;
				height:2em;
				line-height:2em;
				
				position:fixed;
				z-index: 3000; 
			
				margin:0; 
				padding:0;
				bottom:0px;			/*damit es unten und rechts anliegt*/
				left:0px;
				
				background-image:url(../bilder%20Mathias/bg_impressum_box.png);
	
				font-family:Arial, Helvetica, sans-serif;
				font-size:12px;
				font-style:normal;
				
				text-align:center; 
		}
		
#aktuellbox a{color:white;
				text-decoration:none;
				}
				
#aktuellbox a:hover{color:#666666;
					background-image:url(../bilder%20Mathias/bg_impressum_box_hell.png);
				}
				
/*IMPRESSUMBOX*/
#impressumbox {	max-width:10em;
				width: 10em;
				min-width: 30px;
				height:2em;
				line-height:2em;
				
				position:fixed;
				z-index: 3000; 
			
				margin:0; 
				padding:0;
				bottom:0px;			/*damit es unten und rechts anliegt*/
				right:0px;
				
				background-image:url(../bilder%20Mathias/bg_impressum_box.png);
	
				font-family:Arial, Helvetica, sans-serif;
				font-size:12px;
				font-style:normal;
				
				text-align:center; 
		}
		
#impressumbox a{color:white;
				text-decoration:none;
				}
				
#impressumbox a:hover{color:#666666;
					background-image:url(../bilder%20Mathias/bg_impressum_box_hell.png);
				}
				
@media only screen and (min-width: 992px) {
  #body {
    width: 100%;
  }
}

@media only screen and (max-width: 838px) {
  #body {
    width: 100%;
  }
  #sequence .model {
    max-width: 100% !important;
    width: auto;
  }
}

@media only screen and (max-width: 768px) {
  #body {
    width: 100%;
  }
 #sequence .title {
    font-size: 2.8em;
  }
  #sequence .subtitle {
    font-size: 1.6em;
  }
  #sequence .sequence-next,
  #sequence .sequence-prev {
    height: 60px;
    margin-top: -40px;
  }
  #sequence .model {
    max-width: 100% !important;
    width: auto;
  }
}

@media only screen and (max-width: 568px) {
  #body {
    left: 0;
    min-width: 40%;
    /*prevents the model from shrinking when the browser is resized*/
    width: 100%;
  }


  /*#sequence .title {
    background: #FFFFFF;
    background: rgba(0, 0, 0, 0.3);
    bottom: 0;
    left: 100%;
    padding: 4%;
    bottom: -50%;
    width: 100%;
    z-index: 10;
  }
  #sequence .subtitle {
    visibility: hidden;
  }*/
 
}

@media only screen and (max-width: 518px) {
  #body {
    width: 100%;
  }
}

@media only screen and (max-width: 468px) {
  #body {
    height: 100%;
  }
  /*#sequence .sequence-pagination {
    opacity: 0;
    visibility: hidden;
  }*/
}

@media only screen and (max-width: 418px) {
  #body {
    height: 375px;
  }
}

@media only screen and (max-width: 368px) {
  #body {
    height: 100%;
  }
  #sequence .title {
    font-size: 2.2em;
  }
}

@media only screen and (max-width: 320px) and (orientation: portrait) {
  /*iphone portrait*/
  #body {
    height: 100%;
  }
  #sequence .model {
    min-height: 45%;
    width: 45%;
  }
 
}

@media only screen and (min-width: 321px) and (max-width: 480px) and (orientation: landscape) {
  #body {
    width: 100%;
  }
  #sequence .model {
    min-width:100%;
    width: 100%;
  }
  #sequence .sequence-pagination {
    right: 17.5%;
  }
}