body {
	background-image:url('../images/bg-interaktiv.jpg');
	background-size:cover;
	background-repeat:no-repeat;
	font-family:"Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
	color: white;
}

p {
  font-family: 'Helvetica Neue', Helvetica, Verdana, sans-serif;
  font-size: 1.3em;
  line-height: 1.2em;
  margin-bottom: 7px;
  color: white;
  text-align: center;
}

/* verschiebbare Zettel */
.1zettel-richtig{
	position:fixed;
	top:400px;
	right:30px;
	width:190px;
	height:200px;
	background-image:url('../images/zettel03a.png');
	background-repeat:no-repeat;
	z-index:100;
}

.green-button{
	position:relative;
 	top:19%;	
	left:37%;
	width:32px;
	height:32px;
	background-image:url('../images/button-green.png');
}

.windmuehle{
	position:absolute;
	top:485px;
	right:30px;
	width:120px;
	height:120px;
	background-image:url('../images/de34-muehle01.png');
	background-repeat:no-repeat;
	z-index:100;
}

.windmuehle2{
	position:relative;
	top:405px;
	right:-5px;
	width:80px;
	height:80px;
	background-image:url('../images/de34-muehle02.png');
	background-repeat:no-repeat;
	z-index:110;
}

.windmuehle2 {
 transition: transform 27s;
}

.windmuehle2:hover {
    -ms-transform: rotate(700deg); /* IE 9 */
    -webkit-transform: rotate(700deg); /* Chrome, Safari, Opera */
    transform: rotate(700deg);}

.kiepertbus{
	position:fixed;
	bottom:30px;
	left:-160px;
	width:200px;
	height:118px;
	background-image:url('../images/schnecke02.png');
	background-repeat:no-repeat;
	z-index:100;
}

.kiepertbus {
    -webkit-transition: 21s ease-in-out;
    -moz-transition: 21s ease-in-out;
    -o-transition: 21s ease-in-out;
    transition: 21s ease-in-out;
}

.kiepertbus:hover {
    -webkit-transform: translate(130em,0);
    -moz-transform: translate(130em,0);
    -o-transform: translate(130em,0);
    -ms-transform: translate(130em,0);
    transform: translate(130em,0);
}

.vogel{
	position:fixed;
	top:220px;
	right:-136px;
	width:260px;
	height:173px;
	background-image:url('../images/vogel02.png');
	background-repeat:no-repeat;
	z-index:100;
}

.vogel {
    -webkit-transition: 21s ease-in-out;
    -moz-transition: 21s ease-in-out;
    -o-transition: 21s ease-in-out;
    transition: 21s ease-in-out;
}

.vogel:hover {
    -webkit-transform: translate(-130em,0);
    -moz-transform: translate(-130em,0);
    -o-transform: translate(-130em,0);
    -ms-transform: translate(-130em,0);
    transform: translate(-130em,0);
}

.fee{
	position:fixed;
	top:50%;
	left:60px;
	width:180px;
	height:180px;
	background-image:url('../images/fee02.png');
	background-repeat:no-repeat;
	z-index:100;
}

.fee {
  animation: 
    nudge 15s linear infinite alternate;
}

.sprechblase{
	position:fixed;
	bottom:10px;
	left:50%;
	width:134px;
	height:116px;
	background-image:url('../images/sprechblase02.png');
	background-size:contain;
	background-repeat:no-repeat;
	z-index:10000;
}

@keyframes pulse {
  0%, 100% {
  }
  50% {
  }
}

@keyframes nudge {
  0%, 100% {
    transform: translate(100px, 0);
  }
  
  50% {
    transform: translate(150px, 0);
    transform: scale(1.5,1.5);
  }
  
  80% {
    transform: translate(-150px, 0);
    transform: scale(0.5,0.5);
  }
}

.draggable {
	position:fixed;
  	background-image:url('../images/zettel03a.png');
  	background-repeat:no-repeat;
  	top: 400px;
  	right: 30px;
  	width: 190px;
  	height: 200px;
  	padding: 0px;
  	z-index: 100;
}

#container > .draggable {
  	top: 20px;
  	left: 20px;
}

.draggable:hover {
  	cursor: move;
}

.draggable textarea {
	position:relative;
	top:-6px;
	left:10px;
	width:150px;
	height:85px;
  	cursor:default;
}

.draggable p,
.droppable p {
  	font-weight: bold;
  	font-variant: small-caps;
  	color: #fff;
  	font-size: 20px;
  	margin: 48px 18px 25px 6px;
    text-shadow: -1px -1px 1px #000;
}

h3 { clear: left; }

.letter-container {
	border-bottom: 1px dashed rgba(0,0,0,0.3);
	border-top: 1px dashed rgba(0,0,0,0.3);
	padding: 0px;
	height: 247px;
	width: 554px;
	margin: 0px auto;
}

.letter-container h2 {
	text-align: center;
	margin: 0px 0px 0px 0px;
	font-family: 'Arvo', Arial, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.letter-container h2 a {
	text-align: center;
	padding: 20px;
}

.letter-container h2 a span {
	font-size: 105px;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
	filter: alpha(opacity=90);
	color: #444;
   	opacity: 1;
   	text-shadow: 0px 0px 2px #444, 1px 1px 4px rgba(0,0,0,0.7);
	-webkit-mask-image: url(../images/mask2.png);
	-moz-mask-image: url(../images/mask2.png);
	-o-mask-image: url(../images/mask2.png);
	mask-image: url(../images/mask2.png);
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	-ms-transition: all 0.3s linear;
	transition: all 0.3s linear;
	-webkit-animation: sharpen 0.6s linear backwards;
	-moz-animation: sharpen 0.6s linear backwards;
	-ms-animation: sharpen 0.6s linear backwards;
	animation: sharpen 0.6s linear backwards;
}
.letter-container h2 a span:hover{
	color:red;
}
.letter-container h2 a span:nth-child(1) {
	-webkit-animation-delay: 1.2s;
	-moz-animation-delay: 1.2s;
	-ms-animation-delay: 1.2s;
	animation-delay: 1.2s;
}
.letter-container h2 a span:nth-child(2) {
	-webkit-animation-delay: 0.1s;
	-moz-animation-delay: 0.1s;
	-ms-animation-delay: 0.1s;
	animation-delay: 0.1s;
}
.letter-container h2 a span:nth-child(3) {
	-webkit-animation-delay: 1s;
	-moz-animation-delay: 1s;
	-ms-animation-delay: 1s;
	animation-delay: 1s;
}
.letter-container h2 a span:nth-child(4) {
	-webkit-animation-delay: 0.3s;
	-moz-animation-delay: 0.3s;
	-ms-animation-delay: 0.3s;
	animation-delay: 0.3s;
}
.letter-container h2 a span:nth-child(5) {
	-webkit-animation-delay: 1.2s;
	-moz-animation-delay: 1.2s;
	-ms-animation-delay: 1.2s;
	animation-delay: 1.2s;
}
.letter-container h2 a span:nth-child(6) {
	-webkit-animation-delay: 0.5s;
	-moz-animation-delay: 0.5s;
	-ms-animation-delay: 0.5s;
	animation-delay: 0.5s;
}
.letter-container h2 a span:nth-child(7) {
	-webkit-animation-delay: 1.4s;
	-moz-animation-delay: 1.4s;
	-ms-animation-delay: 1.4s;
	animation-delay: 1.4s;
}
.letter-container h2 a span:nth-child(8) {
	-webkit-animation-delay: 0.7s;
	-moz-animation-delay: 0.7s;
	-ms-animation-delay: 0.7s;
	animation-delay: 0.7s;
}
.letter-container h2 a span:nth-child(9) {
	-webkit-animation-delay: 1.6s;
	-moz-animation-delay: 1.6s;
	-ms-animation-delay: 1.6s;
	animation-delay: 1.6s;
}
.letter-container h2 a span:nth-child(10) {
	-webkit-animation-delay: 0.9s;
	-moz-animation-delay: 0.9s;
	-ms-animation-delay: 0.9s;
	animation-delay: 0.9s;
}
.letter-container h2 a span:nth-child(11) {
	-webkit-animation-delay: 0.2s;
	-moz-animation-delay: 0.2s;
	-ms-animation-delay: 0.2s;
	animation-delay: 0.2s;
}
.letter-container h2 a span:nth-child(12) {
	-webkit-animation-delay: 1.1s;
	-moz-animation-delay: 1.1s;
	-ms-animation-delay: 1.1s;
	animation-delay: 1.1s;
}
.letter-container h2 a span:nth-child(13) {
	-webkit-animation-delay: 0.4s;
	-moz-animation-delay: 0.4s;
	-ms-animation-delay: 0.4s;
	animation-delay: 0.4s;
}
.letter-container h2 a span:nth-child(14) {
	-webkit-animation-delay: 1.3s;
	-moz-animation-delay: 1.3s;
	-ms-animation-delay: 1.3s;
	animation-delay: 1.3s;
}
.letter-container h2 a span:nth-child(15) {
	-webkit-animation-delay: 0.8s;
	-moz-animation-delay: 0.8s;
	-ms-animation-delay: 0.8s;
	animation-delay: 0.8s;
}
.letter-container h2 a span:nth-child(16) {
	-webkit-animation-delay: 1.5s;
	-moz-animation-delay: 1.5s;
	-ms-animation-delay: 1.5s;
	animation-delay: 1.5s;
}
@keyframes sharpen {
 0% {
   	opacity: 0;
   	text-shadow: 0px 0px 100px #444;
   	color: transparent;
 }
 90% {
   	opacity: 0.9;
   	text-shadow: 0px 0px 10px #444;
   	color: transparent;
 }
 100% {
    color: #444;
   	opacity: 1;
   	text-shadow: 0px 0px 2px #444, 1px 1px 4px rgba(0,0,0,0.7);
 }
}
@-moz-keyframes sharpen {
 0% {
   	opacity: 0;
   	text-shadow: 0px 0px 100px #444;
   	color: transparent;
 }
 90% {
   	opacity: 0.9;
   	text-shadow: 0px 0px 10px #444;
   	color: transparent;
 }
 100% {
    color: #444;
   	opacity: 1;
   	text-shadow: 0px 0px 2px #444, 1px 1px 4px rgba(0,0,0,0.7);
 }
}
@-webkit-keyframes sharpen {
 0% {
   	opacity: 0;
   	text-shadow: 0px 0px 100px #444;
   	color: transparent;
 }
 90% {
   	opacity: 0.9;
   	text-shadow: 0px 0px 10px #444;
   	color: transparent;
 }
 100% {
    color: #444;
   	opacity: 1;
   	text-shadow: 0px 0px 2px #444, 1px 1px 4px rgba(0,0,0,0.7);
 }
}
@-ms-keyframes sharpen {
 0% {
   	opacity: 0;
   	text-shadow: 0px 0px 100px #444;
   	color: transparent;
 }
 90% {
   	opacity: 0.9;
   	text-shadow: 0px 0px 10px #444;
   	color: transparent;
 }
 100% {
    color: #444;
   	opacity: 1;
   	text-shadow: 0px 0px 2px #444, 1px 1px 4px rgba(0,0,0,0.7);
 }
}

.sl_menu{
	margin:20px 0px 0px 20px;
	list-style:none;
}
.sl_menu li,
.sl_examples{
	float:left;
	font-family: 'Bevan', arial, serif;
	font-size:50px;
	line-height:50px;
	color:#f0f0f0;
	margin-right:5px;
	text-transform:uppercase;
}
.sl_menu a,
.sl_examples a{
	display:block;
	position:relative;
	float:left;
	clear:both;
	color:#fff;
}
.sl_menu a > span,
.sl_examples a > span{
	height:50px;
	float:left;
	position:relative;
	overflow:hidden;
}
.sl_menu a span span,
.sl_examples a span span{
	position:absolute;
	display:block;
	left:0px;
	top:0px;
	text-align:center;
}
.sl_menu a span span.sl-w1,
.sl_examples a span span.sl-w1{
	color:#fff;
	text-shadow:0px 0px 1px #fff;
	z-index:2;
}
.sl_menu a span span.sl-w2{
	color:#e82760;
	text-shadow:-1px 1px 2px #9f0633;
	z-index:3;
}
.sl_examples{
	padding-top:50px;
	margin:20px;
	clear:both;
	display:block;
}
.sl_examples a{
	margin:15px;
}

#example1{
	font-family:'Bigshot One', arial, serif;
}
#example2{
	font-family:'Myriad Pro', arial, serif;
	margin-left:500px;
}
#example3{
	font-family:'Aclonica', arial, serif;
}
#example4{
	font-family:'Arial Black', arial, serif;
	margin-left:500px;
}
#example5{
	font-family:Georgia, arial, serif;
	font-size:100px;
	line-height:100px;
}
.sl_examples a#example5 > span{
	height:100px;
}
.sl_examples a#example1 span span.sl-w2{
	color:#fbb1be;
	text-shadow:0px 2px 1px #e71b70;
	z-index:3;
}
.sl_examples a#example2 span span.sl-w2{
	color:#6ac6cc;
	text-shadow:0px 0px 1px #6ac6cc;
	z-index:3;
}
.sl_examples a#example3 span span.sl-w2{
	color:#ba968a;
	text-shadow:1px 1px 1px #a78276,  0px 0px 5px #fff;
	z-index:3;
}
.sl_examples a#example4 span span.sl-w2{
	color:#afd7aa;
	text-shadow:0px 0px 4px #648e5f;
	z-index:3;
}
.sl_examples a#example5 span span.sl-w2{
	color:#ff516f;
	text-shadow:0px 1px 2px #99162c;
	z-index:3;
}

footer {
  position: fixed;
  left:0;
  bottom:2px;
  width: 100%;
  height: 32px;
  /* background-color:darkred; */
  background: rgba(155,10,15,0.9);
  z-index: 1000;
  
  -o-box-shadow: 0px 5px 10px rgba(0,0,0,0.8);
  -moz-box-shadow: 0px 5px 10px rgba(0,0,0,0.8);
  -webkit-box-shadow: 0px 5px 10px rgba(0,0,0,0.8);
  box-shadow: 0px 5px 10px rgba(0,0,0,0.8);
}

footer p {
  margin: 0px 0 0 0px;
  font-family:"Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  font-size:14px;
  line-height:32px;
}

footer img {
	margin-top:-10px;
	margin-right:10px;
	margin-bottom:10px;
	margin-left:20px;
}

footer a{
	color:white;
	text-decoration:none;
}

.kiepert-logo {
	transition: transform 0.7s;
}

.kiepert-logo:hover {
 	/* transform: translate(130px, 0px); */
 	transform: rotate(360deg);
}