/*
1.- Colors
2.- Fonts
3.- Reset & general styles
4.- Structure
5.- Navigations
	5.1.- Video navigation
		5.1.1.- Kapitel navigation
		5.1.2.- Sub-Kapitel navigation
	5.2.- Footer navigation
	5.3.- Back link
6.- Contents (video-container)
	6.1.- Kapitel link
	6.2.- Impressum text
	6.3.- Video
7.- Responsive
*/


/* 1.- COLORS:
	- Orange titles: #f7931e rgb(247,147,30)
	- Grey titles: #75716d rgb(117,113,109)

	- Grey links: #75716d rgb(117,113,109)
	- Orange links: #f7931e rgb(247,147,30)

	- Text navigation items:
		- orange: #f7931e rgb(247,147,30)
		- white #fff
	- BG navigation items:
		- link, visited, focus: #75716d rgb(117,113,109)
		- active, hover: #75716d rgb(117,113,109)

	- Grey #pic text and arrow: #59524c rgb(89,82,76)
	- Grey #pic crosses: #57524e rgb(87,82,78)
	- BG video container: #75716d rgb(117,113,109)
*/


/* 2.- FONTS */
@font-face {
	font-family:'MinionPro';
	src: url('../fonts/MinionPro-Regular.otf') format('opentype');
}


/* 3.- RESET & GENERAL STYLES */
*{
	margin:0;
	padding:0;
	vertical-align:baseline;
	-ms-hyphens:manual;
	-webkit-hyphens:manual;
	-moz-hyphens:manual;
	hyphens:manual;
}
::-moz-selection{
	background-color: rgba(255,255,255,.5) !important; /* #fff */
}
::selection,
::after ::selection,
::before ::selection{
	background-color: rgba(255,255,255,.5) !important; /* #fff */
}
:hover ::selection,
:focus ::selection{
	background-color: rgba(255,255,255,.5) !important; /* #fff */
}
html{
	-ms-text-size-adjust:100%;
	-webkit-text-size-adjust:100%;
	-moz-text-size-adjust:100%;
	text-size-adjust:100%;
}
body{
	font-family:Helvetica, Verdana, sans-serif;
}
.ios{
	text-rendering:optimizeLegibility;
}
a,
a:visited,
a:focus{
	color:#75716d;
	text-decoration:none;
	-webkit-transition:color 0.3s;
	-moz-transition:color 0.3s;
	-o-transition:color 0.3s;
	transition:color 0.3s;
}
a:hover,
a:active{
	color:#f7931e;
	text-decoration:none;
	outline:0;
}
a img{
	border:none;
}
*:focus {
	outline: 0 !important;
}
h1, h2, h3, h4, h5, h6{
	font-family:Montserrat, Helvetica, Verdana, sans-serif;
	font-weight:700;
	text-transform:uppercase;
	text-align:left;
}
h1{
	color:#f7931e;
	margin:0 auto 3px;
	font-size:23px;
	line-height:26px;
	letter-spacing:.01em;
}
h2{
	margin:0 auto 27px;
	color:#75716d;
	font-size:18px;
	line-height:21px;
	letter-spacing:.01em;
}
h3{
	font-size:14px;
	line-height:19px;
	letter-spacing:.02em;
}
h4{
	font-size:13px;
	line-height:15px;
	letter-spacing:.1em;
}
.orange_txt{
	color:#f7931e;
}
.kapitel p{
	padding:0 0 0 6px;
}


/* 4.- STRUCTURE */
body{
	padding:41px 16px;
	min-width:302px; /* default min-width by firefox (334px) - 16px padding-left - 16px padding-right */
}
#body{
	position:relative;
	width:984px;
	max-width:100%;
	height:590px;
	margin:0 auto;
	background:rgba(0,0,0,0) url('../media/hg.png') repeat-y top left;
	overflow-x:hidden;
	overflow-y:hidden;
}
.kapitel-3 #body,
#body.kapitel-3{
	height:598px;
}
.cross{
	position:absolute;
	font-family:MinionPro, Helvetica, Verdana, sans-serif;
	font-size:59px;
	line-height:34px;
	color:#f7931e;
}
#body-cross-1{
	top:103px;
	right:17px;
}
#body-cross-2{
	bottom:13px;
	left:17px;
}
.win.trident #body-cross-1,
.win.trident #body-cross-2{
	font-family:Verdana, sans-serif;
	font-size:50px;
}
#header {
	max-width:100%;
	padding:0 0 0 11px;
}
#content{
	position:absolute;
	width:882px;
	margin:35px auto 0;
	padding-left:51px;
}
#menu{
	float:left;
	width:359px;
	height:405px; /* Kapitel navigation default height */
}
.kapitel-3 #menu{
	height:413px;
}
#video-container{
	float:left;
	width:521px;
	height:405px;
	margin:0 0 0 2px;
	background-color:rgba(117,113,109,.85); /* #75716d */
}
.video-container-pic{
	-webkit-transition:background 0.3s;
	-moz-transition:background 0.3s;
	-o-transition:background 0.3s;
	transition:background 0.3s;
}
#foot{
	clear:both;
	height:47px;
	padding:0;
	text-align:right;
}


/* 5.- NAVIGATIONS */

/* 5.1.- Video navigation */

/* 5.1.1.- Kapitel navigation */
#menu a,
#menu a:visited,
#menu a:hover,
#menu a:active,
#menu a:focus {
	color:#fff;
}
#menu .preselected-item {
	background-color:#000;
}
#menu li{
	list-style:none;
	width:359px;
	height:65px;
	margin:0 0 3px;
	color:#fff;
	line-height:14px;
	text-transform:uppercase;
	background-color:rgba(117,113,109,.85); /* #75716d */
	-webkit-transition:background 0.3s;
	-moz-transition:background 0.3s;
	-o-transition:background 0.3s;
	transition:background 0.3s;
}
#menu a:hover li,
#menu li:hover,
#menu li.current-sub{
	background-color:#000;
}
#menu li.last-item{
	margin-bottom:0;
}
#menu li.last-item:hover{
	background-color:rgba(117,113,109,.85); /* #75716d */
}
#menu li p{
	padding:0 0 0 11px;
	font-size:10px;
	line-height:12px;
	font-weight:normal;
	letter-spacing:.007em;
}
#menu li .orange_txt{
	padding:19px 0 0 11px;
	font-size:12px;
	line-height:14px;
	font-weight:600;
}

/* 5.1.2.- Sub-Kapitel navigation */
.kapitel #menu li{
	display:block;
	height:auto;
	min-height:19px;
	margin:0 0 2px;
}
.kapitel #menu li.last-subitem{
	margin-bottom:0;
}

.kapitel #menu li#main-menu-item{
	height:auto;
	min-height:45px;
	background-color:#000;
}
.kapitel #menu p{
	padding:0 0 0 8px;
}
.kapitel #menu li#main-menu-item p{
	font-weight:600;
}
.kapitel #menu li#main-menu-item .orange_txt{
	padding:10px 5px 0 8px;
}
.kapitel #menu li#main-menu-item .head_txt{
	padding:0 5px 8px 8px;
    letter-spacing:.01em;
}
.kapitel #menu p.sub{
	padding:6px 5px 3px 8px;
	font-size:9px;
	line-height:9px;
	text-transform:uppercase;
	letter-spacing:.01em;
}
.linux.firefox.kapitel.kapitel-1 #menu p.sub,
.linux.firefox.kapitel.kapitel-4 #menu p.sub,
.linux.firefox.kapitel.kapitel-5 #menu p.sub,
.android.firefox.kapitel #menu p.sub{
	padding:5px 5px 4px 8px;
}
.kapitel #menu .orange_sub{
	display:table-cell;
	width:22px;
	color:#f7931e;
}
.kapitel #menu .extra-sub{
	display:table-cell;
	text-transform:none;
}
.kapitel #menu .text-sub{
	display:table-cell;
}
.kapitel #menu .text-sub .extra-sub{
	display:inline;
}

/* 5.1.2.1.- Kapitel 1 */
/* 5.1.2.2.- Kapitel 2 */
.kapitel.kapitel-2 #menu li{
	height:auto;
	min-height:34px;
}
.kapitel.kapitel-2 #menu .orange_sub{
	width:17px;
}
.kapitel.kapitel-2 #menu .extra-sub{
	margin:0;
	padding-left:23px;
	line-height:1px;
	vertical-align:baseline;
	padding-bottom:5px;
}
/* 5.1.2.3.- Kapitel 3 */
.kapitel.kapitel-3 #menu li{
	height:auto;
	min-height:18px;
}
.kapitel.kapitel-3 #menu p.sub{
	padding:6px 5px 2px 8px;
	font-size:7px;
	line-height:9px;
}
.firefox.kapitel.kapitel-3 #menu p.sub,
.android.firefox.kapitel.kapitel-3 #menu p.sub,
.linux.firefox.kapitel.kapitel-3 #menu p.sub,
.linux.chrome.kapitel.kapitel-3 #menu p.sub,
.win.chrome.kapitel.kapitel-3 #menu p.sub,
.win.trident.kapitel.kapitel-3 #menu p.sub,
.ios.safari.kapitel.kapitel-3 #menu p.sub{
	padding:5px 5px 3px 8px;
}
.kapitel.kapitel-3 #menu .orange_sub{
	width:17px;
}
.kapitel.kapitel-3 #menu .sub .extra-sub-cell{
	display:table-cell;
	padding-left:2px;
	text-transform:none;
	max-width:55%;
}
/* 5.1.2.4.- Kapitel 4 */
.kapitel.kapitel-4 #menu .orange_sub{
	width:24px;
}
/* 5.1.2.5.- Kapitel 5 */
.kapitel.kapitel-5 #menu p.sub small{
	font-size:8px;
	line-height:10px;
}

/* 5.2.- Footer navigation */
#foot >a {
	display:inline-block;
	margin-top:16px;
}
#foot > a,
#foot > a:visited,
#foot > a:focus,
#foot > a:active{
	color:#75716d;
}
#foot > a:hover{
	color:#f7931e;
}
#imprint{
	text-align:right;
	height:8px;
	max-height:8px;
	padding:0 6px 0 0;
	font-family:Montserrat, Helvetica, Verdana, sans-serif;
	font-weight:700;
	font-size:8px;
	letter-spacing:.03em;
	text-transform:uppercase;
}

/* 5.3.- Back link */
#back-container{
	display:block;
	text-align:right;
	padding:10px 0;
	z-index:6; /* bigger than z-index of #pic>a */
	height:13px;
}
#back-container > a{
	display:inline-block;
	padding:0 1px 0 0;
	font-size:11px;
	line-height:11px;
	text-transform:uppercase;
	color:#75716d;
	font-family:Montserrat, Helvetica, Verdana, sans-serif;
	font-weight:700;
	letter-spacing:.01em;
	vertical-align:baseline;
}
#back-container > a:focus,
#back-container > a:visited{
	color:#75716d;
}
#back-container > a:active,
#back-container > a:hover{
	color:#f7931e;
}
#back-container > a > span{
	display:inline-block;
	vertical-align:baseline;
}
#back-container a.text-menu-left:before{
	display:inline-block;
	vertical-align:middle;
	font-style:normal;
	line-height:1;
	margin:0 5px 0 0;
	color:#75716d;
	-webkit-transition:color 0.3s;
	-moz-transition:color 0.3s;
	-o-transition:color 0.3s;
	transition:color 0.3s;

	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	font-smooth:always;

	-webkit-text-stroke-width:.0em;

	font-family:'Cabin Condensed';
	/* OPENING CARAT:
	== SINGLE LEFT-POINTING ANGLE QUOTATION MARK
	== LEFT POINTING SINGLE GUILLEMET
	== UTF-16 (hex): 0x2039 (2039)
	== HTML Entity (named): ‹
	== HTML Entity (decimal): ‹
	== HTML Entity (hex): &#x2039
	*/
	content:'\2039';
	font-weight:600;
	font-size:14px;
	-ms-transform-origin:50% 100%;
	-webkit-transform-origin:50% 100%;
	-moz-transform-origin:50% 100%;
	-o-transform-origin:50% 100%;
	transform-origin:50% 100%;
	-ms-transform:translateY(0px) scaleY(1.3) scaleX(2.2);
	-webkit-transform:translateY(0px) scaleY(1.3) scaleX(2.2);
	-moz-transform:translateY(0px) scaleY(1.3) scaleX(2.2);
	-o-transform:translateY(0px) scaleY(1.3) scaleX(2.2);
	transform:translateY(0px) scaleY(1.3) scaleX(2.2);
}
.mac.safari #back-container a.text-menu-left:before{
	-webkit-transform-origin:50% 120%;
	transform-origin:50% 120%;
	-webkit-transform:translateY(0px) scaleY(1.3) scaleX(2.3);
	transform:translateY(0px) scaleY(1.3) scaleX(2.3);
}
.win.firefox #back-container a.text-menu-left:before{
	-moz-transform-origin:50% 85%;
	transform-origin:50% 85%;
	-moz-transform:translateY(0px) scaleX(2.2) scaleY(1.38);
	transform:translateY(0px) scaleX(2.2) scaleY(1.38);
}
.win.trident #back-container a.text-menu-left:before{
	-ms-transform:translateY(0px) scaleY(1.35) scaleX(2.2);
	transform:translateY(0px) scaleY(1.35) scaleX(2.2);
}
.win.edge #back-container a.text-menu-left:before{
	-webkit-transform-origin:50% 91%;
	transform-origin:50%91%;
	-webkit-transform:translateY(0px) scaleY(1.35) scaleX(2.2);
	transform:translateY(0px) scaleY(1.35) scaleX(2.2);
}
.ios.ipad.applewebkit #back-container a.text-menu-left:before,
.ios.ipad.safari #back-container a.text-menu-left:before{
	-webkit-transform-origin:50% 125%;
	transform-origin:50% 125%;
}
#back-container > a.text-menu-left:hover::before,
#back-container > a.text-menu-left:active::before{
	color:#f7931e;
}


/* 6.- CONTENTS (VIDEO-CONTAINER) */

/* 6.1.- Kapitel link */
#pic{
	position:absolute;
	width:521px;
	height:271px;
	background-color:#fff;
}
#pic:hover,
#pic:active,
#pic:focus{
	background-color:#fff;
}
/*#pic img{
	max-width:100%;
}*/
#pic > a{
	height:130px; /* #pic height (271px) - 51px padding-top - 90px padding-bottom */
	max-width:100%;
	display:block;
	padding:51px 0 90px 56px;
	z-index:5;
}
#pic h3{
	position:relative;
	width:357px;
	height:61px;
	margin-bottom:15px;
	padding:6px 10px 0;
	background-color:#f8931f;
	color:#fff;
}
#pic h4{
	text-align:right;
	margin-top:18px;
	padding:0 84px 0 0;
	color:#59524c;
}
#pic .arrow-container{
	clear:both;
	display:block;
	height:18px;
	padding-right:211px;
	text-align:right;
}
#pic .arrow-container .text-arrow-down:before{
	display:inline-block;
	font-style:normal;
	line-height:18px;
	color:#59524c;
	-webkit-transition:color 0.3s;
	-moz-transition:color 0.3s;
	-o-transition:color 0.3s;
	transition:color 0.3s;

	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	font-smooth:always;

	-webkit-text-stroke-width:.0em;

	-ms-transform-origin:50% 50%;
	-webkit-transform-origin:50% 50%;
	-moz-transform-origin:50% 50%;
	-o-transform-origin:50% 50%;
	transform-origin:50% 50%;

	font-family:'Cabin Condensed';
	/* CLOSING CARAT:
	== SINGLE RIGHT-POINTING ANGLE QUOTATION MARK
	== RIGHT POINTING SINGLE GUILLEMET
	== UTF-16 (hex): 0x203A (203a)
	== HTML Entity (named): ›
	== HTML Entity (decimal): ›
	== HTML Entity (hex): &#x203a
	*/
	content:'\203A';
	font-weight:600;
	font-size:60px;
	-ms-transform:rotate(90deg) scaleY(1.3) scaleX(1.1);
	-webkit-transform:rotate(90deg) scaleY(1.3) scaleX(1.1);
	-moz-transform:rotate(90deg) scaleY(1.3) scaleX(1.1);
	-o-transform:rotate(90deg) scaleY(1.3) scaleX(1.1);
	transform:rotate(90deg) scaleY(1.3) scaleX(1.1);
}
.win.firefox #pic .arrow-container .text-arrow-down:before{
	-moz-transform:rotate(90deg) scaleY(1.3) scaleX(1.05);
	transform:rotate(90deg) scaleY(1.3) scaleX(1.05);
}
.win.trident #pic .arrow-container .text-arrow-down:before{
	-ms-transform:rotate(90deg) scaleY(1.3) scaleX(1.05);
	transform:rotate(90deg) scaleY(1.3) scaleX(1.05);
}
.ios.ipad.applewebkit #pic .arrow-container .text-arrow-down:before,
.ios.ipad.safari #pic .arrow-container .text-arrow-down:before{
	-webkit-transform:rotate(90deg) scaleY(1.3) scaleX(1);
	transform:rotate(90deg) scaleY(1.3) scaleX(1);
}
#pic:hover .arrow-container .text-arrow-down:before{
	color:#f7931e;
}


/* 6.2.- #pic crosses */
#pic .cross{
	font-size:33px;
	line-height:19px;
	color:#57524e;
	font-weight:normal;
}
#pic .cross#pic-cross-1{
	top:-13px;
	right:-15px;
}
#pic .cross#pic-cross-2{
	bottom:-16px;
	left:-14px;
}
.win.chrome #pic .cross#pic-cross-1,
.win.firefox #pic .cross#pic-cross-1{
	top:-16px;
}
.win.chrome #pic .cross#pic-cross-2{
	bottom:-12px;
}
.win.firefox #pic .cross#pic-cross-2{
	bottom:-13px;
}

/* 6.3.- Impressum text */
#impressum{
	overflow:hidden;
	width:440px;
	height:271px;
	padding:100px 0 0;
	font-size:11px;
	letter-spacing:.013em;
	line-height:14px;
	color:#fff;
	visibility:hidden;
	display:none;
}
#impressum p{
	width:320px;
	margin:0 10px 14px 69px;
}
#impressum a,
#impressum a:focus,
#impressum a:visited{
	color:#fff;
}
#impressum a:hover,
#impressum a:active{
	color:#f7931e;
}

/* 6.4.- Video */
embed, iframe, object {
    max-width: 100%;
/*	width:521px;
	height:293px;*/
	margin:0 auto;
}


/* 7.- RESPONSIVE */
/* < Default width (984px + 16px + 16px) */
@media screen and (max-width: 1015px) { /* Change it if changed in /js/scripts.js (function setMenuContainerH) */
	/* Structure */
	#body,
	.kapitel-3 #body,
	#body.kapitel-3{
		height:auto;
	}
	#body-cross-1{
		top:17px;
		right:6px;
	}
	#body-cross-2{
		bottom:6px;
		left:6px;
	}
	.win.chrome #body-cross-2,
	.win.firefox #body-cross-2{
		bottom:12px;
		left:6px;
	}
	#header{
		padding:0 22px 0 11px;
	}
	#content{
		position:relative;
		max-width:90%;
		width:90%;
		padding-left:0;
	}
	#foot {}

	/* Navigations */
	#menu,
	.kapitel-3 #menu{
		width:100%;
		max-width:100%;
		height:auto;
		float:none;
		clear:both;
		margin-bottom:3px;
	}
	#menu li{
		max-width:100%;
		width:100%;
	}

	/* Sub-Kapitel navigation */
	.kapitel.kapitel-3 #menu .sub .extra-sub-cell{
		max-width:75%;
	}

	/* Contents */
	#video-container {
		max-width:100%;
		width:100%;
		height:auto;
		float:none;
		clear:both;
		margin:0 auto;
		text-align:center;
		padding:30px 0;
	}
	.kapitel #video-container{
		max-height:293px; /* video height */
	}
	#pic{
		position:relative;
		max-width:100%;
		margin:0 auto;
	}
	#impressum{
        height:271px; /* same as #pic height */
		margin:0 auto;
		padding:0;
	}
	#impressum p {
		width: 320px;
		margin: 0 auto 14px;
	}
}

/* < body min-width (+20px), for #video-container to have its default width */
@media screen and (max-width: 632px) {
	/* Kapitel navigation */
	#menu .menu-item li{
		height:auto;
		min-height:65px;
	}
	#menu .menu-item li p{
		padding:0 5px 8px 11px
	}
	#menu .menu-item li p.orange_txt{
		padding:19px 5px 0 11px;
	}

	/* Contents */
	#video-container {
		background-color:rgba(0,0,0,0);
		padding:0;
	}
	.kapitel #video-container{
		background-color:rgba(117,113,109,.85); /* #75716d */
		padding:30px 0;
	}
	#pic{
		width:100%;
		height:301px;
		overflow:hidden;
	}
	#pic > a{
		height:160px; /* 301px - 51px padding-top - 90px padding-bottom */
		padding:51px 56px 90px;
	}
	#pic h3{
		max-width:100%;
		width:100%;
		height:auto;
		padding:6px 0 4px;
	}
	#pic h3 > span{
		padding:0;
		margin:0 3%;
		width:94%;
		display:inline-block;
	}
	#pic h3 > span.cross{
		padding:0;
		margin:00;
		width:auto;
		display:inline;
	}
	#pic h4{
		padding-right:0;
	}
	#pic .arrow-container{
		padding-right:0;
		margin-right:33%;
	}
	#impressum{
		width:100%;
		background-color:rgba(117,113,109,.85); /* #75716d */
		padding:30px 0 0;
		height:271px; /* 301px - 30px padding-top - 10px padding-bottom */
	}
}

/* < body min-width, for #video-container to have its default width */
@media screen and (max-width: 612px) {
	/* Contents */
	.kapitel #video-container {
		background-color:rgba(0,0,0,0);
		padding:0;
	}
	embed, iframe, object {
		background-color:rgba(117,113,109,.85); /* #75716d */ /* Just to hide the vertical repetition of the background image. It will be removed on player ready */
	}
}

@media screen and (max-width: 499px) {
	/* Sub-Kapitel navigation */
	.kapitel.kapitel-3 #menu .sub .extra-sub-cell{
		max-width:60%;
	}

	/* Contents */
	#impressum p{
        width:300px;
	}
}

@media screen and (max-width: 449px) {
	/* Sub-Kapitel navigation */
	.kapitel.kapitel-3 #menu .sub .extra-sub-cell{
		max-width:55%;
	}
}

@media screen and (max-width: 399px) {
	*{
		word-wrap:break-word;
		overflow-wrap:break-word;
	}

	/* Sub-Kapitel navigation */
	.kapitel.kapitel-3 #menu .sub .extra-sub-cell{
		max-width:50%;
	}

	/* Contents */
	#pic{
		height:311px;
	}
	#impressum{
		padding:30px 0 10px;
		height:271px; /* 311px - 30px padding-top - 10px padding-bottom */
	}
	.win.trident #pic{
		height:331px;
	}
	.win.trident #impressum{
		padding:30px 0 10px;
		height:291px; /* 331px - 30px padding-top - 10px padding-bottom */
	}
	#impressum p{
        width:auto;
        max-width:90%;
	}
}

@media screen and (max-width: 359px) {
	/* Sub-Kapitel navigation */
	.kapitel.kapitel-3 #menu .sub .extra-sub-cell{
		max-width:45%;
	}
}

@media screen and (max-width: 349px) {
	/* Contents */
	#pic{
		height:331px;
	}
	#pic > a{
		height:190px; /* 331px - 51px padding-top - 90px padding-bottom */
	}
	#impressum{
		height:291px; /* 331px - 30px padding-top - 10px padding-bottom */
	}
}

@media screen and (max-width: 329px) {
	/* Sub-Kapitel navigation */
	.kapitel.kapitel-3 #menu .sub .extra-sub-cell{
		max-width:40%;
	}
}