body {
    background-color:#dedede;
    font-family:Arial;
    margin:0;
    padding:0;
}
h2 {
    padding-top: 13px;
    line-height: 20px;
    margin: 0 0 3px 0;
    font-size:16px;
    color:#fff;
    text-transform:uppercase;
}
h4 {
  margin-left: 12px;
}
a {
    border:none;
}
a.box, #footer a {
    text-decoration:none;
}
a[href^="tel"] {
		color:white;
		cursor:text;
		text-decoration:none;
}
.prom {
    color: rgb(3, 109, 166);
    margin-bottom: 5px;
    display: block;
    font-size:15px;
}
.mailform, .umbruch1, .umbruch3 {
	display:none;
}
#content a {
    color:#036da6;
}

.done {
	display:none;
	margin-left:13px;
}
#content ul li {
    list-style:none;
    margin-bottom:5px;
    font-size:13px;
    padding-right:13px;
}

#index  picture img {
	width:100%;
	height:100%;
}
.grid80 {
	width: calc(100% - 253px);
	float:left;
}

.grid20 {
	position:relative;
	width:35%;
	float:left;
	height:229px;
	right:0px;
}

textarea {
	width: 92% !important;
  min-height: 200px;
  max-height: 200px;
}
input, textarea {
  background-color: #dde0e3;
  margin-top: 22px;
  padding: 0;
  font-size: 14pt;
  height: 30px;
  width: 245px;
  resize: none;
}
#content ul li::before {
  content: "-";
  margin-left: -15px;
  margin-right: 10px;
}

#content ul.noListstyle li::before {
  content: "";
  margin-left: 0;
  margin-right: 0;
}

#content ul.noListstyle li i {
  margin-left: -23px;
  margin-right: 10px;
}

#content ul li strong.headline {
  display: inline-block;
  margin-bottom: 4px;
}

fieldset {
    border:none;
}

#footer a {
    color:#858686;
}

.clear {
    clear:both;
}

#wrapper {
    width:960px;
    margin:0 auto;
    background-color:#f2f2f2;
    padding:36px;
}

.gapLeft {
    float:left;
    width:470px;
}

.gapRight {
    float:left;
    width:490px;
}

.box {
    float:left;
    border-radius:10px;
    margin-bottom:20px;
    overflow:hidden;
}

.box2 {
    float:left;
    border-radius:10px;
    overflow:hidden;
}

#logobox {
    background-color:#fff;
    width:428px;
    height:110px;
    padding:28px 21px;

}

#contentPage #logobox {
    width:calc(100% - 41px);
    height:189px;
    position:relative;
    box-shadow: 0px 5px 31px 0px rgba(0,0,0,0.12);
}

#breadcrumb {
    background-color:green;
    margin-left:-21px;
    padding:10px 21px 14px 21px;
    width:calc(100% - 42px);
    bottom:0;
    height:20px;
    background-color:#dadcdd;
    position:absolute;
    color:#036da6;
}

#breadcrumb a {
    color:#036da6;
    text-decoration:underline;
}

#breadcrumb i {
    font-size:22px;
    text-decoration:underline;
}

.bcAbstand {
    margin:0 10px;
}

#ctaHeader {
    position:absolute;
    right:21px;
    top:32px;
    color:#00447f;
}

#contentPage #logobox img {
	margin-top:18px;
}



li.mobil {
	display:none;
}

#ctaHeader span {
    display: block;
}
#ctaHeader #cta01 {
    text-transform: uppercase;
    color:#0074b3;
    font-size: 20px;
    margin-bottom: 5px;
    font-weight:bold;
}
#ctaHeader #cta02 {

}
#ctaHeader #cta03 {
    font-size: 33px;
    margin-top: 12px;
    font-weight:bold;
}
#logobox2 {
    background-color:#fff;
    width:205px;
    height:52px;
    padding:14px 10px;
    display:none;
    text-align:center;
}

#navi {
    margin-right:20px;
    width:225px;
    text-transform:uppercase;
    font-size:13px;
    box-shadow: 0px 5px 31px 0px rgba(0,0,0,0.12);
    float:left;
    font-weight:bold;
    color:#0074b3;
}

a#mobilNav i {
    text-decoration:none;
    color:#fff;
}

a#mobilNav {
    position:absolute;
    right:0px;
    height:100%;
    margin-top: -32px;
    padding:11px 20px;
    background-color: rgb(156, 159, 160);
    transition:0.3s;
    display:none;
}

a#mobilNav:hover {
      background-color: rgb(3, 109, 166);
}

#navi ul {
    list-style:none;
    padding:0;
    margin:0;

}

#navi ul > li {
    background-color:#f4f4f4;
    border-bottom:solid #ced0d2 2px;
}

#navi ul li a {
    display:block;
    color:#0074b3;
    text-decoration:none;
    padding:20px 12px;
    transition:0.3s;
}

#navi ul li a:hover {
    background-color:#ebebeb;
}

#navi ul li:last-child {
    border:none;
}

#navi ul li img {
    margin-right: 10px;
}

#content {
    background-color:#f4f4f4;
    box-shadow: 0px 5px 31px 0px rgba(0,0,0,0.12);
   /* width:74.47%;*/
    width:calc(100% - 245px);
    padding-bottom:13px;
}

#content h1.headline {
    background-color:#036da6;
    height:auto;
    margin:0;
    padding:13px;
    font-size: 22px;
    text-transform: uppercase;
    color: #fff;
}

#content h2.headline {
    border-bottom:solid #0074b3 2px;
    margin:13px;
    color:#0074b3;
}

#content p {
    font-size: 13px;
    margin:13px 13px;

}


#content img {
    float:right;
    margin:0 13px;
	margin-bottom:10px;
    border-radius:10px;
    overflow:hidden;
    border:solid 3px #b4b8bb;
}

#profilbox,
#profilbox2 {
    width:225px;
    height:277px;
    margin-left:20px;
}

 #profilbox2 {
        display:none;
}
    #ctabox2 {
        display:none;
}

/* CTA BoX */
#ctabox,
#ctabox2 {
    position:relative;
    color:#fff;
    width:225px;
    margin-left:20px;
    text-align:center;
}

#ctabox h2 {
    font-size:20px;
    line-height:25px;
}
#ctaSec1 {
    width:100%;
    height:135px;
    background-color:#023c6f;
    overflow:auto;
    text-transform:uppercase;

}

#ctaSec2 {
    width:100%;
    height:62px;
    background-color:#00447f;
    position:relative;
}


#ctaSec5 {
    width:100%;
    height:81px;
    background-color:#00447f;
    font-weight:bold;
    font-size:21px;
}

#ctaSec3 {
    width: calc(100% - 20px);
    height:19px;
    background-color:#023c6f;
    font-size:13px;
    text-align:center;
    padding:10px;
    color:#fff;
}

#ctaSec4 {
    position:absolute;
    top:68px;
    font-size:114px;
    left: calc(50% - 49px);
}

/****************************************/

.iconBox {
    width:100%;
    text-align:center;
}

.descBox {
    width: calc(100% - 26px);
    padding:0 13px 13px 13px;
    font-size:13px;
}

#seniorenbox {
    height:293px;
    width:225px;
}

#senIconSec {
    height:186px;
    background-color:#0074b3;
}
#senIconSec img {
    margin:29px 0;
}
#senDescSec {
    height:107px;
    background-color:#036da6;
    color:#05bde7;
}

#bodenlegerbox {
    height: 350px;
    width:225px;
    margin-left:20px;
}

#bodenIconSec {
    height:243px;
    background-image:url(../images/kachelbg.png);
    background-repeat:no-repeat;
    background-position:center;
    background-color:#0074b3;
}

#bodenIconSec img {
    margin:61px 0;
}

#bodenDescSec {
    height:107px;
    background-color:#036da6;
    color:#50b4ff;
}

#wohnungsbox {
    height:286px;
    width:225px;
    margin-left:20px;
    margin-top:-53px;
}

#profilbox {
    height:267px;
    width:225px;
    margin-left:20px;
}
#profilIconSec {
    height:159px;
    background-color:#0074b3;
}
#profilDescSec {
    height:146px;
    background-color:#00447f;
    color:#fff;
}
#wohnungsIconSec {
    height:140px;
    background-color:#0074b3;
}
#wohnungsbox i {
    font-size:100px;
    margin:21px 0;
    color:#fff;
}

#wohnungsDescSec {
    height:146px;
    background-color:#036da6;
    color:#05bde7;
}

#picturebox01 {
    height:206px;
    width:225px;
    margin-left:20px;
}

#picturebox02 {
    height:284px;
    width:225px;
    margin-top:-57px;
}


#malerbox {
    height: 227px;
    width:225px;
    margin-left:20px;
}

#malerIconSec {
    height:120px;
    background-image:url(../images/malerbrush.png);
    background-repeat:no-repeat;
    background-position:center;
    background-position-y: -14px;
    background-color:#0074b3;
}

#malerIconSec img {
    margin:17px 0;
}

#malerDescSec {
    height:107px;
    background-color:#036da6;
    color:#05bde7;
}

#kontaktbox {
    height:193px;
    width:225px;
    margin-left:20px;
}

#kontaktIconSec {
    height:86px;
    background-color:#00447f;
}
#kontaktIconSec img {
    margin:20px 0;
}
#kontaktDescSec {
    height:107px;
    background-color:#023c6f;
    color:#fff;
}

#aboutbox {
    height:220px;
    width:225px;
    margin-left:20px;
    margin-top:-27px;
}

#aboutIconSec {
    height:113px;
    background-color:#00447f;
}
#aboutIconSec img {
    margin:12px 0;
}
#aboutDescSec {
    height:107px;
    background-color:#023c6f;
    color:#fff;
}

#footer {
  width: 1032px;
  height: auto;
  background-color: #dedede;
  margin: 12px auto;
  font-size: 14px;
  color: #858686;
  text-align: right;
}

@media (max-width: 1065px) {
    .gapLeft, .gapRight {
        float:none;
        margin:0 auto;
        width:470px;
    }
    #index #wrapper {
        width:520px;
}

    #contentPage #wrapper {
        width:calc(100% - 72px);
    }

    #footer {
        width:592px;
    }
    #profilbox,
    #wohnungsbox,
    #kontaktbox {
        margin-left:0px;
    }

    #profilbox,
    #ctabox {
        display:none;
}

     #profilbox2 {
        display:block;
        margin-left:0px;
}
    #ctabox2 {
        display:block;
}
	#ctabox2 #ctaSec3 {
		text-align:center;
	}

    #seniorenbox {
        margin-top:-40px;
    }
    #picturebox02 {
        margin-top:-97px;
    }

			.grid80 {
			float:none;
			width:100%;
		}
		.grid20 {
			float:none;
		}


}

@media (max-width: 956px) {
    #contentPage #wrapper {
            width:96%;
            padding:2%;
    }
    #contentPage #logobox {
            height:auto;
       }
    #breadcrumb {
        position:static;
        margin-bottom:-28px;
        width:100%;
    }
        #ctaHeader {
            position:static;
            text-align:center;
            margin-top:25px;
            background-color: rgb(244, 244, 244);
            padding:26px 0;
            margin-left:-21px;
            width:calc(100% + 42px);
        }
        #contentPage #logobox img {
            display:block;
            margin:0 auto;
        }
}


@media (max-width: 608px) {
    #navi {
        display:none;
    }

	li.desktop {
		display:none;
	}
	li.mobil {
		display:block;
	}


    #navi.box2.active {
        display:block;
        position:absolute;
        margin-top:-1px;
        width:96%;
    }

    a#mobilNav {
        display:block;
    }
    #content {
        width:100%;
    }

    #index #logobox {
        display:none;
    }

    #contentPage #logobox img{
        width:82%;
    }

    #ctaHeader #cta01 {
        font-size:5vw;
    }
    #ctaHeader #cta02 {
        font-size:4vw;
    }
    #ctaHeader #cta03 {
    font-size:6vw;
    }




    #logobox2 {
        display:block;
        padding:28px 0;
        height:auto;
    }
    #logobox2 img {
        width:90%;
    }

    #index #wrapper {
        width:calc(100% - 72px);
    }
    #footer {
        width:calc(100% - 72px);
    }
    .gapLeft, .gapRight {
        max-width:100%;
    }
    #logobox2, #profilbox2, #wohnungsbox, #ctabox2, #seniorenbox, #bodenlegerbox, #picturebox02, #malerbox, #wohnungsbox, #picturebox01, #kontaktbox, #aboutbox {
        margin:0 auto;
        margin-bottom:20px;
        width:100%;
    }
    #profilbox2, #profilIconSec, #picturebox02, #picturebox01, #seniorenbox, #senDescSec, #bodenlegerbox, #bodenDescSec, #malerbox, #malerDescSec, #wohnungsbox, #wohnungsDescSec, #kontaktbox, #kontaktDescSec, #aboutbox, #aboutDescSec {
        height:auto !important;
    }
    #profilbox2 img, #picturebox02 img, #picturebox01 img {
  width: 100%;
  height: auto;
  margin-bottom: -5px;
}
#profilDescSec {
	height: auto;
}

}

@media (max-width: 703px) {
	span.umbruch0 {
		display:none !important;
	}
	span.umbruch1 {
		display:block;
	}
}

@media (max-width: 321px) {
	span.umbruch2 {
		display:none !important;
	}
	span.umbruch3 {
		display:block;
	}
}

@media (max-width: 474px) {
	span.invisible, span.bcAbstand  {
		display:none;
	}

}

@media (max-width: 400px) {
    #logobox2, #profilbox2, #wohnungsbox, .descBox, #ctaSec3, #seniorenbox, #bodenlegerbox, #picturebox02, #malerbox, #wohnungsbox, #picturebox01, #kontaktbox, #aboutbox {
   height:auto !important;
    }
}
@media (max-width: 325px) {
    #footer {
        font-size:8px;
    }
}