body {
    font-family: 'Open Sans', sans-serif;
}

textarea {
    resize: vertical;
}

#get {
    background: url(https://http-get.de/get.gif) no-repeat;
}

.content-main {
    /* min-height: 700px; */
}

.footer-main {
    padding: 4rem 0;
    margin-top: 4rem;
    background-color: #f7f7f7;
}

/* Google Maps on contact page */
.map {
    width: 100%;
    position: relative;
    height: 300px;
}

.map:before, .map iframe {
    /* position: absolute; */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.map:before {
    content: '';
    z-index: 1;
}

.map iframe {
    border: none;
}

.map.active {
    z-index: 1
}

.map.active:before {
    z-index: 0
}

.wpt img {
    max-width: 100px;
}

.powered-by {
    font-size: 14px;
    font-weight: 500;
}

.powered-by small {
    font-size: 10px;
}

.wpt-adress {
    font-size: 12px;
}

/* Neu */

/* Elemente */

html, body {
    height: 100%;
}

body {
	background-color: #1b202f;   /* #293147; */
}

section {
	overflow: hidden;
}

dl, ol, ul {
    margin-bottom: 0;
}

li {
	list-style-type: none;
	list-style-image: url(data:0);
}

#header-kontakt li {
	display: inline;
}

#header-kontakt li a {
	color: #fff;
}

#header-kontakt div div ul {
	padding: 1% 2% 1%;
}

#post-header-gallery div div div img {
	width: 100%;
}

.navbar-brand img {
	margin-left: -2px;
}

nav {
	z-index: 8;
}

nav div ul li a:hover {
	background-color: #6b80b3;
	color: #fff !important;
}

nav div ul li a {
	color: #252d40 !important;
}

#kontakt a {
	color: #85abdf;
}

.headline-box {
	text-align: center;
	padding: 15px 0 5px;
}

.headline-box span {
	font-size: 20pt;
	font-weight: lighter;
	line-height: 20pt;
	display: block;
}

.headline-not-home {
    padding: 32px 0 !important;
}

#button-wrapper div div div a button span {
	margin: 35px 0 0 -30px;
	position: absolute;
	top: 117px;
}

hr {
	border-top: 0px solid rgba(0,0,0,0);
}

.animated p img {
	padding-top: 40px;
}

article {
	/* background-image: url("../images/bg-content-base.jpg"); */
	padding-bottom: 75px;   /* 96px; */
	height: 100%;
}

#footer div ul {
	margin-left: -40px;
}

#footer div ul li {
	display: inline;
	padding-right: 15px;
}

#footer div ul li a {
	color: #fff;
	text-decoration: underline;
}

#footer div div div {
	margin-bottom: 15px;
}

.thankyou h1 {
	font-size: 2.0rem;
}

/* Klassen und Pseudo-Klassen */

::selection {
	color: white; background-color: black;
}

::-moz-selection {
	color: white; background-color: black;
}

.kontakt-liste {
	margin-right: -30px;
}

.current {
	background-color: #252d40 !important;
	color: #fff !important;
}

.nopadding {
   padding: 0 !important;
   /* margin: 0 !important; */
}

.mail {
	padding-right: 15px;
}

.white-line {
	background-color: #fff;
	min-height: 75px;
	margin-top: -108px;
	position: relative;
	z-index: 2;
}

.twisted-line {
	min-height: 92px;
	margin-top: -75px;
}

.twisted-content-header {
	min-height: 92px;
	margin-top: 0;
	padding-bottom: 0;
}

.twisted-content {
	padding: 68px 0;
}

.header-links {
    background-color: #fff;
    /* padding: 160px 2% 112px 21%; */
}

.header-rechts {
	background-color: #567db6;
    /* padding: 160px 21% 112px 2%; */
}

.content-header-links {
    background-color: #293147;
}

.content-header-rechts {
    background-color: #fff;
}

.content-links {
    background-color: transparent;
}

.content-rechts {
    background-color: rgba(41, 49, 71, 0.75);
	color: #fff;
	padding: 44px;
}

.navbar-toggler {
	margin-bottom: 25px;
}

.navbar-expand-lg .navbar-nav .nav-link {
	display: block;
    padding: 1.5rem;
}

.nav-item:hover {
	background-color: #567eb6;
	color: #fff;
}

.background {
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.hide {
	display: none;
}

.home {
	min-height: 682px;
}

.button-links {
	text-align: right;
}

.button-mitte {
	text-align: center;
}

.button-rechts {
	text-align: left;
}

.button {
    background-color: rgba(255,255,255,0);
    border: none;
    color: white;
	/* padding: 0; */
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 50%;
	height: 225px;
	width: 225px;
	/* box-sizing: border-box;	 */
	 /* -webkit-transition: outline .5s; */
    /* -moz-transition: outline .5s; */
    /* border-radius: 50%; */
    /* -moz-outline-radius: 50%; */
}

.button:hover {
	background-color: #293147;
	outline: 10px solid #fff;   /* #567eb6; */
    outline-offset: -10px;
}

.button span {
	position: absolute;
	margin: 38px 0 0 -35px;
	color: #293147;
	font-size: 16pt;
	line-height: 16pt;
	top: 0;
}

.button:hover span {
	color: #fff;
}

.round-button {
	background-color: rgba(255,255,255,0);
    border: none;
    color: white;
	padding: 0;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 50%;
	height: 225px;
	width: 225px;

	background: none;
	border: 0;
	box-sizing: border-box;
	margin: 1em;
	padding: 1em 2em;

	box-shadow: inset 0 0 0 2px #f45e61;
	color: #293147;   /*#f45e61; */
	font-size: inherit;
	font-weight: 700;

	position: relative;
	vertical-align: middle;
	
	/* width: 5em; */
	/* height: 5em; */
	padding: 0;
	
	border-radius: 100%;
	box-shadow: none;
	
	background-size: 100%;
}

.round-button:hover {
	color: #fff;   /* #0eb7da; */
	background-color: rgba(41, 49, 71, 0.75);
}

.round-button:before, .round-button:after {
	box-sizing: inherit;
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	
	top: 0;
    left: 0;
	
	border-radius: 100%;
}

.round-button:before {
	border: 9px solid transparent; 
}

.round-button:after {
	border: 9px solid transparent; 
}

.round-button:hover:before {
	border-top-color: #fff;   /* #0eb7da;  */
	border-right-color: #fff;
	border-bottom-color: #fff;

	transition: border-top-color, border-right-color, border-bottom-color linear;
	transition-duration: 0s, 0s, 0s;
	transition-delay: 0s, .1s, .2s;
}

.round-button:hover:after {
	border-top: 9px solid #4d5d84;   /* #0eb7da;  */
	border-left-width: 9px; 
	border-right-width: 9px; 
	transform: rotate(270deg); 
	
	transition: 0.5s transform, border-left-width linear;
}

.sanitaer {
	background-image: url("../images/sanitaer-btn.png");
}

.heizung {
	background-image: url("../images/heizung-btn.png");
}

.bauaustrocknung {
	background-image: url("../images/bauaustrocknung-btn.png");
}

.sanitaer:hover {
	background-image: url("../images/sanitaer-btn-hvr.png");
}

.heizung:hover {
	background-image: url("../images/heizung-btn-hvr.png");
}

.bauaustrocknung:hover {
	background-image: url("../images/bauaustrocknung-btn-hvr.png");
}

.bauaustrocknung span {
	margin-left: -40px !important;
}

.circle {
    border-radius: 100%;
    box-shadow: none;
}

.spin {
    padding: 0;
}

.circle::before, .circle::after {
    border-radius: 100%;
}

.spin::before {
    border: 2px solid transparent;
}

.spin::before, .spin::after {
    top: 0;
    left: 0;
}

.round-button::before, .round-button::after {
    box-sizing: inherit;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
}

.btn-success {
    color: #fff;
    background-color: #567eb6;
    border-color: #567eb6;
}

.btn-success:hover {
    color: #fff;
    background-color: #2974dd;
    border-color: #2974dd;
}

.btn-success:not([disabled]):not(.disabled).active, .btn-success:not([disabled]):not(.disabled):active, .show > .btn-success.dropdown-toggle {
    color: #fff;
    background-color: #2974dd;
    border-color: #2974dd;
    box-shadow: 0 0 0 .2rem rgba(40,167,69,.5);
}

#footer div ul li a:hover {
	color: #567eb6;
}

.footer-social-media {
	text-align: right;
}

.text-headline {
	font-size: 18pt;
	font-weight: bold;
}

.box-aussen {
	background-color: #fff;
}

.box-mitte {
	background-color: rgba(41, 49, 71, 0.75);   /* #5c6785; #293147; */
}

.box-aussen a {
	color: #293147;
}

.box-mitte a {
	color: #fff;
}

.box-aussen a, .box-mitte a {
	display: block;
	padding: 1.0em;
}

.box-aussen a:hover, .box-mitte a:hover {
	color: #fff;
    background-color: #567eb6;
	text-decoration: none;
}

.box-aussen, .box-mitte {
	text-align: center;
}

.impressum-links {
	padding-left: 10%;
}

.safari-row {
	padding-bottom: 15px;
}

.thankyou {
	padding-top: 30px;
	color: #fff;
}

.card-body {
	color: #000;
}

/* Container */

#edge-catcher {
	display: none;
}

#wrapper {
	position: relative;
    min-height: 100%;
    height: auto !important;
    height: 100%;
}

#header-wrapper {
	background-color: #fff;
	overflow: hidden;
}

#header-kontakt {
	background-color: #567db6 !important;
	color: #fff;
	display: block;
	min-height: 51px;   /* 45px; */
	background-color: #fff;
	font-weight: 400;
	text-align: left;
	width: 100%;   /* 84%; */
	z-index: 9999;
	vertical-align: middle;
}

#header-navigation {
	margin-top: -13px;
}

#mainmenu-nav {
	margin-top: 5px;
}

#logo {
	margin-top: -75px;
	position: relative;
	z-index: 4;
}

#post-header-wrapper {
	background-image: url("../images/bg-post-header.jpg");
}

#post-header-gallery {
	background-color: rgba(41, 49, 71, 0.75) !important;
}

#button-wrapper {
	padding-top: 144px;
}

#trennstrich {
	height: 18px;
	background-color: #4d5d84;
}

#content {
	height: 100%;
    /* padding-top: 50px; */
}

#content-base {
	background-image: url("../images/bg-content-base.jpg");
	/* min-height: 514px; */  /* 706px; */
}

#kontakt {
	background-color: #293147;
	color: #fff;
	padding: 47px 0 47px;
	margin-top: -6px;
}

#footer {
	background-color: #1b202f;
	color: #fff;
	padding: 21px 0 6px;
	bottom: 0;
	width: 100%;
	position: absolute;
}

#filler {
	display: block;
	/* min-height: 145px; */   /* 125px; */
}

/* Media Queries */

@media( max-width: 767px ) {
	#nav_oben {display: none;}
	.header-wrapper {background-image: url("../images/bg-header.jpg");}
	.header-wrapper-referenzen {background-image: url("../images/bg-header-referenzen.jpg");}
	#header{display: none;}
	#navigation{width: 100%;}
	#header-navigation {margin: -4px 0 0 0; /* -4px 0 -10px 0; */}
	#mainmenu-nav {margin-bottom: -55px;}
	.navbar-brand {width: 70%;}
	.navbar-brand img {margin-left: -30px; /* -45px; */ width: 130%;}
	/* .navbar-toggler {width: 100%; font-size: 1em; padding: 0;} */
	.navbar-light .navbar-toggler {margin: -5px 0 -8px 0;   /* -22px 0 -8px 0; */   /* 0 0 0 40%; */   /* 15px; */}
	.navbar-light .navbar-nav .nav-link {font-size: 16pt; padding: 1.0rem;}
	.dropdown-item {font-size: 12pt /* 1.3vw */; padding-right: 35px;}
	.navbar-nav .dropdown-menu {position: absolute !important;}
	.navi {padding-top: 0; position: relative; /* width: 100%; padding-left: 65px; margin-left: 30px; */}
	.navbar-expand-lg .navbar-nav {padding: 0 0 47px;}
	.header-overlay-text {padding: 0px 15px;}
	#post-header-gallery, .white-line, .twisted-line {display: none;}
	span.ueberschrift {font-size: 20pt;}
	.headline {padding: 25px 25px 20px 45px !important;}
	.headline span {font-size: 13pt;}
	span.subline {font-size: 11pt;}
	#header-kontakt{display: none;}
	#post-header-wrapper {min-height: 0px;   /* 720px; */}
	#button-wrapper {padding-top: 10px}
	.round-button span {font-size: 8pt; top: 60px !important;}
	.round-button:before, .round-button:after {border: 4px solid transparent;}
	.round-button:hover:after {border-top: 5px solid #4d5d84; border-left-width: 5px; border-right-width: 5px;}
	.button-mitte {float: left; margin: -15px 0 0 -5px;}
	.button-rechts {float: left; margin: -15px 0 0 -15px;}
	.sanitaer span {margin: 19px 0 0 -20px !important;}
	.heizung span {margin: 19px 0 0 -23px !important;}
	.bauaustrocknung span {margin: 17px 0 0 -28px !important; line-height: 12px !important;}
	.button, .round-button {height: 120px; width: 120px;}
	.button-links, .button-rechts {text-align: center;}
	.content-header-links, .content-links {display: none;}
	.headline-box span {font-size: 16pt; line-height: 22pt;}
	#content-base {min-height: 0px;}
	.twisted-content {padding: 0;}
	.kontakt-h1 {text-align: center;}
	#kontakt div h1 {font-size: 22pt;}
	#btn_contact_send {width: 100%;}
	#footer div div div {text-align: center;}
}

@media( min-width: 768px ) {
	#header{width: 50%; display: inline-block;}
	#navigation{width: 100%;}
	#header-kontakt{display: none;}
	.navbar-nav .dropdown-menu {position: absolute !important;}
	.dropdown-item {font-size:  1.2vw !important; padding-right: 10px;}
}

@media( max-width: 875px ) {
	/* .feuerwerke-text {margin-left: 5%;} */
	
}

@media( max-width: 991px ) {
	div.logo {display: none;}
	.header-overlay div.row {margin-left: 5%;}
	.headline {padding: 75px 0 75px 45px;}
	/* .right-text {padding-bottom: 75px !important;} */
	/* .current {padding: 0px !important; border: 0px solid #fff;} */
}

@media( min-width: 992px ) {	
	#logo{width: 25%;}
	#header{width: 75%;display:inline-block;}	
	#navigation{width: 100%;}
	#header-kontakt{display: block;}
	.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {background-color: transparent;}
	.dropdown-item {font-size:  1vw; padding-right: 35px;}
	#mainmenu-nav {margin: -20px -30px 0 0;}
}

@media( min-width: 1200px ) {	
	#logo{width: 25%;}
	#header{width: 75%; display: inline-block;}
	#navigation{width: 100%;}
	#header-kontakt{display: block;}
}

@media( max-width: 1200px ) {
	#header-kontakt div div ul {
		padding-right: 0.5%;	
	}
}

/* Microsoft Edge */

_:-ms-lang(x),
_:-webkit-full-screen,
#header-kontakt {
	/* background-color: green !important; */
}

/* spinner */

.spinner-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #173554;   /* ff6347; */
	z-index: 999999;
}

.spinner {
	width: 40px;
	height: 40px;
	background-color: #fff;   /* #333; */

	/* margin: 100px auto; */
	position: absolute;
	top: 48%;
	left: 48%;
	-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
	animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {
	0% { -webkit-transform: perspective(120px) }
	50% { -webkit-transform: perspective(120px) rotateY(180deg) }
	100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes sk-rotateplane {
	0% { 
	transform: perspective(120px) rotateX(0deg) rotateY(0deg);
	-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
	} 50% { 
	transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
	-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
	} 100% { 
	transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
	-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
	}
}

.sk-fading-circle {
	margin: 100px auto;
	width: 40px;
	height: 40px;
	position: absolute;
	top: 35%;
	left: 48%;
}

.sk-fading-circle .sk-circle {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

.sk-fading-circle .sk-circle:before {
	content: '';
	display: block;
	margin: 0 auto;
	vertical-align: center;
	width: 15%;
	height: 15%;
	background-color: #fff;   /* #333; */
	border-radius: 100%;
	-webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
		  animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
}
.sk-fading-circle .sk-circle2 {
	-webkit-transform: rotate(30deg);
	  -ms-transform: rotate(30deg);
		  transform: rotate(30deg);
}
.sk-fading-circle .sk-circle3 {
	-webkit-transform: rotate(60deg);
	  -ms-transform: rotate(60deg);
		  transform: rotate(60deg);
}
.sk-fading-circle .sk-circle4 {
	-webkit-transform: rotate(90deg);
	  -ms-transform: rotate(90deg);
		  transform: rotate(90deg);
}
.sk-fading-circle .sk-circle5 {
	-webkit-transform: rotate(120deg);
	  -ms-transform: rotate(120deg);
		  transform: rotate(120deg);
}
.sk-fading-circle .sk-circle6 {
	-webkit-transform: rotate(150deg);
	  -ms-transform: rotate(150deg);
		  transform: rotate(150deg);
}
.sk-fading-circle .sk-circle7 {
	-webkit-transform: rotate(180deg);
	  -ms-transform: rotate(180deg);
		  transform: rotate(180deg);
}
.sk-fading-circle .sk-circle8 {
	-webkit-transform: rotate(210deg);
	  -ms-transform: rotate(210deg);
		  transform: rotate(210deg);
}
.sk-fading-circle .sk-circle9 {
	-webkit-transform: rotate(240deg);
	  -ms-transform: rotate(240deg);
		  transform: rotate(240deg);
}
.sk-fading-circle .sk-circle10 {
	-webkit-transform: rotate(270deg);
	  -ms-transform: rotate(270deg);
		  transform: rotate(270deg);
}
.sk-fading-circle .sk-circle11 {
	-webkit-transform: rotate(300deg);
	  -ms-transform: rotate(300deg);
		  transform: rotate(300deg); 
}
.sk-fading-circle .sk-circle12 {
	-webkit-transform: rotate(330deg);
	  -ms-transform: rotate(330deg);
		  transform: rotate(330deg); 
}
.sk-fading-circle .sk-circle2:before {
	-webkit-animation-delay: -1.1s;
		  animation-delay: -1.1s; 
}
.sk-fading-circle .sk-circle3:before {
	-webkit-animation-delay: -1s;
		  animation-delay: -1s; 
}
.sk-fading-circle .sk-circle4:before {
	-webkit-animation-delay: -0.9s;
		  animation-delay: -0.9s; 
}
.sk-fading-circle .sk-circle5:before {
	-webkit-animation-delay: -0.8s;
		  animation-delay: -0.8s; 
}
.sk-fading-circle .sk-circle6:before {
	-webkit-animation-delay: -0.7s;
		  animation-delay: -0.7s; 
}
.sk-fading-circle .sk-circle7:before {
	-webkit-animation-delay: -0.6s;
		  animation-delay: -0.6s; 
}
.sk-fading-circle .sk-circle8:before {
	-webkit-animation-delay: -0.5s;
		  animation-delay: -0.5s; 
}
.sk-fading-circle .sk-circle9:before {
	-webkit-animation-delay: -0.4s;
		  animation-delay: -0.4s;
}
.sk-fading-circle .sk-circle10:before {
	-webkit-animation-delay: -0.3s;
		  animation-delay: -0.3s;
}
.sk-fading-circle .sk-circle11:before {
	-webkit-animation-delay: -0.2s;
		  animation-delay: -0.2s;
}
.sk-fading-circle .sk-circle12:before {
	-webkit-animation-delay: -0.1s;
		  animation-delay: -0.1s;
}

@-webkit-keyframes sk-circleFadeDelay {
	0%, 39%, 100% { opacity: 0; }
	40% { opacity: 1; }
}

@keyframes sk-circleFadeDelay {
	0%, 39%, 100% { opacity: 0; }
	40% { opacity: 1; } 
}