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

* {
	margin: 0;
}

html, body {
	font-family: Segoe UI;
	font-weight: lighter;
	height: 100%;
	background-attachment: scroll;
	background-image: url(../bilder/ornament-grau.jpg);
	background-repeat: no-repeat;
	background-size: 600px;
}

h1 {
	font-weight:100;
	font-size:50px;
	color:#333;
}

h2 {
	font-weight:100;
	font-size:30px;
	color:#FC4600;
	margin-bottom: 30px;
}

h3{
	font-weight:100;
	font-size:20px;
	color:#666;
	margin-bottom: 10px;	
	margin-top: 20px;
}

textarea {
	height: 200px;
	width: 95%;
}

fieldset div{
	margin-bottom: 10px;
}

input:invalid {
	background-color: #F8A7A5;
}

.wrapper {
	min-height: 100%;
	height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
	height: 100%;
	margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}

.header {
	text-align:right;
	margin-right:5%;
}

#progressImg {
	margin: 100px 50%;	
}

#progressPage {
	margin: 0px 50%;	
}

.content {
	/*position: absolute;*/
	width:70%;
	/*height:50%;*/
	/*left: 19%;
	top: 25%;*/
	margin: 100px auto;
	/*padding-left: 10%;*/ /*um den content (am Menü angepasst) leicht nach rechts zu schieben */
	text-align:center;
}

.content2 {
	width:70%;
	/*height:50%;*/
	/*left: 19%;
	top: 25%;*/
	margin: 100px auto;
	/*padding-left: 10%;*/ /*um den content (am Menü angepasst) leicht nach rechts zu schieben */
	text-align:center;
}

.outOfVP{
	display: none;
	float:right;
	margin: -200%;
}

.text {
	text-align:right;
	color:#999;
	background-color:#444;
	/*position:absolute;*/
	/*margin-top:10%;*/
	width: 100%;
	/*left: 19%;*/
	/*height: 50%;*/
	/*padding:100px 10px 10px 10px;*/
	font-size:17px;
	line-height:1.3em;
	margin: 0 auto;
	float: right;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;

}

.textbox {
	color: #999;
	text-align:right;
	padding: 40px 40px 40px 40px;
	background-color: #333;
	float:right;
	position: relative;
	width:29%; /*ohne width ist Box (bei mehrzeiligen Text) so breit wie .text, sonst wie Text */
	/*height:100%;*/ /*ohne height ist die Box so hoch wie der Text */
	/*margin-right: 10px;*/
}

.textbox-H {
	color: #999;
	text-align:right;
	padding: 40px 40px 40px 40px;
	background-color: #333;
	float:right;
	position: relative;
	width:29%; /*ohne width ist Box (bei mehrzeiligen Text) so breit wie .text, sonst wie Text */
	/*height:100%;*/ /*ohne height ist die Box so hoch wie der Text */
	/*margin-right: 10px;*/
}

.textbox-E {
	color: #999;
	text-align:right;
	padding: 40px 40px 40px 40px;
	margin-left: 30%;
	margin-top:5px;
	background-color: #333;
	float:right;
	/*width:29%; */ /*ohne width ist Box (bei mehrzeiligen Text) so breit wie .text, sonst wie Text */
	/*height:100%;*/ /*ohne height ist die Box so hoch wie der Text */
	/*margin-right: 10px;*/
}

.kommentarbox {
	max-width:30%;
	color: #999;
	text-align:right;
	padding: 20px 20px 20px 20px;
	margin-right: 5px;
	margin-bottom: 5px;
	background-color: #333;
	float:right;
	/*width:29%; */ /*ohne width ist Box (bei mehrzeiligen Text) so breit wie .text, sonst wie Text */
	/*height:100%;*/ /*ohne height ist die Box so hoch wie der Text */
	/*margin-right: 10px;*/
}

.textbox td {
	vertical-align: bottom;
}

.footer, .push {
	height: 155px; /* .push must be the same height as .footer */
	clear: both;
}

/* FÜR DIE BILDER */

.bildbox {
	color: #999;
	padding: 40px 40px 40px 40px;
	margin-bottom: 5px;
	background-color: #333;
	float:right;
	position: relative;
	width:39%; /*ohne width ist Box (bei mehrzeiligen Text) so breit wie .text, sonst wie Text - wenn 29%, dann auch float: right in img löschen UND width: 40%*/
	min-width: 350px;
	max-width: 500px;
	/*height:100%;*/ /*ohne height ist die Box so hoch wie der Text */
	/*margin-right: 10px;*/

}

.bildbox-cover {
	z-index:100;
	width:100%;
	height:100%;
	background-color:#000;
}

.bildbox img {
	max-width: 220px;
	min-width: 80px;
	width: 40%;
	padding: 5px;
	/*float: right;*/
	margin-left: 4px;
	margin-bottom: 4px;
	/*margin-bottom: 10%;*/
	background-color: #fff;
	border-style:solid;
	border-width:1px;
	/*-webkit-box-shadow: 1px 1px 15px #878787;*/
	/*box-shadow: 1px 1px 15px #878787;*/
	}
	
.loading {
	background-image:url(../bilder/logo.png);
	background-repeat:no-repeat;
	background-position:50 % 50 %;
}

.subnav {
	position:relative;
	width: 100%;
	padding-top:20px;
	clear:both;
	float: right;
	color: #CCC;
}

.subnav a {
	text-decoration:none;
	color:#FC4600;
}

.next {
	position: absolute;
	right:5px;
}

.prev {
	position: absolute;
	left: 5px;
}

.subnav img {
	width:49px;
	min-width: 20px;
	border-style: none;
	background-color:transparent;
	padding: 0;
	margin: 11px;
}

.prev img {
	margin-left: -6px;	
}

.next img {
	margin-right: -6px;	
}

.rotateleft{
	-webkit-transform: rotate(-6deg);
	-ms-transform: rotate(-6deg);
	transform: rotate(-6deg);
}

.rotateright{
	-webkit-transform: rotate(6deg);
	-ms-transform: rotate(6deg);
	transform: rotate(6deg);
}

.smooth {
	-webkit-transition: all 100ms ease-in-out 0s;
	-moz-transition: all 100ms ease-in-out 0s;
	-ms-transition: all 100ms ease-in-out 0s;
	-o-transition: all 100ms ease-in-out 0s;
	transition: all 100ms ease-in-out 0s;
}

.smooth:hover {
	-webkit-transform: rotate(0deg) scale(2.5);
	-moz-transform: rotate(0deg) scale(2.5);
	-ms-transform: rotate(0deg) scale(2.5);
	-o-transform: rotate(0deg) scale(2.5);
	transform: rotate(0deg) scale(2.5);
}


<!-- Spinner animation -->

/* 
*  The .img_wrapper and img styles should be 
*  changed to suit your project. The only crucial
*  properties are the opacity values and CSS3 transitions
*  defined on the img tags.
*/

.img_wrapper{
    position: relative;
    padding-top: 75%;
    margin-bottom: 40px;
    background: #fafafa;
    overflow: hidden;
}

.img_wrapper img{
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0;
  
    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    -ms-transition: opacity .5s;
    transition: opacity .5s;
}

.img_wrapper.loaded img{
    opacity: 1;
}

.img_wrapper.loaded .css_spinner{
    display: none;
}

/*
* CSS loading spinner styles for second example.
* You could also use a background image .gif 
* on the img_wrapper, or any rotating element.
*
* see: http://codepen.io/patrickkunka/pen/zxgas
*/

.css_spinner{
	position: absolute;
	width: 48px;
	height: 48px;
	left: 50%;
	top: 50%;
	margin: -24px 0 0 -24px;
	opacity: 1;
	
	-webkit-border-radius: 999px;
	-moz-border-radius: 999px;
	border-radius: 999px;
}

.css_spinner .half{
	position: absolute;
	width: 24px;
	height: 48px;
	top: 0;
	overflow: hidden;
}

.css_spinner .left{
	left: 0px;
	
	-webkit-border-radius: 999px 0 0 999px;
	-moz-border-radius: 999px 0 0 999px;
	border-radius: 999px 0 0 999px;
}

.css_spinner .right{
	left: 24px;
	
	-webkit-border-radius: 0 999px 999px 0;
	-moz-border-radius: 0 999px 999px 0;
	border-radius: 0 999px 999px 0;
}

.css_spinner .band{
	position: absolute;
	width: 24px;
	height: 48px;
	background: #FC4600;
	
	-webkit-border-radius: 999px;
	-moz-border-radius: 999px;
	border-radius: 999px;
	
	-webkit-animation: cssSpinnerRight 1s infinite linear;
	-moz-animation: cssSpinnerRight 1s infinite linear;
}

.css_spinner .left .band{
	left: 0;
	border-left: 24px solid #fafafa;

	-webkit-animation: cssSpinnerLeft 1s infinite linear;
	-moz-animation: cssSpinnerLeft 1s infinite linear;
}

.css_spinner .right .band{
	right: 0;
	border-right: 24px solid #fafafa;
}

@-webkit-keyframes cssSpinnerLeft{
  0%{-webkit-transform:rotate(0deg)}
  25%{-webkit-transform:rotate(0deg)}
  50%{-webkit-transform:rotate(180deg)}
  75%{-webkit-transform:rotate(180deg)}
  100%{-webkit-transform:rotate(360deg)}
}

@-webkit-keyframes cssSpinnerRight{
  0%{-webkit-transform:rotate(0deg)}
  25%{-webkit-transform:rotate(180deg)}
  50%{-webkit-transform:rotate(180deg)}
  75%{-webkit-transform:rotate(360deg)}
  100%{-webkit-transform:rotate(360deg)}
}

@-moz-keyframes cssSpinnerLeft{
  0%{-moz-transform:rotate(0deg)}
  25%{-moz-transform:rotate(0deg)}
  50%{-moz-transform:rotate(180deg)}
  75%{-moz-transform:rotate(180deg)}
  100%{-moz-transform:rotate(360deg)}
}

@-moz-keyframes cssSpinnerRight{
  0%{-moz-transform:rotate(0deg)}
  25%{-moz-transform:rotate(180deg)}
  50%{-moz-transform:rotate(180deg)}
  75%{-moz-transform:rotate(360deg)}
  100%{-moz-transform:rotate(360deg)}
}