/*
## color logo blue dark  #003f63
## color logo blue light #00a9c6
*/
@import url('https://fonts.googleapis.com/css?family=Roboto:300')
@import url('https://fonts.googleapis.com/css?family=Nunito:300');
html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline;}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;}

body {
	margin: 0;
}

#wrapper {
	overflow: hidden;
}

a:hover {
	cursor: pointer;
}

 h1, h2, h3, li,form, input, textarea,
button, div {
	font-family: 'Nunito', sans-serif;
}

p, h1, h2, a, button{	
	color: #000;
	color: rgba(0,0,0,0.87);
	line-height: 1.2;
}

a{
	text-decoration: none;
	font-weight: 300;
}

p,a {
	font-weight: 300;
	font-size: 1rem;
	color: #003f63;
	letter-spacing: -0.025em;

}

h1 {
	color: #00a9c6;
	font-weight: 300;
	font-size: 2rem;
	letter-spacing: -0.025em;
}

h2 {
	font-weight: 300;
	color: #00a9c6;
	font-size: 1.5rem;
	letter-spacing: -0.025em;
}


h3 {
	font-weight: 300;
	color: #00a9c6;
	font-size: 1.2rem;
	letter-spacing: -0.025em;
	margin-top: 1rem;
}


ol, ul {
	list-style: none;
}

* {
	box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

b {
	font-weight: bold;
}

.displayNone {
	display: none !important;
}

.darkfont {
	margin-top: 6rem;
	color: #303030;
	font-size: 2.5rem;
}

#header {
	height: 55vh;
	width: 100vw;
	position: relative;
	display: flex;
	flex-direction: column;
}

#headerLogo {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	margin-bottom: 1.4rem;
	margin-top: .2rem;
}

#headerImgIcon {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	opacity: .25; 
	background: url(../img/logo_icon.png) no-repeat 3rem 3rem / 38vh;
}

#headerContact {
	height: 68px;
	z-index: 99999;
	display: flex;
	flex-direction: row;
	padding-top: 1rem;
	padding-right: 2rem;
	width: 100vw;
	justify-content: flex-end;
	align-items: flex-start;
	background: linear-gradient(rgba(255,255,255,.9)10%,rgba(255,255,255,.75));
}

#headerContact h1,
#mobilehead h1 {
	color: rgba(0,0,0,.5);
	font-size: 1.1rem;
	margin-bottom: .3rem;
	opacity: 1 !important;
}

#headerContact h2,
#mobilehead h2 {
	color: #00CCCC;
	font-weight: 300;
	font-size: .9rem;
	line-height: 1;
	opacity: 1 !important;
}

.text h1{
	color: #00CCCC !important;
}
#headerContact .contactItem {
	text-align: right;
	display: flex;
	flex-direction: column;
	position: relative;
	padding-left: 2rem;
	min-width: 170px;
}


#headerContact .callmodel {
	height: 100%;
	border-radius: 100%;
	margin-left: 1em;
}

#nav {
	z-index: 999;
	margin-left: 6rem;
}

#navLogo {
	margin-left: 6rem;
	margin-top: 1rem;
	width: 200px;	
}

#mobilehead {
	display: none;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100vw;
	background: linear-gradient(45deg,rgba(255,255,255,.85)66%,
							rgba(255,255,255,.75)66%);
	height: auto;
	padding: 2rem 2rem 4rem 2rem;
}

#mobilehead.line {
	margin: 0;
	width: 100%;
	height: 54px;
	background: ;
}


#mobilehead .callmodel {
	width: 75px;
	height: 75px;
	border-radius: 100%;
	margin-left: 2rem;
	opacity: .9;
	align-self: flex-end;
}

#mobilehead .mh-logo {
  max-width: 100%;
  width: 250px;
  height: auto;
  margin-bottom: 1rem;
}

#MobilContact {
	display: flex;
	flex-direction: row;
	margin-right: 1.3rem;
}

#MobilContact .mail h2{
	margin-bottom: 0;
}

main {
	width: 100vw;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

section {
	width: 100vw;
	display: flex;
	flex-direction: row;
}

h1 {
	line-height: 1.1;
	font-weight: 300;
	font-size: 2.5rem;
	margin-bottom: 1.5rem;
	opacity: .7;
	font-family: 'Roboto', sans-serif;
}

h2 {
	line-height: 1.1;
	font-weight: 300;
	font-size: 1.8rem;
	margin-bottom: 1.5rem;
	opacity: .7;
	font-family: 'Roboto', sans-serif;
}

p, li {
	line-height: 1.7;
	font-size: 1.1rem;
	opacity: .7;
}

.spacer {
	margin-top: 2rem;
}

.textbox {
	padding: 4rem 6rem;
}

#intro{
	padding: 4rem 6rem 6rem 6rem;
}

#intro h2 {
	margin-top: 3rem;
}

#intro p {
	margin-top: 1rem;
}

#introRight{
}

#introRight img {
	width: 100%;
	height: auto;
}


#partner {
	background: #303030;
}

#partner p {
	color: #fff;
}

#Leistung {
	display: flex;
	flex-direction: column;
	min-height: 300px;
}

.leistungCard {
	display: flex;
	flex-direction: row;
}

.LeistungText {
	height: 100%;
	padding: 1.5rem 6rem;
	background: #ECECED;
}

.LeistungText h1 {
	margin-bottom: 0rem;
}

.LeistungImage{
	background: #ECECED;
}

.LeistungImage img{
	max-width: 100%;
	opacity: .9;
	height: auto;
}

#LeistungConst {
	flex-direction: column;
}

#LeistungConst .LeistungImage {
	background: url(../img/head7.jpg) center bottom / cover;
	min-height: 600px;
}

#cleanImg{
	background: url(../img/head8.jpg) center bottom / cover !important;
}
#LeistungClean .textbox{
	background: #ECECED;
	min-width: 50%;
}

#LeistungClean .LeistungText {
	padding: 4rem 6rem;
} 

#LeistungClean .LeistungImage {
	background: rgb(0, 204, 204);
} 

#LeistungClean .LeistungImage img {
	opacity: 1;
} 

#LeistungClean button {
	border: 1px solid #00CCCC;
	border-radius: 3px;
	/*background: linear-gradient(45deg, #00a9c6 100%,#003f63 50%);*/
	color: #003366;
	background: #fff;
	text-decoration: none;
	cursor: pointer;
	text-align: center;
	display: block;
	padding: 1rem;
	transition: all 0.5s;
	margin-top: 2rem;
}

#LeistungClean button:hover {
		background: #00CCCC;
		color: #fff;
}

#LeistungCleanMore {
	background: #00CCCC;
	padding-bottom: 1rem;
}

#LeistungCleanMore h2 {
	color: #202020;
}

#LeistungCleanMore ul{
	list-style:  none;
}


#LeistungCleanMore ul li {
	font-size: 1.3rem;
	color: #003366;
}

#LeistungCleanMore ul li:before {
	content: '\2713';
	margin-right: 10px;
	color: yellow;
}

#LeistungCleanMore img {
	width: 230px;
	height: auto;
	margin-bottom: 1rem;
}

.logoboxwrap{
	display: flex;
}

.logobox {
	display: flex;
	align-items: center;
	flex-direction: column;
	padding: 1rem 4rem;
}

.logobox a {
	font-size: .9rem;
}

#LeistungGarden h1 {
	color: rgba(50,214,89,.9);
	font-size: 1.4rem;
}

#LeistungService h1 {
	color: rgba(204,204,0,9);
	font-size: 1.4rem;
}

#LeistungConst h1{
	color: rgba(0,0,0,9);
	font-size: 1.4rem;
}



#LeistungSonst ul{
	list-style: disc inside;
	margin: 1rem 0;
}

#LeistungSonst ul li {
	padding: .25rem;
	color: #003366;
	opacity: 1;
}

#LeistungSonst p {
	color: #000;
}

#LeistungSonst h2 {
	margin-bottom: 1rem;
}

#leistungUL {
	list-style: disc !important;
}

#introLeft ul {
	list-style: disc;
	margin-left:  1.2rem;
	/*list-style-position: ;*/
}

footer {
	width: 100vw;
	display: flex;
	flex-direction: column;
	padding: 6rem;
	background: linear-gradient(-22deg, #d4d4d5 46%,#ECECED 46%,#ECECED 66%,#00CCCC 66%);
}

footer h1 {
	color: #000;
}

footer p {
	color: #000;
}

footer form{
	margin: 4rem 0rem;
	/*visibility: hidden;*/
}

footer .maillink {
	color: #000;
	font-weight: bold;
	transition: color .3s;
}

footer .maillink:hover {
	color: #ccc;
}

.thicc p{
	font-weight: bold;
}

footer form input,textarea,form button{
	display: block;
	width: 100%;
	border: 1px solid #000;
	border-radius: 3px;
	background: transparent;
	color: #000;
	margin-top: 1rem;
	padding: 1rem;
	transition: border-color .5s ease-out;
}

footer form input[type="checkbox"] {
	width: auto !important;
	margin-right: 1rem;
}

#formtext{
	font-size: .8rem !important;
}

/*input:valid,
textarea:valid {
	border-color: green;
}


input:invalid:focus,
textarea:invalid:focus {
	border-color: red;
}
*/

.checkbox {
	margin-top: 1rem;
	display: flex;
	align-items: baseline;
}

#response{
	margin-top: 1rem;
}
.responseSuccess{
	color:green;
}
.responseError{
	color: red;
}

#adress {
	margin-top: 4rem;
}

#adress a p{
	color: #00a9c6;
}

#adress a p:hover{
	color: #003f63;
}
.blue {
	color: #00a9c6;	
}

footer form input::placeholder,textarea::placeholder {
  color: #000;
  opacity: 1;
}

.g-recaptcha {
	margin-top: 1rem;
}

footer table tr td{
		padding: .7rem 4.5rem 0 0;
}

footer{position: 	relative;	}

#footerImgIcon {
	position: absolute;
	bottom: 6rem;
	right: 6rem;
	height: 300px;
	width: 100%;
	z-index: -0;
	opacity: .09; 
	background: url(../img/logo_icon.png) no-repeat bottom	right	 / auto 300px;
}


.boxXS {
	width: 25%;
}

.boxS {
	width: 33%;
}

.boxM {
	width: 50%;
}

.boxL {
	width: 67%;
}

.boxLS {
	width: 75%;
}

.boxXL {
	width: 100%;
}
@media screen and (max-width: 780px) {
	#nav {
		display: none !important;
	}

	#header {
		height: 90vh;
	}

	#headerImgIcon {
		height: 90vh;
		background: url(../img/logo_icon.png) no-repeat 2rem 4rem / 35vh !important;
	}

	#headerImgFilter {
		background: linear-gradient(
									130deg,
									rgba(255, 255, 255,.7)0%,
									rgba(255, 255, 255,.3)22%,
									rgba(0, 169, 201,.1)35%,
									rgba(0, 51, 102,.25)85%);
	}

	#headerLogo {
		display: none;
	}
	#mobilehead {display: block;}

	.text h1{
		color: #003f63 !important;
		padding-bottom: 1rem;
	}
}
@media screen and (min-width: 930px) {
	#LeistungClean .textbox{
		max-width: 65%;
	}
}

@media screen and (min-width: 1200px) {
	#header {
		height: 60vh;
	}
	#headerImgIcon {
		background: url(../img/logo_icon.png) no-repeat 3rem 3rem / 40vh;
	}
}
@media screen and (min-width: 1300px) {
	#header {
		height: 63vh;
	}
	#headerImgIcon {
		background: url(../img/logo_icon.png) no-repeat 3rem 3rem / 43vh;
	}
}
@media screen and (min-width: 1400px) {
	#header {
		height: 66vh;
	}
	#headerImgIcon {
		background: url(../img/logo_icon.png) no-repeat 3rem 3rem / 46vh;
	}
}
@media screen and (min-width: 1500px) {
	#header {
		height: 69vh;
	}
	#headerImgIcon {
		background: url(../img/logo_icon.png) no-repeat 3rem 3rem / 49vh;
	}
}
@media screen and (min-width: 1600px) {
	#header {
		height: 72vh;
	}
	#headerImgIcon {
		background: url(../img/logo_icon.png) no-repeat 3rem 3rem / 52vh;
	}
}



@media screen and (max-width: 930px) {
	.boxM {
		width: 100%;
	}
	.boxL {
		width: 100%;
	}
	.boxLS {
		width: 100%;
	}


	#headerContact .contactItem {
	padding-left: 1.5rem;

	}

	#nav {
		display: block;
		margin-left: 2rem;
	}

	#navLogo {
		margin-left: 2rem;
		margin-top: 1rem;
		width: 200px;	
	}

	#headerImgIcon {
		background: url(../img/logo_icon.png) no-repeat 3rem 3rem / 40vh;
	}

	.leistungCard {
		flex-direction: column;
	}

	.textbox {
		padding: 4rem 2rem;
	}

	.textboxlogo {
		padding: 0 !important;
		margin-top: -2rem;
	}

	.logobox {
		align-items: center;
		padding: 1rem 0 2rem 4rem;
	}


	#intro{
		padding: 4rem 2rem 6rem 2rem;
		width: 100vw;
	}

	footer {
		padding: 4rem 2rem 6rem 2rem;
		background: linear-gradient(-22deg, #d4d4d5 52%,#ECECED 52%,#ECECED 66%,#00CCCC 66%);
	}

	footer form{
		margin-bottom: 2rem;
	}

	.LeistungText {
		padding: 1.5rem 2rem;
	}

	#LeistungConst .LeistungImage {
		min-height: 400px;
	}

	#LeistungClean .LeistungText {
		padding: 4rem 2rem;
	} 

}
@media screen and (max-width: 400px) {
	h1 {
		font-size: 1.6rem;
	}
	h2 {
		font-size: 1.4rem;
	}
	p,ul,li,a{
		font-size: 1rem !important;
	}
}