h2, .h2 {
  font-size: 1.5em;
}

.h1, h1 {
  font-size: 1.5em;
}

.footer-wrapper {
  margin-top: 100px;
}

.container {
  padding-left: 100px;
  padding-right: 100px;
  position: relative;
  z-index: 2;
}

.johProjectDescriptionText {
}

.johProjectWrapper {
  margin-top: 50px;
}

.johProjectContentWrapper {
  display: flex;
  margin-top: 50px;
  justify-content: center;
  flex-wrap: wrap;
}

.johProjectDescription {
  flex: 0 0 100%;
  font-size: 90%;
  line-height: 1.4;
  text-align: center;
  margin-bottom: 30px;
}

.johProjectGallery {
  flex: 0 0 60%;
}

.johProjectGallerySmall {
  flex: 0 0 23%;
  margin: 1%;
  position: relative;
}

.johProjectGalleryLarge {
  position: relative;
}

.johLinkBack {
  width: 100%;
  text-align: center;
  display: block;
  margin-top: 80px;
  font-size: 90%;
}

.johLinkBack .dashicons {
  line-height: 1.3;
  margin-right: 5px;
}

.johProjectGalleryTop {
  display: flex;
}

.johImpressumWrapper {
  min-height: calc(100vh - 260px);
}

.johProjectGalleryThumbnails {
  display: flex;
  flex-wrap: wrap;
  margin-left: -1%;
  width: 102%;
  margin-top: 1%;
}

.johHeader {
  height: 100vh;
  background-position: center;
  background-size: contain;
  margin-bottom: 50px;
  background-repeat: no-repeat;
}

.johHidden {
  display: none;
}

.nav > li > a {
  color: rgb(0, 0, 0);
}

.nav > li::after {
  content: "/";
  padding-left: 20px;
  font-weight: bold;
}

.nav li:last-child::after {
  content: "";
  padding-left: 0;
}

.transparent .header-main {
  height: 70px;
}

.transparent .header-main {
  height: 70px;
}

.nav-left {
  -ms-flex-pack: start;
  justify-content: center;
}

.nav-right {
  -ms-flex-pack: end;
  justify-content: center;
}

.johHeaderInner {
  /* opacity: 0; */
  position: fixed;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: 400px;
  background-repeat: no-repeat;
  cursor: pointer;
  background-color: white;
  z-index: 999;
}

.johScrollDown {
  position: absolute;
  bottom: 60px;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  justify-content: center;
  display: flex;
  align-items: center;
}

.johScrollDown .dashicons {

}

.johHomepageIntro {
  padding: 140px 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.johHomepageIntroInner {
  max-width: 600px;
}

.johHomepageIntroLeft {

}

.johProjectsProjectsNr {
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
}

.johHomepageProjectsNr {
  left: 0;
  position: absolute;
  top: 22px;
  padding-left: 20px;
  padding-right: 10px;
  padding-bottom: 3px;
  padding-top: 2px;
  opacity: .9;
}

.johProjectDescriptionTitle {
  display: flex;
  margin-bottom: 10px;
}

.johProjectsNr {
  font-family: monospace;
  color: #efefef;
  font-size: 150%;
  font-weight: bold;
  background: #111;
}

.johLightbox {
  display: none;
}

.johHomepageIntroRight {
  flex: 0 0 50%;
  padding-left: 50px;
}

.johProjectsWrapper {
  display: flex;
  justify-content: space-between;
  padding-top: 50px;
  flex-wrap: wrap;
}

.johProjectsItem {
  flex: 0 0 45%;
  position: relative;
  margin-bottom: 10%;
}

.johProjectItemOverlay {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 9;
}

.johProjectItemOverlay:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

.mfp-bg.mfp-ready {
  opacity: .9;
}

.mfp-bg {
  background: #000000;
}

img.mfp-img {
  max-height: 92vh;
}

a {
  color: #111111;
}

.johProjectsItemInner {
  width: 100%;
  height: 0;
  padding-bottom: 65%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
}

.johIntroText {
  text-align: center;
}

.johHomepageIntroTextWrapper {
}

img.johSimonImage {
  margin: 0 30px 30px 30px;
  border-radius: 50%;
  width: 120px;
}

.johSmallHeading {
  text-transform: uppercase;
  font-size: 80%;
}

.johDefaultColor {
  color: #ff8100eb;
}

.johHomepageProjects {
  padding: 100px 10%;
}

.johHomepageProjectsHeadingWrapper {
  text-align: center;
}

.johHomegpageProjectsItems {

}

.johLightBox {
  padding: 40px 50px;
  max-width: 1000px;
}

.johBoxHeading {
  font-size: 140%;
  font-weight: 800;
  margin-bottom: 20px;
}

.johHomegpageProjectsItem {
  display: flex;
  margin: 100px 0 180px;
}

.johImageExpand {
  position: absolute;
  bottom: 20px;
  right: 20px;
  color: #efefef;
  z-index: 4;
  border: 2px solid;
  padding: 2px;
  line-height: 1;
  border-radius: 5px;
  opacity: .8;
}

.johHomegpageProjectsItem h3 {
  line-height: 1;
  margin-top: -3px;
  margin-bottom: 30px;
}

.johHomegpageProjectsItemLeftInner {
  position: relative;
}

.johHomegpageProjectsItem:nth-child(odd) .johHomegpageProjectsItemRight {

}

.johHomegpageProjectsItem:nth-child(even) .johHomegpageProjectsItemRight {
  order: 0;
  padding-left: 0;
  padding-right: 50px;
}

.johHomegpageProjectsItem:nth-child(odd) .johHomegpageProjectsItemLeft {

}

.johHomegpageProjectsItem:nth-child(even) .johHomegpageProjectsItemLeft {
  order: 2;
  padding-right: 0;
  padding-left: 50px;
}

.johHomegpageProjectsItemRightText {
  font-size: 90%;
  line-height: 1.45;
}

.johHomegpageProjectsItemLeft {
  flex: 0 0 50%;
  padding-right: 50px;
}

.johHomegpageProjectsItemRight {
  padding-left: 50px;
  flex: 0 0 50%;
}

.mobile-nav {
  display: none;
}

.footer-primary.pull-left {
  float: none;
  text-align: center;
}



@media only screen and (max-width: 1000px) {

  .container {
    padding-left: 50px;
    padding-right: 50px;
  }

  .johHeaderInner {
    background-size: 300px;
  }

}



@media only screen and (max-width: 800px) {

  .johProjectContentWrapper {
    flex-wrap: wrap;
  }

  .johProjectDescription {
    flex: 0 0 100%;
  }

  .johProjectGallery {
    flex: 0 0 100%;
    margin-left: 0;
    margin-top: 5%;
  }

}



@media only screen and (max-width: 600px) {

  h2, .h2 {
    font-size: 1.3em;
  }

  .johProjectsItem {
    flex: 0 0 100%;
    margin-bottom: 10%;
  }

  .container {
    padding-left: 30px;
    padding-right: 30px;
  }

  .johHeaderInner {
    background-size: 200px;
  }

  .johHomepageProjects {
    padding: 30px 2%;
  }

}