/* lato-300 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: url('./fonts/lato-v23-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('./fonts/lato-v23-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./fonts/lato-v23-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/lato-v23-latin-300.woff') format('woff'), /* Modern Browsers */
       url('./fonts/lato-v23-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./fonts/lato-v23-latin-300.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-700 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url('./fonts/lato-v23-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('./fonts/lato-v23-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./fonts/lato-v23-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/lato-v23-latin-700.woff') format('woff'), /* Modern Browsers */
       url('./fonts/lato-v23-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./fonts/lato-v23-latin-700.svg#Lato') format('svg'); /* Legacy iOS */
}





* {
margin: 0;
}
html{
	height: 100%;
	}

body {
margin: 0;	
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 16px;
height: 100%;
background-color:#ffffff;
}



.head {
	width: 100%;
	height: 75px;
	}

.nav {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	}
	
.headpic {
	width: 100%;
	}	

.inhalt {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	}
	
.inhalt1 {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	}
		
.kontform {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	background-image:url(material/telefon-kuechentreff.png); 
	background-repeat:no-repeat; 
	background-position:right;
	}	

.midpic {
	width: 100%;
	}
	
.kontakt {
	width: 100%;
	background-color: #eeeeee;
	}
	
		
.kontform1 {
	width: 100%;
	height: 200px;
	margin: 0 auto;
	background-image:url(material/telefon-kuechentreff.png); 
	background-repeat:no-repeat; 
	background-position:center;
	}	
	
					
.innerbox01 { width: 30%; float: left; margin-right: 4.5%; margin-bottom: 5%; }
.innerbox02 { width: 30%; float: left; margin-bottom: 5%;}
.innerbox03 { width: 50%; float: left; margin-bottom: 5%;
				}
.innerbox04 { width: 65%; float: left; margin-bottom: 5%;}
.innerbox05 {
	width: 25%;
	float: left;
	margin-bottom: 5%;
	font-size: 10px;
}
.innerbox_film { width: 30%; float: left; margin-bottom: 5%;}
	
#navi {
	position: relative;
	z-index: 220;
	margin: 0 auto;	
	max-width: 1100px;
	height: 75px;
	top:20px;
	right: 0;
	}


	h1 {
	font-family: 'Lato', sans-serif;
	font-weight:300;
	font-size: 2.5em;
	line-height: 1.2em;
	margin: 0;
	padding: 0;
	color: #222222;
	padding: 25px 0px 40px 0px;
	text-transform: uppercase;		

	}


/*  ############################  Media Fallbacks  ######################   */

/* Laptop/Tablet (1024px) */
@media only screen and (min-width: 481px) and (max-width: 1024px) and (orientation: landscape) {
	.innerbox01 { width: 29%; float: left; padding-left: 10px;}
	.innerbox02 { width: 29%; float: left; padding-left: 10px;}
	h1 { padding-left: 10px; }
	
}

/* Tablet Portrait (768px) */
@media only screen and (min-width: 321px) and (max-width: 1024px) and (orientation: portrait) {
	.innerbox01 { width: 90%; float: left; padding-left: 10px;}
	.innerbox02 { width: 90%; float: left; position: relative; padding-left: 10px;}
	.innerbox03 { width: 90%; float: left; margin-left:0; margin-right:0; padding-left: 10px;}
		.beschreibung {display: none;}
		.beschreibungtop {display: none;}
		.kontform {background-image: none;}
	h1 { padding-left: 10px; }	
	
}

/* Phone Landscape (480px) */
@media only screen and (min-width: 321px) and (max-width: 480px) and (orientation: landscape) {
	.innerbox01 { width: 90%; float: left; padding-left: 10px;}
	.innerbox02 { width: 90%; float: left; position: relative; padding-left: 10px;}
	.innerbox03 { width: 90%; float: left; margin-left:0; margin-right:0; padding-left: 10px;}
	.beschreibung {display: none;}
	.beschreibungtop {display: none;}
	.kontform {background-image: none;}
	h1 { padding-left: 10px; }
	
}

/* Phone Portrait (320px) */
@media only screen and (max-width: 320px) {
	.innerbox01 { width: 90%; float: left; padding-left: 10px;}
	.innerbox02 { width: 90%; float: left; position: relative; padding-left: 10px;}
	.innerbox03 { width: 90%; float: left; margin-left:0; margin-right:0; padding-left: 10px;}
	.beschreibung {display: none;}
	.beschreibungtop {display: none;}
	.kontform {background-image: none;}
	h1 { padding-left: 10px; }
	}
	
}

/* Laptop/Tablet (1024px) */
@media only screen and (min-width: 1025px) and (max-width: 3000px) and (orientation: landscape) {
#navi {max-width: 1100px;}

}


	
#logocont {
	width:100%;
	max-width: 1100px;
	margin: 0 auto;
	height:2px;
	z-index:101;
	left: 0;
	top:0;	
}



div.wrapper {  
    position:relative; /* absolute position (so we can position it where we want)*/  
	margin-top: 0;
    bottom:0px; /* position will be on bottom */    
    width:325px; 	/* styling bellow */  
    color:#222222;
    }

div.description {  
    position:absolute; /* absolute position (so we can position it where we want)*/  
    bottom:0px; /* position will be on bottom */  
    left:0px;  
    width:98%; 	/* styling bellow */  
    background-image: url(material/bg-caption.png);
	background-repeat: repeat-x;
	background-position: bottom;
font-family: 'Lato', sans-serif;
font-weight: 300;
	color: #222222;
	font-weight: 400;     
    }  

div.wrapbeschr {
    position:relative; /* absolute position (so we can position it where we want)*/  
	margin-top: 0;
    bottom:0px; /* position will be on bottom */    
    width:100%;
	max-width: 1100px;
	margin: 0 auto; 
	 	/* styling bellow */  

	}
div.beschreibung {  
    position:absolute; /* absolute position (so we can position it where we want)*/  

    bottom:0px; /* position will be on bottom */    
    width:100%;

    color:#ffffff;
	z-index: 100;

    }



div.wrapbeschrtop {
    position:relative; /* absolute position (so we can position it where we want)*/  
	bottom: 0px;
     /* position will be on bottom */    
    width:100%;
	max-width: 1100px;
	margin: 0 auto; 
	 	/* styling bellow */  

	}
div.beschreibungtop {  
    position:absolute; /* absolute position (so we can position it where we want)*/  
   bottom: 0px;
     /* position will be on bottom */    
    width:100%;

    color:#ffffff;
	z-index: 100;

    }






/* ##########################  SCHRIFT ######################## */		

	
	h3 {
	font-family: 'Lato', sans-serif;
	font-size: 2.5em;
	font-weight:300;
	margin: 0;
	padding: 0;
	color: #ffffff;
	padding: 25px 0px 0px 25px;	
	text-transform: uppercase;
	text-shadow: 0px 0px 6px #000000;
			}
			
	.untertitel	{
	font-family: 'Lato', sans-serif;
	font-size: 1em;
	line-height: 1.2em;
	font-weight:300;
	margin: 0;
	padding: 0;
	color: #ffffff;	
	}	
			
	h4 {
	font-family: 'Lato', sans-serif;
	font-weight: 700;
	font-size: 1.7em;
	margin: 0;
	padding: 10px 0 5px 15px;
	color: #222222;	
	text-transform: uppercase;	
			}		
	.descrtxt {
	font-family: 'Lato', sans-serif;
	font-size: 1.1em;
	line-height: 1.2em;
	margin: 0;
	padding: 1px 10px 10px 15px;
	color: #222222;			
		}		
		
	.fliesstext {
	font-family: 'Lato', sans-serif;
	font-weight:300;
	font-size: 1.1em;
	line-height: 1.2em;
	color: #111111;
	margin: 0;
	padding: 0 0 5px 0px;
		}		
		
	.schausonntag {
	font-family: 'Lato', sans-serif;
	font-weight:300;
	font-size: 1.1em;
	line-height: 1.2em;
	color: #111111;
	margin: 0;
	padding: 0 0 0px 0px;
		}
		

a:link { color: #111111; text-decoration: none; }			
a:active { color: #111111; text-decoration: none; }
a:visited { color: #111111; text-decoration: none; }
a.hover, a:hover { color:#666666; text-decoration:none; }		



ul {
	margin: 0;
	padding-left: 15px;
	padding-top: 10px;
	font-family: 'Lato', sans-serif;
	line-height: 1.2em;
	font-size: 1.1em;
	}

ul li {
	
	padding-bottom: 5px;
	}





ul.aufzaehl {
	margin-top: 0;
	margin-left: 5px;
	width: 95%;
	list-style: none;
	}
	
	ul.aufzaehl li { 

	padding: 7px 0 7px 0;
	width: 95%;
	
	list-style-image: url(material/plus.jpg);
	}
	
	


hr {
border: none;
border-top: 1px dotted #444444;
background-color: #FFFFFF;
height: 1px;
width:95%
}

.dotted-gradient {
  /*  background-image: linear-gradient(to right, #222 40%, rgba(255, 255, 255, 0) 20%);
    background-position: top;
    background-size: 3px 1px;
    background-repeat: repeat-x;
	width: 100%; */
	
	background-image: linear-gradient(to right, #111 10%, rgba(255, 255, 255, 0) 0%);
    background-position: top;
    background-size: 10px 1px;
    background-repeat: repeat-x;
}	








/* ############################  subnavi ################# */
			#unternavi {
			float: left;
			margin-left: 0;
			margin-top: 15px;
				}
			
			#unternavi > a
			{
				display: none;
				z-index:201;
			}

			#unternavi li
			{
				position: relative;
				z-index:201;
			}
				#unternavi li a
				{
					color: #222222;
					display: block;
					
				}
				#unternavi li a:active
				{
					
				}
				
				#unternavi li a:hover
				{
					color: #c2001b; !important;
				}

			#unternavi span:after
			{
				width: 0;
				height: 0;
				
				content: '';
				vertical-align: middle;
				display: inline-block;
				position: relative;
				right: -0.313em; /* 5 */
			}

			/* first level */

			#unternavi > ul
			{
				
				list-style: none;
				position:relative;
				z-index: 201;
				margin-left: 0;
				padding-left: 0;
			}
				#unternavi > ul > li
				{
					
					float: left;
					
					padding: 3px 3px 3px 3px;
					margin-right: 20px;
					font-size: 1.08em; /* 24 */
					line-height: 1.2em; /* 60 (24) */
					color: #222222;
					
				}
					#unternavi > ul > li > a
					{
						height: 100%;
						
						text-align: center;
						
					}
						
						#unternavi > ul > li:hover > a, #unternavi > ul > li:hover,
						#unternavi > ul:not( :hover ) > li.active > a
						{
							color: #c2001b;
							font-weight:700;
						}


					





/* ############################  navi ################# */

			
			#nav {
			float: right;
				}
			
			#nav > a
			{
				display: none;
				z-index:201;
			}

			#nav li
			{
				position: relative;
				z-index:201;
			}
				#nav li a
				{
					color: #222222;
					display: block;
					font-weight: 100;
				}
				#nav li a:active
				{
					
				}
				
				#nav li a:hover
				{
					color: #c2001b; !important;
				}

			#nav span:after
			{
				width: 0;
				height: 0;
				
				content: '';
				vertical-align: middle;
				display: inline-block;
				position: relative;
				right: -0.313em; /* 5 */
			}

			/* first level */

			#nav > ul
			{
				
				list-style: none;
				position:relative;
				z-index: 201;
			}
				#nav > ul > li
				{
					
					float: left;
					
					padding: 3px 4px 3px 4px;
					margin-right: 18px;
					font-size: 1.1em; /* 24 */
					line-height: 1.2em; /* 60 (24) */
					color: #222222;
					
				}
					#nav > ul > li > a
					{
						height: 100%;
						
						text-align: center;
						
					}
						
						#nav > ul > li:hover > a, #nav > ul > li:hover,
						#nav > ul:not( :hover ) > li.active > a
						{
							color: #c2001b;
							font-weight:700;
						}


					


		@media only screen and ( max-width: 63em ) /* 1000 */
		{
			#nav
			{
				width: auto;
				position: static;
				margin: 0;
				z-index:201;
			}
		}

		@media only screen and ( max-width: 61em ) /* 640 */
		{
			html
			{
				font-size: 75%; /* 12 */
			}

			#nav
			{
				position: relative;
				top: auto;
				left: auto;
				
			}
				#nav > a
				{
					width: 3.125em; /* 50 */
					height: 3.125em; /* 50 */
					text-align: left;
					text-indent: -9999px;
					background-color: #c2001b;
					position: relative;
				}
					#nav > a:before,
					#nav > a:after
					{
						position: absolute;
						border: 2px solid #fff;
						top: 35%;
						left: 25%;
						right: 25%;
						content: '';
					}
					#nav > a:after
					{
						top: 60%;
					}

				#nav:not( :target ) > a:first-of-type,
				#nav:target > a:last-of-type
				{
					display: block;
				}


			/* first level */

			#nav > ul
			{
				height: auto;
				display: none;
				position: absolute;
				
				right: 0;
				list-style: none;
				background-color: #c2001b;
			}
				#nav:target > ul
				{
					display: block;
				}
				#nav > ul > li
				{
					width: auto;
					float: none;
					color: #ffffff;
				}
					#nav > ul > li > a
					{
						height: auto;
						width: auto;
						text-align: left;
						padding: 0.5em 0 0.5em 0; /* 20 (24) */
						color: #ffffff;
					}

				#nav li a:hover
				{
					color: #cccccc !important;
				}

#nav > ul:not( :hover ) > li.active > a
						{
							color: #dddddd;
						}
				
		}
		
		
		


table {
	border: 0;
	border-collapse:collapse;	
	margin-left: 0px;
	width: 90%;
	}
	
	td { padding: 5px 0 5px 0; }

.text_field {
	width: 90%;
	font-size: 1em;
	line-height: 1.3em;
	margin: 0px 0 10px 0;
	}
	
.textarea {
	width: 90%;
	}