@charset "UTF-8";
/* CSS Document */

* {
	margin: 0;
	padding: 0;
	font-family: Gotham, 'Helvetica Neue', Arial, 'sans-serif';
	font-weight: 300;
	color: #dcdcdc;
}

body {
	background-color: #535353;
}

header {
	background-color: #000000;
	width:100%;
	height: 75px;
	display:table;
	position:fixed;
	top: 0;
	left: 0;
	z-index: 10;
}
header .container {	
	display: table-row;
  	align-items: center;
  	justify-content: center;
	min-height: 75px;
}
	
.content .container {
	width:100%;
	margin: 50px auto;
	max-width: 900px;	
}
.h3 {
	text-align: left;
	font-size: 1.1em;
	font-family: Gotham, 'Helvetica Neue', Arial, 'sans-serif';
	font-weight: 300;
	color: #dcdcdc;
}
.h4 {
	text-align: right;
	font-size: 1.2em;
	font-family: Gotham, 'Helvetica Neue', Arial, 'sans-serif';
	font-weight: 300;
	color: #dcdcdc;
}
.h5 {
	text-align: center;
	font-size: 1em;
	font-family: Gotham, 'Helvetica Neue', Arial, 'sans-serif';
	font-weight: 300;
	color: #dcdcdc;
}

.mainthumbtext {
	width: 45%;
	position: absolute;
	top: 32%;
	left: 50%;
	transform: translate(-50%,0%);
	background-color: rgba(10,10,10,0.8);
	padding: 22px;
}

.infoboxtext { 
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50%;
	height: 40%;
	position: absolute;
	vertical-align: middle;
	bottom: 22.5%;
	left: 25%;
	background-color: rgba(10,10,10,0.8);
	border: 10px solid rgba(10,10,10,0.0);
}

@media only screen and (max-width: 1100px) {
content .container {	
	width: 80%;
	margin: 50px auto;
	}
}

.table { 
   display: table;
	border-collapse:separate;
	border-spacing:0px 10px;
	border:0;
	margin-bottom: 20px;
}

.arbeitsblaetter .table {
	border-spacing: 0 10px;
}
.table-row {
	display:table-row;
	}
.table-cell {
	display:table-cell;
}

.table-spacer {
	min-width: 10px;
	min-height: 10px;
}

.row-spacer {
	min-width: 10px;
	min-height: 10px;
}

.table-spacer hr {
    display: none;
	}

.content .thumbnail {
	width: 40%;
	padding-right: 10px;
}
	
.thumbnail img{
	width: 100%;
	display: block;
}

@media only screen and (max-width: 1200px) {	
.content .thumbnail {
	width: 40%;
	padding-right: 10px;
}

.thumbnail img{
	width: 100%;
	height: 200px;
	display: block;
	object-fit: cover;
}
}

.content_titel{
	font-size: 1.2em;
	font-weight: 400;
	margin: 0 10px 0px 10px;
	display: flex;
	width: 100%;
	}

.kapitel_text {
	vertical-align: middle;
	font-size: 1.2em
}

.kapitel_text h4{
	margin: 5px auto;
	font-size: 1.0em !important;
	margin-left: 10px;
}
.ab_nr {
	min-width: 20px;
	vertical-align: middle;
	font-size: 1.2em;
}
.ab_text {
	width: 100%;
	vertical-align: middle;
	font-size: 1.2em;
}

.ab_download {
	min-width: 200px;
	vertical-align: middle;
}

.ab_interaktiv, .ab_pdf, .ab_doc {
	display: inline-block;
	text-align:center;
	font-size: 0.8em;
	width: 33.3%;
}
.ab_interaktiv i, .ab_pdf i, .ab_doc i {
	font-size: 2em;
	margin-bottom: 0.2em;
}
.ab_interaktiv p, .ab_pdf p, .ab_doc p {
	font-size: 0.9em;
}

.ab_interaktiv a, .ab_pdf a, .ab_doc a {
	text-decoration: none;
}

.content_titel {
	display: block;
}

i {
	color: #fff;
}
.play_but, .sprach_but {
	width: 50px;
	background-color: #3c3c3c;
	text-align: center;
	vertical-align: middle;
	min-width: 50px;
	min-height: 50px;
	display: inline-flex;
    align-items: center;
}
.kapitel_text {
	padding: 10px;
	background-color: #343434;
	
}

.ab_text, .ab_download, .ab_nr {
	padding: 10px;
	background-color: #343434;
}

.primary_header {
	display: table-cell;
	vertical-align:middle;
}
.primary_header h1,h2 {
	text-align: center;
	color: #FFF;
	font-size: 1.1em;
	font-weight: 400;
}

.primary_header a {
	text-decoration: none;
}
	
.sprachauswahl_top {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	padding: 0 15px 0 25px;
	width: 55px;
	}
.sprachauswahl_top div{
	display: table-row;
    vertical-align: middle;
	min-height:100%;
	min-width:100%;
}
.sprachauswahl_top div img {
	border: solid #535353 1px;
	width: 35px;
}

.back-arrow {
	position: relative;
	left:25px;
	top:75px;
	font-size: 2.5em;
	width: 35px;
	}

.back-arrow img {
	width: 35px
}
.logo {
	display:table-cell;
	horizontal-align: right;
	text-align:right;
	padding: 0 8px 0 0;
	vertical-align: middle;

	width: 95px;
}

@media only screen and (max-width: 680px) {	
	.arbeitsblaetter .table {
		border-spacing: 0 20px;
		width: 100%;
	}
	.ab_download, .ab_text, .ab_nr, .table-spacer {
		display:block
	}
	
	.ab_text, .ab_nr {
    text-align: center;
	font-size: 1em;
	}	
	.ab_text, .ab_download, .ab_nr {
    min-width: 100%;
	}
	
	.ab_text, .ab_download, .ab_nr, .table-spacer {
    padding: 10px 0;
	}
	
	.table-spacer {
    padding: 0 10px;
	background-color: #343434;
	}
	
	.table-spacer hr {
    display: block;
	}
	
	.sprachauswahl .buttons, .filmauswahl .buttons {
		display: block !important;
	}
	
	.sprachauswahl .flag_but {
		width: 100% !important;
	}
}

.kapitelauswahl .container {
	width:100%;
	margin: 0px;
	height: 100%;
	max-width: 100%;
}

.cover img {
	width: 100%;
	display: block;
}

.cover {
	width: 100%;
	position: relative;
}

.sprachauswahl .buttons {
	width: 100%;
	display: flex;
	justify-content: space-between;
	margin-top: 10px;
	flex-wrap: wrap;
}

.filmauswahl .buttons {
	width: calc(50% - 5px);
	display: flex;
	justify-content: space-between;
	margin: 10px 0;
	flex-wrap: wrap;
	min-width: 225px;
}

.flag_but {
	width: calc(50% - 5px);
    display: flex;
	margin-bottom: 10px;
}



.flag_but img {
	width: 40px;
	margin: 0px auto;
}

.ab_interaktiv img, .ab_pdf img, .ab_doc img {
	width: 40px;
	margin: 0px auto;
}

.flag_but div {
	vertical-align: middle;
	padding: 10px;
}

.content .filmauswahl {
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
}


.englisch .filmauswahl {
	justify-content: center;
	flex-direction: column;
}
.content .flag_but a {
	display:flex;
	width:100%;
	text-decoration:none; 
}

.filmauswahl .flag_but {
	width: 100%;
}
.sprachauswahl .kapitel_text, .filmauswahl .kapitel_text {
	width: 100%;
	text-align: center;
	display: inline-flex;
    align-items: center;
}

.extras {
	width: 100% !important;
}

.englisch .buttons, .englisch .content_titel {
	width: 50% !important;
	margin-left: auto; 
	margin-right: auto;
}

.englisch .content_titel {
	width: calc(50% - 20px) !important;
}

.extras .flag_but {
	width: calc(33% - 5px);
	min-width:  225px;
}

.englisch .extras .flag_but {
	width: calc(50% - 5px);
	min-width: 50px;
}

@media only screen and (max-width: 1100px) {	
	.filmauswahl .buttons {
		width: 100% !important;
	}

	.englisch .content_titel {
		width: calc(100% - 20px) !important;
	}
	
	
	.extras .flag_but, .englisch .extras .flag_but {
    width: 100% !important;
}
}

.content {
	height: calc(100vh - 75px);
}

.filmauswahl .content, .arbeitsblaetter .content {
	padding-top: 20px;
}

.sprachauswahl .content {
	padding-top: 40px;
}

.iframe-server {
	width: 100%;
	height: 100%;
	display:block;
	position: relative;
	top: 75px;
}

.not_active {
	-webkit-filter: grayscale(1);
    filter: grayscale(1);
	transition-duration: 1s;
}

.not_active:hover {
	-webkit-filter: grayscale(0);
    filter: grayscale(0);
}

/* iPad in Portrait OVERRIDE */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { 
.content .filmauswahl,.content .sprachauswahl {
    max-width: 700px;
  }
}

/* iPad in landscape OVERRIDE */
@media only screen and (min-device-width : 768px) and (max-width: 1100px) and (orientation:landscape) { 
.content .filmauswahl, .content .sprachauswahl {
    max-width: 700px;
  }
}

/* IPHONE OVERRIDE */
@media only screen and (max-width: 815px)
{
.content .filmauswahl,.content .sprachauswahl, .container {
    max-width: 500px;
  }
.mainthumbtext {
	width: 80%;
	}
.primary_header h1,h2 {
	font-size: 0.88em;
}
}