:root {
	--field-radius: 15px;
}

html,
body {
	margin: 0;
	padding: 0;
	font-size: 14px;
	font-family: "PT Sans", sans-serif;
}

* {
	box-sizing: border-box;
}

.hidden {
	display: none;
}

header {
	height: 80px;
	width: 100%;
	position: fixed;
	z-index: 999;
	background-color: #FFEB3B;
	padding: 10px 18%;
}

header img {
	float: left;
	height: 100%;
}

header div {
	font-weight: bold;
	float: left;
	height: 100%;
	font-size: x-large;
	line-height: 2.4;
	padding-left: 25px;
}

main {
	padding: 220px 0;
	width: 816px;
	margin: 0 auto;
	position: relative;
	/*overflow: hidden;*/
}

/* ================================================= */
/* ==================== LEGENDE ==================== */
/* ================================================= */
div#legend {
	width: 816px;
	height: 100px;
	background: #fff;
	position: fixed;
	z-index: 500;
	top: 100px;
	border-radius: 4px;
	box-shadow: 0px 0px 10px 0px #ccc;
}

div#legend p {
	margin: 0;
	line-height: 30px;
	text-align: center;
	font-weight: bold;
}

div.item {
	width: 25%;
	height: 100%;
	float: left;
}

div.item .box {
	height: 50px;
	width: 50px;
	float: left;
	margin: 10px;
	margin-right: 15px;
	position: relative;
	overflow: hidden;
	box-shadow: 0px 0px 10px 0px #ccc;
}

div.box.start {
	background: #6390c7;
}

div.box.end {
	background: #FFD9AE;
}

div.box.minichallenge {
	background: #6BAB90;
	border: 1px black solid;
}

div.box.xxlchallenge {
	background: #98C4D8;
	border: 1px black solid;
}

div.item span {
	line-height: 68px;
}

/* ================================================= */
/* ====================  FIELD  ==================== */
/* ================================================= */
div#field {
	position: relative;
	overflow: hidden;
}

div.field-wrapper {
	float: left;
	width: 100px;
	height: 106px;
	box-sizing: border-box;
}

div.field {
	width: 100px;
	height: 100px;
	margin: 3px 0;
	border: 1px black solid;
	text-align: center;
	font-family: Sacramento;
	font-size: 1.4em;
	line-height: 5.4em;
	position: relative;
	overflow: hidden;
}

div.field.start {
	border-radius: var(--field-radius) 0 0 var(--field-radius);
}

div.field.end {
	border-radius: 0 var(--field-radius) var(--field-radius) 0;
}

div.field.radius-top-left {
	border-radius: var(--field-radius) 0 0 0;
}

div.field.radius-top-right {
	border-radius: 0 var(--field-radius) 0 0;
}

div.field.radius-bottom-left {
	border-radius: 0 0 var(--field-radius) 0;
}

div.field.radius-bottom-right {
	border-radius: 0 0 0 var(--field-radius);
}

div.field.up {
	height: 103px;
	margin-top: 0;
}

div.field.down {
	height: 103px;
	margin-bottom: 0;
}




/* STYLE 1 */
/*
div.field.start,
div.box.start {
	border: 4px blue solid;
}

div.field.end,
div.box.end {
	border: 4px red solid;
}

div.field.minichallenge,
div.box.minichallenge {
	box-shadow: inset 0 0 10px 3px #fff;
}

div.field.xxlchallenge,
div.box.xxlchallenge {
	box-shadow: inset 0 0 10px 3px gold;
}
*/




/* STYLE 2 */
div.field.ladderstart,
div.box.start {
	border: 4px #50dc06 solid;
}

div.field.ladderend,
div.box.end {
	border: 4px #ff930d solid;
}

div.field.minichallenge::before,
div.box.minichallenge::before {
	content: "";
	position: absolute;
	top: -5px;
	left: -37px;
	transform: rotateZ(-45deg);
	height: 30px;
	width: 98px;
	background: #ffeb3b;
	background-image: url(../img/deadline.png);
	background-repeat: no-repeat;
	background-size: 21%;
	background-position: 50% 75%;
}

div.box.minichallenge::before {
	top: -15px;
	left: -51px;
	background-size: 8%;
	background-position: 50% 85%;
}

div.field.xxlchallenge::before,
div.box.xxlchallenge::before {
	content: 'XXL-Challenge';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 10px;
	background: #ffeb3b;
	box-shadow: 0px 0px 20px 20px #ffeb3b;
	line-height: 28px;
	font-size: 12px;
	font-family: 'PT Sans';
}

div.box.xxlchallenge::before {
	height: 5px;
	box-shadow: 0px 0px 10px 11px #ffeb3b;
	text-align: center;
	line-height: 15px;
	font-size: 4px;
}



div.player {
	height: 40px;
	width: 40px;
	position: absolute;
	border-radius: 100px;
	padding: 8px;
	background-repeat: no-repeat;
	background-size: 65%;
	background-position: 50%;
}

main div.player.Fuchs {
	background-color: rgba(255, 165, 0);
	background-image: url(../img/fuchs.png);
}
main div.player.Bock {
	background-color: rgba(12, 178, 65);
	background-image: url(../img/bock.png);
}
main div.player.Panther {
	background-color: rgba(24, 106, 216);
	background-image: url(../img/panther.png);
}
main div.player.Gems {
	background-color: rgba(224, 53, 53);
	background-image: url(../img/gems.png);
}
main div.player.Specht {
	background-color: rgba(217, 223, 50);
	background-image: url(../img/specht.png);
}
main div.player.Pfau {
	background-color: #9F79EE;
	background-image: url(../img/pfau.png);
	background-size: 115%;
}

div.element {
	z-index: 1;
	position: absolute;
	background-size: cover;
	height: 170px;
	width: 140px;
}

#rutsche1 {
	background-image: url('../img/rutsche_1.png');
	width: 120px;
}

#abseilen {
	background-image: url(../img/abseilen.png);
	height: 177px;
}

#klettern {
	background-image: url(../img/klettern.png);
	height: 177px;
}

#klettern2 {
	background-image: url(../img/klettern_2.gif);
	height: 177px;
}

#klettern3 {
	background-image: url(../img/klettern_3.png);
	height: 240px;
}

#klettern4 {
	background-image: url(../img/klettern_4.png);
	height: 395px;
	transform: rotateY(180deg);
}

#absturz {
	background-image: url(../img/absturz.png);
	height: 100px;
	background-position: 50%;
	background-repeat: no-repeat;
}

#finish {
	background-image: url(../img/finish.gif);
	height: 87px;
	width: 138px;
	z-index: 1;
}