@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Ek+Mukta:400,500,200,300,600,700,800);

* {
	padding: 0;
	margin: 0;
	font-family: 'Ek Mukta', sans-serif;
	
	color: #333;
}

.float_left { float: left; }
.float_right { float: right; }
.clear {
	clear: both;
	}

html, body {
	border: 0 none;
	margin: 0;
	padding: 0;
	min-height:100%;
	height: 100%;
	font-weight: 300;
}

body {
	background: url('../img/background.jpg') no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.w66p { width:100%; }
.w55p { width:100%; }
.w50p { width:100%; }
.w33p { width:100%; }


#header {
	background: white;
	width: 100%;
	padding:35px 0 20px;
	border-bottom: 1px solid lightgray;
	}
#logo { 
	border-bottom: 1px solid lightgray;
    margin: 0 auto;
    padding: 0 0 50px;
    text-align: center;
}
#logo a {
	display: inline-block;
	}
#logo a img {
	width: 230px;
	}
	
#toggle_nav {
    margin: 10px auto 0;
    text-align: center;
	font-size:	0px;
	width:30px;
	height: 30px;
	padding: 5px;
}
#toggle_nav img {
    width:100%;
}
	
#nav {
	padding: 0 15px;
	display: none;
	}
ul#navigation li a {
	display: block;
	margin: 0 5px;
	text-decoration: none;
	padding: 5px 10px;
	}
ul#navigation {
	list-style-type: none;
	overflow: hidden;
	}
ul#navigation > li > a {
	margin: 5px;
	font-weight:700;
	font-size: 1.5em;
	}
ul#navigation > li.parent > a {
	padding-right: 35px;
	}
	
ul#navigation > li > a.last {
	border-right: none;
}
ul#navigation > li.parent > a.menuarrow {
	display:none;
}

ul#navigation > li {
	border-bottom: 1px dotted lightgray;
	}
ul#navigation a:hover {
	background: rgba(60,100,150,0.1);
	}

#info {
	background: rgba(0,0,0,0.33);
	padding: 15px;
	}

#info > h1 {
	color: white;
	font-size: 2.5em;
	font-weight: 600;
	line-height: 1.25em;
	text-shadow: 0 1px 4px #000000;
	word-wrap:break-word;
}
#info > h2 {
	color: white;
	font-size: 1.5em;
	font-weight: 600;
	line-height: 2.25em;
	text-shadow: 0 1px 4px #000000;
}
	
#info .box {
	background: rgba(255,255,255,0.75);
	margin: 25px 0;
	width: 100%;
	padding: 5px 15px 15px;
	border-radius: 5px;
	box-sizing:border-box;
}
#info .box h1 {
	font-weight: 800;
}
.box > p {
	line-height: 1.2em;
	padding: 15px 0;
	text-align: center;
}
.box .button {
	background-color: rgb(255,222,0);
	border: 2px solid rgba(0, 0, 0, 0.25);
	display: block;
	font-weight: 800;
	padding: 10px;
	text-align: center;
	text-decoration: none;
}	

.flex-container {
    display: -webkit-flex; 
	display: flex; 
	-webkit-flex-flow: row wrap; 
	flex-flow: row wrap; 
	-webkit-justify-content: space-between; 
	justify-content:space-between;
	
    align-content: stretch;
    align-items: stretch;
	text-align:center;
		
    }

.flex-item {
    flex: 1 1 auto;
    align-self: auto;
    }

#info .flex-container {
	
	}
#info .flex-item {
    }

#info .flex-item img {
	height:80px;
	width:80px;
	}	
.flex-item > p {
    margin: 0 auto;
	line-height: 1.2em;
    min-width: 80px;
	max-width: 100px;
	font-weight: 700;
}

#content {
	background: white;
	padding: 25px;
	}

#content h1 {
	padding: 0.25em 0 0.5em;
	text-transform: uppercase;
	color: rgb(60,100,150);
	/*color:rgb(15, 9,65);*/
	font-weight: 700;
	font-size: 2.5em;
	border-bottom: 1px dotted rgb(200,200,200);
	line-height: 1em;
	word-wrap:break-word;

}
#content h2 {
	padding: 0.5em 0 0.5em;
	font-weight: 700;
	line-height: 1.2em;
	word-wrap:break-word;
}
#content h3 {
	padding: 0.5em 0 0;
	color: rgb(60,100,150);
	font-weight: 400;
	font-size: 2em;
	line-height: 1em;
	word-wrap:break-word;
}
#content b {
	font-weight:700;
}
#content > p {
	padding: 1em 0 2em;
	text-align: justify;
	}
#content a {
    color: rgb(60, 100, 150);
    font-weight: 700;
    text-decoration: none;
}
#content ul {
	padding: 1em 0 2em 1.25em;
	line-height: 1.25em;
	color: rgb(60,100,150);
	list-style: #00C;
	width:auto;
	max-width:40em;
	}
#content ul li {	
	margin: 0 0 0.5em;
	padding: 0 0 0 0.5em;
}
#content ul.plus {
	list-style-image:url('../img/plus.png');
}

#content > img {
    max-width: 100%;
}

hr.dotted {
	border:none;
  	border-top:1px dotted rgb(200,200,200);
  	color:#fff;
  	background-color:#fff;
  	height:1px;
  	width:100%;
}

.w66p { width:100%; }
.marg25-0 { margin: 25px 0;}

a.button {
    background: rgba(60, 100, 150, 0.125) none repeat scroll 0 0;
    border: 1px solid rgba(60, 100, 150, 0.125);
    display: inline-block;
    line-height: 1.2em;
    padding: 10px 15px;
    text-align: center;
    max-width: 20em;
    width:auto;
    margin-bottom: 50px;
}

/*
DYNAMIC Menu
*/
div.flex-container.menu .flex-item a { display: inline-block;}
div.flex-container.menu .flex-item a>div {
	width:200px; 
	height:120px;
	
	margin: 25px 0 5px;
	
	
	background-size: 100%;
	background-repeat: no-repeat;

	-webkit-transition: background-image 0.2s;
    -moz-transition: background-image 0.2s;
    -o-transition: background-image 0.2s;
    -ms-transition: background-image 0.2s;
    transition: background-image 0.2s;
	
}

.UNTERHALTSREINIGUNG {background-image: url('../img/Gebaeudereinigung/UNTERHALTSREINIGUNG_sw.jpg');}
.FENSTERREINIGUNG {background-image: url('../img/Gebaeudereinigung/FENSTERREINIGUNG_sw.jpg');}
.GRUNDREINIGUNG {background-image: url('../img/Gebaeudereinigung/GRUNDREINIGUNG_sw.jpg');}
.TEPPICHREINIGUNG {background-image: url('../img/Gebaeudereinigung/TEPPICHREINIGUNG_sw.jpg');}
.BAUREINIGUNG {background-image: url('../img/Gebaeudereinigung/BAUREINIGUNG_sw.jpg');}
.INDUSTRIEREINIGUNG {background-image: url('../img/Gebaeudereinigung/INDUSTRIEREINIGUNG_sw.jpg');}
.FASSADENREINIGUNG {background-image: url('../img/Gebaeudereinigung/FASSADENREINIGUNG_sw.jpg');}
.SONDERREINIGUNG {background-image: url('../img/Gebaeudereinigung/SONDERREINIGUNG_sw.jpg');}

.REINIGUNG {background-image: url('../img/HM-Service/REINIGUNG_sw.jpg');}
.TECHNIK {background-image: url('../img/HM-Service/TECHNIK_sw.jpg');}
.GRUENFLAECHEN {background-image: url('../img/HM-Service/GRUENFLAECHEN_sw.jpg');}
.WINTERSERVICE {background-image: url('../img/HM-Service/WINTERSERVICE_sw.jpg');}

.HOTELSERVICE {background-image: url('../img/Hotelservice/Hotelservice_sw.jpg');}
.SONDERDIENSTE {background-image: url('../img/Sonderdienste/Sonderdienste_sw.jpg');}

a:hover .UNTERHALTSREINIGUNG {background-image: url('../img/Gebaeudereinigung/UNTERHALTSREINIGUNG.jpg');}
a:hover .FENSTERREINIGUNG {background-image: url('../img/Gebaeudereinigung/FENSTERREINIGUNG.jpg');}
a:hover .GRUNDREINIGUNG {background-image: url('../img/Gebaeudereinigung/GRUNDREINIGUNG.jpg');}
a:hover .TEPPICHREINIGUNG {background-image: url('../img/Gebaeudereinigung/TEPPICHREINIGUNG.jpg');}
a:hover .BAUREINIGUNG {background-image: url('../img/Gebaeudereinigung/BAUREINIGUNG.jpg');}
a:hover .INDUSTRIEREINIGUNG {background-image: url('../img/Gebaeudereinigung/INDUSTRIEREINIGUNG.jpg');}
a:hover .FASSADENREINIGUNG {background-image: url('../img/Gebaeudereinigung/FASSADENREINIGUNG.jpg');}
a:hover .SONDERREINIGUNG {background-image: url('../img/Gebaeudereinigung/SONDERREINIGUNG.jpg');}

a:hover .REINIGUNG {background-image: url('../img/HM-Service/REINIGUNG.jpg');}
a:hover .TECHNIK {background-image: url('../img/HM-Service/TECHNIK.jpg');}
a:hover .GRUENFLAECHEN {background-image: url('../img/HM-Service/GRUENFLAECHEN.jpg');}
a:hover .WINTERSERVICE {background-image: url('../img/HM-Service/WINTERSERVICE.jpg');}

a:hover .HOTELSERVICE {background-image: url('../img/Hotelservice/Hotelservice.jpg');}
a:hover .SONDERDIENSTE {background-image: url('../img/Sonderdienste/Sonderdienste.jpg');}

/*

FORMULARE

*/
form {
    /* To see the outline of the form */
    padding: 1em;
    border: 1px solid #CCC;
    border-radius: 1em;
    margin-top:1em;
}
form div + div {
    margin-top: 1em;
}
label {
    /* To make sure that all labels have the same size and are properly aligned */
    display: table;
    
    padding: 0.5em 0 0.5em;
	font-weight: 700;
	line-height: 1.2em;
	word-wrap:break-word;
    
}
form .required > label div::after {
    color: #eb433e;
    content: "*";
    margin-left: 4px;
}
input, textarea {
    border: 1px solid #ccc;
    box-sizing: border-box;
    font-size: 100%;
    padding: 5px;
    width: 100%;
}
input:focus, textarea:focus {
    /* To give a little highlight on active elements */
    border-color: rgb(60,100,150);
}
textarea {
    /* To properly align multiline text fields with their labels */
    vertical-align: top;

    /* To give enough room to type some text */
    height: 10em;

    /* To allow users to resize any textarea vertically
       It does not work on every browsers */
    resize: vertical;
}
form .button {
    /* To position the buttons to the same position of the text fields */
    width: 100%;
}
button {
    border: 1px solid #ccc;
    font-size: 100%;
    width: 100%;
    padding: 0.5em;
}
button:hover {
	background: rgba(60,100,150,0.2);
	/*border-color: rgb(60,100,150);*/
	color: rgb(60,100,150);
}
.errormsg {
    background: #faa none repeat scroll 0 0;
    border: 1px solid #a33;
    padding: 15px;
}
.infomsg {
    background: #afa none repeat scroll 0 0;
    border: 1px solid #5a5;
    padding: 15px;
	margin: 20px 0 0;
}
/*

FORMULARE ENDE

*/	
	
	
#spacer {
	height: 150px;
	visibility: hidden;
}
#footer-wrapper {
	background: #333 none repeat scroll 0 0;
	margin: 0 auto;
	width: 100%;
}
#footer {
	max-width: 955px;
	padding: 15px;
	margin: 0 auto;
}
#footer p {
	color: #FFF;
	text-align: center;
	width: 100%;
}
#footer p a {
	color: rgb(90,150,225);
	text-decoration: none;
}

#footer a {
	color: rgb(166,166,166);
	text-decoration: none;
}
#footer .flex-item {
	text-align: left;
	margin: 15px;
	padding: 0 15px;
	border-left: 0;
}
#footer .flex-item.first {
	border-left: none;
	}
	
#footer .footer_sitemap {
	color: white;
	font-weight: 500;
}

#footer > hr {
    background-color: rgb(128, 128, 128);
    border: 0 none;
    height: 1px;
    margin: 15px;
    width: 100%;
}
#footer.flex-container { display: inherit;}

.hover {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	/* css3 transitions for smooth hover effect */
	-webkit-transition: opacity 1s linear, visibility 1s linear, max-height 2s;
	-moz-transition: opacity 1s linear, visibility 1s linear, max-height 2s;
	-o-transition: opacity 1s linear, visibility 1s linear, max-height 2s;
	transition: opacity 1s linear, visibility 1s linear, max-height 2s;
}

h2:hover ~ .hover, .hover:hover {
	max-height: 1000px;
	opacity: 1;
	visibility: inherit;
}


@media only screen and (min-width: 750px) {
	#info {
		background: none;
		}
	#info .box {
		width: 50%;
		background: rgba(255,255,255,0.33);

	}
	.no-desktop {
		display: none;
	}
	
	button {
    border: 1px solid #ccc;
    font-size: 100%;
    width: 50%;
    margin-left:50%;
	}
	#footer.flex-container { display: flex;}
	#footer .flex-item { border-left: 1px dotted rgb(88, 88, 88); }
	}
@media only screen and (min-width: 950px) {

.w66p { width:66%; }
.w55p { width:55%; }
.w50p { width:50%; }
.w33p { width:33%; }
.p1em { padding: 1em; }

#content h3.anker { padding-top: 5em; }
a.button { margin-bottom: 0; }

.fullwidth {
	width: 90%;
	max-width:985px;
	min-width: 480px;
}
.center {
	margin: 0 auto;
}

.no-desktop {
	display: none;
	}
#header {
	background: white;
	position: fixed;
	top: 0;
	width: 100%;
	border-bottom: 1px solid rgba(0,0,0,0.125);
	padding:35px 0 30px;
}
#logo {
	border: none;
	float: left;
	height: 80px;
	width: 229px;
	padding: 0 0 0 15px;
}
#logo img {
	height:100%;
	width:100%;
}

#nav {
	float: right;
	padding: 32px 0 0;
	display: block;
}

#toggle_nav {
	display: none;
	}

/* Main Navigation */
ul#navigation { 
	overflow: inherit;
}
ul#navigation li {
	display: inline;
	float: left;
	position: relative;
	border: none;
}
ul#navigation li a {
	padding: 5px 20px;
	margin: inherit;
	font-weight: 300;
	color: #616161;
	text-decoration: none;
	display: inline-block;
	font-size: 1.2em;
	border-right: 1px dotted #DDD;

	-webkit-transition: color 0.2s linear, background 0.2s linear;
	-moz-transition: color 0.2s linear, background 0.2s linear;
	-o-transition: color 0.2s linear, background 0.2s linear;
	transition: color 0.2s linear, background 0.2s linear;
}
ul#navigation li a:hover {
	color: rgb(60,100,150);
}

ul#navigation > li > a.last {
	border-right: none;
}

ul#navigation > li.parent > a.menuarrow {
	color: lightgray;
	margin: 0 10px 0 -30px;
	padding: 0 0 0 0;
	cursor: pointer;
	border-right: none;
	background: inherit;
	font-size: 0em;
	display: inline-block;
}
ul#navigation > li.parent > a.menuarrow:hover {
	color: rgb(60,100,150);
}

form {
    
    width:66%;
}

ul#navigation li:hover > a {
	background: rgba(60,100,150,0.1);
}
/* Drop-Down Navigation */
ul#navigation li:hover > ul {
	/*these 2 styles are very important, 
being the ones which make the drop-down to appear on hover */
	visibility: visible;
	opacity: 1;
}
ul#navigation ul, ul#navigation ul li ul {
	list-style: none;
	margin: 0;
	padding: 0;
	/*the next 2 styles are very important, 
being the ones which make the drop-down to stay hidden */
	visibility: hidden;
	opacity: 0;
	position: absolute;
	z-index: 99999;
	min-width: 180px;
	background-color: white;
	font-size: 0.75em;
	/* css3 transitions for smooth hover effect */
	-webkit-transition: opacity 0.2s linear, visibility 0.2s linear;
	-moz-transition: opacity 0.2s linear, visibility 0.2s linear;
	-o-transition: opacity 0.2s linear, visibility 0.2s linear;
	transition: opacity 0.2s linear, visibility 0.2s linear;
}
ul#navigation ul {
	left: 0;
	top: 40px;
	box-shadow: 0 5px 5px rgba(0, 0, 0, 0.33);
}
ul#navigation ul li ul {
	top: 0;
	left: 181px; /* strong related to width:180px; from above */
}
ul#navigation ul li {
	clear: both;
	width: 100%;
	border: 0 none;
	border-bottom: 1px dotted #c9c9c9;
}
ul#navigation ul li a {
	background: none;
	padding: 7px 15px;
	color: #616161;
	/*text-shadow:1px 1px 0px #fff;*/
	text-decoration: none;
	display: inline-block;
	border: 0 none;
	float: left;
	clear: both;
	width: 150px;
}
/* ------ */

#info {
	padding: 200px 0 0;
	min-height: 450px;
}
#info.hide {
	min-height: inherit;
	}
#info > h1 {
	color: white;
	font-size: 2.5em;
	font-weight: 600;
	line-height: 1.25em;
	text-shadow: 0 1px 4px #000000;
	padding-left: 15px;
}
#info > h2 {
	color: white;
	font-size: 1.5em;
	font-weight: 600;
	line-height: 2.25em;
	text-shadow: 0 1px 4px #000000;
	padding-left: 15px;
}
#info .box {
	background: rgba(255,255,255,0.33);
	margin: 25px 0;
	width: 40%;
	padding: 5px 15px 15px;
	border-radius: 5px;
	box-sizing:border-box;
}
#info .box h1 {
	font-weight: 800;
}
.box > p {
	line-height: 1.2em;
	padding: 15px 0;
	text-align: center;
}
.box .button {
	background-color: rgb(255,222,0);
	border: 2px solid rgba(0, 0, 0, 0.25);
	display: block;
	font-weight: 800;
	padding: 10px;
	text-align: center;
	text-decoration: none;
}
img.point {
	width: 50%;
	height: auto;
}
#wrapper {
	min-width: 480px;
	max-width: 985px;
	width: 90%;
	min-height: 100%;
	margin: 0 auto -350px;
}
#content {
	background: white;
	margin: 0 0;
	padding: 30px 15px;
	line-height: 1.5em;
}
#content h1 {
	padding: 0.5em 0 0.5em;
	text-transform: uppercase;
	color: rgb(60,100,150);
	/*color:rgb(15, 9,65);*/
	font-weight: 700;
	font-size: 2.5em;
	border-bottom: 1px dotted rgb(200,200,200);
	line-height: 1em;
}
#content > p {
	padding: 1em 0 2em;
	text-align: justify;
	}
#spacer {
	height: 400px;
	visibility: hidden;
}
#footer-wrapper {
	background: #333 none repeat scroll 0 0;
	margin: 0 auto;
	width: 100%;
	min-height: 300px;
}
#footer {
	max-width: 955px;
	padding: 15px;
	margin: 0 auto;
}
#footer p {
	color: #FFF;
	text-align: center;
	width: 100%;
}

#footer .flex-item {
	text-align: left;
}

.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: stretch;
    align-items: stretch;
	text-align:center;
    }

.flex-item {
    flex: 1 1 auto;
    align-self: auto;
    }

#info .flex-container {
	
	}
#info .flex-item {
    }

#info .flex-item img {
	width:80px;
	}	
.flex-item > p {
    margin: 0 auto;
	line-height: 1.2em;
    min-width: 80px;
	max-width: 100px;
	font-weight: 700;
}

input, textarea {
    width: 66%;
}

button {
    margin-left: 30%;
    width: 36%;
}


}