/* ==========================================================================
Fonts
========================================================================== */
@font-face {
  font-family: 'Monda';
  src: url('fonts/Monda-Bold.eot');
  src: url('fonts/Monda-Bold.eot?#iefix') format('embedded-opentype'), url('fonts/Monda-Bold.woff2') format('woff2'), url('fonts/Monda-Bold.woff') format('woff'), url('fonts/Monda-Bold.svg#Monda-Bold') format('svg');
  font-weight: 700;
  font-style: normal;
  font-stretch: normal;
  unicode-range: U+0020-02DC;
}
@font-face {
  font-family: 'Monda';
  src: url('fonts/Monda-Regular.eot');
  src: url('fonts/Monda-Regular.eot?#iefix') format('embedded-opentype'), url('fonts/Monda-Regular.woff2') format('woff2'), url('fonts/Monda-Regular.woff') format('woff'), url('fonts/Monda-Regular.svg#Monda-Regular') format('svg');
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  unicode-range: U+0020-02DC;
}
@font-face {
  font-family: 'Philosopher';
  src: url('fonts/Philosopher-Regular.eot');
  src: url('fonts/Philosopher-Regular.eot?#iefix') format('embedded-opentype'), url('fonts/Philosopher-Regular.woff2') format('woff2'), url('fonts/Philosopher-Regular.woff') format('woff'), url('fonts/Philosopher-Regular.svg#Philosopher Regular') format('svg');
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  unicode-range: U+0020-0308;
}
@font-face {
  font-family: 'Philosopher';
  src: url('fonts/Philosopher-Bold.eot');
  src: url('fonts/Philosopher-Bold.eot?#iefix') format('embedded-opentype'), url('fonts/Philosopher-Bold.woff2') format('woff2'), url('fonts/Philosopher-Bold.woff') format('woff'), url('fonts/Philosopher-Bold.svg#Philosopher-Bold') format('svg');
  font-weight: 700;
  font-style: normal;
  font-stretch: normal;
  unicode-range: U+0020-0308;
}
@font-face {
  font-family: 'TrajanPro';
  src: url('fonts/TrajanPro-Bold.eot');
  src: url('fonts/TrajanPro-Bold.eot?#iefix') format('embedded-opentype'), url('fonts/TrajanPro-Bold.woff2') format('woff2'), url('fonts/TrajanPro-Bold.woff') format('woff'), url('fonts/TrajanPro-Bold.svg#TrajanPro-Bold') format('svg');
  font-weight: 700;
  font-style: normal;
  font-stretch: normal;
  unicode-range: U+0020-00FE;
}
@font-face {
  font-family: 'TrajanPro';
  src: url('fonts/TrajanPro-Regular.eot');
  src: url('fonts/TrajanPro-Regular.eot?#iefix') format('embedded-opentype'), url('fonts/TrajanPro-Regular.woff2') format('woff2'), url('fonts/TrajanPro-Regular.woff') format('woff'), url('fonts/TrajanPro-Regular.svg#TrajanPro-Regular') format('svg');
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  unicode-range: U+0020-00FE;
}
/* ==========================================================================
Main
========================================================================== */
.gold-overlay {
  background-color: rgba(204, 140, 0, 0.5);
}
.left {
  float: left;
  display: inline-block;
}
.right {
  float: right;
  display: inline-block;
}
.center {
  position: relative !important;
  top: 50%;
  transform: translateY(-50%);
}
.center2 {
  position: absolute !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.dark-pattern {
  background: black;
  opacity: 0.5;
  width: 100%;
  height: 100%;
  z-index: 10;
  position: fixed;
  top: 0;
}
.clearfix {
  zoom: 1;
}
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
body {
  background: #333333;
  font-family: 'Philosopher';
  font-weight: 400;
}
#header {
  position: absolute;
  z-index: 100;
}
.close-home-buttons {
  position: fixed;
  top: 40px;
  right: 40px;
  text-transform: uppercase;
  font-size: 0.85em;
  text-align: center;
}
.close-button,
.home-button {
  float: left;
  display: inline-block;
  width: 45px;
  height: 45px;
  display: block;
  margin-right: 10px;
}
.close-button {
  background: url("close.svg");
  background-repeat: no-repeat;
  background-position-y: 5px;
  overflow: hidden;
  transition: all 1s;
}
.home-button {
  background: url("home.svg");
  background-repeat: no-repeat;
  background-position-y: 5px;
  overflow: hidden;
  transition: all 0.75s;
}
.navi-hinweis-home,
.navi-hinweis-close {
  color: #ffffff;
  font-size: 1em;
  padding-top: 45px;
  display: block;
  transition: all 0.75s;
}
.home-button:hover,
.close-button:hover {
  background-position-y: -40px;
}
.home-button:hover .navi-hinweis-home {
  color: #d3b21f;
  padding-top: 10px;
}
.close-button:hover .navi-hinweis-close {
  color: #d3b21f;
  padding-top: 10px;
}
.galerie-button {
  margin: 50px 10px 0 10px;
  padding: 5px 10px 7px 10px;
  border: solid white 1px;
  color: #ffffff;
  display: inline-block;
  text-transform: uppercase;
}
.galerie-button:hover {
  padding: 10px;
  border: solid #d3b21f 1px;
  color: #d3b21f;
}
.image-background {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: -1;
}
.image-background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pattern-background {
  height: 100%;
  width: 100%;
  background-image: url('dark-pattern2.png');
  -webkit-box-shadow: inset 0px 0px 150px 125px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: inset 0px 0px 150px 125px rgba(0, 0, 0, 0.75);
  box-shadow: inset 0px 0px 150px 125px rgba(0, 0, 0, 0.75);
  position: fixed;
  top: 0;
  z-index: -1;
}
.link-button {
  color: #ffffff;
  box-shadow: inset 0 0 0 1px #ffffff;
  padding: 10px;
  display: inline-block;
  margin: 20px 10px 5px;
  text-transform: uppercase;
  position: relative;
}
.link-button::before,
.link-button::after {
  box-sizing: inherit;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
}
.draw {
  transition: color 0.5s;
}
.draw::before,
.draw::after {
  border: 1px solid transparent;
  width: 0;
  height: 0;
}
.draw::before {
  top: 0;
  left: 0;
}
.draw::after {
  bottom: 0;
  right: 0;
}
.draw:hover {
  color: #d3b21f;
}
.draw:hover::before,
.draw:hover::after {
  width: 100%;
  height: 100%;
}
.draw:hover::before {
  border-top-color: #d3b21f;
  border-right-color: #d3b21f;
  transition: width 0.2s ease-out, height 0.2s ease-out 0.2s;
}
.draw:hover::after {
  border-bottom-color: #d3b21f;
  border-left-color: #d3b21f;
  transition: border-color 0s ease-out 0.4s, width 0.2s ease-out 0.4s, height 0.2s ease-out 0.6s;
}
/* ==========================================================================
Home
========================================================================== */
.home-logo {
  position: absolute;
  z-index: 20;
  width: 100%;
  bottom: 25px;
}
.home-logo img {
  margin: 0 auto;
  width: 250px;
  position: relative;
}
nav {
  height: 100%;
}
#main-navigation {
  height: 100%;
  text-align: center;
}
.navibutton {
  background-color: rgba(0, 0, 0, 0.25);
}
.navigation-list {
  display: none;
  width: 100%;
  opacity: 0;
}
.navigation-list .subnav {
  margin: 10px 0;
}
.navigation-list .level1 {
  margin-bottom: 10px;
}
.navigation-list .level1 > a {
  color: #ffffff;
  text-transform: uppercase;
}
.navigation-list .level1 > a::before {
  content: "-";
  padding-right: 20px;
  transition: all 0.5s;
  color: transparent;
}
.navigation-list .level1:hover > a::before {
  content: "-";
  padding-right: 5px;
  color: #ffffff;
}
.navigation-list .level1 > a::after {
  content: "-";
  padding-left: 20px;
  transition: all 0.5s;
  color: transparent;
}
.navigation-list .level1:hover > a::after {
  content: "-";
  padding-left: 5px;
  color: #ffffff;
}
.navigation-list .level2 > a {
  color: #a5a6aa;
  transition: all 0.5s;
}
.navigation-list .level2 > a:hover {
  color: #ffffff;
}
.selected {
  display: block;
}
.hide {
  display: none;
}
.main-navigation-element {
  width: 25%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  float: left;
  display: inline-block;
  position: relative;
  display: table;
}
.navigation-list-wrapper {
  display: inline-block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 15;
  display: table-cell;
  vertical-align: middle;
  padding: 0 5px;
}
.dark-pattern-home {
  background: black;
  opacity: 0.3;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
@media only screen and (max-width: 768px) {
  nav {
    height: 92.5%;
  }
  .home-logo {
    position: static;
    height: 7.5%;
    background: #333333;
    padding: 1%;
    border-bottom: solid 1px #d3b21f;
  }
  .home-logo img {
    height: 100%;
    margin: 0 auto;
    width: auto;
  }
  .navibutton {
    padding: 5px 10px 7px 10px;
    margin: 0;
  }
  #main-navigation {
    height: 100%;
    text-align: center;
  }
  .navigation-list {
    padding: 25px 0;
    display: none;
    width: 100%;
  }
  .navigation-list a {
    color: white;
  }
  .navigation-list .sub {
    font-size: 1em;
  }
  .navigation-list .sub-sub {
    font-size: 1em;
    color: #a5a6aa;
  }
  .selected {
    display: block;
  }
  .hide {
    display: none;
  }
  .main-navigation-element {
    width: 100%;
    height: 25%;
    display: block;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    display: table;
  }
  .navigation-list-wrapper {
    width: 100%;
    position: relative;
    z-index: 15;
    display: table-cell;
    vertical-align: middle;
  }
  .dark-pattern-home {
    background: black;
    opacity: 0.3;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
}
/* ==========================================================================
Projects
========================================================================== */
.project {
  display: table;
  min-height: 100%;
  height: 100%;
  position: relative;
  width: 100%;
}
.project-content {
  position: relative;
  display: table-cell;
  vertical-align: middle;
  padding: 0 12.5%;
  text-align: center;
  z-index: 15;
}
.project-content p {
  color: #ffffff;
}
.project-titel {
  margin-bottom: 25px;
  border-bottom: solid #d3b21f 1px;
  display: inline-block;
  padding-bottom: 10px;
  color: #d3b21f;
  font-family: 'TrajanPro';
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  position: relative;
}
.project-text {
  position: relative;
}
@media only screen and (max-width: 768px) {
  .project-content {
    padding: 0 5%;
  }
}
/* ==========================================================================
Subnav Landing Page
========================================================================== */
.slider-content {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  padding: 0 12.5%;
  position: relative;
}
.slider-content .link-button {
  opacity: 0;
}
.galerie-info {
  position: absolute !important;
  height: 100%;
  width: 100%;
  top: 0;
  display: table;
}
.galerie-info-titel {
  color: #d3b21f;
  font-family: 'TrajanPro';
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  position: relative;
  opacity: 0;
  margin-bottom: 25px;
  border-bottom: solid #d3b21f 1px;
  display: inline-block;
  padding-bottom: 10px;
}
.galerie-info-text {
  color: #ffffff;
  position: relative;
  opacity: 0;
}
.slider-navigation {
  position: absolute;
  bottom: 0;
  width: 30%;
  height: 45px;
  bottom: 50px;
}
.slider-overlay {
  width: 30%;
  height: 100%;
  background-color: rgba(204, 140, 0, 0.5);
}
/* Slider controls */
.ms-skin-black-2 .ms-nav-prev {
  position: absolute;
  cursor: pointer;
  z-index: 110;
  width: 45px;
  height: 45px;
  left: 20%;
  background: url("prev.svg") no-repeat center;
}
.ms-skin-black-2 .ms-nav-next {
  position: absolute;
  cursor: pointer;
  z-index: 110;
  width: 45px;
  height: 45px;
  right: 20%;
  background: url("next.svg") no-repeat center;
}
.ms-one-slide .ms-nav-next,
.ms-one-slide .ms-nav-prev {
  display: none !important;
}
@media only screen and (max-width: 768px) {
  .slider-overlay {
    width: 50%;
  }
  .slider-navigation {
    width: 50%;
  }
  .slider-content {
    padding: 0 2.5%;
  }
}
/* ==========================================================================
Thumbwall für grosse Galerie
========================================================================== */
#mediabox-container {
  padding: 0 7.5%;
  margin-top: 100px;
  margin-bottom: 100px;
  text-align: center;
}
.wall-titel {
  margin-bottom: 50px;
  border-bottom: solid #d3b21f 1px;
  display: inline-block;
  padding-bottom: 10px;
  color: #d3b21f;
  text-align: center;
  font-family: 'TrajanPro';
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
}
.media-box {
  cursor: pointer;
  color: white;
}
.media-box img {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
  /* Firefox 10+, Firefox on Android */

  filter: gray;
  /* IE6-9 */

  -webkit-filter: grayscale(100%);
  /* Chrome 19+, Safari 6+, Safari 6+ iOS */

}
.media-box:hover img {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
  -webkit-filter: grayscale(0%);
}
.media-box-title {
  margin-bottom: 50px;
}
/* thumbnail overlay background */
.thumbnail-overlay {
  background-color: rgba(0, 0, 0, 0.3);
  -webkit-transition: background-color 0.5s ease-out;
  -moz-transition: background-color 0.5s ease-out;
  -o-transition: background-color 0.5s ease-out;
  transition: background-color 0.5s ease-out;
}
/* thumbnail overlay background (in the first grid change the initial background) */
/* hover effect on the thumbnail-overlay */
.thumbnail-overlay:hover {
  background-color: rgba(0, 0, 0, 0.4) !important;
}
/* hover effect on the image */
.media-box-image img {
  -webkit-transition: transform 0.6s ease-in-out;
  -moz-transition: transform 0.6s ease-in-out;
  -o-transition: transform 0.6s ease-in-out;
  -ms-transition: transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out;
  -webkit-transform-origin: bottom left;
  -moz-transform-origin: bottom left;
  -o-transform-origin: bottom left;
  -ms-transform-origin: bottom left;
  transform-origin: bottom left;
}
.media-box-image:hover img {
  -webkit-transform: scale(1.2) translate(-20px);
  -moz-transform: scale(1.2) translate(-20px);
  -o-transform: scale(1.2) translate(-20px);
  -ms-transform: scale(1.2) translate(-20px);
  transform: scale(1.2) translate(-20px);
}
/* Change alignment in grid 2 */
#grid2 .thumbnail-overlay > div.aligment > div.aligment {
  vertical-align: bottom;
  padding-bottom: 40px;
}
.thumbnail-overlay .media-box-title {
  font-size: 16px;
}
.thumbnail-overlay .media-box-date {
  font-style: italic;
  font-size: 12px;
}
/* ====================================================================== *
			[1] MEDIA BOX CONTENT
 * ====================================================================== */
.thumbnail-overlay-animated {
  position: relative;
  opacity: 0;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.thumbnail-overlay-animated[data-from="top"] {
  top: -20px;
}
.thumbnail-overlay-animated[data-from="bottom"] {
  top: 20px;
}
.thumbnail-overlay-animated[data-from="left"] {
  left: -20px;
}
.thumbnail-overlay-animated[data-from="right"] {
  left: 20px;
}
/* desktop */
@media only screen and (min-width: 768px) {
  .thumbnail-overlay:hover .thumbnail-overlay-animated {
    opacity: 1;
    left: 0;
    top: 0;
  }
}
/* mobile */
@media only screen and (max-width: 768px) {
  .media-box-image:hover .thumbnail-overlay-animated {
    opacity: 1;
    left: 0;
    top: 0;
  }
}
/* ====================================================================== *
			[2] LOAD MORE
 * ====================================================================== */
.media-boxes-load-more-button {
  cursor: pointer;
  width: 150px;
  text-align: center;
  color: white;
  background-color: #333333;
  font-size: 14px !important;
  height: 15px;
  padding: 10px 15px 10px 15px;
  margin: 0px auto;
  line-height: 15px;
  -webkit-box-sizing: content-box !important;
  -moz-box-sizing: content-box !important;
  box-sizing: content-box !important;
}
.media-boxes-no-more-entries {
  display: none;
}
/* ====================================================================== *
			[6] THUMBNAIL OVERLAY EFFECT
 * ====================================================================== */
/* The style for centering the caption (vertically and horizontally) */
.thumbnail-overlay > div.aligment {
  height: 100%;
  width: 100%;
  display: table !important;
}
.thumbnail-overlay > div.aligment > div.aligment {
  padding: 10px;
  display: table-cell !important;
  vertical-align: middle;
  /* FOR VERTICAL ALIGN */

  text-align: center;
  /* FOR HORIZONTAL ALIGN */

}
.thumbnail-overlay i.fa:hover {
  background: rgba(255, 255, 255, 0.3);
  color: #fff;
  cursor: pointer;
}
/* ====================================================================== *
			[7] FANCYBOX
 * ====================================================================== */
.fancybox-caption {
  padding: 0 !important;
  height: 44px !important;
  text-align: center;
  border-top: 0;
  display: flex;
  align-items: center;
  /* Vertical center alignment */

  justify-content: center;
  /* Horizontal center alignment */

}
.fancybox-thumbs {
  background: rgba(255, 255, 255, 0.1);
}
/* ********************************************************************
	(2) NEEDED STYLE (Don't play here)
********************************************************************* */
/* ====================================================================== *
			[1] SETUP 
 * ====================================================================== */
.media-box {
  /* Box-model */

  display: none;
  /* hidden by default, the plugin will take care of showing it */

  float: left;
}
.media-box,
.media-box-hidden {
  /* hardware acceleration */

  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.media-box-hidden,
.not-loaded-before-search {
  display: none;
  /* hide the hidden boxes */

}
.media-boxes-container {
  margin-right: 0 !important;
  margin-bottom: 0 !important;
}
.media-box-loaded {
  display: block;
  /* class to show the boxes once the plugin has been initialized */

}
[onclick] {
  cursor: pointer;
}
[hide_if_empty] {
  display: none !important;
}
/* ====================================================================== *
		[2] MEDIA BOX THUMBNAIL
 * ====================================================================== */
.media-box-image {
  position: relative;
  overflow: hidden;
  width: 100%;
}
/* Hack to center the image */
.media-box-image div[data-width][data-height] {
  position: relative;
  overflow: hidden;
}
.media-box-image div[data-width][data-height] img {
  position: absolute;
  top: -100%;
  left: 0;
  right: 0;
  bottom: -100%;
  margin: auto;
}
/* End Hack */
.media-box .media-box-image img {
  width: 100%;
  max-width: 100%;
  display: block;
}
.media-box img {
  max-width: 100%;
  -webkit-transform: translate3D(0, 0, 0);
  -moz-transform: translate3D(0, 0, 0);
  -ms-transform: translate3D(0, 0, 0);
  -o-transform: translate3D(0, 0, 0);
  transform: translate3D(0, 0, 0);
}
/* Invert position */
.media-box .media-box-fill-height[data-width][data-height] img {
  top: 0 !important;
  left: -100% !important;
  right: -100% !important;
  bottom: 0 !important;
  width: auto !important;
  max-width: none !important;
  height: 100%;
}
/* Loading and broken thumbnail effects */
.media-box-image div[data-thumbnail],
.media-box-image div[data-popup] {
  background-position: center center;
  background-repeat: no-repeat;
}
.image-with-dimensions {
  background-color: black;
  background-image: url('icons/loading-image.gif');
}
.broken-image-here {
  background-color: #BE3730;
  background-image: url('icons/broken-image.png');
}
.broken-image-here:not([data-height]) {
  min-height: 150px;
}
/* ====================================================================== *
		[4] THUMBNAIL OVERLAY EFFECT
 * ====================================================================== */
.thumbnail-overlay {
  position: absolute;
  -webkit-box-sizing: border-box;
  /* Safari/Chrome, other WebKit */

  -moz-box-sizing: border-box;
  /* Firefox, other Gecko */

  box-sizing: border-box;
  /* Opera/IE 8+ */

  width: 100%;
}
/* REVEAL EFFECT */
.position-reveal-effect .media-box-thumbnail-container {
  z-index: 2;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}
.position-reveal-effect .thumbnail-overlay {
  z-index: 1;
  position: absolute;
  left: 0;
}
.overlay-always-visible {
  display: block !important;
  zoom: 1 !important;
  filter: alpha(opacity=100) !important;
  opacity: 1 !important;
}
.overlay-text-left > .aligment > .aligment {
  text-align: left !important;
}
.overlay-text-right > .aligment > .aligment {
  text-align: right !important;
}
/* ==========================================================================
Publications
========================================================================== */
.wall-titel {
  margin-bottom: 50px;
  border-bottom: solid #d3b21f 1px;
  display: inline-block;
  padding-bottom: 10px;
  font-family: 'TrajanPro';
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
}
.publication-mobile-date {
  display: none;
}
.publication-wrapper {
  padding: 100px 7.5%;
  position: relative;
  z-index: 1;
  text-align: center;
}
.publication-wrapper img {
  min-width: 150px;
  min-height: 150px;
  margin-left: -25px;
}
.publication {
  width: 100%;
  min-height: 150px;
  overflow: hidden;
  position: relative;
  margin-bottom: 20px;
  z-index: 20;
}
.publication h1 {
  font-size: 1.25em;
  margin-bottom: 10px;
  color: #d3b21f;
  border-bottom: solid 1px #d3b21f;
  display: inline-block;
  font-family: 'TrajanPro';
  font-weight: 700;
  font-style: normal;
}
.publication p {
  font-size: 1em;
  color: #a5a6aa;
}
.publication:nth-child(odd) .publication-infos {
  float: left;
  display: inline-block;
  width: 50%;
  position: relative;
}
.publication:nth-child(odd) .publication-infos .publication-text {
  float: left;
  display: inline-block;
  width: 100%;
  text-align: right;
  padding: 0 95px 0 0;
  color: #ffffff;
}
.publication:nth-child(odd) .publication-content {
  float: left;
  display: inline-block;
  width: 50%;
  margin-left: -75px;
}
.publication:nth-child(odd) .publication-content .publication-date {
  float: left;
  display: inline-block;
  height: 150px;
  width: 150px;
  background: #d3b21f;
  color: #000000;
  display: block;
  text-align: center;
  padding-top: 55px;
  margin-bottom: 20px;
  margin-right: 20px;
  font-size: 1.75em;
}
.publication:nth-child(odd) .publication-content .publication-images .publication-image-wrapper {
  height: 150px;
  width: 150px;
  overflow: hidden;
  float: left;
  margin-right: 20px;
  margin-bottom: 20px;
}
.publication:nth-child(even) .publication-infos {
  float: right;
  display: inline-block;
  width: 50%;
  position: relative;
}
.publication:nth-child(even) .publication-infos .publication-text {
  float: right;
  display: inline-block;
  text-align: left;
  width: 100%;
  padding-left: 150px;
  padding: 0 0 0 95px;
  color: #ffffff;
}
.publication:nth-child(even) .publication-content {
  float: right;
  display: inline-block;
  width: 50%;
  margin-right: -75px;
}
.publication:nth-child(even) .publication-content .publication-date {
  float: right;
  display: inline-block;
  height: 150px;
  width: 150px;
  background: #d3b21f;
  color: #000000;
  display: block;
  text-align: center;
  padding-top: 55px;
  margin-bottom: 20px;
  margin-left: 20px;
  font-size: 1.75em;
}
.publication:nth-child(even) .publication-content .publication-images .publication-image-wrapper {
  height: 150px;
  width: 150px;
  overflow: hidden;
  float: right;
  margin-left: 20px;
  margin-bottom: 20px;
}
.publication-images img {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
  /* Firefox 10+, Firefox on Android */

  filter: gray;
  /* IE6-9 */

  -webkit-filter: grayscale(100%);
  /* Chrome 19+, Safari 6+, Safari 6+ iOS */

}
.publication-images img:hover {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
  -webkit-filter: grayscale(0%);
}
@media only screen and (max-width: 768px) {
  .publication-wrapper {
    position: relative;
    z-index: 1;
    text-align: center;
  }
  .publication-wrapper img {
    margin-left: -50px;
  }
  .publication-mobile-date {
    display: block;
  }
  .publication-beschreibung {
    margin-bottom: 20px;
  }
  .publication:nth-child(odd) .publication-infos {
    float: left;
    display: inline-block;
    width: 100%;
    position: relative;
  }
  .publication:nth-child(odd) .publication-infos .publication-text {
    float: left;
    display: inline-block;
    width: 100%;
    text-align: left;
    padding: 0 0 0 0;
    color: #ffffff;
  }
  .publication:nth-child(odd) .publication-content {
    float: left;
    display: inline-block;
    width: 100%;
    margin-left: 0;
  }
  .publication:nth-child(odd) .publication-content .publication-date {
    display: none;
  }
  .publication:nth-child(odd) .publication-content .publication-images .publication-image-wrapper {
    height: 100px;
    width: 100px;
    overflow: hidden;
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
  }
  .publication:nth-child(even) .publication-infos {
    float: left;
    display: inline-block;
    width: 100%;
    position: relative;
  }
  .publication:nth-child(even) .publication-infos .publication-text {
    float: left;
    display: inline-block;
    text-align: left;
    width: 100%;
    padding: 0 0 0 0;
    color: #ffffff;
  }
  .publication:nth-child(even) .publication-content {
    float: left;
    display: inline-block;
    width: 100%;
    margin-right: 0;
  }
  .publication:nth-child(even) .publication-content .publication-date {
    display: none;
  }
  .publication:nth-child(even) .publication-content .publication-images .publication-image-wrapper {
    height: 100px;
    width: 100px;
    overflow: hidden;
    float: left;
    margin-left: 0px;
    margin-right: 20px;
    margin-bottom: 20px;
  }
}
/* ==========================================================================
Press
========================================================================== */
.about {
  float: left;
  display: inline-block;
  display: table;
  position: relative;
  width: 50%;
  min-height: 100%;
  height: 100%;
  padding: 5%;
  text-align: center;
  color: #ffffff;
  z-index: 20;
}
.about-content {
  position: relative;
  display: table-cell;
  vertical-align: middle;
  width: 75%;
}
.about-titel {
  color: #d3b21f;
  margin-bottom: 25px;
  border-bottom: solid #d3b21f 1px;
  display: inline-block;
  padding-bottom: 10px;
  font-family: 'TrajanPro';
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
}
.about-text {
  margin-bottom: 25px;
  font-style: normal;
}
.contact {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  row-gap: 25px;
  margin-top: 100px;
  width: 100%;
}
.contact-icon {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.contact-icon img {
  width: 50px;
  margin-bottom: 15px;
}
.contact-icon span {
  color: #ffffff;
}
.about-foto {
  float: right;
  display: inline-block;
  display: table;
  position: relative;
  width: 50%;
  height: 100%;
  min-height: 100%;
  padding: 5%;
  color: #a5a6aa;
  z-index: 20;
  text-align: center;
  background-color: rgba(204, 140, 0, 0.5);
}
.about-foto-content {
  position: relative;
  display: table-cell;
  vertical-align: middle;
  width: 75%;
}
.profilbild {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  margin-bottom: 10px;
}
.press-logo {
  text-align: center;
  display: inline-block;
}
.about-foto-content img {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
  /* Firefox 10+, Firefox on Android */

  filter: gray;
  /* IE6-9 */

  -webkit-filter: grayscale(100%);
  /* Chrome 19+, Safari 6+, Safari 6+ iOS */

  transition: 0.3s ease-in;
}
.about-foto-content img:hover {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
  -webkit-filter: grayscale(0%);
}
.downloads {
  margin-top: 50px;
  display: block;
}
.downloads span {
  font-size: 1em;
  font-weight: bold;
}
.downloads a {
  color: #a5a6aa;
  margin-left: 5px;
  padding-bottom: 10px;
  border-bottom: solid 1px transparent;
  transition: all 0.5s;
}
.downloads a:hover {
  border-bottom: solid 1px #ffffff;
  padding-bottom: 5px;
  color: #ffffff;
}
.press-logo img {
  opacity: 0.75;
}
.background-wrapper {
  height: 100%;
  min-height: 100%;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center;
}
@media only screen and (max-width: 768px) {
  .about {
    position: relative;
    width: 100%;
    padding: 5%;
    text-align: center;
    color: #ffffff;
    z-index: 20;
  }
  .about-foto {
    position: relative;
    width: 100%;
    padding: 5%;
    color: #a5a6aa;
    z-index: 20;
    text-align: center;
  }
  .about-foto img {
    width: 250px;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    margin-bottom: 10px;
  }
  .about-content {
    width: 95%;
  }
}
@media only screen and (min-width: 768px) {
  .contact-icon {
    width: 50%;
  }
}
@media only screen and (min-width: 1024px) {
  .contact {
    flex-flow: row;
  }
}
/* ==========================================================================
Footer
========================================================================== */
footer {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 160px;
  z-index: 15;
  padding: 0 10px 10px 0;
}
footer .footer-logo {
  width: 75px;
  float: right;
  display: inline-block;
}
footer .copyright-text {
  float: right;
  display: inline-block;
  font-size: 0.75em;
  color: #666666;
  text-align: center;
  margin-top: 15px;
}
.logo-mail {
  height: 40px;
  position: relative;
  float: right;
  display: inline-block;
  cursor: pointer;
}
.logo-mail a {
  height: 40px;
  color: transparent;
  position: absolute;
  width: 59px;
  left: 5px;
}
/* ==========================================================================
Media Queries small
========================================================================== */
@media only screen and (max-width: 480px) {
  .project-content,
  .galerie-info,
  .about,
  .publication-wrapper {
    font-size: 0.75em;
  }
  footer {
    display: none;
  }
  .close-home-buttons {
    top: 15px;
    right: 10px;
  }
  #mediabox-container {
    padding: 50px 5% 0px;
    text-align: center;
    margin-top: 50px;
    margin-bottom: 25px;
  }
  .publication-wrapper {
    padding: 75px 5% 50px 5%;
  }
}
@media only screen and (min-width: 1920px) {
  .project-content,
  .slider-content,
  .publication-wrapper,
  .about-content {
    font-size: 1.25em;
  }
}