/* --------------------------------------------------------- */
/* Thank you for looking at this code © pachanga */
/* --------------------------------------------------------- */

/* ==================== ALLGEMEINE DEFINITIONEN ==================== */

/*importierte Schriften von Google Webfonts*/
@import url('https://fonts.googleapis.com/css?family=Slabo+27px');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800');

/* Farben türkis #65c8d0 RGB 101 200 208, grau #2d2c2c RGB 45 44 44 und rot #c22f3f RGB 194 47 63*/
/* antrazit #333 RGB 51 51 51 - dunkelgrau #404040 RGB 64 64 64 - hellgrau #BFBFBF RGB 191 191 191 - ganz hellgrau #EDEDED RGB 237 237 237*/

* {
	padding:0px;
	margin:0px;
}

html, body {
	color:#fff;
	font-family: 'Open Sans', Calibri,Tahoma, sans-serif;
	font-size:16px;		
	font-weight:300;
	height:100%;		
	min-height:100%;
}

div {
	box-sizing:border-box;	
}

h1, h2, h3 {
	color:#65c8d0;
	font-family: Calibri;
	font-size:2rem;
	text-align: center;
	text-transform:uppercase;
}

h1 {
	font-weight:700;
	margin-top:0px;
	margin-bottom:10px;
}

a { 
	text-decoration:none;
}

video {
	text-align: center;
	height:100%;
	width: 100%;
	padding:0% ;
}

a:link {
	color: #fff;
	transition:all .8s ease-in-out; 
	text-decoration: none;
}

a:visited {
	color: #fff;
}

a:hover {
	color: #65c8d0;
	transition:all .9s ease-in-out; 
	text-decoration: none;
}

a:active {
	color: #fff;
}
/* ==================== LINKS ==================== 

#inhalt a:link {
	border-bottom:1px dotted;
	color:#c22f3f;
	text-decoration:none;
	transition:all 0.5s ease;
}

#inhalt a:visited {
	color:#65c8d0;
}

#inhalt a:hover {
	color:#65c8d0;
	text-decoration:none;
	transition:all 0.5s ease;
}

#inhalt a:aktiv {
	color:#c22f3f;
}
*/
/* ==================== LAYOUT - DIV'S (ID/CLASS) ==================== */
#container {
	height:100%;
	width:100%;
	
}

#mood {
	background:#fff;
	height:200px;
	padding:20px 0px 10px 0px;
	text-align:center;
	width:100%;
	
}

#inhalt {
	float:left;
	height:70%;
	margin-top:30px;
	padding:20px 50px 50px 50px;
	text-align: center;
	width:100%;
}

#footer {
	border-top:2px solid #ffffff;
	bottom:0px;
	color:#fff;
	float:left;
	font-size:0.8rem;
	height:150px;
	left:0px;
	padding:20px;
	text-align:center;
	width:100%;
}


.tuerkis {
	color:#65c8d0;
}
.bg_tuerkis {
	background:#65c8d0;
}

.bg_rot {
	background:#c22f3f;
}

.bg_grau {
	background:#2d2c2c;
}

.links {
	float:left;
	margin-right:4%;
	padding:50px;
	width:48%;
}

.rechts {
	float:right;
	padding:50px;
	width:48%;
}

.links img {
	text-align: center;
	height:100%;
	width: 100%;
	padding:0% ;
}

/*#inhalt a,
#inhalt a:visited,
#inhalt a:hover,
#inhalt a:activ {
	border:none;
	text-decoration:none;
	color:#c22f3f;
}
*/
.abstand {
	margin-bottom:10px;
}


/* to top */
.totop {
	background:rgba(255,255,255,0.95);
	bottom:60px;
	display:none;
	height:40px;
	padding-top: 5px;
	position:fixed;
	right:0;
	text-align: center;
	width:60px;
	z-index:3;
}


/* ==================== @media ==================== */
@media screen and (max-width:860px) {
	#inhalt, #footer, #ßmood {
		display:block;
		padding:20px;
		width:95%;
	}
	h1, h2 {
		font-size:1.4rem;
	}
	
	p {
		font-size:0.9rem;
	}
	
	img {
		width:95%;
	}
}

	
@media screen and (max-width:490px) {
	#container{
		padding:0px;
	}
	#inhalt, #footer, #mood {
		display:block;
		height:100%;
		margin:10px 10px 10px 10px;
		padding:10px;
		transition:all 0.5s ease-in-out;
		width:95%;
	}
	
	#inhalt {
		height:80%;
	}
	
	#footer {
		height:20%;
	}
	
	#mood {
		height:200px;
	}
	
	h1, h2 {
		font-size:1.2rem;
	}
	
	p {
		font-size:0.8rem;
	}
	
	.links {
		display:block;
		padding:5%;
		width:100%;
	}

	.rechts {
		border-top: 1px solid #fff;
		display:block;
		float:left;
		padding:5%;
		width:100%;
	}
	
	video {
		padding:5%;
		width:95%;
	}
	
	img {
		width:95%;
	}

}

	input:-webkit-autofill,
	input:-webkit-autofill:hover,
	input:-webkit-autofill:focus,
	input:-webkit-autofill:active {
		transition: all 5000s ease-in-out 0s;
		transition-property: background-color, color;
}