@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');


* {
	margin: 0;
	padding: 0;
}
.clear {
clear:both;
}
html,body {
	height:100%;
}
html {
	overflow-y:scroll;
}
body {
	background: #fff;
	color: #000;
	word-wrap:break-word !important;
	font-family: 'Roboto', sans-serif;
	}

h1 {
	font-size: 2.0em;
	font-family:  'Roboto', sans-serif;
}	

h3 {
	font-size: 1.3em;
	line-height: 1.5em;
}
h3 a {
	color: #000;
}
a { 
	color:rgb(51,51,51);
}
a:hover { 
	color:rgb(255,204,51) 
}
header {
	position:fixed;
}
#topline {
	background-color:#FC0;
	padding: 10 0 10 0;
	font-family: 'Roboto', sans-serif;
	height:2.5em;
    top: 0px;
	z-index: 45;
}
#tline {
	margin-right: 5%;
	text-align:right;
	padding-top: 10px;
	padding-bottom: 10px;
	}
#topline a {
	font-size:small;
	text-decoration:none;
	color:#fff;
	padding:10;
	margin-top:2.0em;
	margin-right:1.0em;
}
ion-icon {
	vertical-align:baseline;
	font-size:large;
	margin-right:0.2em;
	}

#container {
	margin: 0 auto;
	max-width: 890px;
}

p {
	font-family: 'Roboto:300', sans-serif;
}

.toggle,
[id^=drop] {
	display: none;
}
.topbar { 
	width:100%;
	}
.kapitel {
	display:inline-block; 
	background-color:rgb(235,235,235);
	width:100%;
	z-index:45px;
}
.kapitel h1 {
	line-height: 2.0em;
	margin-left: 7%;
	color:rgb(102,102,102);
	float:left;
	font-size: 1.4em;
}
.kapitel h3 {
	line-height: 3.0em;	
	float:right;
	color:rgb(102,102,102);
	margin-right:5%;
	font-weight:lighter;
	font-size:medium;
}
/* Giving a background-color to the nav container. */
nav { 
	margin:0;
	padding: 0;
	background-color: #f8f8f8;
	z-index:45;
	width:100%;
}

#logo {
	display: block;
	padding: 0px 30px;
	float: left;
	margin-left: 5%; 
	margin-right: 2.0em;
	margin-top: 0.6em;
	margin-bottom:0.5em;
}
#logo a, a:hover {
	opacity:0.9:
	}
/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */

nav:after {
	content:"";
	display:table;
	clear:both;
}

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */
nav ul {
	float:left;
	padding:0;
	list-style: none;
	position: relative;
	top: 1.0em;
	}
	
/* Positioning the navigation items inline */
nav ul li {
	margin: 0px;
	display:inline-block;
	float: left;
	background-color: #f8f8f8;
	list-style-type:none;
	}

/* Styling the links */
nav a {
	display:block;
	padding: 0.5em 20px;	
	color:#999;
	font-size:medium;
	text-decoration:none;
	}

nav ul li ul li:hover {
	color:rgb(255,255,255);
	background: #FFCC33; }

/* Background color change on Hover */
nav a:hover { 
	background-color: #FFCC33;
	color:rgb(255,255,255);
 
}

/* Hide Dropdowns by Default
 * and giving it a position of absolute */
nav ul ul {
	display: none;
	position: absolute; 
	/* has to be the same number as the "line-height" of "nav a" */
	top: 40px; 
}
	
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
	display:inherit;
}
	
/* Fisrt Tier Dropdown */
nav ul ul li {
	width:270px;
	float:none;
	display:list-item;
	position: relative;
}

/* Second, Third and more Tiers	
 * We move the 2nd and 3rd etc tier dropdowns to the left
 * by the amount of the width of the first tier.
*/
nav ul ul ul li {
	position: relative;
	top:-60px;
	/* has to be the same number as the "width" of "nav ul ul li" */ 
	left:170px; 
}

	
/* Change ' +' in order to change the Dropdown symbol */
li > a:after { content:  ' +'; }
li > a:only-child:after { content: ''; }

/* Inhaltsbereich ---------------------------------------------------------------- */
/*.subnav {
	display:block;
	float:right;
	margin-right:0%;
	margin-top:-4px;
	width:16%;
}
.subnav a {
	display:block;
	line-height:1.6em;
	background-color:rgb(0,0,51);
	color:rgb(255,255,255);
	text-decoration:none;
	padding: 10px 10px;
}
.subnav a:hover {
	display:block;
	line-height:1.6em;
	background-color: rgb(255,204,51);
	color:rgb(255,255,255);
	text-decoration:none;
	padding: 10px 10px;
}
*/
.canvas {
	display:inline-block;
	width:80%;
	margin-left:10%;
}
.center {
	display:inline-block;
	width:60%;
	margin-left:20%;
	margin-bottom:100px;
	text-align:center;
	margin-top:30px;
}
.center img {
	}
.center h1 {
	color:rgb(102,102,102);
	line-height:1.5em;
	font-size:2.5em;
	margin-bottom:1.0em;
	font-weight:lighter;
	}
.center h2 {
	color:rgb(102,102,102);
	line-height:1.5em;
	font-size:2.5em;
	margin-bottom:1.0em;
	font-weight:lighter;
	}
.center h3 {
	color:rgb(255,204,51);
	line-height: 2.0em;
	padding:0.5em;
}
.center p {
	font-family: 'Roboto', sans-serif;
	font-weight:lighter;
	line-height:2.0em;
	text-align:center;
	color:rgb(143,143,143);
	margin-bottom:50px;
}
.left {
	display:inline-block;
	max-width:900px;
	margin-left:23%;
	text-align:left;
	}
	
.left h2 {
	color:rgb(102,102,102);
	line-height:2.0em;
	font-size:2.5em;
	margin-bottom:1.0em;
	font-weight:medium;
	}
.left h3 {
	color:rgb(102,102,102);
	line-height: 2.0em;
	margin-top: 2.0em;
	margin-bottom:1.0em;
}
.left h4 {
	color:rgb(102,102,102);
	line-height: 1.2em;
	margin-top: 1.4em;
	margin-bottom:1.0em;
}
.left h5 {
	color:rgb(102,102,102);
	line-height: 1.0em;
	margin-top: 1.2em;
	margin-bottom:1.0em;
}
.left p {
	font-family: 'Roboto', sans-serif;
	font-weight:lighter;
	line-height:1.4em;
	color:rgb(143,143,143);
}
.left strong {
	color:rgb(102,102,102);
}
.left ul,li {
	font-family: 'Roboto', sans-serif;
	font-weight:lighter;
	line-height:1.5em;
	list-style-position:inside;
	color:rgb(143,143,143);
	margin-bottom:0.5em;
}
.left a {
	color:rgb(0,0,51);
}
.left a:hover {
	color:
}
.right {
	display:inline-block;
	float:right;
	font-family: 'Roboto', sans-serif;
	font-weight:lighter;
	line-height:1.4em;
	color:rgb(143,143,143);
	}
.triple {
	display:block;
	width:29%;
	margin-top:4.0empx;
	text-align:center;
	border:thin rgb(204,204,204) solid;
	padding:1.0em;
	float:left;
}
.triple img {
	margin-top: 1.5em;
	margin-bottom: 1.5em;
	border:none;
	text-align:center;
}
.triple h3 {
	color:rgb(102,102,102);
	line-height: 2.0em;
	padding:0.5em;
}
.article { 
	width:100%;
	display:inline-block;
	text-align:left;
	margin-bottom:2.0em;
	border:solid rgb(255,255,255);
	border-bottom:rgb(102,102,102) dashed thin;
}
.article h2 {
	margin-bottom:1.0em;
	margin-top:1.0em;
	font-size:2.0em;
	font-weight:bold;
	color:rgb(255,204,51);
}
.article img {
	float:left;
	width: 30%;
	height:auto;
	margin-right: 2.0em;
	margin-bottom: 20%;
}
.article p {
	width: 100%;
	text-align:justify;
	line-height: 1.8em;
	margin-bottom: 2em;
	}
.list ul,li {
	list-style:inside;
	text-align:left;
	line-height:1.8em;
	margin-bottom:0.8em;
}
#button a {
	display:block;
	background-color:rgb(255,204,51);
	line-height:3.0em;
	color:rgb(255,255,255);
	text-decoration:none;
	padding:0.2em;
	margin: 0.5em;
	}
#button a:hover {
	background-color:rgb(102,102,102);
}

.form {
	font-family: 'Roboto', sans-serif;
	font-weight:lighter;
	line-height:1.8em;
	color: rgb(102,102,102);
	margin-bottom:100px;
}
form-group {
	padding: 0.5em;
	margin-bottom: 20px;
	}
.cbox {
	font-size: small;
	color: rgb(51,51,51);
	width: 50%;
}
.formlabel {
	margin-top: 0.3em;
	line-height: 1.2em;
	size:80;
	min-width: 400px;;
	height: 2.0em;
	padding:0.1em;
	margin-bottom: 10px;
}
textarea {
	min-width: 400px;
}
.alert alert-success {
 	font-family: 'Roboto', sans-serif;
	font-weight:bold;
	line-height:1.8em;}
.submit {
	font-family: 'Roboto', sans-serif;
	font-weight:bold;
	line-height:1.8em;
	display:block;
	background-color:rgb(255,204,51);
	line-height:3.0em;
	color: rgb(255,255,255);
	text-decoration: none;
	padding: 0.4em 2.0em;
	margin-bottom: 5.0em;
	border:none;
	}
.submit:hover {
	background-color:rgb(102,102,102);
}

.button2 {
	display:inline-block;
	background-color:rgb(255,204,51);
	line-height:3.0em;
	color:rgb(255,255,255);
	text-decoration:none;
	padding: 0.4em 2.2em; 
	margin-top: 2.0em;
	margin-bottom: 5.0em;
	border:none;
	text-align:center;
}
.button2:hover {
	background-color:rgb(102,102,102);
}

.buttontop {
	color: rgb(255,204,51);
	line-height:3.0em;
	text-decoration:none;
	float:right;
}
.buttontop:hover {
	color:rgb(102,102,102);
}
#arrow-dropup-circle {
	font-size: 2.5em;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.column {
  float: left;
  width: 31%;
  margin-bottom: 10px;
  padding: 0 8px;
}
.column p {
  line-height:1.2em;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.container {
  padding: 0 16px;
  height:350px;
}

.container::after, .row::after {
  content: "";
  clear: both;
  display: table;
}
.title {
  color: grey;
  line-height:1.0em;
}

.distance {
	width:100%;
	height: 70px;
}
.distancesmall {
	width:100%;
	height: 10px;
}

.gallery img {
	width:21%;
	height:auto;
	float:left;
	margin-top:0;
	}
.gallery p {
	}
/* The hero image */
.hero-image {
  /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../img/industry-839254_1920.jpg");

  /* Set a specific height */
  height: 45%;

  /* Position and center the image to scale nicely on all screens */
  background-position: 0% 65%;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top:-4px;
}

/* Place text in the middle of the image */
.hero-text {
  text-align: center;
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}
/* topimages */
.gruenpflege {
	background-image:url(../img/nagesh-badu-690393-unsplash.jpg);
	background-position: 0% 65%;
  	background-repeat: no-repeat;
  	background-size: cover;
	height: 45%;
	width:100%;
  	margin-top:-4px;
	}
.reinigungsarbeiten {
	background-image:url(../img/adli-wahid-1200844-unsplash.jpg);
	background-position: 0% 95%;
  	background-repeat: no-repeat;
  	background-size: cover;
	height: 45%;
	width:100%;
  	margin-top:-4px;
	}
.sportanlagen {
	background-image:url(../img/wolfgang-rottmann-1535856-unsplash.jpg);
	background-position: 0% 45%;
  	background-repeat: no-repeat;
  	background-size: cover;
	height: 45%;
	width:100%;
  	margin-top:-25px;
}
.haustechnik {
	background-image:url(../img/jesse-orrico-L94dWXNKwrY-unsplash.jpg);
	background-position: 0% 45%;
  	background-repeat: no-repeat;
  	background-size: cover;
	height: 45%;
	width:100%;
  	margin-top:-45px;
}
.muellentsorgung {
	background-image:url(../img/jilbert-ebrahimi-691926-unsplash.jpg);
	background-position: 0% 95%;
  	background-repeat: no-repeat;
  	background-size: cover;
	height: 55%;
	width:100%;
  	margin-top:-4px;
}
.reparaturdienste {
	background-image:url(../img/markus-spiske-344594-unsplash.jpg);
	/* ../img/brina-blum-1277589-unsplash.jpg */
	background-position: 0% 100%;
  	background-repeat: no-repeat;
  	background-size: cover;
	height: 40%;
	width:100%;
  	margin-top:-4px;
}
.bezirksleiter {
	background-image:url(../img/ronaldo-santos-625842-unsplash.jpg);
	background-position: 0% 45%;
  	background-repeat: no-repeat;
  	background-size: cover;
	height: 55%;
	width:100%;
  	margin-top:-4px;
}
.notdienst {
	background-image:url(../img/lucas-law-746420-unsplash.jpg);
	background-position: 0% 50%;
  	background-repeat: no-repeat;
  	background-size: cover;
	height: 45%;
	width:100%;
  	margin-top:-4px;
}
.schliessdienst {
	background-image:url(../img/oliver-ulerich-1098851-unsplash.jpg);
	background-position: 0% 15%;
  	background-repeat: no-repeat;
  	background-size:cover;
	height: 55%;
	width:100%;
  	margin-top:-4px;
}
.heizungsanlage {
	background-image:url(../img/jacek-dylag-522990-unsplash.jpg);
	background-position: 0% 60%;
  	background-repeat: no-repeat;
  	background-size:cover;
	height: 45%;
	width:100%;
  	margin-top:-4px;
}
.waschautomaten {
	background-image:url(../img/jeremy-sallee-1235004-unsplash.jpg);
	background-position: 0% 90%;
  	background-repeat: no-repeat;
  	background-size:cover;
	height: 45%;
	width:100%;
  	margin-top:-4px;
}
.tiefgarage {
	background-image:url(../img/rokas-niparavicius-751193-unsplash.jpg);
	background-position: 0% 45%;
  	background-repeat: no-repeat;
  	background-size:cover;
	height: 45%;
	width:100%;
  	margin-top:-4px;
}
.winterdienst {
	background-image:url(../img/franz-roos-540560-unsplash.jpg);
	background-position: 0% 80%;
  	background-repeat: no-repeat;
  	background-size:cover;
	height: 45%;
	width: 100%;
  	margin-top:-24px;
}
.schutzbeschichtung {
	background-image:url(../img/beschichtung09.jpg);
	background-position: 0% 70%;
  	background-repeat: no-repeat;
  	background-size:cover;
	height: 45%;
	width:100%;
  	margin-top:-4px;
}
.gehwegreinigung {
	background-image:url(../img/brina-blum-1413327-unsplash.jpg);
	background-position: 0% 60%;
  	background-repeat: no-repeat;
  	background-size:cover;
	height: 45%;
	width:100%;
  	margin-top:-4px;
}

/* topimages ende */

/* -------------------------------------------------------------------------------- */
/* Foooter */
footer {
	display:block;
	background-color:rgb(0,0,0);
	padding:20px;
	color:rgb(255,255,255);	
}
.fline {
	margin-left:5%;
	font-size:small;
}
.fline a {
	font-size:small;
	color:rgb(255,255,255);
	text-decoration:none;
}
.fline a:hover {
	color:#FC0;	
}
.fcolumnbg {
	background-color:#003;
	min-height:400px;
}
.fcolumn {
	margin-left:5%;
 	color:rgb(255,255,255);
	font-size:medium;	
	padding: 25px;
}
.fcolumn a {
	line-height:1.5em;
	font-size:1.0em;
 	color: rgb(255,255,255);
	text-decoration:none;
}
.fcolumn a:hover {
 	color: rgb(255,204,51);
}



/* Media Queries
--------------------------------------------- */

@media all and (max-width : 768px) {
	
	#topline {
		background-color:#FC0;
		padding: 10 0 10 0;
		font-family: 'Roboto', sans-serif;
		height:2.5em;
		position: sticky;
 	  	top: 20;
		z-index: 0;
		display:none;
}
	#tline {
		margin-right: 15%;
		text-align:right;
		padding-top: 10px;
		padding-bottom: 10px;
		display:none;
}
	#topline a {
		font-size:small;
		text-decoration:none;
		color:#fff;
		padding:10;
		margin-top:2.0em;
		display:none;
}
	ion-icon {
		vertical-align:baseline;
		font-size:large;
		margin-right:0.2em;
}
	#logo {
		display: block; 
		padding-top: 0.5em;
		width: 100%;
		text-align: center;
		float: none;
		margin-left: 0; 
		margin-right: 0;
		margin-top:0;
	}
	.sticky {
  		position: fixed;
  		top: 0;
  		width: 100%;
		margin-bottom:50px;
}
	nav {
		margin: 0;
		width: 100%;
		z-index:25;
	}
	nav ul {
		float:right;
		padding:0;
		list-style: none;
		position: relative;
		top: 0.7em;
	}
	/* Hide the navigation menu by default */
	/* Also hide the  */
	.toggle + a,
	.menu {
		display: none;
	}
	/* Stylinf the toggle lable */
	.toggle {
		display: block;
		background-color: #f8f8f8;
		padding:14px 20px;	
		color:#666;
		font-size:1em;
		text-decoration:none;
		border:none;
	}
	.toggle:hover {
		background-color: #FFCC33;
	}

	/* Display Dropdown when clicked on Parent Lable */
	[id^=drop]:checked + ul {
		display: block;
	}

	/* Change menu item's width to 100% */
	nav ul li {
		display: block;
		width: 100%;
		list-style-type:none;
		}

	nav ul ul .toggle,
	nav ul ul a {
		padding: 0 40px;
	}

	nav ul ul ul a {
		padding: 0 80px;
	}

	nav a:hover,
 	nav ul ul ul a {
		background-color: #FFCC33;
		color:#333;
		width:100%;
	}
  
	nav ul li ul li .toggle,
	nav ul ul a,
  	nav ul ul ul a{
		padding:10px 15px;	
		color:#fff;
		font-size:1.0em; 
	}
	nav ul li ul li .toggle,
	nav ul ul a {
		background-color: #0c0f70; 
	}

	/* Hide Dropdowns by Default */
nav ul ul {
		float: none;
		position:static;
		color: #fff;
		/* has to be the same number as the "line-height" of "nav a" */
	}
		
	/* Hide menus on hover */
nav ul ul li:hover > ul,
nav ul li:hover > ul {
		display: none;
	}
		
	/* Fisrt Tier Dropdown */
nav ul ul li {
		display: block;
		width: 100%;
	}

nav ul ul ul li {
		position: static;
		/* has to be the same number as the "width" of "nav ul ul li" */ 
}
/* Inhalt mobile */
.canvas {
	display:inline-block;
	width:80%;
	margin-left:10%;
	margin-top: 25px;
	z-index:1;
}
.kapitel {
	display:inline-block; 
	background-color:rgb(235,235,235);
	width:100%;
}
.kapitel h1 {
	line-height: 2.4em;
	margin-left: 7%;
	color:rgb(102,102,102);
	font-size:larger;
}
.kapitel h3 {
	line-height: 4.0em;	
	color:rgb(102,102,102);
	margin-right:5%;
	font-weight:lighter;
	display:none;
}
.center {
	display:inline-block;
	width:80%;
	margin-left:10%;
	margin-bottom:100px;
	text-align:center;
	margin-top:30px;
}
.center h2 {
	color:rgb(102,102,102);
	line-height:1.5em;
	font-size:1.6em;
	margin-bottom:1.0em;
	font-weight:lighter;
	}
.center h3 {
	color:rgb(255,204,51);
	line-height: 2.0em;
	padding:0.5em;
}
.center p {
	font-family: 'Roboto', sans-serif;
	font-weight:lighter;
	line-height:2.0em;
	text-align:center;
	color:rgb(143,143,143);
}

.left {
	display:inline-block;
	max-width:80%;
	min-width: 200px;
	margin-left:7%;
	}
	
.left h2 {
	color:rgb(102,102,102);
	line-height:2.2em;
	font-size:2.2em;
	margin-bottom:1.0em;
	font-weight:medium;
	}
.left h3 {
	color:rgb(102,102,102);
	line-height: 2.0em;
	margin-top: 2.0em;
	margin-bottom:1.0em;
}
.left h4 {
	color:rgb(102,102,102);
	line-height: 1.2em;
	margin-top: 1.4em;
	margin-bottom:1.0em;
}
.left h5 {
	color:rgb(102,102,102);
	line-height: 1.0em;
	margin-top: 1.2em;
	margin-bottom:1.0em;
}
.left p {
	font-family: 'Roboto', sans-serif;
	font-weight:lighter;
	line-height:1.4em;
	color:rgb(143,143,143);
	text-align:left;
}
.left strong {
	color:rgb(102,102,102);
}
.left ul,li {
	font-family: 'Roboto', sans-serif;
	font-weight:lighter;
	line-height:1.8em;
	list-style-position:inside;
	color:rgb(143,143,143);
	margin-bottom:0.5em;
}
.left a {
	color:rgb(0,0,51);
}
.left a:hover {
	color:
}
.right {
	display:inline-block;
	font-family: 'Roboto', sans-serif;
	font-weight:lighter;
	line-height:1.4em;
	color:rgb(143,143,143);
	}
.triple {
	display:block;
	width:90%;
	margin-top:4.0empx;
	text-align:center;
	border:thin rgb(204,204,204) solid;
	padding:1.5em;
	margin-bottom:2.0em;
}
.triple img {
	max-width:40%;
	border:none;
	text-align:center;
}
.triple h3 {
	color:rgb(102,102,102);
	line-height: 2.0em;
	padding:0.5em;
}
#button a {
	display:block;
	background-color:rgb(255,204,51);
	line-height:2.0em;
	color:rgb(255,255,255);
	text-decoration:none;
	padding:0.2em;
	margin: 0.5em;
	}
#button a:hover {
	background-color:rgb(102,102,102);
}

.article { 
	width: 100%;
	display:inline-block;
	text-align:center;
	margin-bottom:1.5em;
	border:solid rgb(255,255,255);
	border-bottom:rgb(102,102,102) dashed thin ;
}
.article h2 {
	margin-bottom:1.0em;
	margin-top:1.0em;
	font-size:1.5em;
}
.article img {
	width: 100%;
	height:auto;
	margin-right: 2.0em;
	margin-bottom: 20%;
}
.article p {
	width: 100%;
	text-align:justify;
	line-height: 1.8em;
	margin-bottom: 3.0em;
	}


/*  Formular Mobile */

.form {
	font-family: 'Roboto', sans-serif;
	font-weight:lighter;
	line-height:1.2em;
	color: rgb(102,102,102);
	margin-bottom:100px;
	width:95%;
}
.cbox {
	font-size: small;
	color: rgb(51,51,51);
	width: 90%;
}
.formlabel {
	margin-top: 0.3em;
	line-height: 1.2em;
	size:40;
	min-width:250px;
	height: 2.0em;
	padding:0.1em;
	}
.submit {
	display:block;
	background-color:rgb(255,204,51);
	line-height:3.0em;
	color:rgb(255,255,255);
	text-decoration:none;
	padding: 0.4em 2.0em;
	margin-bottom: 5.0em;
	border:none;
	}
.submit:hover {
	background-color:rgb(102,102,102);
}
.button2 {
	display:inline-block;
	background-color:rgb(255,204,51);
	line-height:2.0em;
	color:rgb(255,255,255);
	text-decoration:none;
	padding:0.4em 1.2em; 
	margin-top:0.5em;
	margin-bottom:0.1em;
	border:none;
	text-align:center;
}
.button2:hover {
	background-color:rgb(102,102,102);
}

.column {
    width: 100%;
    display: block;
	margin-bottom:3.0em;
  }
.card {
  	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.container {
	display:inline;
	padding: 0 16px;
  
}

.container::after, .row::after {
  content: "";
  clear: both;
  display: table;
}

.title {
  color: grey;
}
.distance {
	width:100%;
	height: 70px;
}
.distancesmall {
	width:100%;
	height: 10px;
}
.gallery img {
	width:100%;
	height:auto;
	float:left;
	margin-top:0;
	}

/* The hero image */
.hero-image {
  /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../img/industry-839254_1920.jpg");

  /* Set a specific height */
  height: 50%;

  /* Position and center the image to scale nicely on all screens */
  position:relative;
  background-position: 50% 55%;
  background-repeat: no-repeat;
  background-size: cover;
  float:none;
}

/* Place text in the middle of the image */
.hero-text {
  text-align: center;
  left: 50%;
  color: white;
  font-size:small;
}
/* topimages */
.gruenpflege {
	background-image:url(../img/nagesh-badu-690393-unsplash.jpg);
	background-position: 0% 65%;
  	background-repeat: no-repeat;
  	background-size: cover;
	height: 45%;
	width:100%;
  	margin-top:-4px;
	}
.reinigungsarbeiten {
	background-image:url(../img/adli-wahid-1200844-unsplash.jpg);
	background-position: 0% 75%;
  	background-repeat: no-repeat;
  	background-size: cover;
	height: 45%;
	width:100%;
  	margin-top:-4px;
	}
.sportanlagen {
	background-image:url(../img/wolfgang-rottmann-1535856-unsplash.jpg);
	background-position: 0% 75%;
  	background-repeat: no-repeat;
  	background-size: cover;
	height: 45%;
	width:100%;
  	margin-top:-4px;
	}
.muellentsorgung {
	background-image:url(../img/jilbert-ebrahimi-691926-unsplash.jpg);
	background-position: 15% 90%;
  	background-repeat: no-repeat;
  	background-size: cover;
	height: 45%;
	width:100%;
  	margin-top:-4px;
	}
.reparaturdienste {
	background-image:url(../img/markus-spiske-344594-unsplash.jpg);
	/* ../img/brina-blum-1277589-unsplash.jpg */
	background-position: 0% 100%;
  	background-repeat: no-repeat;
  	background-size: cover;
	height: 35%;
	width:100%;
  	margin-top:-4px;
}
.bezirksleiter {
	background-image:url(../img/ronaldo-santos-625842-unsplash.jpg);
	background-position: 0% 30%;
  	background-repeat: no-repeat;
  	background-size: cover;
	height: 50%;
	width:100%;
  	margin-top:-4px;
}
.notdienst {
	background-image:url(../img/lucas-law-746420-unsplash.jpg);
	background-position: 0% 45%;
  	background-repeat: no-repeat;
  	background-size: cover;
	height: 55%;
	width:100%;
  	margin-top:-4px;
}
.schliessdienst {
	background-image:url(../img/oliver-ulerich-1098851-unsplash.jpg);
	background-position: 0% 15%;
  	background-repeat: no-repeat;
  	background-size: cover;
	height: 55%;
	width:100%;
  	margin-top:-4px;
}
.heizungsanlage {
	background-image:url(../img/jacek-dylag-522990-unsplash.jpg);
	background-position: 0% 100%;
  	background-repeat: no-repeat;
  	background-size:cover;
	height: 55%;
	width:100%;
  	margin-top:-4px;
}
.waschautomaten {
	background-image:url(../img/jeremy-sallee-1235004-unsplash.jpg);
	background-position: 0% 90%;
  	background-repeat: no-repeat;
  	background-size:cover;
	height: 45%;
	width:100%;
  	margin-top:-4px;
}
.tiefgarage {
	background-image:url(../img/rokas-niparavicius-751193-unsplash.jpg);
	background-position: 0% 90%;
  	background-repeat: no-repeat;
  	background-size:cover;
	height: 45%;
	width:100%;
  	margin-top:-4px;
}

.winterdienst {
	background-image:url(../img/franz-roos-540560-unsplash.jpg);
	background-position: 0% 90%;
  	background-repeat: no-repeat;
  	background-size:cover;
	height: 45%;
	width:100%;
  	margin-top:-4px;
}
.schutzbeschichtung {
	background-image:url(../img/beschichtung09.jpg);
	background-position: 0% 90%;
  	background-repeat: no-repeat;
  	background-size:cover;
	height: 45%;
	width:100%;
  	margin-top:-4px;
}

/* topimages ende */



/* Inhalt mobile Ende */
footer {
	display:block;
	background-color:rgb(0,0,0);
	padding:20px;
	width:100%;
	color:rgb(255,255,255);	
}
.fline {
	margin-left:5%;
	font-size:smaller;
	width:80%;
}
.fline a {
	font-size:small;
	color:rgb(255,255,255);
	text-decoration:none;
}
.fline a:hover {
	color:#FC0;	
}
.fcolumnbg {
	background-color:#003;
	min-height:500px;
	width:100%;
}
.fcolumn {
	text-align:left;
 	color:rgb(255,255,255);
 	line-height:1.5em;
	font-size:1.0em;
}
.fcolumn a {
 	color:rgb(255,255,255);
 	line-height:1.5em;
	font-size:1.0em;
}
.fcolumn a:hover {
 	color:rgb(255,204,51);
}

@media all and (max-width : 330px) {

	nav ul li {
	display:block;
	width: 94%;
	}