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

@font-face {
    font-family: '!PaulMaulRegular';
    src: url('!PaulMaul-webfont.eot');
    src: url('!PaulMaul-webfont.eot?#iefix') format('embedded-opentype'),
         url('!PaulMaul-webfont.woff') format('woff'),
         url('!PaulMaul-webfont.ttf') format('truetype'),
         url('!PaulMaul-webfont.svg#!PaulMaulRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: '!PaulMaulBold';
    src: url('!PaulMaul-b-webfont.eot');
    src: url('!PaulMaul-b-webfont.eot?#iefix') format('embedded-opentype'),
         url('!PaulMaul-b-webfont.woff') format('woff'),
         url('!PaulMaul-b-webfont.ttf') format('truetype'),
         url('!PaulMaul-b-webfont.svg#!PaulMaulBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'EdoRegular';
    src: url('edo-webfont.eot');
    src: url('edo-webfont.eot?#iefix') format('embedded-opentype'),
         url('edo-webfont.woff') format('woff'),
         url('edo-webfont.ttf') format('truetype'),
         url('edo-webfont.svg#EdoRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

* {	padding:0; margin:0; }
html, body { height:100%; }
body { background:#fff; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#000; }

h1	{ font-family:'!PaulMaulBold', Times, serif; font-size:80px; color:#936041; font-weight:normal; text-shadow:2px 2px 5px rgba(0,0,20,0.6); margin:0; padding:0; white-space:nowrap; }
h2	{ font-family:'!PaulMaulBold', Times, serif; font-size:50px; font-weight:normal; }
h3,.cool	{ font-family:'!PaulMaulBold', Arial, Helvetica, sans-serif; font-weight:normal; font-style:normal; font-size:32px; }
h4	{ font-family:'!PaulMaulBold', Arial, Helvetica, sans-serif; font-weight:normal; font-size:24px; }
p { margin:1em 0; line-height:1.4; hyphens: auto; -webkit-hyphens: auto; -moz-hyphens: auto; }
a			{ color:#036; }
a:visited 	{ color:#024; }
a:hover		{ color:#36F; }

#topsecret { position:fixed; top:0; right:0; width:320px; height:280px; overflow:hidden; z-index:999; }
#topsecret>div { position:absolute; left:20px; top:60px; width:320px; height:70px; background:#fc0; -webkit-transform:rotate(45deg); transform:rotate(45deg); text-align:center; padding:4px 40px; color:#000; box-shadow:0px 5px 10px rgba(0,0,0,0.4); }
#topsecret h3 { font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:22px; margin:6px; }
#topsecret p { margin:2px; }

/* Parallax */
.skrollr-desktop body {	height:100% !important;	}
.parallax-image-wrapper { position:fixed; left:0; width:100%; overflow:hidden;}
.parallax-image-wrapper-50 { height:50%; top:-50%; }
.parallax-image-wrapper-75 { height:75%; top:-75%; }
.parallax-image-wrapper-100 { height:100%; top:-100%; }
.parallax-image { display:none;	position:absolute; bottom:0; left:0; width:100%; background-repeat:no-repeat; background-position:center; background-size:cover; }
.parallax-image-50 { height:200%; top:-50%;	}
.parallax-image-75 { height:200%; top:-50%;	}
.parallax-image-100 { height:100%; top:0; }
.parallax-image.skrollable-between { display:block;	}
.no-skrollr .parallax-image-wrapper { display:none !important; }
#skrollr-body {	height:100%; overflow:visible; position:relative; }
.gap { background:transparent center no-repeat;	background-size:cover; }
.skrollr .gap { background:transparent !important; }
.gap-50 { height:45%; }
.gap-75 { height:70%; }
.gap-100 { height:90%;	}
.header, .content {	background:#fff; padding:1em; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;	}
.header	{ background:#012; }
.content-full {	height:100%; }
#done {	height:100%; }
.bgblue { background:#a8bfd0; }
.bggray { background:#ccc; }
.bgdark { background:#123; color:#fff; }
.bgdark a			{ color:#36F; }
.bgdark a:visited	{ color:#6AF; }
.bgdark a:hover		{ color:#14F; }

.inhalt { display:-webkit-flex; display:flex; flex-wrap:wrap; -webkit-flex-wrap:wrap;  }
.book	{ flex:1 0 400px; -webkit-flex:1 0 400px; position:relative; width:449px; height:700px; margin:50px; perspective: 700px; -webkit-perspective:700px;}
.book3d	 	{ width:100%; height:100%; transition:all 1s; -webkit-transition:all 1s; -webkit-transform-style:preserve-3d; transform-style:preserve-3d; transform: translateZ(-100px) rotateX(-10deg) rotateY(45deg); -webkit-transform: translateZ(-100px) rotateX(-10deg) rotateY(45deg); z-index:50;}
.book .cover	 	{ position:absolute; z-index:10; box-shadow:15px 10px 30px rgba(0,0,0,0.4); }
.book .side	 		{ position:absolute; width:120px; height:600px; transform: rotateY(-90deg) translateX(-120px); -webkit-transform: rotateY(-90deg) translateX(-120px); transform-origin:left; -webkit-transform-origin:left; box-shadow:-12px 10px 30px rgba(0,0,0,0.3); }
.book:hover .book3d	{ transform:rotateX(0deg) rotateY(0deg); -webkit-transform:rotateX(0deg) rotateY(0deg); }
.book_desc		 { flex:2 1 400px; -webkit-flex:2 1 400px; position:relative; height:auto; color:#000; padding:20px 40px; }

.small { font-size:12px; }
.clear { clear:both; }

.accordeon { margin:15px 0 15px -12px; }
.accordeon h3, .accordeon h4	{ display:inline; padding:4px 10px; background:rgba(255,255,255,0.3); box-shadow:1px 1px 4px rgba(0,0,0,0.3); cursor:pointer; margin:0; }
.accordeon h3.active, .accordeon h4.active { display:block; background:rgba(255,255,255,0.7); color:#036; }
.accordeon h3:hover, .accordeon h4:hover { border-color:#036; background:rgba(255,255,255,1); box-shadow:0px 0px 5px #9AF; }
.accordeon>div	{ display:none; height:auto; margin:0; padding:2px 0 2px 24px; }
.accordeon a	{ text-decoration:none; border-bottom:dotted 1px #036; }
.accordeon a:hover	{ border-bottom:solid 1px #36F; }
.black { background:rgba(0,0,0,0.7) !important; color:#CCC !important; }
.black:hover { background:rgba(0,0,0,0.9) !important; }

.gallery { clear:both; margin:30px 0; }
.gallery a	{ display:inline-block; width:110px; height:130px; margin:0 10px 10px 0; text-align:center; font-size:9px; border:none !important; }
.gallery img	{ width:100px; height:100px; border:solid 5px #fff; box-shadow:1px 2px 4px rgba(0,0,0,0.6); overflow:hidden; transition:all 0.5s; -moz-transition:all 0.5s; -webkit-transition:all 0.5s; -o-transition:all 0.5s; }
.gallery a:hover img	{ border-radius:50%; }

@keyframes burnText {
    0%	 {text-shadow:0px 1px 9px #C00;}
    100% {text-shadow:0px 0px 7px #C30;}
}
.burning { animation: burnText 0.1s infinite alternate;}
abbr	{ cursor:help; }

@media screen and (max-width:800px) {
	body { font-size:15px; }
	.accordeon>div	{ background-color:rgba(255,255,255,0.6) }
}
@media screen and (max-width:600px) {
	#content { margin-left:10px; margin-right:65px; }
	h1		{ font-size:60px; word-break: break-all; white-space:normal; }
	h2		{ font-size:40px; }
}
@media screen and (max-width:400px) {
	h1		{ font-size:40px; }
	h2		{ font-size:32px; }
	.book	{ flex:1 0 200px; -webkit-flex:1 0 200px; width:225px; height:350px; margin:0; }
	.book3d	 { transform:scale(0.5,0.5) translateZ(-100px) rotateX(-10deg) rotateY(45deg); -webkit-transform:scale(0.5,0.5) translateZ(-100px) rotateX(-10deg) rotateY(45deg); z-index:50;}
	.book:hover .book3d	{ transform:scale(0.5,0.5) rotateX(0deg) rotateY(0deg); -webkit-transform:scale(0.5,0.5) rotateX(0deg) rotateY(0deg); }
	.book_desc { padding:0; }

}