@charset "UTF-8";

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


html,
body {
  font-family: 'Montserrat', Verdana, sans-serif;
  font-size: 100%;
  font-weight: 400;
  font-style: normal;
  line-height: 1.6;
  color: black;
  margin: 0;
  padding: 0;
  background-color: white;
}

body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  justify-content: center;
}

a:link {
  color: inherit;
  text-decoration: none;
}

a:visited {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: #434343;
  text-decoration: none;
}

a:active {
  color: #434343;
  text-decoration: none;
}

img {
  width: 100%;
}

#wrapper {
   width: 100%;
  /* margin: 0 auto; */
}

header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 20px;
  color:
}

h1,
h2 {
  font-family: 'Montserrat', Verdana, sans-serif;
  font-style: normal;
}

h1 {
  font-size: 28px;
  font-size: 1.75rem;
  line-height: 1.21;
  font-weight: 600;
  text-transform: uppercase;
}

h2 {
  display: flex;
  justify-content: center;
  font-size: 40px;
  font-size: 2.5rem;
  letter-spacing: 0.025rem;
  text-transform: uppercase;
}

h3 {
  font-size: 21px;
  font-size: 1.3125rem;
  line-height: 1.19;
  font-weight: 400;
  letter-spacing: 0.025rem;
  text-transform: uppercase;
  margin-bottom: 0;
}

nav ul {
  padding: 0;
  text-transform: uppercase;
}

nav li {
  font-style: normal;
  font-weight: 600;
  color: black;
  display: inline;
}

nav li:first-child::after {
  content: '|';
  margin-left: 5px;
  margin-right: 5px;
}

nav li:nth-child(2)::after {
  content: '|';
  margin-left: 5px;
  margin-right: 5px;
}

/* enter */

#enter img {
  margin: 2rem;
}

/* thumbs */

#works {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 70px;
}

#works article {
  width: calc((100% - 20px) / 3);
}

#works .work-item {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 2rem;
}

#works .work-title {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: flex-start;
  position: absolute;
  opacity: 0;
  transition: opacity 1s;
  padding: 2rem;
}
#works .work-title p {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: flex-start;
  font-size: 2rem;
  text-transform: uppercase;
}

#works .work-thumb {
  opacity: 1;
  transition: opacity 1s;
}

#works .work-item:hover .work-title {
  opacity: 1;
}

#works .work-item:hover .work-thumb {
  opacity: 0;
}

#works h2 {
  font-weight: 400;
  font-size: 2rem;
}

/* neueformen */



/* faces */

/* Slideshow container */
.slideshow-container {
  max-width: 400px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  font-weight: bold;
  font-size: 18px;
  /* transition: 0.6s ease; */
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}

/* Landschaft */


/* Stillleben */


/* Touch */

#touch video {
  background-color: black;
  width: 100%;
  height: 700px;
}

.slideshowcontainer, .mySlides.fade video {
  width: 100%;
  height: 580px;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  font-weight: bold;
  font-size: 18px;
  /* transition: 0.6s ease; */
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}

/* Cut Me Out */


/* Journal */

#journal .journal-item {
  margin-bottom: 5rem;
}

#journal figcaption {
  color: black;
  font-size: 16px;
  font-weight: 600;
}

#journal-thumb_7 {
text-align: center;
font-size: smaller;
text-indent: 0;
margin: 0.5em;
padding: 0.5em;
}
#journal-thumb_7 img {
  width: 40%
}

#journal-thumb_6 {
  display: flex;
  justify-content: center;
  align-items: baseline;
  height: 80vh;
  background: white;
  margin-left: 5rem;
  margin-right: 5rem;
}
#journal-thumb_6 figure {
  width: 58vh;
  margin: 10px;
  margin-top: 5rem;
}
#caption-thumb_6 {
  text-align: center;
  font-size: smaller;
  text-indent: 0;
  margin-top: 0;
}

#journal-thumb_5 {
text-align: center;
font-size: smaller;
text-indent: 0;
}

#journal-thumb_4 {
  display: flex;
  justify-content: center;
  align-items: baseline;
  padding-top: 2rem;
  text-align: center;
  font-size: smaller;
  text-indent: 0;
  margin-top: 0rem;
}
#journal-thumb_4 figure {
  width: 50vh;
  margin: 20px;
}

#journal-thumb_2 {
text-align: center;
font-size: smaller;
text-indent: 0;
}
#journal-thumb_2 img {
  width: 30%;
}

#journal-thumb_1 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-top: 2rem;
  text-align: center;
  font-size: smaller;
  text-indent: 0;
  margin-top: 0rem;
}
#journal-thumb_1 figure {
  margin: 0;
}


/* Imprint */

#imprint {
  font-size: 70%;
}


/* About */

#firstP, #secondP {
  font-size: 25px;
}

#info, #contact, #exhibitions, #publications, #assistance {
  margin: 1rem;
  }

#info {
  margin-top: 70px;
  line-height: 70px;
}

.portrait {
    margin: 1rem;
    padding-top: 2rem;
    text-align: center;
}
.portrait img {
  max-width: 250px;
  text-align: center;
}
.portrait p {
  font-size: 10px;
  margin: 5px;
}

#contact {
  line-height: 0.5;
  text-align: right;
}
#exhibitions {
  padding-bottom: 50px;
  padding-top: 1rem;
}

#exhibitions dl {
  display: flex;
}

#exhibitions dd {
  margin-inline-start: 100px;
}

#publications {
  padding-bottom: 50px;
}

#publications dl {
  display: flex;
}
#publications dd {
  margin-inline-start: 100px;
}

#assistance dl {
  display: flex;
}
#assistance dd {
  margin-inline-start: 100px;
}

.mySlides.fade figcaption {
  text-align: right;
  font-size: 80%;
  padding-top: 3px;
}


/* footer */

footer {
  margin-top: 120px;
  margin-bottom: 60px;
  margin-left: 2rem;
  margin-right: 2rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.top-link {
  transition: all .25s ease-in-out;
  position: fixed;
  bottom: 0;
  right: 0;
  display: inline-flex;
  margin: 0 5em 4em 0;
 cursor: pointer;
 align-items: center;
 justify-content: center;

 border-radius: 50%;
 padding: .25em;
 width: 60px;
 height: 60px;
}

.show {
  visibility: visible;
  opacity: 1;
}

.hide {
  visibility: hidden;
  opacity: 0;
}

svg {
 fill: #000;
 width: 24px;
 height: 12px;
}

&:hover {
 background-color: #E8E8E8;

    svg {
     fill: #000000;
    }
}
.screen-reader-text {
    position: absolute;
    clip-path: inset(50%);
    margin: -1px;
    border: 0;
    padding: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    word-wrap: normal !important;
    clip: rect(1px, 1px, 1px, 1px);

    &:focus {
        display: block;
        top: 5px;
        left: 5px;
        z-index: 100000; // Above WP toolbar
        clip-path: none;
        background-color: #eee;
        padding: 15px 23px 14px;
        width: auto;
        height: auto;
        text-decoration: none;
        line-height: normal;
        color: #444;
        font-size: 1em;
        clip: auto !important;
    }
}

#btn-up {
  position: fixed;
  top: 24px;
  right: 16px;
  display: none;
  text-transform: uppercase;
}

#imprint:hover,
#btn-top:hover {
  color: #434343;
  text-decoration: none;
}

#imprint {
  color: black;
  font-size: 100%;
  font-weight: 600;
  margin: 1rem;
}

@media only screen and (max-width: 1024px) {
  #wrapper {
    width: 100%;
    padding: 16px;
  }
}

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

  #btn-up {
    display: block;
    cursor: pointer;
  }

  header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
  }

  h1 {
    z-index: 1;
  }

  nav {
    background-color: white;
    width: 100%;
    height: 100vh;
    position: fixed;
    top: -100vh;
    left: 0;
    transition: top 1s;
  }

  nav ul {
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    flex-direction: column;
  }

  nav li {
    font-size: 2rem;
    margin-top: 5rem;
  }

  nav li:first-child::after {
    content: '';
    margin-left: 5px;
    margin-right: 5px;
  }

  nav li:nth-child(2)::after {
    content: '';
    margin-left: 5px;
    margin-right: 5px;
  }

  #works .work-item {
    flex-direction: column-reverse;
    margin-bottom: 50px;
    margin-top: 80px;
  }

  #works .work-title {
    position: static;
    color: black;

  }

  #works h2 {
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
  }

  h2 {
    font-size: 18px;
    font-size: 1.125rem;
  }

  #works article {
    width: 100%;
  }

  #works .work-title {
    opacity: 1;
    transition: all 0s ease 0s;
    margin: 0;
    line-height: 30px;
    padding-top: 0;
  }

  #works .work-thumb {
    opacity: 1;
    transition: all 0s ease 0s;
  }

  #works .work-item:hover .work-thumb {
    opacity: 1;
  }

  #faces .faces-item {
    flex-direction: column-reverse;
    margin-bottom: 50px;
    margin-top: 80px;
  }

  #faces .faces-title {
    position: static;
    color: black;
  }
  #faces-thumb_1,
  #faces-thumb_2,
  #faces-thumb_3,
  #faces-thumb_4,
  #faces-thumb_5,
  #faces-thumb_5,
  #faces-thumb_6,
  #faces-thumb_7 {
    padding: 0;
    margin: 0;
    background: none;
    width: 100%;
  }
  #faces-thumb_1 img,
  #faces-thumb_3 img,
  #faces-thumb_5 img,
  #faces-thumb_6 img,
  #faces-thumb_7 img,
  #faces-thumb_2 img {
    width: 100%;
  }

  #landschaft .landschaft-item {
    flex-direction: column-reverse;
    margin-bottom: 50px;
    margin-top: 80px;
  }
  #landschaft-thumb_1,
  #landschaft-thumb_2,
  #landschaft-thumb_3,
  #landschaft-thumb_4,
  #landschaft-thumb_5,
  #landschaft-thumb_6,
  #landschaft-thumb_7,
  #landschaft-thumb_8,
  #landschaft-thumb_9,
  #landschaft-thumb_10,
  #landschaft-thumb_11 {
    padding: 0;
    margin: 0;
    background: none;
    width: 100%;
  }
  #landschaft-thumb_2 img,
  #landschaft-thumb_5 img,
  #landschaft-thumb_6 img,
  #landschaft-thumb_9 img,
  #landschaft-thumb_1 img,
  #landschaft-thumb_3 img,
  #landschaft-thumb_4 img,
  #landschaft-thumb_7 img,
  #landschaft-thumb_8 img,
  #landschaft-thumb_10 img,
  #landschaft-thumb_11 img {
    width: 100%;
  }

  #cut .cut-item {
    flex-direction: column-reverse;
    margin-bottom: 50px;
    margin-top: 80px;
  }
  #cut-thumb_1,
  #cut-thumb_2,
  #cut-thumb_3,
  #cut-thumb_4,
  #cut-thumb_5,
  #cut-thumb_8,
  #cut-thumb_6,
  #cut-thumb_9,
  #cut-thumb_8,
  #cut-thumb_6,
  #cut-thumb_5,
  #cut-thumb_1 {
    padding: 0;
    margin: 0;
    background: none;
    width: 100%;
  }
  #cut-thumb_2 img,
  #cut-thumb_3 img,
  #cut-thumb_9 img,
  #cut-thumb_4 img {
    width: 100%;
  }

  .bildnis-item {
    flex-direction: column-reverse;
    margin-bottom: 50px;
    margin-top: 80px;
  }
  #bildnis-thumb_1,
  #bildnis-thumb_2,
  #bildnis-thumb_3,
  #bildnis-thumb_4,
  #bildnis-thumb_5,
  #bildnis-thumb_6,
  #bildnis-thumb_7,
  #bildnis-thumb_8,
  #bildnis-thumb_9,
  #bildnis-thumb_10,
  #bildnis-thumb_11,
  #bildnis-thumb_12,
  #bildnis-thumb_13,
  #bildnis-thumb_14,
  #bildnis-thumb_15,
  #bildnis-thumb_16,
  #bildnis-thumb_17 {
    padding: 0;
    margin: 0;
    background: none;
    width: 100%;
  }
  #bildnis-thumb_1 img,
  #bildnis-thumb_2 img,
  #bildnis-thumb_3 img,
  #bildnis-thumb_4 img,
  #bildnis-thumb_5 img,
  #bildnis-thumb_6 img,
  #bildnis-thumb_7 img,
  #bildnis-thumb_8 img,
  #bildnis-thumb_9 img,
  #bildnis-thumb_10 img,
  #bildnis-thumb_11 img,
  #bildnis-thumb_12 img,
  #bildnis-thumb_13 img,
  #bildnis-thumb_14 img,
  #bildnis-thumb_15 img,
  #bildnis-thumb_16 img,
  #bildnis-thumb_17 img {
    width: 100%;
  }

  #stillleben .stillleben-item {
    flex-direction: column-reverse;
    margin-bottom: 50px;
    margin-top: 80px;
  }
  #stillleben-thumb_1,
  #stillleben-thumb_2,
  #stillleben-thumb_3,
  #stillleben-thumb_4 {
    padding: 0;
    margin: 0;
    background: none;
    width: 100%;
  }
  #stillleben-thumb_1 img,
  #stillleben-thumb_2 img,
  #stillleben-thumb_3 img,
  #stillleben-thumb_4 img {
    width: 100%
  }

  #touch video {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #touch h2 {
    position: static;
    color: black;
    display: flex;
    justify-content: flex-start;
    padding-top: 3rem;
  }

  #alien .alien-item {
    flex-direction: column-reverse;
    margin-bottom: 50px;
    margin-top: 80px;
  }
  #alien-thumb_1,
  #alien-thumb_2,
  #alien-thumb_3,
  #alien-thumb_4,
  #alien-thumb_5,
  #alien-thumb_6,
  #alien-thumb_7,
  #alien-thumb_8,
  #alien-thumb_9,
  #alien-thumb_11,
  #alien-thumb_12,
  #alien-thumb_13 {
    padding: 0;
    margin: 0;
    background: none;
    width: 100%;
  }
  #alien-thumb_1 img,
  #alien-thumb_2 img,
  #alien-thumb_3 img,
  #alien-thumb_4 img,
  #alien-thumb_5 img,
  #alien-thumb_6 img,
  #alien-thumb_7 img,
  #alien-thumb_9 img,
  #alien-thumb_11 img,
  #alien-thumb_12 img,
  #alien-thumb_13 img {
    width: 100%
  }

  #journal .journal-item {
    flex-direction: column-reverse;
    margin-bottom: 50px;
    margin-top: 80px;
  }
  #journal .journal-title {
    position: static;
    color: black;
  }
  #journal-thumb_7,
  #journal-thumb_6,
  #journal-thumb_4,
  #journal-thumb_5,
  #journal-thumb_2,
  #journal-thumb_1 {
    padding: 0;
    margin: 0;
    background: none;
    width: 100%;
    height: 100%;
  }
  #journal-thumb_7 img,
  #journal-thumb_6 img,
  #journal-thumb_4 img,
  #journal-thumb_5 img,
  #journal-thumb_2 img,
  #journal-thumb_1 img {
    width: 100%;
  }

  #about-page {
    margin: 0;
  }
  #info {
    line-height: 28px;
  }
  #about-page h2, #firstP, #secondP, #contact, #exhibitions, #publications, #assistance {
    margin-left: 1em;
    margin-right: 1em;
    font-size: 17px;
  }
  #about-page h3 {
    font-size: 17px;
  }

  #impressum h2 {
    display: none;
  }
  #impressum {
    position: static;
    color: black;
    margin-top: 5rem;
  }


  footer {
    margin-top: 50px;
  }


}