*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }

body {background: #fcfcfc;color: #5b5b5b;font-size: 1em;	font-family: 'Raleway', Arial, sans-serif; text-align:justify;}

.container {max-width: 700px; margin: 0 auto !important; padding: 2em 0 0 0; }
.block-group { *zoom: 1;}
.block-group:before, .block-group:after {  display: table;  content: ""; line-height: 0;}
.block-group:after {  clear: both;}
.block-group {  list-style-type: none;  padding: 0;  margin: 0;}
.block-group > .block-group {  clear: none;  float: left;  margin: 0 !important;}
.block {  float: left;  width: 100%;}

h1 {font-size:1.8em; font-weight:300; margin:0.25em 0 0 0; color:#222;}
h2 {font-size:1.5em; font-weight:300;}
h3 {font-size:1.2em;}

ul {list-style-type:none; padding: 0 0 0 1.8em }

a {	color: rgba(236,90,98,1);text-decoration: none;	outline: none;}
a,a:focus, a:active {outline: none;}
a:active, a:focus {font-weight:normal; color:#ec5a62;}
a:hover{color: #ec5a62;}

nav {width: 180px; background:salmon; padding: 1em; border-radius:10px 3px 3px 3px;}
nav a {display:block; margin-bottom:5px; color: #fcfcfc;}
nav a.active {font-weight:700;}
nav a:hover, nav a:focus{color: #ffffee;}

.nav-bottom  a.nav {color:black; font-size:95%;}
.nav-bottom  .nav.active {font-weight:300;}
.nav-bottom  {font-size:13px; font-weight:300; text-transform:uppercase; line-height:20px;}

.header {margin:1em 0 0.8em 0 !important;}

.social ul {text-align:right; height: 28px; margin:0.8em 0 1em;}
.social li {list-style-type:none; display:inline-block;}
.social i {background: khaki; width:25px; height:25px; border-radius:3px; padding:  5px 3px; color:#fff; transition: all ease-in-out 0.15s;}
.social i:hover {background: #fff; width:25px; height:25px; border-radius:3px; padding: 3px; color:#3b3b3b;}
.social small {color: #aaa;}

.content h2, .content h3, .content h4  {margin:0 0 0.85em 0; padding:0; }

.box { margin: 0 0 0 2em; padding: 0.8em 0 ;}
.gyg {color: rgba(236,90,98,1); font-family:'Give you Glory', serif;}
.crt  {text-align:right; font-size:9px;}
.answer {display:none;}

.scrollbox {overflow:hidden; width:100%; max-height:250px;}

#home {background: url('../img/246876_web_R_K_by_Konstantin Gastmann_pixelio.de.jpg') no-repeat -40px 14px #fff; min-height: 250px; padding: 1em; box-shadow:1px 1px 4px #999; border-radius:5px; position:relative;}
#home h2 {position:absolute; bottom:20px; right:0; background: #3b3b3b; padding:5px 10px; color:#fcfcfc; border-radius: 2px 0 0 3px;}

#service, #team, #fragen, #contact, #googlemap, #disclaimer {display:none; background: #fff; min-height: 250px; padding: 1em; box-shadow:1px 1px 4px #999; border-radius:5px; }
#team{position:relative;}
#team-member {position:absolute; bottom: -3px; left:0; right:0;}
.customNavigation {width: 100px; background:darkkhaki; position:absolute; top: 15px; right:0; padding: 3px 5px;}
.customNavigation a{color:#fcfcfc; margin-left:3px; cursor:pointer;}
.customNavigation a:hover{color:#fff;}

#disclaimer p {font-size:0.9em;}

#googlemap{	padding-bottom: 45%; height: 0;	overflow: hidden;}
#googlemap iframe {position: absolute;top: 0;left: 0;	width: 100% !important;	height: 100% !important;padding:1em;}

input,textarea, button {width:100%; margin-top:8px;}
input,textarea {border: 2px solid #eee; padding: 5px 3px; color: #6b6b6b; background: #f9f9f9;}
input:focus,textarea:focus {border: 2px solid #ddd; background:#fff; }
button { border: 1px solid #ccc; border-radius:3px; line-height: 2em; background: rgba(238,238,238,1); }
button:hover {background: rgba(238,238,238, 0.85);}

   
@media (max-width: 768px) {
body {padding:0 1em 3em; overflow-x:hidden;}
h1 {font-size: 1.55em; text-align:center;}
h2 {font-size: 1.2em;}
.header {position:fixed; top:-1em; left:0; right:0; width:100%; background:#fff;}
.social ul {text-align:center; padding:0;}
nav {position:fixed; bottom:0; left:0; width:100%; z-index:999; border-radius:0 0 0 0;}
nav a{display:inline; margin: 0 5px 0 0; font-size:75%;} 
}

@media (min-width: 768px) {
.main{width:70%;}
.logo {width:60%;}
.social {width: 40%;}
.sidebar {width: 30%;}
.half, .t-half {width:50%;}
}


@media (min-width: 960px) {
.main{width:70%;}
.logo {width:60%;}
.social {width: 40%;}
.sidebar {width: 30%;}
.half, .t-half {width:50%;} 
}


#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#f9f9f9; /* change if the mask should have another color then white */
    z-index:99999; /* makes sure it stays on top */
}

#status {
    width:200px;
    height:200px;
    position:absolute;
    left:50%; /* centers the loading animation horizontally one the screen */
    top:50%; /* centers the loading animation vertically one the screen */
    background-position:center;
    margin:-100px 0 0 -100px; /* is width and height divided by two */
}


.bubbles {
	text-align: center;
	width:300px;
	height:188px;
	margin: auto;
}

.bubbles span {
	display: inline-block;
	vertical-align: middle;
	width: 38px;
	height: 38px;
	margin: 94px auto;
	background: rgb(0,0,0);
	border-radius: 188px;
		-o-border-radius: 188px;
		-ms-border-radius: 188px;
		-webkit-border-radius: 188px;
		-moz-border-radius: 188px;
	animation: bubbles 1.5s infinite alternate;
		-o-animation: bubbles 1.5s infinite alternate;
		-ms-animation: bubbles 1.5s infinite alternate;
		-webkit-animation: bubbles 1.5s infinite alternate;
		-moz-animation: bubbles 1.5s infinite alternate;
}

#bubbles_1 {
	animation-delay: 0s;
		-o-animation-delay: 0s;
		-ms-animation-delay: 0s;
		-webkit-animation-delay: 0s;
		-moz-animation-delay: 0s;
}

#bubbles_2 {
	animation-delay: 0.45s;
		-o-animation-delay: 0.45s;
		-ms-animation-delay: 0.45s;
		-webkit-animation-delay: 0.45s;
		-moz-animation-delay: 0.45s;
}

#bubbles_3 {
	animation-delay: 0.9s;
		-o-animation-delay: 0.9s;
		-ms-animation-delay: 0.9s;
		-webkit-animation-delay: 0.9s;
		-moz-animation-delay: 0.9s;
}



@keyframes bubbles {
	0% {
		width: 38px;
		height: 38px;
		background-color:rgb(0,0,0);
		transform: translateY(0);
	}

	100% {
		width: 90px;
		height: 90px;
		background-color:rgb(255,255,255);
		transform: translateY(-79px);
	}
}

@-o-keyframes bubbles {
	0% {
		width: 38px;
		height: 38px;
		background-color:rgb(0,0,0);
		-o-transform: translateY(0);
	}

	100% {
		width: 90px;
		height: 90px;
		background-color:rgb(255,255,255);
		-o-transform: translateY(-79px);
	}
}

@-ms-keyframes bubbles {
	0% {
		width: 38px;
		height: 38px;
		background-color:rgb(0,0,0);
		-ms-transform: translateY(0);
	}

	100% {
		width: 90px;
		height: 90px;
		background-color:rgb(255,255,255);
		-ms-transform: translateY(-79px);
	}
}

@-webkit-keyframes bubbles {
	0% {
		width: 38px;
		height: 38px;
		background-color:rgb(0,0,0);
		-webkit-transform: translateY(0);
	}

	100% {
		width: 90px;
		height: 90px;
		background-color:rgb(255,255,255);
		-webkit-transform: translateY(-79px);
	}
}

@-moz-keyframes bubbles {
	0% {
		width: 38px;
		height: 38px;
		background-color:rgb(0,0,0);
		-moz-transform: translateY(0);
	}

	100% {
		width: 90px;
		height: 90px;
		background-color:rgb(255,255,255);
		-moz-transform: translateY(-79px);
	}
}