@charset "utf-8";
	#close-open {display:none;}
/* ALERT- SECTION*/
	.alert {width:100%; right:0; left:0;}

/* TOGGLE-ACTIVE-SECTION*/
	/** Bootstrap excerpt */
	.btn-test {display:inline-block; position:relative; margin-bottom:0; font-weight:normal; color:#333; text-align:center; white-space:nowrap;
	vertical-align:middle;
	background-image:none;
	background-color:#fff;
	border:1px solid #ccc;
	border-radius:4px;
	-ms-touch-action:manipulation;
	touch-action:manipulation;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	cursor:pointer;
	}
	.btn-test span {color:#00afd0;}
	[class*=btn-label-]:hover {color:#aed100;}
	/** Just for presentation */
	.btn-lg {width:200px; padding:10px 16px; font-size:18pt; line-height:1; border-radius:6px;}
	.btn-test:not(.active)>.btn-label-active, .btn-test.active>.btn-label-default {display:none;}

/* MENU-HOVER-SECTION*/

/* GESAMT FÜR ALLE DREI VERSIONEN */
	#wmm>section:last-child {margin-bottom:25px;}
	/* 01 */.waechter-small.breeding, .child.zucht {background-image:url(/static/waechter/small_breeding.png);}/* Beinhaltet 2 Grafiken (SW/Color) */
	/* 02 */.waechter-small.food, .child.futter {background-image:url(/static/waechter/small_food.png);}
	/* 03 */.waechter-small.runes, .child.runen {background-image:url(/static/waechter/small_runes.png);}
	/*-------------------------------------------------------------------------------------------*/

/* Version 1 */
	.waechter-small {float:left; width:85px; height:85px; background-position:0 0; border:1px solid lightgrey; transition:all 0.0s linear;}/*transition:all 0.2s ease;*/
	.waechter-small:hover {background-position:0 -85px; cursor:pointer;}
	.waechter-small.active {background-position:0 -85px;}
	/* WÄCHTER*/
	/* 01 */.waechter-small.breeding {background-repeat:no-repeat;}
	/* 02 */.waechter-small.food {background-repeat:no-repeat;}
	/* 03 */.waechter-small.runes {background-repeat:no-repeat;}

/* Version 2 */
	/* WÄCHTER MENU-transform*/
	.waechter-small.transform:focus, .waechter-small.transform:hover {transform:scale(1.2)}

/* Version 3 */
	/* WÄCHTER MENU-transition*/

/*Dimensionen für das Elternelement spezifizieren.*/
.parent {display:inline-block; position:relative; width:85px;  height:85px; border:1px solid lightgrey; overflow:hidden;}

.child {float:left; width:100%; height:100%; background-color:transparent; /* fallback color */ background-position:0 0; background-size:cover;
/*Um den grundlegenden Effekt zu beenden, können wir dem Normalzustand unseres Kindelements einige Übergänge hinzufügen.*/
 -webkit-transition:background-size 0.5s;
 -moz-transition:background-size 0.5s;
 -o-transition:background-size 0.5s;
 transition:background-size 0.5s;
}
.parent .child a {display:none; position:absolute; font-weight:bold; text-align:center;}
.parent .child:focus, .parent .child:hover {background-position:0 -85px;}
.parent .child.zucht:focus a::before, .parent .child.zucht:hover a::before,
.parent .child.futter:focus a::before, .parent .child.futter:hover a::before,
.parent .child.runen:focus a::before, .parent .child.runen:hover a::before {display:inline-block; margin:40% 0; padding:0 5px; background-color:white; border-radius:8px;}
.parent .child.zucht:focus a::before, .parent .child.zucht:hover a::before {color:red; content:"Züchten";}
.parent .child.futter:focus a::before, .parent .child.futter:hover a::before {color:blue; content:"Futter";}
.parent .child.runen:focus a::before, .parent .child.runen:hover a::before {color:green; content:"Runen";}
.parent .child.no-text:focus a::before, .parent .child.no-text:hover a::before {content:"";}
/*Elternelement Hover-Effekte hinzufügen.*/
.parent:focus .child, .parent:hover .child {-webkit-transform:scale(1.2); -moz-transform:scale(1.2); -ms-transform:scale(1.2); -o-transform:scale(1.2); transform:scale(1.2);}
.parent:focus .child:before, .parent:hover .child:before,
.parent:focus a, .parent:hover a{display:block;}

/*Ein Tool zum Hinzufügen von Präfixen für die bestmögliche Browserunterstützung.*/
/* https://css-tricks.com/autoprefixer/ */

/*Farbüberlagerung mit Pseudoelemente hinzufügen.*/
.child::before {display:none; position:absolute; top:0; width:100%; height:100%; content:"";}
.parent .child.zucht.bg-text:focus a::before, .parent .child.zucht.bg-text:hover a::before,
.parent .child.futter.bg-text:focus a::before, .parent .child.futter.bg-text:hover a::before,
.parent .child.runen.bg-text:focus a::before, .parent .child.runen.bg-text:hover a::before {color:white; background-color:transparent;}
.child.bg-text::before {background-color:rgba(55, 145, 215, .5);}

/*Wenn wir nun auf das Elternelement zeigen, sollte das Kindelement eine Farbüberlagerung zeigen!*/

/*ALTERNATIV:Text hinzufügen, der auf unserem Overlay angezeigt wird.*/
/*Zu Kindelement Element hinzufügen:<div class="child"><span>Hello</span></div>*/
/*<span>Stil geben:span {position:absolute; padding:25%; font-family:sans-serif; color:white;} /* Good thing we set a fallback color! */
/*.parent beim hovern <span> sichtbar machen:*/
/*.parent:hover span, .parent:focus span {display:block;}*/

/*Mobiler Support
Wenn es sich bei den Containern um Links handelt und die Hover-Zustände
keine wesentlichen Informationen enthalten, können Sie sie einfach in Ruhe lassen.
Wenn der Hover-Status wichtig ist, kann ein leerer onclick=""-Handler auf unseren .parent-Containern verwendet werden, damit dies auf Touchscreens funktioniert.*/