@font-face {
    font-family: 'open_sanssemibold_italic';
    src: url('/fonts/OpenSans-SemiboldItalic-webfont.eot');
    src: url('/fonts/OpenSans-SemiboldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/OpenSans-SemiboldItalic-webfont.woff2') format('woff2'),
         url('/fonts/OpenSans-SemiboldItalic-webfont.woff') format('woff'),
         url('/fonts/OpenSans-SemiboldItalic-webfont.ttf') format('truetype'),
         url('/fonts/OpenSans-SemiboldItalic-webfont.svg#open_sanssemibold_italic') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'open_sanssemibold';
    src: url('/fonts/OpenSans-Semibold-webfont.eot');
    src: url('/fonts/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/OpenSans-Semibold-webfont.woff2') format('woff2'),
         url('/fonts/OpenSans-Semibold-webfont.woff') format('woff'),
         url('/fonts/OpenSans-Semibold-webfont.ttf') format('truetype'),
         url('/fonts/OpenSans-Semibold-webfont.svg#open_sanssemibold') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'open_sansregular';
    src: url('/fonts/OpenSans-Regular-webfont.eot');
    src: url('/fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/OpenSans-Regular-webfont.woff2') format('woff2'),
         url('/fonts/OpenSans-Regular-webfont.woff') format('woff'),
         url('/fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('/fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'open_sanslight_italic';
    src: url('/fonts/OpenSans-LightItalic-webfont.eot');
    src: url('/fonts/OpenSans-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/OpenSans-LightItalic-webfont.woff2') format('woff2'),
         url('/fonts/OpenSans-LightItalic-webfont.woff') format('woff'),
         url('/fonts/OpenSans-LightItalic-webfont.ttf') format('truetype'),
         url('/fonts/OpenSans-LightItalic-webfont.svg#open_sanslight_italic') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'open_sanslight';
    src: url('/fonts/OpenSans-Light-webfont.eot');
    src: url('/fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/OpenSans-Light-webfont.woff2') format('woff2'),
         url('/fonts/OpenSans-Light-webfont.woff') format('woff'),
         url('/fonts/OpenSans-Light-webfont.ttf') format('truetype'),
         url('/fonts/OpenSans-Light-webfont.svg#open_sanslight') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'open_sansitalic';
    src: url('/fonts/OpenSans-Italic-webfont.eot');
    src: url('/fonts/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/OpenSans-Italic-webfont.woff2') format('woff2'),
         url('/fonts/OpenSans-Italic-webfont.woff') format('woff'),
         url('/fonts/OpenSans-Italic-webfont.ttf') format('truetype'),
         url('/fonts/OpenSans-Italic-webfont.svg#open_sansitalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'open_sansextrabold_italic';
    src: url('/fonts/OpenSans-ExtraBoldItalic-webfont.eot');
    src: url('/fonts/OpenSans-ExtraBoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/OpenSans-ExtraBoldItalic-webfont.woff2') format('woff2'),
         url('/fonts/OpenSans-ExtraBoldItalic-webfont.woff') format('woff'),
         url('/fonts/OpenSans-ExtraBoldItalic-webfont.ttf') format('truetype'),
         url('/fonts/OpenSans-ExtraBoldItalic-webfont.svg#open_sansextrabold_italic') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'open_sansextrabold';
    src: url('/fonts/OpenSans-ExtraBold-webfont.eot');
    src: url('/fonts/OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/OpenSans-ExtraBold-webfont.woff2') format('woff2'),
         url('/fonts/OpenSans-ExtraBold-webfont.woff') format('woff'),
         url('/fonts/OpenSans-ExtraBold-webfont.ttf') format('truetype'),
         url('/fonts/OpenSans-ExtraBold-webfont.svg#open_sansextrabold') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'open_sansbold_italic';
    src: url('/fonts/OpenSans-BoldItalic-webfont.eot');
    src: url('/fonts/OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/OpenSans-BoldItalic-webfont.woff2') format('woff2'),
         url('/fonts/OpenSans-BoldItalic-webfont.woff') format('woff'),
         url('/fonts/OpenSans-BoldItalic-webfont.ttf') format('truetype'),
         url('/fonts/OpenSans-BoldItalic-webfont.svg#open_sansbold_italic') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'open_sansbold';
    src: url('/fonts/OpenSans-Bold-webfont.eot');
    src: url('/fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/OpenSans-Bold-webfont.woff2') format('woff2'),
         url('/fonts/OpenSans-Bold-webfont.woff') format('woff'),
         url('/fonts/OpenSans-Bold-webfont.ttf') format('truetype'),
         url('/fonts/OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;

}


		:root{
			--blue : #1e4259;
			--red : #932f33;
			--width: 90vw;
			--padwidth: 0px;
		}

		@media ( min-width: 720px ) {
			:root{
				--width: 50vw;
				--padwidth: 20px;
			}
			h1 {
				color: var(--red);
				font-size: 4rem ;
			}
			#header{
				display: flex !important;
			}
			footer {
				width: 50vw;
				margin: 2rem auto;
				border-top: 5px solid var(--red);
			}
		}
		body{
			margin: 0;
			padding: 0;
			font-family: 'open_sansregular',Helvetica,Arial;
		}
		menu a {
			color: #fff;
		}
		menu {
			color: #fff;
			width: 340px;
			margin: 4rem 0 0 0;
			float: right;
		}
		#header {
			background: var(--red);
			width: 97vw;
			height: auto;
			padding: 1rem;
			display: block;
		}
		#header img {
			width: 200px;
		}
		#header .inner {
			width: var(--width);
			margin: 0 auto;
		}
		a{
			color: var(--blue);
			text-decoration: none;
		}
		h1{
			color: var(--red);
			font-size: 3rem;
			line-height: 3.4rem;
		}
		h1 span{
			color: var(--blue);
			font-size: 2rem;
		}

		#content{
			width: var(--width);
			margin: 1rem auto 1rem;
		}
		._inner{
			padding: 1rem;
			width: var(--width);
			margin: 0 auto;
		}
		#schreibmir label:nth-child(12){
		opacity: 0;
		}
		form {
			width: var(--width);
			margin: 0 auto;
		}
		input, textarea {
			width: var(--width);
			font-family: Courier;
			font-size: 1.5rem;
			padding: var(--padwidth);
		}
		textarea{
			height: 200px;
		}
		label {
			width: var(--width);
			display: block;
			margin-top: 1rem;
		}
		footer {
			width: var(--width);
			margin: 2rem auto;
			border-top: 5px solid var(--red);
		}

.card {
	display: block;
	width: 49%;
	height: 400px;
	border: 1px solid #eee;
	flex-basis: 47%;
	box-sizing: border-box;
}

.card .thumbnail {
	width: 100%;
	height: 250px;
	max-height: 300px;
	background-position: center center !important;
	background-size: cover !important;
	background-repeat: no-repeat !important;
	margin: 0 auto !important;
	cursor: pointer;
}
.card audio {
	margin: 0 auto;
	width: 250px;
	display: block;
}