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

body {
  background-color: black !important;
}

#headerwrap {
  background-image: url(/images/bathroom.png) !important;
}

.row {
  margin-left: 0;
}

.col {
  flex-grow: 1;
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

#logo {
  margin-left: 72px;
  text-align: left !important;
}

#logo h2 a::before {
  content: '';
  background: url("/images/new-logo.png");
  background-size: 60px 52px;
  background-repeat: no-repeat;
  position: absolute;
  top: 10px;
  left: 36px;
  width: 60px;
  height: 52px;
}

.open {
  flex: 100%;
  transition: all 1s;
  z-index: 10;
  max-width: 1100px !important;
  padding-right: 0px !important;
  padding-left: 0px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 50px;
}

.jobs .open::before {
  content: "\2716";
  position: relative;
  top: 40px;
  right: -10px;
  font-size: 2em;
  color: white;
  text-shadow: 0 0 5px black;
}

.closed {
  transform: scale(1);
  margin-left: 0;
  z-index: 1;
  margin-top: 80px;
}

.folder {
  flex-direction: row;
}

.hidden {
  display: none;
}

.jobs .active {
  display: flex !important;
}

.jobs .inactive {
  display: block;
}

.row .column img {
  object-fit: cover;
  width: 100%;
  box-shadow: 0 0 2px 3px white;
}

h3.fullpageheader {
  color: rgb(255, 255, 255) !important;
  text-shadow: 0 0 5px black;
}

.jobs h1 {
  width: 0;
  margin: 0 0 -60px -3px;
}

.jobs .folder {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  justify-content: start;
}

.image-bf {
  transition: all 1s;
  max-width: 33.2%;
  padding-right: 15px;
  margin-top: 50px;
  margin-bottom: -55px;
}

.image-container {
  transition: all 1s;
}

.image-bf.closed:hover,
.image-container:hover {
  filter: brightness(1.5);
}

.jobHeading>div:nth-child(3) {
  margin-left: 3px;
}

.about .row .column img {
  max-height: 100%;
}

.about .intro {
  max-height: 100%;
  padding: 0 20px;
}

.about .header {
  padding-left: 20px;
}

.about .right {
  text-align: right;
}

.about .right img {
  width: 50%;
}

.about .column {
  padding: 20px;
}

.about .column.intro>img {
  max-height: 350px;
  width: 350px !important;
  height: auto;
}

.about img {
  margin-top: 20px;
}

.jobs .row .column.before,
.jobs .row .column.after {
  height: auto;
  cursor: pointer;
}

.jobs .row .column.before::after,
.jobs .row .column.after::after {
  content: "Vorher";
  position: relative;
  bottom: 25px;
  left: 20px;
  font-size: 1em;
  color: white;
  text-shadow: 0 0 5px black;
}

.jobs .row .column.after::after {
  content: "Nachher" !important;
}

.jobs .folder .jobHeading {
  margin-left: 0px;
  padding: 7px;
}

.jobs .column.header h5 {
  margin-top: 0;
}

.center,
#logo {
  text-align: center;
}

.padded-bottom {
  margin: 100px 0;
  z-index: 20;
}

#logo h2 a:link,
#logo h2 a:visited,
#logo h2 a:hover,
#logo h2 a:active {
  color: black;
}

#logo h3 {
  color: #999 !important;
}

#navcontainer {
  background-color: white;
  border-bottom: 1px solid black;
  max-width: 100vw;
}

#navsepwrap {
  padding: 20px 0 0 0;
  margin: 30px 0 0 0;
}

#menu-button {
  color: #000;
  padding: 0;
}

.page-header {
  text-transform: uppercase;
  margin: -60px 0 30px 0;
}

#sidr li>a {
  color: #757575 !important;
}

#sidr li>a:focus,
#sidr li>a:hover,
#sidr li.active>a {
  color: #000000 !important;
}

.visform textarea,
.visform input[type="text"],
.visform input[type="email"],
.visform input[type="tel"] {
  color: white;
  width: 100%;
}

.kontakt {
  display: flex;
  flex-wrap: wrap;
  padding-top: 20px;
}

.kontakt .col {
  max-width: 50%;
  min-width: 250px;
  width: 50%;
  padding-right: 15px;
  padding-left: 0;
}

.kontakt .second {
  padding-top: 20px;
}

.visBtnCon {
  float: left;
}

.btn.fullpageheader {
  transition: all 1s;
  margin-top: 15px;
  padding: 11px 19px;
  font-size: 17.5px;
  letter-spacing: 1px;
  border-radius: 0px;
  color: #fff;
  text-shadow: none;
  background: transparent;
  border: 1px solid #fff;
  box-shadow: none;
}

.btn.fullpageheader:hover {
  color: #000 !important;
  border: 1px solid #fff !important;
  background: #fff !important;
  text-decoration: none;
}

#footerwrap {
  bottom: 0;
  background-color: dimgray;
}

#footer {
  color: #fff;
}

@media screen and (max-width: 500px) {
  .jobHeading {
    width: 100%;
  }

  .jobs .image-bf {
    max-width: 100%;
    padding-right: 0;
  }
}

@media screen and (min-width: 500px) {

  .row .column.before::after,
  .row .column.after::after {
    content: "Vorher";
    position: relative;
    bottom: 25px;
    left: 20px;
    font-size: 1em;
    color: white;
    text-shadow: 0 0 5px black;
  }

  .row .column.after::after {
    content: "Nachher" !important;
  }

  #logo {
    margin-left: 102px;
  }

  .closed {
    transform: scale(1);
    max-width: 100%;
    margin-left: 0;
  }

  .jobHeading {
    width: 50%;
  }

  .image-bf {
    max-width: 50%;
    padding-right: 15px;
  }
}

@media screen and (min-width: 768px) {

  #logo {
    margin-left: 72px;
  }

  .jobHeading {
    width: 33.33%;
  }

  .image-bf {
    max-width: 33.2%;
  }
}

@media screen and (min-width: 992px) {

  .jobHeading {
    width: 25%;
  }

  .image-bf {
    max-width: 25%;
  }

}

@media (max-width: 576px) {
  .about .column.intro>img {
    max-height: 350px;
    width: 350px;
    height: auto;
  }

  .kontakt .col {
    max-width: 100%;
    width: 100%;
  }
}