*{
	margin:0;
	padding:0;
	border:none;
	outline:none;
	font-family: 'Source Sans Pro', sans-serif;
	color:#333;
}


html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 573px;} 
#footer {
	position: relative;
	margin-top: -573px;
	height: 573px;
	clear:both;
}
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {display: inline-block;}
* html .clearfix { height: 1%;}
.clearfix {display: block;} 















.rechnerfelder .rechner_headlines{
	font-size:20px;
	font-weight:200;
	text-align:center;
	width:100%;
	display:inline-block;
	margin:10px 0;
	position:relative;
}

.rechnerfelder .rechner_headlines:after{
    content: "€";
    font-size: 48px;
    position: absolute;
    bottom: -74px;
    right: 130px;
}

.rechnerfelder .rechner_headlines.kurfeld:after{
    content: "%";
    font-size: 48px;
    position: absolute;
    bottom: -74px;
    right: 130px;
}

.rechnerfelder .rechner_headlines.roasfeld:after{
    content: "";
    font-size: 48px;
    position: absolute;
    bottom: -74px;
    right: 130px;
}

#rechner input{
	height:70px;
	line-height:70px;
	text-align:center;
	border:1px solid #2a5f92;
	display:block;
	margin:0 auto;
	width: 230px;
	font-size: 30px;
	-moz-appearance:textfield;
}

#rechner input.ok{border-color:#96C894;}
#rechner input.wrong{border-color:#D28382;}

#rechner input::-ms-clear {
    display: none;
}

#rechner input::-webkit-outer-spin-button,
#rechner input::-webkit-inner-spin-button{
	-webkit-appearance: none;
} 



#rechnerpfeile{
	width:80px;
	height:auto;
	display:inline-block;
	float:left;
	margin: 55px 0;
}

#gleichzeichendiv{
	text-align:center;
	width: 100%;
    display: inline-block;
    margin-bottom: 20px;
}

#gleichzeichen{
	display:inline-block;
		    font-size: 24px;
    font-weight: 200;
    margin-bottom: 30px;
	width:100%;
	/* font-size:66px; */
}

#ergebnis{
	border:10px solid #94afc8;
	height:250px;
	width:250px;
	line-height:250px;	
	display:block;
	margin:0 auto;
	font-size:50px;
	font-weight:700;
	text-align:center;	
	border-radius:50%;
	clear:left;
	float:none;
}

#ergebnis.super{border-color:#96C894;}
/* #ergebnis.gut{border-color:#94afc8;}
#ergebnis.nichtgut{border-color:#C8C094;}
#ergebnis.schlecht{border-color:#C89594;} */

#ergebnis.gut{border-color:#E6DE9C;}
#ergebnis.nichtgut{border-color:#DC9B69;}
#ergebnis.schlecht{border-color:#D28382;}



.haelfte{
	display:inline-block;
	width:45%;
	margin:10px 5% 10px 0;
	float:left;
	min-height:376px;
}

#gleichzeichen,
#ergebnis,
#texte .width > div{display:none;}

.text_headline{
	font-size:70px;
	font-weight:200;	
}
.supertext p,
.guttext p,
.nichtguttext p,
.schlechttext p{
	font-size:26px;
	font-weight:200;
}


.supertext .smiley_bild,
.guttext .smiley_bild,
.nichtguttext .smiley_bild,
.schlechttext .smiley_bild{
	height:300px;
	padding-top:20px;
	background-size: 100% auto !important; 
	
	animation: animatedBackground 2s linear infinite;
	
	background-position: 0px 0px;
	background-repeat: repeat-x;
}



@keyframes animatedBackground {
	0% { background-position: 0 0; }
	50% { background-position: 0 10px; }
	100% { background-position: 0 0px; }
}


.supertext .smiley_bild{
	background-image:url(../images/sehr_gut_gb.jpg);
	
	}
.guttext .smiley_bild{
	background-image:url(../images/gut_bg.jpg) ;
	
}
.nichtguttext .smiley_bild{
	background-image:url(../images/nicht_gut_bg.jpg);
	
	}
.schlechttext .smiley_bild{
	background-image:url(../images/schlecht_bg.jpg) ;
	
	}



.smiley_bild img{
	margin:0 auto;
	display:block;
	position: relative;
    top: 110px;
	
}




#footer{
	background:#666; 
	color:#fff;
	font-weight:200;
	font-size:16px;
	line-height:22px;
}


.drittel{
	float:left;
	width:28%;
	margin-right:8%;
	padding:70px 0;
}

.drittel h3{
	color:#fff;
	font-weight:400;
	margin-bottom:10px;
}
.drittel p{	color:#fff;}


#footer_bottom_div{
	float:left;
	display:inline-block;
	width:100%;
	background: #3A3A3A;
	padding: 20px 0;

}

#footer_bottom{
	/* width:90%; */
	text-align:left;
	clear:left;
	float:none;
	display:inline-block;
	font-size:16px;
	color:rgba(255,255,255,0.6);
}

#footer_bottom a{color:#fff;}

#impressum{
	color:#fff;
	border-left:1px solid #fff;
	display:inline-block;
	margin-left: 10px;
    padding-left: 10px;
}

#social_shares{
	float:right;
}

#social_shares a{
	color:#fff;
	margin-left:10px;
	float:left;
}

#social_shares a:hover{
 -webkit-animation-name: bounce;
  animation-name: bounce;
}

#db_facebook{}
#db_twitter{}
#db_whatsapp{}
#db_google{}

#db_facebook i:hover{color:#3B5998;}
#db_twitter i:hover{color:#55acee;}
#db_whatsapp i:hover{color:#25D366;}
#db_google i:hover{color:#DC4E41;}

#social_shares a i{
	font-size:26px;
	color:#fff;
}

#social_shares a:hover i{
	text-shadow:0 0 5px rgba(0,0,0,0.7);
}


body .last{
	margin-right:0 !important;
	float:right;
}



/*Paralax*/
.layer {
    padding: 20px;
    height:100%;
	width:100%;
	display:block;
	position:absolute !important;
	
}
#base-layer  {
	overflow: hidden;
	height: 350px;
	display: inline-block;
	position: absolute;
	top: 0;
	left:0;
	width: 100%;
	padding:50px 0 ;
} 



#layer-one {
    background-image:url(../images/wolken1.png);
}
#layer-two {
    /* background: green; */
	 background:url(../images/wolken2.png) -23px -18px;
}
#layer-three {
    /* background: blue; */
	 background:url(../images/wolken.png) -170px 0 ;
}
.slider {
    margin-left: auto;
    margin-right: auto;
  /*   overflow: hidden; 
    padding-top: 200px;*/
	width: 100%;
    margin: 0 auto;
}
.slider img {
    width: 100%;
    height: auto;
	margin:0 auto;
}



	@media only screen and (max-width: 1000px) {
		
		
		
		
		#main {
			padding-bottom: inherit;
		}
		#footer{
			margin-top: inherit;
			height: auto;
		}
		
		
		#footer_bottom{text-align:center;padding:15px 0;}
		#social_shares{
			width:100%;
			padding:20px 0;
		}
		#footer_bottom{width:100%;}
		#impressum{
			border-left:0;
			padding-left:0;
			margin:20px 0 0;
			text-align:center;
			width:100%;
		}
		#social_shares a{
			width: 25%;
			margin: 0;
			padding: 0;
			display: inline-block;
			text-align: center;
		}
		
	}
	
	
	
	
		@media only screen and (max-width: 680px) {
			.haelfte{    
				width: 90%;    
				margin: 0px 5% 0px;
				min-height:auto;
			}
			.drittel{
				width:90%;
				margin:10% 5%;
				padding:0;
			}
			#rechnerpfeile{display:none;width:100%;text-align:center;}
			
			.rechnerfelder{width:100%;}
						#gleichzeichen{color:#fff !important;}
			
			
			#footer{
				height:auto;
				margin-top:inherit;
			}
			#main {    padding-bottom: inherit;}
			body .last{
				float:left;
				clear:right;
			}
		}





::selecetion{background: #94afc8;color:#fff;}
::-moz-selecetion{background: #94afc8;color:#fff;}


.supertext .smiley_bild,
.guttext .smiley_bild,
.nichtguttext .smiley_bild,
.schlechttext .smiley_bild,
#db_facebook ,
#db_twitter,
#db_whatsapp,
#db_google,
#db_facebook i,
#db_twitter i,
#db_whatsapp i,
#db_google i
{	  -webkit-transition: all 0.3s ease-out;          transition: all 0.3s ease-out; }