* {
  box-sizing: border-box;
}

/* Fonts
-------------------------------------------------- */
/* This CSS resource incorporates links to font software which is the valuable copyrighted property of Monotype and/or its suppliers. You may not attempt to copy, install, redistribute, convert, modify or reverse engineer this font software. Please contact Monotype with any questions regarding Web Fonts: https://www.linotype.com */

@import url("https://fast.fonts.net/lt/1.css?apiType=css&c=448bd9cc-5847-404a-8936-41255e38cc7a&fontids=1449089");
@font-face{
font-family:"Frutiger Next W04 Light1449089";
src:url("../fonts/1449089/59bdb37e-27ee-481d-8f7b-e234ca1147a4.eot?#iefix");
src:url("../fonts/1449089/59bdb37e-27ee-481d-8f7b-e234ca1147a4.eot?#iefix") format("eot"),
    url("../fonts/1449089/4bcd060c-27dd-4c1a-a68e-dc8c52bbd1a4.woff2") format("woff2"),
    url("../fonts/1449089/80fd0104-b32d-4e45-8bfb-1be795d6e296.woff") format("woff"),
    url("../fonts/1449089/d2f81a9b-3be7-4a1e-a705-d1d208a25af1.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

/* Site
-------------------------------------------------- */
html, body {
  font-size:62.5%;
  font-family: "Frutiger Next W04 Light1449089";
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  cursor:default;
  margin:0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering:optimizeLegibility;
}

#project-heading {
  display: none;
}

main {
  margin:0 auto;
}

.color-change {
  top:96vh;
  height:100vh;
  width:100%;
  position: fixed;
  visibility: hidden;
  pointer-events: none;
}

.no-change {
  top:96vh;
  height:100vh;
  width:100%;
  position: fixed;
  visibility: hidden;
  pointer-events: none;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Hide
-------------------------------------------------- */
.vh {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.hidden{
  visibility: hidden;
}

.hiddenheadline{
  visibility: hidden;
  padding-bottom:50px;
}

.hiddenproject{
  visibility: hidden;
  margin-bottom:34px;
}

/* Navigation

-------------------------------------------------- */
.logo {
  color:#ffffff;
}

.logo-black {
  color:#000000;
}

button {
  background:none;
  border:none;
  text-align: left;
  font-family: "Frutiger Next W04 Light1449089";
  padding: 0;
  margin:0;
  border: 0;
  margin-left: 0px;
  margin-right: 0px;
  padding-left: 0px;
  padding-right: 0px;
  float: left;
  border-radius: 0px;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
  margin-left: 0px;
  margin-right: 0px;
  float: left;
}

button:active {
  border:none;
  border: 0;
  outline:none;
  background-color:#74b9cf;
}

*:focus {
  outline: 0 !important;
}

.back {
  position: fixed;
  top:15px;
  right:147px;
  width:66px;
  height:62px;
  z-index:101;
  background-image:url(../images/arrow-left.svg);
  background-repeat: no-repeat;
  background-position: center;
  cursor:pointer;
  white-space: nowrap;
  text-indent: 110%;
  overflow: hidden;
  color:transparent;
}

.navbutton {
  position: fixed;
  top:15px;
  right:80px;
  width:66px;
  height:62px;
  z-index:103;
  background-image:url(../images/ludloffmenu-01.svg);
  background-repeat: no-repeat;
  background-position: center;
  cursor:pointer;
  white-space: nowrap;
  text-indent: 110%;
  overflow: hidden;
  color:transparent;
}

.close {
  position: fixed;
  top:15px;
  right:80px;
  width:66px;
  height:62px;
  z-index:103;
  background-image:url(../images/ludloffmenu-2-02.svg);
  background-repeat: no-repeat;
  background-position: center;
  cursor:pointer;
  white-space: nowrap;
  text-indent: 110%;
}

nav {
  left:0;
  top:0;
  position:fixed;
  height: 100%;
  width: 100%;
  padding: 40px 80px 80px 80px;
  background:#74b9cf;
  z-index:103;
  overflow-y: scroll;
  opacity: 0;
  transition: opacity 200ms ease-in-out;
  pointer-events: none;
  cursor: default;
}

nav:target,
nav.in-view {
  opacity: 1;
  pointer-events: all;
}

nav p, nav a {
  font-size: 2.4rem;
  line-height: 1.2em;
  font-style: normal;
  font-weight: normal;
  color: #ffffff;
}

.nav-column {
  width: 22%;
  display: block;
}

.nav-column:last-of-type {
  display: none;
}

h3.nav-title {
  font-size: 2.4rem;
  height: 2.4rem;
  line-height:3rem;
  font-style: normal;
  font-weight: normal;
  color:#ffffff;
  margin-bottom: 100px;
}

.navlink {
  color:#ffffff;
  border-bottom: 1px solid #ffffff !important;
}

.navlink:hover, .navlink:active, .navlink:focus{
  color:#000;
  border-bottom: 1px solid #000 !important;
}

nav {
  display: flex;
  justify-content: space-between;
}

figcaption {
  margin-top:20px;
  margin-bottom:40px;
}

figcaption.texthover {
  margin:0;
}

/* Filter (Navigation)
-------------------------------------------------- */
.filter {
  position: fixed;
  top:15px;
  right:147px;
  width:290px;
  height:62px;
  z-index:100;
  background-color:#74b9cf;
  background-image:url(../images/arrow-down-04.png);
  background-image:url(../images/arrow-down-04.svg);
  background-size: 66px 62px;
  background-repeat: no-repeat;
  background-position: top right;
  cursor:pointer;
  color:#ffffff;
  overflow: visible;
}

.filter h3{
 padding:17px 17px 17px 34px;
}

.dropdown {
  top:77px;
  right:147px;
  position: fixed;
  width:290px;
  height:auto;
  z-index:102;
  background-color:#74b9cf;
  cursor:default;
  padding:17px;
  margin-top:-1px;
  color:#ffffff;
  display:none;
}

.filter-close {
  position: fixed;
  top: 15px;
  right: 87px;
  right: 147px;
  width: 290px;
  height: 62px;
  z-index: 101;
  background-color:#74b9cf;
  background-image:url(../images/arrow-up-03.png);
  background-image:url(../images/arrow-up-03.svg);
  background-size: 66px 62px;
  background-repeat: no-repeat;
  background-position: top right;
  cursor:pointer;
}

.dropdown a {
  display: block;
  padding: 17px 0px 0px 17px;
  font-size: 2.4rem;
  line-height: 1em;
  margin-bottom: 1em;
  font-style: normal;
  font-weight: normal;
  color:#ffffff;
  cursor:pointer;
}

button:active span, button:focus span {
  position:relative;
  top: 0;
  left: 0;
}

.dropdown a:hover, .dropdown a:active, .dropdown a:focus {
  color:#000000;
}

.mobile-headline {
  display:none;
}

/* Section
-------------------------------------------------- */
.section {
  position: relative;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.section-text{
  padding-left: 80px;
  height:100vh;
  width:80%;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  pointer-events: none;
  top: 0;
  -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 2s; /* Firefox < 16 */
  -ms-animation: fadein 2s; /* Internet Explorer */
  -o-animation: fadein 2s; /* Opera < 12.1 */
  animation: fadein 2s;
}

/* headings
-------------------------------------------------- */
h1 {
  display: block;
  font-size: 2.4rem;
  line-height:1.2em;
  font-style: normal;
  font-weight: normal;
  margin: 0;
  position:fixed;
  top:0;
  left:0;
  z-index:100;
  width: 100%;
  color:#fff;
  padding: 32px 80px;
  line-height: 30px;
  transition: 200ms ease-in-out;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
   -webkit-perspective: 1000;
}

h1.black {
  background-color: rgba(255,255,255, .97);
}

h1.black a {
  color:#000;
}

h1.black {
  pointer-events: auto;
}

h2 {
  font-size:10rem;
  line-height:1.1em;
  font-style: normal;
  font-weight: normal;
  margin: 0;
  position:absolute;
  z-index:101;
  color:#ffffff;
}

h3 {
  font-size: 2.4rem;
  line-height:1.2em;
  font-style: normal;
  font-weight: normal;
  margin: 0;
}

h4 {
  font-size: 2.4rem;
  line-height:1.2em;
  font-style: normal;
  font-weight: normal;
  color:#ff4200;
  margin: 0;
}

h5 {
  font-size: 2.4rem;
  line-height:1.4em;
  font-style: normal;
  font-weight: normal;
  margin: 0;
  padding-bottom: 8px;
}

p {
  font-size: 2.4rem;
  line-height:1.4em;
  font-style: normal;
  font-weight: normal;
}

li {
  float:left;
  margin: 1px;
  list-style: none;
}

.subpage p {
  margin-bottom: 8px;
  line-height: 1.2em;
}

.contactdata p {
  margin-bottom: 0 !important;
}

.column-3.topic.contact h4 {
  padding-top: 8px;
  padding-bottom: 4px;
}

 .column-3.topic.contact p{
  padding-top: 0px;
  padding-bottom: 0px;
}

.column-3.topic p {
  padding-top: 8px;
  padding-bottom: 8px;
}

.textprojects h4 {
  padding-top: 8px;
}

.textpublications h4 {
  padding-top:8px;
  line-height: 1.4em;
}

.textpublications p{
  padding:0 !important;
  padding-bottom:8px!important;
  margin-bottom: 0;
}

.textpublications h5:not(:first-of-type) {
  margin: 0px;
  padding-top: 30px;
}

.publications-text-description p{
  line-height: 1.2em;
  margin: 0;
}

.textpublications p.single-line  {
  padding-bottom:0 !important;
}

hr {
  margin: 0;
  border: 0;
  break-before: column;
  -webkit-column-break-before: always;
  -moz-column-break-before:always;
  page-break-before: always;
  break-before: always;
}

.hr {
  margin: 0;
  border: 0;
  break-before: column;
  -webkit-column-break-before: always;
  -moz-column-break-before:always;
  page-break-before: always;
  break-before: always;
}

ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tags{
  font-size:2.4rem;
  line-height:3rem;
  font-style: normal;
  font-weight: normal;
  margin:0;
  color:#ff4200;
  font-style:italic;
}

.home-title{
  padding-top:30px;
}

.column-3.topic a:hover{
  color:#ff4200 !important;
  display: inline-block;
}

/* Contact
-------------------------------------------------- */
.contact-container {
  margin-left:80px;
  margin-top:30%;
  bottom:13%;
  height:600px;
  width:59.375%;
  max-width:950px;
  min-width:600px;
  position: absolute;
  background-color:#7bafbf;
  opacity:0.9;
  z-index:100;
}

.contact-head {
  padding-left:80px;
  padding-right:160px;
  padding-top: 45px;
  padding-bottom: 95px;
  position: absolute;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

.contact-head p {
  font-size:3.6rem;
  line-height:1.2em;
  font-style: normal;
  font-weight: normal;
  z-index:101;
  color:#ffffff;
  margin-top: 0;
}

.column-3.contact p {
  margin-bottom: 8px;
}

.list:before {
  content:'– ';
  margin-left:-18px;
  padding-bottom:0;
}

p.list {
  margin-bottom: 0;
}

.topics.bottom .column-3.topic {
  width: 31%;
  display: block;
}

.contact-wrap {
  padding: 160px 80px 100px 80px;
}

.topic-wrap.about {
  padding: 80px 80px 100px 80px;
}

/* Contact Switch
-------------------------------------------------- */
.btn-de, .btn-en {
  color: #fff;
  font-size:1.8rem;
  cursor:pointer;
  margin: 18px 0px 18px 0px;
  line-height: 100%;
  display:inline-block;
  margin-right:10px;
}

.btn-de:nth-of-type(2), .btn-en:nth-of-type(2) {
  margin-right:40px;
  margin-top:40px;
}

.btn-de:hover, .btn-en:hover {
  color: #000;
  transition: all .2s ease-in-out;
  -o-transition: .2s;
  -ms-transition: .2s;
  -moz-transition: .2s;
  -webkit-transition: .2s;
}

.contact-container {
  text-align: right;
}

.wrapper div{
  display: none;
}

input[type=radio] {
   opacity: 0;
   display: none;
}

#english:checked ~ .wrapper .english{
   display: block;
}

#english ~ .wrapper .english{
   display: none;
}

#english:checked ~ .wrapper .german{
  display: none;
}

#german ~ .wrapper .german{
  display: none;
}

#german:checked ~ .wrapper .english{
  display: none;
}

#german:checked ~ .wrapper .german{
  display: block;
}

.anchor-about {
  z-index:99999;
  color:#fff;

  font-size:3.6rem;
  line-height:1.2em;
  font-style: normal;
  font-weight: normal;
  z-index:101;
  color:#ffffff;
  margin-top: 0;

}

/* Line
-------------------------------------------------- */
.line  {
  border-top: 1px solid #bbbbbb;
  border-bottom: 1px solid #bbbbbb;
  padding-top: 8px;
  padding-bottom: 8px;
  margin: -1px;
}

.single-line  {
  border-top: 1px solid #bbbbbb;
  margin: -0.5px !important;
}

/* Links
-------------------------------------------------- */
a {
  text-decoration: none;
  color:#000000;
}

a:hover, a:active, a:focus {
  color:#000;
  transition: all .2s ease-in-out;
  -o-transition:.2s;
  -ms-transition:.2s;
  -moz-transition:.2s;
  -webkit-transition:.2s;
  -webkit-transform: translateZ(0);
}

h1 a:hover,
h1 a:active,
h1 a:focus {
  color: #fff;
}

h1.black a:hover,
h1.black a:active,
h1.black a:focus {
  color: #000;
}

/* Text
-------------------------------------------------- */
.column-1 {
  width: 100%;
  display: block;
}

.column-2 {
  width: 66%;
  display: block;
}

.column-3 {
  width: 32%;
  display: block;
}

.subpage{
  padding: 190px 80px 100px 80px;
}

/* Topics
-------------------------------------------------- */
.topic-wrap-home{
  background-color:#eaeaea;
  padding: 70px 80px 100px 80px;
}

.topic-wrap, .project-ov-topic-wrap{
  background-color:#eaeaea;
  padding: 70px 80px 100px 80px;
}

.topics {
  display: flex;
  justify-content: space-between;
}

.column-3.topic p{
  padding-top: 8px;
  padding-bottom: 8px;
}

.topics p {
  margin: -1px;
}

.topic h3 {
  margin-bottom: 50px;
}

.topic-contact p, .topic-contact h3 {
  line-height: 1.4em;
}

.seeall p{
  margin-top: 50px;
  margin-bottom:0;
  color:#ff4200;
  display:inline-block;
}

.seeall:hover p{
  color:#000;
  -o-transition:.2s;
  -ms-transition:.2s;
  -moz-transition:.2s;
  -webkit-transition:.2s;
  transform: translateY(0%);
}

.topics.bottom h4 {
  padding-bottom: 0px;
  padding-top: 30px;
}

.topics.bottom h4:first-child {
  padding-bottom: 0px;
  padding-top: 0px;
}

div.topics.bottom {
  padding-bottom:30px;
}

.topics.bottom .column-3.topic p {
  padding-bottom: 0px;
  padding-top: 0px;
}

.topics .column-3.topic.about {
  padding-bottom: 0px;
}

.topics .column-3.topic.about p{
  padding-bottom: 0px;
  padding-top: 0px;
}

h4.seeall:hover {
  color:#000000;
}

/* Talks
-------------------------------------------------- */
.talk-wrap{
  padding: 220px 80px 170px 80px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.texttalks h4, .texttalks-exhibition h4{
  margin-top:12px;
  margin-bottom:4px;
}

.texttalks p{
  margin-top:0;
  margin-bottom:32px;
}

.texttalks a{
  /*border-bottom: 1px solid #ff4200 !important;
  padding-bottom: 0px;*/
  color:#ff4200;
  display: inline-block;
}

.texttalks a:hover{
  /*border-bottom: 1px solid #000 !important;
  padding-bottom: 0px;*/
  color: #000;
  display: inline-block;
}

.texttalks-exhibition p {
  margin-top:4px;
  margin-bottom:4px;
}

.texttalks-exhibition a {
  color:#ff4200;
  display: inline-block;
}

.texttalks-exhibition a:hover {
  color:#000;
  display: inline-block;
}

.talk-wrap > section:first-of-type {
  width: 66%;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: space-between;
}

.talk-wrap > section:first-of-type div {
  width: 48.484848485%;
}

.talk-wrap > section:first-of-type + section {
  width: 32%;
}

.headline {
  width: 100%;
  padding-bottom:50px;
}

.headline-exhibition {
  width: 100%;
  padding-bottom:50px;
}

/* Awards
-------------------------------------------------- */
.award-wrap{
  background-color:#eaeaea;
  padding: 70px 80px 100px 80px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.textawards p{
  margin-top:0;
  margin-bottom:0;
}

.textawards {
  padding-bottom: 30px;
}

.award-wrap > section:first-of-type {
  width: 66%;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: space-between;
}

.award-wrap > section:first-of-type div {
  width: 48.484848485%;
}

.award-wrap > section:first-of-type + section {
  width: 32%;
}

.award-headline {
  width: 100%;
}

.award-headline p{
  margin-top:0;
  /*padding-bottom:30px;*/
}

.textawards h4 {
  padding-bottom: 0px;
  padding-top: 30px;
}

.textawards h4:first-child {
  padding-top:0;
}

/* Gallery
-------------------------------------------------- */
.cycle-slideshow{
  z-index:0;
}

.gallery {
  position: relative;
  width: 100%;
  height: 100%;
  height: 100vh;
  background-color:#fff;
  overflow: hidden;
  z-index: 1;
  color:#ffffff;
  pointer-events: auto;
}

.slideshow-container{
  height:100vh;
}

.slideshow{
  width:100vw;
  height:100vh;
  min-height:100%;
  overflow: hidden;
}

.slideshow .background {
  position: absolute;
  top: 0;
  left: 0;
  height:100%;
  min-height:340px;
  min-width:100%;
  height:100vh;
  overflow: hidden;
  background: center center no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  z-index:2;
  content: '';
}

.slideshow .background:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index:3;
  background: linear-gradient(to right, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 100%);
}

.container-home {
  padding: 160px 80px 120px 80px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.empty {
  background-color: #74b9cf;
  padding-bottom: 36.25%;
  padding-top: 26.25%;
  height: 0;
}

.to-all-projects {
  content: '';
  display: flex;
  justify-content: center;
  align-items: center;
  color:#ffffff;
}

.container-home .project {
  position: relative;
  width: 22%;
  margin-bottom: calc( (100vw - 160px) * 0.04);
}

.container-home .project-last {
  position: relative;
  width: 22%;
  margin-bottom: calc( (100vw - 160px) * 0.04);
}

.container-home .project figure {
  position: relative;
  display: block;
  max-width: none;
  height: 0;
  padding-top: 62.5%;
  overflow: hidden;
}

.container-home .project figure img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.container-home .project:first-of-type {
  width: 76%;
}

.project a:hover {
  color:#999999;
  -o-transition:.2s;
  -ms-transition:.2s;
  -moz-transition:.2s;
  -webkit-transition:.2s;
  -webkit-transform: translateZ(0);
}

.container-home .project:first-of-type figure:first-of-type {
  width: 63.157894738%;
  margin-right: 5.2631578948%;
  padding-top: 39.473684211%;
  float: left;
}

.container-home .project:first-of-type figure:first-of-type + figure {
  width: 28.947368421%;
  padding-top: 18.092105263%;
}

.teaser-title {
  margin-top:30px;
}

/* Images
-------------------------------------------------- */
img {
  display:block;
  width:100%;
}

figure {
  display: block;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;
  margin: 0;
  padding: 0;
}

.afterimg {
  margin-bottom: 82px;
}

.afterimgnav {
  margin-bottom:16px;
}

.outline {
  border:1px solid #DADADA;
}

/* Row Home
-------------------------------------------------- */
.row-home{
  width:25%;
  padding: 0px 40px 40px 0px;
}

.row-home:hover{
  opacity: 1;
  -webkit-transition: .1s ease-in-out;
  transition: .1s ease-in-out;
}

.row-home:nth-child(1){
  width:50%;
}

.projects-home {
  opacity: 1;
  height:25vh;
  max-height:auto;
  min-height: 150px;
  overflow: hidden;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  content: '';
}

.projects-home-first {
  opacity: 1;
  overflow: hidden;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  content: '';
}

.row-home-first{
  width:50%;
  padding: 0px 40px 40px 0px;
}

.project-last h3{
  color:#ffffff;
  margin:auto;
}

/* Row Project
-------------------------------------------------- */
.container-project {
  padding: 160px 80px 0px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.row {
  width:50%;
  padding: 0px 40px 0px 0px;
  overflow: hidden;
}

.container-project-columns {
  padding: 80px 80px 80px 80px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.container-project-columns > section:first-of-type {
  width: 66%;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: space-between;
}

.container-project-columns > section:first-of-type div {
  width: 48.484848485%;
}

.container-project-columns > section:first-of-type div + div {
  color: #666;
}

.container-project-columns > section:first-of-type + section {
  width: 32%;
}

.container-project-columns > section:first-of-type p:first-of-type {
  margin-top: 0
}

.title-info,
.project-title {
  width: 51.615151515%;
  min-height: 2.4em;
  overflow: hidden;
  margin-bottom: 1.2em;
  padding-right: 30px;
}

.title-info {
  width: 100%;
}

.title-info-about,
.project-title-about {
  width: 51.615151515%;
  overflow: hidden;
  padding-right: 30px;
}

.title-info {
  margin-bottom: 0.85em;
}

.description-eng {
  color:#666666;
}

.content {
  margin-top:0px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.content-title {
  width:100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.project-text h3 {
  margin-bottom: 50px;
}

.column-3.project-text p {
  margin:0;
}

.column-3.project-text-info {
  margin-top:-8px;
}

.column-3.project-text-info p {
  margin: -1px;
}

.column-3.project-text.without p{
  margin:0;
}

.no-text:empty {
  display:none;
}

.info-title {
  padding: 70px 0px 0px 80px;
}

.image-holder {
  position: relative;
  max-width: none;
  width: 49%;
  overflow: hidden;
  margin-bottom: calc( (100vw - 160px) * 0.04);
}

.image-holder:after {
  content: '';
  display: block;
  padding-top: 62%;
}

.image-holder.large {
  width: 100%;
}

.image-holder.portrait:after {
  padding-top: 150%;
}

.image-holder img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.image-holder.portrait img {
  width: auto;
  height: 100%;
}

.texthover {
  font-size: 2rem;
  line-height:1.2em;
  font-style: normal;
  font-weight: normal;
  margin-top: 0;
  padding:25px;
  padding-right: 20%;
  width: 90%;
}

.image-holder .texthover {
  width:100%;
  height:auto;
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  color:#ffffff;
  visibility: hidden;
  opacity: 1;
  left:0;
  bottom:0;
  -o-transition:.2s;
  -ms-transition:.2s;
  -moz-transition:.2s;
  -webkit-transition:.2s;
  transform: translateY(100%);
}

.image-holder:hover .texthover {
  visibility: visible;
  -o-transition:.2s;
  -ms-transition:.2s;
  -moz-transition:.2s;
  -webkit-transition:.2s;
  transform: translateY(0%);
 }

/*  Project Bottom
-------------------------------------------------- */
.container-project-selection {
  padding: 80px 80px 120px 80px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.row-bottom-wrap{
  width:100%;
  background-color:#eaeaea;
}

.container-project-selection .project {
  position: relative;
  width: 22%;
}

.container-project-selection .project:nth-of-type(4n + 2):last-of-type {
  margin-right: 52%;
}

.container-project-selection .project:nth-of-type(4n + 3):last-of-type {
  margin-right: 26%;
}

.container-project-selection .project figure {
  position: relative;
  display: block;
  max-width: none;
  height: 0;
  padding-top: 62.5%;
  overflow: hidden;
}

.container-project-selection .project figure img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

/* Project-OV
  -------------------------------------------------- */
.container-projects-ov {
  padding: 220px 40px 40px 40px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.container-projects-ov + .container-projects-ov {
  padding-top: 40px;
}

.container-project-selection {
  padding: 48px 40px 120px 40px;
}

.container-projects-ov .project {
  width: 22%;
  margin-bottom: 70px;
}

.container-projects-ov .project:nth-of-type(4n + 2):last-of-type {
  margin-right: 52%;
}

.container-projects-ov .project:nth-of-type(4n + 3):last-of-type {
  margin-right: 26%;
}

.container-projects-ov {
  padding: 220px 80px 150px 80px;
}

.container-projects-ov .project {
  position: relative;
  width: 22%;
  margin-bottom: calc( (100vw - 160px) * 0.04);
}

.container-projects-ov .project figure {
  position: relative;
  display: block;
  max-width: none;
  height: 0;
  padding-top: 62.5%;
  overflow: hidden;
}

.container-projects-ov .project figure img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.projects {
  margin-top:20px;
}

.headline-year h4{
  margin-top:50px;
  margin-bottom:8px;
}

.headline-year a {
  color: #ff4200;
  padding:0;
  margin:0;
}

.headline-year a:hover{
  color: #000;
}

.project-ov-topic-wrap {
  background-color: #eaeaea;
  padding: 70px 80px 100px 80px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.project-ov-topic-wrap > section:first-of-type {
  width: 66%;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: space-between;
}

.project-ov-topic-wrap > section:first-of-type div {
  width: 48.484848485%;
}

.project-ov-topic-wrap > section:first-of-type + section {
  width: 32%;
  margin-top:57px;
}

.project-ov-title {
  width: 100%;
  min-height: 2.4em;
  overflow: hidden;
  font-size: 2.4rem;
  line-height: 1.2em;
  font-style: normal;
  font-weight: normal;
  margin: 0;
}

/*  Publications
-------------------------------------------------- */
.container-project-publications {
  padding: 80px 40px 150px 80px;
  display: flex;
  flex-flow: row wrap;
}

.row-publication p {
  margin:0;
}

.publication-title {
  padding-top:30px;
  color:#ff4200;
}

.publication-title p, .publication-title a {
  margin:0;
  color:#ff4200;
}

.topic-pub p{
  line-height: 1.4em;
  margin:0;
}

.topic-pub h3 {
  padding: 70px 0px 0px 80px;
}

.date p{
  font-style:italic;
}

.publication {
  position: relative;
  width: 15%;
  margin-bottom:80px;
}

.container-projects-ov .publication {
  width: 15%;
}

.container-projects-ov .publication:nth-of-type(6n + 1):last-of-type {
  margin-right: 85%;
}

.container-projects-ov .publication:nth-of-type(6n + 2):last-of-type {
  margin-right: 68%;
}

.container-projects-ov .publication:nth-of-type(6n + 3):last-of-type {
  margin-right: 51%;
}

.container-projects-ov .publication:nth-of-type(6n + 4):last-of-type {
  margin-right: 34%;
}

.container-projects-ov .publication:nth-of-type(6n + 5):last-of-type {
  margin-right: 17%;
}

.headline {
  padding-bottom: 50px;
}

/* Footer
-------------------------------------------------- */
footer {
  background:#333333;
  color:#ffffff;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  word-wrap: break-word;
}

footer p {
  font-family: 'Courier New', Courier, serif;
  font-size:1.6rem;
  line-height:2.2rem;
  font-weight: 400;
  margin-top:0;
  max-width:400px;
}

footer a {
  font-family: 'Courier New', Courier, serif;
  font-size:1.6rem;
  line-height:2.2rem;
  font-weight: 400;
  color:#999999;
}

footer a:hover, footer a:active, footer a:focus {
  color:#ffffff;
}

.footer-wrap {
  background:#333333;
  padding: 70px 80px 100px 80px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.footer-wrap > section:first-of-type {
  width: 23%;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: space-between;
}

.footer-wrap > section:first-of-type + section {
  width: 23%;
}

.footer-wrap > section:first-of-type + section + section {
  width: 23%;
}

.footer-wrap > section:first-of-type + section + section + section{
  width: 23%;
  padding-top:38px;
}

/* Legal
-------------------------------------------------- */
.legal{
  padding: 80px 80px 80px 80px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: space-between;
}

.legal-column {
  width: 48%;
  display: block;
  float:left;
}

.legal p {
  font-family: 'Courier New', Courier, serif;
  font-size:1.6rem;
  line-height:2.2rem;
  font-weight: 400;
  margin-top:0;
  color:#ffffff;
}

.legal a {
  font-family: 'Courier New', Courier, serif;
  font-size:1.6rem;
  line-height:2.2rem;
  font-weight: 400;
  color:#999999;
}

.legal a:hover, .legal a:active, .legal a:focus {
  color:#ffffff;
}

.legal h3 {
  color:#999999;
  font-size: 1.6rem;
  line-height: 1.2em;
  font-style: normal;
  font-weight: normal;
  margin-bottom: 25px;
}

.legal h3:hover {
  color:#ffffff;
}

.legal-title {
  width:100%;
}

.legalbutton {
}

.legal-panel {
  left:0;
  top:0;
  position:fixed;
  height: 100%;
  width: 100%;
  padding: 40px 80px 80px 80px;
  z-index:103;
  overflow-y: scroll;
  opacity: 0;
  transition: opacity 200ms ease-in-out;
  pointer-events: none;
  cursor: default;
}

.legal-panel:target,
.legal-panel.in-view {
  opacity: 1;
  pointer-events: all;
}

/* Selection, Focus
-------------------------------------------------- */
::selection {
  background: transparent;
  color:#ff4200;
}

::-moz-selection {
  background: transparent;
  color:#ff4200;
}

a:active, a:focus, a:visited, a:link{
  text-decoration: none;
  background-color: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  border: none;
}

a[href^="tel"]{
  color:inherit;
  text-decoration:none;
}

/* Ups
-------------------------------------------------- */
.ups-wrap {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  padding-left: 80px;
  padding-right:80px;
  z-index:999;
}

.ups-text {
  height:auto;
  width:100%;
  max-width:768px;
  position: relative;
}

.ups-text a {
  color: #fff;
  border-bottom: 1px solid #fff;
  padding-bottom: 3px;
}

.ups-title {
  display:block;
  font-size: 8rem;
  top:0;
  position: relative;
}

/* media screen and (max-width: 1536px) and (orientation:landscape)
-------------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 96em) and (orientation:landscape) {

  /* Head
  -------------------------------------------------- */
  h1 {
    padding-left:40px;
  }

  /* Navigation
  -------------------------------------------------- */
  .navbutton {
    right:40px;
  }

  .dropdown {
    right:107px;
  }

  .filter {
    right: 107px;
  }

  nav {
    padding: 40px 40px 80px 40px;
  }

  nav p, nav a, h3.nav-title {
    font-size: 2rem;
    line-height: 1.15em;
  }

  /* Project Overview
  -------------------------------------------------- */
  .container-home {
    padding: 160px 40px 120px 40px;
  }

  h2 {
    font-size:9rem;
  }

  .section-text {
    max-width:90%;
  }

  .empty {
    padding-bottom: 38%;
    padding-top: 24.5%;
  }

  /* Columns
  -------------------------------------------------- */
  .topic-wrap-home {
    padding: 70px 40px 100px 40px;
  }

  .topic-wrap, .project-ov-topic-wrap {
    padding: 70px 40px 100px 40px;
  }

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

  .seeall p {
    margin-top: 50px;
    margin-bottom:100px;
    font-style:italic;
  }

  /* Project
  -------------------------------------------------- */
  .container-project {
    padding: 160px 40px 0px;
  }

  .container-project-columns {
    padding: 80px 40px 170px;
  }

  .section-text {
    padding-left: 40px;
  }

  .back {
    right:107px;
  }

  /* Project-OV
  -------------------------------------------------- */
  .container-projects-ov {
    padding: 220px 40px 40px 40px;
  }

  .container-projects-ov + .container-projects-ov {
    padding-top: 40px;
  }

  .container-project-selection {
    padding: 48px 40px 120px 40px;
  }

  .container-projects-ov .project {
    width: 22%;
    margin-bottom: 70px;
  }

  .container-projects-ov .project:nth-of-type(4n + 2):last-of-type {
    margin-right: 52%;
  }

  .container-projects-ov .project:nth-of-type(4n + 3):last-of-type {
    margin-right: 26%;
  }

  /* Publications
  -------------------------------------------------- */
  .publication {
    position: relative;
    margin-bottom:80px;
  }

  .container-projects-ov .publication:nth-of-type(6n + 1):last-of-type {
    margin-right: 0;
  }

  .container-projects-ov .publication:nth-of-type(6n + 2):last-of-type {
    margin-right: 0;
  }

  .container-projects-ov .publication:nth-of-type(6n + 3):last-of-type {
    margin-right: 0;
  }

  .container-projects-ov .publication:nth-of-type(6n + 4):last-of-type {
    margin-right: 0;
  }

  .container-projects-ov .publication:nth-of-type(6n + 5):last-of-type {
    margin-right: 0;
  }

  .container-projects-ov .publication {
    width: 22%;
    margin-bottom: 70px;
  }

  .container-projects-ov .publication:nth-of-type(4n + 2):last-of-type {
    margin-right: 52%;
  }

  .container-projects-ov .publication:nth-of-type(4n + 3):last-of-type {
    margin-right: 26%;
  }

  /* Talks
  -------------------------------------------------- */
  .talk-wrap{
    padding: 220px 40px 170px 40px;
  }

  /* Award
  -------------------------------------------------- */
  .award-wrap{
    padding: 70px 40px 70px 40px;
  }

  /* Contact
  -------------------------------------------------- */
  .contact-wrap {
    padding: 160px 40px 100px 40px;
  }

  .topic-wrap.about {
    padding: 80px 40px 100px 40px;
  }

  .contact-container {
    margin-left: 40px;
    margin-top: 40%;
    bottom: 40px;
    height: 570px;
    width: 59.375%;
    max-width: 950px;
    min-width: 600px;
  }

  .contact-head {
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .contact-head p {
    font-size: 3rem;
    margin-top: 0;
  }

  /* Footer
  -------------------------------------------------- */
  .footer-wrap {
    padding: 70px 40px 100px 40px;
  }

  /* Legal
  -------------------------------------------------- */
  .legal{
    padding: 80px 40px 80px 40px;
  }

  .legal-column {
    width: 48%;
    display: block;
  }

  /* Ups
  -------------------------------------------------- */
  .ups-wrap {
    padding-left: 40px;
    padding-right:40px;
  }

}

/* media screen and (max-width: 1536px) and (orientation:portrait)
------------------------------------------------------------------ */
@media screen and (max-width: 96em) and (orientation:portrait) {

  /* Head
  -------------------------------------------------- */
  h1 {
    padding-left:40px;
  }

  /* Navigation
  -------------------------------------------------- */
  .navbutton {
    right:40px;
  }

  .dropdown {
    right:107px;
  }

  .filter {
    right: 107px;
  }

  nav {
    padding: 40px 40px 80px 40px;
  }

  nav p, nav a, h3.nav-title {
    font-size: 2rem;
    line-height: 1.15em;
  }

  /* Project Overview
  -------------------------------------------------- */
  .container-home {
    padding: 160px 40px 120px 40px;
  }

  .container-home .project:first-of-type figure:first-of-type {
    display:none;
  }

  .container-home .project:first-of-type figure:first-of-type + figure {
    width:100%;
    padding-top: 62.5%;
  }

  .container-home .project:first-of-type {
    width: 48%;
  }

  .container-home .project {
    width: 48%;
    margin-bottom: 50px;
  }

  .project-ov-topic-wrap > section:first-of-type {
  width: 100%;
  }

  .project-ov-topic-wrap > section:first-of-type div {
    width: 100%;
  }

  .project-ov-topic-wrap > section:first-of-type + section {
    width: 100%;
    margin-top:0px;
  }

  .container-home .project-last {
    width: 48%;
    margin-bottom: 50px;
  }

  /* Columns
  -------------------------------------------------- */
  .topic-wrap-home {
    padding: 70px 40px 100px 40px;
  }

  .topic-wrap{
    padding: 70px 40px 100px 40px;
  }

  .project-ov-topic-wrap {
    padding: 0px 40px 100px 40px;
  }

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

  .column-3.topic {
    width: 100%;
    margin-bottom: 0.5px;
    margin-top: 0.5px;
  }

  .seeall p {
    margin-top: 50px;
    margin-bottom:100px;
  }

  /* Project
  -------------------------------------------------- */
  .section-text {
    padding-left: 40px;
    padding-right:40px;
    width:100%;
    font-size: 8rem;
    top:0;
  }

  .container-project {
    padding: 160px 40px 0px;
  }

  .container-project-columns {
    padding: 80px 40px 170px;
  }

  .column-3.project-text {
    width:48%;
  }

  .column-3.project-text-info {
    margin-top:120px;
    width:48%;
  }

  .no-text:empty {
    display:block;
    height: 0;
    content: "";
    width: 48%;
  }

  .container-project-selection .project {
    width: 48%;
  }

  .container-project-columns > section:first-of-type + section {
    width: 49%;
    margin-top:80px;
  }

  .container-project-columns > section:first-of-type {
    width: 100%;
  }

  .container-project-columns > section:first-of-type + section {
    margin-left: 51.515151515%;
  }

  .container-project-selection .project:nth-of-type(2) ~ .project {
    display:none;
  }

  .container-projects-ov .project:nth-of-type(4n + 2):last-of-type {
    margin-right: 0%;
  }

  .container-projects-ov .project:nth-of-type(4n + 3):last-of-type {
    margin-right: 0%;
  }

  .image-holder {
    width:49%;
  }

  .back {
    right:107px;
  }

  /*  Project Bottom
  -------------------------------------------------- */
  .container-project-selection .project:nth-of-type(4n + 2):last-of-type {
    margin-right: 0%;
  }

  /* Project-OV
  -------------------------------------------------- */
  .container-projects-ov {
    padding: 220px 40px 40px 40px;
  }

  .container-project-selection {
    padding: 48px 40px 120px 40px;
  }

  .container-projects-ov .project {
    width: 48%;
    margin-bottom: 70px;
  }

  .column-3.topic-ov {
    width: 100%;
  }

  .headline {
    padding-bottom: 50px;
  }

  .column-3.projects {
    width: 100%;
  }

  .project-ov-title {
    margin-top: 80px;
  }

  /* Publications
  -------------------------------------------------- */
  .publication {
    position: relative;
    margin-bottom:80px;
  }

  .container-projects-ov .publication {
    width: 32%;
  }

  .container-projects-ov .publication:nth-of-type(6n + 1):last-of-type {
    margin-right: 68%;
  }

  .container-projects-ov .publication:nth-of-type(6n + 2):last-of-type {
    margin-right: 34%;
  }

  .container-projects-ov .publication:nth-of-type(6n + 3):last-of-type {
    margin-right: 0%;
  }

  .container-projects-ov .publication:nth-of-type(6n + 4):last-of-type {
    margin-right: 34%;
  }

  .container-projects-ov .publication:nth-of-type(6n + 5):last-of-type {
    margin-right: 34%;
  }

  .textpublications p{
    padding:0 !important;
    padding-bottom:8px!important;
    margin-bottom: 0;
  }

  .textpublications h4 {
    padding-top: 8px;
  }

  .textpublications h5 {
    margin: 0px;
    padding-top: 30px;
  }

  .textpublications p.single-line  {
    padding-bottom:0 !important;
  }

  .single-line:last-of-type {
    display:block !important;
  }

  /* Talks
  -------------------------------------------------- */
  .talk-wrap{
    padding: 220px 40px 170px 40px;
  }

  .talk-wrap > section:first-of-type {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: space-between;
  }

  .talk-wrap > section:first-of-type div {
    width: 100%;
  }

  .talk-wrap > section:first-of-type + section {
    width: 100%;
  }

  .headline {
    width: 100%;
    padding-bottom:50px;
  }

  .headline-exhibition {
    width: 100%;
    padding-bottom:50px;
    padding-top:80px;
  }

  .single-line:last-of-type {
    display:none;
  }

  /* Award
  -------------------------------------------------- */
  .award-wrap{
    padding: 70px 40px 70px 40px;
  }

  .award-wrap > section:first-of-type {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: space-between;
  }

  .award-wrap > section:first-of-type div {
    width: 100%;
  }

  .award-wrap > section:first-of-type + section {
    width: 100%;
  }

  /* Contact
  -------------------------------------------------- */
  .contact-wrap {
    padding: 160px 40px 100px 40px;
  }

  .topic-wrap.about {
    padding: 80px 40px 100px 40px;
  }

  .contact-container {
    margin-left: 40px;
    margin-top: 40%;
    bottom: 40px;
    height: 570px;
    width: 59.375%;
    max-width: 950px;
    min-width: 600px;
  }

  .contact-head {
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .contact-head p {
    font-size: 3rem;
  }

  .column-3.topic.contact:nth-of-type(2) h3, .column-3.topic.contact-data h3 {
    padding-top:80px;
  }

  .column-3.topic.contact p.single-line:last-of-type, .column-3.topic.contact-data p.single-line:last-of-type {
    display: block;
  }

  .topics.bottom .column-3.topic {
    width: 100%;
    padding-bottom: 30px;
  }

  /* Footer
  -------------------------------------------------- */
  .footer-wrap {
    padding: 70px 40px 100px 40px;
  }

  .footer-wrap > section:first-of-type {
    width: 48%;
    order: 1;
  }

  .footer-wrap > section:first-of-type + section {
    width: 48%;
    order: 3;
    padding-top:30px;
  }

  .footer-wrap > section:first-of-type + section + section {
    width: 48%;
    order: 2;
  }

  .footer-wrap > section:first-of-type + section + section + section{
    width: 48%;
    order: 4;
    padding-top:0;
  }

  footer p:last-of-type {
     margin-bottom: 0;
  }

  /* Legal
  -------------------------------------------------- */
  .legal{
    padding: 80px 40px 80px 40px;
  }

  .legal-column {
    width: 48%;
    display: block;
  }

  /* Ups
  -------------------------------------------------- */
  .ups-wrap {
    padding-left: 40px;
    padding-right:40px;
  }

}

/* media screen and (max-width: 750px) and (orientation:landscape)
-------------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 46.875em) and (orientation:landscape) {

  /* Head
  -------------------------------------------------- */
  h1 {
    padding-left:20px;
  }

  h1.black {
    background-color: rgba(255,255,255, .97);
  }

  /* Navigation
  -------------------------------------------------- */
  .navbutton {
    right:20px;
  }

  .filter {
    right:87px;
  }

  .filter h3 {
    padding: 16px 16px 16px 32px;
  }

  .dropdown {
    right:87px;
  }

  .dropdown a {
    padding: 15px 0px 15px 15px;
    margin-bottom: 0;
  }

  nav {
    padding: 40px 20px 80px 20px;
  }

  /* Project Overview
  -------------------------------------------------- */
  .container-home {
    padding: 160px 20px 80px 20px;
  }

  .container-home .project:first-of-type figure:first-of-type {
    display:none;
  }

  .container-home .project:first-of-type figure:first-of-type + figure {
    width:100%;
    padding-top: 62.5%;
  }

  .container-home .project:first-of-type {
    width: 100%;
  }

  .container-home .project {
    width: 100%;
    margin-bottom: calc( (100vw - 160px) * 0.2);
  }

  .container-home .project-last {
    width: 100%;
  }

  /* Navigation
  -------------------------------------------------- */
  .nav-column {
    display: none;
  }

  .nav-column:last-of-type {
    display: block;
    width: 100%;
  }

  nav p {
    font-size: 5vw;
    line-height: 1.3em;
    font-style: normal;
    font-weight: normal;
    color: #ffffff;
    margin:0;
    margin-bottom: 40px;
    max-width: 100%;
  }

  nav a {
    font-size: 5vw;
    line-height: 1.3em;
    font-style: normal;
    font-weight: normal;
    color: #ffffff;
  }

  /* Project
  -------------------------------------------------- */
  .section-text {
    padding-left: 20px;
    padding-right:20px;
    width:100%;
    font-size: 5rem;
    font-size: 8vw;
    top:0;
  }

  .container-project {
    padding: 120px 20px 0px;
  }

  .container-project-columns {
    padding: 80px 20px 170px;
  }

  .column-3.project-text {
    width:100%;
  }

  .column-3.project-text-info {
    margin-top:120px;
    width:100%;
  }

  .no-text:empty {
    display:none;
  }

  .container-project-selection {
    padding: 48px 20px 120px 20px;
  }

  .column-3.project-text.without {
    margin-top: 50px;
  }

  .container-project-selection .project {
    width: 100%;
  }

  .container-project-selection .project:nth-last-child(-n+3) {
    display:none;
  }

  .container-project-columns > section:first-of-type {
    width:100%;
  }

  .container-project-columns > section:first-of-type div {
    width: 100%;
  }

  .container-project-columns > section:first-of-type + section {
    width:100%;
    margin-left: 0%;
    margin-top:80px;
  }

  .container-projects-ov .project:nth-of-type(4n + 2):last-of-type {
    margin-right: 0%;
  }

  .image-holder {
    width:100%;
    margin-bottom: 20px;
  }

  .texthover {
    font-size: 1.8rem;
    padding:25px;
  }

/*  .container-project-columns > section:first-of-type div + div {
    display:none;
  }*/

  .title-info,
  .project-title {
    width: 100%;
  }

  .back {
    right:87px;
  }

  /* Project-OV
  -------------------------------------------------- */
  .container-projects-ov {
    padding: 150px 20px 40px 20px;
  }

  .container-projects-ov .project {
    width: 100%;
    margin-bottom: 40px;
  }

  .column-3.topic {
    width: 100%;
  }

  .project-ov-topic-wrap {
    width: 100%;
  }

  .project-ov-topic-wrap > section:first-of-type {
    width: 100%;
  }

  .project-ov-topic-wrap > section:first-of-type div {
    width: 100%;
  }

  .project-ov-topic-wrap > section:first-of-type + section {
    width: 100%;
    margin-top:0px;
  }

    /* Publications
  -------------------------------------------------- */
  .publication {
    position: relative;
    margin-bottom: 80px;
 }

   .container-projects-ov .publication {
    width: 32%;
  }

  .container-projects-ov .publication:nth-of-type(6n + 1):last-of-type {
    margin-right: 68%;
  }

  .container-projects-ov .publication:nth-of-type(6n + 2):last-of-type {
    margin-right: 34%;
  }

  .container-projects-ov .publication:nth-of-type(6n + 3):last-of-type {
    margin-right: 0%;
  }

  .container-projects-ov .publication:nth-of-type(6n + 4):last-of-type {
    margin-right: 34%;
  }

  .container-projects-ov .publication:nth-of-type(6n + 5):last-of-type {
    margin-right: 34%;
  }

  .textpublications h5 {
    margin: 0px;
    padding-top: 30px;
  }

  /* Columns
  -------------------------------------------------- */
  .topic-wrap-home {
    padding: 70px 20px 0px 20px;
  }

  .topic-wrap, .project-ov-topic-wrap {
    padding: 70px 20px 100px 20px;
  }

  /* Talks
  -------------------------------------------------- */
  .talk-wrap{
    padding: 150px 20px 170px 20px;
  }

  .talk-wrap > section:first-of-type {
    width: 100%;
  }

  .talk-wrap > section:first-of-type div {
    width: 100%;
  }

  .talk-wrap > section:first-of-type + section {
    width: 100%;
  }

  .headline-exhibition {
    width: 100%;
    padding-bottom: 50px;
    padding-top: 80px;
  }

  .column-3.talk {
    width: 100%;
  }

  /* Award
  -------------------------------------------------- */
  .award-wrap{
    padding: 70px 20px 70px 20px;
  }

  .award-wrap > section:first-of-type {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: space-between;
  }

  .award-wrap > section:first-of-type div {
    width: 100%;
  }

  .award-wrap > section:first-of-type + section {
    width: 100%;
  }

  .list:before {
    content:'- ';
    margin-left:-14px;
    padding-bottom:0;
  }

  /* Contact
  -------------------------------------------------- */
  .contact-wrap {
    padding: 160px 20px 20px 20px;
  }

  .topic-wrap.about {
    padding: 80px 20px 100px 20px;
  }

  .contact-container {
    margin-left: 0px;
    margin-top: 0px;
    bottom: 0px;
    height: 100%;
    width: 100%;
    max-width: 950px;
    min-width: 0px;
  }

  .contact-head {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 80px;
    padding-top: 30%;
    bottom: 0px;
  }

  .contact-head p {
    font-size: 2.2rem;
    font-size: 3.5vw;
  }

  .topics.bottom .column-3.topic {
    width: 100%;
    padding-bottom: 30px;
  }

  .topics.bottom {
    margin-left: 20px;
  }

  .container-project-columns.about {
    padding: 60px 20px 80px;
  }

  .afterimg {
    margin-bottom: 40px;
  }

  .column-3.topic.contact:nth-of-type(2) h3, .column-3.topic.contact-data h3 {
    padding-top:80px;
  }

  /* Contact Switch
  -------------------------------------------------- */
  label.btn-de{
    position: absolute;
    bottom: 10px;
    left:20px;
    z-index: 999;
  }

  label.btn-en{
    position: absolute;
    bottom: 10px;
    left:50px;
    z-index: 999;
  }

  .btn-de, .btn-en {
    color: #fff;
    font-size:1.4rem;
    cursor:pointer;
    margin: 18px 0px 18px 0px;
    line-height: 100%;
    display:inline-block;
    margin-right:10px;
  }

  /* Footer
  -------------------------------------------------- */
  .footer-wrap {
    padding: 70px 20px 100px 20px;
  }

  .footer-wrap > section:first-of-type {
    width: 100%;
    order: 1;
  }

  .footer-wrap > section:first-of-type + section {
    width: 100%;
    order: 2;
    padding-top:30px;
  }

  .footer-wrap > section:first-of-type + section + section {
    width: 100%;
    order: 3;
    padding-top: 30px;
  }

  .footer-wrap > section:first-of-type + section + section + section{
    width: 100%;
    order: 4;
    padding-top:0;
  }

  footer p:last-of-type {
    margin-bottom: 0;
  }

  /* Legal
  -------------------------------------------------- */
  .legal{
    padding: 80px 20px 80px 20px;
  }

  .legal-column {
    width: 100%;
    display: block;
  }

  /* Ups
  -------------------------------------------------- */
  .ups-wrap {
    padding-left: 20px;
    padding-right:20px;
  }

}

/* media screen and (max-width: 750px) and (orientation:portrait)
------------------------------------------------------------------ */
@media screen and (max-width: 46.875em) and (orientation:portrait) {

   /* Head
  -------------------------------------------------- */
  h1 {
    padding-left:20px;
    font-size: 2rem;
  }

  h1.black {
    background-color: rgba(255,255,255, .97);
  }

  /* Navigation
  -------------------------------------------------- */
  .navbutton {
    right:20px;
  }

  .filter {
    right:87px;
    width: 66px;
  }

  .filter-close {
    right: 87px;
    width: auto;
    left: 20px;
  }

  .dropdown {
    width:auto;
    left:20px;
    right:87px;
  }

  .filter h3 {
    padding: 16px 16px 16px 16px;
    visibility: hidden;
  }

  .filter-close h3 {
    visibility: visible;
  }

  .dropdown a {
    padding: 16px 0px 16px 0px;
    margin-bottom: 0;
  }

  nav {
    padding: 40px 20px 80px 20px;
  }

  .navlink {
    color:#ffffff;
    border-bottom: 1px solid #ffffff !important;
  }

  .navlink:hover {
    color:#000;
    border-bottom: 1px solid #000 !important;
  }

  /* Project Overview
  -------------------------------------------------- */
  .container-home {
    padding: 160px 20px 80px 20px;
  }

  .container-home .project:first-of-type figure:first-of-type {
    display:none;
  }

  .container-home .project:first-of-type figure:first-of-type + figure {
    width:100%;
    padding-top: 62.5%;
  }

  .container-home .project:first-of-type {
    width: 100%;
  }

  .container-home .project {
    width: 100%;
    margin-bottom: calc( (100vw - 160px) * 0.2);
  }

  .container-home .project-last {
    width: 100%;
  }

  /* Navigation
  -------------------------------------------------- */
  .nav-column {
    display: none;
  }

  .nav-column:last-of-type {
    display: block;
    width: 100%;
  }

  nav p {
    font-size: 7vw;
    line-height: 1.3em;
    font-style: normal;
    font-weight: normal;
    color: #ffffff;
    margin:0;
    margin-bottom: 40px;
    max-width: 100%;
  }

  nav a {
    font-size: 7vw;
    line-height: 1.3em;
    font-style: normal;
    font-weight: normal;
    color: #ffffff;
  }

  /* Project
  -------------------------------------------------- */
  .section-text {
    padding-left: 20px;
    padding-right:20px;
    width:100%;
    font-size: 9vw;
    top:0;
  }

  .container-project {
    padding: 120px 20px 0px;
  }

 .container-project-columns {
    padding: 80px 20px 170px;
  }

  .column-3.project-text {
    width:100%;
  }

  .column-3.project-text-info {
    margin-top:120px;
    width:100%;
  }

  .no-text:empty {
    display:none;
  }

  .container-project-selection {
    padding: 48px 20px 120px 20px;
  }

  .column-3.project-text.without {
    margin-top: 50px;
  }

 .container-project-selection .project {
    width: 100%;
  }

  .container-project-selection .project:first-of-type ~ .project {
    display:none;
  }

  .container-project-columns > section:first-of-type div {
    width: 100%;
  }

  .container-project-columns > section:first-of-type + section {
    width:100%;
    margin-left: 0%;
    margin-top:80px;
  }

  .container-projects-ov .project:nth-of-type(4n + 2):last-of-type {
    margin-right: 0%;
  }

  .image-holder {
    width:100%;
    margin-bottom: 20px;
  }

  .texthover {
    font-size: 1.8rem;
    padding:25px;
  }

/*  .container-project-columns > section:first-of-type div + div {
    display:none;
  }*/

  .title-info,
  .project-title {
      width: 100%;
  }

  .container-project-columns {
    padding: 80px 20px 170px;
  }

  .back {
    right:87px;
  }

  /* Project-OV
  -------------------------------------------------- */
  .container-projects-ov {
    padding: 150px 20px 40px 20px;
  }

  .container-projects-ov .project {
    width: 100%;
    margin-bottom: 40px;
  }

    /* Publications
  -------------------------------------------------- */
  .publication {
    position: relative;
    margin-bottom: 80px;
  }

   .container-projects-ov .publication {
    width: 100%;
  }

  .container-projects-ov .publication:nth-of-type(6n + 1):last-of-type {
    margin-right: 0%;
  }

  .container-projects-ov .publication:nth-of-type(6n + 2):last-of-type {
    margin-right: 0%;
  }

  .container-projects-ov .publication:nth-of-type(6n + 3):last-of-type {
    margin-right: 0%;
  }

  .container-projects-ov .publication:nth-of-type(6n + 4):last-of-type {
    margin-right: 0%;
  }

  .container-projects-ov .publication:nth-of-type(6n + 5):last-of-type {
    margin-right: 0%;
  }

  /* Columns
  -------------------------------------------------- */
  .topic-wrap-home {
    padding: 70px 20px 0px 20px;
  }

  .topic-wrap {
    padding: 70px 20px 100px 20px;
  }

   .project-ov-topic-wrap {
    padding: 0px 20px 100px 20px;
  }

  /* Talks
  -------------------------------------------------- */
  .talk-wrap{
    padding: 150px 20px 170px 20px;
  }

  .column-3.talk {
    width: 100%;
  }

  /* Award
  -------------------------------------------------- */
  .award-wrap{
    padding: 70px 20px 70px 20px;
  }

  .list:before {
    content:'- ';
    margin-left:-14px;
    padding-bottom:0;
  }

  /* Contact
  -------------------------------------------------- */
  .contact-wrap {
    padding: 160px 20px 20px 20px;
  }

  .topic-wrap.about {
    padding: 80px 20px 100px 20px;
  }

  .contact-container {
    margin-left: 0px;
    margin-top: 0px;
    bottom: 0px;
    height: 100%;
    width: 100%;
    max-width: 950px;
    min-width: 0px;
  }

  .contact-head {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 80px;
    padding-top: 30%;
    bottom: 0px;
  }

  .contact-head p {
    font-size: 2.2rem;
    font-size: 6vw;
  }

  .contact-head a {
    font-size: 2.2rem;
    font-size: 6vw;
  }

  .topics.bottom .column-3.topic {
    width: 100%;
    padding-bottom: 30px;
  }

  .topics.bottom {
    margin-left: 20px;
  }

  .container-project-columns.about {
    padding: 60px 20px 80px;
  }

  .afterimg {
    margin-bottom: 40px;
  }

 /* Contact Switch
  -------------------------------------------------- */
  label.btn-de{
    position: absolute;
    bottom: 10px;
    left:20px;
    z-index: 999;
  }

  label.btn-en{
    position: absolute;
    bottom: 10px;
    left:60px;
    z-index: 999;
  }

  .btn-de, .btn-en {
    color: #fff;
    font-size:1.4rem;
    cursor:pointer;
    margin: 18px 0px 18px 0px;
    line-height: 100%;
    display:inline-block;
    margin-right:10px;
  }

  /* Footer
  -------------------------------------------------- */
  .footer-wrap {
    padding: 70px 20px 100px 20px;
  }

  .footer-wrap > section:first-of-type {
    width: 100%;
    order: 1;
  }

  .footer-wrap > section:first-of-type + section {
    width: 100%;
    order: 2;
    padding-top:30px;
  }

  .footer-wrap > section:first-of-type + section + section {
    width: 100%;
    order: 3;
    padding-top: 30px;
  }

  .footer-wrap > section:first-of-type + section + section + section{
    width: 100%;
    order: 4;
    padding-top:0;
  }

  /* Legal
  -------------------------------------------------- */
  .legal{
    padding: 80px 20px 80px 20px;
  }

  .legal-column {
    width: 100%;
    display: block;
  }

  /* Ups
  -------------------------------------------------- */
  .ups-wrap {
    padding-left: 20px;
    padding-right:20px;
  }

}