@charset "utf-8";
/*ANFANG Große Darstellung*/
body {
	margin: 0;
	padding: 0;
	background-color:#000;
}
@font-face {
	font-family: 'Bradley Hand ITC';
	src:url(img/BRADHITC.TTF) format('truetype');
}
svg {
	position:relative;
	height:270px;
	width:450px;
	margin:0 auto;
	margin-bottom:-70px;
	margin-top:10px;
	z-index:100;
}
path {
    animation-name:logozeichnen;
    animation-duration:20s;
    animation-iteration-count:1;
	animation-fill-mode:forwards;
}
polygon {
    animation-name:logozeichnen;
    animation-duration:20s;
    animation-iteration-count:1;
	animation-fill-mode:forwards;
}
rect {
    animation-name:logozeichnen;
    animation-duration:20s;
    animation-iteration-count:1;
	animation-fill-mode:forwards;
}
@keyframes logozeichnen {
    from{stroke-dasharray:0,2305}
    to  {stroke-dasharray:2305,0}
} 
a {
	font-family: 'Bradley Hand ITC';
	text-decoration:none;
	color:#FFF;
}
h1 {margin-top:0px;font-size:3.9em;z-index:1000;
	
	-webkit-transition: all 1000ms ease-in;
	-moz-transition: all 1000ms ease-in;
	-ms-transition: all 1000ms ease-in;
	-o-transition: all 1000ms ease-in;
	transition: all 1000ms ease-in;}
h2 {font-size:3em;
	
	-webkit-transition: all 1000ms ease-in;
	-moz-transition: all 1000ms ease-in;
	-ms-transition: all 1000ms ease-in;
	-o-transition: all 1000ms ease-in;
	transition: all 1000ms ease-in;}
h3 {font-size:2.5em;
	
	-webkit-transition: all 1000ms ease-in;
	-moz-transition: all 1000ms ease-in;
	-ms-transition: all 1000ms ease-in;
	-o-transition: all 1000ms ease-in;
	transition: all 1000ms ease-in;}
p {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:1em;
	color:#000;
}
#mybody {
	position:fixed;
	height:0%;
	opacity:0;
	width:60%;
	left:40%;
	background-position:right center;
	background-repeat:no-repeat;
	background-size:cover;
	overflow:auto;
	
	-webkit-transition: all 500ms ease-in;
	-moz-transition: all 500ms ease-in;
	-ms-transition: all 500ms ease-in;
	-o-transition: all 500ms ease-in;
	transition: all 500ms ease-in;
}
#txt {
	position:absolute;
	width:40%;
	height:100%;
	background-color:#000;
	text-align:center;
	font-family: 'Bradley Hand ITC';
	color:#FFF;
	cursor:default;
	
	-webkit-transition: all 1000ms ease-in;
	-moz-transition: all 1000ms ease-in;
	-ms-transition: all 1000ms ease-in;
	-o-transition: all 1000ms ease-in;
	transition: all 1000ms ease-in;
}
#logo {
	position:relative;
	margin-top:20px;
	width:300px;
	
	-webkit-transition: all 1000ms ease-in;
	-moz-transition: all 1000ms ease-in;
	-ms-transition: all 1000ms ease-in;
	-o-transition: all 1000ms ease-in;
	transition: all 1000ms ease-in;
}
.button {
	margin-top:-30px;
	opacity:0.7;
	
	-webkit-transition: all 100ms ease-in;
	-moz-transition: all 100ms ease-in;
	-ms-transition: all 100ms ease-in;
	-o-transition: all 100ms ease-in;
	transition: all 100ms ease-in;
}
.button:hover{
	opacity:1;
}
#closebutton {
	position:fixed;
	top:-108%;
	left:36%;
	width:40px;
	height:40px;
	cursor: pointer;
	background-image:url(button/close.png);
	background-size:contain;
	background-repeat:no-repeat;
	
	-webkit-transition: all 500ms ease-in;
	-moz-transition: all 500ms ease-in;
	-ms-transition: all 500ms ease-in;
	-o-transition: all 500ms ease-in;
	transition: all 500ms ease-in;
}
#contact {
	font-family: 'Bradley Hand ITC';
	position:fixed;
	bottom:0px;
	right:15px;
	color:#FFF;
	font-size:0.6em;
}
#contact h1,h3{
	background-color:rgba(0,0,0,0.3);
	
	-webkit-transition: all 1000ms ease-in;
	-moz-transition: all 1000ms ease-in;
	-ms-transition: all 1000ms ease-in;
	-o-transition: all 1000ms ease-in;
	transition: all 1000ms ease-in;
}
#contact h3 {
	cursor:pointer;
}
#contact a {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	text-decoration:none;
	color:#000;
}
#haftung {
	position:fixed;
	width:55%;
	height:96%;
	top:102%;
	left:42%;
	padding:5px;
	background-color:#FFF;
	overflow-y:scroll;
	color:#000;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	
	-webkit-transition: all 500ms ease-in;
	-moz-transition: all 500ms ease-in;
	-ms-transition: all 500ms ease-in;
	-o-transition: all 500ms ease-in;
	transition: all 500ms ease-in;
}
#haftung h1 {
	cursor:default;
}
#haftung h2 {
	cursor:default;
}
#haftung h3 {
	cursor:default;
}
#haftung p {
	cursor:default;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:1em;
	color:#000;
	
	-webkit-transition: all 1000ms ease-in;
	-moz-transition: all 1000ms ease-in;
	-ms-transition: all 1000ms ease-in;
	-o-transition: all 1000ms ease-in;
	transition: all 1000ms ease-in;
}
#impressum {
	margin-bottom:10px;
	
	-webkit-transition: all 1000ms ease-in;
	-moz-transition: all 1000ms ease-in;
	-ms-transition: all 1000ms ease-in;
	-o-transition: all 1000ms ease-in;
	transition: all 1000ms ease-in;
}
#impressum h2 {
	padding-left:50px;
	
	-webkit-transition: all 1000ms ease-in;
	-moz-transition: all 1000ms ease-in;
	-ms-transition: all 1000ms ease-in;
	-o-transition: all 1000ms ease-in;
	transition: all 1000ms ease-in;
}
#impressum h3 {
	padding-left:50px;
	background-color:transparent;
	margin:0px;
	
	-webkit-transition: all 1000ms ease-in;
	-moz-transition: all 1000ms ease-in;
	-ms-transition: all 1000ms ease-in;
	-o-transition: all 1000ms ease-in;
	transition: all 1000ms ease-in;
}
#zufallsbild {
	border-top:thick solid #FFF;
	border-right:thick solid #FFF;
	position:fixed;
	bottom:20px;
	left:70%;
	width:30px;
	height:30px;
	cursor:pointer;
	font-size:0.7em;
	
	-moz-transform:rotate(135deg);
	-webkit-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	transform:rotate(135deg);
	
	-webkit-transition: all 100ms ease-in;
	-moz-transition: all 100ms ease-in;
	-ms-transition: all 100ms ease-in;
	-o-transition: all 100ms ease-in;
	transition: all 100ms ease-in;
}
#zufallsbild:hover {
	border-top:thick solid #999;
	border-right:thick solid #999;
}
#flixpix_zeichnen {display:none;}
#flixpix_logo {display:none;}
/*ENDE Große Darstellung*/
/*ANFANG Mittlere Darstellung*/
@media only screen and (max-width: 800px){
h1 {
	font-size:2.5em;
}
h2 {
	font-size:2em;
}
h3 {
	font-size:1.5em;
}
#logo {
	width:200px;
}
.button {
	margin-top:-20px;
}
#closebutton {
	left:37%;
	width:30px;
	height:30px;
}

}
/*ENDE Mittlere Darstellung*/
/*ANFANG Kleine Darstellung*/
@media only screen and (max-width: 525px){
h1 {
	font-size:2.1em;
	background-color:rgba(0,0,0,0.3);
}
h2 {
	font-size:1.6em;
}
h3 {
	font-size:1.2em;
}
#mybody {
	width:100%;
	left:0%;
}
#txt {
	width:100%;
	background-color:transparent;
}
#logo {
	width:50%;
}
#haftung {
	width:94%;
	left:2%;
}
.button {
	margin-top:-10px;
}
#closebutton {
	left:auto;
	right:7%;
}
#zufallsbild {
	left:45%;
}
}
/*ENDE Kleine Darstellung*/