*{
	box-sizing: border-box;
	/*hyphens: auto;*/
	margin: 0;
	padding: 0;
	font-size: 15px;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 400;
	color: #000;
}
.container{
	max-width: 1180px;
	width: 100%;
    height: 708px;
    height: auto;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
.wrapper{
	width: 100%;
	padding-top: 60%;
}
.wrapper > *{
	position: absolute;
}

/* Typography */
	h1, h2, h3, h4, h5, h6{
		font-weight: 700;
	}
	h1.title {
		text-transform: uppercase;
		position: absolute;
		top: 3.5%;
		left: 1%;
		font-size: 32px;
	}
	sub {
		font-size: 65%;
	}

/* Background Image */
	.wrapper img.bg-img{
		top: 0;
		left: 0;
		width: 100%;
		max-width: 100%;
	}

/* Info Mouseover Content */
	.info-mouseover{
		display: none;
		padding: 40px 20px 20px;
		background-color: #fff;
		box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 80%);
		position: absolute;
		width: 500px;
		margin-left: calc(50% - 250px);
	}
	.info-mouseover *{
		text-align: center;
	}
	.wasserstoff .info-mouseover.wasserstoff-popup {
		padding-top: 60px;
	}

/* Info Mouseover Trigger */
	/* Headline */
		.info-mouseover-trigger p.h{
			background-color: #fff;
			color: #000;
			float: left;
			position: relative;
			font-weight: 700;
			font-size: 14px;
			text-align: center;
			margin-top: 10px;
			cursor: pointer;
		}
		/* Headline größer */
			.info-mouseover-trigger p.h.gross{
				font-size: 17px;
			}
	/* i-Button */
		.info-mouseover-trigger div.i{
			background-color: #fff;
			color: #c20000;
			border: 1px solid #c20000;
			width: 25px;
			height: 25px;
			float: left;
			margin: 5px 0 0 4px;
			border-radius: 100%;
			cursor: pointer;
			display: flex;
			align-content: center;
			position: relative;
		}
		.info-mouseover-trigger p.i{
			width: 100%;
			height: 100%;
			text-align: center;
			line-height: 1.4;
			font-weight: 700;
			color: #c20000;
		}
	/* Hover */
		.info-mouseover-trigger:hover, .info-mouseover-trigger:focus, .info-mouseover-trigger:active{
			outline: none;
			z-index: 999;
		}
		.info-mouseover-trigger:hover div.i, .info-mouseover-trigger:focus div.i, .info-mouseover-trigger:active div.i{
			color: #fff;
			background-color: #c20000;
			outline: none;
		}
		.info-mouseover-trigger:hover p.i, .info-mouseover-trigger:focus p.i, .info-mouseover-trigger:active p.i{
			color: #fff;
		}
		.info-mouseover-trigger:hover .info-mouseover, .info-mouseover-trigger:focus .info-mouseover{
			display: block;
		}

	/* Positioning */
		/* Elektrolyseur */
			.elektrolyseur{
				top: 32.5%;
				left: 24%;
			}
			/*.elektrolyseur-headline{
				top: 34%;
				left: 24%;
			}*/
		/* CCS/CCU */
			.ccs{
				top: 44%;
				left: 26.5%;
			}
		/* Dampfreformierung */
			.dampfreformierung{
				top: 62.5%;
				left: 20.3%;
			}
		/* Pyrolyse */
			.pyrolyse{
				top: 76.5%;
				left: 22%;
			}
		/* H2-Speicher */
			.h2-speicher{
				top: 55.5%;
				left: 39.4%;
			}
			.h2-speicher .info-mouseover{
				padding: 60px 20px 20px;
			}
		/* 10 % Wasserstoff */
			.wasserstoff{
				top: 32.3%;
				left: 57%;
			}
		/* rund 500.000 km */
			.rund-5htsd-km{
				top: 48.9%;
				left: 57%;
			}
		/* 6,5 Mio. Tonnen CO2 */
			.co2-6ehm-tonnen{
				top: 68%;
				left: 56%;
			}
		/* Wohnungen */
			.wohnungen{
				top: 83%;
				left: 79.5%;
				left: unset;
				right: 1%;
			}
			.info-mouseover.wohnungen-popup{
				margin-left: 0;
				right: -5px;
				top: unset;
				bottom: 0;
				padding: 20px 20px 100px;
			}

/* Popups */
	/* Popup */
		.popup{
			position: absolute;
			top: 0;
			left: 0;
			z-index: 999;
			background-color: rgba(0,0,0,.1);
			width: 100%;
			height: 100%;
			display: none ;
		}
		.popup-wrapper{
			position: relative;
			width: 90%;
			max-width: 650px;
			max-height: calc(100% - 50px);
			margin: 40px auto 0;
			background-color: #fff;
			padding: 25px 35px;
			overflow: scroll;
		}
		/* Close Button */
			div.close{
				position: absolute;
				left: unset;
				top: 20px;
				right: 20px;
				cursor: pointer;
			}
			div.close img{
				width: 16px;
				height: auto;
			}
			div.close:hover{
				opacity: .7;
			}
		/* Content */
			/* Headline */
				.popup-wrapper div.headline{
					display: flex;
					justify-content: center;
					margin-bottom: 25px;
				}
				.popup-wrapper div.headline h2{
					display: inline-block;
					background-color: #c20000;
					color: #fff;
					padding: 10px;
					text-align: center;
				}
			/* Paragraph */
				.popup-wrapper p{
					margin-bottom: 25px;
					text-align: center;
				}
			/* Links */
				.popup-wrapper a{
					display: block;
					text-align: center;
					margin: 0 auto 25px;
				}
				.popup-wrapper a.extern-link{
					color: #c20000;
				}
				.popup-wrapper a.video{
					font-weight: 700;
				}

	/* Popup Trigger */
		h2.popup-trigger{
			width: 226px;
			height: 56px;
			position: absolute;
			text-align: center;
			display: flex;
			align-content: center;
			justify-content: center;
			padding: 5px;
			font-size: 18px;
			background-color: #e9e9e9;
			cursor: pointer;
			-webkit-transition-duration: 0.3s;
			transition-duration: 0.3s;
			-webkit-transition-property: color, background-color;
			transition-property: color, background-color;
		}
		/* Hover */
			h2.popup-trigger:hover, 
			h2.popup-trigger:focus, 
			h2.popup-trigger:active{
				outline: none;
				background-color: #c20000;
				color: #fff;
			}
		/* Positioning */
			.popup-trigger.infrastruktur{
				top: 4%;
				left: 45.8%;
			}
			.popup-trigger.klimaschutz{
				top: 4%;
				left: 74.3%;
			}
			.popup-trigger.ern-energien {
				top: 40.5%;
				left: 1%;
			}
			.popup-trigger.dek-gase {
				top: 84%;
				left: 1%;
				height: 78px;
			}




@media screen and (max-width: 800px){
	* {
		font-size: 14px;
	}
	h1.title{
		font-size: 24px;
	}
	.popup-wrapper{
		margin: 30px auto 0;
		max-height: calc(100% - 40px);
	}
	h2.popup-trigger{
		width: 165px;
		height: 48px;
		font-size: 14px;
	}
	.popup-trigger.dek-gase{
		top: 83%;
		height: 78px;
	}
	/*.info-mouseover-trigger {
		margin-left: -5px;
	}*/
	.info-mouseover-trigger div.i{
		width: 20px;
		height: 20px;
	}
	.info-mouseover-trigger p.h{
		font-size: 12px;
	}
	.info-mouseover-trigger p.h.gross{
		font-size: 15px;
	}
	/* Positioning */
		.elektrolyseur{
			left: 23%;
		}
		.ccs{
			top: 43.2%;
		}
		.dampfreformierung{
			left: 19.3%;
		}
		.pyrolyse{
			left: 21%;
		}
		.h2-speicher{
			left: 38.4%;
		}
		.wasserstoff{
			left: 54%;
		}
		.rund-5htsd-km{
			left: 54%;
		}
		.co2-6ehm-tonnen{
			top: 66%;
			left: 53%;
		}
	.info-mouseover{
		width: 450px;
		margin-left: calc(50% - 225px);
	}
	.info-mouseover.pyrolyse-popup{
		bottom: 0;
		top: unset;
		padding: 20px 20px 40px;
		margin-left: calc(50% - 200px);
	}
}