/*Reset CSS */
*{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;}
body{margin:0;padding:0;font-family: 'Crimson Text', serif;}
ul{list-style:none;margin:0;padding:0;}
a{text-decoration:none}
img{max-width:110%;border:0;height:auto;}
a:hover{opacity:0.8;}
h1, h2, h3, h4, h5, p{margin:0;padding:0;}

/*Header */
.header{float:left;width:100%;padding:15px 0 22px;position:fixed;left:0;top:0;}
.wrapper{margin:0 auto;max-width:880px;width:100%;}
.header a.logo{float: left;width:37%;opacity:1;margin-top:2px;}
.menu{float:right;}
.menu ul{float:right;padding-top:17px;}
.menu ul li{float:left;padding:0 10px;}
.menu ul li a{font-size:18px;line-height:27px;color:#5f4637;}
#nav li.active a,#nav li a:hover {text-decoration: underline;position: relative;}

.sticky{position:fixed;z-index:999999;background:url(../images/headerBg.png) repeat center center;}
html .logo-normal {display: inline-block !important;margin-top: 85px; transition:all 0.1s ease-in-out 0s; -moz-transition:all 0.1s ease-in-out 0s; -o-transition:all 0.1s ease-in-out 0s; -webkit-transition:all 0.1s ease-in-out 0s;}
.sticky .logo img{width:150px; margin-top:0;}

/*content */
.homePage{float:left;width:100%;margin: 0 0 45px 0;background:url(../images/homeImg.png) no-repeat right 65%;}
.home img{float:right;}
.pageTitle{display:none;}
.fixHeight{overflow:hidden;}

/*Angebot */
.myOffer {float: left;width: 100%;margin: 0 0 45px;}
.myOffer .imgSection{float: left;width: 100%;position:relative;}
.offerImg img{width:100%;}
.offerSection .imgSection .offerTitle{ bottom: 0;left: 0;position: absolute;text-align: center;width: 100%;background:url(../images/contentBg.png) repeat center center;}
.offerSection .imgSection .offerTitle h3{font-size:63px;line-height:76px;color:#5f4637;font-weight:400;}
.offerSection .offerContent {text-align: center;width: 100%;float:left;}
.offerSection .offerContent h3{font-size:63px;line-height:76px;color:#5f4637;font-weight:400;}
.offerSection .offerContent p{font-size:27px;line-height:32px;color:#5f4637;margin:45px 0;}

/*Ueber mich*/
.aboutMe{float:left;width:100%;text-align:center;background:url(../images/aboutBg.png) no-repeat right 80px;padding: 80px 0;}
.aboutMe ul li{margin:35px 0;}
.aboutMe ul li h3{font-size:27px;line-height:32px;color:#5f4637;font-weight:700;}
.aboutMe ul li p{font-size:27px;line-height:32px;color:#5f4637;}

/*Administratives*/
.adminPage{float:left;width:100%;margin: 45px 0;}
.adminPage {float: left;width: 100%;}
.adminPage .imgSection{width:100%;position:relative;float:left;}
.adminPage .imgSection img{width:100%;float:left;}
.imgSection img{width:100%;float:left;}
.adminPage .imgSection .shadowContent{left: 0; position: absolute;text-align: center;bottom: 0;width: 100%;background:url(../images/contentBg.png) repeat center center;}
.adminPage .adminContent{text-align: center;}
.adminPage p{font-size:27px;line-height:32px;color:#5f4637; margin-bottom: 30px;}
.shadowContent p{margin:0 80px;}

/*Kontakt*/
.contactPage{float:left;width:100%;background:#f2ebde url(../images/contactPage.png) no-repeat right bottom;text-align:center;margin: 45px 0 0;position:relative;}
.contactPage ul{float: left;margin: 90px 0 176px;width: 100%;}
.contactPage ul li{float:left;width:100%;margin:40px 0;}
.contactPage ul li p{font-size:27px;line-height:32px;color:#5f4637;}
#scrollTop{position:fixed;right:20px;bottom:20px;display:none;cursor:pointer;}
#scrollTop.show{display:block;}
.contactPage ul li p a{color:#5f4637;}


/*Responsive */

@media only screen and (min-width:768px) and (max-width:1024px){
body .aboutMe{padding-top:85px;}
.aboutMe{background-size:250px 350px;}

.shadowContent p {
    margin: 0 80px;
}
}
@media only screen and (max-width:1024px){
        .myOffer{margin:0 0 45px;}
	.aboutMe{padding:40px 0;}
	.adminPage{margin:25px 0;}
	.offerSection .imgSection .offerTitle h3, .offerSection .offerContent h3{font-size: 44px;line-height: 54px;}
	.offerSection .offerContent p, .aboutMe ul li p, .adminPage p, .contactPage ul li p{font-size: 24px;line-height: 32px;}
	.aboutMe ul li h3 {font-size: 24px;line-height: 32px;}
	.myOffer .imgSection, .adminPage .imgSection{height:auto !important;}
    .header a.logo{text-align:left;padding-left:10px;}	
	.menu ul{width:100%;}
        .homePage{background-position:right bottom;max-height: 700px;}
        .header a img.logo-normal{width:90%;height:auto;}
        .sticky a img.logo-normal{width: 150px;}
        .menu {float: right;width: auto;}
        .menu ul{padding-right:10px;}
        .menu ul li{padding: 0 9px;}
        .menu ul li a{font-size:17px;}
        .contactPage{background-position:right bottom; max-height: 800px;margin:25px 0 0;}
        .header a.logo{width: 33%;}
.offerSection .offerContent p, .aboutMe ul li p, .adminPage p, .contactPage ul li p{padding-left:10px;padding-right:20px;}
}
@media only screen and (max-width:767px){
	/* .header{position:relative;} */
	a.logo{display:none;}
	a.mobileLogo{display:block !important;padding-left: 25px;opacity: 1;max-width:161px;width: 100%;}
	
	.menu ul{display:none;position:absolute;top:100%;left:0;background:url(../images/mobileHeader.png) repeat center center;width: 100%;padding-left: 18px;padding-bottom: 30px;}
	.menu ul li{width:100%;}
	.menu span.menu-icon{display:block !important;position: absolute;right: 30px;top: 20px;cursor: pointer;}
	.menu span.menu-icon img{height: 22px;width: 26px;}
	.offerSection .imgSection .offerTitle h3, .offerSection .offerContent h3, .offerSection .imgSection .offerTitle h3{font-size: 38px;line-height: 45px;}
	.offerSection .offerContent p, .aboutMe ul li p, .adminPage p, .contactPage ul li p{font-size: 17px;line-height: 25px;padding: 0 30px 0 25px;}
	.aboutMe ul li h3 {font-size: 17px;line-height: 22px;padding: 0 30px 0 25px;}
	.pageTitle{display:block;float: left;text-align: center;width: 100%;margin: 35px 0 10px;}
	.pageTitle h3{font-size:17px;line-height:25px;color:#5f4637;font-weight: 700;}
	.aboutMe .wrapper span img{height: auto;width: 108px;}
	.aboutMe{background-size:105px;padding:0; background-position: right 20%;}
	.header{background:url(../images/mobileHeader.png) repeat center center;}
	.home img{width:240px;}
	.homePage, .myOffer, .aboutMe, .contactPage{margin:0;}
	.contactPage{background:#f2ebde url(../images/contactMobile.png) no-repeat right bottom;background-size:180px;margin-top: 80px;}
	.contactPage ul{margin: 0 0 125px;}
	.fixHeight{height:auto !important;}
	.contactPage ul li{margin:20px 0;}
	.imgSection img{display:inline-block;float:left;}
	.homePage{min-height:400px;background-size: 90% 70%;}	
    .adminPage {margin: 0 0 30px 0;}
	.aboutMe ul li{margin:25px 0;}
        .shadowContent p{margin:0;line-height:25px;}
        /*.myOffer .pageTitle{margin: 0 0 10px;}*/
        #nav li a.current, #nav li a:hover{line-height:27px;}
#contactPage{padding-bottom:140px;}
#scrollTop{bottom:10px;}
.homePage{background-position: right 95px;background-size: 260px 270px;}
.whiteSpace{ background: #f2ebde;float: left;height: 35px;width: 100%;}




}
@media only screen and (max-width:479px){
	.homePage{background-position: right 95px;background-size: 260px 270px;}

.offerSection .offerContent p, .aboutMe ul li p, .adminPage p, .contactPage ul li p{font-size:16px;line-height:20px;}

}

@media only screen and (max-width:370px){
.shadowContent p br{display:none;}
}