body {
  background: #333;
}

.logocolor1 {
  background-color: #45b3a7;
}

.logocolor2 {
  background-color: #869bd5;
}

.logocolor3 {
  background-color: #f89661;
}

.bgdarkgrey {
  background-color: #333;
}

.bgdarkgrey2 {
  background-color: #555;
}

.bgwhite {
  background-color: #FFF;
}

.bglightgrey {
  background-color: #e6e1df;
}

@media only screen and (max-width: 40em) {
  .bglightgrey {
    background-color: #969391;
  }
}
.fontcolor1 {
  color: #000;
}

.fontcolor2 {
  color: #fff;
}

.nobackgroundcolor {
  background-color: transparent;
}

html {
  min-height: 100%;
}

body {
  font: 100% "Source Sans Pro", sans-serif;
  color: #000;
}

body, caption, th, td, input, textarea, select, option, legend, fieldset, ul, li, label, p {
  /* equivalent to 16px */
  line-height: 1.3;
  /* equivalent to 20px */
  -moz-hyphens: auto;
  -o-hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  text-align: justify;
  hyphenate-limit-chars: auto 5;
  hyphenate-limit-lines: 2;
  word-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
  font-size-adjust: 0.5;
  font-weight: lighter;
  text-align: left;
}

th p, td p {
  text-align: left;
}

h1 {
  font-size: 2em;
  /* 2x body copy size = 32px */
  line-height: 1.25;
  /* 45px / 36px */
}

@media (min-width: 43.75em) {
  h1 {
    font-size: 2.5em;
    /* 2.5x body copy size = 40px */
    line-height: 1.125;
  }
}
@media (min-width: 56.25em) {
  h1 {
    font-size: 3em;
    /* 3x body copy size = 48px */
    line-height: 1.05;
    /* keep to a multiple of the 20px line height and something more appropriate for display headings */
  }
}
h2 {
  font-size: 1.625em;
  /* 1.625x body copy size = 26px */
  line-height: 1.15384615;
  /* 30px / 26px */
}

@media (min-width: 43.75em) {
  h2 {
    font-size: 2em;
    /* 2x body copy size = 32px */
    line-height: 1.25;
  }
}
@media (min-width: 56.25em) {
  h2 {
    font-size: 2.25em;
    /* 2.25x body copy size = 36px */
    line-height: 1.25;
  }
}
h3 {
  font-size: 1.375em;
  /* 1.375x body copy size = 22px */
  line-height: 1.13636364;
  /* 25px / 22px */
  margin-top: 0px;
  margin-bottom: 0px;
}

@media (min-width: 43.75em) {
  h3 {
    font-size: 1.5em;
    /* 1.5x body copy size = 24px */
    line-height: 1.25;
  }
}
@media (min-width: 56.25em) {
  h3 {
    font-size: 1.75em;
    /* 1.75x body copy size = 28px */
    line-height: 1.25;
  }
}
h4 {
  font-size: 1.125em;
  /* 1.125x body copy size = 18px */
  line-height: 1.11111111;
}

@media (min-width: 43.75em) {
  h4 {
    line-height: 1.22222222;
    /* (22px / 18px */
  }
}
.bodyhead {
  position: fixed;
  z-index: -1;
}
.bodyhead img {
  clear: both;
  max-width: none;
  position: absolute;
  top: auto;
  bottom: 0px;
}

.bodymain {
  width: 100%;
}

.bodycontent {
  width: 100%;
  background-color: #FFF;
}

.main-section {
  width: 100%;
  padding: 0px 0px 0px 70px;
  margin: 0px 0px 0px 0px;
}
.main-section p {
  margin-bottom: 0rem;
}
.main-section .text {
  padding: 2px;
  margin: 0px;
  float: right;
}

.content-section {
  width: 100%;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 100px 0px;
}

.content-section-without-margin {
  width: 100%;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
}

.footer-section {
  width: 100%;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  color: #fff;
  background-color: #333;
}
.footer-section p {
  text-align: center;
  color: #fff;
}
.footer-section h1 {
  text-align: center;
  color: #fff;
}

.js div#preloader {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  background: #333 url("../assets/preloader_1.gif") no-repeat center center;
  background-size: 100px 100px;
  z-index: 52;
}

.left-bar {
  position: fixed;
  top: 10%;
  bottom: 10%;
  height: 80%;
  min-width: 140px;
  min-height: 80%;
  z-index: 51;
  background-color: #797770;
  vertical-align: middle;
}
.left-bar .item {
  height: 26%;
  display: table;
  min-width: 140px;
  width: 100%;
  vertical-align: middle;
}
.left-bar .item .item-inner {
  width: 100%;
  height: auto;
  display: table-cell;
  vertical-align: middle;
  background-color: #333;
}
.left-bar .item .item-inner i {
  color: #45b3a7;
  width: 100%;
}
.left-bar .item .item-inner label {
  font-size: 120%;
  color: #000;
  font-size-adjust: 1.8;
  font-weight: 700;
}
.left-bar .itemTwo {
  height: 6%;
  min-height: 20px;
}
.left-bar .itemTwo .item-inner label {
  font-size: 110%;
  color: #000;
  font-size-adjust: 1.8;
  font-weight: 600;
}
.left-bar .itemHead {
  height: 10%;
  min-height: 20px;
}
.left-bar .itemHead .item-inner {
  padding: 5px;
  background-color: transparent;
}

.icon-bar > * {
  padding: 4px;
}

.icon-bar.vertical, .icon-bar.small-vertical {
  height: 80%;
}

.main-menu {
  margin: -20px 0px 0px 0px;
  max-width: 100%;
  min-width: 100%;
  width: 100%;
  height: 150px;
  display: flex;
}
.main-menu .section {
  width: 33.333%;
  padding: 5px;
  display: flex;
}
.main-menu .section label {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: 200%;
  font-weight: lighter;
  line-height: 35px;
  text-align: center;
}

@media only screen and (max-width: 50em) {
  .main-menu .section {
    padding: 3px;
  }
  .main-menu .section label {
    line-height: 25px;
    font-size: 110%;
  }
}
/* max-width 640px, mobile-only styles, use when QAing mobile issues */
.top-bar {
  top: 0px;
  max-width: 100%;
  min-width: 100%;
  width: 100%;
  heigth: 150px;
  background-color: #333;
  text-align: center;
  line-height: 25px;
  display: inline-block;
}
.top-bar .top-bar-section {
  heigth: 150px;
  max-width: 100%;
  min-width: 100%;
  width: 100%;
  line-height: 25px;
}
.top-bar .top-bar-section li {
  display: inline-block;
  width: 33%;
  line-height: 25px;
  text-align: center;
  padding: 5px;
  color: #fff;
  line-height: 25px;
  font-size: 110%;
  font-size-adjust: 1.8;
  font-weight: 600;
  background-color: #797770;
}
.top-bar .top-bar-section li a {
  height: 100%;
  background-color: #797770;
}
.top-bar p {
  color: #fff;
}

.middlemenu {
  background-color: #333;
  color: #fff;
}
.middlemenu .sub-nav dd {
  display: inline-block;
  float: none;
}
.middlemenu .sub-nav dt.active a, .middlemenu .sub-nav dd.active a, .middlemenu .sub-nav li.active a {
  border-radius: 3px;
  font-weight: lighter;
  background: #45b3a7;
  padding: 0.1875rem 1rem;
  cursor: default;
  color: #fff;
}
.middlemenu dl.sub-nav {
  text-align: center;
}
.middlemenu a {
  font-size: 170%;
  font-weight: lighter;
  line-height: 35px;
  text-align: center;
}

@media only screen and (max-width: 50em) {
  .middlemenu {
    margin: 0px;
    padding: 0px;
  }
  .middlemenu .sub-nav dt, .middlemenu .sub-nav dd, .middlemenu .sub-nav li {
    margin: 0px;
  }
  .middlemenu .sub-nav dt.active a, .middlemenu .sub-nav dd.active a, .middlemenu .sub-nav li.active a {
    border-radius: 3px;
    font-weight: lighter;
    background: #45b3a7;
    padding: 4px;
    margin: 0px;
    cursor: default;
    color: #fff;
  }
  .middlemenu a {
    line-height: 25px;
    font-size: 100%;
  }
}
/* max-width 640px, mobile-only styles, use when QAing mobile issues */
.impressum-bar {
  position: fixed;
  left: 0px;
  top: 100px;
  background-color: #797770;
  padding-top: 20px;
  padding-bottom: 20px;
}
.impressum-bar div {
  padding: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.impressum-bar p {
  color: #000;
  margin: 2px;
  line-height: 25px;
  font-size: 100%;
  font-weight: lighter;
  line-height: 35px;
  text-align: center;
}

.impressum-bar-small {
  position: fixed;
  bottom: 0;
  background-color: #797770;
  width: 100%;
  align-items: center;
}
.impressum-bar-small div {
  padding-left: 4px;
  padding-right: 4px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.impressum-bar-small p {
  color: #000;
  margin: 2px;
  line-height: 25px;
  font-size: 100%;
  font-weight: lighter;
  line-height: 35px;
  text-align: center;
}

.layer {
  width: 100%;
  height: 100%;
  text-align: justify;
  hyphens: auto;
  padding: 80px 50px 80px 50px;
}
.layer .column, .layer .columns {
  padding: 10px;
}

.full-width {
  width: 100%;
}
.full-width .row {
  max-width: none;
}

@media only screen and (max-width: 40em) {
  .main-section {
    padding: 40px 0px 0px 0px;
    margin-top: 0px 0px 0px 0px;
  }

  .content-section {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
  }

  .footer-section {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
  }

  .layer {
    padding: 0px 0px 0px 0px;
  }
}
/* max-width 640px, mobile-only styles, use when QAing mobile issues */
@media only screen and (min-width: 40.063em) and (max-width: 64em) {
  .layer {
    padding: 50px 40px 80px 40px;
  }
}
/* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
@media only screen and (min-width: 64.063em) and (max-width: 90em) {
  .layer {
    padding: 50px 70px 80px 70px;
  }
}
/* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */
@media only screen and (min-width: 90.063em) and (max-width: 120em) {
  .layer {
    padding: 50px 100px 80px 100px;
  }
}
/* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */
@media only screen and (min-width: 120.063em) {
  .layer {
    padding: 50px 150px 80px 150px;
  }
}
.item-foundation p, .item-foundation ul, .item-foundation li {
  margin: 0px 25px 0px 25px;
  padding: 10px 0px 5px 0px;
}
.item-foundation h3, .item-foundation h4 {
  padding: 20px 25px 10px 25px;
}
.item-foundation .item-content .item-content-inner {
  background-color: #FFF;
}
.item-foundation .item-content .item-content-inner .h1 .h2 .h3 .h4 {
  margin-top: 0px;
  margin-bottom: 0px;
}
.item-foundation .item-content .item-content-inner .img {
  text-align: center;
  padding: 0px;
}
.item-foundation .item-content .item-content-inner .img-profil {
  text-align: center;
  padding: 0px 0px 20px 0px;
  margin: 0px 80px 0px 80px;
}

.item {
  width: 25%;
}
.item p {
  margin: 0px 25px 0px 25px;
  padding: 10px 0px 15px 0px;
}
.item ul, .item li {
  margin: 0px 25px 0px 25px;
}
.item h3, .item h4 {
  padding: 20px 25px 10px 25px;
}
.item .item-content .item-content-inner {
  background-color: #FFF;
}
.item .item-content .item-content-inner .img {
  text-align: center;
  padding: 0px;
}

.item.big {
  width: 50%;
}

.item-art {
  width: 20%;
}
.item-art .item-content {
  margin: 10px;
}

.item-art.big-art {
  width: 40%;
}

.item .item-content-photography {
  margin: 5px;
}

@media only screen and (max-width: 50em) {
  .item {
    width: 100%;
  }
  .item .item-content {
    margin: 15px 0px 35px 0px;
  }

  .item.big {
    width: 100%;
  }

  .item-art {
    width: 50%;
  }
  .item-art .item-content {
    margin: 5px;
  }

  .item-art.big-art {
    width: 100%;
  }
}
/* max-width 640px, mobile-only styles, use when QAing mobile issues */
@media only screen and (min-width: 50em) and (max-width: 64em) {
  .item {
    width: 50%;
  }
  .item .item-content {
    margin: 20px 20px 50px 20px;
  }

  .item.big {
    width: 100%;
  }
}
/* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
@media only screen and (min-width: 64.063em) and (max-width: 90em) {
  .item {
    width: 50%;
  }
  .item .item-content {
    margin: 40px 40px 80px 40px;
  }

  .item.big {
    width: 100%;
  }
}
/* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */
@media only screen and (min-width: 90.063em) and (max-width: 120em) {
  .item {
    width: 33%;
  }
  .item .item-content {
    margin: 50px 50px 80px 50px;
  }

  .item.big {
    width: 66%;
  }
}
/* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */
@media only screen and (min-width: 120.063em) {
  .item {
    width: 33%;
  }
  .item .item-content {
    margin: 75px 75px 110px 75px;
  }

  .item.big {
    width: 66%;
  }
}
.img p {
  text-align: right;
  color: #333;
  padding-top: 5px;
  font-size: 90%;
}

.infoblock {
  height: 28px;
  background-color: #797770;
}
.infoblock .year, .infoblock .lenght, .infoblock .text {
  height: 28px;
  padding: 2px;
  margin: 0px;
  color: #000;
  float: right;
}

.infoblock-design {
  height: auto;
  padding: 5px;
  background-color: #797770;
}
.infoblock-design .year, .infoblock-design .lenght, .infoblock-design .text {
  padding: 2px;
  margin: 0px;
  color: #000;
  text-align: right;
}

.infoblock-photography {
  height: auto;
  padding: 5px;
  background-color: #797770;
}
.infoblock-photography .year, .infoblock-photography .lenght, .infoblock-photography .text {
  padding: 2px;
  margin: 0px;
  color: #000;
  text-align: right;
}

.more-btn {
  text-align: right;
}

.moreKunst-btn {
  text-align: center;
}

.closebtn {
  text-align: center;
  padding-top: 20px;
}

.blur-up {
  -webkit-filter: blur(5px);
  filter: blur(5px);
  transition: filter 400ms, -webkit-filter 400ms;
}

.blur-up.lazyloaded {
  -webkit-filter: blur(0);
  filter: blur(0);
}

/*# sourceMappingURL=style.css.map */