*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

html, body {
  font-family: "Open Sans", Arial, sans-serif;
  font-weight: 300;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background-image: url("/images/patt.png");
  text-align: center;
}

#header {
  width: 100%;
  height: 100%;
  z-index: 1000;
}

#headerbackground {
  background-image: url("/images/headb.jpg");
  background-repeat: no-repeat;
  background-size: 100% auto; background-size: 100vw auto;
  background-position: center center;
  margin: 0em;
  padding-top: 32.65%;
  border-bottom: 4px solid white;
  width: 100%;
}

#navigationmenu {
  left: auto;
  right: auto;
  top: auto;
  bottom: 0;
  position: absolute;
  width: 100%;
}

.largebutton {
  font-size: 6em !important;
  color: #333;
  cursor: pointer;
  vertical-align: middle;
  text-shadow: 1px 1px 0px #FFF, -1px 1px 0px #FFF, 1px -1px 0px #FFF, -1px -1px 0px #FFF;
}

.largebutton i {
  bottom: 0px;
  position: absolute;
  display:table;
  vertical-align:middle;
}

.largebutton:hover {
  color: #CC4100;
  font-size: 6.2em;
}

#pagedownbutton {
  font-size: 6em;
  color: #333;
  height: 100px;
  cursor: pointer;
  -webkit-transition: opacity 0.5s ease-out;
   -moz-transition: opacity 0.5s ease-out;
    -ms-transition: opacity 0.5s ease-out;
     -o-transition: opacity 0.5s ease-out;
        transition: opacity 0.5s ease-out;
  text-shadow: 1px 1px 0px #FFF, -1px 1px 0px #FFF, 1px -1px 0px #FFF, -1px -1px 0px #FFF;
}

#pagedownbutton:hover {
  color: #CC4100;
  font-size: 6.2em;
}

#home {
  display: none;
  font-size: 0.8em;
  margin-top: 8px;
  left: 4em;
}

#kontaktlink {
  display: none;
  font-size: 0.8em;
  margin-top: 8px;
  right: 4em;
}

.smallheader .navtext {
  margin-top: 0.2em;
}

.smallheader #home {
  display: block;
  position: fixed;
}

.smallheader #kontaktlink {
  display: block;
  position: fixed;
}

.smallheader #navigationmenu {
  position: fixed;
  top: 0;
  bottom: auto;
  margin: 0 !important;
  z-index: 1000;
  height: 60px;
}

.smallheader .active {
  color: #CC4100 !important;
  border-bottom: 2px solid !important;
}

.smallheader a {
  padding-bottom: 14px;
  border-bottom: 2px solid transparent;
  -webkit-transition: border 0.5s ease-out;
   -moz-transition: border 0.5s ease-out;
    -ms-transition: border 0.5s ease-out;
     -o-transition: border 0.5s ease-out;
        transition: border 0.5s ease-out;
}

.centerboxwrapper {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.smallheader .centerboxwrapper {
  background-color: #FDFDFD;
  border-bottom: 1px solid #E3E3E3;
  height: 60px;
}

.smallheader #pagedownbutton {
  opacity: 0;
}

.smallheader .fourbox:hover {
  background-color: transparent;
}

.smallheader .fourbox {
  font-size: 0.8em;
  width: 200px;
  border: 8px solid rgba(255,255,255,0.0);
  background-color: transparent;
  margin: 0;
}

.smallheader .fourbox > img {
  display: none;
}

.fourbox {
  display:inline-block;
  width: 300px;
  max-width: 20%;
  font-weight: 100;
  margin: 0 1em;
  background-color: rgb(255,255,255);
  padding-top: 0em;
  border: 8px solid rgba(255,255,255,0.4);
  -webkit-background-clip: padding-box; /* for Safari */
  background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
  cursor: pointer;
  vertical-align: middle;
  -webkit-transition: width 0.5s ease-out;
   -moz-transition: width 0.5s ease-out;
    -ms-transition: width 0.5s ease-out;
     -o-transition: width 0.5s ease-out;
        transition: width 0.5s ease-out;
}

.fourbox:hover {
  background-color: #f5f5f5;
}

.fourbox > img {
  width: 70%;
  height: 70%;
  border: 0.4em solid #ffffff;
  margin: 6px;
}

.smallheader .fourbox > img {
  -webkit-transition-delay: 0.25s; /* Safari */
  transition-delay: 0.25s;
}

.largeicon {
  font-size: 10em !important;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  height: 65%;
  width: 65%;
}

.moved {
  padding-top: 11em !important;
}

.topnav {
  position: absolute;
  top: 5em;
  font-size: 0.5em;
}

.topnav img {
    border: none !important;
}

.extendbox {
  display: none;
  margin: 1em;
}

/* Fixes outline border bug  */
a:active {
    outline: none;
}

a:focus {
  outline: none;
}

.title {
  font-size: 10em;
  font-weight: 900;
  text-align: center;
}

svg {
  user-drag: none; 
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#immobilinfo {
  background-color: #fff;
  min-height: 160px;
}

#back {
  position: absolute;
  left: 3em;
  top: 3em;
}

#back:hover {
  top: 2.5em;
  left: 2.5em;
}

#overlay {
  display: none;
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  top: 25%;
  bottom: 25%;
  left: 10%;
  right: 10%;
  text-align: center;
  background-color: rgba(255,255,255,0.8);
  z-index: 10;
  font-size: 0.8em;
}

#addcontent {
  text-align: left;
  background-color: #fff;
  font-size: 0.8em;
}

#addcontent a {
  display: block;
  font-weight: 100;
  padding: 1em;
}

#addcontent table {
  margin: 4px;
  border-spacing: 10px;
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}

#addcontent .tablewrap {
  text-align: center;
  width: 100%;
  background-color: white;
}

#addcontent img {
  width: 220px;
}

/*
#headline {
  background-color: #ececec;
  border: 1px solid #CECECE;
  color: #898989;
  height: 4em;
  box-sizing: content-box;
}


#headline h1 {
  color: #444;
  display: inline-block;
  margin: 0.3em 0em 0em;
  font-weight: 100;
  width: 100%;
  height: 100%;
}*/

#headline h2 {
  height: 1.5em;
  padding-top: 1em;
}

#close {
  display: inline-block;
  text-align: center;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: absolute;
  z-index: 20;
  font-size: 2em;
  width: 2em;
  height: 1.5em;
  right: 1em;
}

#close:hover {
  background-color: #db4f4f;
  color: white;
}

#content {
  margin: auto;
  text-align: center;
  display: inline-block;
  width: 100%;
}

.fullpagecontent {
  width: 100%;
  text-align: center;
  margin-left: 0;
  margin-right: 0;
  padding-bottom: 2em;
  height: auto;
}

.flex {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

.flexchild {
  -webkit-transition: width 0.3s; /* Safari */
  transition: width 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  overflow: auto;
}                                           

#flexmap {
  width: 100%;
}

.full {
  width: 100% !important;
}

#flexside {
  background-color: rgba(255, 255, 255, 0.5);
  overflow: hidden;
  width: 100%;
}

.text {
  display: inline-block;
  text-align: left;
  width: 720px;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 1.2em;
}

.contact {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 1.4em;
  text-align: left;
}

.impressum {
  font-size: .8em;
  display: inline-block;
  text-align: left;
  width: 720px;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
}

.smallcarousel {
  height: 80%;
}

a:link {
  text-decoration: none;
  font-weight: 600;
  color: #333;
}

a:visited {
  text-decoration: none;
  font-weight: 60;
  color: #333;
}

a:hover {
  text-decoration: none;
  font-weight: 600;
  color: #CC4100;
}

a:active {
  text-decoration: none;
  font-weight: 600;
  color: #CC4100;
}

@media (max-width: 1300px) {
   #header {
    height: auto;
  }
  
  #navigationmenu {
    margin-top: -10%;
    position: static;
  }
  
  .navtext {
    font-size: 100% !important;
  }
}

@media (min-width: 720px) and (max-width: 1050px) {
  #kontaktlink {
    display: none !important;
  }
  
  #home {
    display: none !important;
  }
}


@media (min-width: 1600px) {
  .drawnbackground {
    opacity: 1 !important;
  }
}

@media (max-width: 720px) {         
  #headline h2 {
    font-size: 130%;
    padding-top: 3em;
    padding-bottom: 2em;
  }
  
  #map svg {
    margin-bottom: -50px;
    margin-top: -50px;
  }
  
  .seperator {
    height: 200px !important;
    overflow: hidden !important;
  }
  
  .gallerypic img {
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
  
  .drawnbackground {
    display: none;
  }
  
  #pagedownbutton {
    margin-bottom: 50px;
  }
  
  table {
    font-size: 0.8em;
  }
  
  h1 {
    font-size: 2em !important;
  }
  
  .fourbox {
    max-width: 40%;
    margin: 10px;
    font-size: 90%;
  }
   
  .text {
    padding: 10px;
    width: 100%;
    font-size: 16px;
  }
}

@media (min-width: 1024px) {
  .flexmap {
    width: 40%;
  }
  .flexside {
    width: 60% !important;
  }
}

.smallcontent {
  display: inline-block;
  /* background-color: rgba(255,255,255,0.6); */
  color: #666;
  padding: 1em;
}

.parralaximage {
  text-align: center;
}

.parralaximage > h1 {
  font-size: 3em;
  margin-top: 0em;
  font-weight: 200;
}

h1 {
  color: #555;
  margin-top: 0.2em;
  font-size: 4em;
  font-weight: 200;
  text-align: center;
}

.navtext {
  margin-top: 0.2em;
  font-size: 1.8em;
  margin-top: 0.4em;
  font-weight: 100 !important;
  display: block;
  color: #555;
}

.navtext:hover {
  color: #CC4100;
}

small {
  color: #333;
}

footer {
  background-color: #fff;
  display: block;
  width: 100%;
  text-align: center;
  position: relative;
	bottom: 0;
	left: 0;
  font-size: 0.7em;
  height: 3em;
}

.anchor:before { 
  content: ''; 
  display: block; 
  position: relative; 
  width: 0; 
  height: 150px; 
  margin-top: -150px; 
}

.subcolor {
  padding: 2em;
  margin-top: -150px;
  background-color: white;
}

h2 {
  font-size: 2em;
  font-weight: 100;
  color: #333;
}

table {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px;
}

td {
  vertical-align: top;
  padding-left: 4px;
  padding-right: 4px;
}

.seperator {
  width: 100%;
  height: 400px;
  z-index: -1;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
  -webkit-background-size: 100%; 
  -moz-background-size: 100%; 
  -o-background-size: 100%; 
  background-size: 100%; 
  -webkit-background-size: cover; 
  -moz-background-size: cover; 
  -o-background-size: cover; 
  background-size: cover;
  margin-top: 100px;
  margin-bottom: 50px;
  border-top: 4px solid white;
  border-bottom: 4px solid white;
  -webkit-box-shadow: inset 0px 0px 16px -5px rgba(0,0,0,0.62);
  -moz-box-shadow: inset 0px 0px 16px -5px rgba(0,0,0,0.62);
  box-shadow: inset 0px 0px 16px -5px rgba(0,0,0,0.62);
}

#lkwseperator {
  background-image: url("../images/seperator_lkw.jpg");
  font-size: 1.5em;
  color: white;
}

#lkwseperator p {
  background-color: #333c;
  margin-top: 0;
  padding-bottom: 1em;
}

#lkwseperator img {
  display: inline-block;
  margin-top: 0.5em;
}

#pizzeriaseperator {
  background-image: url("../images/seperator_pizzeria.jpg");
}

#eisenbahnseperator {
  background-image: url("../images/seperator_eisenbahn.jpg");
}

#carreraseperator {
  background-image: url("../images/seperator_carrera.jpg");
}

#ladestationenseperator {
  background-image: url("../images/seperator_ladestationen.jpg");
}

#photovoltaikseperator {
  background-image: url("../images/seperator_photovoltaik.jpg");
}

#kontaktseperator {
  background-image: url("../images/pattern.png"), url("../images/drone.jpg");
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
}

.drawnbackground {
  position: absolute;
  width: 40em;
  right: 2em;
  max-width: 30%;
  opacity: 0.5;
}

.drawnleft {
  right: auto !important;
  left: 2em;
}

.gallery {
  display: inline-block !important;
}

.gallery img {
  margin-left: 25px !important;
  margin-right: 25px !important;
}

.gallerypic {
  text-align: center;
}

.gallerypic img {
  margin-left: 110px;
  margin-right: 110px;
  max-height: 600px;
  max-width: 100%;
}

#mapview {
  display: block;
  margin: 25px auto;
  padding-bottom: 50px;
  max-width: 80%;
}
  
#map svg {
  max-height: 680px;
  margin-top: 50px;
  margin-bottom: 50px;
}

.featherlight .featherlight-content {
  max-width: 90%;
}

.centerlogo {
  display: block;
  text-align: center;
  margin: auto;
  width: 60%;
  max-width: 600px;
  padding: 40px;
}

.flyer {
  display: block;
  text-align: center;
  margin: auto;
  width: 80%;
  max-width: 800px;
  padding: 20px;
}

/*
.centerlogo {
  display: block;
  text-align: center;
  margin: auto;
  width: 40%;
  max-width: 400px;
  padding: 40px;
}
*/