* { padding: 0px; margin: 0px; border: 0px;}
img {
	border: 0;
	padding: 0;
	margin: 0;
	vertical-align: top;
	max-width: 100%;
	height: auto;
}

@font-face { font-family: 'Raleway';
             src:url('fonts/Raleway-VariableFont_wght.ttf') format('truetype'),
             url('fonts/Raleway-VariableFont_wght.ttf') format('truetype'); }

body {
	background-color: #FFFFFF;
	background-image:url(images/wrap_hint.jpg);
	background-repeat:repeat-y;

	font-family: 'Raleway', sans-serif;
	line-height:26px;
	color: #666;
	text-decoration: none;
	font-size: 18px;	
}

a { 
  border: 0px;
  padding: 0px; 
  margin: 0px;
  text-decoration: none;
  outline: none;
}

#content li { 
  
  margin-left:20px;
  list-style:square; 
  color: #009;
  line-height:1.2em;


 }

a:link {color: #900;}
a:visited {color: #900;}
a:hover { color: #666;}
a:focus { color: #666; }
a:active { color: #666; }

#nav a:link { color: #fff;}
#nav a:visited { color:#fff;}
#nav a:hover { color: #fff;}
#nav a:focus { color: #fff;}
#nav a:active { color: #fff;}



h1  {
  text-decoration: none;
  color: #666;
  font-family: 'Raleway', sans-serif;
  font-size: 1.9em;
  line-height:1.4em;
  font-weight: lighter;
  text-align:left;
  padding-top:20px;
  padding-bottom:20px;
  margin:0px;
}

h4  {
  text-decoration: none;
  color: #666;
  font-family: 'Raleway', sans-serif;
  font-size: 1.9em;
  line-height:1.4em;
  font-weight: lighter;
  text-align:left;
  padding-top:20px;
  padding-bottom:20px;
  margin:0px;
}

@media screen and (max-width: 600px) {
	
h1  {
  
  font-size: 1.5em;
  line-height:1.5em;
}
body {
	line-height:1.4em;
	font-size:1em;
}
	}

h2  {
  text-decoration: none;
  color: #222e5f;
  font-family: 'Raleway', sans-serif;
  font-size: 1.3em;
  font-weight: 100;
  line-height: normal;
    padding-top:20px;

}

h3  {
  text-decoration: none;
  color: #666;
  font-family: sans-serif;
  font-size: 1em;
  font-weight: normal;
  line-height: normal;

}



#logo {
	
    height: 100px;
	max-width:1000px;
	background-color:#FFF;
	margin:0 auto 0 auto;
	
}
#navwrap
	{
	border-top: 1px solid #060;
	border-bottom: 4px solid #060;
	background-color: #009900;
	width: 100%;
	font-size: 1.0em;
	height: 1.8em;
	z-index:20;
	}
	#nav
	{

	border-bottom: 4px solid #060;
	background-color: #009900;
	widh:100%;
	max-width:1000px;
	height: 1.8em;
	margin:0 auto 0 auto;
	z-index:20;
	}
	#nav ul { list-style: none;
		
			width: 100%; /* 1000 */
			font-family: 'Open Sans', sans-serif;
			position: absolute;
			
		
		}

			#nav > a
			{
				display: none;
			}

			#nav li
			{
				position: relative;
				
				
			}
				#nav li a
				{
				padding:0px 15px 0px 15px;
				color: #fff;
				display: block;
				}
				#nav li a:active
				{
				background-color: #00CC00;
				}

			#nav span:after
			{
				width: 0;
				height: 0;
				border: 0.313em solid transparent; /* 5 */
			
				border-top-color: #000;
				vertical-align: middle;
				display: inline-block;
				position: relative;
				right: -0.313em; /* 5 */
			}

			/* first level */

			#nav > ul
			{
				width:100%;
				height: 1.8em; /* 60 */
								
			}
				#nav > ul > li
				{
					width:auto;
					height: 100%;
					float: left;
				}
					#nav > ul > li > a
					{
						height: 100%;
						font-size: 0.9em;
						line-height: 1.8em; 
						text-align: center;
					}
						#nav > ul > li:not( :last-child ) > a
						{
							border-right: 0px solid #fff;
						}
						#nav > ul > li:hover > a,
						#nav > ul:not( :hover ) > li.active > a
						{
							
							border-bottom: 4px solid #960;
							color:#000 !important;
							background-color:#FC0;
						
						}


				/* second level */

				#nav li ul
				{
					width:200px;
					color:#fff!important;
					background-color: #009900;
					text-align: center;
					display: none;
					position: absolute;
					top: 100%;
					z-index: 100;
				}
					#nav li:hover ul
					{
						
						display: block;
						left: 0;
						right: 0;
					}
						#nav li:not( :first-child ):hover ul
						{
							
							left: -1px;
						}
						#nav li ul a
						{
							color:#fff !important;
							font-size: 0.9em;
							border-top: 1px solid #060;
							padding: 0.3em; 
						}
							#nav li ul li a:hover,
							#nav li ul:not( :hover ) li.active a
							{
							color:#000 !important;
							background-color:#FC0;
							}


	
		@media only screen and ( max-width: 1000px ) 
		{
			html
			{
				font-size: 100%; 
			}
			

			#nav
			{
				height:2.5em;
				padding-left:0px !important;
				position: relative;
				top: auto;
				left: auto;
				border-bottom: 4px solid #060;
			}
				#nav > a
				{
					height:2.3em;
       			 }
       				 #nav:not( :target ) > a:first-of-type,
       				 #nav:target > a:last-of-type
       					 {
							
							color:#fff;
							background-color:#090;
							text-align:center;
							padding-top:10px;
         				   	display: block;
							border-bottom:2px solid #000;
       					
				
				}
					#nav > a:before,
					#nav > a:after
					{
						position: absolute;
						
						top: 35%;
						left: 25%;
						right: 25%;
						
					}
					#nav > a:after
					{
						top: 60%;
					}

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


			/* first level */

			#nav > ul
			{
				width: 100% !important;
				background-color: #009900;
				height: auto;
				font-size:1.0em;
				line-height:0.6em;
				display: none;
				position: absolute;
				left: 0;
				right: 0;
			}
				#nav:target > ul
				{
					display: block;
				}
				#nav > ul > li
				{
					
					width: 100%;
					float: none;
				}
					#nav > ul > li > a
					{	
						width: 100% !important;
						height: 3em !important;
						line-height:3em !important;
						text-align: center;
						padding: 0 0;
					}
						#nav > ul > li:not( :last-child ) > a
						{
							border-right: none;
							border-bottom: 1px solid #060;
						}
						
						#nav > ul > :last-child > a
						{
							border-right: none;
							border-bottom:3px solid #666;
						}


				/* second level */

				#nav li ul {	
					width: 100% !important;
					background-color: #099;
					position: static;
					height:auto;
					line-height: 3em;
					text-align: center;
					padding: 0;
					border-bottom: 1px solid #999;
				}
				#nav li ul a{	
					width: 100% !important;
	
					position: static;
					height:auto;
					line-height: 3em;
					text-align: center;
					padding: 0 0;
					
				}
				
		}


#header {
	margin:0 auto 0 auto;
	width: 100%;
	max-width: 1000px;
	
	
}
#headerwrapper {
	background-color: #ccc;
	background-image:url(images/hint.png);
	background-repeat:repeat-x;
	width: 100%;
	border-bottom: 5px solid #090;
	
}

#wrapper {
	width:100%;
}


#content {
	
	background-color:white;
	width:90%;
	max-width:960px;
	color:#666;
	min-height:300px;
	padding:0px 20px 20px 20px;
	padding-bottom:100px;
	margin:0 auto 0 auto;
	z-index:10;
}




#footer {
	
	background-color:#333;
	width:90%;
	color: white;
	font-family: 'Open Sans', sans-serif;
	font-size:14px;
	min-height:600px;
	padding-left:5%;
	padding-right:5%;
 
	float:left;
	}



/* ============ Das Kontaktformular */
form {
	color: #666;  
	font-family:Arial, Helvetica, sans-serif;
	width:400px;
	max-width:98%;

}

label {
  display: block;
  cursor: pointer;
}
input#absender, textarea, #name, #firma, #anschrift, #tel, #nachricht {
  width:400px;
	max-width:98%;
  min-height: 30px;
  font-size:16px;
  border: 2px solid #dddddd;
  
  
}



input#absender:focus, #name:focus, #firma:focus, #anschrift:focus, #tel:focus, #nachricht:focus,
textarea:focus {
  background-color:#F0F0F0;
  color:#666666;
  
}


.button {
background-color:rgba(44,185,26,1.00); 
	max-width: 30%; 
	padding: 10px; 
	text-align: center; 
	color: #fff;
	font-size: 1em;
	border-radius: 5px;
}
.button:active, .button:hover, .button:hover a:link, .button:hover a:visited {
  background-color:rgba(10,255,0,1.00); 
  color:#000 !important;
  text-decoration: none;
  cursor:pointer;
}

.button2 {
  background: #fff;
  color: black;
  width:200px;
  height:60px;
  font-family: Verdana, Arial;
  font-size:large;
  border:2px solid #900;
  cursor: pointer;
  border-radius:10px;
  padding: 5px 5px 5px 5px;
}


/* ====================== */

select, option, textarea, input
{
font-size: 11px;
font-family: Geneva,Verdana,Arial;
color: #666;
background-color: #ffffff;
border:1px solid silver;

}

/* ===========BUTTONS=========== */

.btn {
  
  border-radius: 0px;
  padding: 0px 4px 4px 4px;
  text-decoration: none;
}

.btnhover, .btn:hover, .btnhover a:link, .btnhover a:visited {
  border-top:2px silver solid;
  color:#9C0 !important; 
  text-decoration: none;
}




.one {

	width:49%;
	padding-right:1%;
	text-align:justify;
	margin-bottom:10px;
	float:left;
}

.two {

	width:80%;
	padding-right:1%;
	text-align:justify;
	margin-bottom:10px;
	float:left;
}

#logoimg{
		width:270px;
		}

#logoimg2{
		width:130px;
		}
		
@media screen and (max-width: 600px) {
.one {
	width:99% !important; 
	padding-right:0px;
	padding-left:0px;
	margin-bottom:10px;
  }
  .two {
	width:99% !important; 
	padding-right:0px;
	padding-left:0px;
	margin-bottom:10px;
  }
  
  #logoimg{
		width:230px;
		}
		
		
  #logoimg2{
		width:100px;
		}
}	


.responsive-video {
    position: relative;
    padding-bottom: 56.25%; 
    padding-top: 25px;
    height: 0;
}
.responsive-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* ============ PopUp=========== */
#popup {
	width: 900px;
	
	max-width:90%;
	overflow: hidden;
	top: 0px;
	position: absolute;
	opacity: 1;
	z-index: 200;
	cursor: pointer;
	
	
}
#popup-container {
    margin-left: auto;
    margin-right: auto;
	
	
}
#popup-content {
	background-image:url("images/hint_popup.jpg");
	background-size: cover;
    width: 80%;
    padding: 20px;
	margin: 24px auto 0px auto;
    background-color:#C8FFAE;
    border-radius:10px;
	border:1px solid #00841F;
	
	
}