/* @override 
	http://localhost:8888//3s-reinigung/css/layout.css
	http://localhost:8888/3s-reinigung/css/layout.css */

@import "base.css";
@import "core.css";

/* -------------------------------------------------------------- 
  
	Screen Styles © 2013 Michele Stanelli
	
-------------------------------------------------------------- */
/* FONT*/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);


body{
    font: 100%/1.5 Verdana, Lucida, sans-serif;
    color: #202020;
}

/* @group LAYOUT */

/* LAYOUT */
/************************************************/
.page{
	max-width: 940px;
    padding: 0 2%;
}

.menu{
    width: 100%;
    height: 100px;
    background: #5db6e3;
    position: fixed;
    top: 0;
    -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.39);
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.39);
    z-index: 100;
}
.logo{
    margin-top: 2px;
}
.logo:hover{
    cursor:pointer;
}
.slide{
    background-image: fixed;
    width:100%;
    height:auto;
    position: relative;
    padding:130px 0;
    min-height: 500px;
        
}
.umwelt{
    width: 62%;
}
.impress{
    width: 62%;
}
.willkommen{
    height: 470px;
    background: url(../img/kind.jpg) no-repeat;
    
}
#slide1 h1.hallo{
    padding-top: 0;
    position: relative;
    font-size: 240%;
    display: inline-block;
    padding-left: 25px;
    left: 35%;
}
#slide1 h2.hallo2{
    background-color: rgb(92, 181, 227);
    position: relative;
    top: 304px;
    color: #fff;
    display: inline-block;
    padding: 2px 25px;
    font-weight: 400;
    font-size: 160%;
    left: 17%;
}

#slide2{
    border-bottom: 1px dashed #2376aa;
}
#slide3{
}
#slide4{
    color: #fff;
    background: url(../img/umwelt.png) 90% 40% no-repeat #92b537;
}
#slide4 h1, #slide4 h2{
    color: #fff;
}
#slide5{
    border-bottom: 1px dashed #2376aa;
}
#slide6{
    padding-bottom: 250px;
}
.unternehmen [class*="col-"] .colcontent{
    border-left: 2px solid rgb(92, 181, 227);
    margin-left: 0;
    padding-left: 10px;
    white-space: normal;
}
.map{
    width: 100%;
    height: 280px;
}
.copy{
    margin-top: 50px;
}
.adresse p,
.copy{
    font-family: "Open Sans", Verdana, sans-serif;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    color: #2376aa;
    
}
.footer{
    width: 100%;
/*    background-color: #5db6e3;*/
    min-height: 200px;
/*    color: #fff;*/
    padding-bottom: 20px;
}
.footer h1{
/*    color: #fff;*/
    font-weight: 300;
    text-transform: none;
}
.footnote ul li{
    list-style: none;
    float: left;
    margin-right: 10px;
    margin-top: 0;
}

/* @end */

/* @group typo */

/*TYPO*/
h1, h2, h3, h4,
#nav{
    font-family: "Open Sans", sans-serif;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
	color: #2376aa;
}

h3, h4 {
	font-weight: 400;
}
h1{
	font-size: 250%;
	margin: 18px 5px 18px 0;
    text-transform: uppercase;
    font-weight: bold;
    font-weight: 300;
    text-transform: none;
}
h2{
	margin-bottom: 9px;
	padding-left: 5px;
	margin-left: -5px;
	margin-top: 0;
	font-size: 200%;
	font-weight: 300;
}
h3{
	font-size: 130%;
}
h4{
	font-size: 100%;
	font-weight: bold;
}
p{
	margin-bottom: 18px;
	line-height: 1.5;
}
img {
  -ms-interpolation-mode: bicubic;
  background: transparent;
  display: inline-block;
}
figure{
	margin: 0;
}
figcaption{
	margin-bottom: 25px;
	line-height: 1.5em;
	font-size: .75em;
	font-style: italic;
}
hr {
	color:#fff;
	background:transparent;
	margin:0 0 0.75em 0;
	padding:0 0 0.75em 0;
	border:0;
	border-bottom: 1px dashed #e1e1e1;
}
ul li{
    margin-left: 10px;
}
.ie7 ul li{
    margin-left: 35px;
    list-style: circle;
    list-style-position: inherit;
}

a {
  text-decoration: none;
}
a:link {color: #2376aa;}
a:visited {color: #2376aa;}
a:active {color: #EE0000;}
/* Add your own styles for hover _and_ focus styles */
a:hover {color: #2376aa;}

/*Adresse*/
.hcard ul{
	display: block;
    padding-left: 0;
    margin-left: 0;
}
.hcard ul.adr{
    margin-left: -10px;
}
.hcard li,
ul.num{
	list-style: none;
	width: 100%;
	display: block;
}
ul.num{
    margin-left: -50px;
}
ul.num h2{
        color: #fff;
}
ul.num li{
}
li.tel{
    background: url(../img/phone.png) 10px no-repeat #5cb5e3;
    padding: 11px 0 3px 90px;
    color: #fff;
    margin-bottom: 10px;
}
li.email{
    background: url(../img/mail.png) 15px no-repeat #5cb5e3;
    padding: 7px 7px 7px 90px;
    color: #fff;
}


/* @end */

/* @group Navigation */

/*navigation*/
#nav {
	float: right;
	font-size: 125%;
	width: auto;
}
.ie7 #nav {
	float: right;
	font-size: 125%;
	width: auto;
    margin-top: -50px;
}

.navigation{
	list-style: none;
	margin: 50px 0 0;
}
.ie7 .navigation{
	list-style: none;
    margin: 0;
}

.navigation li{
	float: left;
	padding: 0 10px;
	color: #fff;
}
.navigation li:hover{
	cursor:pointer;
	color: #2376aa;
}

.navigation .active{
	cursor:pointer;
	color: #5db6e3;
    background-color: #fff;
    -moz-box-shadow: 0 1px 2px #2189be;
    box-shadow: 0 1px 2px #2189be;
}
.nav-control{
    display: none;
}
#map-canvas{
    margin-right: 10px;
}

/* @end */


@media screen and (min-width: 1000px) {
	body{
		font-size: 100%;
	}
}

@media screen and (max-width: 820px) {
/* @group LAYOUT */
body{
    font-size: 81.25%;
}
/* LAYOUT */
/************************************************/
.page{
	max-width: 100%;
}

.menu{
    height: 100px;
    width: 100%;
    background: #5db6e3;
    position: fixed;
    top: 0;
    -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.39);
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.39);
    z-index: 100;
}
.logo{
    margin-top: 2px;
}
.logo:hover{
    cursor:pointer;
}
.slide{
        background-attachment: fixed;
        width:100%;
        height:auto;
        position: relative;
        padding:130px 0;
        min-height: 560px;        
}
.umwelt{
    width: 62%;
}
.willkommen{
    height: 470px;
    background: url(../img/kind.jpg) no-repeat;    
}

#slide1 h1.hallo{
    padding-top: 0;
    position: relative;
    font-size: 200%;
    display: inline-block;
    padding-left: 25px;
    left: 42%;
}
#slide1 h2.hallo2{
    background-color: rgb(92, 181, 227);
    position: relative;
    color: #fff;
    display: inline-block;
    padding: 2px 25px;
    font-weight: 400;
    font-size: 140%;
    left: 27%;
    top: 73.2%;
}

#slide2{
    border-bottom: 1px dashed #2376aa;
}
#slide3{
}
#slide4{
    background-color: #92b537;
    color: #fff;
}
#slide4 h1, #slide4 h2{
    color: #fff;
}
#slide5{
    border-bottom: 1px dashed #2376aa;
}
#slide6{
    padding-bottom: 250px;
}
.unternehmen [class*="col-"] .colcontent{
    border-left: 2px solid rgb(92, 181, 227);
    margin-left: 0;
    padding-left: 10px;
    white-space: normal;
}
.map{
    width: 100%;
    height: 280px;
}
.copy{
    margin-top: 50px;
}
.adresse p,
.copy{
    font-family: "Open Sans", Verdana, sans-serif;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    color: #2376aa;
    
}
.footer{
    width: 100%;
/*    background-color: #5db6e3;*/
    min-height: 200px;
/*    color: #fff;*/
    padding-bottom: 20px;
}
.footer h1{
/*    color: #fff;*/
    font-weight: 300;
    text-transform: none;
}
.footnote ul li{
    list-style: none;
    float: left;
    margin-right: 10px;
    margin-top: 0;
}

/* @end */

/* @group typo */

/*TYPO*/
h1, h2, h3, h4,
#nav{
    font-family: "Open Sans", sans-serif;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
	color: #2376aa;
}

h3, h4 {
	font-weight: 400;
}
h1{
	font-size: 250%;
	margin: 18px 5px 18px 0;
    text-transform: uppercase;
    font-weight: bold;
    font-weight: 300;
    text-transform: none;
}
h2{
	margin-bottom: 9px;
	padding-left: 5px;
	margin-left: -5px;
	margin-top: 0;
	font-size: 200%;
	font-weight: 300;
}
h3{
	font-size: 130%;
}
h4{
	font-size: 100%;
	font-weight: bold;
}
p{
	margin-bottom: 18px;
	line-height: 1.5;
}
img {
  -ms-interpolation-mode: bicubic;
  background: transparent;
  display: inline-block;
}
figure{
	margin: 0;
}
figcaption{
	margin-bottom: 25px;
	line-height: 1.5em;
	font-size: .75em;
	font-style: italic;
}
hr {
	color:#fff;
	background:transparent;
	margin:0 0 0.75em 0;
	padding:0 0 0.75em 0;
	border:0;
	border-bottom: 1px dashed #e1e1e1;
}
ul li{
    margin-left: 10px;
}
a {
  text-decoration: none;
}
a:link {color: #2376aa;}
a:visited {color: #2376aa;}
a:active {color: #EE0000;}
/* Add your own styles for hover _and_ focus styles */
a:hover {color: #2376aa;}

/*Adresse*/
.hcard ul{
	display: block;
    padding-left: 0;
    margin-left: 0;
}
.hcard ul.adr{
    margin-left: -10px;
}
.hcard li,
ul.num{
	list-style: none;
/*		float: left;*/
	width: 100%;
	display: block;
}

.hcard .org{
/*		font-size: 100%;*/
}
ul.num{
    margin-left: -50px;
}
ul.num h2{
        color: #fff;
}
ul.num li{
}
li.tel{
    background: url(../img/phone.png) 10px no-repeat #5cb5e3;
    padding: 11px 0 3px 90px;
    color: #fff;
    margin-bottom: 10px;
}
li.email{
    background: url(../img/mail.png) 15px no-repeat #5cb5e3;
    padding: 7px 7px 7px 90px;
    color: #fff;
    font-size: 81.25%;
}


/* @end */


/* @group Navigation */

/*navigation*/
.nav-control{
    display: none;
}
#nav {
	float: right;
}
.navigation{
	list-style: none;
    z-index: 100;
    margin: 50px 0 0;
    padding: 0;
}
.navigation li{
	float: left;
	padding: 0 5px;
	color: #fff;
}
.navigation li:hover{
	cursor:pointer;
	color: #2376aa;
}

.navigation .active{
	cursor:pointer;
	color: #5db6e3;
    background-color: #fff;
    -moz-box-shadow: 0 1px 2px #2189be;
    box-shadow: 0 1px 2px #2189be;
}

/* @end */	
}


@media screen and ( max-width: 640px )  {
	body{
		font-size: 75% !important;
	}
	.menu{
	    height: 65px;
	    -moz-box-shadow: none;
	    box-shadow: none;
	    border-bottom: 1px solid #7e7e7e;
	}
	
	.logo{
	    width: 50px;
	}
/* @group LAYOUT */

/* LAYOUT */
/************************************************/
.page{
	max-width: 940px;
/*    padding: 0 10px;*/
}
.col-p50, .col-p33, col-p62{
    width: 100%;
}
.menu{
    height: 50;
    width: 100%;
    background: #5db6e3;
    position: fixed;
    top: 0;
    -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.39);
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.39);
    z-index: 100;
}
.logo{
    margin-top: 2px;
}
.logo:hover{
    cursor:pointer;
}
.slide{
        background-attachment: fixed;
        width:100%;
        height:auto;
        position: relative;
        padding:80px 0;
        min-height: 400px;
        
}
.umwelt{
    width: 100%;
    text-align: left;
}
.impress{
    width: 95%;
}

/*#slide1 .willkommen{
    position: absolute;
    height: 470px;
    background: url(../img/kind.jpg) 120px -110px no-repeat scroll transparent;
}*/
.willkommen{
    height: 480px;
    background: url(../img/kind.jpg) left 60px no-repeat scroll;
}

#slide1 h1.hallo{
    padding-top: 0;
    position: relative;
    font-size: 190%;
    display: inline-block;
    padding-left: 10px;
    background-color: #ffffff;
    top: -21px;
    left: 0;
}
#slide1 h2.hallo2{
    background-color: rgb(92, 181, 227);
    position: relative;
    top: 303px;
    color: #fff;
    display: inline-block;
    padding: 2px 25px;
    font-weight: 400;
    font-size: 160%;
    left: 0;
}

#slide2{
    border-bottom: 1px dashed #2376aa;
}
#slide3{
}
#slide4{
    background-color: #92b537;
    color: #fff;
}
#slide4 h1, #slide4 h2{
    color: #fff;
}
#slide5{
    border-bottom: 1px dashed #2376aa;
}
#slide6{
    padding-bottom: 250px;
}
.unternehmen [class*="col-"] .colcontent{
    border-left: 2px solid rgb(92, 181, 227);
    margin-left: 0;
    padding-left: 10px;
    white-space: normal;
}
.map{
    width: 100%;
    height: 240px;
}
.copy{
    margin-top: 50px;
}
.adresse p,
.copy{
    font-family: "Open Sans", Verdana, sans-serif;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    color: #2376aa;
    
}
.footer{
    width: 100%;
/*    background-color: #5db6e3;*/
    min-height: 200px;
/*    color: #fff;*/
    padding-bottom: 20px;
}
.footer h1{
/*    color: #fff;*/
    font-weight: 300;
    text-transform: none;
}
.footnote ul li{
    list-style: none;
    float: left;
    margin-right: 10px;
    margin-top: 0;
}

/* @end */

/* @group typo */

/*TYPO*/
h1, h2, h3, h4,
#nav{
    font-family: "Open Sans", sans-serif;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
	color: #2376aa;
}

h3, h4 {
	font-weight: 400;
}
h1{
	font-size: 250%;
	margin: 18px 5px 18px 0;
    text-transform: uppercase;
    font-weight: bold;
    font-weight: 300;
    text-transform: none;
}
h2{
	margin-bottom: 9px;
	padding-left: 5px;
	margin-left: -5px;
	margin-top: 0;
	font-size: 200%;
	font-weight: 300;
}
h3{
	font-size: 130%;
}
h4{
	font-size: 100%;
	font-weight: bold;
}
p{
	margin-bottom: 18px;
	line-height: 1.5;
}
img {
  -ms-interpolation-mode: bicubic;
  background: transparent;
  display: inline-block;
}
figure{
	margin: 0;
}
figcaption{
	margin-bottom: 25px;
	line-height: 1.5em;
	font-size: .75em;
	font-style: italic;
}
hr {
	color:#fff;
	background:transparent;
	margin:0 0 0.75em 0;
	padding:0 0 0.75em 0;
	border:0;
	border-bottom: 1px dashed #e1e1e1;
}
ul li{
    margin-left: 10px;
}
a {
  text-decoration: none;
}
a:link {color: #2376aa;}
a:visited {color: #2376aa;}
a:active {color: #EE0000;}
/* Add your own styles for hover _and_ focus styles */
a:hover {color: #2376aa;}

/*Adresse*/
.hcard ul{
	display: block;
    padding-left: 0;
    margin-left: 0;
}
.hcard ul.adr{
    margin-left: -10px;
}
.hcard li,
ul.num{
	list-style: none;
/*		float: left;*/
	width: 100%;
	display: block;
}

.hcard .org{
/*		font-size: 100%;*/
}
ul.num{
    margin-left: -50px;
}
ul.num h2{
        color: #fff;
}
ul.num li{
}
li.tel{
    background: url(../img/phone.png) 10px no-repeat #5cb5e3;
    padding: 11px 0 3px 90px;
    color: #fff;
    margin-bottom: 10px;
}
li.email{
    background: url(../img/mail.png) 15px no-repeat #5cb5e3;
    padding: 7px 7px 7px 90px;
    color: #fff;
}


/* @end */

/* @group Navigation */

/*navigation*/
#nav {
/*	float: right;*/
	font-size: 125%;
}
ul.navigation{
    list-style: none;
    float: right;
    position: relative;
    right: 0;
    margin: 0;
    background-color: rgba(66, 66, 66, 0.9);
    width: 60%;
    display: none;
    top: -3px;
}
.show ul.navigation{
    display: inline-block;
}
.navigation li{
	float: left;
/*	padding: 0 5%;*/
	color: #fff;
	width: 90%;
    height: 54px;
    padding-top: 0;
    line-height: 50px;
}
.navigation li:hover{
	cursor:pointer;
	color: #2376aa;
}

.navigation .active{
	cursor:pointer;
	color: #5db6e3;
    background-color: #fff;
    -moz-box-shadow: none;
    box-shadow: none;
    
}
#map-canvas{
    margin-right: 10px;
}

/* @end */
.nav-control {
	display: inline-block;
	background: url(../img/menu.gif) no-repeat center center transparent;
	background-size: 100%;
	position: absolute;
	top: 14px;
	z-index: 300 !important;
	right: 28px;
}
.nav-control a{	
	text-indent: -99999px;
	display: block;
	text-align: left;
	width: 36px;
	height: 36px;
	line-height: 36px;
	z-index: 150 !important;
}
	
	
}


@media print{
#navigation, .subnav, .top_nav{
	display: none;
}
body{
	size: 21.00cm 29.70 cm;
/*	margin: 1.27cm 0.55cm 1.80cm 1.80cm;*/
	orphans: 2;
	widows: 2;
	font-size: 10pt;
	padding-top: 0;
}
table, img{
	page-break-inside: avoid;
}
h1,h2,h3,h4,h4{
	page-break-after: avoid;
	page-break-before: avoid;
}

}