/* cyrillic-ext */
@font-face {
  font-family: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Fira Sans Condensed Regular'), local('FiraSansCondensed-Regular'), url('font/FiraSansCondensed-Regular.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Fira Sans Condensed Regular'), local('FiraSansCondensed-Regular'), url('font/FiraSansCondensed-Regular.woff2') format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Fira Sans Condensed Regular'), local('FiraSansCondensed-Regular'), url('font/FiraSansCondensed-Regular.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Fira Sans Condensed Regular'), local('FiraSansCondensed-Regular'), url('font/FiraSansCondensed-Regular.woff2') format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Fira Sans Condensed Regular'), local('FiraSansCondensed-Regular'), url('font/FiraSansCondensed-Regular.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Fira Sans Condensed Regular'), local('FiraSansCondensed-Regular'), url('font/FiraSansCondensed-Regular.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Fira Sans Condensed Regular'), local('FiraSansCondensed-Regular'), url('font/FiraSansCondensed-Regular.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('Fira Sans Condensed Medium'), local('FiraSansCondensed-Medium'), url('font/FiraSansCondensed-Medium.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('Fira Sans Condensed Regular'), local('FiraSansCondensed-Regular'), url('font/FiraSansCondensed-Regular.woff2') format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('Fira Sans Condensed Medium'), local('FiraSansCondensed-Medium'), url('font/FiraSansCondensed-Medium.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('Fira Sans Condensed Medium'), local('FiraSansCondensed-Medium'), url('font/FiraSansCondensed-Medium.woff2') format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('Fira Sans Condensed Medium'), local('FiraSansCondensed-Medium'), url('font/FiraSansCondensed-Medium.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('Fira Sans Condensed Medium'), local('FiraSansCondensed-Medium'), url('font/FiraSansCondensed-Medium.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('Fira Sans Condensed Medium'), local('FiraSansCondensed-Medium'), url('font/FiraSansCondensed-Medium.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('Fira Sans Condensed SemiBold'), local('FiraSansCondensed-SemiBold'), url('font/FiraSansCondensed-SemiBold.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('Fira Sans Condensed SemiBold'), local('FiraSansCondensed-SemiBold'), url('font/FiraSansCondensed-SemiBold.woff2') format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('Fira Sans Condensed SemiBold'), local('FiraSansCondensed-SemiBold'), url('font/FiraSansCondensed-SemiBold.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('Fira Sans Condensed SemiBold'), local('FiraSansCondensed-SemiBold'), url('font/FiraSansCondensed-SemiBold.woff2') format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('Fira Sans Condensed SemiBold'), local('FiraSansCondensed-SemiBold'), url('font/FiraSansCondensed-SemiBold.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('Fira Sans Condensed SemiBold'), local('FiraSansCondensed-SemiBold'), url('font/FiraSansCondensed-SemiBold.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('Fira Sans Condensed SemiBold'), local('FiraSansCondensed-SemiBold'), url('font/FiraSansCondensed-SemiBold.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
    font-family: 'Fira Sans Condensed', sans-serif;
    letter-spacing: 1pt;
	background: #004A36;
	font-size: 24px;
	margin: 0;
	background-position-x: center;
	background-position-y: top;
	background-repeat: no-repeat;
	overflow: hidden;
}

/* Starscreen */
#startScreen {
	visibility: hidden;
	font-weight: 500;
	text-align: center;
	font-size: 24px;
	line-height: 34px;
	width: 1920px;
	height: 1080p;
}
#startScreen #select-text {
	padding: 60px 440px 0 440px;
}

#startScreen .ranger {
	position: absolute;
	left: 60px;
	top: 60px;
	width: 320px;
	height: 320px;
	background-image: url('images/Foersterin - eine fuer alles.png');
}
#startScreen p {
	color: #D5BF9B;
}
#startScreen h1 {
	color: white;
	font-weight: 600;
	font-size: 50px;
	line-height: 60px;
	margin-top: 0;
}
#select-forest {
	margin-top: 60px;
	padding: 0 120px;
	white-space: nowrap;
}
#select-forest h2 {
	font-weight: 500;
	color: white;
	font-size: 26px;
	line-height: 32px;
	margin-top: 0;
}
#select-forest .choose-img {
	width: 430px;
	height: 70px;
	padding: 275px 25px 15px 25px;
	margin: 0 40px 0 40px;
	border-radius: 10px;
	box-shadow: 2px 2px 2px 2px black;
	display: inline-block;
	color: #004A36;
	line-height: 24px;
	font-size: 18px;
	font-weight: 500;
	overflow: hidden;
	white-space: normal;
}
#select-forest .choose-img.bg-1 {
	background-image: url('images/Waldauswahl-Feld Platzhalter 1.png');
}
#select-forest .choose-img.bg-2 {
	background-image: url('images/Waldauswahl-Feld Platzhalter 2.png');
}
#select-forest .choose-img.bg-3 {
	background-image: url('images/Waldauswahl-Feld Platzhalter 3.png');
}
#select-forest #choose-random {
	width: 200px;
	height: 40px;
	padding: 5px 10px;
	background: #004A36;
	border-radius: 8px;
	border: 0;
	box-shadow: 2px 2px 2px 2px black;
	color: white;
	font-family: 'Fira Sans Condensed', sans-serif;
	letter-spacing: 1pt;
	font-size: 18px;
	font-weight: 500;
	position: absolute;
	right: 40px;
	bottom: 40px;
}
#select-forest #choose-random:active {
  box-shadow: 2px 2px 2px 2px #333333;
  transform: translateY(4px) translateX(4px);
}
#select-forest .choose-img:active {
  box-shadow: 2px 2px 2px 2px #333333;
  transform: translateY(4px) translateX(4px);
}

/* Gameplay */
#playScreen {
	background-image: url('images/Waldbild FullHD Platzhalter.jpg');
	display: none;
	width: 1920px;
	height: 1080px;
	left: 0;
	top: 0;
	position: absolute;
	transition: background-image 1s linear;
}

.leftSide {
	width: 390px;
	height: 1000px;
	left: 0;
	top: 0;
	position: absolute;
	padding: 40px 70px 0 40px;
	margin: 0 0 40px 0;
	overflow: hidden;
}
.leftSide h1#headline {
	color: white;
	font-size: 40px;
	font-weight: 600;
	margin: 0 0 16px 0;
}
.leftSide h2.headline {
	color: white;
	font-size: 28.6px;
	font-weight: 600;
	margin: 0 0 16px 0;
}
.leftSide #description {
	color: white;
	font-size: 23px;
	line-height: 30px;
	font-weight: 600;
	color: #D5BF9B;
	height: 160px;
	overflow: hidden;
}

/* cost diagramm */
#diagramm,
#diagramm_result {
	margin-top: 24px;
	margin-bottom: 24px;
}
#diagramm .line,
#diagramm_result .line {
	height: 24px;
}
#diagramm .line .label,
#diagramm_result .line .label {
	line-height: 24px;
	width: 150px;
	float: left;
	font-size: 18px;
	color: white;
	font-weight: 500;
	height: 24px;
	overflow: hidden;
}
#diagramm_result .line .label {
	color: #004A36;
}
#diagramm .line .scale,
#diagramm_result .line .scale {
	float: left;
	height: 24px;
	overflow: hidden;
}
#diagramm .line .scale .block,
#diagramm_result .line .scale .block {
	float: left;
	width:  22px;
	height: 11px;
	margin: 7px 2px 6px 0;
	background: #115744;
}
/* scale colors */
#diagramm .line .scale.scale-1 .block:nth-child(-n+1),
#diagramm_result .line .scale.scale-1 .block:nth-child(-n+1) {
	background: #FF4000;
}
#diagramm .line .scale.scale-2 .block:nth-child(-n+2),
#diagramm_result .line .scale.scale-2 .block:nth-child(-n+2) {
	background: #FF4000;
}
#diagramm .line .scale.scale-3 .block:nth-child(-n+3),
#diagramm_result .line .scale.scale-3 .block:nth-child(-n+3) {
	background: #FF8F1E;
}
#diagramm .line .scale.scale-4 .block:nth-child(-n+4),
#diagramm_result .line .scale.scale-4 .block:nth-child(-n+4) {
	background: #FF8F1E;
}
#diagramm .line .scale.scale-5 .block:nth-child(-n+5),
#diagramm_result .line .scale.scale-5 .block:nth-child(-n+5) {
	background: #FFE41E;
}
#diagramm .line .scale.scale-6 .block:nth-child(-n+6),
#diagramm_result .line .scale.scale-6 .block:nth-child(-n+6) {
	background: #FFE41E;
}
#diagramm .line .scale.scale-7 .block:nth-child(-n+7),
#diagramm_result .line .scale.scale-7 .block:nth-child(-n+7) {
	background: #B1E41D;
}
#diagramm .line .scale.scale-8 .block:nth-child(-n+8),
#diagramm_result .line .scale.scale-8 .block:nth-child(-n+8) {
	background: #B1E41D;
}
#diagramm .line .scale.scale-9 .block:nth-child(-n+9),
#diagramm_result .line .scale.scale-9 .block:nth-child(-n+9) {
	background: #00C040;
}
#diagramm .line .scale.scale-10 .block:nth-child(-n+10),
#diagramm_result .line .scale.scale-10 .block:nth-child(-n+10) {
	background: #00C040;
}
#diagramm .line #cost.scale.scale-1 .block:nth-child(-n+1),
#diagramm_result .line #cost_result.scale.scale-1 .block:nth-child(-n+1) {
	background: #00C040;
}
#diagramm .line #cost.scale.scale-2 .block:nth-child(-n+2),
#diagramm_result .line #cost_result.scale.scale-2 .block:nth-child(-n+2) {
	background: #00C040;
}
#diagramm .line #cost.scale.scale-3 .block:nth-child(-n+3),
#diagramm_result .line #cost_result.scale.scale-3 .block:nth-child(-n+3) {
	background: #B1E41D;
}
#diagramm .line #cost.scale.scale-4 .block:nth-child(-n+4),
#diagramm_result .line #cost_result.scale.scale-4 .block:nth-child(-n+4) {
	background: #B1E41D;
}
#diagramm .line #cost.scale.scale-5 .block:nth-child(-n+5),
#diagramm_result .line #cost_result.scale.scale-5 .block:nth-child(-n+5) {
	background: #FFE41E;
}
#diagramm .line #cost.scale.scale-6 .block:nth-child(-n+6),
#diagramm_result .line #cost_result.scale.scale-6 .block:nth-child(-n+6) {
	background: #FFE41E;
}
#diagramm .line #cost.scale.scale-7 .block:nth-child(-n+7),
#diagramm_result .line #cost_result.scale.scale-7 .block:nth-child(-n+7) {
	background: #FF8F1E;
}
#diagramm .line #cost.scale.scale-8 .block:nth-child(-n+8),
#diagramm_result .line #cost_result.scale.scale-8 .block:nth-child(-n+8) {
	background: #FF8F1E;
}
#diagramm .line #cost.scale.scale-9 .block:nth-child(-n+9),
#diagramm_result .line #cost_result.scale.scale-9 .block:nth-child(-n+9) {
	background: #FF4000;
}
#diagramm .line #cost.scale.scale-10 .block:nth-child(-n+10),
#diagramm_result .line #cost_result.scale.scale-10 .block:nth-child(-n+10) {
	background: #FF4000;
}

/* options */
.options {
	margin: 30px 0 0 0;
}
.options h2 {
	letter-spacing: 1pt;
	font-size: 18px;
	font-weight: 500;
	color: white;
	margin-bottom: 20px;
}
.options .option {
	width: 390px;
	height: 104px;
	margin-bottom: 30px;
}
.options .option .text {
	float: left;
	width: 360px;
	height: 66px;
	background: #D5BF9B;
	border-radius: 8px;
	box-shadow: 2px 2px 2px 2px black;
	text-align: center;
	padding: 18px 15px;
	color: #004A36;
	font-size: 18px;
	font-weight: 500;
}
.options .option .text span {
	width: 100%;
	height: 100%;
	display: block;
	overflow: hidden;
}
.options .option .text:active {
	box-shadow: 2px 2px 2px 2px #333333;
	transform: translateY(4px) translateX(4px);
}
.options .option .question {
	background-image: url('images/Button 36x36 Fragezeichen.png');
	width: 36px;
	height: 36px;
	float: right;
	margin-right: -52px;
	margin-top: 32px;
	box-shadow: 2px 2px 2px black;
	border-radius: 18px;
}
.options .option .question:active {
	box-shadow: 2px 2px 2px 2px #333333;
	transform: translateY(4px) translateX(4px);
}
.hint {
	background: white;
	width: 400px;
	min-height: 50px;
	position: absolute;
	left: 535px;
	display: none;
	padding: 20px 40px 20px 30px;
	font-size: 16px;
	color: #004A36;
}
.hint::before {
	content: '';
	width: 0; 
	height: 0; 
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent; 
	border-right:20px solid white;
	position: absolute;
	margin-left: -50px;
	top: calc(50% - 20px);
}
.hint .close {
  position: absolute;
  right: 5px;
  top: 10px;
  width: 32px;
  height: 32px;
  opacity: 0.3;
}
.hint .close:hover {
  opacity: 1;
}
.hint .close:before, .hint .close:after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 20px;
  width: 2px;
  background-color: #333;
}
.hint .close:before {
  transform: rotate(45deg);
}
.hint .close:after {
  transform: rotate(-45deg);
}

/* Malfunctions */
#malfunction {
	display: none;
	width: 1920px;
	height: 1080px;
	left: 0;
	top: 0;
	position: absolute;
	transition: background 1s linear;
	background: rgba(161,0,19,0.3);
}
#malfunction .leftSide {
	background: rgba(161,0,19,1);
	margin-bottom: 0;
	padding-top: 110px;
	padding-bottom: 40px;
	text-align: center;
	color: white;
}
#malfunction .leftSide #achtung {
	background-image: url('images/Achtung.png');
	width: 132px;
	height: 116px;
	margin: 0 auto;
}
#malfunction .leftSide h1 {
	font-size: 32px;
	margin-bottom: 40px;
}
#malfunction .leftSide p {
	font-size: 18px;
}
#malfunction .leftSide button {
	width: 250px;
	height: 40px;
	padding: 5px 10px;
	background: #D5BF9B;
	border-radius: 8px;
	border: 0;
	box-shadow: 2px 2px 2px 2px black;
	color: rgba(161,0,19,1);
	font-family: 'Fira Sans Condensed', sans-serif;
	margin-top: 100px;
	letter-spacing: 1pt;
	font-size: 18px;
	font-weight: 500;
}
#malfunction .leftSide button:active {
	box-shadow: 2px 2px 2px 2px #333333;
	transform: translateY(4px) translateX(4px);
}

/* auswertung */
#auswertung  {
	display: none;
	width: 720px;
	height: 580px;
	background: #D5BF9B;
	z-index: 9;
	position: absolute;
	bottom: 40px;
	left: 190px;
	padding: 20px 40px;
	color: #004A36;
	font-size: 20px;
	line-height: 26px;
}
#auswertung h2 {
	font-size: 50px;
	font-weight: 600;
	margin-top: 40px;
	margin-bottom: 40px;
}
#auswertung .ranger {
	float: right;
	width: 320px;
	height: 320px;
	background-image: url('images/Försterin - eine für alles.png');
	margin: -200px;
	border-radius: 160px;
	box-shadow: 3px 3px 3px 3px #555;
}
#auswertung.res-1 .ranger {
	background-image: url('images/Foersterin - eine fuer alles.png');
}
#auswertung.res-2 .ranger {
	background-image: url('images/Foersterin - eine fuer alles.png');
}
#auswertung.res-3 .ranger {
	background-image: url('images/Foersterin - eine fuer alles.png');
}
#auswertung.res-4 .ranger {
	background-image: url('images/Foersterin - eine fuer alles.png');
}
#auswertung.res-5 .ranger {
	background-image: url('images/Foersterin - eine fuer alles.png');
}

/* timer */
#timer {
	display: none;
}

/* reset button */
#restartBtn {
	width: 200px;
	height: 40px;
	padding: 5px 10px;
	background: #004A36;
	border-radius: 8px;
	border: 0;
	box-shadow: 2px 2px 2px 2px black;
	color: white;
	font-family: 'Fira Sans Condensed', sans-serif;
	letter-spacing: 1pt;
	font-size: 18px;
	font-weight: 500;
	position: absolute;
	right: 40px;
	bottom: 40px;
}
#restartBtn:active {
	box-shadow: 2px 2px 2px 2px #333333;
	transform: translateY(4px) translateX(4px);
}

/* real pictures button */
#realpBtn {
	width: 30px;
	height: 30px;
	padding: 5px 10px;
	background: #004A36;
	border-radius: 8px;
	border: 0;
	box-shadow: 2px 2px 2px 2px black;
	color: white;
	font-family: 'Fira Sans Condensed', sans-serif;
	letter-spacing: 1pt;
	font-size: 18px;
	font-weight: 500;
	position: absolute;
	right: 260px;
	bottom: 40px;
}
#realpBtn:active {
	box-shadow: 2px 2px 2px 2px #333333;
	transform: translateY(4px) translateX(4px);
}
#realpBtn img {
	filter: invert(1);
}

/* modal */
.blocker {
	z-index: 9999;
}
.modal {
	max-width: 1280px;
	max-height: 720px;
	padding: 0;
}
.modal img {
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	-o-border-radius: 8px;
	-ms-border-radius: 8px;
	border-radius: 8px;
	-webkit-box-shadow: 0 0 10px #000;
	-moz-box-shadow: 0 0 10px #000;
	-o-box-shadow: 0 0 10px #000;
	-ms-box-shadow: 0 0 10px #000;
	box-shadow: 0 0 10px #000;
}