/* ------------------------------------------------------------------  C O L O R S   -- */
.w3-dkgreen,.w3-hover-dkgreen:hover{color:#fff!important;background-color:#037067!important}


/* ------------------------------------------------------------------  H E A D E R   -- */

/*.banner  {
background-color:transparent;
background-image: url("../images/header_overlay_wkm.svg"), url("../images/header_overlay_logo.svg"), url("../images/header_overlay_bg.svg"), url("../images/wasserturm_1151_437.jpg");
background-position: top right -1200px, top left, top left, center right;
background-repeat: no-repeat;

background-size: cover;
aspect-ratio: 1151/437;
width:100%;
min-height: 300px;
overflow: hidden;
animation-name: animatedheader;
animation-duration: 1s;
animation-delay: 0s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-timing-function: linear;
}
*/
.banner  {
	background-color:#037067;
	position:releative;
	aspect-ratio: 1151/437;
	width:100%;
	min-height: 300px;
}


.banner_bg, .banner_frame  {
	position:absolute;
	top: 0;
	left: 0;
	background-color:transparent;
	background-repeat: no-repeat;
	background-size: cover;
	width:100%;
	height: 100%;
	overflow: hidden;
}

.banner  {
	position:releative;
}

.banner_bg  {
	background-image: url("../images/header/herbstwiese_1151x437.jpg");
	background-position: center right;
}

.banner_frame {
	background-image: url("../images/header/header_overlay_wkm.svg"), url("../images/header/header_overlay_logo.svg"), url("../images/header/header_overlay_bg.svg");
	background-position: top right -1200px, top left, top left;
	animation-name: animatedheader;
	animation-duration: 1s;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
}



@keyframes animatedheader {
	from { background-position: top right -1200px, top left, top left, center right; }
	to { background-position: top center, top left, top left, center right; }
}




/* ----------------------------------------------------------  N A V I G A T I O N   -- */
#topnav .topnav-left {
  float: left;
}


#topnav .topnav-right {
  float: right;
}


/*  search box  */
#topnav input[type=text] {
  padding: 3px;
  margin: 8px;
  font-size: 14px;
  border: 1px solid #999;
  border-radius: 5px;
  width:300px;
}



nav ul {
	padding:0;
	margin:0;
	
}

nav ul li {
	display:inline-block;
	padding: 0 10px;
	margin:0;
}

nav #xs-nav ul li  {
	display:block;
}

nav .w3-button.active  {
	background-color:#8bc34a;
	color:black;
}


/* ----------------------------  F O N T A W E S O M E   I C O N   M O D I F I E R   -- */

.icon--fill {
  background-color: currentColor;
  fill:#fff;
}
.icon--border, .icon--circle, .icon--round {
  border:1px solid currentColor;
  padding:1px;
}

.icon--round {
  border-radius: 4px;
}

.icon--circle{
  border-radius: 50%;
}


.icon--2x  {font-size:200%;}
.icon--3x  {font-size:300%;}
.icon--4x  {font-size:400%;}
.icon--5x  {font-size:500%;}
.icon--6x  {font-size:600%;}

.text--05  {font-size: 0.5em}
.text--06  {font-size: 0.6em}
.text--07  {font-size: 0.7em}
.text--08  {font-size: 0.8em}
.text--09  {font-size: 0.9em}

a:not(.w3-button):not(.w3-btn):not(.imagelink) {
	text-decoration:none;
	color:#037067;
}
a:not(.w3-button):not(.w3-btn):not(.imagelink):hover {
	border-bottom:1px solid #037067;
}

.inline-button  {
  display: inline-block;
  margin-left: 0.1em;
  margin-right: 0.1em;
  position: relative;
  top: -0.2em;
}

.content ul li {padding-bottom:0.5em;}



/*   ----------------       layout       ------------- */
@media (min-width:993px)  {
	.fixed-sidebar-right > .w3-row {
		margin-right: 350px;
	}
	.fixed-sidebar-right .main  {
		float:left;
		width:100%;
	}

	.fixed-sidebar-right .sidebar  {
		width: 350px;
		float: right;
		margin-right: -350px;
	}
}



div.content p,
div.content li {
  	-webkit-hyphens: auto;
  	-ms-hyphens: auto;
  	hyphens: auto;
  	text-align:justify;
}

.content ul  {
	padding-left:1em;

}

.pw {
	word-spacing: -0.15em;
	white-space: nowrap;
	font-style: italic;
	text-justify: none;
}

/* ----------------------------------------------------  T R A I N I N G S P L A N   -- */
#trainingsplan td  {
	font-size: 15px;
	color: #333;
}

#trainingsplan .red  {
	color: red;
}