/* --- Stylesheet 3685 () --------- */ 

#header {
	background-color: #FFF;
	background-color: rgba(255,255,255,0.85);
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 10;
	width: 100%;
	height: 150px;
}

#header_divide {
	width: 100%;
	height: 25px;
	background-color: #40474c;
	background-color: rgba(64,71,76,0.85);
}


#header .header_inner {
	margin: 10px auto;
	position: relative;
}

#logo {
	width: 194px;
	height: 101px;
	background: url(//tramino.s3.amazonaws.com/s/gemeindewerke-oberstdorf/656712/gwo-logo.png) top left no-repeat;
	background-size: cover;
	float: left;
	cursor: pointer;
	margin: 0 80px 0 0;
}
#logo2 {
	width: 115px;
	height: 101px;
	background: url(//tramino.s3.amazonaws.com/s/gemeindewerke-oberstdorf/914714/gwo-jubilogo.jpg) top left no-repeat;
	background-size: cover;
	float: left;
	cursor: pointer;
	margin: 0 80px 0 0;
}

/* --- Stylesheet 3686 () --------- */ 

#nav {
	float: left;
	margin: 77px 50px 0 0;
}

#nav ul {
	list-style-type: none;
}

#nav ul li {
	float: left;
}

#nav ul li a {
	font-size: 17px;
	color: #41474c;
	text-transform: uppercase;
	text-decoration: none;
	padding: 3px 15px;
	font-weight: 700;
	position: relative;
	display: inline-block;

}


#body.Mandant_18430 #nav ul li a { color: #e32219 }

#body.Mandant_18430 #nav ul li ul { display: none; }

#nav >.ul > ul > li > a > .extra {
	position: absolute;
	top: 25px;
	left: 40px;
	z-index: 5;
	width: 15px;
	height: 12px;
	background: url(//tramino.s3.amazonaws.com/s/gemeindewerke-oberstdorf/633064/urarr.jpg) top left no-repeat;
	display: none;
}


/* Unternavigation */

#nav >.ul > ul > li > .ul {
	position: absolute;
	top: 135px;
	left: 0px;
	right: 0px;
	z-index: 4;
	background-color: rgba(255,255,255,0.9);
	padding: 14px 0 20px 0;
	display: none;
}


/* Subnav Handling old */
#nav >.ul > ul > li.open > .ul { display: block; }
#nav >.ul > ul > li.submenu.open > a > .extra { display: block; }

#nav >.ul > ul > li > .ul > ul {
	border-top: 7px solid #acb3b7;
	padding: 10px 0 0 0;
}

#nav >.ul > ul > li > .ul > ul > .maxwidth > li.nav_1_1 > a {
	color: #e32219;
}

#nav >.ul > ul > li > .ul > ul > .maxwidth > li.nav_1_2 > a {
	color: #e32219;
}

#nav >.ul > ul > li > .ul > ul > .maxwidth > li.nav_1_3 > a {
	color: #e32219;
}

#nav >.ul > ul > li > .ul > ul > .maxwidth > li.nav_1_4 > a {
	color: #0b89c6;
}

#nav >.ul > ul > li > .ul > ul > .maxwidth > li.nav_1_5 > a {
	color: #9ac13a;
}


#nav >.ul > ul > li > .ul > ul > .maxwidth > li >.ul > ul {
	list-style-type: square;
}
#nav >.ul > ul > li > .ul > ul > .maxwidth > li >.ul > ul > li {
	float: none;
	margin: 0 0 0 40px;
}
#nav >.ul > ul > li > .ul > ul > .maxwidth > li >.ul > ul > li > a {
	font-weight: 300;
	padding: 0;
	text-transform: none;
}

#nav > .ul > ul > li.special > a > .extra {
	top: 26px;
}


#nav >.ul > ul > li.special > .ul > ul > .maxwidth > li { list-style-type: square; }
#nav >.ul > ul > li.special > .ul > ul > .maxwidth > li {
	float: none;
	margin: 0 0 0 40px;
}
#nav >.ul > ul > li.special > .ul > ul > .maxwidth > li > a {
	font-weight: 300;
	padding: 0;
	text-transform: none;
}

#nav >.ul > ul > li.special > .ul > ul > .maxwidth {
	width: auto !important;
}

/* --- Stylesheet 3687 () --------- */ 

#header_search {
	float: left;
	border: 1px solid #40474c;
	margin: 75px 0 0 0;
}

#header_search .serach_img {
	float: left;
}

#header_search input[type=text] {
	height: 23px;
	border-width: 0px;
	padding-left: 10px;
	color: #40474c;
	font-size: 13px;
}


::-webkit-input-placeholder { /* WebKit browsers */
color: #40474c;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #40474c;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #40474c;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #40474c;
}

/* --- Stylesheet 3689 () --------- */ 

#nav_icon_wrapper {
	position: absolute;
	top: 60px;
	right: 20px;
	z-index: 10;
}

#nav_icon {
	position: relative;
	height: 40px;
	width: 40px;
	cursor: pointer;
	display: none;
}


#nav_icon .nav_line {
	position: absolute;
	left: 5px;
	width: 30px;
	height: 3px;
	background-color: #41474C;
}

#nav_icon .nav_line1 {
	top: 16px;
	-webkit-transition: all 1s 0.2s ease, top 0.2s 0.4s linear, -webkit-transform 0.4s ease;
	transition: all 1s 0.2s ease, top 0.2s 0.4s linear, transform 0.4s ease;
}

#nav_icon .nav_line2 {
	top: 24px;
	-webkit-transition: opacity 0.4s 0.4s ease;
	transition: opacity 0.4s 0.4s ease;
}

#nav_icon .nav_line3 {
	top: 32px;
	-webkit-transition: all 1s 0.2s ease, top 0.2s 0.4s linear, -webkit-transform 0.4s ease;
	transition: all 1s 0.2s ease, top 0.2s 0.4s linear, transform 0.4s ease;
}

/* Clicked */

#nav_icon.clicked .nav_line1 {
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	top:23px;
	-webkit-transition: all 0.8s 0.2s ease, top 0.2s linear;
	transition: all 0.8s 0.2s ease, top 0.2s linear;
}

#nav_icon.clicked .nav_line2 {
	opacity:0;
	-webkit-transition: opacity 0.4s ease;
	transition: opacity 0.4s ease;
}

#nav_icon.clicked .nav_line3 {
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	top:23px;
	-webkit-transition: all 0.8s 0.2s ease, top 0.2s linear;
	transition: all 0.8s 0.2s ease, top 0.2s linear;
}

/* --- Stylesheet 3688 () --------- */ 

@media all and (min-width: 1000px) and (max-width: 1230px) {
	#logo { margin: 0 30px 0 0; }
	#nav { margin: 80px 20px 0 0; }

}

@media all and (min-width: 768px) and (max-width: 999px) {

	#header {
		position: static;
		height: auto;
	}


	#nav_icon { display: block; }

	#logo { float: none; margin: 0px auto; }
	#logo2 { float: none; margin: 0px auto; }
	#nav { float: none; margin: 0px; display: none; }




	#nav >.ul > ul > li {
		float: none;
		margin-bottom: 5px;
	}

	#nav >.ul > ul > li > .ul {
		position: static;
		top: auto;
		left: auto;
		display: block;
		margin: 0 0 0 20px;
		padding: 0px;
	}

	#nav > .ul > ul > li > .ul > ul {
		border-width: 0px;
		padding-top: 0px;
	}

	#nav > .ul > ul > li > .ul > ul li  {
		float: none;
		margin-bottom: 10px;
	}

	#nav >.ul > ul > li > a > .extra { display: none; }
	#nav > .ul > ul > li.submenu.open > a > .extra { display: none; }


	#header_search { margin: 20px 0; float: none; display: none; }

	#body.Mandant_18430 #nav ul li ul { display: block; }
	#body.Mandant_18430 #nav ul li ul a { font-size: 15px; color: #41474c;  }
}

@media all and (max-width: 767px) {

	#header {
		position: static;
		height: auto;
	}

	#nav_icon { display: block; }

	#logo { float: none; margin: 0px auto; }
	#logo2 { float: none; margin: 0px auto; }
	#nav { float: none; margin: 20px 0px; display: none; }



	#nav >.ul > ul > li {
		float: none;
		margin-bottom: 5px;
	}

	#nav >.ul > ul > li > .ul {
		position: static;
		top: auto;
		left: auto;
		display: block;
		margin: 0 0 0 20px;
		padding: 0px;
	}

	#nav > .ul > ul > li > .ul > ul {
		border-width: 0px;
		padding-top: 0px;
	}

	#nav > .ul > ul > li > .ul > ul li  {
		float: none;
		margin-bottom: 10px;
	}

	#nav >.ul > ul > li > a > .extra { display: none; }
	#nav > .ul > ul > li.submenu.open > a > .extra { display: none; }


	#header_search { margin: 20px 0; float: none; display: none; }

	#body.Mandant_18430 #nav ul li ul { display: block; }
	#body.Mandant_18430 #nav ul li ul a { font-size: 15px; color: #41474c;  }

}

/* --- Stylesheet 3690 () --------- */ 

@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi) {
	#logo {
		background-image: url(//tramino.s3.amazonaws.com/s/gemeindewerke-oberstdorf/656709/gwo-logo-ipad.png);
		background-size: 194px 101px;
	}
	#logo2 {
		background-image: url(//tramino.s3.amazonaws.com/s/gemeindewerke-oberstdorf/914714/gwo-jubilogo.jpg);
		background-size: 120px 101px;
	}
}