@import url(https://fonts.googleapis.com/css?family=Mountains+of+Christmas:700);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,700);
body{
	background:url(images/bg.jpg);
	background-repeat: no-repeat;
    background-attachment: fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.body {
	background:rgba(255,255,255,0.7);
	border:none;
	margin-top:10px;
	max-width:880px;
/*	-moz-box-shadow:    3px 3px 5px 3px rgba(255,255,255,0.5);
	-webkit-box-shadow: 3px 3px 5px 3px rgba(255,255,255,0.5);
	box-shadow:         3px 3px 5px 3px rgba(255,255,255,0.5);*/
	z-index:999;
	margin: 0 auto;
	/* NB: Die Höhe ist abhängig von der Höhe des Headers! */
	height:1540px;
	margin-bottom:15px;
}
.header {
	width:100%;
	
	
	border:none;
}
.header img{
	width:100%;
	
}
.header h1{
	padding-top:20px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:24px;
	color:#b8ce50;
	text-align:center;
	position:relative;
}
.header h2{
	font-family:Arial, Helvetica sans-serif;
	font-size:18px;
	color:#e10020;
	text-align:center;
	font-style:italic;
	position:relative;
}
.panel.flip .action {display: none; }

.panel h1 {
	font-family: 'Mountains of Christmas', Helvetica, Arial, sans-serif;
	font-size:80px;
	color:#fdedc4;
	text-align:center;
}

.click.panel h1 {
	color:#f7b814;
}

.panel p{
	/* margin-top:-5px; */
	padding:10px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#000;
	text-align:center;
	line-height:150%;
	vertical-align: middle !important;  
	display:inline-block;

}

#tuerchen-titel {
	font-family: 'Mountains of Christmas', Helvetica, Arial, sans-serif;
	font-size:18px;	
	color:#fdedc4;
	position:absolute;
		bottom:-10px;
		background-color: rgba(0,0,0,0.3);
}

.inline-bild-li{
	float:left;
	padding-right:15px;
	padding-bottom:15px;
	width:200px;
}

.inline-bild-re{
	float:right;
	padding-left:15px;
	padding-bottom:15px;
	width:200px;
}

 .panel {
            text-align:center;
			float:left;
			margin: 10px;
            width: 200px;
            height: 200px; 
            position: relative;
            font-size: .8em;
            -webkit-perspective: 600px;
            -moz-perspective: 600px;
	cursor:pointer;
        }
        /* -- make sure to declare a default for every property that you want animated -- */
        /* -- general styles, including Y axis rotation -- */
        .panel .front {
			background:#8da7ce;
			float:none;
            position: absolute;
            top: 0;
			left: 0;
            z-index: 900;
            width: inherit;
            height: inherit;
            -webkit-transform: rotateX(0deg) rotateY(0deg);
            -webkit-transform-style: preserve-3d;
            -webkit-backface-visibility: hidden;
            -moz-transform: rotateX(0deg) rotateY(0deg);
            -moz-transform-style: preserve-3d;
            -moz-backface-visibility: hidden;
            /* -- transition is the magic sauce for animation -- */
            -o-transition: all .4s ease-in-out;
            -ms-transition: all .4s ease-in-out;
            -moz-transition: all .4s ease-in-out;
            -webkit-transition: all .4s ease-in-out;
            transition: all .4s ease-in-out;
        }
        .panel.flip .front {
            z-index: 900;
            -webkit-transform: rotateY(180deg);
            -moz-transform: rotateY(180deg);
        }
        .panel .back {
			background:#fdedc4;
			float:none;
            position: absolute;
            top: 0;
			left:0;
            z-index: 800;
            width: inherit;
            height: inherit;
            -webkit-transform: rotateY(-180deg);
            -webkit-transform-style: preserve-3d;
            -webkit-backface-visibility: hidden;
 
            -moz-transform: rotateY(-180deg);
            -moz-transform-style: preserve-3d;
            -moz-backface-visibility: hidden;
            /* -- transition is the magic sauce for animation -- */
            -o-transition: all .4s ease-in-out;
            -ms-transition: all .4s ease-in-out;
            -moz-transition: all .4s ease-in-out;
            -webkit-transition: all .4s ease-in-out;
            transition: all .4s ease-in-out;
        }
		/* .panel .back .pad img{
			max-width:90%;
			margin-top:-20px;
		} */
        .panel.flip .back {
            z-index: 1000;
            -webkit-transform: rotateX(0deg) rotateY(0deg);
            -moz-transform: rotateX(0deg) rotateY(0deg);
        }
		
		#inline_content01, #inline_content02, #inline_content03, #inline_content04,#inline_content05,#inline_content06,#inline_content07,#inline_content08,#inline_content09,#inline_content10,#inline_content11,#inline_content12,#inline_content13,#inline_content14,#inline_content15,#inline_content16,#inline_content17,#inline_content18,#inline_content19,#inline_content20,#inline_content21,#inline_content22,#inline_content23,#inline_content24 {
			font-family:Arial, Helvetica, sans-serif;
			font-size:14px;
			color:#000000;
			position:relative;
		}

#inline_content01 h1, #inline_content02 h1, #inline_content03 h1, #inline_content04 h1,#inline_content05 h1,#inline_content06 h1,#inline_content07 h1,#inline_content08 h1,#inline_content09 h1,#inline_content10 h1,#inline_content11 h1,#inline_content12 h1,#inline_content13 h1,#inline_content14 h1,#inline_content15 h1,#inline_content16 h1,#inline_content17 h1,#inline_content18 h1,#inline_content19 h1,#inline_content20 h1,#inline_content21 h1,#inline_content22 h1,#inline_content23 h1,#inline_content24 h1 {
	font-family: 'Mountains of Christmas', Helvetica, Arial, sans-serif;
	color:#8da7ce;
	font-size:48px;
	line-height:150%;
	text-align:center;
	margin-top:15px;
}

#inline_content01 a, #inline_content02 a, #inline_content03 a, #inline_content04 a,#inline_content05 a,#inline_content06 a,#inline_content07 a,#inline_content08 a,#inline_content09 a,#inline_content10 a,#inline_content11 a,#inline_content12 a,#inline_content13 a,#inline_content14 a,#inline_content15 a,#inline_content16 a,#inline_content17 a,#inline_content18 a,#inline_content19 a,#inline_content20 a,#inline_content21 a,#inline_content22 a,#inline_content23 a,#inline_content24 a {
	color:#8da7ce;
}

#inline_content01 ol li, #inline_content02 ol li, #inline_content03 ol li, #inline_content04 ol li,#inline_content05 ol li,#inline_content06 ol li,#inline_content07 ol li,#inline_content08 ol li,#inline_content09 ol li,#inline_content10 ol li,#inline_content11 ol li,#inline_content12 ol li,#inline_content13 ol li,#inline_content14 ol li,#inline_content15 ol li,#inline_content16 ol li,#inline_content17 ol li,#inline_content18,#inline_content19 ol li,#inline_content20 ol li,#inline_content21 ol li,#inline_content22 ol li,#inline_content23 ol li,#inline_content24 ol li {
	text-align:left;
	line-height:150%;
}

#inline_content01 ul, #inline_content02 ul, #inline_content03 ul, #inline_content04 ul,#inline_content05 ul,#inline_content06 ul,#inline_content07 ul,#inline_content08 ul,#inline_content09 ul,#inline_content10 ul,#inline_content11 ul,#inline_content12 ul,#inline_content13 ul,#inline_content14 ul,#inline_content15 ul,#inline_content16 ul,#inline_content17 ul,#inline_content18 ul,#inline_content19 ul,#inline_content20 ul,#inline_content21 ul,#inline_content22 ul,#inline_content23 ul,#inline_content24 ul {
	list-style-position:inside;
}

#inline_content01 ul li, #inline_content02 ul li, #inline_content03 ul li, #inline_content04 ul li,#inline_content05 ul li,#inline_content06 ul li,#inline_content07 ul li,#inline_content08 ul li,#inline_content09 ul li,#inline_content10 ul li,#inline_content11 ul li,#inline_content12 ul li,#inline_content13 ul li,#inline_content14 ul li,#inline_content15 ul li,#inline_content16 ul li,#inline_content17 ul li,#inline_content18,#inline_content19 ul li,#inline_content20 ul li,#inline_content21 ul li,#inline_content22 ul li,#inline_content23 ul li,#inline_content24 ul li {
	line-height:150%;
}

.medieninhalt {
	max-width:60%; margin:0 auto;
}

.video-koje {
    position: relative;
    padding-bottom: 55%;
    padding-top: 15px;
    height: 0;
    overflow: hidden;
}

.video-koje iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#footer {
	background:rgba(0,0,0,0.4);
	border:none;
	max-width:860px;
/*	-moz-box-shadow:    3px 3px 5px 3px rgba(255,255,255,0.5);
	-webkit-box-shadow: 3px 3px 5px 3px rgba(255,255,255,0.5);
	box-shadow:         3px 3px 5px 3px rgba(255,255,255,0.5);*/
	margin: 0 auto;
	padding:10px;
	color:#fff;
	font-family: 'Open Sans', Helvetica Nue, Arial, Helvetica, sans-serif;
	font-size:12px;
}

#footer a {
	color:#fff;
	text-decoration:none;
}

#footer a:hover {
	text-decoration:underline;
}

		/* 3 Kacheln */
@media screen and (max-width: 912px) {
	.body {margin-top:10px !important;max-width:660px !important;height:1925px !important;} 
}

		/* 2 Kacheln */
@media screen and (max-width: 692px) {
	.body {margin-top:10px !important;max-width:440px !important;height:2750px !important;} 
	.header{height:auto; text-align:center;}
	.header h2{text-align:center;}
	#inline_content {font-size:14px;}
	.header img {float:none; margin:0 auto;}
	.medieninhalt {max-width:100%;}
}

		/* 1 Kachel */
@media screen and (max-width: 472px) {
	body {margin: 0px;}
	.body {margin-top:0px !important;max-width:100% !important; height:5350px !important;}
	.header{height:auto;float:none;}
	.header h2{text-align:center;right:0px;}
	.panel {float:none; margin:0 auto; margin-bottom:10px;}
	.medieninhalt {max-width:100%;}
	#inline_content01 h1, #inline_content02 h1, #inline_content03 h1, #inline_content04 h1,#inline_content05 h1,#inline_content06 h1,#inline_content07 h1,#inline_content08 h1,#inline_content09 h1,#inline_content10 h1,#inline_content11 h1,#inline_content12 h1,#inline_content13 h1,#inline_content14 h1,#inline_content15 h1,#inline_content16 h1,#inline_content17 h1,#inline_content18 h1,#inline_content19 h1,#inline_content20 h1,#inline_content21 h1,#inline_content22 h1,#inline_content23 h1,#inline_content24 h1 {font-size:24px;}
	.inline-bild-li {width:100%;}
}