@import url(fundament.css);

@font-face { font-family: 'nexa_boldregular';
             src: url('fonts/Nexa_Free_Bold-webfont.ttf') format('truetype'); }


html, body {
  font-size: 16px; 
  font-family: Arial, serif;
  line-height: 1.5; 
  color: #505050;
  height:100%;
  background: #ffffff;
  margin:0;
  padding:0;
  position:relative;
}

/*################## WRAPPER ####################*/

#wrap {  background: #ffffff; position:relative; width: 100%; overflow:visible; margin:0; padding: 0; }
#wrapper { width: 100%; margin: 0px auto; padding: 0px; text-align:center; overflow:hidden; background: #ffffff; position:relative;  z-index:0; }


/* ############################ */

#sidebar { position:fixed; z-index: 9999; right:0; bottom: 15px; width: 50px; height: 97px; }
.sidenav {  height: 100%; width: 0; position: fixed; z-index: 99999; top: 0; right: -2px; background:#000084; overflow-x: hidden; transition: 0.5s; padding-top: 0px; border-left:2px solid #ffffff; }
ul.menulist { margin-top:78px; margin-left:0px; font-size:100%; font-weight:normal; font-family: "nexa_boldregular", Arial; }
ul.menulist li {  margin-left:0; list-style-type: none; text-transform: uppercase; }
ul.menulist li {  list-style-image:none; width: auto; font-size:100%; line-height:20px; color: #ffffff; }
ul.menulist li a { text-decoration:none; padding: 10px 10% 10px; padding-left: 40px; color: #ffffff; }
ul.menulist li a:hover { color:#7c7c7c; background: #111111; }
                                             
.sidenav a { padding: 8px 8px 8px 0px; text-decoration: none; font-size: 100%; color: #ffffff; display: block; transition: 0.3s; }
.sidenav .closebtn { position: absolute; top: 0px; left:40px; font-size: 40px; margin-left: 0px; margin-bottom:20px; color:#ffffff; }
.sidenav a.closebtn:hover { color:#ffffff; }
#mySidenav ul.menulist li:focus { background: #ffffff;}


/*################################ --- ############################### */

#header { position:fixed; z-index:9999; margin:0px auto; padding:0; width:100%; text-align:left; overflow:hidden; background: #000084; }
#header .inside { position: relative; margin:0 auto; padding:0; width: 100%; max-width: 980px; min-height:70px; overflow:hidden;  }

#header .logo { float:left; width: 175px; margin: 0; margin-top: 5px; padding:0; }

.headerheightori { height:70px !important; transition: all .4s ease-in-out; }
.headerheight { height:70px !important; }

.logowidthori img { transition: all .4s ease-in-out;  }
.logowidth img {  }

.navigationstickyori { margin-top:0px !important; transition: all .4s ease-in-out; }
.navigationsticky { margin-top:0px !important; }

#home .headerheightori { margin-top:35px !important; }
#home .headerheight { margin-top:0px !important; }

#header .navbar { float:right; list-style:none; margin:0; margin-top: 0px; padding:0; width: calc(100% - 300px); position:relative; }
#header .navbar ul { display: flex; margin:0; margin-left:0; margin-top: 0px; list-style-type:none; }
#header .navbar li {  border: 2px solid transparent; flex:1; position:relative; display:block; text-transform: uppercase; list-style-type:none; margin:0; padding: 30px 8px; text-align:center; font-size:86%; font-weight:normal; transition-duration: 0.5s; font-family: "nexa_boldregular", Arial; }
#header .navbar li a { white-space: nowrap;  color: #ffffff;  text-decoration:none; padding: 30px 8px; }
#header .navbar li a:hover { color:#7c7c7c; background: #111111; }
#header .navbar li:last-child { padding-right:0; }
#header .navbar li.active a {  color: #f26c4f;}


#header .inside .menuicon {  display:none; visibility:hidden; position:absolute; top:13px; right: 0px; width:90px; height: 44px;  }
#header .inside .menuicon span { cursor:pointer;color:#b9d037; }
#header .inside .menuicon span:focus { border: 1px solid #b9dbaa;}

/*################################ --- ############################### */

#container { position:relative; margin: 0px auto; padding:0; padding-bottom: 0px; width:100%; text-align:left; overflow:hidden; background: #ffffff;}

.containermtopori { margin-top:0px !important; transition: all .4s ease-in-out; }
.containermtop { margin-top:0px !important; }

#container #main { margin:90px auto 0 auto; padding:0; width: 100%; overflow:hidden; text-align:left; }
#container #main .inside { margin: 0px auto; padding:40px 0; width: 100%; max-width: 980px; overflow:hidden;  }

#container #main section { margin:0 auto; padding:0; height: auto; overflow:hidden;}
#container #main section .inside { width:100%; max-width: 980px; }

/*#container #main section#hausbau {  background: url(../images/bg_hausbau.jpg) 10% 100px no-repeat; background-size: 200%; }*/
/*#container #main section#kuemmern {  background: url(../images/bg_kuemmern.jpg) top left no-repeat; background-size: cover; }*/
#container #main section#haeuser {  background: url(../images/bedge_grunge.png) top left; }
#home #container #main section { padding-top: 45px; padding-bottom: 60px; }
#home #container #main  { padding-top: 0px; margin-top: 0;}

.parallax {
  position: relative;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center;
}

.parallax-1 {
  min-height: 270px;
  background-image: url(../images/bg_hausbau.jpg);
}
.parallax-2 {
  min-height: 270px;
  background-image: url(../images/bg_kuemmern.jpg);
}


#container h1 { margin:0; margin-bottom: 25px; padding:0; color:#000000; font-size: 48px; font-weight:normal; text-transform: uppercase; text-align:center; font-family: "nexa_boldregular", Arial; ;  }
#container h2 { margin:0; margin-top: 5px; margin-bottom: 20px; padding:0; color:#000000; font-size: 30px; font-weight:bold; font-family: "nexa_boldregular", Arial; }
#container h3 { margin:0; margin-top: 20px; margin-bottom: 15px; padding:0; color:#000000; font-size: 24px; font-weight:normal; width:100%; font-family: "nexa_boldregular", Arial; }
#container h4 { margin:0; margin-top: 20px; margin-bottom: 15px; padding:0; color:#000000; font-size: 20px; font-weight:normal; width:100%; font-family: "nexa_boldregular", Arial; }
#container h5 { margin:0; margin-top: 20px; margin-bottom: 7px; padding:0; color:#000000; font-size: 18px; font-weight:bold; width:100%; font-family: "nexa_boldregular", Arial; }
#container h6 { margin:0; margin-top: 20px; margin-bottom: 7px; padding:0; color:#000000; font-size: 18px; font-weight:bold; width:100%; font-family: "nexa_boldregular", Arial; }
#container h1.abstand { margin-bottom:80px; }

#container p { margin: 0; margin-bottom: 0px; margin-bottom: 0.8em; padding: 0; color: #000000; font-size: 87%; font-weight: normal; line-height: 1.5; }
#container p.blocksatz { text-align:justify; }
#container p.kleiner { font-size: 71%; }
#container p.linksbuendig { text-align:left !important; }
#container p a { color: #f26c4f !important; text-decoration:underline !important; }

#container p a:hover, #container .ce_download a:hover { color:#000000; }
#container p a:visited, #container .ce_download a:visited { color:#000000; }
#container p a:active, #container .ce_download a:active { color:#000000; }

#container ul { margin:0; padding:0; list-style-type:disc; width:100%; }
#container ul li { list-style-type:disc; margin:0; margin-left: 15px; margin-bottom: 0.4em; padding:0; width: auto; text-align:left; font-size: 87%; color: #555555; font-weight: normal; line-height:1.5;}
#container ol li { list-style-type:decimal; margin:0; margin-left: 23px; margin-bottom: 0.4em; padding:0; width: 98%; text-align:left; font-size: 87%; color: #555555; font-weight: normal; line-height:1.5;}
#container ol li a, #container ul li a {color: #505050;  }

#container .zweispaltig { position:relative; float:left; width: 46%; margin:0; padding:0; }
#container .zweispaltig.marginright { margin-right: 8%; }

#container .gallery { margin:0; margin-top: 30px; padding:0; width: 100%; overflow:hidden; }
#container .gallery .gallery_image { float:left; width: 13%; margin:0; padding:0;  margin-right: 1.5%; margin-bottom: 20px; padding: 5px 5px 0px 5px; background: #ffffff; border:1px solid #A9A9A9;  }
#container .gallery .gallery_image img { width: 100%; height: auto;  }

#container .gallery .gallery_image:nth-child(7),
#container .gallery .gallery_image:nth-child(13),
#container .gallery .gallery_image:nth-child(19) { clear:both; }

/*################################ --- ############################### */

#container #main .inside table { margin:0; margin-bottom: 25px; padding:0; width:100%; height:auto; overflow:hidden; border-collapse:separate; }
#container #main .inside table tr { }
#container #main .inside table td { margin:0; padding:5px 0 6px 0;  color: #000000; font-size: 87%; font-weight: normal; line-height:1.3; padding-right:10px; border-bottom: 1px dashed #5a595b; }
#container #main .inside table td a { color:#000000; }

/*################################ --- ############################### */

#footer { position:relative; margin: 40px auto 0 auto; padding:0; width:100%; text-align:left; overflow:hidden; background: #000084; }
#footer .inside {  position:relative; margin:0 auto; padding:40px 0 30px 0;  width: 100%; max-width: 980px; overflow:hidden;   }

#footer .nachoben { position:absolute; top:30px; right:30px; width: 35px; height:35px; }

#footer .inside p { margin:0; margin-bottom: 7px; padding:0; color:#000000; font-weight:normal; line-height:1.2; font-size:12px; }
#footer .inside p a { color: #000000; }  
#footer .inside p a:hover { color: #ffffff; }

#footer ul { margin:0; padding:0; width: 100%; overflow:hidden; list-style:none; font-size:12px; }
#footer ul li { list-style-type: none; float: left; margin-right: 2px; color: #000000; text-decoration: none; font-weight:normal; line-height:1.2; font-size:100%; text-align:right; }
#footer ul li a  { text-decoration: none; color: #898989;}
#footer ul li a:hover  { color:#ffffff;}
#footer ul li a.active  { color:#898989;}

#footer .spalte_links { position:relative; float:left; width: 250px; margin:0; padding:0; }
#footer .spalte_rechts { position:relative; float:right; width: auto; margin:0; padding:0; }


/* ########### SONSTIGES ################# */

img { border:0; }
.hidden {	opacity: 0; }
.visible{ opacity: 1; }
.invisible { display:none; }
a { border:none; outline: 0; }
td { padding:0; }
:focus { background: none; border: 0px dotted #ffffff; }
#skiplink { position: absolute; height: 1px; width: 1px; overflow: hidden; z-index:-10; }
.unsichtbar:not(:focus) {  position: absolute; height: 1px; width: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(100%);  white-space: nowrap; }

.balken { margin:0; padding:0; width:100%; height: 30px; background: #701200; }

.grau { color: #585858; }
.bggrau { background: #585858; }
.schwarz { color: #1d1d1b; }
.weiss { color: #ffffff; }
.rot { color: #de0a09; }
.blau { color: #009fe3; }
.grau { color: #585858; }

.klein { font-size: 0.80em; float:left; padding-bottom: 10px; margin-left:30%; }
.fett { font-weight: bold !important; }
.zentriert { text-align:center; }
.blocksatz { text-align: justify; }
.kleiner { font-size:94%; }
.schriftkleiner { font-size:76%; }

.abstand10px { margin:0; padding:0; padding-top: 10px; height: 10px !important; width:100% !important; }
.abstand15px { margin:0; padding:0; padding-top: 15px; height: 15px !important;  width:100% !important; }
.abstand20px { margin:0; padding:0; padding-top: 20px; height: 20px !important;  width:100% !important; }
.abstand25px { margin:0; padding:0; padding-top: 25px; height: 25px !important;  width:100% !important; }
.abstand30px { margin:0; padding:0; padding-top: 30px; height: 30px !important;  width:100% !important; }
  
.nowrap { white-space: nowrap;}
.floatleft { float:left; }
.floatright { float:right; }
.floatrechts { float:right; }
.paddingoben { margin-top: 5px; }
.margintop { margin-top: 8px;}
.clearing { margin:0; padding:0; clear:both; width:100%; height:0; }
.nomargin { margin-bottom:0 !important;}


/* ########### AUSBLENDEN ################# */
#navmobile { visibility:hidden; display:none; }


/* ######################        RESPONSIV !!!!       #####################*/
/* ########################################################################*/
@media all and (min-device-width: 2000px), all and (min-width: 2000px) {
.parallax { background-size: 100%; }

}

@media all and (max-device-width: 900px), all and (max-width: 900px) {
#header .inside, #footer .inside, #container #main .inside, #container #main section .inside { width: 94%; }
#header .navbar { width: auto; }
#header .navbar li { font-size: 71%; padding: 30px 2px; }
}

/* ########################################################################*/
/* #####################          TABLET           ########################*/
/* ########################################################################*/
@media all and (max-device-width: 768px), all and (max-width: 768px) {
#header .navbar { display:none; visibility: hidden; }
#header .inside .menuicon {  display:block; visibility:visible; top:15px; right:10px; height: 35px; width: 70px;}

#container .zweispaltig { width: 100% !important;} 
#container .zweispaltig.marginright { margin-right: 0%; margin-bottom: 20px; }

/* CSS Responsive table */
#container #main .inside 	table,
#container #main .inside 	table thead,
#container #main .inside 	table tbody,
#container #main .inside table th,
#container #main .inside 	table td,
#container #main .inside 	table tr { display: block; }
#container #main .inside 	table tr { padding-top: 6px; margin-bottom: 0px; }
#container #main .inside 	table td { border: none; position: relative; width:100%; }

#container h1 { margin-bottom: 15px; font-size: 36px; line-height: 1.2; }
#container h2 { margin-top: 5px; font-size: 26px; }
#container h1.abstand { margin-bottom:50px; }

#container .gallery .gallery_image { width: 20%;  margin-right: 2%;  }
#container .gallery .gallery_image:nth-child(7),
#container .gallery .gallery_image:nth-child(13),
#container .gallery .gallery_image:nth-child(19) { clear:none; }

#container .gallery .gallery_image:nth-child(5),
#container .gallery .gallery_image:nth-child(9),
#container .gallery .gallery_image:nth-child(13),
#container .gallery .gallery_image:nth-child(17),
#container .gallery .gallery_image:nth-child(21),
#container .gallery .gallery_image:nth-child(25) { clear:both; }

.headerheightori { height:70px !important;  }
.headerheight { height:70px !important; }
.logowidthori img {  }
.logowidth img {  }
.navigationstickyori { margin-top:30px !important;font-size:100%; }
.navigationsticky { margin-top:30px !important; font-size:100%;}
.containermtopori { margin-top:0px !important; }
.containermtop { margin-top:0px !important; }
.teasermtopori { margin-top:110px !important; }
.teasermtop { margin-top:110px !important; }
}


@media all and (max-device-width: 720px), all and (max-width: 720px) {
#footer .spalte_rechts { float:left; margin-top: 10px; }
#footer ul li { text-align:left; padding-right: 10px; margin-left: 0; line-height: 2; }
}

@media all and (max-device-width: 420px), all and (max-width: 420px) {
#footer ul li {  width: 100%; display:block;}
#container .gallery .gallery_image { width: 28%;  margin-right: 1%;  }
#container .gallery .gallery_image:nth-child(5),
#container .gallery .gallery_image:nth-child(9),
#container .gallery .gallery_image:nth-child(13),
#container .gallery .gallery_image:nth-child(17),
#container .gallery .gallery_image:nth-child(21),
#container .gallery .gallery_image:nth-child(25) { clear:none; }
#container .gallery .gallery_image:nth-child(4),
#container .gallery .gallery_image:nth-child(7),
#container .gallery .gallery_image:nth-child(10),
#container .gallery .gallery_image:nth-child(13),
#container .gallery .gallery_image:nth-child(16),
#container .gallery .gallery_image:nth-child(19),
#container .gallery .gallery_image:nth-child(22),
#container .gallery .gallery_image:nth-child(25) { clear:both; }

}

@media all and (max-device-width: 480px), all and (max-width: 480px) {
#home .headerheightori { margin-top:0px !important; }
#home .headerheight { margin-top:0px !important; }
}

/* ###########################     RETINA      ############################*/
/* ########################################################################*/
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
}


/* ###########################     RETINA      ############################*/
/* ########################################################################*/
@media print {
#wrap {  
       width: 19cm;
        min-height: 24cm;
        padding: 0cm;
        margin: 0cm auto;
        border-radius: 5px;
        background: white;
}
#mySidenav, .navbar, .menuicon, iframe, #copyright, .privacy-msg, #footer .nachoben, section#boxen,  
body#page_kontakt #footer, #home #teaser, .navigationstickyori, .navigationsticky { display:none; }
#container #main section#willkommen .inside { padding-top: 30px; }
#teaser #slider.ohne img { width: 90%; height: auto; }
#teaser { min-height: 100px; margin-top:20px !important; }
.teasermtopori, .teasermtop { margin-top:0px; }
#header { position:relative; box-shadow:none; }
#footer { box-shadow:none; }
.spalte_50 { clear:both; width: 96% !important; margin-right: 0%; margin-bottom: 20px !important; overflow:hidden;  }
#container .uebersicht .box {  }
.box.hidden { opacity: 1; }
.headerheightori, .headerheight { height: 80px; }
#header, #header .inside { height: 80px; min-height: 80px; }
}