body {
	margin: 0;
}

ivion {
	height: 100vh;
}

.header {
	position: relative;
	top: 0;
	left:0 px;
	width: 100%;
	background-color: rgba(230, 230, 230, 1);
	z-index: 100;
}

.header__inner {
	display: flex;
	flex-direction: row;
	max-width: 1200px;
	margin: 0 auto;
	padding: 2px;
}

.logo {
	background-image: url(../image/logo_dm_eule_deutsches_museum.svg);
	background-repeat: no-repeat;
	background-position: top left;
	background-size: 148px 32px;
	width: 148px;
	height:32px;
}

.claim {
	font-size: 15px;
	color:rgba(50, 50, 50, 0.9);
	text-transform: uppercase;
	padding: 9px;
}

iframe {
	border: none;
	width: 100%;
	height: auto;
}

.form__outer {
	margin-top: 30px;
}

.donation-button {
	position: absolute;
	display: block;
	top: 90px;
	right: 70px;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background-color: #d12129;
	cursor: pointer;
}

.donation-button span {
	display: block;
	color: #fff;
	font-weight: 700;
	font-size: 16px;
	line-height: 16px;
	transform:rotate(-20deg);
	margin-top: 25%;
	margin-left: -4%;
	text-align: center;
}

.donation-button.button--small {
	top: 70px;
	right: 70px;
	width: 30px;
	height: 30px;
}

.donation-button.button--small span {
	font-size: 6px;
	line-height: 9px;
	margin-top: 15%;
}

.dialog {
	opacity: 1;
	width: 0px;
	height: 0px;
	max-width: 95%;
	max-height: 90vh;
	position: absolute;
	top: 50%;
	left: 50%;
	padding: 0px;
	transform: translate(-50%,-50%);
	background-color: #fff;
	-webkit-transition: width 1s, height 1s, padding 1s;
    -moz-transition: width 1s, height 1s, padding 1s;
    -ms-transition: width 1s, height 1s, padding 1s;
	transition: width 1s, height 1s, padding 1s;
	overflow-y: scroll;
}

.dialog.active {
	width: 580px;
	height: 600px;
	padding: 20px 30px;
}

.donation-form.dialog.active {
	height: 760px;
	padding: 20px 20px;
}

.dialog h1 {
	text-align: center;
	font-size: 26px;
	margin-bottom: 20px;
}

.dialog h1 i {
	position: relative;
	left: -10px;
	top: 3px;
}

.dialog a {
	color: #f0163a;
}

.dialog a:focus, .dialog a:hover {
	color: #a36700;
}

.icon--close {
	display: none;
	position: absolute;
	top: 20px;
	right: 20px;
	width: 30px;
	height: 30px;
	color: #666;
}

.icon--highlight {
	background-image: url(../image/stars-black-18dp.svg);
	background-repeat: no-repeat;
	padding-left: 24px;
}

.dialog .dialog__inner {
	width: 0;
	height: 0;
	-webkit-transition: width 1s, height 1s;
    -moz-transition: width 1s, height 1s;
    -ms-transition: width 1s, height 1s;
    transition: width 1s, height 1s;
}

.dialog.active .dialog__inner {
	width: 520px;
}

ul.picto-list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0 0 20px 0;
}

ul.picto-list a {
	text-decoration: none;
}

.picto-list li {
	position: relative;
	flex-direction: column;
	margin: 0 15px 15px 0;
	height: 120px;
	border: 1px solid #323232;
	border-radius: 6px;
	box-shadow: 2px 2px 2px #bbb;
}

.picto-list li:hover {
	transform: scale(1.02);
}

.picto-label {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 30px;
	width: 85px;
	color: #323232;
	font-size: 10px;
	text-align: center;
}

.picto {
	display: block;
	background-repeat: no-repeat;
	background-position: top left;
	background-size: cover;
	border-radius: 2px;
	width: 85px;
	height: 85px;
}

.picto--astronomie {
	background-image: url(../image/astronomie.svg);
}

.picto--bergwerk {
	background-image: url(../image/bergwerk.svg);
}

.picto--besucherlabor {
	background-image: url(../image/besucherlabor.svg);
}

.picto--energie {
	background-image: url(../image/energie.svg);
}

.picto--geodaesie {
	background-image: url(../image/geodaesie.svg);
}

.picto--giessen {
	background-image: url(../image/giessen.svg);
}

.picto--glasblasen {
	background-image: url(../image/glasblasen.svg);
}

.picto--glastechnik {
	background-image: url(../image/glastechnik.svg);
}

.picto--historische_luftfahrt {
	background-image: url(../image/historische_luftfahrt.svg);
}

.picto--informatik {
	background-image: url(../image/informatik.svg);
}

.picto--keramik {
	background-image: url(../image/keramik.svg);
}

.picto--kinderreich {
	background-image: url(../image/kinderreich.svg);
}

.picto--kosmologie {
	background-image: url(../image/kosmologie.svg);
}

.picto--kraftmaschinen {
	background-image: url(../image/kraftmaschinen.svg);
}

.picto--massgewicht {
	background-image: url(../image/massgewicht.svg);
}

.picto--meeresforschung {
	background-image: url(../image/meeresforschung.svg);
}

.picto--metalle {
	background-image: url(../image/metalle.svg);
}

.picto--mikroelektronik {
	background-image: url(../image/mikroelektronik.svg);
}

.picto--museumsgeschichte {
	background-image: url(../image/museumsgeschichte.svg);
}

.picto--musikinstrumente {
	background-image: url(../image/musikinstrumente.svg);
}

.picto--nanobio {
	background-image: url(../image/nanobio.svg);
}

.picto--papiertechnik {
	background-image: url(../image/papiertechnik.svg);
}

.picto--pharmazie {
	background-image: url(../image/pharmazie.svg);
}

.picto--physik {
	background-image: url(../image/physik.svg);
}

.picto--planetarium {
	background-image: url(../image/planetarium.svg);
}

.picto--schifffahrt {
	background-image: url(../image/schifffahrt.svg);
}

.picto--sonnenuhrgarten {
	background-image: url(../image/sonnenuhrgarten.svg);
}

.picto--starkstrom {
	background-image: url(../image/starkstrom.svg);
}

.picto--starkstromtechnik {
	background-image: url(../image/starkstromtechnik.svg);
}

.picto--sternwarte {
	background-image: url(../image/sternwarte.svg);
}

.picto--technischesspielzeug {
	background-image: url(../image/technischesspielzeug.svg);
}

.picto--umwelt {
	background-image: url(../image/umwelt.svg);
}

.picto--werkzeugmaschinen {
	background-image: url(../image/werkzeugmaschinen.svg);
}

.picto--zeitmessung {
	background-image: url(../image/zeitmessung.svg);
}

.picto--znt {
	background-image: url(../image/znt.svg);
}

.picto--zukunftspreis {
	background-image: url(../image/zukunftspreis.svg);
}

.picto--rot {
	background-image: url(../image/rot.svg);
}

.picto--orange {
	background-image: url(../image/orange.svg);
}

.picto--gelb {
	background-image: url(../image/gelb.svg);
}

.picto--gruen {
	background-image: url(../image/gruen.svg);
}

.picto--blau {
	background-image: url(../image/blau.svg);
}

#hs-eu-cookie-confirmation {
	display: none;
}

.cookie-dialog {
	display: none;
	position: fixed;
	bottom:0;
	background-color: rgba(230, 230, 230, 1);
	width: 100%;
	min-height: 40px;
	font-size: 12px;
	z-index: 100;
}

.cookie-dialog.active {
	display:block;
}

.cookie-dialog__inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	max-width: 1000px;
	margin: 0 auto;
	padding: 10px;
}

.cookie-dialog__content {
	padding-right: 30px;
}	

.cookie-dialog__content a {
	color: #f0163a;
	text-decoration: none;
}

.cookie-dialog__content a:hover, .cookie-dialog__content a:focus {
	color: #a36700;
	text-decoration: none;
}

.cookie-dialog__inner button {
	height: 30px;
	border: none;
}

@media only screen and (max-width: 768px) {
	.donation-button {
		position: absolute;
		display: block;
		top: 140px;
		right: 10px;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		background-color: #d12129;
		cursor: pointer;
	}

	.donation-button span {
		display: block;
		color: #fff;
		font-weight: 700;
		font-size: 10px;
		line-height: 10px;
		transform:rotate(-20deg);
		margin-top: 25%;
		margin-left: -4%;
		text-align: center;
	}

	.dialog {
		left: 10px;
		top: 120px;
		transform: none;
	}	

	.dialog.active {
		padding: 20px 10px;
	}

	.dialog .dialog__inner {
		max-width: 100%;
	}
}