html, body{
	width:100%; 
	height:100%;
	padding:0;
	margin:0;
	font-size: 16px;
	font-weight:300;
	line-height: 22px;
	color: #505050;
	font-family: Helvetica, Helvetica Neue, Arial;
	display: table; /* Die Seite zu einer Tabelle machen für den Sticky Footer*/
	
	}
#page{
	width:100%;
	height:auto;
	height:100%;
	display: table-row;
	}

/* \\\\\\\\\\\\\\\\\\\\ HEADER ///////////////////// */
.head-bg{
	width:100%;
	height:100px;
	background-color:green;
	position:fixed;
	top:0;
	background-image:url(../images/holz-bg.jpg);
	z-index:400;
	background-position:bottom;
	display:none;
	}	
.head-bg.head-bg-show{display:block;}
 header#head{
	width:100%;
	height:100px;
	background-color:#232323;
	background-image:url(../images/holz-bg.jpg);
	position:fixed;
	z-index:500;
	background-position:bottom;
	}
.home header#head, .page-id-17 header#head{
	height:660px;
	position:static;
	}
.header-con{
	width:1000px;
	margin:0 auto;
	padding:0;
	}

#logo{
	width:160px;
	height:160px;
	float:left;
	z-index:500;
	position:fixed;
	}
.home #logo{top:228px; position:fixed;}
.home #logo.logostop{top:410px; position:absolute;}
.home #logo.logoback{top:0px; position:fixed;}

#logo img{
	width:160px;
	}
.warenkorb-icon{
	width: 58px;
	float: right;
	margin-top: -62px;
	z-index: 600;
	position:relative;
	display:none;
	}
.warenkorb-icon a{
	width:58px;
	height:58px;
	display:block;
	background-image:url(../images/warenkorb.gif);
	background-repeat:no-repeat;
	background-size:58px;
	}
.warenkorb-icon a:hover {
	background-image:url(../images/warenkorb01.gif);
	}
.warenkorb-info{
background-color: #ffffff;
opacity:0;
height: auto;
padding: 10px;
margin-top: 5px;
float: right;
border: 1px solid #232323;
}
.warenkorb-info-show{
opacity:1;
}
@media screen and (max-width:1065px){ 
	header#head, .header-con, img, #navi{ width:100%;}
	#logo{margin-left:30px;}
}
@media screen and (max-width:780px){
	.warenkorb-icon{
	margin-top: 0px;
	margin-right:22px;
	} 
.warenkorb-icon a{
		width: 49px;
		height: 49px;
		background-size: 49px;
		border: 1px solid #232323;
	}
	.warenkorb-info{
	border: 1px solid #232323;
	margin-top: 0;
	padding: 14px 14px 13px 14px;
	float: right;
	margin-right: 5px;
	}
}
@media screen and (max-width:680px){ 
	#logo,.home #logo, .home #logo.logostop, .home #logo.logoback{	width:100px; top:0; left:30px; margin:0; padding:0; height:auto; position:fixed;}
	#logo img{width:100px;}
	.home #logo{top:0;}
	header#head, .head-bg{
		height:65px;
		}
	
	.warenkorb-info{
		display:none;
	}
	.warenkorb-icon{
	margin-top: 7px;
	margin-right: 57px;
	} 	
}

@media screen and (max-width:400px){ 
	.home header#head{
		height:480px;
		}
}	
	
/* \\\\\\\\\\\\\\\\\\\\ NAVIGATION ///////////////////// */	
	
#navi{
	width:540px;
	height:auto;
	margin-top:13px;
	left:47%;
	position:fixed;
	z-index:450;
	}

#navi .menu-hauptmenue-container ul{
	width:100%;
	height:auto;
	font-size:18px;
	line-height:20px;
	font-weight:bold;
	float:right;
	padding:0;	
	margin:4px 0 4px 0;
	}
	
#navi .menu-hauptmenue-container ul li{
								/*<---entfernen für Breite nach Inhalt&Padding */
	margin-right:0px;			/*<---Abstand einstellen*/
	float:left;
	list-style-type:none;
	position:relative;
	background-color:#fff;
	}

#navi .menu-hauptmenue-container ul li a{
	padding: 19px 10px; 		/*<---Breite und Höhe einstellen*/
	display:block;
	text-decoration:none;
	text-align:center;
	color:#494949;
	}
#navi .menu-hauptmenue-container ul li:first-child a{
	padding-left:25px;
	}
#navi .menu-hauptmenue-container ul li:last-child a{
	padding-right:25px;
	}
#navi .menu-hauptmenue-container ul li a:hover, #navi .menu-hauptmenue-container ul li.current_page_item > a:link, #navi .menu-hauptmenue-container ul li.current_page_item > a:visited, #navi .menu-hauptmenue-container ul li.current_page_item > a:active, #navi .menu-hauptmenue-container ul li.current_page_ancestor > a:active, #navi .menu-hauptmenue-container ul li.current_page_ancestor > a:link,  #navi .menu-hauptmenue-container ul li.current_page_ancestor > a:visited {
	color:#fb06ed;
	}
#navi .menu-hauptmenue-container ul li.current_page_item > a:link, #navi .menu-hauptmenue-container ul li.current_page_item > a:visited, #navi .menu-hauptmenue-container ul li.current_page_item > a:active, #navi .menu-hauptmenue-container ul li.current_page_ancestor > a:active, #navi .menu-hauptmenue-container ul li.current_page_ancestor > a:link,  #navi .menu-hauptmenue-container ul li.current_page_ancestor > a:visited {
	font-weight:bold;
	}
	

	
/*========== UNTERMENU ==========*/
#navi .menu-hauptmenue-container ul li ul.sub-menu {
	width:100%;
	position:absolute;
	margin:0;
	padding:0;		
	border:none;
	display:none;
	z-index:105;
	}	
#navi .menu-hauptmenue-container ul li ul.sub-menu li{
	clear:both;
	}	
#navi .menu-hauptmenue-container ul li:hover ul.sub-menu{
	display:block;
	}	
	
/*========== untermenü Farbe, Größe, Border und Textausrichtung ==========*/
#navi .menu-hauptmenue-container ul li ul.sub-menu li a{
	background-color:#232323;
	padding: 15px 15px;
	margin-bottom:0px;
	font-size:16px;
	color:#eee;
	border-top:1px solid white;
	width:200px;	/*+m										<---Festebreite für unterpunkte */
	text-align:left;	/*+m									<---Text links Anschlage */
	}
#navi .menu-hauptmenue-container ul li ul.sub-menu li a:hover{
	background:#fb06ed;
	color:#232323;
	}
	
/*========== MOBILE MENU-BUTTON ==========*/
.menu-button{
	width:100%;
	height:65px;
	background-color:;
	display:none;
	position:absolute;
	z-index:600;
	}
.menu-toggle{
	color: #494949;
	border: 1px solid #494949;
	background-color:#ffffff;
	display: block;
	cursor: pointer;
	border-radius: 0%;
	width: 49px;
	height: 49px;
	margin: 0 auto;
	text-align: center;
	line-height: 2.5em;
	font-weight: normal;
	font-size: 20px;
	float: right;
	margin: 7px;
	}
[data-icon]:before{
	content: attr(data-icon);
	speak:none;
	display:inline-block;
	font-size:200%;
	}	
@media screen and (max-width:1040px){ 
 #navi{
	 left:inherit;
	right:50px;
	}	
}
@media screen and (max-width:780px){ 
	#navi{
		width:500px;
	right:-30px;
	}	
}	

@media screen and (max-width:680px){ 
/*\\\\\\\\\\\\\\\\\\\\ HORIZONTALE NAVIGATION ////////////////////*/	
	#navi{width:100%; height:auto; margin:0; right:0;}
	#navi .menu-hauptmenue-container ul{
		position:absolute;
		top:-400px;
		visibility:hidden;
		-webkit-transition: visibility 0.5s ease-in-out; /* Safari 3.1 to 6.0 */
    	transition: visibility 0.5s ease-in-out;
		-webkit-transition: top 0.5s ease; /* Safari 3.1 to 6.0 */
    	transition: top 0.5s ease;
		margin:0;
		background-color:#ffffff;
	}
	#navi .menu-hauptmenue-container ul li{
		width:100%;
		margin:0;
		
	}
	#navi .menu-hauptmenue-container ul li a{
		font-size:22px;
		padding:4%;
		border-bottom:1px solid #232323;
	}
	#navi .menu-hauptmenue-container ul li:first-child a{
	padding:4%;
	}
	#navi .menu-hauptmenue-container ul li:last-child a{
	padding:4%;
	}
	#navi .menu-hauptmenue-container ul li ul.sub-menu, #navi .menu-hauptmenue-container ul li ul.sub-menu li{
		width:100%; 
		position:static; 
		padding:0;
	}	
	#navi .menu-hauptmenue-container ul li ul.sub-menu li a{
		width:100%; 		/*									<---Breite zurück setzen*/
		text-align:center;	/*								<---Text align center*/
		padding-right:0;
		padding-left:0;
		font-size:16px;
		margin:0;
		background: #fb06ed;
		color:#eee;
		border-bottom:1px solid #ffffff;
		border-top:none;
	}	
	.menu-button{display:block;}

	.js #navi .menu-hauptmenue-container .nav-menu.toggle-on{ visibility:visible;  padding-top:105px; top:0;}	
	.js #navi .menu-hauptmenue-container .nav-menu.toggle-on .sub-menu{ visibility:visible; }	
}

@media screen and (max-width:400px){ #navi .menu-hauptmenue-container ul li a{	font-size:16px;	} 	}		









	
/*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ CONTENT /////////////////////////*/
#wrapper{
	width:100%;
	min-height:100%;
	float:left;
	padding-top:160px;
	}	
.home #wrapper, .page-id-17 #wrapper{
	padding-top:0px;
	}
.wrapper00{
	padding:0;
	}
.wrapper01{
	padding:50px 0 60px 0;
	}
.wrapper02{
	padding:50px 0 60px 0;
	background-color:#f2f2f2;
	}
.wrapper03{
	padding:50px 0 60px 0;
	background-color:#e2e616;
	
	}	
	
#content{
	width:1000px;
	height:auto;
	padding: 50px 0 30px 0  ;
	margin:0 auto;
	overflow:hidden;
		}
	
.c66{
	padding-right:50px;
	}		
@media screen and (max-width:1040px){ 
#content{width:100%;}

.con{
	padding-left:30px;
	padding-right:30px;
	}

}
	
@media screen and (max-width:680px){ 
.c66{padding:0 20px 30px 20px;}
}
@media screen and (max-width:400px){ 
	#wrapper.headbalance{
	padding-top:460px;
	}
}











/*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\  FOOTER /////////////////////////*/

footer{
	width:100%;
	height:450px;
	color:#eee;
	font-size:16px;
	line-height: 130%;
	clear:both;
	background-color:#0b0b0b;
	display: table-row; /*Haupt Inhalt in eine Tabellen Zeile machen und Footer*/
	background-image:url(../images/holz-bg01.jpg);
	background-position:bottom;
	background-repeat:no-repeat;
	}
footer h2{color:#ffffff;}	
#footer-content{
	width:1000px;
	height:auto;
	margin:0 auto;
	padding-bottom:30px;
	}	
	
#footer-left{
	width:32.5%;
	height:auto;
	padding:30px 2.5% 2.5% 0;
	float:left;
	color:#eee;
	}

a.ihr-weg-zu-uns:link, a.ihr-weg-zu-uns:hover, a.ihr-weg-zu-uns:active, a.ihr-weg-zu-uns:visited{color:#b2d904;}
	
#footer-right{
	width:62.5%;
	height:auto;
	padding:27px 0% 2.5% 2.5%;
	float:left;
	}
.social-media {
	width: 100%;
	height: 50px;
}
.social-media img{
    float:left;
    width:43px;
    margin:0px 10px 0px 0;
}

<!-- formular -->
form.wpcf7-form div#name-email{
	width:100%;
	height:auto;
	float:left;
	}

div.kontakt-name input, div.kontakt-email input{width:100%; margin-bottom:10px;  background-color:#f5f5f5; border:none;}

div.kontakt-name{
	width:47%;
	height:auto;
	float:left;
	padding-right:4%;
	}

div.kontakt-email{
	width:47%; 
	height:auto;
	float:left; }		

div.kontakt-text{ width:98%; clear:both;}

.wpcf7-textarea, span.your-message{width:100%; height:90px; background-color:#f5f5f5; border:none; box-sizing:border-box;}


footer ::-webkit-input-placeholder { color:#4f4e4f; }
footer ::-moz-placeholder { color:#4f4e4f; } /* firefox 19+ */
footer :-ms-input-placeholder { color:#4f4e4f; } /* ie */
footer input:-moz-placeholder { color:#4f4e4f; }

footer input{ width:100%; height:30px;}

footer input.wpcf7-submit{
       padding:13px 30px 13px 30px;
	   height:48px;
    background-color:transparent;
    border: 1px solid #fb06ed;
    outline:none;
	font-size:18px;
    color:#fb06ed;
    font-weight: bold;
    text-decoration:none;
    -webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	display:inline-block;
	width:auto;
}
a:link.ghost-button, a:hover.ghost-button, a:visited.ghost-button, a:active.ghost-button{
	color:#fb06ed;
	} 
	
#footer-right textarea:focus{outline: none !important; border:none;}


footer span.wpcf7-not-valid-tip{
	font-size:11px;
	margin:-5px 0 0 0 ;
	padding:0;
	}
	
.wpcf7-response-output{display:none;}
#footer-right .div.wpcf7-response-output{margin:0  !important; padding:0; position:relative; z-index:5;}
.googlemap{
	width:100%;
	height:260px;
	padding-top:25px;
	color:#818181;
	}
#footer-menu{
	padding:20px 0 10px 20px;
	}	
ul#menu-footermenue{
	width:1000px;
	height:auto;
	clear:both;
	margin:0 auto;
	color:black;
	overflow:hidden;
	padding: 0;
	}	
	
ul#menu-footermenue li{
	padding:0;
	float:left;
	list-style-type:none;
	padding-right:15px;
	}

ul#menu-footermenue li a:link, ul#menu-footermenue li a:visited, ul#menu-footermenue li a:active, ul#menu-footermenue li a:hover{ text-decoration:none; color:#fb06ed;}

footer a:link, 
footer a:active, 
footer a:hover, 
footer a:visited{
	color:#eee; 
	text-decoration:none;
	}
.ajax-loader{width:1px; height:1px;}

footer span.wpcf7-not-valid-tip{ /*text von feldern bei falscheingabe*/
	color:#d24747;
	font-size:12px;
	width:100%;
	margin:-8px 0 10px 0;
    text-align: left;
    display: block;
	}
footer div.wpcf7-response-output{display:none; height:0; border:none; font-size:0;}
#footer-center .div.wpcf7-response-output{margin:0  !important; padding:0; position:relative; z-index:5;}

@media screen and (max-width:1040px){ 
#footer-content{width:90%; padding:4% 5% 5% 5%;}

nav#footer, ul#menu-footermenue{
	padding-left:2.5%;
	width:97.5%;
	}
#footer-top h1{margin:0; padding:0;}
}

@media screen and (max-width:680px){ 
	
footer{height:auto; background-position:top;}


.dreispalter_spalte, .mitglied, #footer-left, #footer-right{width:90%; padding:5%; clear:both;}

#mitglieder-content .mitglieder .mitglied h3{	width:60%;}

#footer-right h1{margin-left:0;}

#footer-left{padding-bottom:0;}

nav#footer, ul#menu-footermenue{
	padding-left:2.5%;
	width:97.5%;
	}

}