﻿body{
	background: #fff url(../images/lghtmesh.png) repeat center center;
}

.rw-wrapper{
	width: 80%;
	position: relative;
	margin: 80px 10px 0 60px;
	font-family: 'Bree Serif';
	padding: 10px;
	height: 300px;
	overflow: hidden;
}
.rw-sentence{
	margin: 0;
	text-align: left;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}
.rw-sentence span{
	color: #444;
	white-space: nowrap;
	font-size: 120%;
	font-weight: normal;
}
.rw-words{
	display: inline;
	text-indent: 4px;
}
.rw-words-1 span{
	position: absolute;
	opacity: 0;
	overflow: hidden;
	color: #888;
	-webkit-transform-origin: 10% 75%;
	-moz-transform-origin: 10% 75%;
	-ms-transform-origin: 10% 75%;
	-o-transform-origin: 10% 75%;
	transform-origin: 10% 75%;
	-webkit-animation: rotateWord 25s linear infinite 0s;
	-moz-animation: rotateWord 25s linear infinite 0s;
	-o-animation: rotateWord 25s linear infinite 0s;
	-ms-animation: rotateWord 25s linear infinite 0s;
	animation: rotateWord 25s linear infinite 0s;
}

.rw-wordsA{
	display: inline;
	text-indent: 4px;
}
.rw-words-1A span{
	position: absolute;
	opacity: 0;
	overflow: hidden;
	color: #888;
	-webkit-transform-origin: 10% 75%;
	-moz-transform-origin: 10% 75%;
	-ms-transform-origin: 10% 75%;
	-o-transform-origin: 10% 75%;
	transform-origin: 10% 75%;
	-webkit-animation: rotateWord 35s ease-in 1 0s;
	-moz-animation: rotateWord 35s ease-in 1 0s;
	-o-animation: rotateWord 35s ease-in 1 0s;
	-ms-animation: rotateWord 35s ease-in 1 0s;
	animation: rotateWord 35s ease-in 1 0s;
}

.rw-wordsB{
	display: inline;
	text-indent: 4px;
}
.rw-words-1B span{
	position: absolute;
	opacity: 0;
	overflow: hidden;
	color: #888;
	-webkit-transform-origin: 10% 75%;
	-moz-transform-origin: 10% 75%;
	-ms-transform-origin: 10% 75%;
	-o-transform-origin: 10% 75%;
	transform-origin: 10% 75%;
	-webkit-animation: rotateWord 55s ease-in 1 0s;
	-moz-animation: rotateWord 55s ease-in 1 0s;
	-o-animation: rotateWord 55s ease-in 1 0s;
	-ms-animation: rotateWord 55s ease-in 1 0s;
	animation: rotateWord 55s ease-in 1 0s;
}

.rw-words span:nth-child(2) { 
    -webkit-animation-delay: 1s; 
	-moz-animation-delay: 1s; 
	-o-animation-delay: 1s; 
	-ms-animation-delay: 1s; 
	animation-delay: 1s; 
	color: #6b889d;
}
.rw-words span:nth-child(3) { 
    -webkit-animation-delay: 1s; 
	-moz-animation-delay: 1s; 
	-o-animation-delay: 1s; 
	-ms-animation-delay: 1s; 
	animation-delay: 1s; 
	color: #6b739d;	
}
.rw-words span:nth-child(4) { 
    -webkit-animation-delay: 9s;
	-moz-animation-delay: 9s; 
	-o-animation-delay: 9s; 
	-ms-animation-delay: 9s; 
	animation-delay: 9s; 
	color: #7a6b9d;
}
.rw-words span:nth-child(5) { 
    -webkit-animation-delay: 12s; 
	-moz-animation-delay: 12s; 
	-o-animation-delay: 12s; 
	-ms-animation-delay: 12s; 
	animation-delay: 12s; 
	color: #8d6b9d;
}
.rw-words span:nth-child(6) { 
    -webkit-animation-delay: 15s;
	-moz-animation-delay: 15s; 
	-o-animation-delay: 15s; 
	-ms-animation-delay: 15s; 
	animation-delay: 15s; 
	color: #9b6b9d;
}

.previous {
	position:absolute;
	width:64px;
	height:64px;
	float:left;
	margin-left:320px;
	margin-top:40px;
	azimuth:center;
	background-image:url('../images/previous.png')
}

.beenden {
	position:absolute;
	width:64px;
	height:64px;
	float:left;
	margin-left:390px;
	margin-top:40px;
	azimuth:center;
	background-image:url('../images/stopp.png')
}

.ratlos {
	position:absolute;
	width:64px;
	height:64px;
	float:left;
	margin-left:460px;
	margin-top:40px;
	azimuth:center;
	background-image:url('../images/ratlos.png')
}

.ratlos img:hover {
	-moz-transform: rotate(360deg);
	-o-transform: rotate (360deg);
	transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
}

#logo1 img {
	-moz-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
	-webkit-transition: all 1s ease-in-out;
}

#logo1 img:hover {
	cursor:pointer;
	-moz-transform: rotate(360deg);
	-o-transform: rotate (360deg);
	transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
}


#logo2 img {
	-moz-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
	-webkit-transition: all 1s ease-in-out;
}

#logo2 img:hover {
	-moz-transform: rotate(360deg);
	-o-transform: rotate (360deg);
	transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
}


#logo3 img {
	-moz-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
	-webkit-transition: all 1s ease-in-out;
}

#logo3 img:hover {
	-moz-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
}


#logo4 img {
	-moz-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
	-webkit-transition: all 1s ease-in-out;
}

#logo4 img:hover {
	-moz-transform: rotate(360deg);
	-o-transform: rotate (360deg);
	transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
}




.schreiben {
	position:absolute;
	width:64px;
	height:64px;
	float:left;
	margin-left:530px;
	margin-top:40px;
	azimuth:center;
	background-image:url('../images/schreiben.png')
}

.weiter {
	position:absolute;
	width:64px;
	height:64px;
	float:left;
	margin-left:600px;
	margin-top:40px;
	azimuth:center;
	background-image:url('../images/next.png')
}

.vonmir {
	position:absolute;
	width:300px;
	height:24px;
	float:left;
	margin-left:380px;
	margin-top:10px;
	azimuth:center;
	background-image:url('../images/next2.png')
}

#kurzinfo {
	cursor:pointer;
}

	#successMessage {
	  position: absolute;
	  left: 580px;
	  top: 150px;
	  width: 0;
	  height: 0;
	  z-index: 100;
	  background-image:url('img/die-bundesregierung-logo.png');	
	  background-color:white;
	  border: 2px solid #333;
	  -moz-border-radius: 10px;
	  -webkit-border-radius: 10px;
	  border-radius: 10px;
	  -moz-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
	  -webkit-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
	  box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
	  padding: 20px;
	}

	#successMessage p{
		font-size:16px;
		font-weight:bold;
		line-height:40px;
	}


	#successMessage ul li{
		font-size:16px;
		line-height:25px;
	}

	#clickme {
	  position: absolute;
	  left: 49px;
	  top: 390px;
	  width: 250px;
	  height:25px;
	  font-family:Arial, Helvetica, sans-serif;
	  font-size:large;
	  text-align:center;
	  background-color:lime;
	  z-index: 100;
	  border: 2px solid #333;
	  -moz-border-radius: 6px;
	  -webkit-border-radius: 6px;
	  border-radius: 6px;
	  -moz-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
	  -webkit-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
	  box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
	  padding: 0px;
	
	}

footer1 {
  position: fixed;
  left:0;
  bottom:0;
  width: 100%;
  height: 40px;
  background: rgba(0,0,0,0.8);
  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);
}

footer1 p {
  margin: 8px 0 0 20px;
}

@-webkit-keyframes rotateWord {
    0% { opacity: 0; }
    5% { opacity: 1; }
    17% { opacity: 1; -webkit-transform: rotate(0deg); }
	19% { opacity: 1; -webkit-transform: rotate(98deg); }
	21% { opacity: 1; -webkit-transform: rotate(86deg); }
	23% { opacity: 1; -webkit-transform: translateY(85px) rotate(83deg); }
	25% { opacity: 0; -webkit-transform: translateY(170px) rotate(80deg); }
	80% { opacity: 0; }
    100% { opacity: 0; }
}
@-moz-keyframes rotateWord {
    0% { opacity: 0; }
    5% { opacity: 1; }
    17% { opacity: 1; -moz-transform: rotate(0deg); }
	19% { opacity: 1; -moz-transform: rotate(98deg); }
	21% { opacity: 1; -moz-transform: rotate(86deg); }
	23% { opacity: 1; -moz-transform: translateY(85px) rotate(83deg); }
	25% { opacity: 0; -moz-transform: translateY(170px) rotate(80deg); }
	80% { opacity: 0; }
    100% { opacity: 0; }
}
@-o-keyframes rotateWord {
    0% { opacity: 0; }
    5% { opacity: 1; }
    17% { opacity: 1; -o-transform: rotate(0deg); }
	19% { opacity: 1; -o-transform: rotate(98deg); }
	21% { opacity: 1; -o-transform: rotate(86deg); }
	23% { opacity: 1; -o-transform: translateY(85px) rotate(83deg); }
	25% { opacity: 0; -o-transform: translateY(170px) rotate(80deg); }
	80% { opacity: 0; }
    100% { opacity: 0; }
}
@-ms-keyframes rotateWord {
    0% { opacity: 0; }
    5% { opacity: 1; }
    17% { opacity: 1; -ms-transform: rotate(0deg); }
	19% { opacity: 1; -ms-transform: rotate(98deg); }
	21% { opacity: 1; -ms-transform: rotate(86deg); }
	23% { opacity: 1; -ms-transform: translateY(85px) rotate(83deg); }
	25% { opacity: 0; -ms-transform: translateY(170px) rotate(80deg); }
	80% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes rotateWord {
    0% { opacity: 0; }
    5% { opacity: 1; }
    17% { opacity: 1; transform: rotate(0deg); }
	19% { opacity: 1; transform: rotate(98deg); }
	21% { opacity: 1; transform: rotate(86deg); }
	23% { opacity: 1; transform: translateY(85px) rotate(83deg); }
	25% { opacity: 0; transform: translateY(170px) rotate(80deg); }
	80% { opacity: 0; }
    100% { opacity: 0; }
}
@media screen and (max-width: 768px){
	.rw-sentence { font-size: 18px; }
}
@media screen and (max-width: 320px){
	.rw-sentence { font-size: 9px; }
}